/* Platinum Migration — 2026 UI
   --------------------------------------------------------
   Dark, typographic, content-first. Sidebar navigation, card-based
   layout, dedicated progress and log surfaces, accessible contrast. */

:root {
  /* 2027 SaaS migration palette — deep midnight-cobalt base with electric
     cobalt + indigo accents. Slightly cooler & darker than the previous
     navy, with higher chroma on highlights for an "advanced product" feel. */
  --bg: #060912;
  --bg-2: #080c18;
  --surface: #0e1424;
  --surface-2: #131a2e;
  --surface-3: #1b2541;
  --surface-4: #243056;
  --border: #1f2a4a;
  --border-hi: #2f3d68;
  --fg: #eaf0fd;
  --fg-dim: #a5b1d4;
  --muted: #6b7aa1;
  --accent: #4d8bff;
  --accent-2: #6e7bff;
  --accent-3: #7d5cff;
  --accent-glow: rgba(77, 139, 255, 0.55);
  --accent-soft: rgba(77, 139, 255, 0.12);
  --accent-soft-hi: rgba(77, 139, 255, 0.22);
  --ok: #34d399;
  --warn: #fbbf24;
  --err: #ef4457;
  --info: #38bdf8;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 12px 40px rgba(2, 6, 20, 0.55), 0 2px 10px rgba(2, 6, 20, 0.4);
  --shadow-glow: 0 0 0 1px rgba(77, 139, 255, 0.12), 0 8px 30px rgba(77, 139, 255, 0.18);
  --transition: 180ms cubic-bezier(.2, .6, .2, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  /* Ambient depth — soft cobalt + indigo wash on a near-black midnight base.
     Fixed attachment so the gradient stays anchored to the viewport while
     content scrolls, which gives the app a steady "spatial" feel. */
  background:
    radial-gradient(1200px 700px at 8% -8%, rgba(77, 139, 255, 0.10), transparent 60%),
    radial-gradient(900px 600px at 100% 6%, rgba(125, 92, 255, 0.08), transparent 60%),
    radial-gradient(1000px 700px at 50% 110%, rgba(56, 189, 248, 0.06), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--fg);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-2); }
::selection { background: rgba(77, 139, 255, 0.35); color: #fff; }
code, pre { font-family: var(--mono); font-size: 0.88em; }
code { background: var(--surface-2); padding: 2px 6px; border-radius: 4px; color: var(--fg); }
pre { background: var(--surface-2); padding: 14px; border-radius: var(--radius-sm); overflow-x: auto; border: 1px solid var(--border); }
h1 { font-size: 1.65rem; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.01em; }
h2 { font-size: 1.1rem; font-weight: 600; margin: 22px 0 8px; color: var(--fg); }
h3 { font-size: 0.95rem; font-weight: 600; margin: 16px 0 6px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.06em; }
p { margin: 6px 0; color: var(--fg-dim); }

/* Layout ---------------------------------------------------------- */
/* Sidebar width follows Material Design's 256–320 px guidance for
   navigation drawers. 300 px sits comfortably mid-range — gives long
   labels and the brand lock-up breathing room without crowding the
   main content column on a 1366-wide laptop. */
.app-shell {
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: 100vh;
}
.sidebar {
  background:
    linear-gradient(180deg, rgba(77, 139, 255, 0.045), transparent 240px),
    linear-gradient(180deg, var(--surface), var(--bg-2));
  border-right: 1px solid var(--border);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.02);
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--border-hi); }
/* Brand lock-up: [Platinum logo] [MIGRATION pill]
 * Standard product-branding pattern — primary mark on the left, product
 * name as an accent-tinted eyebrow on the right. The pill carries the
 * accent colour so the section reads as a unified brand element rather
 * than a stacked logo + caption. */
.sidebar .brand {
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  padding: 12px 10px 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
  color: var(--fg);
  text-decoration: none;
  transition: opacity var(--transition);
}
.sidebar .brand:hover { color: var(--fg); text-decoration: none; opacity: 0.9; }
.sidebar .brand img {
  flex: 0 1 auto;
  width: auto; max-width: 145px; height: auto;
  display: block;
  /* PNG is blue-on-transparent; on the dark surface it reads as our accent.
     A soft drop-shadow lifts it without muddying the letterforms. */
  filter: drop-shadow(0 0 12px rgba(77, 139, 255, 0.45));
}
.sidebar .brand .brand-sub {
  flex: 0 0 auto; margin-left: auto;
  color: var(--accent);
  font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em;
  padding: 4px 8px;
  background: linear-gradient(135deg, rgba(77, 139, 255, 0.16), rgba(125, 92, 255, 0.16));
  border: 1px solid rgba(77, 139, 255, 0.35);
  border-radius: 6px;
  white-space: nowrap;
  line-height: 1;
  box-shadow: 0 0 14px rgba(77, 139, 255, 0.18);
}
.sidebar .brand:hover .brand-sub {
  background: linear-gradient(135deg, rgba(77, 139, 255, 0.26), rgba(125, 92, 255, 0.24));
  border-color: rgba(77, 139, 255, 0.55);
  box-shadow: 0 0 18px rgba(77, 139, 255, 0.3);
}
.sidebar .nav a {
  /* 44px target height — meets WCAG 2.5.5 (Target Size) minimum
     for pointer/touch accessibility. */
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: var(--radius-sm);
  color: var(--fg-dim); font-weight: 500; font-size: 0.94rem;
  min-height: 44px;
  transition: background var(--transition), color var(--transition);
  text-decoration: none; position: relative;
}
.sidebar .nav a > span:not(.nav-step) {
  /* Take all remaining space and truncate cleanly if a translation or
     longer label ever exceeds the column. Without min-width:0 the flex
     item refuses to shrink and the label wraps. */
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar .nav a:hover { background: var(--surface-2); color: var(--fg); text-decoration: none; }
.sidebar .nav a.active {
  background: linear-gradient(90deg, rgba(77, 139, 255, 0.16), rgba(125, 92, 255, 0.08) 65%, transparent);
  color: var(--fg);
  box-shadow: inset 0 0 0 1px rgba(77, 139, 255, 0.18);
}
.sidebar .nav a.active::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-3));
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 12px var(--accent-glow);
}
.sidebar .nav a svg {
  width: 20px; height: 20px; flex-shrink: 0; color: var(--muted);
  transition: color var(--transition);
}
.sidebar .nav a:hover svg,
.sidebar .nav a.active svg { color: var(--accent); }
.sidebar .nav a .nav-step {
  /* Compact circular numeric badge — sits at the row end without
     stealing label width. White-space:nowrap stops the badge itself
     from wrapping when the column is tight. */
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  font-size: 0.72rem; font-weight: 700; line-height: 1;
  color: var(--muted);
  background: var(--surface-2); border-radius: 999px;
  border: 1px solid var(--border);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: color var(--transition), border-color var(--transition),
              background var(--transition), box-shadow var(--transition);
}
.sidebar .nav a.active .nav-step {
  color: #fff;
  border-color: rgba(77, 139, 255, 0.6);
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  box-shadow: 0 0 12px rgba(77, 139, 255, 0.45);
}
.sidebar .nav a svg.nav-ext {
  width: 12px; height: 12px; margin-left: auto; opacity: 0.5;
}
.sidebar .nav .section {
  color: var(--muted); text-transform: uppercase; font-size: 0.72rem;
  padding: 18px 14px 8px; letter-spacing: 0.12em; font-weight: 600;
}
/* Profile card pinned at the bottom of the sidebar.
 *
 * Layout: [avatar] [name + tier]                 [logout]
 *
 * The avatar's gradient and ring colour come from the .tier-* modifier,
 * so the same component represents Standard ($23k) and Enterprise ($30k)
 * plans without duplicating markup.
 */
