:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #090b0f;
  color: #f4f1e8;
  --canvas: #090b0f;
  --surface: #12151a;
  --surface-soft: #181c22;
  --border: #2b313a;
  --text-muted: #9da5af;
  --accent: #d7ff45;
  --accent-ink: #121600;
  --good: #62e6a7;
  --warn: #ffc857;
  --bad: #ff6b76;
  --blue: #72a7ff;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    radial-gradient(circle at 82% -10%, #25320e 0, transparent 34rem),
    var(--canvas);
  background-size: 36px 36px, 36px 36px, auto, auto;
}

button, input, select { font: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.app-shell { width: min(1440px, calc(100% - 2rem)); margin: 0 auto; padding: 1.5rem 0 3rem; }
.topbar, .topbar-actions, .workspace-heading, .panel-heading, .window-header, .runner-heading, .brand-lockup { display: flex; align-items: center; gap: 1rem; }
.topbar, .workspace-heading, .window-header { justify-content: space-between; }
.topbar { border-bottom: 1px solid var(--border); padding-bottom: 1.25rem; margin-bottom: 1.5rem; }
.topbar-actions { flex-wrap: wrap; justify-content: flex-end; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.5rem, 3vw, 2.2rem); }
h2 { margin-bottom: .25rem; font-size: 1.25rem; }
h3 { margin: 0; font-size: 1rem; }
.eyebrow, .ticket-id { color: var(--accent); font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-bottom: .35rem; }
.brand-mark { display: grid; place-items: center; width: 2.7rem; aspect-ratio: 1; border-radius: .65rem; background: var(--accent); color: var(--accent-ink); font-weight: 900; letter-spacing: -.08em; box-shadow: 0 0 0 5px rgba(215,255,69,.08); }
.muted, .help-text, .detail-meta, .detail-time, .runner-meta { color: var(--text-muted); font-size: .86rem; }
.connection-status { color: var(--text-muted); margin: 0; font-size: .9rem; }
.connection-status::before { content: "●"; margin-right: .4rem; }
.connection-status.online { color: var(--good); }
.connection-status.offline { color: var(--bad); }
.connection-status.checking { color: var(--warn); }

.button, .tab {
  border: 1px solid transparent;
  border-radius: .55rem;
  cursor: pointer;
  padding: .65rem .9rem;
  font-weight: 700;
}
.button { background: var(--accent); color: var(--accent-ink); }
.button.secondary { background: transparent; border-color: var(--border); color: var(--text-muted); }
.button:hover:not(:disabled) { filter: brightness(1.1); }
.button:disabled, .disabled-control { cursor: not-allowed; opacity: .62; }

.notice, .auth-card, .agent-window, .runner-panel {
  border: 1px solid var(--border);
  border-radius: .85rem;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}
.agent-window { box-shadow: 0 22px 70px rgba(0,0,0,.3); }
.agent-window.active { border-color: color-mix(in srgb, var(--blue) 55%, var(--border)); }
.agent-window.attention { border-color: color-mix(in srgb, var(--warn) 70%, var(--border)); box-shadow: 0 22px 70px rgba(255,200,87,.08); }
.agent-window.success { border-color: color-mix(in srgb, var(--good) 45%, var(--border)); }
.notice { padding: 1rem 1.15rem; margin: 0 0 1.5rem; }
.notice h2 { font-size: 1rem; }
.notice p { margin-bottom: 0; }
.warning { border-color: color-mix(in srgb, var(--warn) 50%, var(--border)); }

