:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #f2f0ff; background: #080912; font-synthesis: none; --line: #a495d32c; --muted: #aba9c4; --violet: #c6a6ff; --gold: #e6c681; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse at 15% 10%, #33205830, transparent 50%), radial-gradient(ellipse at 95% 55%, #16447924, transparent 45%), #080912; }
button, textarea, input { font: inherit; }
button { cursor: pointer; transition: background .18s, border-color .18s, transform .18s; }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #dbc6ff; outline-offset: 4px; }
[hidden] { display: none !important; }
.shell { width: min(1700px, 100%); margin: auto; padding: 0 clamp(16px, 3vw, 48px); }
.topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; min-height: 112px; border-bottom: 1px solid var(--line); position: relative; }
.topbar::after { content: ''; position: absolute; height: 1px; width: 30%; bottom: -1px; left: 35%; background: linear-gradient(90deg, transparent, #af8aed, #78cbfa, transparent); }
.brand { display: flex; align-items: center; gap: 13px; white-space: nowrap; }
.brandmark { width: 49px; height: 49px; flex-shrink: 0; border-radius: 50%; background: url('/bh-purple.webp') 66% 49% / 225% auto; box-shadow: 0 0 20px #7658f136, inset 0 0 12px #070812; border: 1px solid #ab9ae845; transform: rotate(-12deg); }
.brand-name { display: block; font-size: clamp(16px, 1.5vw, 23px); font-weight: 850; letter-spacing: -.035em; color: #e8ecff; text-shadow: 0 2px 1px #616990, 0 0 25px #7795ff30; }
.brand-name b { color: #84cdff; }
.brand-line { display: block; font-size: 8px; font-weight: 650; letter-spacing: .23em; color: #a8b2ce; margin-top: 8px; }
h1 { font-size: clamp(24px, 2.8vw, 42px); font-weight: 600; letter-spacing: .11em; margin: 0; white-space: nowrap; }
h1 > span { font-weight: 400; color: #d4bbff; letter-spacing: .05em; margin-left: 8px; }
.title-divider { color: #787090; font-size: .58em; vertical-align: 10%; margin: 0 2px; }
.powered { justify-self: end; text-align: right; }
.powered > span { display: block; font-size: 8px; letter-spacing: .26em; color: #9493ad; margin-bottom: 5px; }
.powered strong { font-size: 21px; font-weight: 450; letter-spacing: .22em; color: #e1dff0; }
.powered b { color: #75bed6; font-size: 12px; font-weight: 450; }
.power-mark { color: #9fa2b9; font-size: 24px; vertical-align: -2px; }
.workspace-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 48px; }
.workspace-label { color: #aaa5c2; font-size: 9px; font-weight: 650; letter-spacing: .2em; }
.connection { display: flex; align-items: center; gap: 8px; color: #b7b5c9; font-size: 11px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: #dbb973; box-shadow: 0 0 10px #dbb97355; }
.online .dot { background: #72e0b3; box-shadow: 0 0 12px #72e0b380; }
.offline .dot { background: #ed968e; box-shadow: 0 0 10px #ed968e50; }
.workspace { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 18px; }
.card { min-width: 0; position: relative; isolation: isolate; border-radius: 20px; border: 1px solid #8876b763; background: #0d0e1d; box-shadow: inset 0 1px 0 #dbc4ff25, 0 14px 42px #0005; overflow: hidden; }
.card::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.composer { border-color: #aa81e391; }
.composer::before { background: linear-gradient(180deg, #0b0c1aee 0%, #0b0c1a80 28%, #10112961 65%, #10101de8 100%), url('/bh-purple.webp') 58% center / cover; }
.composer::after { content: ''; position: absolute; bottom: 0; height: 2px; left: 12%; right: 12%; background: linear-gradient(90deg, transparent, #a67bdf, #689ee4, transparent); }
.run-card { border-color: #9e887953; background: radial-gradient(ellipse at 90% 35%, #34305829, transparent 70%), #0d0e19; }
.composer, .run-card { padding: 27px 28px 20px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.section-number, .mini-label { color: #b8a8d6; font-size: 9px; letter-spacing: .18em; font-weight: 650; }
.run-card .section-number { color: var(--gold); }
h2 { font-size: 26px; font-weight: 550; letter-spacing: -.035em; margin: 7px 0 0; }
.private-tag { font-size: 8px; color: #c8bddd; padding: 7px 9px; border: 1px solid #b399d03d; background: #1110209c; border-radius: 5px; letter-spacing: .12em; white-space: nowrap; }
form > label, legend { display: block; margin: 0 0 9px; color: #f0ebfa; font-size: 12px; font-weight: 600; }
.hint { float: right; font-size: 10px; color: #b2abc6; font-weight: 400; }
input[type=text], textarea { width: 100%; display: block; border: 1px solid #a69ac466; border-radius: 9px; padding: 13px 15px; background: #0b0b1edb; color: #f5efff; box-shadow: inset 0 2px 7px #0002; backdrop-filter: blur(9px); }
input[type=text] { margin-bottom: 21px; }
textarea { min-height: 137px; resize: vertical; line-height: 1.6; font-size: 13px; }
input::placeholder, textarea::placeholder { color: #aaa4bd; opacity: 1; }
input[type=text]:hover, textarea:hover { border-color: #bba2db99; }
.mode-field { border: 0; padding: 0; margin: 23px 0 22px; }
.mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.mode { position: relative; cursor: pointer; min-width: 0; }
.mode input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mode > span { position: relative; height: 100%; min-height: 86px; display: flex; flex-direction: column; justify-content: center; padding: 13px 12px; background: #0d0d20e0; border: 1px solid #a696bf59; border-radius: 9px; backdrop-filter: blur(10px); transition: background .15s, border-color .15s; }
.mode i { position: absolute; right: 10px; top: 8px; font-size: 9px; font-style: normal; color: #9686b0; }
.mode strong { font-size: 12px; font-weight: 650; margin-top: 4px; }
.mode small { margin-top: 6px; font-size: 10px; line-height: 1.4; color: #b0a8c4; }
.mode input:checked + span { border-color: #c7a7ff; background: linear-gradient(140deg, #6a429882, #312446d9); box-shadow: inset 0 0 0 1px #d2b5ff20, 0 0 18px #8354bc1a; }
.mode input:checked + span i { color: #dfc6ff; }
.mode input:focus-visible + span { outline: 2px solid #dfc6ff; outline-offset: 4px; }
.dispatch-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 19px; border-top: 1px solid #b7a0d138; }
.dispatch-footer > span { max-width: 240px; color: #b1a9c4; font-size: 10px; line-height: 1.6; }
.dispatch-footer b { display: block; color: #d4cbe4; font-weight: 500; }
.primary { min-width: 156px; border: 1px solid #d3aeff91; border-radius: 9px; background: linear-gradient(120deg, #ab7bea, #6940a5); color: white; padding: 13px 19px; font-size: 13px; font-weight: 650; box-shadow: inset 0 1px 0 #e9ceff70, 0 7px 24px #773dba45; }
.primary:hover { background: linear-gradient(120deg, #bb8df7, #7b50b5); transform: translateY(-1px); }
.primary span { margin-left: 24px; font-size: 19px; }
.form-message { color: #a0e5c7; font-size: 12px; line-height: 1.5; margin: 13px 0 0; overflow-wrap: anywhere; }
.form-message:empty { margin: 0; }
.form-message.error { color: #ffb0ac; }
.small-button { border: 1px solid #b39a673e; background: #e8c3830a; color: #ecd5a6; border-radius: 7px; font-size: 11px; padding: 9px 12px; min-height: 36px; }
.small-button:hover:enabled { background: #e8c3831c; }
.empty-run { display: flex; flex-direction: column; text-align: center; min-height: 421px; }
.idle-art { position: relative; flex: 1; min-height: 212px; margin: -5px -28px 0; background: linear-gradient(180deg, #0d0e1940, transparent 45%, #0d0e19), url('/bh-gold.webp') center 49% / cover; }
.orbit-cross { position: absolute; left: 28px; top: 15px; font-size: 19px; font-weight: 200; color: #dfc8918c; }
.orbit-label { position: absolute; bottom: 16px; right: 26px; color: #d7c49a9c; font-size: 8px; letter-spacing: .34em; }
.idle-copy { display: flex; flex-direction: column; align-items: center; gap: 11px; position: relative; padding: 7px 12px 23px; }
.idle-copy .mini-label { color: var(--gold); font-size: 8px; letter-spacing: .22em; }
.idle-copy > strong { font-size: clamp(20px, 2vw, 29px); font-weight: 500; letter-spacing: -.035em; }
.idle-copy > span:last-child { max-width: 300px; font-size: 12px; color: var(--muted); line-height: 1.65; }
.pipeline { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #a290702f; background: #0a0b16; border-radius: 9px; margin-top: auto; }
.pipeline > span { font-size: 10px; padding: 14px 4px; color: #ccc1dd; }
.pipeline > span + span { border-left: 1px solid #a2907025; }
.pipeline b { color: #d6b77e; font-size: 8px; margin-right: 6px; font-weight: 500; }
.run-title { display: flex; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.run-title > div { min-width: 0; display: grid; gap: 8px; }
.run-title strong { font-size: 12px; overflow-wrap: anywhere; font-weight: 500; }
.badge { color: #e1c991; border: 1px solid #bda77555; background: #bda77512; font-size: 10px; text-transform: uppercase; padding: 7px 9px; border-radius: 5px; white-space: nowrap; }
.badge.status-running, .badge.status-completed { color: #8ee3bb; border-color: #74c8a455; background: #74c8a412; }
.badge.status-failed, .badge.status-stale_exited, .badge.status-interrupted { color: #fba49c; border-color: #d67c7355; background: #d67c7312; }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.metrics > div { border: 1px solid var(--line); border-radius: 8px; background: #181424; padding: 15px 10px; }
.metrics span, .lanes-heading > span:last-child { display: block; font-size: 8px; color: #aaa0bf; letter-spacing: .08em; }
.metrics strong { font-size: 12px; display: block; margin-top: 10px; overflow-wrap: anywhere; text-transform: capitalize; font-weight: 500; }
.status-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.status-row > div { display: grid; gap: 10px; }
.status-row strong { font-size: 11px; font-weight: 500; text-transform: capitalize; overflow-wrap: anywhere; }
.status-row .mini-label { font-size: 8px; letter-spacing: .08em; }
.lanes-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 21px 0 12px; }
.lanes-heading > span:last-child { text-align: right; font-size: 7px; }
.lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lane { display: grid; grid-template-columns: 32px 1fr; gap: 5px 7px; padding: 11px; align-items: center; border: 1px solid var(--line); border-radius: 7px; background: #10101e; }
.lane strong { color: #dac6f5; font-size: 12px; }
.lane-status { font-size: 11px; color: #b2a8c4; text-transform: capitalize; }
.lane-status.status-completed { color: #8ee3bb; }
.lane-status.status-failed { color: #fba49c; }
.lane small { grid-column: 1 / -1; color: #a69cb6; overflow-wrap: anywhere; font-size: 10px; line-height: 1.35; }
.inspect { margin-top: 18px; padding: 22px 28px 12px; border-color: #8876b73e; background: linear-gradient(120deg, #161322, #0b0e18); }
.inspect .card-head { margin-bottom: 12px; }
.inspect .card-head > div { display: flex; align-items: center; gap: 17px; }
.inspect h2 { margin: 0; font-size: 20px; }
.inspect .private-tag { border: 0; background: none; color: #8c829f; }
.tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--line); }
.tabs button { border: 0; border-bottom: 2px solid transparent; background: none; color: #b2a8c4; padding: 12px 2px; min-height: 42px; font-size: 12px; }
.tabs button[aria-selected=true] { color: #e4ccff; border-bottom-color: #bc8ff8; }
.panel { min-height: 92px; padding-top: 9px; }
.placeholder { font-size: 12px; line-height: 1.6; color: #a99fbb; padding: 14px 0; }
.placeholder > span { color: #b492df; margin-right: 10px; font-size: 22px; vertical-align: -2px; }
.events { max-height: 320px; overflow: auto; }
.event { display: grid; grid-template-columns: 90px minmax(150px, .7fr) 1fr; gap: 12px; align-items: center; padding: 11px 3px; border-bottom: 1px solid #a79abc1a; font-size: 11px; }
.event time { color: #a297b4; }
.event strong { color: #e0d8ec; font-weight: 500; overflow-wrap: anywhere; }
.event span { color: #c3aedc; overflow-wrap: anywhere; }
.file-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0; }
.file-button { color: #bfb2d1; background: #151222; border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; font-size: 11px; }
.file-button.selected { color: #e5c9ff; border-color: #b995e8; }
.file-viewer { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 400px; overflow: auto; background: #0a0b14; border: 1px solid var(--line); border-radius: 8px; color: #d2c7e3; padding: 17px; font-size: 11px; line-height: 1.6; }
footer { display: flex; justify-content: space-between; gap: 15px; padding: 23px 2px 28px; font-size: 8px; letter-spacing: .16em; color: #8e849f; }
footer b { color: #a791c6; } .footer-divider { margin: 0 10px; color: #695d80; }
@media (min-width: 1550px) { .composer, .run-card { padding: 30px 34px 26px; } .idle-art { margin-left: -34px; margin-right: -34px; } textarea { min-height: 160px; } .empty-run { min-height: 443px; } }
@media (max-width: 1050px) { .topbar { gap: 14px; } .brandmark { width: 37px; height: 37px; } .brand { gap: 9px; } .brand-line { font-size: 6px; } .powered strong { font-size: 17px; } .composer, .run-card { padding: 23px 21px 20px; } .idle-art { margin-left: -21px; margin-right: -21px; } .private-tag { font-size: 7px; } .mode i { display: none; } h2 { font-size: 23px; } .hint { font-size: 9px; } }
@media (max-width: 820px) { .topbar { grid-template-columns: 1fr auto; min-height: 120px; padding: 19px 0; gap: 17px; } .topbar h1 { grid-column: 1 / -1; grid-row: 2; justify-self: center; font-size: 29px; } .brand-line { font-size: 7px; } .brand-name { font-size: 18px; } .workspace { grid-template-columns: 1fr; gap: 16px; } .empty-run { min-height: 350px; } .idle-art { min-height: 180px; background-position: center 45%; } .workspace-bar { min-height: 46px; } .composer, .run-card { padding: 24px; } .idle-art { margin-left: -24px; margin-right: -24px; } .mode i { display: block; } .inspect { padding: 22px 24px 10px; } .private-tag { font-size: 8px; } }
@media (max-width: 480px) { .shell { padding: 0 13px; } .brandmark { width: 33px; height: 33px; } .brand-name { font-size: 15px; } .brand-line { font-size: 6px; letter-spacing: .16em; } .powered strong { font-size: 15px; } .powered > span { font-size: 6px; } .power-mark { font-size: 19px; } .workspace-label { font-size: 7px; letter-spacing: .13em; } .connection { font-size: 9px; } .composer, .run-card { padding: 20px 17px; } .card-head { gap: 8px; margin-bottom: 23px; } .private-tag { font-size: 6px; padding: 7px; } h2 { font-size: 22px; } .hint { font-size: 9px; } .mode-grid { gap: 6px; } .mode > span { padding: 12px 8px; min-height: 98px; } .mode strong { font-size: 10px; } .mode small { font-size: 9px; } .mode i { top: 5px; right: 6px; font-size: 8px; } .dispatch-footer { flex-wrap: wrap; gap: 13px; } .dispatch-footer > span { max-width: none; } .primary { width: 100%; } .idle-art { margin-left: -17px; margin-right: -17px; } .idle-copy { padding-left: 0; padding-right: 0; } .inspect { padding: 20px 17px 8px; } .inspect .private-tag { display: none; } .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .status-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .event { grid-template-columns: 66px 1fr; } .event span { grid-column: 2; } .tabs { gap: 23px; } footer { font-size: 7px; letter-spacing: .05em; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
/* Black Hole wordmark: the event horizon is the O, not a separate badge. */
.brand-name { display: flex; align-items: center; gap: 0; font-family: 'Arial Black', Impact, sans-serif; font-weight: 900; font-size: clamp(22.8px, 2.16vw, 33.6px); letter-spacing: -.045em; line-height: 1; transform: translateY(6px) skewX(-7deg); }
.brand-name > span:not(.brand-hole) { background: linear-gradient(#fff 12%, #e5f4ff 35%, #8fa9cb 50%, #f3faff 57%, #bccfe8 75%, #698cad); background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 2px 0 #334266); }
.brand-name b { color: #81cdff; }
.brand-hole { display: inline-block; position: relative; width: 1.17em; height: 1.17em; margin: 0 .035em; border-radius: 50%; background: #02030b; border: 1px solid #8d8aff; box-shadow: 0 0 6px #6787ff, 0 0 12px #6d3de788, inset 0 0 4px #72d9ff; }
.brand-hole > span { position: absolute; inset: -3px; border-radius: 50%; background: conic-gradient(from 20deg, transparent 5%, #6273ff 18%, #ebfaff 24%, #40d5ff 29%, transparent 39%, transparent 56%, #7b37f6 70%, #f1b8ff 77%, #5187ff 82%, transparent 95%); mask: radial-gradient(circle, transparent 49%, #000 53%, #000 64%, transparent 72%); animation: event-horizon 7s linear infinite; }
.brand-hole::after { content: ''; position: absolute; inset: 35% -14%; border-top: 1px solid #d0f0ff; border-bottom: 1px solid #7971ff; border-radius: 50%; transform: rotate(-38deg); box-shadow: 0 0 4px #5c94ff; }
.brand-line { font-size: 8px; letter-spacing: .21em; margin-top: 11px; }
.powered strong { letter-spacing: .19em; }
.connection-actions { display: flex; align-items: center; gap: 13px; }
.text-button { border: 0; background: none; color: #c8b3e9; padding: 6px; font-size: 11px; }
.access-panel { margin: 0 0 18px; padding: 23px 28px; border: 1px solid #a481de77; border-radius: 16px; background: linear-gradient(115deg,#231a38,#0d1122); display: grid; grid-template-columns: 1fr 1.2fr; gap: 12px 28px; }
.access-panel h2 { font-size: 22px; }
.access-panel p { color: #c4bbd5; font-size: 12px; line-height: 1.6; margin: 9px 0 0; }
.access-panel label { font-size: 11px; margin: 5px 0 10px; display: block; }
.access-controls { display: flex; gap: 10px; }
.access-controls input { min-width: 0; flex: 1; background: #0b0b1e; border: 1px solid #a69ac466; border-radius: 8px; padding: 12px; color: #fff; font-size: 12px; }
.access-controls .primary { font-size: 12px; min-width: 130px; }
.access-panel details { grid-column: 1 / -1; font-size: 11px; color: #c4b1e0; }
.access-panel summary { cursor: pointer; width: fit-content; padding: 4px 0; }
.access-panel pre { overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: #d9cbf0; background: #080a13; padding: 13px; border-radius: 7px; line-height: 1.65; }
.connection-help { display: flex; justify-content: space-between; align-items: center; gap: 16px; border: 1px solid #bc947a55; background: #19131e; border-radius: 10px; padding: 12px 17px; margin-bottom: 16px; color: #ddc8bd; font-size: 12px; }
.project-slug { color: #cbb6ea; font-size: 10px; margin: -13px 0 17px; overflow-wrap: anywhere; }
.project-slug:empty { display: none; }
@keyframes event-horizon { to { transform: rotate(360deg); } }
@media(max-width:820px) { .access-panel { grid-template-columns: 1fr; padding: 20px; } .brand-name { font-size: 26.4px; } }
@media(max-width:480px) { .brand-name { font-size: 22.8px; } .brand-line { font-size: 6px; letter-spacing: .16em; } .access-controls { flex-direction: column; } .connection-help { align-items: flex-start; flex-direction: column; } .powered strong { font-size: 16px; } }
@media(prefers-reduced-motion:reduce) { .brand-hole > span { animation: none; } }
select { width: 100%; color: #eee5ff; background: #101021; border: 1px solid #a69ac466; border-radius: 8px; padding: 12px; font: inherit; font-size: 12px; }
select:focus-visible { outline: 2px solid #dbc6ff; outline-offset: 4px; }
.profile-note { font-size: 10px; color: #b8a7cf; margin: 8px 0 20px; line-height: 1.5; }
.mode input:disabled + span { opacity: .4; cursor: not-allowed; }
.run-message { font-size: 12px; color: #bce4d6; line-height: 1.6; padding: 12px; background: #131b27; border: 1px solid #738aaa55; border-radius: 8px; overflow-wrap: anywhere; }
.run-message.error { color: #ffc0b5; border-color: #b8797955; background: #251922; }
.illustration-preview { margin: 16px 0; display: grid; justify-items: start; gap: 13px; }
.illustration-preview img { width: min(100%, 640px); aspect-ratio: 1; object-fit: contain; background: #080912; border: 1px solid var(--line); border-radius: 12px; }
.illustration-preview a { text-decoration: none; }
/* Compact two-panel workspace. */
.workspace { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.topbar { min-height: 96px; }
.workspace-bar { min-height: 42px; }
.composer, .run-card { padding: 23px 25px 20px; }
.card-head { margin-bottom: 20px; }
h2 { font-size: 24px; }
.ui-icon { width: 19px; height: 19px; flex: 0 0 auto; }
.create-fields { display: grid; grid-template-columns: minmax(150px, .36fr) minmax(0, .64fr); gap: 14px; }
.field { min-width: 0; }
.field label { display: block; margin: 0 0 8px; font-size: 11px; font-weight: 600; }
.field input, .field select { height: 43px; margin: 0; padding: 10px 12px; font-size: 12px; }
.field .hint { font-size: 9px; }
.field-notes { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 3px 12px; margin: 7px 0 15px; min-height: 15px; }
.field-notes p { margin: 0; font-size: 9px; line-height: 1.5; }
.field-notes .project-slug { margin-left: auto; }
textarea { height: 128px; min-height: 110px; font-size: 12px; padding: 12px 14px; }
.mode-field { margin: 18px 0 14px; }
.mode-field legend { font-size: 11px; margin-bottom: 9px; }
.execution-row { display: grid; grid-template-columns: minmax(0, 1fr) 116px; align-items: stretch; gap: 10px; }
.mode-grid { gap: 8px; }
.mode > span { min-height: 76px; padding: 10px; display: grid; grid-template-columns: 25px 1fr; grid-template-rows: 1fr auto; gap: 0 7px; align-items: center; background: linear-gradient(145deg, #262236dc, #111322ed); border-color: #a69ac43f; box-shadow: inset 0 1px 0 #ffffff0b, 0 3px 8px #0003; }
.mode-icon { display: grid; place-items: center; width: 25px; height: 29px; color: #ccacff; border-radius: 7px; background: #9d64ed1c; border: 1px solid #b68cfb29; }
.mode-iteration .mode-icon { color: #87d6ff; background: #54bfff16; border-color: #75cfff25; }
.mode-dry .mode-icon { color: #85e6cf; background: #53d4aa15; border-color: #72e3bd25; }
.mode strong { margin: 0; font-size: 11px; line-height: 1.25; }
.mode small { grid-column: 1 / -1; margin: 6px 0 0; font-size: 9px; color: #bdb3cf; }
.mode:hover > span { border-color: #b895ee8c; background: linear-gradient(145deg,#3a2e4d,#171629); }
.mode input:checked + span { background: linear-gradient(140deg,#664588a8,#2c213bee); border-color: #c9a2ffb3; box-shadow: inset 0 1px 0 #ecd6ff33, 0 0 16px #af72ff19; }
.dispatch-button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0; padding: 10px; background: linear-gradient(135deg,#bb90f5,#7545b0); border-color: #dbb4ffc4; }
.dispatch-button .ui-icon { width: 23px; height: 23px; fill: #ffffff13; }
.dispatch-button span { margin: 0; font-size: 12px; }
.dispatch-footer { padding-top: 12px; gap: 0; }
.dispatch-footer > span { max-width: none; font-size: 9px; }
.dispatch-footer b { display: inline; margin-right: 5px; }
.form-message { font-size: 10px; margin-top: 10px; }
.tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid #b5a2cc26; border-radius: 10px; background: #080a13aa; margin-bottom: 16px; }
.tabs button { display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: 7px; padding: 9px 5px; min-height: 39px; font-size: 11px; color: #a9a2be; white-space: nowrap; }
.tabs .ui-icon { width: 16px; height: 16px; color: #b699da; }
.tabs button:hover { background: #a380dd10; color: #eee4ff; }
.tabs button[aria-selected=true] { color: #f0e0ff; border-color: #af87e149; background: linear-gradient(135deg,#57396d78,#262037); box-shadow: inset 0 1px 0 #dfc4ff18, 0 3px 8px #0002; }
.tabs button[aria-selected=true] .ui-icon { color: #dbb8ff; }
.mission-panels { min-width: 0; }
.mission-panels > .panel { height: 350px; overflow: auto; padding: 0 3px 3px 0; scrollbar-width: thin; scrollbar-color: #645374 transparent; }
.empty-run { min-height: 340px; }
.idle-art { min-height: 140px; margin: 0 -3px 0 0; border-radius: 9px; }
.idle-copy { padding: 5px 10px 15px; gap: 8px; }
.idle-copy > strong { font-size: 23px; }
.idle-copy > span:last-child { font-size: 11px; }
.pipeline > span { padding: 11px 3px; }
.run-title { margin: 0 0 13px; }
.run-title > div { gap: 6px; }
.run-title strong { font-size: 11px; }
.run-message { margin: 0 0 12px; padding: 8px 10px; font-size: 11px; }
.metrics > div { padding: 10px; background: linear-gradient(135deg,#221a30,#131220); border-color: #a799bd30; }
.metrics strong { margin-top: 7px; font-size: 11px; }
.status-row { padding: 15px 0; gap: 8px; }
.status-row > div { gap: 7px; }
.status-row strong { font-size: 10px; }
.lanes-heading { margin: 14px 0 9px; }
.lanes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.lane { grid-template-columns: 22px 1fr; padding: 9px; gap: 5px 7px; background: linear-gradient(135deg,#1d182a,#11131f); border-radius: 9px; box-shadow: inset 0 1px 0 #ffffff08; }
.lane-icon { grid-row: 1 / 3; width: 22px; height: 26px; color: #bda0ed; display: grid; place-items: center; }
.lane-icon svg { width: 21px; height: 21px; }
.lane strong { font-size: 11px; }
.lane-status { font-size: 9px; }
.lane small { font-size: 9px; }
.events { max-height: none; overflow: visible; }
.event { grid-template-columns: 65px minmax(0,1fr); gap: 4px 9px; padding: 10px 5px; font-size: 10px; }
.event span { grid-column: 2; color: #a898bd; line-height: 1.5; }
.file-viewer { max-height: none; padding: 12px; font-size: 10px; margin-top: 7px; }
.file-list { padding-top: 0; }
.illustration-preview img { width: min(100%, 350px); }
footer { padding: 18px 2px; }
@media (min-width: 1550px) { .composer, .run-card { padding: 25px 28px 22px; } }
@media (min-width: 821px) and (max-width: 1150px) {
  .composer, .run-card { padding: 20px 18px; }
  .private-tag { display: none; }
  .create-fields { grid-template-columns: minmax(135px,.42fr) minmax(0,.58fr); gap: 10px; }
  .field .hint { display: none; }
  .execution-row { grid-template-columns: minmax(0,1fr) 88px; gap: 7px; }
  .mode > span { grid-template-columns: 1fr; padding: 8px; gap: 6px; }
  .mode small { display: none; }
  .mode strong { font-size: 10px; }
  .tabs button { gap: 4px; font-size: 10px; }
  .lanes { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 820px) {
  .workspace { grid-template-columns: 1fr; }
  .topbar { min-height: 112px; }
  .composer, .run-card { padding: 21px; }
  .mission-panels > .panel { height: 350px; }
}
@media (max-width: 480px) {
  .composer, .run-card { padding: 18px 15px; }
  h2 { font-size: 21px; }
  .card-head { gap: 8px; margin-bottom: 17px; }
  .private-tag { font-size: 6px; }
  .create-fields { grid-template-columns: minmax(124px,.43fr) minmax(0,.57fr); gap: 10px; }
  .field .hint { display: none; }
  .field input, .field select { font-size: 11px; padding: 9px; }
  .field-notes .project-slug { margin-left: 0; }
  .execution-row { grid-template-columns: minmax(0,1fr) 78px; gap: 6px; }
  .mode-grid { gap: 5px; }
  .mode > span { min-height: 74px; padding: 8px 5px; grid-template-columns: 1fr; gap: 6px; justify-items: center; text-align: center; }
  .mode strong { font-size: 9px; }
  .mode small { display: none; }
  .dispatch-button { padding: 8px 4px; }
  .dispatch-button span { font-size: 10px; }
  .dispatch-footer > span { font-size: 8px; }
  .tabs { gap: 2px; }
  .tabs button { flex-direction: column; font-size: 10px; gap: 5px; padding: 8px 3px; }
  .tabs .ui-icon { width: 14px; height: 14px; }
  .lanes { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .metrics span { font-size: 7px; }
  .status-row { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .status-row .mini-label { font-size: 7px; }
  .mission-panels > .panel { height: 390px; }
}

/* Aligned branding, a scanner divider, and persistent Mission Control artwork. */
.topbar { border-bottom-width: 2px; }
.topbar::after { height: 2px; width: 25%; left: 0; bottom: -2px; background: linear-gradient(90deg, transparent, #7454ff 20%, #bd83ff 45%, #78dcff 65%, transparent); box-shadow: 0 0 10px #8474ff80; animation: scanner-sweep 6s ease-in-out infinite alternate; }
@keyframes scanner-sweep { from { transform: translateX(0); } to { transform: translateX(300%); } }
.topbar h1 sup { font-size: .6em; margin-left: .12em; color: #a7dfff; vertical-align: super; letter-spacing: 0; position: relative; top: -.46em; }
.powered { width: 125px; height: auto; flex-shrink: 0; margin-left: auto; display: flex; justify-content: flex-end; align-items: center; }
.powered img { width: 125px; height: auto; display: block; }
.workspace-bar { min-height: 57px; }
.workspace-identity { min-width: 0; }
.dispatch-footer { flex-wrap: nowrap; gap: 16px; }
.dispatch-footer > span { flex: 1; }
.workspace-label { font-size: 8px; color: #8e8ca6; }
.workspace-subtitle { font-size: 18px; letter-spacing: .2em; font-weight: 650; color: #b9c5e3; }
.workspace-subtitle sup { color: #89d8ff; font-size: .9em; }
.run-card::before { background: linear-gradient(180deg,#10101cdd 0%,#11111fc7 40%,#0a0b16e0 100%),url('/bh-gold.webp') 60% center / cover; }
.run-card .metrics > div, .run-card .lane { background: #11121ed9; backdrop-filter: blur(8px); }
.run-card .tabs { background: #0d0e1bcc; }
.run-card .event, .run-card .file-viewer { background-color: #0b0c17c9; }
.output-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 12px 0 17px; }
.output-actions > span { font-size: 10px; color: #d7cba8; }
.preview-button { border: 1px solid #d9c08490; border-radius: 9px; color: #fff4cf; background: linear-gradient(130deg,#66512caa,#352749b0); padding: 10px 15px; font-size: 12px; font-weight: 600; box-shadow: inset 0 1px 0 #fff4c82b,0 4px 16px #05050a33; }
.preview-button:hover { border-color: #f4d88a; background-color: #655035; }
.preview-button > span { font-size: 17px; margin-right: 6px; }
#panel-artifacts > .preview-button { margin-bottom: 14px; }
.preview-dialog { width: min(1440px,96vw); height: min(900px,92vh); max-width: none; max-height: none; padding: 0; color: #eeeaf7; background: #10111b; border: 1px solid #9f8ab366; border-radius: 16px; box-shadow: 0 24px 100px #000a; }
.preview-dialog::backdrop { background: #02030bdc; backdrop-filter: blur(9px); }
.preview-heading { min-height: 85px; padding: 15px 22px; display: flex; gap: 16px; justify-content: space-between; align-items: center; }
.preview-heading h2 { font-size: 19px; margin: 0 0 6px; }
.preview-heading p { font-size: 11px; margin: 0; color: #bfb6cd; }
.preview-controls { display: flex; gap: 9px; align-items: center; }
.preview-controls a { color: inherit; text-decoration: none; }
.preview-frame-host { height: calc(100% - 85px); background: white; }
.preview-frame-host iframe { display: block; width: 100%; height: 100%; border: 0; background: white; }
@media(max-width:1050px) { .powered,.powered img { width: 90px; } .topbar h1 { font-size: 27px; } }
@media(max-width:820px) { .powered,.powered img { width: 92.5px; } .topbar { padding: 10px 0 16px; gap: 3px; } .topbar h1 { margin-top: -4px; } .workspace-bar { flex-wrap: wrap; gap: 8px; padding: 12px 0; } .connection-actions { margin-left: auto; } }
@media(max-width:480px) { .powered,.powered img { width: 75px; } .workspace-subtitle { font-size: 14px; letter-spacing: .1em; } .workspace-label { font-size: 7px; } .preview-heading { padding: 12px; flex-wrap: wrap; } .preview-controls { width: 100%; } .preview-frame-host { height: calc(100% - 120px); } }
@media(prefers-reduced-motion:reduce) { .topbar::after { animation: none; left: 37.5%; } }