:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #090b12; color: #eef2ff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 10% 0%, #1c2040, #090b12 48%); }
.shell { width: min(1180px, 100%); margin: 0 auto; padding: 2rem 1rem 4rem; }
.masthead, .toolbar, .section-heading, .actions, .projection-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.masthead { margin-bottom: 1.5rem; }
.eyebrow { color: #8be9fd; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, h3 { margin: .25rem 0 .6rem; }
.lede, .hint { color: #aab2c8; }
.panel { margin: 1rem 0; padding: 1.25rem; border: 1px solid #30384e; border-radius: 14px; background: rgba(19, 24, 38, .9); box-shadow: 0 12px 40px rgba(0, 0, 0, .2); }
label { display: grid; gap: .35rem; margin: .8rem 0; color: #dce3f7; }
input { width: 100%; border: 1px solid #4a5572; border-radius: 8px; padding: .75rem; color: inherit; background: #0f1422; font: inherit; }
button { border: 0; border-radius: 8px; padding: .7rem 1rem; color: #fff; font: inherit; cursor: pointer; }
.primary { background: #5b6cff; }
.secondary { background: #293249; }
.badge { border: 1px solid #53617f; border-radius: 999px; padding: .35rem .7rem; font-size: .8rem; white-space: nowrap; }
.run-list { display: grid; gap: .75rem; }
.run-card { padding: 1rem; border: 1px solid #343e59; border-radius: 10px; background: #111827; }
.run-card h3 { overflow-wrap: anywhere; }
.run-objective { color: #dbe4ff; overflow-wrap: anywhere; }
.status { display: inline-block; width: fit-content; margin: .1rem 0 .5rem; padding: .25rem .55rem; border: 1px solid #687494; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
.status-final_review_required, .status-human_required { border-color: #f4bd6a; color: #ffdca3; }
.status-complete { border-color: #7ce3a1; color: #b7f5c9; }
.status-review_required { border-color: #a9b8ff; color: #d4dcff; }
.summary-grid { margin: 1rem 0; }
.summary-list, .compact-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin: 0; }
.field { min-width: 0; padding: .7rem; border: 1px solid #303b56; border-radius: 9px; background: rgba(10, 14, 24, .65); }
.field dt { color: #91a0c3; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; }
.field dd { margin: .25rem 0 0; color: #edf2ff; overflow-wrap: anywhere; }
.danger-value dd { color: #ffb2b2; }
.hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.hub-section { min-width: 0; padding: 1rem; border: 1px solid #30384e; border-radius: 12px; background: rgba(12, 17, 29, .72); }
.hub-section-wide { grid-column: 1 / -1; }
.history-feed, .timeline-feed, .round-list, .artifact-list { display: grid; gap: .7rem; }
.history-event, .timeline-event, .round-card, .artifact-card { min-width: 0; padding: .8rem; border: 1px solid #35415e; border-radius: 9px; background: #101727; }
.history-event-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.event-meta, .muted { color: #8d9ab7; font-size: .8rem; }
.inline-list { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: .5rem 0 0; list-style: none; }
.artifact-ref { padding: .25rem .45rem; border: 1px solid #4c5d80; border-radius: 999px; color: #cbd8ff; font-size: .78rem; overflow-wrap: anywhere; }
.projection-panel { margin-top: 1rem; padding: 1rem; border: 1px solid #30384e; border-radius: 10px; background: #0d1422; }
.safe-pre, .diff-output, .output { max-height: 18rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: #cbd5e1; }
.diff-output { margin: .75rem 0 0; padding: .8rem; border: 1px solid #293650; border-radius: 8px; background: #080d17; }
.command { display: block; margin: .45rem 0; color: #9fe7ff; overflow-wrap: anywhere; }
.screenshot-preview { display: block; width: min(100%, 360px); max-height: 240px; margin: .7rem 0; object-fit: contain; border: 1px solid #4b5c7c; border-radius: 8px; background: #05070c; }
.artifact-download { color: #aebdff; font-size: .88rem; }
.notice { padding: .65rem .8rem; border-radius: 8px; }
.warning { color: #ffe0a3; background: rgba(145, 96, 18, .2); border: 1px solid #83652c; }
.error { color: #ff9c9c; }
.success { color: #9ff2bd; }
.projection-actions { justify-content: flex-start; flex-wrap: wrap; margin: 1rem 0; }
@media (max-width: 760px) { .hub-grid { grid-template-columns: 1fr; } .hub-section-wide { grid-column: auto; } .summary-list, .compact-list { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .masthead, .toolbar, .section-heading, .actions, .projection-actions { align-items: flex-start; flex-direction: column; } button { width: 100%; } .badge, .status { white-space: normal; overflow-wrap: anywhere; } }