.user-card {
  margin-top: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  transition: border-color var(--transition), box-shadow var(--transition);
}
.user-card:hover {
  border-color: var(--border-hi, var(--border));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset;
}

/* Avatar — circular, displays the first character of the username.
 * The gradient fills the entire circle; the tier ring sits just outside. */
.user-avatar {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-3) 100%);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--border),
              0 4px 14px rgba(77, 139, 255, 0.35);
  user-select: none;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.user-card.tier-pro .user-avatar {
  background: linear-gradient(135deg, #fbbf24 0%, #ef8a3c 100%);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px rgba(251, 191, 36, 0.5),
              0 4px 14px rgba(251, 191, 36, 0.3);
}
.user-card.tier-basic .user-avatar {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-3) 100%);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px rgba(77, 139, 255, 0.45),
              0 4px 14px rgba(77, 139, 255, 0.3);
}

/* Username + tier stack. min-width:0 lets long usernames truncate
 * instead of pushing the logout button off the card. */
.user-meta { min-width: 0; display: flex; flex-direction: column; gap: 3px; line-height: 1.2; }
.user-meta .user-name {
  color: var(--fg); font-weight: 600; font-size: 0.92rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-meta .user-tier {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.user-meta .user-tier .tier-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.04);
}
.user-card.tier-basic .user-tier { color: var(--accent); }
.user-card.tier-pro .user-tier { color: #fbbf24; }

/* Logout — square icon button. 36×36 keeps it within the 44px WCAG
 * target zone of the profile card itself; danger-tint on hover signals
 * intent without screaming for attention at rest. */
.user-logout { margin: 0; }
.user-logout-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  width: 36px; height: 36px; padding: 0;
  border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.user-logout-btn svg { width: 18px; height: 18px; }
.user-logout-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.35);
  color: #ff8892;
}
.user-logout-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.main { padding: 28px 36px 60px; min-width: 0; }
.main-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; }
.main-header .crumbs { color: var(--muted); font-size: 0.85rem; }
.main-header .crumbs a { color: var(--fg-dim); }

