:root { --ink:#1e1b4b; --accent:#4338ca; --sky:#0284c7; --muted:#64748b; --line:#e2e8f0; --bg:#f8fafc; --ok:#15803d; --bad:#b91c1c; --warn:#b45309; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--ink); background:var(--bg); }
header { display:flex; align-items:center; gap:16px; padding:10px 24px; background:#fff; border-bottom:1px solid var(--line); }
header img { height:40px; }
header .spacer { flex:1; }
nav { display:flex; gap:4px; padding:0 24px; background:#fff; border-bottom:1px solid var(--line); }
nav button { border:0; background:none; padding:12px 16px; font:inherit; cursor:pointer; color:var(--muted); border-bottom:3px solid transparent; }
nav button.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
main { max-width:1100px; margin:0 auto; padding:24px; }
h2 { margin:0 0 8px; } h3 { margin:24px 0 8px; }
.card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:16px; margin:12px 0; }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:end; }
label { display:flex; flex-direction:column; gap:4px; font-weight:600; font-size:13px; min-width:220px; }
label.check { flex-direction:row; align-items:center; font-weight:400; min-width:0; }
input, select { font:inherit; padding:8px 10px; border:1px solid #cbd5e1; border-radius:6px; background:#fff; }
button.btn { font:inherit; padding:8px 16px; border-radius:6px; border:1px solid var(--accent); background:#fff; color:var(--accent); cursor:pointer; }
button.btn.primary { background:var(--accent); color:#fff; }
button.btn.danger { border-color:var(--bad); color:var(--bad); }
button.btn:disabled { opacity:.5; cursor:default; }
table { width:100%; border-collapse:collapse; font-size:13px; background:#fff; }
th, td { text-align:left; padding:6px 10px; border-bottom:1px solid var(--line); vertical-align:top; word-break:break-word; }
th { background:#f1f5f9; font-weight:600; }
tr.clickable { cursor:pointer; } tr.clickable:hover, tr.selected { background:#eef2ff; }
.badge { display:inline-block; white-space:nowrap; word-break:normal; padding:1px 8px; border-radius:99px; font-size:12px; font-weight:600; background:#e2e8f0; }
.badge.SUCCESS { background:#dcfce7; color:var(--ok); } .badge.FAILED { background:#fee2e2; color:var(--bad); }
.badge.PARTIAL, .badge.PENDING_APPROVAL, .badge.DRAFT { background:#fef3c7; color:var(--warn); }
.badge.APPROVED { background:#dcfce7; color:var(--ok); } .badge.QUEUED, .badge.RUNNING { background:#dbeafe; color:var(--sky); }
.alert { padding:10px 14px; border-radius:8px; margin:8px 0; border:1px solid; }
.alert.error { background:#fef2f2; border-color:#fecaca; color:var(--bad); }
.alert.warn { background:#fffbeb; border-color:#fde68a; color:var(--warn); }
.alert.ok { background:#f0fdf4; border-color:#bbf7d0; color:var(--ok); }
.muted { color:var(--muted); } .center { text-align:center; margin-top:15vh; }
pre { background:#0f172a; color:#e2e8f0; padding:12px; border-radius:8px; overflow:auto; font-size:12px; max-height:420px; }
.shots { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.shots figure { margin:0; } .shots img { width:100%; border:1px solid var(--line); border-radius:6px; }
.shots figcaption { font-size:12px; color:var(--muted); }
.login { max-width:380px; margin:18vh auto; text-align:center; }
.login img { width:260px; }

img.arch { width:100%; height:auto; border:1px solid var(--line); border-radius:8px; background:#fff; }
td b { font-weight:600; }
.flow td:nth-child(1), .flow td:nth-child(3), .flow th:nth-child(1), .flow th:nth-child(3) { white-space:nowrap; word-break:normal; }

.preview { margin:10px 0; padding:10px 14px; border-radius:8px; background:#f1f5f9; min-height:44px; }
.preview.ok { background:#eef2ff; border:1px solid #c7d2fe; }
.code { font-family:ui-monospace,Menlo,monospace; font-size:12px; }
.days { display:flex; gap:12px; flex-wrap:wrap; margin:8px 0; }
[hidden] { display:none !important; }