:root {
  --canvas: #e8eef0;
  --surface: #f8faf9;
  --surface-strong: #ffffff;
  --surface-blue: #eef4ff;
  --ink: #112b38;
  --ink-soft: #36505b;
  --muted: #6b7c83;
  --line: #c8d3d7;
  --line-strong: #aab9bf;
  --cobalt: #2457d6;
  --cobalt-deep: #173b96;
  --teal: #14878a;
  --signal: #f06a3a;
  --signal-deep: #bd4421;
  --good: #16845b;
  --bad: #c6453a;
  --rail: #112b38;
  --rail-soft: #193a49;
  --shadow: 0 18px 45px rgba(34, 58, 69, 0.1);
  --display: "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif;
  --body: "Segoe UI Variable Text", "Segoe UI", sans-serif;
  --mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 1rem; }
body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(rgba(17,43,56,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(17,43,56,.035) 1px,transparent 1px), var(--canvas);
  background-size: 28px 28px;
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
}
button,input,select,textarea { font: inherit; }
button,select { cursor: pointer; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; padding: .7rem 1rem; background: var(--signal); color: white; font-weight: 700; }
.skip-link:focus { top: 1rem; }

.auth-gate {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:clamp(1rem,4vw,4rem);
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    var(--rail);
  background-size:28px 28px;
}
.auth-shell {
  width:min(1060px,100%);
  min-height:620px;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.13);
  border-radius:22px 22px 22px 4px;
  box-shadow:0 32px 90px rgba(0,0,0,.32);
}
.auth-story {
  display:flex;
  flex-direction:column;
  padding:clamp(1.5rem,4vw,3.5rem);
  color:#edf5f6;
  background:
    radial-gradient(circle at 85% 20%,rgba(36,87,214,.36),transparent 34%),
    linear-gradient(145deg,#173d4d,#102a36 62%);
}
.auth-brand { width:max-content; min-width:210px; }
.auth-thesis { max-width:560px; margin:auto 0; padding:3rem 0; }
.auth-thesis .eyebrow { color:#74c9c5; }
.auth-thesis h1 {
  max-width:10ch;
  margin:.75rem 0 1.2rem;
  font-family:var(--display);
  font-size:clamp(3rem,6vw,5.8rem);
  font-weight:670;
  line-height:.93;
  letter-spacing:-.045em;
}
.auth-thesis > p:last-child { max-width:52ch; margin:0; color:#b9cbd0; }
.auth-route { display:grid; grid-template-columns:auto 1fr auto 1fr auto; align-items:center; gap:.7rem; color:#9fb5bc; font-family:var(--mono); font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; }
.auth-route i { position:relative; height:1px; background:rgba(255,255,255,.22); }
.auth-route i::after { content:""; position:absolute; right:0; top:-3px; width:7px; height:7px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 4px rgba(240,106,58,.14); }
.auth-panel { padding:clamp(1.3rem,4vw,3.2rem); background:var(--surface); }
.auth-mode { display:grid; grid-template-columns:1fr 1fr; margin-bottom:clamp(2rem,7vw,4.5rem); padding:4px; border:1px solid var(--line); border-radius:10px 10px 10px 3px; background:var(--canvas); }
.auth-mode button { min-height:38px; border:0; border-radius:7px 7px 7px 2px; color:var(--muted); background:transparent; font-size:.78rem; font-weight:750; }
.auth-mode button.is-active { color:var(--ink); background:white; box-shadow:0 3px 12px rgba(17,43,56,.09); }
#auth-form { display:grid; gap:1rem; }
#auth-form h2 { margin:0; font-family:var(--display); font-size:2.1rem; letter-spacing:-.025em; }
.auth-submit { width:100%; margin-top:.25rem; }
.auth-error { min-height:1.4em; margin:0; color:var(--bad); font-size:.78rem; font-weight:650; }
.auth-note { margin:.2rem 0 0; padding-top:1rem; border-top:1px solid var(--line); color:var(--muted); font-size:.72rem; }

.app-frame { display: grid; grid-template-columns: 282px minmax(0,1fr); min-height: 100vh; }
.command-rail {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 1.5rem; overflow-y: auto; color: #edf5f6;
  background: linear-gradient(150deg,rgba(255,255,255,.06),transparent 38%), var(--rail);
  border-right: 1px solid rgba(255,255,255,.08);
}
.brand-lockup { display: flex; align-items: center; gap: .8rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255,255,255,.13); }
.brand-lockup strong,.brand-lockup span { display: block; }
.brand-lockup strong { font-family: var(--display); font-size: 1.35rem; letter-spacing: .02em; }
.brand-lockup > div:last-child > span { margin-top: -.2rem; color: #9eb3ba; font-family: var(--mono); font-size: .69rem; letter-spacing: .18em; text-transform: uppercase; }
.signal-mark { position: relative; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.2); border-radius: 9px 9px 9px 2px; }
.signal-mark::before,.signal-mark::after { content:""; position:absolute; left:9px; right:9px; height:1px; background:rgba(255,255,255,.36); }
.signal-mark::before { top:14px; } .signal-mark::after { top:27px; }
.signal-mark span { position:absolute; width:6px; height:6px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 3px rgba(240,106,58,.17); }
.signal-mark span:nth-child(1) { left:8px; top:11px; }
.signal-mark span:nth-child(2) { right:8px; top:24px; background:#4dd3c6; }
.signal-mark span:nth-child(3) { right:8px; bottom:1px; background:#6e95ff; }
.rail-label,.eyebrow,.section-number,label > span,.inline-select span { font-family:var(--mono); font-size:.67rem; font-weight:650; letter-spacing:.1em; text-transform:uppercase; }
.workspace-control { display:grid; gap:.65rem; padding-bottom:1.25rem; border-bottom:1px solid rgba(255,255,255,.13); }
.workspace-control label { color:#a9bbc1; }
.workspace-control input { margin-top:.45rem; color:white; background:rgba(255,255,255,.075); border-color:rgba(255,255,255,.15); }
.workspace-control strong { color:white; font-family:var(--display); font-size:1.05rem; line-height:1.1; }
.workspace-control small { overflow:hidden; color:#9eb3ba; font-size:.72rem; text-overflow:ellipsis; white-space:nowrap; }
.rail-nav { display:grid; gap:.25rem; margin-top:1.15rem; }
.rail-nav a { display:flex; align-items:center; gap:.7rem; padding:.66rem .72rem; border-radius:7px; color:#bdd0d5; text-decoration:none; font-weight:650; transition:color 150ms ease,background 150ms ease,transform 150ms ease; }
.rail-nav a:hover,.rail-nav a:focus-visible { color:white; background:rgba(255,255,255,.08); transform:translateX(2px); outline:none; }
.rail-nav a span { color:#68838e; font-family:var(--mono); font-size:.68rem; }

.workspace { width:min(1500px,100%); padding:clamp(1.4rem,3vw,3rem); overflow:hidden; }
.hero { display:flex; align-items:flex-start; justify-content:space-between; gap:2rem; margin-bottom:1.8rem; }
.hero-copy { max-width:800px; }
.eyebrow,.section-number { margin:0 0 .45rem; color:var(--cobalt); }
.hero h1,.section-heading h2,.panel h2,.panel h3,.table-title h3 { margin:0; font-family:var(--display); line-height:1.02; letter-spacing:-.025em; }
.hero h1 { max-width:13ch; font-size:clamp(2.8rem,5vw,5.6rem); font-weight:670; }
.hero h1 span { color:var(--cobalt); }
.subtitle { max-width:62ch; margin:1rem 0 0; color:var(--ink-soft); font-size:1rem; }
.hero-actions { display:flex; align-items:center; gap:.75rem; flex:0 0 auto; }
.live-chip,.queue-badge { display:inline-flex; align-items:center; gap:.45rem; padding:.48rem .72rem; border:1px solid var(--line); border-radius:7px; background:rgba(255,255,255,.55); color:var(--ink-soft); font-family:var(--mono); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.live-chip i { width:7px; height:7px; border-radius:50%; background:var(--good); }

.pipeline-rail { display:grid; grid-template-columns:auto minmax(40px,1fr) auto minmax(40px,1fr) auto minmax(40px,1fr) auto; align-items:center; gap:.6rem; margin-bottom:1rem; padding:.85rem; border:1px solid var(--line-strong); border-radius:14px 14px 14px 3px; background:rgba(248,250,249,.76); box-shadow:var(--shadow); }
.route-node { display:flex; align-items:center; gap:.62rem; min-width:130px; padding:.58rem .68rem; border:1px solid var(--line); border-radius:9px 9px 9px 2px; background:var(--surface-strong); }
.node-index { display:grid; place-items:center; width:32px; height:32px; flex:0 0 auto; border-radius:7px 7px 7px 2px; color:white; background:var(--cobalt); font-family:var(--mono); font-size:.66rem; font-weight:800; }
.destination-node .node-index { background:var(--teal); } .run-node .node-index { background:var(--signal); }
.route-node small,.route-node strong { display:block; }
.route-node small { color:var(--muted); font-family:var(--mono); font-size:.6rem; text-transform:uppercase; }
.route-node strong { font-size:.8rem; }
.route-track { position:relative; height:2px; background:var(--line-strong); }
.route-track::after { content:""; position:absolute; right:-1px; top:-3px; width:0; height:0; border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:6px solid var(--line-strong); }
.route-track i { position:absolute; top:-3px; left:0; width:8px; height:8px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 3px rgba(240,106,58,.12); animation:packet 4.2s linear infinite; }
.route-track i:nth-child(2) { animation-delay:-2.1s; background:var(--cobalt); }

.summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; margin-bottom:clamp(2.5rem,6vw,5rem); }
.metric-card { position:relative; min-height:106px; padding:1rem 1.1rem; overflow:hidden; border:1px solid var(--line); border-radius:12px 12px 12px 3px; background:rgba(248,250,249,.84); }
.metric-card::after { content:attr(data-index); position:absolute; right:.75rem; bottom:-.45rem; color:rgba(36,87,214,.07); font-family:var(--display); font-size:4.2rem; font-weight:800; line-height:1; }
.metric-card span { display:block; max-width:16ch; color:var(--muted); font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; }
.metric-card strong { display:block; margin-top:.2rem; font-family:var(--display); font-size:2.35rem; line-height:1; }

.work-section { margin-bottom:clamp(2.5rem,6vw,5rem); }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:1.15rem; padding-bottom:.9rem; border-bottom:1px solid var(--line-strong); }
.section-heading h2 { font-size:clamp(1.8rem,3vw,2.7rem); }
.section-heading > p { max-width:50ch; margin:0; color:var(--muted); font-size:.83rem; }
.grid { display:grid; gap:1rem; }
.grid.two-up { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid.three-up { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid.compact { margin-top:.85rem; gap:.85rem; }
.split-workflow { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(390px,.85fr); gap:1rem; align-items:start; }
.panel,.table-card { border:1px solid var(--line); border-radius:15px 15px 15px 3px; background:var(--surface); box-shadow:var(--shadow); }
.panel { overflow:hidden; }
.source-panel { border-top:3px solid var(--cobalt); }
.destination-panel { border-top:3px solid var(--teal); }
.execution-panel { border-top:3px solid var(--signal); }
.panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1rem 1.1rem; border-bottom:1px solid var(--line); background:rgba(232,238,240,.38); }
.panel-title { display:flex; align-items:center; gap:.7rem; }
.panel-icon { display:grid; place-items:center; width:42px; height:42px; flex:0 0 auto; border-radius:9px 9px 9px 2px; color:white; background:var(--cobalt); font-family:var(--mono); font-size:.62rem; font-weight:800; letter-spacing:.04em; }
.destination-panel .panel-icon { background:var(--teal); }
.panel h2 { font-size:1.65rem; }
.panel h3 { font-size:1.3rem; }
.panel-head .eyebrow { margin-bottom:.22rem; }
.panel-body { padding:1.1rem; }
.inline-select { width:min(210px,45%); }
label { display:flex; flex-direction:column; gap:.38rem; color:var(--ink-soft); }
label > span,.inline-select span { color:var(--muted); }
.field-help { margin-top:-.12rem; color:var(--muted); font-size:.72rem; line-height:1.35; }
input,select,textarea,.console { width:100%; border:1px solid var(--line-strong); border-radius:8px 8px 8px 2px; background:var(--surface-strong); color:var(--ink); }
input,select,textarea { min-height:43px; padding:.68rem .78rem; transition:border-color 150ms ease,box-shadow 150ms ease,background 150ms ease; }
textarea { min-height:6rem; resize:vertical; font-family:var(--mono); font-size:.78rem; line-height:1.55; }
input:hover,select:hover,textarea:hover { border-color:#8fa2aa; }
input:focus,select:focus,textarea:focus { border-color:var(--cobalt); outline:none; box-shadow:0 0 0 3px rgba(36,87,214,.12); background:white; }
input::placeholder,textarea::placeholder { color:#9aa9ae; }
.dynamic-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem; margin-top:.85rem; }
.dynamic-form label:has(textarea),.dynamic-form label[data-field-type="json"] { grid-column:1/-1; }
.toggle { justify-content:flex-end; min-height:69px; padding:.68rem .75rem; border:1px solid var(--line-strong); border-radius:8px 8px 8px 2px; background:white; }
.toggle input { width:42px; min-height:22px; margin:0; accent-color:var(--cobalt); }
.action-row { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1rem; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:.42rem; min-height:40px; padding:.66rem .9rem; border:1px solid transparent; border-radius:8px 8px 8px 2px; font-size:.78rem; font-weight:750; line-height:1; transition:transform 140ms ease,box-shadow 140ms ease,background 140ms ease; }
.button:hover:not(:disabled) { transform:translateY(-1px); }
.button:focus-visible { outline:3px solid rgba(36,87,214,.25); outline-offset:2px; }
.button:disabled { cursor:wait; opacity:.62; }
.button-primary { color:white; background:var(--cobalt); border-color:var(--cobalt); box-shadow:0 6px 15px rgba(36,87,214,.18); }
.button-primary:hover:not(:disabled) { background:var(--cobalt-deep); }
.button-secondary,.button-quiet { color:var(--ink); background:white; border-color:var(--line-strong); }
.button-secondary:hover:not(:disabled),.button-quiet:hover:not(:disabled) { border-color:var(--cobalt); color:var(--cobalt-deep); }
.button-signal { color:white; background:var(--signal); border-color:var(--signal); box-shadow:0 6px 15px rgba(240,106,58,.16); }
.button-rail { color:var(--rail); background:#e2eef1; }
.button-danger-quiet { min-height:32px; padding:.45rem .65rem; color:var(--signal-deep); background:#fff4ef; border-color:#f2c3b2; }
.queue-utility { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1rem; padding-top:.85rem; border-top:1px solid var(--line); color:var(--muted); font-family:var(--mono); font-size:.67rem; text-transform:uppercase; }
.console { min-height:76px; max-height:360px; margin:1rem 0 0; padding:.85rem; overflow:auto; color:#dcecef; background:#132d39; border-color:#132d39; font-family:var(--mono); font-size:.73rem; line-height:1.55; white-space:pre-wrap; resize:vertical; animation:revealConsole 180ms ease-out; }
.console:empty { display:none; }
.console.is-error { color:#ffe5df; background:#452d2c; border-color:#76433f; }

.inventory-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.table-card { min-width:0; padding:1rem; }
.table-title { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.7rem; }
.table-title h3 { font-size:1.2rem; }
.table-title span { color:var(--muted); font-family:var(--mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.08em; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.78rem; }
th,td { padding:.62rem .5rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
th { color:var(--muted); font-family:var(--mono); font-size:.61rem; text-transform:uppercase; letter-spacing:.07em; }
tbody tr { transition:background 120ms ease; }
tbody tr:hover { background:var(--surface-blue); }
.pill { display:inline-flex; align-items:center; padding:.23rem .48rem; border-radius:5px; color:var(--cobalt-deep); background:#e5edff; font-family:var(--mono); font-size:.62rem; font-weight:750; text-transform:uppercase; }
.pill.success { color:#0c6a47; background:#def5e9; }
.pill.failed { color:#a7352d; background:#ffe6e1; }
.pill.running,.pill.queued { color:#9b4a19; background:#ffedda; }
.placeholder { margin:0; padding:.5rem 0; color:var(--muted); font-size:.78rem; }
.app-footer { display:flex; justify-content:space-between; gap:1rem; padding-top:1rem; border-top:1px solid var(--line-strong); color:var(--muted); font-family:var(--mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.07em; }

@keyframes packet { from { left:0; } to { left:calc(100% - 8px); } }
@keyframes revealConsole { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }

@media (max-width:1180px) {
  .app-frame { grid-template-columns:236px minmax(0,1fr); }
  .command-rail { padding:1.15rem; }
  .pipeline-rail { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .route-track { display:none; }
  .route-node { min-width:0; }
  .split-workflow { grid-template-columns:1fr; }
}
@media (max-width:900px) {
  .auth-shell { grid-template-columns:1fr; }
  .auth-story { min-height:340px; }
  .auth-thesis { padding:3rem 0; }
  .auth-thesis h1 { max-width:13ch; font-size:clamp(2.8rem,10vw,5rem); }
  .app-frame { display:block; }
  .command-rail { position:relative; height:auto; display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
  .brand-lockup { border-bottom:0; }
  .workspace-control,.rail-nav { border:0; }
  .rail-nav { grid-column:1 / -1; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0; }
  .hero,.section-heading { align-items:flex-start; }
  .grid.two-up,.inventory-grid { grid-template-columns:1fr; }
}
@media (max-width:650px) {
  .auth-gate { padding:0; place-items:stretch; }
  .auth-shell { min-height:100vh; border:0; border-radius:0; }
  .auth-story { min-height:280px; padding:1.25rem; }
  .auth-thesis { padding:2.5rem 0 1.8rem; }
  .auth-thesis h1 { font-size:2.75rem; }
  .auth-route { display:none; }
  .auth-panel { padding:1.25rem; }
  .auth-mode { margin-bottom:2rem; }
  .command-rail,.hero,.section-heading,.app-footer { display:flex; flex-direction:column; }
  .workspace { padding:1rem; }
  .hero-actions,.inline-select { width:100%; }
  .hero-actions { justify-content:space-between; }
  .pipeline-rail,.grid.two-up,.grid.three-up,.dynamic-form { grid-template-columns:1fr; }
  .route-node { width:100%; }
  .summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .panel-head { flex-direction:column; }
  .inline-select { max-width:none; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}