/* Login page: full-screen variant --------------------------------- */
.app-shell.auth {
  grid-template-columns: 1fr;
  place-items: center;
  min-height: 100vh;
  background:
    radial-gradient(900px 500px at 10% 5%, rgba(77, 139, 255, 0.14), transparent),
    radial-gradient(700px 500px at 95% 95%, rgba(125, 92, 255, 0.10), transparent),
    radial-gradient(600px 400px at 50% 50%, rgba(56, 189, 248, 0.05), transparent),
    var(--bg);
}
.auth-card {
  width: 100%; max-width: 420px;
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--border);
  padding: 32px 28px;
  border-radius: var(--radius);
  box-shadow: var(--shadow), var(--shadow-glow);
  position: relative;
}
.auth-card::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(77, 139, 255, 0.4), transparent 40%, rgba(125, 92, 255, 0.3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.auth-brand {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin-bottom: 18px;
}
.auth-brand img {
  width: 220px; max-width: 80%; height: auto; display: block;
  filter: drop-shadow(0 0 18px rgba(77, 139, 255, 0.5));
}
.auth-brand .auth-sub {
  color: var(--muted); font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.24em;
}

/* Cards ----------------------------------------------------------- */
.card {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 16px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px rgba(2, 6, 20, 0.35);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.card:hover { border-color: var(--border-hi); }
.card-hi {
  background:
    radial-gradient(600px 200px at 0% 0%, rgba(77, 139, 255, 0.10), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--surface-2));
}
.card > h1:first-child, .card > h2:first-child { margin-top: 0; }

/* Buttons / forms ------------------------------------------------- */
button, .btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--fg);
  border: 1px solid var(--border);
  font-weight: 500; font-size: 0.88rem; cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
              transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
}
button:hover, .btn:hover {
  background: var(--surface-3); border-color: var(--border-hi);
  box-shadow: 0 4px 14px rgba(2, 6, 20, 0.5);
}
button:active, .btn:active { transform: translateY(1px); }
button.primary, .btn.primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-3) 100%);
  color: #fff; border-color: transparent; font-weight: 600;
  box-shadow: 0 6px 20px rgba(77, 139, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
button.primary:hover, .btn.primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 8px 26px rgba(77, 139, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
button.danger, .btn.danger {
  background: linear-gradient(135deg, var(--err), #b91c2c);
  color: #fff; border-color: transparent;
  box-shadow: 0 6px 18px rgba(239, 68, 87, 0.35);
}
button.link { background: none; border: none; color: var(--accent); cursor: pointer; padding: 0; font-size: 0.88rem; }
button.link:hover { color: var(--accent-2); box-shadow: none; }
.actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

label { display: block; margin: 14px 0; color: var(--fg); font-weight: 500; font-size: 0.88rem; }
label .hint { display: block; color: var(--muted); font-weight: 400; font-size: 0.82rem; margin-top: 2px; }
input[type=text], input[type=password], input[type=number], input[type=email], input[type=search], select, textarea {
  width: 100%; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--fg);
  font-size: 0.92rem; font-family: inherit;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); background: var(--surface-3);
  box-shadow: 0 0 0 3px rgba(77, 139, 255, 0.18);
}
input::placeholder, textarea::placeholder { color: var(--muted); }

/* Messages -------------------------------------------------------- */
.messages { list-style: none; padding: 0; margin: 0 0 16px; }
.messages .msg {
  padding: 10px 14px; border-radius: var(--radius-sm);
  margin-bottom: 6px; border: 1px solid var(--border);
  backdrop-filter: blur(8px);
}
.messages .success { background: rgba(52, 211, 153, 0.10); border-color: rgba(52, 211, 153, 0.4); color: #c7f9e3; }
.messages .warning { background: rgba(251, 191, 36, 0.10); border-color: rgba(251, 191, 36, 0.4); color: #fde68a; }
.messages .error   { background: rgba(239, 68, 87, 0.12); border-color: rgba(239, 68, 87, 0.4); color: #fbd1d7; }
.messages .info    { background: rgba(77, 139, 255, 0.10); border-color: rgba(77, 139, 255, 0.4); color: #cbdcff; }

/* Tables ---------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 0.9rem; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); }
th {
  color: var(--muted); font-weight: 600; font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  background: linear-gradient(180deg, rgba(77, 139, 255, 0.04), transparent);
}
td.right, th.right { text-align: right; }
tr { transition: background var(--transition); }
tr:hover td { background: rgba(77, 139, 255, 0.05); }

/* Badges ---------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--fg-dim);
  letter-spacing: 0.03em;
}
.badge.ok { background: rgba(52, 211, 153, 0.14); border-color: rgba(52, 211, 153, 0.4); color: #6ee7b7; }
.badge.warn { background: rgba(251, 191, 36, 0.14); border-color: rgba(251, 191, 36, 0.4); color: #fcd34d; }
.badge.err { background: rgba(239, 68, 87, 0.14); border-color: rgba(239, 68, 87, 0.4); color: #ff8892; }
.badge.info { background: rgba(56, 189, 248, 0.14); border-color: rgba(56, 189, 248, 0.4); color: #7dd3fc; }
.badge.live {
  background: linear-gradient(135deg, rgba(77, 139, 255, 0.18), rgba(125, 92, 255, 0.18));
  border-color: rgba(77, 139, 255, 0.5);
  color: #c9d8ff;
  box-shadow: 0 0 12px rgba(77, 139, 255, 0.3);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* Stat grid ------------------------------------------------------- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.kv {
  background: linear-gradient(180deg, var(--surface-2), var(--bg-2));
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px;
  transition: border-color var(--transition), transform var(--transition);
}
.kv:hover { border-color: var(--border-hi); transform: translateY(-1px); }
.kv .k { color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.kv .v { font-size: 1.35rem; margin-top: 4px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg); }
.kv .v.small { font-size: 0.92rem; font-weight: 500; font-family: var(--mono); }

/* Progress bar ---------------------------------------------------- */
.progress {
  width: 100%; height: 10px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; overflow: hidden; position: relative;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent-3) 100%);
  transition: width 400ms ease;
  box-shadow: 0 0 18px rgba(77, 139, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.progress-fill.indeterminate {
  width: 30% !important;
  animation: slide 1.4s ease-in-out infinite;
}
@keyframes slide {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(420%); }
}
.progress-meta { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--fg-dim); margin-top: 6px; }
.progress-meta .pct { font-variant-numeric: tabular-nums; font-family: var(--mono); }

/* Stage hero (circular ring + numbered step dots) ----------------- */
.stage-hero {
  background:
    radial-gradient(circle at 0% 0%, rgba(77, 139, 255, 0.14), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(125, 92, 255, 0.12), transparent 55%),
    linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.stage-hero.is-done {
  background:
    radial-gradient(circle at 0% 0%, rgba(52, 211, 153, 0.14), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(77, 139, 255, 0.10), transparent 55%),
    linear-gradient(180deg, var(--surface), var(--bg-2));
  border-color: rgba(52, 211, 153, 0.4);
}
.stage-hero.is-failed {
  background:
    radial-gradient(circle at 0% 0%, rgba(239, 68, 87, 0.14), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(251, 191, 36, 0.10), transparent 55%),
    linear-gradient(180deg, var(--surface), var(--bg-2));
  border-color: rgba(239, 68, 87, 0.4);
}
.stage-hero-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  align-items: center;
}
.stage-hero-body { display: flex; flex-direction: column; gap: 14px; }

.ring-wrap {
  position: relative;
  width: 170px; height: 170px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
}
.ring {
  width: 100%; height: 100%;
  transform: rotate(-90deg);
  filter: drop-shadow(0 6px 24px rgba(77, 139, 255, 0.35));
}
.ring-track {
  fill: none;
  stroke: var(--surface-3);
  stroke-width: 10;
}
.ring-bar {
  fill: none;
  stroke: url(#ringGrad);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 600ms cubic-bezier(.2,.6,.2,1);
}
.stage-hero.is-done .ring-bar { stroke: url(#ringGradOk); }
.stage-hero.is-failed .ring-bar { stroke: url(#ringGradErr); }
.stage-hero.is-running .ring-wrap::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(77, 139, 255, 0.3);
  animation: ring-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ring-pulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 0.75; transform: scale(1.02); }
}
.ring-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  pointer-events: none;
}
.ring-pct {
  font-size: 2.2rem; font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--fg);
  line-height: 1;
}
.ring-pct .ring-unit {
  font-size: 1rem; font-weight: 500; color: var(--muted); margin-left: 2px;
}
.ring-sub {
  margin-top: 6px;
  font-size: 0.75rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em;
}

.mini-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; position: relative;
}
.mini-steps::before {
  content: "";
  position: absolute;
  top: 18px; left: 8%; right: 8%;
  height: 2px;
  background: var(--border);
  z-index: 0;
  border-radius: 999px;
}
.mini-step {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  position: relative; z-index: 1;
}
.mini-dot {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.88rem; color: var(--muted);
  position: relative;
  transition: all 260ms cubic-bezier(.2,.6,.2,1);
}
.mini-check {
  width: 18px; height: 18px; color: #0b0d12;
  position: absolute; opacity: 0; transform: scale(0.6);
  transition: opacity 180ms ease, transform 260ms cubic-bezier(.2,.6,.2,1);
}
.mini-step.active .mini-dot {
  border-color: var(--accent);
  color: var(--fg);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  box-shadow: 0 0 0 4px rgba(77, 139, 255, 0.18), 0 0 22px rgba(77, 139, 255, 0.5);
  animation: mini-pulse 1.6s ease-in-out infinite;
}
.mini-step.done .mini-dot {
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  border-color: transparent;
  color: transparent;
  box-shadow: 0 6px 18px rgba(77, 139, 255, 0.45);
}
.mini-step.done .mini-check { opacity: 1; transform: scale(1); }
.mini-step.done .mini-num { opacity: 0; }
.mini-step.fail .mini-dot {
  background: linear-gradient(135deg, var(--err), #fbbf24);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px rgba(239, 68, 87, 0.4);
}
@keyframes mini-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(77, 139, 255, 0.18), 0 0 22px rgba(77, 139, 255, 0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(77, 139, 255, 0.10), 0 0 28px rgba(77, 139, 255, 0.7); }
}
.mini-meta {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.mini-label-row {
  width: 100%;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.mini-label {
  font-weight: 600; font-size: 0.82rem; color: var(--fg);
}
.mini-pct {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.6rem; font-weight: 700;
  line-height: 1; letter-spacing: -0.02em;
  color: var(--muted);
  transition: color 200ms ease, text-shadow 200ms ease;
}
.mini-step.active .mini-pct {
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: 0 0 22px rgba(77, 139, 255, 0.4);
}
.mini-step.done .mini-pct { color: var(--ok); }
.mini-step.fail .mini-pct { color: var(--err); }
.mini-progress {
  width: 100%; height: 5px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; overflow: hidden;
}
.mini-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  box-shadow: 0 0 10px rgba(77, 139, 255, 0.5) inset;
  transition: width 400ms ease;
}
.mini-step.done .mini-progress-fill {
  background: linear-gradient(90deg, #34d399, var(--accent));
}
.mini-step.fail .mini-progress-fill {
  background: linear-gradient(90deg, var(--err), #fbbf24);
}
.mini-state {
  font-size: 0.7rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.mini-step.done .mini-state { color: var(--ok); }
.mini-step.active .mini-state { color: var(--accent); }
.mini-step.fail .mini-state { color: var(--err); }

/* Stepper --------------------------------------------------------- */
.stepper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.stepper.three { grid-template-columns: repeat(3, 1fr); }
.step {
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 12px 14px; border-radius: var(--radius-sm);
  display: flex; flex-direction: column; gap: 4px;
}
.step.active {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(77, 139, 255, 0.10), var(--surface-2));
  box-shadow: 0 0 0 1px rgba(77, 139, 255, 0.2), 0 6px 18px rgba(77, 139, 255, 0.18);
}
.step.done { border-color: rgba(52, 211, 153, 0.45); background: rgba(52, 211, 153, 0.04); }
.step.fail { border-color: rgba(239, 68, 87, 0.45); background: rgba(239, 68, 87, 0.04); }
.step .label { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }
.step .name { font-weight: 600; font-size: 0.95rem; }
.step .hint { color: var(--fg-dim); font-size: 0.8rem; }

/* Log console ----------------------------------------------------- */
.log-console {
  background:
    linear-gradient(180deg, rgba(77, 139, 255, 0.04), transparent 80px),
    #03060f;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.55;
  color: #d3dbee;
  padding: 14px 16px;
  max-height: 560px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.5);
}
.log-console .row { display: grid; grid-template-columns: 140px 70px 60px 1fr; gap: 10px; padding: 2px 0; }
.log-console .row .ts { color: var(--muted); }
.log-console .row .stage { color: var(--accent); text-transform: uppercase; font-size: 0.72rem; }
.log-console .row .lvl { color: var(--muted); text-transform: uppercase; font-size: 0.72rem; }
.log-console .row .msg { white-space: pre-wrap; }
.log-console .row.info .lvl { color: #7dd3fc; }
.log-console .row.debug .lvl { color: #63718a; }
.log-console .row.warning .lvl { color: #fcd34d; }
.log-console .row.error .lvl, .log-console .row.error .msg { color: #ff8892; }
.log-console .row.metric .lvl { color: var(--accent-3); }
.log-console .row.metric .msg { color: #b8a3ff; }
.log-console::-webkit-scrollbar { width: 8px; }
.log-console::-webkit-scrollbar-track { background: transparent; }
.log-console::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 4px; }

.status-line {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 0.88rem;
  margin-bottom: 10px;
}

/* Misc ------------------------------------------------------------ */
.muted { color: var(--muted); }
.small { font-size: 0.82rem; }
.inline { display: inline; }
.flex { display: flex; gap: 10px; align-items: center; }
.between { display: flex; justify-content: space-between; align-items: center; }
.nowrap { white-space: nowrap; }
.ts { color: var(--muted); font-family: var(--mono); font-size: 0.8rem; }
hr.divider { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }

/* Welcome / overview page ---------------------------------------- */
.hero-card {
  position: relative;
  background:
    radial-gradient(700px 220px at 8% 0%, rgba(77, 139, 255, 0.18), transparent 65%),
    radial-gradient(600px 260px at 95% 100%, rgba(125, 92, 255, 0.14), transparent 65%),
    radial-gradient(500px 200px at 50% 50%, rgba(56, 189, 248, 0.05), transparent 65%),
    linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  padding: 28px 32px;
  margin-bottom: 22px;
  box-shadow: var(--shadow), 0 0 1px rgba(77, 139, 255, 0.2);
  overflow: hidden;
}
.hero-card::after {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(77, 139, 255, 0.6), rgba(125, 92, 255, 0.6), transparent);
}
.hero-card h1 { font-size: 1.9rem; }
.hero-card .hero-lead {
  font-size: 1.02rem; color: var(--fg-dim);
  max-width: 780px; line-height: 1.6;
}

/* Horizontal flow diagram — three steps with two arrows between them.
 * Pattern is 1fr auto 1fr auto 1fr (step / arrow / step / arrow / step);
 * the equal-1fr columns share leftover space so the cards always reach
 * the right edge of the main content column instead of leaving a gap. */
.flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  margin: 10px 0 34px;
  width: 100%;
}
.flow-step {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.flow-step:hover {
  border-color: var(--border-hi); transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(2, 6, 20, 0.5), 0 0 0 1px rgba(77, 139, 255, 0.18);
}
.flow-step::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-radius: 3px 0 0 3px; opacity: 0.6;
}
.flow-step.flow-1::before { background: linear-gradient(180deg, #38bdf8, var(--accent)); box-shadow: 0 0 12px rgba(56, 189, 248, 0.5); }
.flow-step.flow-2::before { background: linear-gradient(180deg, var(--accent), var(--accent-2)); box-shadow: 0 0 12px rgba(77, 139, 255, 0.5); }
.flow-step.flow-3::before { background: linear-gradient(180deg, var(--accent-2), var(--accent-3)); box-shadow: 0 0 12px rgba(125, 92, 255, 0.5); }
.flow-step.flow-4::before { background: linear-gradient(180deg, #6ee7b7, #34d399); box-shadow: 0 0 12px rgba(52, 211, 153, 0.5); }
.flow-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 2px;
}
.flow-icon { width: 22px; height: 22px; color: var(--accent); }
.flow-step.flow-4 .flow-icon { color: var(--ok); }
.flow-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--fg-dim); font-weight: 600; font-size: 0.82rem;
  display: flex; align-items: center; justify-content: center;
}
.flow-step h4 {
  margin: 0; font-size: 1.05rem; font-weight: 600;
  letter-spacing: -0.01em; color: var(--fg);
}
.flow-step > p { margin: 0; font-size: 0.88rem; color: var(--fg-dim); line-height: 1.45; }
.flow-io {
  margin-top: auto; padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 0.76rem; font-family: var(--mono);
}
.flow-io .io-in  { color: var(--muted); }
.flow-io .io-out { color: var(--accent); }
.flow-step.flow-4 .flow-io .io-out { color: #6ee7b7; }
.flow-link {
  margin-top: 6px; font-size: 0.85rem; color: var(--accent);
  text-decoration: none; font-weight: 500;
}
.flow-link:hover { color: var(--accent-2); }
.flow-link.muted { color: var(--muted); }
.flow-arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--border-hi); padding: 0 6px; min-width: 40px;
}
.flow-arrow svg { width: 32px; height: 16px; }

/* Pipeline zoom (3 vertical stages) — fills the main column. The cards
 * carry list content with internal structure, so the readability ceiling
 * that applies to plain prose (~80ch) doesn't apply here. */
.pipeline-detail {
  display: grid; grid-template-columns: 1fr; gap: 0;
  margin: 10px 0 34px; width: 100%;
}
.pd-stage {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
  position: relative; overflow: hidden;
}
.pd-stage::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: linear-gradient(180deg, var(--accent), var(--accent-3));
  box-shadow: 0 0 14px rgba(77, 139, 255, 0.4);
}
.pd-badge {
  display: inline-block;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--accent); font-weight: 600; margin-bottom: 4px;
}
.pd-stage h4 {
  margin: 0 0 10px; font-size: 1.15rem; font-weight: 600;
  text-transform: none; letter-spacing: -0.01em; color: var(--fg);
}
.pd-io {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px; margin-bottom: 10px;
  font-family: var(--mono); font-size: 0.8rem;
  display: grid; gap: 4px;
}
.pd-io .pd-label {
  display: inline-block; width: 58px; color: var(--muted);
  text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.08em;
}
.pd-stage p { margin: 0; color: var(--fg-dim); line-height: 1.55; }
.pd-arrow-v {
  display: flex; justify-content: center; align-items: center;
  color: var(--border-hi); padding: 6px 0;
}
.pd-arrow-v svg { width: 16px; height: 32px; }

/* Accordion guide */
.guide {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color var(--transition);
}
.guide[open] { border-color: var(--accent); }
.guide > summary {
  padding: 14px 18px;
  cursor: pointer; user-select: none;
  font-size: 0.96rem; color: var(--fg);
  list-style: none;
  position: relative;
  transition: background var(--transition);
}
.guide > summary::-webkit-details-marker { display: none; }
.guide > summary::after {
  content: "›"; position: absolute; right: 20px; top: 50%;
  transform: translateY(-50%) rotate(0);
  color: var(--muted); font-size: 1.3rem;
  transition: transform var(--transition), color var(--transition);
}
.guide[open] > summary::after { transform: translateY(-50%) rotate(90deg); color: var(--accent); }
.guide > summary:hover { background: var(--surface-2); }
.guide-body {
  padding: 4px 22px 18px;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,0.15);
  color: var(--fg-dim); line-height: 1.6;
}
.guide-body p { color: var(--fg-dim); }
.guide-body ul, .guide-body ol { padding-left: 22px; }
.guide-body pre {
  background: #05070c; font-size: 0.8rem; padding: 12px 14px;
}

.grid.two-col { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Dashboard KPI tiles ------------------------------------------- */
.kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px; margin-bottom: 22px;
}
.kpi-tile {
  background:
    radial-gradient(400px 100px at 100% 0%, rgba(77, 139, 255, 0.06), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px 14px;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  position: relative; overflow: hidden;
}
.kpi-tile:hover {
  border-color: var(--border-hi);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(2, 6, 20, 0.5), 0 0 0 1px rgba(77, 139, 255, 0.18);
}
.kpi-tile::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-3));
  opacity: 0.85;
  box-shadow: 0 0 14px rgba(77, 139, 255, 0.45);
}
.kpi-tile.kpi-success::before { background: linear-gradient(180deg, #34d399, #6ee7b7); box-shadow: 0 0 14px rgba(52, 211, 153, 0.45); }
.kpi-tile.kpi-danger::before  { background: linear-gradient(180deg, var(--err), #ff8892); box-shadow: 0 0 14px rgba(239, 68, 87, 0.45); }
.kpi-label {
  color: var(--muted); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
}
.kpi-value {
  font-size: 1.85rem; font-weight: 700;
  letter-spacing: -0.02em; color: var(--fg);
  margin: 4px 0 4px; line-height: 1.1;
}
.kpi-suffix { color: var(--muted); font-size: 0.9rem; font-weight: 500; margin-left: 2px; }
.kpi-sub { color: var(--fg-dim); font-size: 0.78rem; }
.kpi-sub a { color: var(--accent); }

/* Dashboard 2-col analytics grid */
.dashboard-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 14px; margin-bottom: 18px;
}
.dashboard-card { margin-bottom: 0; }
.dashboard-card h3 {
  font-size: 0.92rem; color: var(--fg);
  text-transform: none; letter-spacing: 0;
  font-weight: 600; margin: 0 0 12px;
}

/* Sparkline bar chart */
.sparkline {
  display: flex; align-items: flex-end; gap: 4px; height: 80px;
  margin: 12px 0 4px; padding: 4px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.sparkline .bar {
  flex: 1;
  background: linear-gradient(180deg, var(--accent), var(--accent-3));
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  box-shadow: 0 0 8px rgba(77, 139, 255, 0.25);
  transition: opacity var(--transition), transform var(--transition);
}
.sparkline .bar:hover { opacity: 0.85; transform: translateY(-2px); }
.sparkline .bar[style*="height: 0"] {
  background: var(--border); opacity: 0.35; box-shadow: none;
}
.sparkline-axis {
  display: flex; justify-content: space-between;
  color: var(--muted); font-size: 0.72rem; font-family: var(--mono);
  padding: 0 4px;
}

/* Horizontal bar chart */
.hbar {
  display: grid; grid-template-columns: 140px 1fr 70px;
  gap: 10px; align-items: center;
  padding: 6px 0;
  font-size: 0.88rem;
}
.hbar.hbar-compact { padding: 3px 0; font-size: 0.82rem; }
.hbar-name {
  color: var(--fg); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hbar-name.mono { font-family: var(--mono); }
.hbar-track {
  height: 14px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 4px;
  overflow: hidden;
}
.hbar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  box-shadow: 0 0 12px rgba(77, 139, 255, 0.35) inset;
}
.hbar-fill-2 {
  background: linear-gradient(90deg, #34d399, #6ee7b7);
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.25) inset;
}
.hbar-val {
  text-align: right;
  font-family: var(--mono); font-size: 0.82rem;
  color: var(--fg-dim);
}

/* Recent runs table */
.recent-runs td strong { font-weight: 600; }
.recent-runs .ts { font-size: 0.76rem; }

/* Records explorer ----------------------------------------------- */
.badge.action-upsert {
  background: rgba(52, 211, 153, 0.14);
  border-color: rgba(52, 211, 153, 0.45);
  color: #6ee7b7;
}
.badge.action-insert-ignore {
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.45);
  color: #fcd34d;
}

.records-summary .rec-row { transition: background var(--transition); }
.records-summary .rec-row.rec-upsert {
  border-left: 3px solid rgba(52, 211, 153, 0.55);
}
.records-summary .rec-row.rec-insert_ignore {
  border-left: 3px solid rgba(251, 191, 36, 0.55);
}
.records-summary .table-name-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--accent);
  background: rgba(77, 139, 255, 0.10);
  border: 1px solid rgba(77, 139, 255, 0.28);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color var(--transition), background var(--transition),
              border-color var(--transition), transform var(--transition);
}
.records-summary .table-name-link code {
  /* Strip the global pill styling so the link reads as one clean block. */
  background: transparent;
  padding: 0;
  border-radius: 0;
  color: inherit;
  font-size: inherit;
}
.records-summary .table-name-link svg {
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity var(--transition), transform var(--transition);
}
.records-summary .table-name-link:hover {
  color: var(--accent-3);
  background: rgba(125, 92, 255, 0.18);
  border-color: rgba(125, 92, 255, 0.5);
}
.records-summary .table-name-link:hover svg {
  opacity: 1;
  transform: translateX(2px);
}
.records-summary .table-name-link:focus-visible {
  outline: 2px solid var(--accent-3);
  outline-offset: 2px;
}

/* Clickable slug cells in list tables (e.g. compare list) --------- */
a.slug-link {
  color: inherit;
  text-decoration: none;
}
a.slug-link code {
  border-bottom: 1px dashed var(--border);
  transition: color var(--transition), border-color var(--transition);
}
a.slug-link:hover code {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.slug-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
a.slug-anchor {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  font-family: var(--mono);
  font-size: 0.88rem;
}
a.slug-anchor:hover {
  color: var(--accent-3);
  text-decoration-thickness: 2px;
}
a.slug-anchor:visited {
  color: var(--accent);
}
button.slug-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition),
              background var(--transition);
}
button.slug-copy:hover {
  color: var(--fg);
  border-color: var(--border);
  background: var(--surface-2);
}
button.slug-copy.copied {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.5);
  background: rgba(52, 211, 153, 0.10);
}
button.slug-copy.copy-failed {
  color: #ef4457;
  border-color: rgba(239, 68, 87, 0.45);
  background: rgba(239, 68, 87, 0.08);
}

/* Inline clickable clinic/entity names in list tables ------------- */
a.clinic-anchor {
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--transition);
}
a.clinic-anchor strong {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  font-weight: 600;
}
a.clinic-anchor svg {
  opacity: 0.6;
  transition: opacity var(--transition), transform var(--transition);
}
a.clinic-anchor:hover {
  color: var(--accent-3);
}
a.clinic-anchor:hover strong {
  text-decoration-thickness: 2px;
}
a.clinic-anchor:hover svg {
  opacity: 1;
  transform: translateX(2px);
}