.auth-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 28rem); gap: 2rem; align-items: start; max-width: 68rem; margin: 8vh auto; }
.auth-copy { padding: 1rem 0; }
.auth-copy p { color: var(--text-muted); max-width: 42rem; }
.auth-card { padding: 1.15rem; }
.auth-tabs { display: flex; border-bottom: 1px solid var(--border); margin: 0 0 1rem; }
.tab { color: var(--text-muted); background: transparent; border-radius: .45rem .45rem 0 0; }
.tab.is-active { border-color: var(--border); border-bottom-color: var(--surface); color: var(--text); margin-bottom: -1px; }
.auth-form { display: grid; gap: .9rem; }
label { display: grid; gap: .35rem; color: var(--text-muted); font-size: .9rem; }
input, select { width: 100%; border: 1px solid var(--border); border-radius: .45rem; background: #0e1528; color: var(--text); padding: .6rem .7rem; }
.form-message { min-height: 1.35rem; color: var(--warn); margin: .8rem 0 0; font-size: .9rem; }

.workspace-heading { margin: 0 0 1rem; }
.hero-heading { align-items: end; padding: 1.5rem 0 .5rem; }
.hero-heading h2 { max-width: 18ch; font-size: clamp(1.7rem, 4vw, 3.25rem); line-height: 1.02; letter-spacing: -.045em; }
.hero-copy { max-width: 48rem; margin: .9rem 0 0; color: var(--text-muted); font-size: 1rem; }
.metric-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 1.25rem 0; border: 1px solid var(--border); border-radius: .9rem; background: rgba(18,21,26,.88); overflow: hidden; }
.metric-strip article { display: grid; gap: .15rem; padding: 1rem 1.15rem; border-right: 1px solid var(--border); }
.metric-strip article:last-child { border-right: 0; }
.metric-strip strong { font-size: 1.65rem; line-height: 1; color: var(--accent); }
.metric-strip span { color: var(--text-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.workspace-heading .muted { margin: 0; text-align: right; }
.task-create-panel { border: 1px solid var(--border); border-radius: .85rem; background: color-mix(in srgb, var(--surface) 94%, transparent); margin: 0 0 1.25rem; padding: 1rem 1.1rem; }
.task-create-panel h3 { margin-bottom: .8rem; }
.task-create-form { display: grid; grid-template-columns: minmax(12rem, 2fr) minmax(10rem, 1fr) minmax(10rem, 1fr) minmax(8rem, .75fr) auto; gap: .75rem; align-items: end; }
.task-create-form .button { min-height: 2.55rem; white-space: nowrap; }
.workspace-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 23rem); gap: 1.25rem; align-items: start; }
.window-list { display: grid; gap: 1rem; }
.agent-window { overflow: hidden; }
.window-header { padding: 1rem 1.1rem; background: var(--surface-soft); }
.window-title h2 { margin: 0; }
.ticket-id { margin: 0 0 .2rem; }
.status-badge { display: inline-block; border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); font-size: .72rem; font-weight: 800; letter-spacing: .04em; padding: .28rem .58rem; text-transform: uppercase; white-space: nowrap; }
.status-badge.active { border-color: var(--blue); color: #b9d1ff; background: rgba(114,167,255,.09); }
.status-badge.attention { border-color: var(--warn); color: var(--warn); background: rgba(255,200,87,.09); }
.status-badge.success { border-color: var(--good); color: var(--good); background: rgba(98,230,167,.09); }
.status-badge.danger { border-color: var(--bad); color: var(--bad); background: rgba(255,107,118,.09); }
.command-deck { display: grid; grid-template-columns: minmax(15rem, .8fr) minmax(0, 1.4fr); border-top: 1px solid var(--border); }
.command-deck .agent-panel { border-top: 0; }
.command-deck .agent-panel:first-child { border-right: 1px solid var(--border); }
.agent-panel { padding: 1rem 1.1rem; border-top: 1px solid var(--border); }
.agent-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.agent-detail-grid .agent-panel { min-height: 12rem; }
.agent-detail-grid .agent-panel:nth-child(odd) { border-right: 1px solid var(--border); }
.panel-title { margin-bottom: .8rem; }
.metadata-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .45rem .8rem; margin: 0; }
.metadata-label { color: var(--text-muted); }
.metadata-value { margin: 0; overflow-wrap: anywhere; }
.runner-readiness { border-left: 3px solid var(--border); margin: 1rem 0 0; padding-left: .65rem; font-size: .9rem; }
.runner-readiness.ready { border-color: var(--good); }
.runner-readiness.not-ready { border-color: var(--warn); }
.detail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.detail-item { border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent); padding-bottom: .65rem; }
.detail-item:last-child { border-bottom: 0; padding-bottom: 0; }
.detail-main, .detail-meta, .detail-time { margin: 0; overflow-wrap: anywhere; }
.detail-time { display: block; margin-top: .25rem; }
.artifact-path { display: block; max-width: 100%; margin-top: .4rem; overflow-wrap: anywhere; color: #cbd7f7; }
.stack, .unavailable-controls { display: grid; gap: .75rem; }
.launch-zone { display: grid; gap: .7rem; }
.launch-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, .7fr) auto; gap: .75rem; align-items: end; }
.launch-form .mission-brief { grid-row: span 2; }
textarea { width: 100%; resize: vertical; min-height: 7.2rem; border: 1px solid var(--border); border-radius: .55rem; background: #0d1014; color: var(--text); padding: .7rem .75rem; font: inherit; }
textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.launch-button { min-height: 2.55rem; white-space: nowrap; }
.launch-state { margin: 0; padding: .75rem; border-left: 3px solid var(--blue); background: rgba(114,167,255,.07); }
.evidence-card, .approval-card { border: 1px solid var(--border); border-radius: .65rem; background: #0e1116; padding: .8rem; }
.evidence-heading, .approval-heading, .approval-actions { display: flex; align-items: center; justify-content: space-between; gap: .65rem; }
.evidence-grid { margin-top: .8rem; }
.test-evidence { margin: .75rem 0 0; color: var(--good); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .8rem; }
.result-preview { max-height: 10rem; overflow: auto; margin: .75rem 0 0; padding-top: .75rem; border-top: 1px solid var(--border); white-space: pre-wrap; color: #d7dde5; font-size: .86rem; }
.approval-card { list-style: none; }
.approval-card.attention { border-color: var(--warn); background: linear-gradient(135deg, rgba(255,200,87,.1), #0e1116 55%); }
.approval-command { display: block; margin: .65rem 0; padding: .65rem; border-radius: .45rem; background: #080a0d; color: #dfe8c1; overflow-wrap: anywhere; }
.approval-actions { justify-content: flex-start; margin-top: .75rem; }
.danger-button { border-color: color-mix(in srgb, var(--bad) 55%, var(--border)); color: var(--bad); }
.handoff-form { display: grid; gap: .75rem; border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent); padding-top: .75rem; }
.handoff-form .button { justify-self: start; }
.action-message { margin: 0; }
.disabled-control { align-self: start; background: transparent; border-color: var(--border); color: var(--text-muted); }
.muted-panel { background: color-mix(in srgb, var(--surface) 65%, #000); }
.unavailable-row { border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent); padding-bottom: .7rem; }
.unavailable-row:last-child { border-bottom: 0; padding-bottom: 0; }
.unavailable-row .help-text { margin: .45rem 0 0; }
.empty-state { color: var(--text-muted); margin: 0; padding: .25rem 0; }

.runner-panel { padding: 1rem; position: sticky; top: 1rem; }
.runner-list { display: grid; gap: .75rem; }
.runner { border-left: 3px solid var(--warn); border-bottom: 1px solid var(--border); padding: .15rem 0 .75rem .75rem; }
.runner:last-child { border-bottom: 0; }
.runner.ready { border-left-color: var(--good); }
.runner-meta { margin: .35rem 0 0; overflow-wrap: anywhere; }
.runner-panel .help-text { border-top: 1px solid var(--border); margin: 1rem 0 0; padding-top: .8rem; }
code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

@media (max-width: 920px) {
  .workspace-layout, .auth-panel { grid-template-columns: 1fr; }
  .auth-panel { margin-top: 2rem; }
  .runner-panel { position: static; }
  .task-create-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .launch-form { grid-template-columns: 1fr; }
  .launch-form .mission-brief { grid-row: auto; }
}

@media (max-width: 620px) {
  .app-shell { width: min(100% - 1rem, 1440px); padding-top: 1rem; }
  .topbar, .workspace-heading { align-items: flex-start; flex-direction: column; }
  .topbar-actions { justify-content: flex-start; }
  .workspace-heading .muted { text-align: left; }
  .agent-detail-grid { grid-template-columns: 1fr; }
  .agent-detail-grid .agent-panel:nth-child(odd) { border-right: 0; }
  .window-header { align-items: flex-start; flex-direction: column; }
  .task-create-form { grid-template-columns: 1fr; }
  .metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-strip article:nth-child(2) { border-right: 0; }
  .metric-strip article:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .command-deck { grid-template-columns: 1fr; }
  .command-deck .agent-panel:first-child { border-right: 0; border-bottom: 1px solid var(--border); }
}