@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/geist-latin-ext-fiGXM1s.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/geist-latin-NMY4xGg.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Geist Mono';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/geist-mono-latin-ext-anm2aJ2.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Geist Mono';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/geist-mono-latin-LDY7vZ4.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --bg: #08080C;
    --surface: rgba(255, 255, 255, .04);
    --surface-hi: rgba(255, 255, 255, .05);
    --surface-lo: rgba(255, 255, 255, .03);
    --hairline: rgba(255, 255, 255, .08);
    --line: rgba(255, 255, 255, .07);
    --stroke: rgba(255, 255, 255, .10);

    --t1: rgba(255, 255, 255, .92);
    --t2: rgba(255, 255, 255, .64);
    --t3: rgba(255, 255, 255, .50);
    --t4: rgba(255, 255, 255, .38);
    --t5: rgba(255, 255, 255, .25);

    --teal: #22D3EE;
    --teal-hi: #67E8F9;
    --teal-ink: #04222A;
    --mint: #22F07A;
    --mint-ink: #04220F;
    --danger: #FF3D7F;
    --danger-ink: #2A0512;
    --danger-t: #FF7FAC;
    --danger-t2: #FFC2D8;
    --warn: #FFB547;
    --warn-ink: #2A1B00;
    --sky: #7EC8FF;
    --tool: #C7A8F0;

    --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --blur: blur(24px) saturate(140%);
    --ease: cubic-bezier(.22, 1, .36, 1);
    --lift: inset 0 1px 0 var(--hairline);
    --lift-hi: inset 0 1px 0 var(--hairline), 0 20px 60px rgba(0, 0, 0, .55);
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes sweep { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

* { box-sizing: border-box; }

/* Components below set `display`, which would otherwise beat the UA's [hidden] rule. */
[hidden] { display: none !important; }

::selection { background: rgba(34, 211, 238, .28); color: #fff; }

a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 2px solid rgba(34, 211, 238, .65);
    outline-offset: 2px;
}
.toggle:has(input:focus-visible) .toggle__face {
    outline: 2px solid rgba(34, 211, 238, .65);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

html, body { margin: 0; padding: 0; background: var(--bg); }

body {
    min-height: 100vh;
    background: radial-gradient(ellipse at 50% -20%, #12121A 0%, #08080C 78%) no-repeat fixed;
    color: var(--t1);
    font-family: 'Geist', 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'ss01', 'cv11';
}

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-hi); }
input, textarea, select, button { font-family: inherit; }
::placeholder { color: rgba(255, 255, 255, .30); }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 22px; line-height: 28px; }
h2 { font-size: 19px; line-height: 26px; }

.mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--t4); }
.pretty { text-wrap: pretty; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Shell ───────────────────────────────────────────────────────────── */

.topbar {
    position: sticky; top: 0; z-index: 60;
    display: flex; align-items: center; gap: 20px;
    padding: 12px 24px;
    background: rgba(8, 8, 12, .82);
    backdrop-filter: var(--blur);
    box-shadow: inset 0 -1px 0 var(--hairline);
}

.brand { display: flex; align-items: baseline; gap: 7px; font-size: 13px; letter-spacing: .02em; }
.brand__scope { font-family: var(--mono); color: var(--t4); }
.brand__name { font-family: var(--mono); color: var(--teal); font-weight: 500; }
.topbar__divider { width: 1px; height: 20px; background: var(--stroke); }
.topbar__nav { display: flex; gap: 4px; }
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.shell { display: flex; justify-content: center; padding: 28px 24px 80px; }
.shell--tight { padding-top: 22px; }
.shell--login { padding: 56px 24px; align-items: center; }
.wrap { width: 1440px; max-width: 100%; }

/* ── Panel ───────────────────────────────────────────────────────────── */

.panel {
    border-radius: 20px;
    padding: 24px;
    background: var(--surface);
    backdrop-filter: var(--blur);
    box-shadow: var(--lift);
}
.panel--flush { padding: 0; overflow: hidden; }
.panel--rail { padding: 20px; }
.panel--card { border-radius: 24px; padding: 36px; box-shadow: var(--lift-hi); }
.panel--inner { border-radius: 16px; padding: 20px; background: var(--surface-lo); box-shadow: inset 0 0 0 1px var(--line); }

.eyebrow {
    font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--t4);
}
.caption { font-size: 12.5px; line-height: 18px; color: var(--t4); }
.hint { font-size: 13px; color: var(--t4); }

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 24px; border: 0; border-radius: 999px;
    font-size: 14.5px; font-weight: 600; cursor: pointer;
    transition: background 160ms var(--ease), transform 80ms var(--ease), opacity 160ms var(--ease);
}
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn[disabled]:active { transform: none; }

