:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #08111f; color: #eaf1fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top left, #17345d 0, transparent 36rem), #08111f; }
main { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0 80px; }
h1, h2, p { margin-top: 0; } h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); } h2 { font-size: 1.12rem; }
p { color: #9eb0c8; line-height: 1.5; }
.eyebrow { color: #63d9bb; font-size: .73rem; letter-spacing: .16em; font-weight: 800; margin-bottom: 8px; }
.card { background: rgba(12, 27, 48, .93); border: 1px solid #233c5e; border-radius: 16px; padding: 24px; box-shadow: 0 24px 80px #0006; margin-bottom: 20px; }
.login { width: min(480px, 100%); margin: 8vh auto 0; }
form { display: grid; gap: 16px; } label, legend { color: #c9d5e5; font-size: .86rem; font-weight: 650; }
input, select { width: 100%; margin-top: 7px; padding: 12px 13px; border-radius: 9px; border: 1px solid #385171; background: #071423; color: #fff; font: inherit; }
button { border: 0; border-radius: 9px; padding: 11px 16px; background: #59d8b6; color: #041610; font-weight: 800; cursor: pointer; }
button:hover { filter: brightness(1.08); } button:disabled { opacity: .5; cursor: wait; }
button.secondary { background: #28496d; color: #eaf1fb; } button.ghost { background: transparent; color: #b7c5d8; border: 1px solid #385171; }
button.danger { background: #ff6961; color: #260403; } button.warning { background: #ffca64; color: #291a00; }
header, .section-title, .header-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.header-actions { justify-content: flex-end; flex-wrap: wrap; }
.grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 20px; }.grid .card { margin: 0 0 20px; }
.table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; min-width: 620px; } th, td { text-align: left; border-bottom: 1px solid #223956; padding: 12px 10px; font-size: .84rem; vertical-align: top; } th { color: #8fa4bf; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.pill { display: inline-flex; padding: 5px 9px; border-radius: 99px; background: #1a3556; color: #a9c8ed; font-size: .76rem; font-weight: 750; }
.status-succeeded { color: #5ee0b9; }.status-failed { color: #ff7b73; }.status-running, .status-pending, .status-building, .status-queued, .status-waiting-readiness, .status-waiting-lock { color: #ffd06f; }.status-cancelled { color: #9aabc0; }
fieldset { border: 1px solid #2d4666; border-radius: 10px; padding: 12px; } .check { display: flex; align-items: center; gap: 8px; margin: 7px 0; } .check input { width: auto; margin: 0; }
.selection-summary { margin: 8px 0 10px; color: #8fa4bf; font-size: .78rem; }
.notice, .rollback { padding: 15px 18px; border-radius: 12px; margin-bottom: 16px; }.notice { background: #173b57; border: 1px solid #2f6387; }.notice.error { background: #4b2024; border-color: #824047; }
.rollback { background: #513b10; border: 1px solid #9b741f; display: flex; align-items: center; justify-content: space-between; gap: 16px; }.rollback p { margin: 3px 0 0; color: #f1d99e; }.rollback-actions { display: flex; gap: 8px; flex-shrink: 0; }
.error { color: #ff8d86; }.empty { color: #8296af; padding: 12px 0; }.job { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #223956; }
.job-error { margin: 6px 0 0; color: #ff8d86; font-size: .82rem; max-width: 900px; overflow-wrap: anywhere; }
.job-waiting { margin: 6px 0 0; color: #ffd06f; font-size: .82rem; }
dialog { width: min(560px, calc(100% - 32px)); border: 1px solid #385171; border-radius: 16px; padding: 0; color: #eaf1fb; background: #0c1b30; box-shadow: 0 30px 100px #000c; }
dialog::backdrop { background: #020711cc; backdrop-filter: blur(3px); }
.dialog-card { padding: 24px; gap: 14px; }
.dialog-card h2 { margin-bottom: 0; }
.dialog-card p { margin-bottom: 0; }
.dialog-readiness { border: 1px solid #2d4666; border-radius: 10px; padding: 13px; color: #c9d5e5; }
.dialog-readiness.caution { border-color: #9b741f; background: #513b1038; }
.dialog-readiness.blocked { border-color: #824047; background: #4b202438; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
code { font-family: ui-monospace, SFMono-Regular, monospace; font-size: .78rem; color: #b9d7fb; }
@media (max-width: 820px) { main { padding-top: 24px; }.grid { grid-template-columns: 1fr; } header, .section-title, .rollback { align-items: flex-start; flex-direction: column; }.rollback-actions { width: 100%; }.rollback-actions button { flex: 1; } }