:root{
  --bg:#0d1117; --card:#161b22; --card2:#1c2531; --elevate:#1f2836;
  --text:#e6edf3; --muted:#8b97a6; --border:#2a3542;
  --blue:#4b8ef0; --blue-dark:#3b7ae0;
  --up:#3fb950; --down:#f85149; --warn:#d29922; --unknown:#6e7b8a;
  --radius:10px; --shadow:0 1px 2px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--text);font-size:14px;line-height:1.5}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.5rem;margin:0}
h2{font-size:1.05rem;margin:0 0 .75rem}
code{background:#0b0f15;padding:.1rem .35rem;border-radius:5px;font-size:.85em;border:1px solid var(--border)}
.muted{color:var(--muted)}
.small{font-size:.82rem}
.right{text-align:right}
.text-danger{color:var(--down)}

/* Topbar */
.topbar{display:flex;align-items:center;gap:1.5rem;background:var(--card);
  padding:.7rem 1.25rem;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.brand{font-weight:700;font-size:1.05rem;color:var(--text)}
.brand span{color:var(--blue)}
.topbar nav{display:flex;gap:.35rem;flex:1}
.topbar nav a{padding:.4rem .7rem;border-radius:7px;color:var(--muted);font-weight:500}
.topbar nav a:hover{background:var(--elevate);color:var(--text);text-decoration:none}
.topbar nav a.active{background:var(--blue);color:#0d1117}
.topbar-right{display:flex;align-items:center;gap:.75rem}
.whoami{color:var(--muted);font-size:.85rem}

.container{max-width:1080px;margin:1.5rem auto;padding:0 1.25rem}
.footer{text-align:center;color:var(--muted);padding:2rem;font-size:.8rem}

.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.25rem}
.btn-row{display:flex;gap:.5rem}

/* Cards */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:1.25rem;margin-bottom:1.25rem}
.card-warn{border-color:#5a4322;background:#241d10}
/* Client groups (collapsible) */
details.client-group{padding:0}
details.client-group>summary{cursor:pointer;padding:1rem 1.25rem;user-select:none}
details.client-group[open]>summary{border-bottom:1px solid var(--border)}
.client-name{font-weight:700;font-size:1.02rem}
.client-meta{color:var(--muted);font-size:.85rem;font-weight:500;float:right}
details.client-group .table{width:calc(100% - 2.5rem);margin:.5rem 1.25rem 1rem}
.cron-sub{margin:0 1.25rem 1rem;border-top:1px dashed var(--border);padding-top:.5rem}
.cron-sub-title{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;margin:.4rem 0 .2rem}
.cron-sub .table{width:100%;margin:0}
.actions form{margin-left:.5rem}
.actions .muted{margin-right:.25rem}

/* Fieldset (content check group) */
.fieldset{border:1px solid var(--border);border-radius:8px;padding:1rem 1rem .25rem;margin:0 0 .9rem}
.fieldset legend{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;padding:0 .4rem}
.created-pw{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.35rem}
.created-pw code{font-size:1rem;padding:.25rem .5rem}

/* Stats */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:1.25rem}
.stat{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:1rem 1.25rem;display:flex;flex-direction:column}
.stat-num{font-size:1.8rem;font-weight:700}
.stat-label{color:var(--muted);font-size:.82rem}
.stat-up .stat-num{color:var(--up)}
.stat-down .stat-num{color:var(--down)}
.stat-slow{border-color:var(--warn)}
.stat-slow .stat-num{color:var(--warn)}

/* Tables */
.table{width:100%;border-collapse:collapse}
.table th{text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.03em;
  color:var(--muted);padding:.5rem .6rem;border-bottom:2px solid var(--border)}
.table td{padding:.6rem;border-bottom:1px solid var(--border);vertical-align:top}
.table tr:last-child td{border-bottom:none}
.row-disabled{opacity:.5}
.row-slow{background:rgba(210,153,34,.08)}
.row-slow .mono-name{color:var(--warn)}
.mono-name{font-weight:600}
.kv{width:100%;border-collapse:collapse}
.kv td{padding:.35rem 0;border-bottom:1px solid var(--border)}
.kv td:first-child{color:var(--muted);width:45%}

/* Dots + badges */
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:.25rem}
.dot-up{background:var(--up);box-shadow:0 0 6px rgba(63,185,80,.6)}
.dot-down{background:var(--down);box-shadow:0 0 6px rgba(248,81,73,.6)}
.dot-slow{background:var(--warn);box-shadow:0 0 6px rgba(210,153,34,.6)}
.dot-unknown{background:var(--unknown)} .dot-off{background:var(--unknown)}
.badge{display:inline-block;padding:.12rem .45rem;border-radius:5px;font-size:.72rem;font-weight:700;
  background:var(--elevate);color:var(--muted)}
