/* Flat dashboard look: slate header bar, white table, colour-coded values. */
:root{
  --bg:#ebebeb; --ink:#333; --panel:#fff; --line:#ddd; --muted:#777; --hdr:#2c3e50; --hdr-ink:#ecf0f1; --hdr-hover:#34495e;
  --odd:#fff; --even:#f7f7f7; --tot:#f3f3f3; --ok:#4caf50; --warn:#ff9800; --bad:#f44336; --offline:rgba(244,67,54,.1);
  --foot:#999; --foot-hover:#666; --shadow:0 1px 3px rgba(0,0,0,.1);
  --c1:#2c7be5; --c2:#4caf50; --c3:#ff9800; --c4:#9c27b0; --accent:#2c3e50; --accent-ink:#ecf0f1; --idle:#9e9e9e;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#121212; --ink:#e0e0e0; --panel:#282828; --line:#333; --muted:#9a9a9a; --hdr:#233443; --hdr-hover:#2c4155;
    --odd:#2f2f2f; --even:#282828; --tot:#212121; --foot:#555; --foot-hover:#777; --shadow:none;
    --c1:#5aa2ff; --c2:#66d36b; --c3:#ffb74d; --c4:#d28be0; --accent:#3d5a73; --idle:#6b6b6b}
}
*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif}
body{background:var(--bg);color:var(--ink);padding:15px;font-size:15px;line-height:1.45}
a{color:inherit}
h1.bar{display:flex;align-items:center;gap:12px;background:var(--hdr);color:var(--hdr-ink);padding:12px;font-size:1.5rem;font-weight:700;margin-bottom:15px;user-select:none;border-radius:5px 5px 0 0}
h1.bar a{text-decoration:none;color:inherit;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
h1.bar .r{display:flex;align-items:center;gap:6px;flex:none}
h1.bar .r a{flex:none;font-size:.9rem;font-weight:400;padding:4px 8px}
h1.bar .r a:hover{text-decoration:underline}
h1.bar button{background:transparent;border:0;color:var(--hdr-ink);font-size:.9rem;font-weight:400;padding:4px 8px;border-radius:5px}
h1.bar button:hover{background:var(--hdr-hover)}
h2{font-size:17px;margin:0 0 12px} h3{font-size:14px;color:var(--muted);font-weight:600}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line);background:var(--panel);padding:6px 14px;border-radius:5px}
button:hover{border-color:var(--hdr)}
button.primary,.ctl{background:var(--hdr);color:var(--hdr-ink);border:0;border-radius:5px}
button.primary{padding:7px 14px}
button.primary:hover,.ctl:hover{background:var(--hdr-hover)}
button.danger{color:var(--bad)}
button.sm{padding:3px 10px;font-size:13px}
button:disabled{opacity:.5;cursor:default}
input,select,textarea{width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:5px;background:var(--panel)}
input[type=checkbox]{width:auto}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{outline:2px solid var(--hdr);outline-offset:1px}
label{display:block;font-size:13px;color:var(--muted);margin-bottom:4px}
main.narrow{max-width:1180px;margin:0 auto}

