:root {
  color-scheme: dark;
  --font-ui: "IBM Plex Sans", "Segoe UI", Arial, Helvetica, sans-serif;
  --font-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --bg: #000000; --panel: #030303; --border: #3d3f47;
  --muted: #8e909a; --subtle: #c4c4cc; --text: #f4f4f7; --accent: #ffb21a;
  --red: #ff7777; --good: #08e0a2;
  font-family: var(--font-ui); font-size: 14px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.55; }
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--accent); }
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select, summary { outline-offset: 4px; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); }
button { cursor: pointer; }
button:disabled { opacity: .6; cursor: not-allowed; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 220px; padding: 28px 20px; background: #000; border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.brand { font-size: 25px; font-weight: 900; letter-spacing: .02em; color: var(--text); display: flex; align-items: center; gap: 10px; }
.orbit-mark { font-size: 30px; color: var(--text); font-weight: 400; }
.eyebrow { font-family: var(--font-mono); font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--subtle); margin: 0 0 10px; }
.sidebar > .eyebrow { margin: 50px 10px 14px; }
.nav-item { font-family: var(--font-mono); font-size: 12px; font-weight: 800; text-transform: uppercase; padding: 11px 12px; color: var(--subtle); border: 1px solid transparent; border-radius: 4px; margin-bottom: 6px; }
.selected { color: var(--text); background: #050505; border: 1px solid #d8d9df; }
.nav-item:hover { color: var(--text); border-color: var(--border); }
.sidebar-bottom { margin-top: auto; font-family: var(--font-mono); font-size: 11px; line-height: 2; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--good); margin-right: 6px; }
.muted { color: var(--muted); }
.main { margin-left: 220px; }
.topbar { position: sticky; top: 0; z-index: 2; min-height: 60px; background: #09090b; border-bottom: 1px solid var(--border); padding: 16px 36px; display: flex; justify-content: space-between; align-items: center; color: var(--subtle); font-family: var(--font-mono); font-size: 12px; }
.topbar > div { display: flex; align-items: center; gap: 16px; }
.separator { margin: 0 14px; color: var(--muted); }
.badge { color: var(--subtle); border: 1px solid var(--border); background: #15161c; padding: 2px 8px; border-radius: 3px; font-size: 10px; letter-spacing: .12em; }
main { max-width: 1420px; margin: 0 auto; padding: 36px; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 24px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 36px; line-height: 1.15; letter-spacing: -.025em; font-weight: 900; text-transform: uppercase; margin-bottom: 12px; }
.lead { color: var(--subtle); font-size: 15px; margin-bottom: 0; }
.reference-tag { color: var(--muted); font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; white-space: nowrap; }
.notice { padding: 14px 18px; border: 1px solid var(--accent); border-left-width: 3px; background: #030303; color: var(--subtle); font-size: 12px; margin-bottom: 28px; max-width: 1200px; }
.notice strong { color: #ffc247; }
.workspace-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 24px; align-items: start; }
.panel { border: 1px solid var(--border); border-radius: 6px; background: var(--panel); overflow: hidden; }
.panel-title { display: flex; gap: 13px; align-items: center; border-bottom: 1px solid var(--border); padding: 19px 22px; }
.panel-title h2 { font-weight: 800; font-size: 16px; text-transform: uppercase; margin: 0; }
.panel-title p { font-size: 12px; color: var(--subtle); margin: 3px 0 0; }
.step { border: 1px solid var(--border); color: var(--subtle); background: #0b0b0e; border-radius: 4px; font-family: var(--font-mono); font-size: 11px; display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; }
.form-content { padding: 22px; }
label { display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
label span { font-size: 11px; font-weight: 400; color: var(--subtle); margin-left: 4px; }
input, textarea, select { width: 100%; border: 1px solid #50535e; border-radius: 4px; background: #0b0b0e; color: var(--text); padding: 10px 11px; min-height: 42px; }
input:hover, textarea:hover, select:hover { border-color: #8b8e99; }
textarea { resize: vertical; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.section-line { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin: 26px 0 14px; }
.section-line h3 { font-family: var(--font-mono); font-size: 13px; font-weight: 800; text-transform: uppercase; margin: 0; }
.section-line > span { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.field-help { font-size: 11px; color: var(--subtle); margin: 10px 0 0; }
.centered { text-align: center; }
details { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 22px; }
summary { font-family: var(--font-mono); font-size: 12px; color: var(--subtle); cursor: pointer; }
.advanced { padding: 16px 0; }
.primary-button { width: 100%; background: var(--accent); border: 1px solid var(--accent); border-radius: 4px; padding: 12px 15px; color: #000; font-family: var(--font-mono); font-weight: 800; font-size: 13px; display: flex; justify-content: space-between; align-items: center; margin-top: 22px; }
.primary-button:hover { background: #ffc247; }
.primary-button:disabled { cursor: wait; }
.secondary-button, .view-button, .job-actions a, .job-actions button { border: 1px solid #8b8e99; background: #030303; color: var(--text); padding: 9px 12px; border-radius: 4px; font-family: var(--font-mono); font-size: 12px; font-weight: 800; }
.secondary-button { display: flex; justify-content: space-between; align-items: center; gap: 22px; }
.secondary-button:hover, .view-button:hover, .job-actions a:hover, .job-actions button:enabled:hover { color: var(--accent); border-color: var(--accent); }
.error { background: #2a0707; color: var(--red); border: 1px solid #c63d3d; padding: 10px; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.panel > .error { margin: 16px; }
.mission-feedback { background: #15161c; color: var(--text); border: 1px solid #4c4f59; border-radius: 4px; padding: 12px; margin: 20px 0 0; font-size: 13px; }
.mission-feedback.success { border-color: #0eb985; background: #031d16; color: var(--good); }
.mission-feedback a { color: inherit; text-decoration: underline; }
.mission-feedback .text-button { color: inherit; text-decoration: underline; margin-left: 12px; }
.mission-feedback + .primary-button { margin-top: 12px; }
.missions-page > .mission-feedback { margin: 0 0 20px; }
.missions-toolbar { display: flex; gap: 12px; margin: 0 0 20px; }
.view-button.selected { border-color: #d8d9df; background: #050505; }
.mission-list { padding: 8px 20px; }
.empty-state { padding: 32px 10px; text-align: center; color: var(--subtle); font-size: 12px; }
.empty-symbol { font-size: 30px; color: var(--muted); margin-bottom: 12px; }
.empty-state h3 { font-size: 14px; font-weight: 700; color: var(--text); }
.empty-state a { text-decoration: underline; }
.job-card { border-bottom: 1px solid var(--border); padding: 18px 0; overflow-wrap: anywhere; }
.job-card:last-child { border: 0; }
.job-title { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.job-title h3 { font-size: 16px; font-weight: 800; margin: 0; }
.job-status { font-family: var(--font-mono); font-size: 10px; border: 1px solid #4c4f59; border-radius: 3px; background: #15161c; padding: 2px 7px; color: #d8d9df; flex-shrink: 0; }
.job-status.completed { color: var(--good); background: #031d16; border-color: #0eb985; }
.job-status.running, .job-status.queued { color: #ffc247; background: #241804; border-color: var(--accent); }
.job-status.failed { color: var(--red); background: #2a0707; border-color: #c63d3d; }
.job-meta { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin: 7px 0; }
.job-detail { font-size: 12px; color: var(--subtle); margin: 10px 0; }
.job-actions { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; margin-top: 14px; }
.job-actions .delete-button { color: var(--subtle); }
.workflow-note { padding: 30px 12px 10px; }
.workflow-note h3 { font-size: 20px; font-weight: 800; letter-spacing: -.015em; }
.workflow-note > div { display: flex; gap: 14px; border-top: 1px solid var(--border); padding: 14px 0; }
.workflow-note > div > span { color: var(--muted); font-family: var(--font-mono); font-size: 11px; padding-top: 3px; }
.workflow-note p { font-size: 12px; color: var(--subtle); margin-bottom: 0; }
.workflow-note strong { font-weight: 700; color: var(--text); }
.session-note { font-size: 11px; color: var(--subtle); margin: 14px 12px; line-height: 1.7; }
footer { border-top: 1px solid var(--border); margin-top: 40px; padding: 20px 0 0; color: var(--muted); font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; display: flex; justify-content: space-between; gap: 20px; }
.text-button { border: 0; background: none; color: var(--subtle); font-family: var(--font-mono); font-size: 12px; padding: 2px; }
.login-body { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-panel { max-width: 470px; margin: 0; padding: 36px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.login-panel .brand { margin-bottom: 36px; }
.login-panel h1 { font-size: 30px; }
.login-panel form { margin-top: 28px; }
.login-panel .session-note { margin: 24px 0 0; }
@media (min-width:1600px) { main { padding: 46px 54px; } }
@media (max-width:1100px) {
  .sidebar { width: 180px; padding: 24px 14px; } .main { margin-left: 180px; } .brand { font-size: 20px; }
  .topbar { padding: 16px 24px; } main { padding: 28px 24px; } .reference-tag { display: none; }
  .workspace-grid { grid-template-columns: minmax(0,1fr) minmax(0,.85fr); gap: 16px; }
  .panel-title, .form-content { padding: 18px; } .field-grid { gap: 12px; }
}
@media (max-width:820px) {
  .sidebar { position: static; width: auto; padding: 14px 20px; border-right: 0; border-bottom: 1px solid var(--border); flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
  .sidebar > .eyebrow, .sidebar-bottom { display: none; } .sidebar .brand { width: 100%; } .nav-item { margin-bottom: 0; }
  .main { margin-left: 0; } .topbar { position: static; } .workspace-grid { grid-template-columns: 1fr; }
  .page-heading h1 { font-size: 30px; } .results-column { display: flex; flex-direction: column; } .workflow-note { display: none; }
  .notice { font-size: 11px; } footer { flex-direction: column; gap: 6px; }
}
@media (max-width:430px) {
  main { padding: 24px 16px; } .topbar { padding: 14px 16px; font-size: 10px; } .topbar .separator { margin: 0 8px; }
  .field-grid { grid-template-columns: 1fr; } .section-line { align-items: start; } .section-line > span { max-width: 120px; text-align: right; }
  .panel-title, .form-content { padding: 16px; } .page-heading { margin-bottom: 20px; flex-wrap: wrap; } h1 { font-size: 28px; } .login-panel { padding: 26px; }
}

.mission-identity { margin-top: 18px; }
