:root { --bg:#f4f6f9; --card:#fff; --text:#1c2430; --muted:#6b7684; --ok:#1f9d55; --ko:#d64545; --warn:#e08a00; --active:#2563eb; --border:#e3e7ee; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--text); font-size:16px; line-height:1.45; }
main { max-width: 1100px; margin: 0 auto; padding: 16px; }
header.top { display:flex; justify-content:space-between; align-items:center; padding:10px 18px; background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:5; }
header .logo { font-size:1.3em; }
.inline { display:inline; margin-left:8px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:18px 20px; margin:14px 0; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.card h2 { margin:0 0 12px; font-size:1.1em; }
.muted { color:var(--muted); } .small { font-size:.9em; }
.hero { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.tile { border-radius:14px; padding:22px 24px; color:#fff; background:#888; min-height:120px; transition: background .3s; }
.tile.ok { background:var(--ok); } .tile.ko { background:var(--ko); } .tile.warn { background:var(--warn); } .tile.active { background:var(--active); }
.tile-title { opacity:.9; font-size:.95em; } .tile-value { font-size:1.7em; font-weight:700; margin:6px 0; } .tile-sub { opacity:.92; font-size:.95em; }
.big-text { font-size:1.15em; margin:0 0 10px; }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; align-items:center; }
.btn { border:1px solid var(--border); background:#fff; color:var(--text); border-radius:10px; padding:10px 16px; font-size:1em; cursor:pointer; }
.btn:hover { filter:brightness(.97); } .btn:disabled { opacity:.45; cursor:not-allowed; }
.btn.big { padding:16px 26px; font-size:1.15em; font-weight:600; }
.btn.small { padding:6px 12px; font-size:.9em; }
.btn.primary { background:var(--active); color:#fff; border-color:transparent; }
.btn.danger { background:var(--ko); color:#fff; border-color:transparent; }
.btn.warn { background:var(--warn); color:#fff; border-color:transparent; }
.alert { background:#fff6e5; border:1px solid #f3d9a4; border-radius:10px; padding:10px 14px; margin:10px 0; }
.alert.ok { background:#e9f8ef; border-color:#b5e3c6; } .alert.ko { background:#fdeaea; border-color:#f3b8b8; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.checks { list-style:none; padding:0; margin:0; }
.checks li { display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); }
.checks li:last-child { border-bottom:none; }
.checks .ic { width:1.6em; flex:none; }
.steps { padding-left:0; list-style:none; margin:8px 0; }
.steps li { padding:6px 0; display:flex; gap:10px; align-items:center; }
.steps .st { width:1.4em; text-align:center; font-weight:700; }
.steps li.ok { color:var(--ok); } .steps li.failed, .steps li.cancelled { color:var(--ko); } .steps li.running, .steps li.waiting { color:var(--active); font-weight:600; } .steps li.pending, .steps li.skipped { color:var(--muted); }
.badge { display:inline-block; padding:2px 10px; border-radius:20px; font-size:.75em; color:#fff; background:var(--muted); vertical-align:middle; }
.badge.running { background:var(--active); } .badge.ok { background:var(--ok); } .badge.failed { background:var(--ko); } .badge.cancelled { background:var(--warn); }
.wait { background:#eef4ff; border:1px solid #c9daf8; border-radius:10px; padding:12px 16px; margin:10px 0; }
.wait h3 { margin:0 0 6px; }
pre { background:#0f172a; color:#e2e8f0; padding:12px 14px; border-radius:10px; overflow-x:auto; font-size:.85em; white-space:pre-wrap; word-break:break-word; }
.journal { width:100%; border-collapse:collapse; font-size:.9em; }
.journal td { padding:4px 8px; border-bottom:1px solid var(--border); vertical-align:top; white-space:nowrap; }
.journal td:last-child { white-space:normal; }
.spinner { display:inline-block; width:.9em; height:.9em; border:2px solid #c9daf8; border-top-color:var(--active); border-radius:50%; animation:spin .8s linear infinite; vertical-align:middle; }
@keyframes spin { to { transform:rotate(360deg); } }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:10; padding:12px; }
.modal-box { background:#fff; border-radius:14px; padding:22px 24px; max-width:640px; width:100%; max-height:92vh; overflow:auto; }
.modal-box h2 { margin-top:0; }
.opt { display:block; margin:8px 0; }
.confirm { display:block; margin:16px 0 6px; }
.confirm input { font-size:1.2em; padding:6px 10px; width:6em; margin-left:6px; text-transform:uppercase; }
.error { color:var(--ko); }
body.login { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-card { max-width:380px; width:100%; }
.login-card label { display:block; margin:12px 0; }
.login-card input { display:block; width:100%; padding:10px; font-size:1.05em; margin-top:4px; border:1px solid var(--border); border-radius:8px; }
@media (max-width: 760px) { .hero, .grid { grid-template-columns:1fr; } .tile-value { font-size:1.35em; } header.top { font-size:.9em; } }