.btn--primary { background: var(--teal); color: var(--teal-ink); box-shadow: 0 8px 32px rgba(34, 211, 238, .30); }
.btn--primary:hover:not([disabled]) { background: var(--teal-hi); }

.btn--go { background: var(--mint); color: var(--mint-ink); box-shadow: 0 8px 32px rgba(34, 240, 122, .32); }
.btn--go:hover:not([disabled]) { background: #57F79A; }

.btn--quiet {
    background: rgba(255, 255, 255, .06); color: var(--t2); font-weight: 400;
    box-shadow: inset 0 0 0 1px var(--hairline);
}
.btn--quiet:hover { background: var(--stroke); color: var(--t1); }

.btn--kill { background: var(--danger); color: var(--danger-ink); }
.btn--kill:hover { background: #FF6D9C; }

.btn--block { width: 100%; }
.btn--lg { padding: 15px 20px; font-size: 15px; }
.btn--sm { padding: 9px 16px; font-size: 13px; font-weight: 500; }

.btn--soft-go {
    background: rgba(34, 240, 122, .14); color: var(--mint); font-weight: 500; font-size: 14px;
    border-radius: 14px; padding: 12px 18px; box-shadow: inset 0 0 0 1px rgba(34, 240, 122, .28);
}
.btn--soft-go:hover { background: rgba(34, 240, 122, .20); }

.btn--soft {
    background: var(--surface-hi); color: var(--t2); font-weight: 400; font-size: 14px;
    border-radius: 14px; padding: 12px 18px; box-shadow: inset 0 0 0 1px var(--stroke);
}
.btn--soft:hover { background: rgba(255, 255, 255, .09); }

.btn--soft-kill {
    background: rgba(255, 61, 127, .10); color: var(--danger-t); font-weight: 400; font-size: 14px;
    border-radius: 14px; padding: 12px 18px; box-shadow: inset 0 0 0 1px rgba(255, 61, 127, .24);
}
.btn--soft-kill:hover { background: rgba(255, 61, 127, .18); }

.btn--reject { background: rgba(255, 255, 255, .06); color: var(--t2); font-weight: 400; box-shadow: inset 0 0 0 1px var(--hairline); }
.btn--reject:hover, .btn--reject[aria-expanded="true"] {
    background: rgba(255, 61, 127, .20); color: var(--danger-t); box-shadow: inset 0 0 0 1px rgba(255, 61, 127, .35);
}

.btn--link {
    padding: 0; border: 0; background: none; color: var(--t4); font-size: 13px; cursor: pointer;
    align-self: flex-start;
}
.btn--link:hover { color: var(--teal); }

.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border: 0; border-radius: 999px;
    background: var(--surface-hi); color: var(--t2); font-size: 12.5px; cursor: pointer;
    transition: background 160ms var(--ease), color 160ms var(--ease);
}
.chip:hover { background: var(--stroke); color: var(--t1); }
.chip[aria-pressed="true"] { background: rgba(34, 211, 238, .14); color: var(--teal); }

/* ── Pills / tabs ────────────────────────────────────────────────────── */

.pills {
    display: inline-flex; gap: 3px; padding: 3px;
    background: var(--surface); border-radius: 999px; box-shadow: var(--lift);
}
.pills--plain { box-shadow: none; }

.pill {
    padding: 7px 14px; border: 0; border-radius: 999px; cursor: pointer;
    background: transparent; color: var(--t3);
    font-size: 13px; font-weight: 400; white-space: nowrap;
    transition: background 200ms var(--ease), color 200ms var(--ease);
}
.pill:hover { color: var(--t1); }
.pill.is-active { background: rgba(255, 255, 255, .10); color: var(--t1); font-weight: 500; }
.pill.is-active.pill--teal { background: rgba(34, 211, 238, .16); }
.pill--sm { padding: 6px 12px; font-size: 12.5px; }

.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filter {
    padding: 9px 14px; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap;
    font-size: 13px; background: var(--surface); color: var(--t3);
    box-shadow: inset 0 0 0 1px var(--line);
    transition: background 160ms var(--ease), color 160ms var(--ease);
}
.filter:hover { color: var(--t1); }
.filter.is-active {
    background: rgba(34, 211, 238, .14); color: var(--teal);
    box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .30);
}