.badge-down{background:#3d1c1f;color:#ff8078}
.badge-slow{background:#3a2f12;color:#e6b23a}
.badge-ssl{background:#3d1c1f;color:#ff8078}
.badge-cron{background:#17304f;color:#79b0f5}

/* Buttons */
.btn{display:inline-block;padding:.5rem .9rem;border-radius:8px;border:1px solid var(--border);
  background:var(--elevate);color:var(--text);font-weight:600;font-size:.85rem;cursor:pointer;line-height:1}
.btn:hover{border-color:var(--blue);text-decoration:none}
.btn-primary{background:var(--blue);border-color:var(--blue);color:#0d1117}
.btn-primary:hover{background:var(--blue-dark)}
.btn-danger{background:transparent;border-color:var(--down);color:var(--down)}
.btn-danger:hover{background:var(--down);color:#0d1117}
.btn-block{width:100%}
.btn-link{background:none;border:none;color:var(--blue);cursor:pointer;font-weight:600;padding:0;font-size:.85rem}
.inline{display:inline}

/* Forms */
.form label,.card label{display:block;margin-bottom:.9rem;font-weight:600;font-size:.85rem}
.form input,.form select,.card input,.card select{width:100%;padding:.55rem .7rem;margin-top:.3rem;
  border:1px solid var(--border);border-radius:8px;font-size:.9rem;font-weight:400;font-family:inherit;
  background:#0b0f15;color:var(--text)}
.form input:focus,.form select:focus,.card input:focus{outline:none;border-color:var(--blue)}
.form input::placeholder{color:#586675}
.form small{font-weight:400}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
.checkrow{display:flex;gap:1.5rem;margin:.5rem 0}
.check{display:flex;align-items:center;gap:.4rem;font-weight:500}
.check input{width:auto;margin:0}
.form-actions{display:flex;gap:.6rem;margin-top:.5rem}

/* Login */
.login-wrap{min-height:80vh;display:flex;align-items:center;justify-content:center}
.login-card{width:360px;max-width:92vw}
.login-card h1{font-size:1.2rem;margin-bottom:.2rem}

/* Alerts */
.alert{padding:.6rem .8rem;border-radius:8px;margin-bottom:1rem;font-size:.85rem}
.alert-error{background:#3d1c1f;color:#ff8078}
.alert-ok{background:#12331f;color:#5ed17e}

.code,pre.code{background:#0b0f15;color:#c9d6e5;padding:.8rem 1rem;border-radius:8px;
  overflow-x:auto;font-size:.82rem;white-space:pre;border:1px solid var(--border)}
.ping-url{font-size:.78rem}
.copybtn{margin-left:.35rem}
.pw-details{display:inline-block}
.inline-pw{display:flex;gap:.3rem;margin-top:.35rem}
.inline-pw input{width:150px;margin:0}

@media(max-width:760px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .topbar{flex-wrap:wrap;gap:.6rem}
  .topbar nav{order:3;flex-basis:100%;overflow-x:auto}
}