:root { --bg:#0f1216; --fg:#e6e8eb; --muted:#8a939e; --card:#171b21; --line:#262c34; --ok:#3fb950; --warn:#d29922; --crit:#f85149; --info:#58a6ff; --s1:#58a6ff; --s2:#d2a8ff; }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--fg); }
a { color:var(--info); text-decoration:none; } a:hover { text-decoration:underline; }
main { padding:16px 24px 48px; max-width:1400px; margin:0 auto; }
h1 { font-size:22px; margin:8px 0 12px; } h2 { font-size:16px; margin:24px 0 8px; } h3 { font-size:14px; margin:16px 0 6px; }
code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; background:#1f242c; padding:1px 4px; border-radius:4px; }
.top { display:flex; align-items:center; gap:24px; padding:10px 24px; border-bottom:1px solid var(--line); background:#12161b; }
.brand { font-weight:700; color:var(--fg); font-size:16px; }
.top nav a { margin-right:16px; color:var(--muted); } .top nav a.active { color:var(--fg); font-weight:600; }
.logout { margin-left:auto; display:flex; gap:8px; align-items:center; }
button { background:#21262d; color:var(--fg); border:1px solid var(--line); border-radius:6px; padding:5px 12px; cursor:pointer; }
button:hover { background:#30363d; }
input, select { background:#0d1117; color:var(--fg); border:1px solid var(--line); border-radius:6px; padding:6px 8px; }
.muted { color:var(--muted); } .small { font-size:12px; } .right { float:right; }
.ok { color:var(--ok); } .warn { color:var(--warn); } .crit { color:var(--crit); }
table.list { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
table.list th, table.list td { text-align:left; padding:6px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
table.list th { color:var(--muted); font-weight:500; font-size:12px; background:#14181d; }
tr.resolved td { color:var(--muted); }
.dot { display:inline-block; width:10px; height:10px; border-radius:50%; } .dot.online { background:var(--ok); } .dot.offline { background:var(--crit); }
.badge { display:inline-block; padding:1px 8px; border-radius:10px; font-size:12px; font-weight:600; }
.sev-critical { background:rgba(248,81,73,.2); color:var(--crit); } .sev-warning { background:rgba(210,153,34,.2); color:var(--warn); } .sev-info { background:rgba(88,166,255,.2); color:var(--info); }
.cards { display:flex; gap:12px; flex-wrap:wrap; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:10px 16px; min-width:140px; }
.card .k { color:var(--muted); font-size:12px; } .card .v { font-size:22px; font-weight:600; }
.charts { display:grid; grid-template-columns:repeat(auto-fill,minmax(420px,1fr)); gap:12px; }
.chart { margin:0; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:10px 12px; }
.chart figcaption { margin-bottom:6px; font-weight:600; }
.chart svg { width:100%; height:120px; display:block; }
.chart .grid { stroke:var(--line); stroke-dasharray:4 4; }
.chart .line { fill:none; stroke-width:1.5; vector-effect:non-scaling-stroke; }
.chart .line.s1 { stroke:var(--s1); } .chart .line.s2 { stroke:var(--s2); }
.legend .lg { margin-right:12px; } .legend .lg.s1::before, .legend .lg.s2::before { content:""; display:inline-block; width:10px; height:3px; margin-right:4px; vertical-align:middle; }
.legend .lg.s1::before { background:var(--s1); } .legend .lg.s2::before { background:var(--s2); }
.cols { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.cols > * { min-width:0; }
@media (max-width:1200px) { .cols { grid-template-columns:minmax(0,1fr); } }
.table-wrap { overflow-x:auto; max-width:100%; }
table.fixed { table-layout:fixed; }
td.trunc { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
td.break { overflow-wrap:anywhere; }
.nowrap { white-space:nowrap; }
table.containers col.c-name { width:30%; } table.containers col.c-image { width:32%; } table.containers col.c-state { width:16%; }
table.containers col.c-health { width:12%; } table.containers col.c-restarts { width:10%; }
.badge.st-ok { background:rgba(63,185,80,.15); color:var(--ok); } .badge.st-warn { background:rgba(210,153,34,.15); color:var(--warn); }
.failed-units { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:8px 0 12px; }
.failed-units .label { color:var(--muted); }
.failed-units code { white-space:nowrap; }
.filters { display:flex; gap:12px; align-items:center; margin-bottom:12px; } .filters a.active { font-weight:700; color:var(--fg); }
.login { max-width:340px; margin:12vh auto; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:24px; }
.login form { display:flex; flex-direction:column; gap:12px; } .login label { display:flex; flex-direction:column; gap:4px; color:var(--muted); }
.error { color:var(--crit); margin:0; }
.stack { display:flex; flex-direction:column; gap:12px; } .narrow { max-width:520px; }
.stack label { display:flex; flex-direction:column; gap:4px; color:var(--muted); }
textarea { background:#0d1117; color:var(--fg); border:1px solid var(--line); border-radius:6px; padding:6px 8px; font:inherit; }
button.primary, a.button.primary { background:#238636; border-color:#2ea043; color:#fff; }
button.primary:hover { background:#2ea043; }
button.danger { background:#da3633; border-color:#f85149; color:#fff; }
a.button { display:inline-block; padding:5px 12px; border-radius:6px; border:1px solid var(--line); background:#21262d; color:var(--fg); }
a.button:hover { text-decoration:none; background:#30363d; }
.cmd { display:flex; gap:8px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:10px 12px; }
.cmd code { flex:1; overflow-x:auto; white-space:nowrap; background:none; font-size:13px; padding:0; }
.pending { color:var(--warn); } .dot.pending { background:var(--warn); }
.tag { display:inline-block; font-size:11px; padding:0 6px; border-radius:8px; background:#1f2a37; color:var(--info); margin-right:4px; }
.head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
details.danger-zone { margin-top:32px; border:1px solid rgba(248,81,73,.4); border-radius:8px; padding:10px 14px; }
details.danger-zone summary { cursor:pointer; color:var(--crit); }
.inline { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0; }
details.settings { margin-top:32px; border:1px solid var(--line); border-radius:8px; padding:10px 14px; }
details.settings summary { cursor:pointer; }

/* accounts */
.acct-switch select { font-size: .85rem; padding: .15rem .3rem; }
.acct-name { font-size: .85rem; }
.notice { border: 1px solid var(--border, #444); border-radius: 6px; padding: .5rem .8rem; margin: .8rem 0; }
input.wide { width: 100%; }
fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; }
/* hosts grid */
.toolbar { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin:4px 0 14px; }
.toolbar label { display:flex; gap:6px; align-items:center; color:var(--muted); font-size:12px; }
.toolbar input[type=search] { min-width:180px; flex:1 1 180px; max-width:320px; }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
/* Segmented tabs: shared by link tabs (template "tabs") and radio segments. */
.segbtn { padding:5px 12px; cursor:pointer; color:var(--muted); font-size:12px; font-weight:500; text-decoration:none; border-left:1px solid var(--line); user-select:none; display:inline-flex; gap:6px; align-items:center; }
.segbtn:first-child { border-left:0; }
.segbtn:hover { color:var(--fg); background:#1f242c; text-decoration:none; }
.segbtn input { display:none; }
.segbtn.on, .segbtn.on:hover { background:var(--info); color:#0b1220; font-weight:600; }
.segbtn .cnt { min-width:18px; padding:0 5px; border-radius:9px; background:#262c34; color:var(--fg); font-size:11px; text-align:center; }
.segbtn.on .cnt { background:rgba(11,18,32,.25); color:#0b1220; }
.tabs { font-size:13px; } .tabs .segbtn { padding:6px 14px; font-size:13px; }
.grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
@media (max-width:1500px) { .grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:1100px) { .grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) { .grid { grid-template-columns:minmax(0,1fr); } }
.hcard { display:flex; flex-direction:column; gap:6px; min-width:0; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px; color:var(--fg); }
.hcard:hover { text-decoration:none; border-color:#3b4450; }
.hc-head { display:flex; align-items:center; gap:8px; min-width:0; }
.hc-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; font-size:15px; }
.hc-tags { display:flex; flex-wrap:wrap; gap:4px; } .hc-tags .tag { margin:0; }
.hc-plat { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hc-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
.hc-stats div { display:flex; flex-direction:column; } .hc-stats .k { color:var(--muted); font-size:11px; }
.hc-stats div span:last-child { font-weight:600; font-variant-numeric:tabular-nums; }
.spark { width:100%; height:36px; display:block; }
.spark path { fill:none; stroke:var(--s1); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.spark text { font-size:9px; fill:var(--muted); }
.hc-foot { display:flex; justify-content:space-between; gap:8px; }
.hc-foot span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pending-card { border-style:dashed; opacity:.8; }
/* host charts */
.chart-toolbar { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin:8px 0 12px; }
.chart-toolbar .series label { color:var(--muted); font-size:12px; margin-right:10px; white-space:nowrap; }
.chart .band { stroke:none; opacity:.15; }
.chart .line.s3, .legend .lg.s3::before { stroke:#3fb950; } .legend .lg.s3::before { background:#3fb950; }
.chart .line.s4 { stroke:#d29922; } .legend .lg.s4::before { background:#d29922; }
.chart .line.s5 { stroke:#f778ba; } .legend .lg.s5::before { background:#f778ba; }
.chart .line.s6 { stroke:#79c0ff; } .legend .lg.s6::before { background:#79c0ff; }
.chart .band.s1 { fill:var(--s1); } .chart .band.s2 { fill:var(--s2); } .chart .band.s3 { fill:#3fb950; } .chart .band.s4 { fill:#d29922; } .chart .band.s5 { fill:#f778ba; } .chart .band.s6 { fill:#79c0ff; }
.legend .lg.s3::before, .legend .lg.s4::before, .legend .lg.s5::before, .legend .lg.s6::before { content:""; display:inline-block; width:10px; height:3px; margin-right:4px; vertical-align:middle; }
.ico { width:12px; height:12px; vertical-align:-2px; fill:none; stroke:currentColor; stroke-width:1.5; }
label.check { flex-direction:row; align-items:center; gap:8px; }
.badge.inv-pending { background:#1f3a5f; color:#9ecbff; } .badge.inv-used { background:#1b3a26; color:#7ee2a0; }
.badge.inv-expired, .badge.inv-revoked { background:#2a2f37; color:var(--muted); }
button.small { padding:3px 8px; font-size:12px; } .actions form.inline { display:inline; }
.invite-new { max-width:560px; }