/* Inline JS tabs (e.g. compare detail: SQL → SQL / Clinic-by-clinic) */
.tabs {
  display: flex;
  gap: 4px;
  margin: 14px 0 10px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.tabs .tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: -1px;   /* overlap the .tabs bottom border when active */
  transition: color var(--transition), background var(--transition),
              border-color var(--transition);
}
.tabs .tab svg { flex-shrink: 0; }
.tabs .tab:hover {
  color: var(--fg);
  background: var(--surface-2);
}
.tabs .tab.active {
  color: var(--accent);
  background: var(--surface);
  border-color: var(--border);
  border-bottom-color: var(--surface);  /* hide the shared bottom border */
}
.tabs .tab.active svg { color: var(--accent); }
.tabs .tab .tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--fg-dim);
  font-size: 0.72rem;
  font-weight: 600;
}
.tabs .tab.active .tab-count {
  background: rgba(77, 139, 255, 0.18);
  color: var(--accent);
}
.tab-panel[hidden] { display: none; }

/* Filter bar used above JS-filtered tables (compare detail, records).
   Overrides the global `select { width: 100% }` rule so controls sit
   side-by-side instead of stacking vertically. */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}
.filter-bar > * { margin: 0; }
.filter-bar .fb-search {
  position: relative;
  flex: 1 1 240px;
  min-width: 220px;
}
.filter-bar .fb-search .fb-search-icon {
  position: absolute;
  left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
  display: inline-flex;
}
.filter-bar input[type="search"],
.filter-bar input[type="number"],
.filter-bar select {
  width: auto;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--fg);
  font-size: 0.88rem;
  margin: 0;
}
.filter-bar .fb-search input[type="search"] {
  width: 100%;
  padding-left: 34px;
}
.filter-bar input[type="number"] { width: 110px; }
.filter-bar select { min-width: 160px; }
.filter-bar .fb-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0;
}
.filter-bar .fb-check input { width: auto; margin: 0; }
.filter-bar .fb-count {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.records-detail { font-size: 0.88rem; }
.records-detail thead th {
  background: var(--surface);
  position: sticky; top: 0;
}
.records-detail tr.rec-row td {
  vertical-align: top;
  border-left: 3px solid transparent;
  transition: background var(--transition);
}
.records-detail tr.rec-row.rec-upsert td:first-child,
.records-detail tr.rec-row.rec-upsert td:nth-child(2) {
  border-left-color: rgba(52, 211, 153, 0.5);
}
.records-detail tr.rec-row.rec-insert_ignore td:first-child,
.records-detail tr.rec-row.rec-insert_ignore td:nth-child(2) {
  border-left-color: rgba(251, 191, 36, 0.5);
}
.records-detail tr.rec-row.rec-upsert:hover td {
  background: rgba(52, 211, 153, 0.06);
}
.records-detail tr.rec-row.rec-insert_ignore:hover td {
  background: rgba(251, 191, 36, 0.06);
}

.records-detail td.rec-source { width: 230px; }
.records-detail .src-table { margin-bottom: 4px; }
.records-detail .src-preview {
  color: var(--fg-dim); font-size: 0.82rem; font-family: var(--mono);
  word-break: break-all; line-height: 1.4;
}
.records-detail .rec-preview .cell {
  display: inline-flex; gap: 4px; align-items: baseline;
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 2px 8px; border-radius: 4px; margin: 0 4px 4px 0;
  font-family: var(--mono); font-size: 0.78rem;
}
.records-detail .rec-preview .col { color: var(--muted); }
.records-detail .rec-preview .val { color: var(--fg); }

.records-detail .row-toggle {
  width: 22px; height: 22px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border);
  color: var(--muted); cursor: pointer;
  transition: transform var(--transition), color var(--transition);
}
.records-detail .row-toggle:hover { color: var(--accent); }
.records-detail .row-toggle.open { transform: rotate(90deg); color: var(--accent); }

