:root { --bg:#f6f7f9; --card:#fff; --fg:#1d2330; --muted:#6b7280; --line:#e3e6eb; --green:#16a34a; --yellow:#d97706; --red:#dc2626; --blue:#2563eb; }
@media (prefers-color-scheme: dark) { :root { --bg:#111418; --card:#1a1f26; --fg:#e6e9ee; --muted:#9aa3af; --line:#2a313b; } }
* { box-sizing: border-box; }
body { margin:0; font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; background:var(--bg); color:var(--fg); }
header { display:flex; flex-wrap:wrap; gap:16px; align-items:center; padding:10px 16px; background:var(--card); border-bottom:1px solid var(--line); }
header nav { display:flex; gap:4px; flex-wrap:wrap; flex:1; }
header nav a { padding:6px 10px; border-radius:6px; color:var(--fg); text-decoration:none; }
header nav a.on, header nav a:hover { background:var(--bg); }
.logout { display:flex; gap:8px; align-items:center; }
main { padding:16px; max-width:1400px; margin:0 auto; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-bottom:16px; overflow-x:auto; }
.card h2 { font-size:15px; margin:0 0 10px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:16px; }
.charts { display:grid; grid-template-columns:repeat(auto-fit, minmax(420px, 1fr)); gap:16px; }
.lights { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px; margin-bottom:16px; }
.light { display:flex; gap:10px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px; }
.light small { display:block; color:var(--muted); word-break:break-word; }
.dot { width:14px; height:14px; border-radius:50%; flex:none; margin-top:3px; }
.green .dot { background:var(--green); } .yellow .dot { background:var(--yellow); } .red .dot { background:var(--red); }
.big { font-size:28px; font-weight:700; margin:4px 0; }
.state-HEALTHY { color:var(--green); } .state-LAGGING, .state-DISCONNECTED, .state-REBUILDING { color:var(--yellow); }
.state-BROKEN, .state-FAILED_OVER, .state-FAILBACK_IN_PROGRESS { color:var(--red); }
table { border-collapse:collapse; width:100%; }
th, td { text-align:left; padding:5px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
table.kv th { width:40%; color:var(--muted); font-weight:500; }
.muted { color:var(--muted); }
.banner { padding:10px 14px; border-radius:8px; margin-bottom:12px; font-weight:500; }
.banner.red { background:#fde8e8; color:#991b1b; } .banner.yellow { background:#fef3c7; color:#92400e; } .banner.green { background:#dcfce7; color:#166534; }
.act { display:flex; gap:8px; flex-wrap:wrap; margin:8px 0; }
input, select, button { font:inherit; padding:6px 10px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--fg); }
button { cursor:pointer; background:var(--blue); color:#fff; border-color:var(--blue); }
.act.danger button { background:var(--red); border-color:var(--red); }
.tabs { display:flex; gap:6px; margin-bottom:12px; } .tabs button { background:var(--card); color:var(--fg); } .tabs button.on { background:var(--blue); color:#fff; }
pre { white-space:pre-wrap; word-break:break-all; background:var(--bg); padding:8px; border-radius:6px; font-size:12px; }
.res-ok, .st-restored { color:var(--green); } .res-error, .res-failed, .st-failed, .res-rejected { color:var(--red); }
.filters { display:flex; gap:12px; flex-wrap:wrap; align-items:end; }
.filters label { display:flex; flex-direction:column; gap:4px; }
body.login { display:grid; place-items:center; min-height:100vh; }
body.login .card { width:min(360px, calc(100vw - 32px)); display:flex; flex-direction:column; gap:12px; }
body.login label { display:flex; flex-direction:column; gap:4px; }
.err { color:var(--red); }
ol.steps li { margin-bottom:10px; }
.hero { display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:center; }
.hero-side { display:grid; gap:10px; min-width:260px; }
.huge { font-size:44px; font-weight:800; line-height:1.1; margin:4px 0; }
.state-FRESH { color:var(--green); } .state-STALE, .state-RESTORING { color:var(--yellow); }
.state-OUTDATED, .state-NO_DATA { color:var(--red); }
ol.pipeline { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px; list-style:none; padding:0; margin:0 0 8px; counter-reset:st; }
.stage { border:1px solid var(--line); border-left:6px solid var(--line); border-radius:8px; padding:8px 10px; display:flex; flex-direction:column; gap:2px; }
.stage.done { border-left-color:var(--green); } .stage.running { border-left-color:var(--blue); }
.stage.failed { border-left-color:var(--red); } .stage.waiting { opacity:.6; }
.st-live, .st-received { color:var(--green); font-weight:600; } .st-uploading, .st-dumping, .st-restoring { color:var(--blue); font-weight:600; }
.st-failed, .st-dump_failed { color:var(--red); font-weight:600; } .st-replaced, .st-superseded { color:var(--muted); }
a.tab { padding:6px 12px; border:1px solid var(--line); border-radius:6px; text-decoration:none; color:var(--fg); background:var(--card); }
a.tab.on { background:var(--blue); color:#fff; border-color:var(--blue); }
a.small { font-size:12px; font-weight:400; margin-left:8px; }
ul.alerts { padding-left:18px; margin:0; } ul.alerts li { margin-bottom:6px; }