/* DevX Control: "Sentinel" skin. Loaded last. Cyber glass HUD: floating pill nav, corner-bracket panels, mono tags.
   Overrides tokens from app.css/fx.css and adds the Autopilot, Reviews, Onboard and Studio components. */
:root, :root[data-theme="dark"] {
  --bg: #02060d; --rail: rgba(8, 18, 32, .6); --panel: rgba(9, 22, 38, .56); --panel-2: rgba(110, 205, 255, .06); --raise: #0d2136;
  --line: rgba(80, 215, 255, .26); --line-soft: rgba(80, 215, 255, .13);
  --text: #e8f5ff; --text-2: #aac6da; --text-3: #8aa7bd;
  --accent: #38e8ff; --accent-2: #7c5cff; --accent-3: #ff4d8d; --accent-ink: #00141c; --accent-soft: rgba(56, 232, 255, .13);
  --ok: #2bf0a0; --ok-text: #5ff5b9; --warn: #ffb020; --serious: #ff7a45; --bad: #ff4d6a; --bad-text: #ff8d9f; --idle: #6c7f96;
  --s1: #38a8ff; --s2: #ff7a45; --s3: #7c5cff;
  --grad: linear-gradient(110deg, #38e8ff 0%, #5aa0ff 45%, #7c5cff 100%);
  --edge: linear-gradient(140deg, rgba(56, 232, 255, .55), rgba(56, 232, 255, .06) 38%, rgba(124, 92, 255, .08) 62%, rgba(124, 92, 255, .5));
  --glow: 0 0 0 1px rgba(56, 232, 255, .18), 0 0 34px -8px rgba(56, 232, 255, .45);
  --shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 20px 50px -24px rgba(0, 0, 0, .85);
  --glow-ok: 0 0 0 3px rgba(43, 240, 160, .16), 0 0 14px rgba(43, 240, 160, .6);
  --scrim: rgba(1, 5, 12, .66); --blob-o: .5; --grid-o: .55;
  --f-display: "Space Grotesk", "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
:root[data-theme="light"] {
  --bg: #e7f0f8; --rail: rgba(255, 255, 255, .6); --panel: rgba(255, 255, 255, .66); --panel-2: rgba(10, 100, 170, .06); --raise: #eaf3fb;
  --line: rgba(10, 100, 170, .26); --line-soft: rgba(10, 100, 170, .13);
  --text: #06182a; --text-2: #324e68; --text-3: #496580;
  --accent: #0b7fb3; --accent-2: #5a3fe0; --accent-3: #d6246e; --accent-ink: #ffffff; --accent-soft: rgba(11, 127, 179, .11);
  --ok: #0a8a5a; --ok-text: #076b46; --warn: #b87400; --serious: #c4501b; --bad: #c8203f; --bad-text: #a8152f; --idle: #62798f;
  --s1: #1f7fd0; --s2: #c4501b; --s3: #5a3fe0;
  --grad: linear-gradient(110deg, #0b9fcf 0%, #1f7fd0 45%, #5a3fe0 100%);
  --edge: linear-gradient(140deg, rgba(11, 127, 179, .5), rgba(11, 127, 179, .06) 38%, rgba(90, 63, 224, .08) 62%, rgba(90, 63, 224, .45));
  --glow: 0 0 0 1px rgba(11, 127, 179, .2), 0 0 30px -10px rgba(11, 127, 179, .5);
  --shadow: 0 1px 2px rgba(10, 60, 100, .06), 0 18px 44px -26px rgba(10, 60, 110, .4);
  --scrim: rgba(6, 24, 42, .36); --blob-o: .3; --grid-o: .4;
}
:root { --top-h: 0px; --pill-h: 58px; --r-panel: 16px; --r-inner: 10px; }
body { background: var(--bg); font-feature-settings: "ss01", "tnum"; }
h1, h2, h3, .h2 { font-family: var(--f-display); }

/* ---------- atmosphere ---------- */
.fx-bg .b1 { background: radial-gradient(circle, #0a5cff, transparent 62%); }
.fx-bg .b2 { background: radial-gradient(circle, #00c2d6, transparent 62%); }
.fx-bg .b3 { background: radial-gradient(circle, #6a3dff, transparent 62%); }
.fx-progress { background: var(--grad); }
body::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px); }
:root[data-theme="light"] body::before { opacity: .25; mix-blend-mode: multiply; }
body::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- floating shell ---------- */
.shell { display: block; position: relative; z-index: 2; min-height: 100dvh; }
.main-col { display: block; }
.hud-top { position: fixed; z-index: var(--z-top); top: 14px; left: 0; right: 0; display: flex; justify-content: center; padding: 0 14px; pointer-events: none; }
.pill { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 4px; height: var(--pill-h); padding: 6px; max-width: 100%; border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 80%, transparent); -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
  box-shadow: var(--shadow), var(--glow); transition: box-shadow .4s, background-color .4s; }
.hud-top.scrolled .pill { background: color-mix(in srgb, var(--panel) 92%, transparent); }
.pill::before, .dock::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--edge); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.nvs { display: flex; align-items: center; gap: 2px; }
.nv, .dk { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; min-width: 44px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--text-3);
  font: 600 13px var(--f-body); letter-spacing: .01em; transition: background-color .25s, color .25s, box-shadow .25s; white-space: nowrap; }
.nv:hover, .dk:hover { color: var(--text); background: var(--panel-2); }
.nv svg, .dk svg { flex: none; transition: transform .3s var(--ease-out); }
.nv:hover svg { transform: scale(1.12); }
.nv[aria-current="page"], .dk[aria-current="page"] { color: var(--text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--line), 0 0 24px -6px var(--accent); }
.nv[aria-current="page"] svg, .dk[aria-current="page"] svg { color: var(--accent); filter: drop-shadow(0 0 6px var(--accent)); }
.nv .lb { max-width: 0; overflow: hidden; opacity: 0; }
.nv[aria-current="page"] .lb { max-width: 120px; opacity: 1; transition: max-width .45s var(--ease-out), opacity .3s .1s; }
.pill .nv:not([aria-current="page"]) .lb { position: absolute; top: calc(100% + 12px); left: 50%; max-width: none; overflow: visible; padding: 5px 10px; border-radius: 8px; background: var(--raise); border: 1px solid var(--line); color: var(--text);
  font: 500 11.5px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; opacity: 0; transform: translate(-50%, -4px); pointer-events: none; transition: opacity .15s, transform .15s; z-index: 5; }
.pill .nv:not([aria-current="page"]):hover .lb, .pill .nv:not([aria-current="page"]):focus-visible .lb { opacity: 1; transform: translate(-50%, 0); }
.nv .pip, .dk .pip { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; display: grid; place-items: center; background: var(--bad); color: #fff; font: 700 10px/1 var(--f-body); box-shadow: 0 0 0 2px var(--bg), 0 0 10px var(--bad); }
.nv .pip[data-pip="updates"], .nv .pip[data-pip="reviews"], .dk .pip[data-pip="reviews"] { background: var(--grad); color: #00141c; box-shadow: 0 0 0 2px var(--bg), 0 0 10px var(--accent); }
.nv .pip:empty { min-width: 9px; width: 9px; height: 9px; padding: 0; }
.nv .pip[hidden], .dk .pip[hidden] { display: none; }
.brand.nv { padding: 0 14px 0 6px; gap: 10px; color: var(--text); width: auto; height: 44px; margin: 0; }
.brand .logo { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: radial-gradient(circle, var(--accent-soft), transparent 70%); box-shadow: inset 0 0 0 1px var(--line); filter: drop-shadow(0 0 8px var(--accent)); }
.brand .wm { display: grid; line-height: 1; text-align: left; }
.brand .wm b { font: 700 15px var(--f-display); letter-spacing: .18em; }
.brand .wm small { font: 500 9.5px var(--f-mono); letter-spacing: .34em; color: var(--accent); margin-top: 3px; }
.vr { width: 1px; height: 26px; background: var(--line); margin: 0 6px; flex: none; }
.cta { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px 0 14px; border: 0; border-radius: 999px; background: var(--grad); color: var(--accent-ink); font: 700 13px var(--f-body); box-shadow: 0 8px 26px -8px var(--accent); transition: box-shadow .25s, scale .15s; white-space: nowrap; }
.cta:hover { box-shadow: 0 10px 34px -4px var(--accent); }
.cta:active { scale: .96; }
.pill .live { padding: 0 12px; height: 44px; font: 500 11.5px var(--f-mono); letter-spacing: .04em; }
.pill .live span { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }

.crumbs { max-width: 1560px; margin: 0 auto; padding: calc(var(--pill-h) + 46px) 32px 0; display: flex; align-items: center; gap: 8px; font: 500 11.5px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); min-height: calc(var(--pill-h) + 70px); }
.crumbs::before { content: "//"; color: var(--accent); margin-right: 4px; }
.crumbs a { color: var(--text-3); } .crumbs a:hover { color: var(--accent); }
.crumbs .sep { color: var(--line); } .crumbs .here { color: var(--text-2); }
main { padding-top: 6px; padding-inline: 32px; }

.dock { display: none; position: fixed; z-index: var(--z-top); left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); translate: -50% 0; align-items: center; gap: 2px; padding: 6px; border-radius: 999px; max-width: calc(100vw - 20px);
  background: color-mix(in srgb, var(--panel) 84%, transparent); -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%); box-shadow: var(--shadow), var(--glow); }
.dk { flex-direction: column; gap: 2px; height: 52px; min-width: 54px; padding: 0 6px; font-size: 10px; border-radius: 22px; }
.dk .lb { font: 500 9.5px var(--f-mono); letter-spacing: .04em; text-transform: uppercase; max-width: none; opacity: 1; }
.dk.fab { height: 56px; min-width: 56px; margin: -18px 4px 0; border-radius: 50%; background: var(--grad); color: var(--accent-ink); box-shadow: 0 10px 28px -6px var(--accent), 0 0 0 4px var(--bg); }
.dk.fab:hover { color: var(--accent-ink); background: var(--grad); }
.sheet { width: min(420px, 100%); }
.sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.sheet-item { display: grid; justify-items: center; gap: 8px; padding: 16px 6px; border-radius: 14px; border: 1px solid var(--line-soft); background: var(--panel-2); color: var(--text-2); font-size: 12.5px; }
.sheet-item:hover { border-color: var(--accent); color: var(--text); }

/* ---------- glass + HUD brackets ---------- */
.panel, .vessel, .stat, .upd, .tabs, .dbx-side { border-radius: var(--r-panel); background-color: var(--panel); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); }
.panel, .hud { --c: color-mix(in srgb, var(--accent) 80%, transparent); --b: 13px; --o: 5px;
  background-image: linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c));
  background-size: var(--b) 1.5px, 1.5px var(--b), var(--b) 1.5px, 1.5px var(--b), var(--b) 1.5px, 1.5px var(--b), var(--b) 1.5px, 1.5px var(--b);
  background-position: var(--o) var(--o), var(--o) var(--o), calc(100% - var(--o)) var(--o), calc(100% - var(--o)) var(--o), var(--o) calc(100% - var(--o)), var(--o) calc(100% - var(--o)), calc(100% - var(--o)) calc(100% - var(--o)), calc(100% - var(--o)) calc(100% - var(--o));
  background-repeat: no-repeat; }