.records-detail tr.rec-detail { display: none; }
.records-detail tr.rec-detail.open { display: table-row; }
.records-detail tr.rec-detail td {
  padding: 0 !important;
  border-bottom: 1px solid var(--border);
  background: #05070c;
}
.records-detail .detail-grid {
  display: grid; grid-template-columns: 260px 1fr; gap: 0;
}
.records-detail .detail-side { padding: 14px 16px; }
.records-detail .detail-side:first-child {
  border-right: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.2);
}
.records-detail .side-h {
  color: var(--muted); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 8px; font-weight: 600;
}
.records-detail .side-row {
  display: grid; grid-template-columns: 150px 1fr;
  gap: 10px; padding: 3px 0;
  font-family: var(--mono); font-size: 0.78rem;
  border-bottom: 1px dashed rgba(255,255,255,0.04);
}
.records-detail .side-row:last-child { border-bottom: none; }
.records-detail .side-k { color: var(--accent); }
.records-detail .side-v { color: var(--fg); word-break: break-all; }

.pager {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border);
}
.pager .btn.disabled { opacity: 0.35; pointer-events: none; }

/* Responsive ----------------------------------------------------- */
@media (max-width: 1100px) {
  /* Flow diagram stacks vertically; arrows rotate 90deg down */
  .flow { grid-template-columns: 1fr; gap: 10px; }
  .flow-arrow { transform: rotate(90deg); padding: 2px 0; min-width: 0; }
}
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .main { padding: 20px; }
  .stepper { grid-template-columns: repeat(2, 1fr); }
  .hero-card { padding: 22px; }
  .hero-card h1 { font-size: 1.5rem; }
  .stage-hero-grid { grid-template-columns: 1fr; gap: 18px; }
  .ring-wrap { width: 150px; height: 150px; }
}