/* ---- status page ---- */
.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:15px;flex-wrap:wrap}
.toolbar .ctl{padding:8px 12px;font-size:.9rem;border-radius:5px}
.toolbar input.ctl{width:220px;outline:0}
.toolbar input.ctl::placeholder{color:var(--hdr-ink);opacity:.65}
#last{color:var(--muted);font-size:.85rem}
#traffic{background:var(--panel);padding:10px;font-size:.9rem;margin-bottom:15px;border-radius:5px;box-shadow:var(--shadow);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;direction:ltr}
#traffic span{unicode-bidi:plaintext}
#traffic .hint{color:var(--muted)}
#list{overflow-x:auto;border-radius:5px;box-shadow:var(--shadow);direction:ltr}
table#table{width:100%;border-collapse:separate;border-spacing:0;background:var(--panel);font-size:.85rem;white-space:nowrap}
#table th{background:var(--hdr);color:var(--hdr-ink);padding:5px 8px;text-align:left;border-bottom:1px solid var(--line);cursor:pointer;font-weight:700;font-size:.85rem;user-select:none}
#table th:hover{background:var(--hdr-hover)}
#table th.asc::after{content:"\25b2";opacity:.5;margin-left:4px;font-size:.7em}
#table th.desc::after{content:"\25bc";opacity:.5;margin-left:4px;font-size:.7em}
#table td{padding:5px 8px;border-bottom:1px solid var(--line);text-align:left}
#table tbody tr:nth-child(odd){background:var(--odd)}
#table tbody tr:nth-child(even){background:var(--even)}
#table tbody tr:last-child td{border-bottom:0}
#table td.nm{padding:0;font-weight:700}
#table td.nm a{display:block;padding:5px 8px;text-decoration:none;unicode-bidi:plaintext}
#table td.nm small{font-weight:400;color:var(--muted);margin-left:8px}
.sdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:var(--ok)}
.sdot.off{background:var(--bad)} .sdot.wait{background:var(--idle)}
#table tr.offline{background:var(--offline) !important}
#table td.msg{color:var(--muted)}
#table tr.offline td.msg{color:var(--ink)}
.g{color:var(--ok)} .o{color:var(--warn)} .r2{color:var(--bad)}
#table tr.tot{background:var(--tot) !important}
#table tr.tot td{font-weight:600}
#table tr.tot td:first-child{padding-left:22px}
.loading{text-align:center;padding:30px;color:var(--muted)}
.error{background:var(--bad);color:#fff;padding:10px;margin-bottom:15px;border-radius:5px}
footer{text-align:center;margin-top:1rem;color:var(--foot);font-size:.7rem}
@media (max-width:44rem){
  tr.tot,.hide-m{display:none !important}
  #traffic .hint{display:none}
  .toolbar input.ctl{width:100%}
  h1.bar{font-size:1.2rem}
}

/* ---- detail / admin ---- */
.sub{color:var(--muted);margin:0 0 18px}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 18px}
.chip{background:var(--panel);border-radius:5px;padding:8px 16px;min-width:110px;box-shadow:var(--shadow)}
.chip b{display:block;font-size:20px;line-height:1.3}
.chip span{color:var(--muted);font-size:13px}
.panel{background:var(--panel);border-radius:5px;padding:16px;margin-bottom:14px;box-shadow:var(--shadow)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{justify-content:space-between}
.ranges{display:flex;gap:4px;flex-wrap:wrap}
.ranges button{padding:5px 12px}
.ranges button.on,.tabs button.on{background:var(--hdr);color:var(--hdr-ink);border-color:var(--hdr)}
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:12px}
.cwrap{position:relative}
.cwrap svg{width:100%;height:auto;display:block;direction:ltr}
.legend{display:flex;gap:14px;font-size:12.5px;color:var(--muted);margin:6px 0 0;flex-wrap:wrap}
.legend span::before{content:"";display:inline-block;width:10px;height:3px;border-radius:2px;background:var(--c);margin-inline-end:6px;vertical-align:middle}
.tip{position:absolute;pointer-events:none;background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:6px 10px;font-size:12.5px;box-shadow:0 4px 14px rgba(0,0,0,.18);white-space:nowrap;direction:ltr;z-index:2}
.empty{color:var(--muted);text-align:center;padding:30px 0}
.dot{width:10px;height:10px;border-radius:50%;background:var(--idle);flex:none;display:inline-block}
.dot.up{background:var(--ok)} .dot.down{background:var(--bad)}
.badge{display:inline-block;font-size:11.5px;padding:1px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.table-wrap table{width:100%;border-collapse:collapse}
.table-wrap th,.table-wrap td{text-align:start;padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.table-wrap th{font-size:12.5px;color:var(--muted);font-weight:600;background:none;cursor:default}
.tabs{display:flex;gap:4px;margin-bottom:14px}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.form .full{grid-column:1/-1}
.check{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--ink);margin:0}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;direction:ltr;unicode-bidi:plaintext}
.cmd{background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:10px;word-break:break-all;margin:6px 0 10px;direction:ltr;text-align:left}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:20}
.modal[hidden],.toast[hidden]{display:none}
.dlg{background:var(--panel);border-radius:8px;padding:20px;max-width:640px;width:100%;max-height:90vh;overflow:auto}
.toast{position:fixed;bottom:20px;inset-inline:0;margin:auto;width:max-content;max-width:90vw;background:var(--ink);color:var(--bg);padding:9px 18px;border-radius:5px;z-index:30}
.toast.err{background:var(--bad);color:#fff}
.note{color:var(--muted);font-size:13px}
.warnbox{border:1px solid var(--warn);color:var(--warn);border-radius:5px;padding:8px 12px;font-size:13px;margin-bottom:10px}
@media (max-width:640px){ body{padding:8px} .charts{grid-template-columns:1fr} .table-wrap{overflow-x:auto} }