:root { --bg:#f3f5f8; --card:#fff; --line:#e3e7ee; --text:#1c2430; --muted:#6b7684; --accent:#2457d6; --red:#d93025; --warn:#b26a00; --ok:#1e8e3e; }
* { box-sizing:border-box; }
body { margin:0; font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; background:var(--bg); color:var(--text); }
.hidden { display:none !important; }
a { color:var(--accent); text-decoration:none; }
header { display:flex; align-items:center; gap:24px; padding:10px 20px; background:#16213a; color:#fff; position:sticky; top:0; z-index:5; }
header .brand { font-weight:700; letter-spacing:.3px; }
header nav a { color:#c9d3e6; margin-right:16px; padding:6px 2px; border-bottom:2px solid transparent; }
header nav a.active { color:#fff; border-color:#7aa2ff; }
header .who { margin-left:auto; color:#c9d3e6; font-size:13px; } header .who a { color:#fff; }
.stale { background:#fff3cd; color:#7a5200; padding:6px 20px; font-size:13px; }
main { padding:16px 20px; max-width:1500px; margin:0 auto; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-bottom:16px; }
.card h2 { margin:0 0 10px; font-size:16px; }
.cardHead { display:flex; align-items:center; gap:12px; margin-bottom:8px; } .cardHead h2 { margin:0; } .cardHead .muted { margin-left:auto; }
.muted { color:var(--muted); } .small { font-size:12px; }
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-bottom:16px; }
.tile { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 12px; cursor:pointer; }
.tile .n { font-size:26px; font-weight:700; line-height:1.1; } .tile .l { color:var(--muted); font-size:12px; margin-top:2px; }
.tile.red .n { color:var(--red);} .tile.warn .n { color:var(--warn);} .tile.ok .n { color:var(--ok);} .tile.accent .n { color:var(--accent);}
.tbl { width:100%; border-collapse:collapse; font-size:13px; }
.tbl th { text-align:left; color:var(--muted); font-weight:600; padding:6px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl td { padding:6px 8px; border-bottom:1px solid #eef1f5; vertical-align:top; }
.tbl tbody tr { cursor:pointer; } .tbl tbody tr:hover { background:#f7f9fc; }
.mono { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; }
.lvl-red { color:var(--red); font-weight:600; } .lvl-warn { color:var(--warn); font-weight:600; } .lvl-done { color:var(--ok); } .lvl-wait,.lvl-transit { color:var(--text); }
.pill { display:inline-block; padding:1px 7px; border-radius:10px; font-size:11px; background:#eef1f5; }
.pill.err { background:#fde7e5; color:var(--red);} .pill.ok { background:#e6f4ea; color:var(--ok);} .pill.note { background:#fff3cd; color:#7a5200; }
.filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.filters input, .filters select, form input, form select { padding:7px 9px; border:1px solid #cfd6e0; border-radius:7px; font:inherit; background:#fff; }
.filters input#q { flex:1 1 320px; }
.chk { display:inline-flex; align-items:center; gap:4px; color:var(--muted); }
button { padding:7px 12px; border:1px solid #cfd6e0; border-radius:7px; background:#fff; cursor:pointer; font:inherit; } button:hover { background:#f2f5fa; }
button.primary, .login button, #pwForm button { background:var(--accent); color:#fff; border-color:var(--accent); }
.pager { display:flex; align-items:center; gap:8px; }
pre { background:#0f1726; color:#dbe4f3; padding:10px 12px; border-radius:8px; overflow:auto; white-space:pre-wrap; margin:0 0 8px; }
.login { min-height:100vh; display:flex; align-items:center; justify-content:center; }
.login .card { width:340px; } .login h1 { font-size:20px; margin:0 0 14px; }
label { display:block; margin-bottom:10px; } label input { display:block; width:100%; margin-top:4px; }
.error { color:var(--red); min-height:18px; } .notice { color:var(--ok); }
.narrow { max-width:420px; }
.inline { display:flex; gap:8px; margin-left:auto; align-items:center; }
.drawer { position:fixed; inset:0; background:rgba(10,15,30,.35); z-index:10; display:flex; justify-content:flex-end; }
.drawerBody { width:min(620px,100%); background:#fff; height:100%; overflow:auto; padding:18px 22px; position:relative; }
.close { position:absolute; top:10px; right:12px; font-size:20px; padding:2px 10px; }
.timeline { list-style:none; padding:0; margin:12px 0; }
.timeline li { display:grid; grid-template-columns:22px 1fr; gap:8px; padding:6px 0; border-bottom:1px dashed #eef1f5; }
.timeline .dot { width:14px; height:14px; border-radius:50%; background:#cfd6e0; margin-top:4px; } .timeline .dot.on { background:var(--ok); } .timeline .dot.bad { background:var(--red); }
.timeline .t { color:var(--muted); font-size:12px; }
.kv { display:grid; grid-template-columns:150px 1fr; gap:4px 10px; font-size:13px; } .kv div:nth-child(odd) { color:var(--muted); }
@media (max-width:800px) { header { flex-wrap:wrap; gap:8px; } .kv { grid-template-columns:1fr; } .tbl { font-size:12px; } }