/* Page titles with icon + breadcrumbs ------------------------------ */
.page-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0 6px;
}
.page-title svg {
  width: 32px;
  height: 32px;
  color: var(--accent);
  flex-shrink: 0;
  padding: 8px;
  background: rgba(77, 139, 255, 0.12);
  border: 1px solid rgba(77, 139, 255, 0.28);
  border-radius: 10px;
  box-sizing: content-box;
}
.page-title h1 {
  margin: 0;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.main-header .crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.main-header .crumbs svg {
  width: 13px;
  height: 13px;
  color: var(--muted);
  flex-shrink: 0;
}
.main-header .crumbs a {
  color: var(--fg-dim);
  text-decoration: none;
  transition: color var(--transition);
}
.main-header .crumbs a:hover {
  color: var(--accent);
}
.main-header .crumbs .sep {
  color: var(--border-hi);
  user-select: none;
}
.main-header p.muted {
  margin: 6px 0 0;
  max-width: 980px;
  line-height: 1.55;
}

/* Sub-navigation tabs ---------------------------------------------- */
.subnav {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  padding: 5px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 16px;
}
.subnav a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 7px;
  color: var(--muted); font-size: 0.88rem; font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.subnav a:hover {
  background: var(--surface-2);
  color: var(--fg);
  text-decoration: none;
}
.subnav a.active {
  background: rgba(77, 139, 255, 0.14);
  border-color: rgba(77, 139, 255, 0.45);
  color: var(--accent);
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(77, 139, 255, 0.14) inset;
}
.subnav a:focus-visible {
  outline: 2px solid var(--accent-3);
  outline-offset: 1px;
}
.subnav a svg {
  width: 15px; height: 15px;
  color: var(--muted);
  transition: color var(--transition), transform var(--transition);
}
.subnav a:hover svg { color: var(--fg); }
.subnav a.active svg { color: var(--accent); }
.subnav .count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 7px; margin-left: 2px;
  background: var(--surface-3); color: var(--muted);
  border-radius: 9px; font-size: 0.72rem; font-weight: 600;
  transition: background var(--transition), color var(--transition);
}
.subnav a.active .count {
  background: rgba(77, 139, 255, 0.3);
  color: var(--accent);
}
/* "All comparisons" back-to-list link is demoted — smaller, no active state. */
.subnav > a:last-child {
  font-size: 0.82rem;
  color: var(--fg-dim);
}
.subnav > a:last-child:hover {
  color: var(--fg);
  background: transparent;
  transform: translateX(-1px);
}