/* ── Status badges & dots ────────────────────────────────────────────── */

.badge {
    display: inline-flex; align-items: center;
    padding: 4px 11px; border-radius: 999px;
    font-size: 12.5px; font-weight: 500; white-space: nowrap;
    background: rgba(255, 255, 255, .07); color: var(--t3);
}
.dot { width: 7px; height: 7px; border-radius: 999px; flex: none; background: var(--t5); }

.is-running .badge, .is-finalizing .badge { background: rgba(126, 200, 255, .13); color: var(--sky); }
.is-running .dot, .is-finalizing .dot { background: var(--sky); box-shadow: 0 0 12px var(--sky); animation: pulse 2s ease-in-out infinite; }

.is-awaiting_review .badge { background: rgba(255, 181, 71, .13); color: var(--warn); }
.is-awaiting_review .dot { background: var(--warn); box-shadow: 0 0 12px var(--warn); animation: pulse 2s ease-in-out infinite; }

.is-deployed .badge, .is-done .badge { background: rgba(34, 240, 122, .13); color: var(--mint); }
.is-deployed .dot, .is-done .dot { background: var(--mint); }

.is-failed .badge { background: rgba(255, 61, 127, .13); color: var(--danger); }
.is-failed .dot { background: var(--danger); }

.is-archived .badge { background: rgba(255, 255, 255, .06); color: var(--t3); }
.is-archived .dot { background: rgba(255, 255, 255, .20); box-shadow: none; animation: none; }

/* ── Forms ───────────────────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: 8px; }
.fields { display: flex; flex-direction: column; gap: 16px; }

.label {
    font-size: 13px; font-weight: 500; letter-spacing: .02em;
    text-transform: uppercase; color: var(--t2);
}
.label__optional { text-transform: none; letter-spacing: 0; color: var(--t4); font-weight: 400; }

.input, .textarea, .select {
    width: 100%; padding: 14px 16px;
    border: 0; border-radius: 16px;
    background: var(--surface-hi); box-shadow: inset 0 0 0 1px var(--stroke);
    color: var(--t1); font-size: 15px; outline: none;
    transition: box-shadow 160ms var(--ease);
}
.input:focus, .textarea:focus, .select:focus {
    box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .65), 0 0 0 4px rgba(34, 211, 238, .12);
}
.textarea { min-height: 92px; resize: vertical; line-height: 22px; }
.input--mono { font-family: var(--mono); }
.input--sm, .select--sm { padding: 12px 14px; border-radius: 14px; font-size: 14.5px; }
.textarea--sm { min-height: 86px; padding: 13px 15px; border-radius: 14px; font-size: 14.5px; }
.textarea--reject:focus { box-shadow: inset 0 0 0 1px rgba(255, 61, 127, .55), 0 0 0 4px rgba(255, 61, 127, .10); }
.select { appearance: none; cursor: pointer; }
.select option { background: #16161E; color: var(--t1); }

.search { position: relative; }
.search .input {
    width: 260px; padding: 10px 14px 10px 36px; border-radius: 999px; font-size: 14px;
}
.search__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--t4); font-size: 13px; }

.toggle { cursor: pointer; }
.toggle__face {
    display: inline-flex; align-items: center;
    padding: 9px 14px; border-radius: 999px; font-size: 13.5px;
    background: var(--surface); color: var(--t3);
    box-shadow: inset 0 0 0 1px var(--line);
    transition: background 160ms var(--ease), color 160ms var(--ease);
}
.toggle:has(input:checked) .toggle__face {
    background: rgba(34, 240, 122, .12); color: var(--mint);
    box-shadow: inset 0 0 0 1px rgba(34, 240, 122, .28);
}
.toggle:has(input:disabled) { cursor: not-allowed; }
.toggle:has(input:disabled) .toggle__face { opacity: .4; }

.static-pill {
    display: inline-flex; align-items: center;
    padding: 9px 14px; border-radius: 999px; font-size: 13.5px;
    background: rgba(34, 211, 238, .12); color: var(--teal);
    box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .30);
}

.note-ok { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--mint); }
.note-bad { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--danger); }
.note-idle { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--t4); }

/* ── Flash / banners ─────────────────────────────────────────────────── */

