:root { --bg:#0f1115; --panel:#171a21; --panel2:#1e222b; --line:#2a2f3a; --fg:#e6e8ee; --muted:#8b93a7; --accent:#6ea8fe; --ok:#3fb950; --warn:#d29922; --down:#f85149; --unknown:#6e7681; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
@media (prefers-color-scheme: light) { :root { --bg:#f6f7fb; --panel:#fff; --panel2:#f0f2f7; --line:#d9dde7; --fg:#1b1f2a; --muted:#5b6577; --accent:#1f6feb; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
a { color: var(--accent); text-decoration: none; }
.hidden { display:none !important; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: 12.5px; }
.top { display:flex; align-items:center; gap:24px; padding:10px 20px; border-bottom:1px solid var(--line); background:var(--panel); position:sticky; top:0; z-index:5; }
.brand { font-weight:600; display:flex; align-items:center; gap:8px; }
nav a { padding:6px 10px; border-radius:6px; color:var(--fg); }
nav a.active { background:var(--panel2); color:var(--accent); }
.right { margin-left:auto; }
main { padding:20px; max-width:1400px; margin:0 auto; }
h1 { font-size:20px; margin:0 0 12px; } h2 { font-size:16px; margin:0 0 10px; } h3 { font-size:14px; margin:14px 0 6px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px 16px; }
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap:14px; }
.module { display:flex; flex-direction:column; gap:8px; }
.module .head { display:flex; align-items:center; gap:10px; }
.module .head .name { font-weight:600; flex:1; }
.dot { width:10px; height:10px; border-radius:50%; display:inline-block; background:var(--unknown); flex:none; }
.dot.ok { background:var(--ok); } .dot.warn { background:var(--warn); } .dot.down { background:var(--down); } .dot.unknown { background:var(--unknown); }
.kv { display:grid; grid-template-columns: max-content 1fr; gap:2px 12px; font-size:13px; }
.kv div:nth-child(odd) { color:var(--muted); }
.actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
button { background:var(--accent); color:#fff; border:0; border-radius:6px; padding:7px 12px; font:inherit; cursor:pointer; }
button:disabled { opacity:.5; cursor:default; }
button.ghost { background:var(--panel2); color:var(--fg); border:1px solid var(--line); }
button.danger { background:var(--down); }
button.small { padding:4px 9px; font-size:12.5px; }
input, textarea, select { background:var(--panel2); color:var(--fg); border:1px solid var(--line); border-radius:6px; padding:7px 9px; font:inherit; width:100%; }
textarea { min-height:90px; resize:vertical; font-family:var(--mono); font-size:12.5px; }
pre { background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:10px; overflow:auto; font-family:var(--mono); font-size:12px; max-height:60vh; white-space:pre-wrap; word-break:break-word; margin:6px 0; }
pre.diff .add { color:var(--ok); } pre.diff .del { color:var(--down); } pre.diff .hunk { color:var(--accent); }
table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:500; }
tr.click { cursor:pointer; } tr.click:hover { background:var(--panel2); }
.pill { display:inline-block; padding:1px 7px; border-radius:999px; background:var(--panel2); border:1px solid var(--line); font-size:12px; margin:1px 2px; }
.pill.tag { color:var(--accent); }
.pill.destructive { color:var(--down); border-color:var(--down); }
.badge { font-size:11px; text-transform:uppercase; letter-spacing:.04em; padding:1px 6px; border-radius:4px; background:var(--panel2); color:var(--muted); }
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:20; padding:20px; }
.login { width:340px; display:flex; flex-direction:column; gap:10px; }
.modal { width:min(1100px, 100%); max-height:92vh; overflow:auto; }
.modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.error { color:var(--down); min-height:1.2em; margin:0; }
.toast { position:fixed; bottom:20px; right:20px; background:var(--panel); border:1px solid var(--line); padding:10px 14px; border-radius:8px; z-index:30; box-shadow:0 6px 24px rgba(0,0,0,.3); max-width:420px; }
.toast.err { border-color:var(--down); }
.row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.field { display:grid; grid-template-columns: 240px 1fr; gap:4px 14px; padding:8px 0; border-bottom:1px solid var(--line); align-items:start; }
.field label { font-family:var(--mono); font-size:12.5px; padding-top:8px; }
.field .help { grid-column:2; color:var(--muted); font-size:12px; }
.field.changed label { color:var(--warn); }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:10px 0; flex-wrap:wrap; }
.tabs button { background:none; color:var(--muted); border:0; border-bottom:2px solid transparent; border-radius:0; padding:8px 12px; }
.tabs button.active { color:var(--fg); border-bottom-color:var(--accent); }
.stats { display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:10px; margin-bottom:14px; }
.stat { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.stat .n { font-size:22px; font-weight:600; } .stat .l { color:var(--muted); font-size:12px; }
.op { border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin:8px 0; background:var(--panel2); }
.op.destructive { border-color:var(--down); }
.op .head { display:flex; gap:10px; align-items:center; }
details summary { cursor:pointer; color:var(--muted); }
.two { display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
@media (max-width: 900px) { .two { grid-template-columns:1fr; } .field { grid-template-columns:1fr; } .field .help { grid-column:1; } }
.log-lines { font-family:var(--mono); font-size:12px; white-space:pre-wrap; background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:10px; max-height:50vh; overflow:auto; }
.spinner { display:inline-block; width:12px; height:12px; border:2px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; vertical-align:middle; }
@keyframes spin { to { transform:rotate(360deg); } }