/* Buttons pick up inline SVG icon sizing automatically */
button svg, .btn svg { width: 15px; height: 15px; flex-shrink: 0; }
button.primary svg, .btn.primary svg { color: #0a0f1c; }

/* "Run audit" link-style button for inline row actions */
.btn-sm { padding: 4px 10px; font-size: 0.82rem; }
.btn-sm svg { width: 13px; height: 13px; }

/* Empty/landing state card */
.landing-card { text-align: center; padding: 32px 22px; }
.landing-card svg.landing-icon { width: 44px; height: 44px; color: var(--muted); opacity: 0.8; margin-bottom: 8px; }
.landing-card h2 { margin: 8px 0; }
.landing-card .actions { justify-content: center; margin-top: 18px; }


/* ====================================================================
   Error pages — 400 / 403 / 404 / 500
   --------------------------------------------------------------------
   Renders both inside the authenticated app shell (so the sidebar
   stays visible and the user keeps their bearings) and on the
   unauthenticated shell (centred card, no nav). Uses the same dark
   palette as the rest of the app for visual continuity. */
.err-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px 36px;
  max-width: 640px;
  margin: 0 auto;
}
.err-page .err-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  margin-bottom: 18px;
  color: var(--muted);
}
.err-page .err-glyph svg { width: 38px; height: 38px; }
.err-page.is-404 .err-glyph { color: var(--accent); border-color: rgba(77, 139, 255, 0.35); background: rgba(77, 139, 255, 0.10); }
.err-page.is-403 .err-glyph { color: var(--warn); border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.10); }
.err-page.is-400 .err-glyph { color: var(--info); border-color: rgba(56, 189, 248, 0.4); background: rgba(56, 189, 248, 0.10); }
.err-page.is-500 .err-glyph { color: var(--err); border-color: rgba(239, 68, 87, 0.4); background: rgba(239, 68, 87, 0.10); }