.flash {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 16px; border-radius: 14px; margin-bottom: 14px;
    font-size: 13.5px; line-height: 20px;
}
.flash--success { background: rgba(34, 240, 122, .10); color: #A8F5C8; box-shadow: inset 0 0 0 1px rgba(34, 240, 122, .26); }
.flash--error { background: rgba(255, 61, 127, .10); color: var(--danger-t2); box-shadow: inset 0 0 0 1px rgba(255, 61, 127, .28); }

.callout {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px; border-radius: 16px;
    background: rgba(255, 181, 71, .10); box-shadow: inset 0 0 0 1px rgba(255, 181, 71, .26);
    font-size: 14.5px; color: var(--t1);
}
.callout .dot { width: 8px; height: 8px; background: var(--warn); box-shadow: 0 0 14px var(--warn); animation: pulse 2s ease-in-out infinite; }
.callout__cta {
    margin-left: auto; padding: 8px 16px; border: 0; border-radius: 999px;
    background: var(--warn); color: var(--warn-ink); font-size: 13px; font-weight: 600; cursor: pointer;
}
.callout__cta:hover { background: #FFC97A; color: var(--warn-ink); }

/* ── Login ───────────────────────────────────────────────────────────── */

.login {
    display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px;
    align-items: center; min-height: 640px;
}
.login__wordmark { display: block; height: 26px; width: auto; }
.login__eyebrow {
    margin-top: 18px; font-family: var(--mono); font-size: 12px;
    letter-spacing: .34em; text-transform: uppercase; color: var(--teal);
}
.login__claim {
    margin: 14px 0 0; max-width: 520px;
    font-size: 24px; line-height: 34px; font-weight: 500; letter-spacing: -.01em; color: var(--t2);
}

.term {
    margin-top: 36px; max-width: 560px; border-radius: 20px; overflow: hidden;
    background: var(--surface); backdrop-filter: var(--blur); box-shadow: var(--lift-hi);
}
.term__bar {
    display: flex; align-items: center; gap: 8px; padding: 12px 16px;
    box-shadow: inset 0 -1px 0 var(--line);
    font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--t4);
}
.term__body { padding: 16px; font-family: var(--mono); font-size: 12.5px; line-height: 24px; color: var(--t4); }
.term__body b { color: var(--teal); font-weight: 400; }
.term__body .on { color: var(--t2); }
.term__caret { animation: blink 1.1s step-end infinite; }

/* ── Runs list ───────────────────────────────────────────────────────── */

.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: stretch; }
.grid-2-1 > .panel { display: flex; flex-direction: column; }

.gauge { display: flex; align-items: center; gap: 22px; margin-top: 18px; }
.gauge__ring { position: relative; width: 112px; height: 112px; flex: none; }
.gauge__ring svg { transform: rotate(-90deg); }
.gauge__ring circle { fill: none; stroke-width: 10; }
.gauge__track { stroke: rgba(255, 255, 255, .07); }
.gauge__value { stroke: var(--teal); stroke-linecap: round; filter: drop-shadow(0 0 10px rgba(34, 211, 238, .45)); }
.gauge__value.is-low { stroke: var(--warn); filter: drop-shadow(0 0 10px rgba(255, 181, 71, .45)); }
.gauge__center {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 1px;
}
.gauge__pct { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.gauge__num { display: flex; align-items: baseline; gap: 6px; }
.gauge__spent { font-size: 32px; font-weight: 600; letter-spacing: -.03em; }
.gauge__spent .cur { font-size: .7em; vertical-align: .12em; opacity: .9; }
.gauge__cap { font-size: 15px; color: var(--t4); }
.gauge__left { font-size: 14px; color: var(--mint); }
.gauge__left.is-low { color: var(--warn); }

.toolbar { margin-top: 26px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.toolbar__end { margin-left: auto; }

.rows { margin-top: 14px; }
.row {
    display: grid; grid-template-columns: 1.6fr 200px 110px 170px 190px;
    gap: 16px; align-items: center; padding: 15px 24px;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .05);
    position: relative;
    transition: background 160ms var(--ease);
}
.row:hover { background: var(--surface-lo); }
.row:last-child { box-shadow: none; }

.rows__head {
    display: grid; grid-template-columns: 1.6fr 200px 110px 170px 190px;
    gap: 16px; padding: 14px 24px;
    font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--t4);
    box-shadow: inset 0 -1px 0 var(--line);
}
.rows__head .end, .row__end { text-align: right; }

