:root { --ink:#172033; --muted:#697386; --paper:#f6f7fb; --panel:#fff; --line:#dfe3ec; --accent:#5b4bdb; --danger:#b42318; --success:#027a48; font-family:Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; }
a { color:#4438a8; text-underline-offset:3px; }
button, input, select, textarea { font:inherit; }
button, .button { cursor:pointer; }
:focus-visible { outline:3px solid #f6b800; outline-offset:3px; }
.skip-link { position:absolute; left:1rem; top:-5rem; padding:.65rem 1rem; background:#fff; z-index:3; }
.skip-link:focus { top:1rem; }
.site-header { min-height:4.4rem; padding:.8rem max(1rem, calc((100vw - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; background:#fff; border-bottom:1px solid var(--line); }
.brand { color:var(--ink); font-weight:800; text-decoration:none; font-size:1.05rem; letter-spacing:-.02em; }.brand span { color:var(--accent); }
.logout-form { margin:0; }.navigation { display:flex; gap:.25rem; overflow-x:auto; white-space:nowrap; padding:.65rem max(1rem, calc((100vw - 1180px)/2)); background:#fff; border-bottom:1px solid var(--line); }.navigation a { padding:.5rem .7rem; border-radius:.45rem; color:var(--muted); text-decoration:none; }.navigation a[aria-current="page"], .navigation a:hover { color:var(--ink); background:#eeedff; }
.page-shell { max-width:1180px; margin:0 auto; padding:2.2rem 1rem 4rem; }.page-heading { display:flex; gap:1rem; align-items:flex-end; justify-content:space-between; margin-bottom:1.6rem; }.page-heading h1, .auth-card h1 { margin:.15rem 0 .5rem; letter-spacing:-.04em; font-size:clamp(1.8rem,4vw,2.55rem); }.page-heading p, .auth-card p { color:var(--muted); margin:.2rem 0; }.eyebrow { color:var(--accent)!important; font-size:.77rem; letter-spacing:.08em; font-weight:800; text-transform:uppercase; }.heading-actions, .form-actions { display:flex; gap:.6rem; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:2.5rem; border:1px solid transparent; padding:.55rem .85rem; border-radius:.5rem; background:var(--accent); color:#fff; font-weight:700; text-decoration:none; }.button:hover { background:#4637ba; }.button-secondary { background:#fff; color:#3e347f; border-color:#bdb8ed; }.button-secondary:hover { background:#eeedff; }.button-quiet { background:transparent; border-color:var(--line); color:var(--ink); }.button-quiet:hover { background:#f2f4f7; }.button-danger { background:var(--danger); }.button-danger:hover { background:#912018; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-bottom:1.4rem; }.metrics article, .panel { background:var(--panel); border:1px solid var(--line); border-radius:.75rem; box-shadow:0 1px 2px rgb(16 24 40 / 3%); }.metrics article { padding:1rem; }.metrics span { color:var(--muted); display:block; font-size:.86rem; }.metrics strong { display:block; margin-top:.35rem; font-size:1.55rem; letter-spacing:-.04em; }.panel { padding:1.1rem; }.panel h2 { margin:0 0 1rem; font-size:1rem; }.panel-title { display:flex; justify-content:space-between; gap:1rem; align-items:center; margin-bottom:.4rem; }.panel-title h2 { margin:0; }
.table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; min-width:560px; } th { text-align:left; color:var(--muted); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; } th, td { padding:.75rem .55rem; border-bottom:1px solid var(--line); vertical-align:top; } td small { display:block; color:var(--muted); margin-top:.16rem; }.state { display:inline-flex; border-radius:999px; padding:.2rem .55rem; background:#eef2f6; font-size:.8rem; font-weight:700; white-space:nowrap; }.state-result_ready,.state-delivered,.state-succeeded { color:var(--success); background:#ecfdf3; }.state-failed_permanent,.state-blocked_quota,.state-outcome_unknown { color:var(--danger); background:#fef3f2; }.state-running,.state-leased,.state-queued,.state-retry_scheduled { color:#175cd3; background:#eff8ff; }.state-cancelled { color:#475467; background:#f2f4f7; }.empty { color:var(--muted); padding:.7rem 0; }.alert { border-left:4px solid var(--danger); background:#fef3f2; padding:.75rem; color:#7a271a!important; border-radius:.25rem; }.pagination { text-align:center; margin:1.4rem 0; }
.auth-card { width:min(100%,440px); margin:8vh auto; background:#fff; border:1px solid var(--line); padding:1.6rem; border-radius:.8rem; box-shadow:0 8px 26px rgb(16 24 40 / 8%); }.stack-form,.job-form { display:grid; gap:.72rem; margin-top:1.2rem; }.stack-form input { width:100%; }.job-form { max-width:760px; }.job-form fieldset { border:1px solid var(--line); border-radius:.7rem; padding:1rem; display:grid; gap:.55rem; }.job-form legend { padding:0 .35rem; font-weight:750; }.job-form label, .filters label { display:grid; gap:.35rem; font-weight:650; }.job-form label span,.hint { color:var(--muted); font-size:.83rem; font-weight:400; }.job-form input:not([type=checkbox]),.job-form select,.job-form textarea,.stack-form input,.filters select { width:100%; border:1px solid #b9c0cd; border-radius:.45rem; padding:.62rem; color:var(--ink); background:#fff; }.job-form textarea { resize:vertical; }.checkbox { display:flex!important; align-items:center; gap:.55rem; }.checkbox input { width:1.15rem; height:1.15rem; }.filters { display:flex; gap:.75rem; align-items:end; flex-wrap:wrap; margin-bottom:1rem; }.filters label { min-width:160px; }.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1rem 0; }.result-image { display:block; width:100%; max-height:520px; object-fit:contain; background:#f2f4f7; border-radius:.45rem; margin:.7rem 0; } dl { display:grid; grid-template-columns:minmax(110px,.45fr) 1fr; gap:.5rem 1rem; margin:0; } dt { color:var(--muted); } dd { margin:0; overflow-wrap:anywhere; }.timeline { margin:0; padding-left:1.25rem; }.timeline li { padding:.3rem 0 .8rem .2rem; }.timeline span,.timeline small { display:block; color:var(--muted); font-size:.88rem; }.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; }.cancel-form { margin-bottom:1rem; }
@media (max-width:700px) { .site-header { min-height:3.8rem; }.page-shell { padding-top:1.4rem; }.page-heading { align-items:flex-start; flex-direction:column; }.metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }.detail-grid { grid-template-columns:1fr; }.navigation { padding-left:.7rem; padding-right:.7rem; }.filters { display:grid; grid-template-columns:1fr; }.filters label { min-width:0; } }