:root{
  --bg:#0d1117; --panel:#161b22; --line:#30363d; --fg:#e6edf3; --muted:#8b949e;
  --ok:#3fb950; --warn:#d29922; --bad:#f85149; --accent:#58a6ff;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.topbar{display:flex;justify-content:space-between;align-items:center;
  padding:.6rem 1.2rem;background:var(--panel);border-bottom:1px solid var(--line)}
.brand{font-weight:600;font-size:1.05rem;color:var(--fg)}
.links a{margin-left:1.1rem;color:var(--muted)}
.links a:hover{color:var(--fg)}
.links .logout{color:var(--bad)}
.wrap{max-width:1200px;margin:0 auto;padding:1.4rem}
h1{font-size:1.4rem;margin:.2rem 0 1rem}
h2{font-size:1.05rem;margin:1.6rem 0 .6rem;color:var(--muted);font-weight:600}
.muted{color:var(--muted)}
.back{display:inline-block;margin-bottom:.6rem;color:var(--muted)}

.summary{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:.7rem 1rem;min-width:130px}
.stat.warn{border-color:var(--warn)}
.stat .k{display:block;color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.04em}
.stat .v{display:block;font-size:1.5rem;font-weight:600;margin-top:.15rem}

table.grid{width:100%;border-collapse:collapse;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.grid th,.grid td{padding:.5rem .7rem;text-align:left;border-bottom:1px solid var(--line);font-size:.86rem}
.grid th{color:var(--muted);font-weight:600;text-transform:uppercase;font-size:.72rem;letter-spacing:.03em}
.grid tr:last-child td{border-bottom:none}
.grid tr.down{opacity:.55}

.dot{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;margin-right:.4rem;vertical-align:middle}
.dot.ok{background:var(--ok)} .dot.bad{background:var(--bad)}
.ok-text{color:var(--ok)}
.badge{display:inline-block;padding:.05rem .45rem;border-radius:999px;font-size:.75rem;font-weight:600}
.badge.warn{background:rgba(210,153,34,.18);color:var(--warn)}
.badge.bad{background:rgba(248,81,73,.18);color:var(--bad)}

.bar{height:6px;background:var(--line);border-radius:4px;overflow:hidden;width:90px}
.bar i{display:block;height:100%;background:var(--accent)}
td small{color:var(--muted);font-size:.72rem}

.list{margin:.3rem 0;padding-left:1.1rem}
.list li{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem}
pre.log{background:#010409;border:1px solid var(--line);border-radius:8px;
  padding:.8rem;overflow:auto;font-size:.78rem;max-height:420px}
details{background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:.5rem .8rem;margin:.5rem 0}
summary{cursor:pointer;font-weight:600}

.login-card{max-width:360px;margin:8vh auto;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;padding:2rem}
.login-card h1{text-align:center}
.login-card .hint{color:var(--muted);font-size:.85rem;text-align:center}
.login-card .error{color:var(--bad);text-align:center;font-size:.85rem}
.login-card label{display:block;margin:.8rem 0 .2rem;font-size:.8rem;color:var(--muted)}
.login-card input{width:100%;padding:.55rem .7rem;background:var(--bg);
  border:1px solid var(--line);border-radius:8px;color:var(--fg)}
.login-card button{width:100%;margin-top:1.2rem;padding:.6rem;border:none;
  border-radius:8px;background:var(--accent);color:#0d1117;font-weight:600;cursor:pointer}
canvas{max-width:100%;background:var(--panel);border:1px solid var(--line);border-radius:10px}