.row__target { display: flex; align-items: center; gap: 11px; min-width: 0; }
.row__name { font-size: 15px; font-weight: 500; color: var(--t1); }
.row__name::after { content: ''; position: absolute; inset: 0; }
.row__name:hover { color: var(--teal); }
.row__note { font-size: 12px; color: var(--t4); }
.row__cost { text-align: right; font-family: var(--mono); font-size: 13.5px; color: var(--t2); }
.row__date { font-size: 13px; color: var(--t4); }
.row__end { display: flex; justify-content: flex-end; align-items: center; gap: 8px; position: relative; z-index: 1; }
.row__versions { font-size: 12px; color: var(--t4); font-family: var(--mono); }
.row__none { font-size: 13px; color: var(--t5); }
.row__open { font-size: 13px; color: var(--teal); }
.row--archived .row__name { color: var(--t2); }

.retry-mini {
    padding: 5px 12px; border: 0; border-radius: 999px; cursor: pointer;
    font-size: 12.5px; color: var(--mint); background: rgba(34, 240, 122, .12);
}
.retry-mini:hover { background: rgba(34, 240, 122, .20); }

.rows__foot { padding: 14px 24px; font-size: 12.5px; color: var(--t4); box-shadow: inset 0 1px 0 var(--line); }

/* ── Detail ──────────────────────────────────────────────────────────── */

.studio { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: start; }
.rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 78px; }

.rail__id h1 { margin: 12px 0 0; word-break: break-word; }
.rail__target { display: inline-block; margin-top: 6px; font-size: 13px; color: var(--t4); font-family: var(--mono); }
.rail__target:hover { color: var(--teal); }
.rail__note {
    margin: 14px 0 0; padding-top: 14px; font-size: 13.5px; line-height: 20px; color: var(--t2);
    box-shadow: inset 0 1px 0 var(--line);
}
.rail__meta {
    margin-top: 16px; padding-top: 16px; display: flex; justify-content: space-between;
    box-shadow: inset 0 1px 0 var(--line);
}
.rail__meta .val { margin-top: 3px; font-size: 13.5px; color: var(--t2); }
.rail__meta .val--cost { font-family: var(--mono); font-size: 17px; color: var(--t1); }
.rail__actions { display: flex; flex-direction: column; gap: 8px; }
.rail__actions .duo { display: flex; gap: 8px; }
.rail__actions .duo > form { flex: 1; display: flex; }
.rail__actions .duo .btn { width: 100%; }

.phases { margin-top: 14px; display: flex; flex-direction: column; gap: 11px; }
.phase { display: flex; align-items: center; gap: 10px; }
.phase__label { font-size: 13.5px; color: var(--t4); }
.phase__time { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--t4); }
.phase.is-done .dot { background: var(--mint); }
.phase.is-done .phase__label { color: var(--t1); }
.phase.is-active .dot { background: var(--teal); box-shadow: 0 0 12px rgba(34, 211, 238, .7); animation: pulse 1.6s ease-in-out infinite; }
.phase.is-active .phase__label { color: var(--t1); font-weight: 500; }
.phase.is-todo .dot { background: rgba(255, 255, 255, .14); }
.phase.is-failed .dot { background: var(--danger); box-shadow: 0 0 12px rgba(255, 61, 127, .5); }
.phase.is-failed .phase__label { color: var(--danger-t); }

.phases--big { margin-top: 26px; gap: 2px; }
.phases--big .phase { padding: 11px 14px; border-radius: 12px; gap: 12px; }
.phases--big .phase__label { font-size: 13.5px; }
.phases--big .phase__time { font-size: 12.5px; }
.phases--big .phase.is-active { background: rgba(34, 211, 238, .08); }