.panel { padding: 8px; }
.dialog.hud, .dialog { border-radius: 16px; background-color: color-mix(in srgb, var(--panel) 94%, #000); }
:root[data-theme="light"] .dialog, :root[data-theme="light"] .palette { background-color: rgba(255, 255, 255, .9); }
.hud-frame { position: relative; border-radius: 18px; border: 1px solid var(--line); overflow: hidden; }
.hud-tag { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--tg, var(--accent)) 45%, transparent); background: color-mix(in srgb, var(--tg, var(--accent)) 12%, transparent); color: var(--tg, var(--accent));
  font: 600 10px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.hud-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
:root[data-theme="light"] .hud-tag { --tg-l: 1; }
.hud-tag[data-t="ok"], .hud-tag[data-t="deployed"] { --tg: var(--ok-text); }
.hud-tag[data-t="warn"], .hud-tag[data-t="review"], .hud-tag[data-t="changed"], .hud-tag[data-t="queued"], .hud-tag[data-t="pending"] { --tg: var(--warn); }
.hud-tag[data-t="bad"], .hud-tag[data-t="rejected"] { --tg: var(--bad-text); }
.hud-tag[data-t="fixing"], .hud-tag[data-t="schema"], .hud-tag[data-t="store"] { --tg: #a08cff; }
.hud-tag[data-t="wontfix"], .hud-tag[data-t="read"] { --tg: var(--text-3); }
:root[data-theme="light"] .hud-tag[data-t="fixing"], :root[data-theme="light"] .hud-tag[data-t="schema"], :root[data-theme="light"] .hud-tag[data-t="store"] { --tg: var(--accent-2); }
.hud-eyebrow { display: flex; width: max-content; max-width: 100%; align-items: center; gap: 8px; font: 600 10.5px var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.hud-eyebrow::before { content: ""; width: 14px; height: 2px; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.corner { position: absolute; z-index: 3; } .corner.tl { top: 22px; left: 24px; } .corner.tr { top: 22px; right: 24px; }

/* ---------- type, pages, buttons, forms ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 6px; }
.page-head h1 { font-weight: 700; font-size: clamp(30px, 4vw, 46px); letter-spacing: -.025em; line-height: 1.04; margin: 8px 0 8px; }
.page-head .lede { color: var(--text-2); max-width: 62ch; }
.group-title { display: flex; align-items: center; gap: 12px; margin: 6px 4px 12px; font: 600 11px var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); }
.group-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); order: 1; }
.group-title .seg { order: 2; }
.grid-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.cols.eq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.btn { border-radius: 999px; min-height: 40px; background-color: var(--panel-2); border-color: var(--line-soft); font-weight: 600; letter-spacing: .01em; }
.btn.sm { border-radius: 999px; }
.btn.icon { border-radius: 50%; }
.btn:hover { border-color: var(--accent); box-shadow: 0 0 22px -8px var(--accent); }
.btn.primary { background: var(--grad); color: var(--accent-ink); border-color: transparent; box-shadow: 0 8px 26px -10px var(--accent); }
.btn.danger { color: var(--bad-text); }
.btn:disabled { opacity: .45; }
.chip { border-radius: 8px; font: 500 11.5px var(--f-mono); letter-spacing: .02em; height: 24px; background-color: var(--panel-2); }
.chip.ok { color: var(--ok-text); } .chip.warn { color: var(--warn); } .chip.bad { color: var(--bad-text); }
.field { border-radius: 10px; background-color: color-mix(in srgb, var(--panel-2) 100%, transparent); border-color: var(--line-soft); }
.field:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 24px -8px var(--accent); }
select.field, textarea.field { color: var(--text); }
select.field option { background: var(--raise); color: var(--text); }
.tabs { border-radius: 999px; padding: 4px; }
.tab { border-radius: 999px; font-weight: 600; }
.seg { border-radius: 999px; } .seg button { border-radius: 999px; }
.tab[aria-selected="true"], .seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--line), 0 0 18px -6px var(--accent); }
.tab[aria-selected="true"] svg { color: var(--accent); }
.banner { border-radius: 12px; font-size: 13.5px; }
th { font: 600 10.5px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.term { background: #020a11; color: #bfe6ff; border-color: var(--line-soft); }
.term .ln .ts { color: #4f8aa8; }
.meter { background: var(--panel-2); } .meter i { background: linear-gradient(90deg, var(--accent), var(--s3)); }
.meter.mem i { background: linear-gradient(90deg, var(--s3), var(--accent-3)); }
.meter.big { height: 8px; margin-bottom: 14px; } .meter.big i { display: block; width: 0; transition: width .4s var(--ease-out); box-shadow: 0 0 12px var(--accent); }
.scrim { background: var(--scrim); }
.dialog.wide { width: min(620px, 100%); }
.toast { border-radius: 12px; }
#toasts { right: 20px; bottom: 20px; }

/* ---------- fleet hero + 3D scene ---------- */
.hero { grid-template-columns: minmax(0, 1fr) minmax(340px, 560px); gap: 32px; }
.hero h1 { max-width: 13ch; }
.hero .calm { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .hud-eyebrow { margin-bottom: 14px; }
.scene-wrap { aspect-ratio: 1 / 0.92; width: 100%; max-height: 560px; border-radius: 22px; border: 1px solid var(--line); box-shadow: var(--shadow), var(--glow);
  background: radial-gradient(70% 60% at 50% 46%, rgba(14, 60, 110, .55), transparent 70%), radial-gradient(120% 90% at 50% 120%, rgba(110, 60, 255, .22), transparent 60%), #030a14; }
.scene-wrap::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .55; pointer-events: none;
  background-image: linear-gradient(rgba(56, 232, 255, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(56, 232, 255, .09) 1px, transparent 1px); background-size: 38px 38px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 20%, transparent 72%); mask-image: radial-gradient(circle at 50% 50%, #000 20%, transparent 72%); }
.scene-wrap::after { content: ""; position: absolute; inset: 10px; z-index: 2; pointer-events: none; border-radius: 14px;
  background-image: linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent));
  background-size: 22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px;
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%; background-repeat: no-repeat; opacity: .75; }
.scene-wrap .hud-tag { --tg: #38e8ff; }
.scene-wrap .hud-tag[data-t="ok"] { --tg: #5ff5b9; }
.scene-box { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; }
.scene-box .radar-wrap { max-width: 82%; }
.scene-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene-labels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.scene-label { position: absolute; left: 0; top: 0; margin: -11px 0 0 14px; display: inline-flex; align-items: center; gap: 7px; height: 22px; padding: 0 9px; border-radius: 6px; pointer-events: auto; color: #d9f3ff; will-change: transform, opacity;
  font: 500 10.5px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; background: rgba(4, 16, 30, .72); border: 1px solid rgba(80, 215, 255, .3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: border-color .2s, background-color .2s; }
.scene-label i { width: 6px; height: 6px; border-radius: 50%; background: #6c7f96; flex: none; }
.scene-label[data-s="healthy"] i { background: #2bf0a0; box-shadow: 0 0 8px #2bf0a0; } .scene-label[data-s="degraded"] i { background: #ffb020; box-shadow: 0 0 8px #ffb020; }
.scene-label[data-s="down"] i, .scene-label[data-s="crashing"] i { background: #ff4d6a; box-shadow: 0 0 8px #ff4d6a; }
.scene-label:hover, .scene-label:focus-visible { border-color: #38e8ff; background: rgba(8, 40, 64, .9); outline: none; }
.scene-host { position: absolute; left: 50%; top: 50%; translate: -50% -50%; font: 700 10px var(--f-mono); letter-spacing: .3em; color: #03121c; text-shadow: 0 0 10px #38e8ff; pointer-events: none; mix-blend-mode: normal; opacity: .0; }
.scene-cap { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; padding: 0 16px; font: 500 10px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: #7fb7d4; pointer-events: none; }
.stat { border-radius: 14px; }
.stat .k { font: 500 10.5px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.stat .v { font-family: var(--f-display); }
.vessel { border-radius: 16px; }
.vessel .name { font-family: var(--f-display); }
.vessel:hover { box-shadow: var(--shadow), var(--glow); }
.group > h2 { font: 600 11px var(--f-mono); letter-spacing: .2em; text-transform: uppercase; }
.ticker { border-radius: 999px; border: 1px solid var(--line-soft); }
.app-head h1 { font-family: var(--f-display); }

/* ---------- Autopilot ---------- */
.score-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.score { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.score .k { font: 600 14px var(--f-display); }
.ring { width: 66px; height: 66px; flex: none; }
.ring .trk { stroke: var(--line-soft); } .ring .val { stroke: var(--accent); filter: drop-shadow(0 0 5px var(--accent)); } .ring text { fill: var(--text); font: 700 20px var(--f-display); }
.delta { font: 600 11px var(--f-mono); color: var(--text-3); margin-top: 4px; } .delta.up { color: var(--ok-text); } .delta.down { color: var(--bad-text); }
.stages { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(86px, 1fr)); gap: 4px; overflow-x: auto; padding: 18px 4px 8px; }
.stages .rail-line { position: absolute; left: 40px; right: 40px; top: 38px; height: 2px; background: var(--line-soft); }
.stages .rail-line i { display: block; height: 100%; width: calc(var(--at) / (var(--n) - 1) * 100%); background: var(--grad); box-shadow: 0 0 12px var(--accent); }
.stage { position: relative; display: grid; justify-items: center; gap: 10px; background: none; border: 0; padding: 0 2px; color: var(--text-3); font: 600 12px var(--f-body); }
.stage .dot { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 600 13px var(--f-mono); font-style: normal; background: var(--raise); border: 1px solid var(--line); color: var(--text-3); position: relative; z-index: 1; transition: box-shadow .3s, border-color .3s; }
.stage[data-st="done"] .dot { color: var(--accent-ink); background: var(--grad); border-color: transparent; }
.stage[data-st="now"] .dot { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft), 0 0 24px var(--accent); animation: nowpulse 1.8s ease-in-out infinite; }
.stage[data-st="now"], .stage[aria-pressed="true"] { color: var(--text); }
.stage[aria-pressed="true"] .dot { border-color: var(--accent); }
@keyframes nowpulse { 50% { box-shadow: 0 0 0 9px transparent, 0 0 34px var(--accent); } }
.stage-info { padding: 10px 14px 4px; border-top: 1px dashed var(--line-soft); margin-top: 8px; min-height: 76px; } .stage-info p { color: var(--text-2); margin-top: 4px; }
.run-sub { display: flex; align-items: center; gap: 10px; margin: 0 14px 10px; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); font-size: 13.5px; }
.term { height: 270px; margin: 0 8px; }
.levels { display: grid; gap: 8px; padding: 4px 6px 8px; }
.level { display: flex; align-items: center; gap: 14px; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-soft); background: var(--panel-2); transition: border-color .2s, box-shadow .2s; }
.level i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 600 13px var(--f-mono); font-style: normal; background: var(--raise); color: var(--text-3); flex: none; }
.level div { display: grid; gap: 2px; } .level b { font-size: 14px; }
.level[aria-checked="true"] { border-color: var(--accent); box-shadow: var(--glow); } .level[aria-checked="true"] i { background: var(--grad); color: var(--accent-ink); }
.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 4px 14px; padding: 4px 10px 12px; }
.rule { display: flex; gap: 14px; align-items: flex-start; padding: 10px 6px; position: relative; cursor: pointer; }
.rule input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rule .sw { width: 42px; height: 24px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--line); position: relative; flex: none; margin-top: 2px; transition: background .3s, box-shadow .3s; }
.rule .sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-3); transition: transform .3s var(--ease-out), background .3s; }
.rule input:checked + .sw { background: var(--grad); border-color: transparent; box-shadow: 0 0 18px -4px var(--accent); } .rule input:checked + .sw::after { transform: translateX(18px); background: #fff; }
.rule input:disabled + .sw { opacity: .6; } .rule input:focus-visible + .sw { outline: 2px solid var(--accent); outline-offset: 3px; }
.rule b { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.agent { padding: 14px 16px 14px; display: grid; gap: 10px; align-content: start; }
.agent h3 { font-size: 17px; }
.ag-top { display: flex; align-items: flex-start; gap: 8px; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--idle); margin-top: 6px; } .agent[data-st="live"] .pulse-dot { background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: throb 2s ease-in-out infinite; }
.agent p { font-size: 13px; color: var(--text-2); } .agent p b { display: block; font: 600 10px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ok-text); margin-bottom: 2px; }
.agent .ag-weak b { color: var(--warn); }
.agent[data-role="fixer"] .hud-eyebrow { color: #a08cff; } .agent[data-role="monitor"] .hud-eyebrow { color: var(--ok-text); } .agent[data-role="advisor"] .hud-eyebrow { color: var(--accent-3); }
.ag-bar { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.sugs { display: grid; gap: 4px; padding: 4px 8px 8px; } .sug { display: grid; gap: 8px; padding: 12px 8px; border-top: 1px solid var(--line-soft); } .sug:first-child { border-top: 0; }

/* ---------- Reviews ---------- */
.review-list { display: grid; gap: 12px; }
.review-card { display: grid; gap: 10px; padding: 16px 18px; transition: box-shadow .3s, translate .3s var(--ease-out); }
.review-card:hover { translate: 0 -2px; box-shadow: var(--shadow), var(--glow); }
.review-card h3 { font-size: 20px; letter-spacing: -.01em; }
.rc-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
.rc-fe-be { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 13px; color: var(--text-2); } .rc-fe-be b { font: 600 10px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-right: 6px; }
.rc-go { justify-self: end; display: inline-flex; align-items: center; gap: 4px; font: 600 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.rv-title { max-width: 26ch; }
.prose { padding: 4px 14px 14px; display: grid; gap: 10px; max-width: 78ch; } .prose p { color: var(--text-2); } .prose b { color: var(--text); }
.impact ul { margin: 0; padding: 4px 14px 14px 34px; display: grid; gap: 8px; color: var(--text-2); }
.impact.fe { box-shadow: var(--shadow), inset 3px 0 0 var(--accent); } .impact.be { box-shadow: var(--shadow), inset 3px 0 0 var(--accent-2); }
.res { display: inline-flex; align-items: center; gap: 5px; font: 600 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; } .res.pass { color: var(--ok-text); } .res.fail { color: var(--bad-text); }
.meter.ba { position: relative; height: 10px; } .meter.ba i { position: absolute; left: 0; top: 0; bottom: 0; } .meter.ba i.a { background: var(--text-3); opacity: .55; } .meter.ba i.b { background: var(--grad); height: 50%; top: 50%; }
.diffs { display: grid; gap: 10px; padding: 4px 8px 10px; }
.diff-file { border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; background: #020a11; }
.diff-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: 0; background: rgba(110, 205, 255, .06); color: #cfe9ff; font-size: 13px; text-align: left; }
.diff-head svg { transition: rotate .2s; } .diff-head[aria-expanded="true"] svg { rotate: 90deg; }
.diff-head .add { color: #5ff5b9; font: 600 12px var(--f-mono); } .diff-head .del { color: #ff8d9f; font: 600 12px var(--f-mono); }
.diff { overflow-x: auto; font: 400 12.5px/1.6 var(--f-mono); } .dl { display: grid; grid-template-columns: 28px 1fr; min-width: max-content; color: #b4d3e8; } .dl i { text-align: center; font-style: normal; color: #5b8199; } .dl code { white-space: pre; padding-right: 16px; }
.dl.a { background: rgba(43, 240, 160, .1); color: #c9fbe6; } .dl.a i { color: #5ff5b9; } .dl.d { background: rgba(255, 77, 106, .12); color: #ffd1d9; } .dl.d i { color: #ff8d9f; } .dl.c { color: #7fa0ff; background: rgba(124, 92, 255, .1); }
.tl { list-style: none; margin: 0; padding: 4px 14px 14px; display: grid; gap: 0; } .tl li { position: relative; display: flex; gap: 14px; padding: 0 0 16px; }
.tl li::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 0; width: 1px; background: var(--line); } .tl li:last-child::before { display: none; }
.tl li i { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); margin-top: 4px; flex: none; }
.decide-dock { position: sticky; bottom: 20px; z-index: 20; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; padding: 10px 12px 10px 20px; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 88%, #000); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); box-shadow: var(--shadow), var(--glow); }
.decide-dock .dd-txt { display: grid; margin-right: auto; }
.ack { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 14px; color: var(--text-2); }

/* ---------- Onboard ---------- */
.ob-steps { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; overflow-x: auto; }
.ob-steps li { flex: 1; min-width: 110px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line-soft); background: var(--panel); color: var(--text-3); font: 600 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.ob-steps li i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; background: var(--raise); }
.ob-steps li[data-st="now"] { color: var(--text); border-color: var(--accent); box-shadow: var(--glow); } .ob-steps li[data-st="now"] i { background: var(--grad); color: var(--accent-ink); }
.ob-steps li[data-st="done"] { color: var(--ok-text); } .ob-steps li[data-st="done"] i { background: var(--ok); color: #00140c; }
.ob-pad { padding: 4px 14px 14px; display: grid; gap: 12px; align-content: start; }
.repo-list { display: grid; gap: 6px; max-height: 360px; overflow: auto; }
.repo { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px; border-radius: 12px; border: 1px solid var(--line-soft); background: var(--panel-2); transition: border-color .2s, box-shadow .2s; flex-wrap: wrap; }
.repo:hover { border-color: var(--accent); } .repo[aria-selected="true"] { border-color: var(--accent); box-shadow: var(--glow); background: var(--accent-soft); }
.note { display: flex; gap: 12px; padding: 12px; border-radius: 12px; background: var(--panel-2); border: 1px dashed var(--line); color: var(--accent); } .note p { margin-top: 2px; }
.scan-list { display: grid; gap: 6px; max-height: 380px; overflow: auto; }
.scan-row { display: flex; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); animation: slidein .4s var(--ease-out) both; }
@keyframes slidein { from { opacity: 0; translate: -12px 0; } }
.sc-ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #00140c; flex: none; margin-top: 1px; }
.check { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .check li { display: flex; gap: 10px; align-items: center; color: var(--text-2); } .check svg { color: var(--ok-text); }
.env { display: grid; gap: 8px; } .env-row { display: grid; grid-template-columns: minmax(150px, 1.2fr) auto minmax(120px, .8fr) minmax(140px, 1.4fr); gap: 10px; align-items: center; } .env-row code { font: 500 12.5px var(--f-mono); color: var(--accent); overflow: hidden; text-overflow: ellipsis; }
.ob-done { display: grid; justify-items: center; gap: 16px; text-align: center; padding: 30px 0; } .ob-done h2 { font-size: 34px; letter-spacing: -.02em; }
.done-mark { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; color: #00140c; background: var(--ok); box-shadow: 0 0 0 10px rgba(43, 240, 160, .14), 0 0 60px rgba(43, 240, 160, .55); animation: pop .7s var(--ease-out) both; }

/* ---------- Studio ---------- */
.studio-view { min-width: 0; }
.src-head { padding: 14px 16px; display: grid; gap: 14px; }
.split { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 14px; align-items: start; }
.ftree, .ftree ul { list-style: none; margin: 0; padding: 0; } .ftree { padding: 0 6px 10px; max-height: 560px; overflow: auto; }
.ft-row { display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 10px 0 calc(var(--d, 0) * 16px + 6px); border: 0; border-radius: 8px; background: transparent; color: var(--text-2); font: 400 13px var(--f-mono); text-align: left; }
.ft-row:hover { background: var(--panel-2); color: var(--text); } .ft-row.on { background: var(--accent-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.ft-row .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ft-row small { color: var(--text-3); font-size: 11px; } .ft-row svg { color: var(--accent); flex: none; }
.ft-row .chev { width: 12px; flex: none; } .ft-row[aria-expanded="true"] .chev svg { rotate: 90deg; } .ft-row .chev svg { transition: rotate .2s; color: var(--text-3); }
.ft-row .hud-tag { height: 18px; font-size: 9px; padding: 0 6px; }
.code { margin: 0 8px 8px; padding: 12px 0; border-radius: 12px; background: #020a11; color: #c6e4f8; font: 400 12.5px/1.65 var(--f-mono); overflow: auto; max-height: 520px; min-height: 240px; }
.code .cl { display: block; white-space: pre; padding: 0 16px 0 0; } .code .cl i { display: inline-block; width: 40px; text-align: right; margin-right: 16px; color: #4c7189; font-style: normal; }
.flow-line { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 6px 12px 16px; } .fl-step { position: relative; display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--panel-2); font-size: 12.5px; color: var(--text-2); }
.fl-step i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 11px var(--f-mono); font-style: normal; background: var(--grad); color: var(--accent-ink); }
.fl-step:not(:last-child)::after { content: ""; position: absolute; right: -10px; top: 50%; width: 10px; height: 1px; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.store { padding: 14px 16px; display: grid; gap: 10px; align-content: start; } .store h3 { font-size: 18px; } .st-top { display: flex; align-items: center; gap: 12px; }
.st-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--line); }
.store[data-s="warn"] .st-ic { color: var(--warn); } .store[data-s="bad"] .st-ic { color: var(--bad-text); } .store .kv { padding: 0; }
.tbl-card { padding: 8px; } .cols-list { display: grid; padding: 0 8px; } .col-row { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 10px; align-items: center; padding: 8px 6px; border-top: 1px solid var(--line-soft); font-size: 13px; } .tbl-foot { padding: 10px 14px 8px; }
.drift { padding: 0 14px 14px; display: grid; gap: 8px; }
.xf { padding: 16px 18px; display: grid; gap: 12px; align-content: start; }
.xf-swap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 700 20px var(--f-display); letter-spacing: -.01em; } .xf-from { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--line); } .xf-to { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .xf-arrow { color: var(--accent); display: grid; }
.xf-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; font-size: 13px; color: var(--text-2); } .xf-cols p { margin-top: 4px; }
.xf[data-risk="high"] { box-shadow: var(--shadow), inset 0 3px 0 var(--bad); } .xf[data-risk="med"] { box-shadow: var(--shadow), inset 0 3px 0 var(--warn); } .xf[data-risk="low"] { box-shadow: var(--shadow), inset 0 3px 0 var(--ok); }
.plan { margin: 16px 0 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 8px; } .plan li { counter-increment: s; display: grid; grid-template-columns: 30px 1fr; gap: 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); } .plan li::before { content: counter(s); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: var(--accent-ink); font: 700 12px var(--f-mono); }
.kv dt { font: 500 10.5px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; padding-top: 2px; }

/* ---------- login ---------- */
.login .card { border-radius: 20px; background-color: color-mix(in srgb, var(--panel) 90%, #000); box-shadow: var(--shadow), var(--glow); }
.login .card::after { content: "SECURE CHANNEL // TLS 1.3"; position: absolute; left: 0; right: 0; bottom: -34px; text-align: center; font: 500 10px var(--f-mono); letter-spacing: .3em; color: var(--text-3); }
.login h1 { font-family: var(--f-display); letter-spacing: -.02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-mark { border-radius: 50%; } .logo-mark::before, .logo-mark::after { border-radius: 50%; }

/* ---------- responsive ---------- */
@media (max-width: 1380px) { .pill .live span { display: none; } .pill .live { padding: 0 8px; } }
@media (max-width: 1240px) { .cta span { display: none; } .cta { padding: 0 14px; } .brand .wm small { display: none; } }
@media (max-width: 1100px) { .brand .wm { display: none; } .brand.nv { padding: 0 6px; } .hero { grid-template-columns: 1fr; } .scene-wrap { max-width: 620px; margin-inline: auto; } .split { grid-template-columns: 1fr; } .flow-line { grid-template-columns: 1fr 1fr; } .fl-step::after { display: none; } .cols.eq { grid-template-columns: 1fr; } }
@media (max-width: 980px) { .nvs, .vr, .cta { display: none; } .pill { gap: 2px; } .dock { display: flex; } .hud-top { top: 10px; } body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } #toasts { bottom: calc(100px + env(safe-area-inset-bottom)); left: 12px; right: 12px; max-width: none; } }
@media (max-width: 760px) {
  main { padding-inline: 14px; } .crumbs { padding-inline: 18px; font-size: 10.5px; letter-spacing: .1em; }
  .rc-fe-be, .xf-cols { grid-template-columns: 1fr; } .env-row { grid-template-columns: 1fr 1fr; } .env-row code { grid-column: 1 / -1; }
  .page-head h1 { font-size: 32px; } .scene-wrap { aspect-ratio: 1 / 1.05; } .scene-cap { font-size: 9px; gap: 10px; }
  .decide-dock { border-radius: 22px; bottom: calc(92px + env(safe-area-inset-bottom)); } .decide-dock .btn { flex: 1; } .decide-dock .dd-txt { flex-basis: 100%; }
  .score-row { grid-template-columns: 1fr 1fr; } .score { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .stages { padding-inline: 0; } .ob-steps li span { display: none; } .ob-steps li { min-width: 0; justify-content: center; padding: 8px; }
  .hero h1 { font-size: 34px; } .dialog.wide { max-width: 100%; }
  .dock .dk { min-width: 46px; padding: 0 3px; }
}
@media (max-width: 380px) { .dock .dk { min-width: 42px; } .dk .lb { font-size: 8.5px; } }
@media (prefers-reduced-motion: reduce) { .stage[data-st="now"] .dot, .agent[data-st="live"] .pulse-dot, .scan-row, .done-mark { animation: none !important; } body::before { display: none; } }

td.mono { white-space: nowrap; }
.stack > *, main, .main-col { min-width: 0; } .stack { grid-template-columns: minmax(0, 1fr); }
.group-title { flex-wrap: wrap; } .group-title .seg { max-width: 100%; overflow-x: auto; flex-shrink: 1; }