.err-code {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.err-page h1 { font-size: 1.9rem; margin: 4px 0 10px; letter-spacing: -0.015em; }
.err-page .err-lead { color: var(--fg-dim); margin: 0 0 22px; font-size: 1.02rem; line-height: 1.6; }
.err-page .actions { justify-content: center; flex-wrap: wrap; gap: 10px; }
.err-page .err-meta {
  margin-top: 28px;
  padding: 14px 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--muted);
  text-align: left;
  width: 100%;
  max-width: 560px;
  word-break: break-all;
}
.err-page .err-meta .err-meta-row { display: flex; gap: 10px; padding: 2px 0; }
.err-page .err-meta .err-meta-k { color: var(--fg-dim); min-width: 64px; flex-shrink: 0; }
.err-page .err-meta .err-meta-v { color: var(--fg); flex: 1; }
.err-page .err-suggest {
  margin-top: 22px;
  text-align: left;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  width: 100%;
  max-width: 560px;
}
.err-page .err-suggest h3 { margin: 0 0 6px; }
.err-page .err-suggest ul { margin: 6px 0 0 18px; padding: 0; color: var(--fg-dim); line-height: 1.7; }

/* Standalone (unauthenticated) full-screen wrapper */
.err-standalone {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.err-standalone .err-card {
  width: 100%;
  max-width: 560px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 12px 28px;
}
.err-standalone .err-page { padding-top: 28px; }