.versions { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; }
.version {
    width: 100%; border: 0; cursor: pointer; text-align: left;
    padding: 10px 12px; border-radius: 12px; background: transparent; color: var(--t1);
    transition: background 160ms var(--ease);
}
.version:hover { background: var(--surface-lo); }
.version.is-active { background: rgba(34, 211, 238, .10); box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .28); }
.version__head { display: flex; align-items: center; gap: 9px; }
.version__name { font-family: var(--mono); font-size: 13.5px; font-weight: 500; }
.version__tag { padding: 2px 8px; border-radius: 999px; font-size: 11px; background: rgba(255, 255, 255, .06); color: var(--t3); }
.version.is-latest .version__tag { background: rgba(34, 211, 238, .14); color: var(--teal); }
.version .dot { background: rgba(255, 61, 127, .55); }
.version.is-latest .dot { background: var(--teal); }
.version__time { margin-left: auto; font-size: 11.5px; color: var(--t4); }
.version__feedback {
    margin-top: 7px; margin-left: 18px; padding-left: 11px;
    font-size: 12.5px; line-height: 19px; color: var(--t3);
    box-shadow: inset 1px 0 0 rgba(255, 61, 127, .35);
}

/* ── Stage (main panel) ──────────────────────────────────────────────── */

.stage {
    border-radius: 20px; overflow: hidden; min-height: 820px;
    display: flex; flex-direction: column;
    background: var(--surface); backdrop-filter: var(--blur); box-shadow: var(--lift);
}
.stage__bar {
    display: flex; align-items: center; gap: 14px; padding: 12px 16px;
    box-shadow: inset 0 -1px 0 var(--line);
}
.stage__tools { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.stage__body { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.empty {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 80px 24px; text-align: center;
}
.empty__ring {
    width: 56px; height: 56px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
    background: var(--surface-hi); box-shadow: inset 0 0 0 1px var(--stroke);
}
.empty__ring .dot { width: 10px; height: 10px; background: var(--t4); animation: pulse 1.8s ease-in-out infinite; }
.empty__title { font-size: 17px; font-weight: 500; }
.empty__text { font-size: 14px; color: var(--t4); max-width: 360px; text-wrap: pretty; }

.working { flex: 1; display: flex; align-items: center; justify-content: center; padding: 56px 24px; }
.working__inner { width: 100%; max-width: 660px; }
.working__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.working__title { font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.working__elapsed { font-family: var(--mono); font-size: 15px; color: var(--teal); }
.working__sub { margin-top: 8px; font-size: 14.5px; color: var(--t2); }

.bar { margin-top: 26px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.bar__fill {
    height: 100%; border-radius: 999px;
    background: linear-gradient(110deg, #22D3EE 0%, #67E8F9 45%, #22D3EE 100%);
    background-size: 200% 100%; animation: sweep 2.4s linear infinite;
    box-shadow: 0 0 16px rgba(34, 211, 238, .5);
    transition: width 600ms var(--ease);
}

.tail {
    margin-top: 26px; padding: 16px; border-radius: 16px;
    background: var(--surface-lo); box-shadow: inset 0 0 0 1px var(--line);
    font-family: var(--mono); font-size: 12.5px; line-height: 22px; color: var(--t3);
}
.tail__head {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
    font-family: 'Geist', sans-serif; font-size: 11px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--t4);
}
.tail__head .dot { width: 6px; height: 6px; background: var(--mint); animation: pulse 1.6s ease-in-out infinite; }
.tail__row { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tail__row b { color: var(--teal); font-weight: 400; }

.fail { flex: 1; display: flex; align-items: center; justify-content: center; padding: 64px 24px; }
.fail__card {
    width: 100%; max-width: 640px; border-radius: 20px; padding: 24px;
    background: rgba(255, 61, 127, .08); box-shadow: inset 0 0 0 1px rgba(255, 61, 127, .26);
}
.fail__head { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; }
.fail__mark {
    width: 22px; height: 22px; border-radius: 999px; flex: none;
    background: rgba(255, 61, 127, .20); color: var(--danger);
    display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.fail__trace {
    margin-top: 14px; padding: 14px; border-radius: 14px; background: rgba(8, 8, 12, .5);
    font-family: var(--mono); font-size: 12.5px; line-height: 21px; color: var(--danger-t2);
    white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto;
}
.fail__actions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }

.live { flex: 1; display: flex; flex-direction: column; padding: 20px; gap: 16px; min-height: 0; }
.live__bar {
    display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 16px;
    background: rgba(34, 240, 122, .08); box-shadow: inset 0 0 0 1px rgba(34, 240, 122, .24);
}
.live__bar .dot { width: 8px; height: 8px; background: var(--mint); box-shadow: 0 0 14px var(--mint); }
.live__url { font-size: 18px; font-weight: 500; color: var(--mint); font-family: var(--mono); }
.live__facts { margin-left: auto; display: flex; gap: 22px; text-align: right; }
.live__facts .val { font-size: 13.5px; color: var(--t2); }

.preview-area {
    flex: 1; padding: 20px; display: flex; gap: 16px; justify-content: center; align-items: stretch;
    background: rgba(8, 8, 12, .32); min-height: 560px;
}
.preview-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; width: 100%; }
.preview-col--target { flex: 1; }
.preview-col--mockup { flex: 0 1 var(--vw, 100%); max-width: var(--vw, 100%); margin: 0 auto; }
.preview-area.is-comparing .preview-col--mockup { flex: 1; max-width: none; }
.preview-col__label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--t4); }
.preview-col--mockup .preview-col__label { color: var(--teal); }
.frame {
    flex: 1; border-radius: 14px; overflow: hidden; background: #fff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 24px 60px rgba(0, 0, 0, .5);
}
.frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.frame--target { background: #EDE9E3; filter: saturate(.55); box-shadow: inset 0 0 0 1px var(--stroke); }
.frame--live { min-height: 520px; border-radius: 16px; }

/* ── Decision ────────────────────────────────────────────────────────── */

.decision { display: flex; flex-direction: column; }
.decision__panel {
    padding: 20px 24px; background: var(--surface-lo); box-shadow: inset 0 1px 0 var(--line);
}
.decision__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; }
.decision__domain { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.decision__stack { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.decision__bar {
    display: flex; align-items: center; gap: 12px; padding: 16px 24px;
    background: rgba(8, 8, 12, .72); backdrop-filter: blur(24px);
    box-shadow: inset 0 1px 0 var(--hairline), 0 -12px 32px rgba(0, 0, 0, .4);
}
.decision__meta { font-size: 13.5px; color: var(--t4); }
.decision__meta b { font-family: var(--mono); color: var(--t2); font-weight: 400; }
.decision__buttons { margin-left: auto; display: flex; gap: 10px; }

/* ── Activity log ────────────────────────────────────────────────────── */

.logbar {
    display: flex; align-items: center; gap: 10px; padding: 12px 20px;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06);
    font-size: 12.5px; color: var(--t2);
}
.logbar .dot { background: var(--mint); box-shadow: 0 0 12px var(--mint); animation: pulse 1.8s ease-in-out infinite; }

.log {
    flex: 1; overflow: auto; padding: 16px 20px;
    display: flex; flex-direction: column; gap: 3px; max-height: 720px;
}

.ev { display: flex; flex-direction: column; }

.ev--stage .ev__row {
    display: flex; align-items: center; gap: 11px; padding: 9px 12px;
    border-radius: 12px; background: rgba(34, 211, 238, .07);
}
.ev--stage .dot { background: var(--teal); box-shadow: 0 0 10px rgba(34, 211, 238, .6); }
.ev--stage .ev__text { font-size: 14px; font-weight: 500; color: var(--t1); }

.ev--text .ev__row { padding: 8px 12px 8px 23px; font-size: 13.5px; line-height: 21px; color: var(--t2); white-space: pre-wrap; text-wrap: pretty; }

.ev--error .ev__row {
    display: flex; align-items: flex-start; gap: 11px; padding: 10px 12px; border-radius: 12px;
    background: rgba(255, 61, 127, .09); color: var(--danger-t2);
    font-family: var(--mono); font-size: 12.5px; line-height: 20px; white-space: pre-wrap;
}

.ev--result .ev__row {
    display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px;
    background: rgba(34, 240, 122, .07); font-family: var(--mono); font-size: 12.5px; color: var(--mint);
}
.ev--result.is-error .ev__row { background: rgba(255, 61, 127, .09); color: var(--danger-t); }

.ev__time { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--t4); }

.tool { border-radius: 12px; background: var(--surface-lo); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); overflow: hidden; }
.tool > summary {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; list-style: none;
}
.tool > summary::-webkit-details-marker { display: none; }
.tool__caret { display: inline-block; width: 10px; color: var(--t4); transition: transform 200ms var(--ease); }
.tool[open] .tool__caret { transform: rotate(90deg); }
.tool__name {
    display: inline-flex; padding: 2px 8px; border-radius: 6px;
    background: rgba(199, 168, 240, .14); color: var(--tool);
    font-family: var(--mono); font-size: 11.5px; font-weight: 500;
}
.tool__summary { font-family: var(--mono); font-size: 12.5px; color: var(--t3); }
.tool__body { padding: 0 12px 12px 33px; display: flex; flex-direction: column; gap: 8px; }
.tool__block {
    padding: 10px 12px; border-radius: 10px; background: rgba(8, 8, 12, .5);
    font-family: var(--mono); font-size: 12px; line-height: 20px; color: var(--t2);
    white-space: pre-wrap; word-break: break-word; max-height: 180px; overflow: auto;
}
.tool__block--out { color: var(--t3); }

/* ── Deploy tab ──────────────────────────────────────────────────────── */

.deploy { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.deploy__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.deploy__val { margin-top: 6px; font-family: var(--mono); font-size: 16px; }
.deploy__link { margin-top: 6px; display: inline-block; font-family: var(--mono); font-size: 13.5px; }

/* ── Modal ───────────────────────────────────────────────────────────── */

dialog.modal {
    width: 460px; max-width: calc(100% - 48px); border: 0; border-radius: 24px; padding: 28px;
    background: rgba(22, 22, 30, .96); backdrop-filter: var(--blur); color: var(--t1);
    box-shadow: inset 0 1px 0 var(--stroke), 0 20px 60px rgba(0, 0, 0, .55);
}
dialog.modal::backdrop { background: rgba(8, 8, 12, .72); backdrop-filter: blur(8px); }
.modal__head { display: flex; align-items: center; gap: 11px; }
.modal__mark {
    width: 30px; height: 30px; border-radius: 999px; flex: none;
    background: rgba(255, 61, 127, .16); color: var(--danger);
    display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.modal__text { margin: 14px 0 0; font-size: 14px; line-height: 21px; color: var(--t2); text-wrap: pretty; }
.modal__actions { margin-top: 22px; display: flex; gap: 10px; justify-content: flex-end; }

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
    .studio { grid-template-columns: 1fr; }
    .rail { position: static; }
    .stage { min-height: 0; }
}

@media (max-width: 900px) {
    .shell { padding: 20px 16px 64px; }
    .login { grid-template-columns: 1fr; gap: 32px; min-height: 0; }
    .grid-2-1 { grid-template-columns: 1fr; }
    .decision__grid, .deploy__grid { grid-template-columns: 1fr; gap: 20px; }
    .preview-area { flex-direction: column; padding: 12px; }
    .preview-col--mockup { max-width: 100%; flex: 1; }
    .stage__bar { flex-wrap: wrap; }
    .stage__tools { margin-left: 0; width: 100%; }
    .decision__bar { flex-wrap: wrap; }
    .decision__buttons { margin-left: 0; width: 100%; }
    .decision__buttons .btn { flex: 1; }

    .rows__head { display: none; }
    .row {
        grid-template-columns: 1fr auto; gap: 8px 12px; padding: 14px 16px;
        grid-template-areas: 'target status' 'meta end';
    }
    .row__target { grid-area: target; }
    .row > *:nth-child(2) { grid-area: status; justify-self: end; }
    .row__cost { grid-area: meta; text-align: left; }
    .row__date { display: none; }
    .row__end { grid-area: end; }

    .topbar { gap: 10px; padding: 10px 16px; }
    .topbar__nav .pill, .topbar__right .pill { padding: 6px 10px; font-size: 12.5px; }
    .brand__scope, .topbar__divider { display: none; }
    .search .input { width: 100%; }
    .toolbar__end { margin-left: 0; width: 100%; }
}