:root{
  --bg:#f3f5f8; --card:#fff; --ink:#1e293b; --muted:#64748b; --line:#e7ebf0;
  --up:#16a34a; --late:#d97706; --down:#dc2626; --new:#64748b; --paused:#94a3b8;
  --accent:#4f46e5; --accent-d:#4338ca;
  --shadow:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.45}
.wrap{max-width:1100px;margin:0 auto;padding:20px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:22px;margin:0}
h3{font-size:15px;margin:18px 0 8px}
.muted{color:var(--muted)}
.small{font-size:12px}
.mono,code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* topbar */
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.brand{font-size:20px;font-weight:700;letter-spacing:-.2px;display:flex;align-items:center;gap:9px}
.brand .backlink{font-weight:700}
.pulse{width:10px;height:10px;border-radius:50%;background:var(--up);box-shadow:0 0 0 0 rgba(22,163,74,.5);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.45)}70%{box-shadow:0 0 0 8px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
.topbar-right{display:flex;align-items:center;gap:14px}
.updated{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.updated.stale{color:var(--down);font-weight:600}
.btn-link{background:none;border:0;color:var(--accent);cursor:pointer;font-size:13px;padding:4px}

/* summary */
.summary{margin-bottom:16px}
.banner{padding:14px 18px;border-radius:10px;font-size:16px;font-weight:600;color:#fff;margin-bottom:12px}
.banner.ok{background:linear-gradient(90deg,#16a34a,#22c55e)}
.banner.warn{background:linear-gradient(90deg,#d97706,#f59e0b)}
.banner.danger{background:linear-gradient(90deg,#dc2626,#ef4444)}
.stats{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.statchip{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--card);
  border:1px solid var(--line);border-left:3px solid var(--line);border-radius:9px;padding:10px 12px;
  cursor:pointer;box-shadow:var(--shadow);transition:transform .08s,border-color .1s}
.statchip:hover{transform:translateY(-1px)}
.statchip.info{cursor:default} .statchip.info:hover{transform:none}
.statchip.active{outline:2px solid var(--accent);outline-offset:-1px}
.statnum{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.statlbl{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.s-down{border-left-color:var(--down)} .s-down .statnum{color:var(--down)}
.s-late{border-left-color:var(--late)} .s-late .statnum{color:var(--late)}
.s-up{border-left-color:var(--up)} .s-up .statnum{color:var(--up)}
.s-srv{border-left-color:var(--accent)} .s-srv .statnum{color:var(--accent)}
.s-new{border-left-color:var(--new)}
.s-paused{border-left-color:var(--paused)}
.s-all{border-left-color:var(--accent)}

/* toolbar */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 12px}
#search{flex:1;min-width:200px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);font-size:14px}
#serverFilter{padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);font-size:14px}
.statusfilter{display:flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:3px}
.statusfilter button{border:0;background:none;padding:6px 11px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--muted)}
.statusfilter button.active{background:var(--accent);color:#fff}
.shown{font-size:12px;color:var(--muted);margin-left:auto}

/* table */
table.checks{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
table.checks th,table.checks td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
table.checks thead th{background:#fafbfc;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:600}
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
th.sortable:hover{color:var(--ink)}
th.sortable::after{content:'\2195';opacity:.3;margin-left:6px;font-size:11px}
th.sort-asc::after{content:'\2191';opacity:.9}
th.sort-desc::after{content:'\2193';opacity:.9}
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.checks tbody tr{cursor:pointer;transition:background .08s}
table.checks tbody tr:hover{background:#f7f9fc}
table.checks tbody tr:last-child td{border-bottom:0}
.cname{font-weight:600}
.submsg{font-weight:400;font-size:12px;color:var(--down);margin-top:2px;max-width:480px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* zvýraznění problémových řádků */
tr.st-down{background:#fef2f2}
tr.st-down:hover{background:#fde8e8}
tr.st-down td:first-child{box-shadow:inset 3px 0 0 var(--down)}
tr.st-late{background:#fffbeb}
tr.st-late:hover{background:#fff5d6}
tr.st-late td:first-child{box-shadow:inset 3px 0 0 var(--late)}
tr.st-paused{opacity:.62}

/* badge */
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;color:#fff;letter-spacing:.02em;white-space:nowrap}
.badge.big{font-size:13px;padding:5px 14px}
.badge.st-up{background:var(--up)} .badge.st-late{background:var(--late)}
.badge.st-down{background:var(--down)} .badge.st-new{background:var(--new)} .badge.st-paused{background:var(--paused)}

.empty{padding:30px;text-align:center;color:var(--muted);background:var(--card);border:1px dashed var(--line);border-radius:12px;margin-top:10px}

/* nová kontrola */
.newcheck{margin-top:18px}
.newcheck summary{cursor:pointer;color:var(--accent);font-weight:600;padding:6px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow);margin:10px 0}
.formgrid label{display:block;font-size:12px;color:var(--muted);margin:8px 0}
.formgrid input,.formgrid select{display:block;width:100%;margin-top:4px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:14px}
.btn-primary{background:var(--accent);color:#fff;border:0;border-radius:8px;padding:9px 16px;font-size:14px;cursor:pointer;margin-top:10px}
.btn-primary:hover{background:var(--accent-d)}
.inline{display:inline}

/* detail */
.detail-head{display:flex;align-items:center;gap:14px;margin:6px 0 10px}
.meta-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.chip{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px;box-shadow:var(--shadow)}
.lastmsg{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;border-radius:8px;padding:10px 14px}
.pingurl code{background:var(--card);border:1px solid var(--line);padding:4px 8px;border-radius:6px;font-size:12px;word-break:break-all}
.cols{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.cols .card{flex:1;min-width:280px;margin:0}
.actions-col{display:flex;flex-direction:column;gap:8px;min-width:160px}
.btn-wide{width:100%;padding:10px;border:1px solid var(--line);background:var(--card);border-radius:8px;cursor:pointer;font-size:14px}
.btn-wide:hover{background:#f7f9fc}
.btn-wide.danger{color:var(--down);border-color:#fecaca}
.btn-wide.danger:hover{background:#fef2f2}
table.events{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
table.events th,table.events td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);font-size:13px}
table.events thead th{background:#fafbfc;font-size:11px;text-transform:uppercase;color:var(--muted)}
.evbadge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;color:#fff}
.ev-success{background:var(--up)} .ev-fail{background:var(--down)} .ev-start{background:var(--paused)}

/* login */
.login-wrap{max-width:340px;margin:8vh auto 0;text-align:center}
.login-logo{font-size:30px;font-weight:800;letter-spacing:-.5px}
.login-sub{color:var(--muted);margin:4px 0 18px}
.login{text-align:left}
.login label{display:block;font-size:12px;color:var(--muted);margin:10px 0}
.login input{display:block;width:100%;margin-top:4px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:14px}
.login .btn-primary{width:100%}
.err{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;border-radius:8px;padding:9px;font-size:13px}

@media(max-width:760px){
  .stats{grid-template-columns:repeat(3,1fr)}
  .shown{width:100%;margin-left:0}
  table.checks thead th:nth-child(4),table.checks tbody td:nth-child(4){display:none}
}

/* === dashboard v2 === */
.toolbtn{padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);cursor:pointer;font-size:13px;color:var(--ink)}
.toolbtn:hover{background:#f7f9fc}
.toolbtn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
#bellToggle{font-size:15px;padding:6px 10px;line-height:1}
.cname-cell .cname{font-weight:600;color:#1d1d1f}
.csub{font-size:12px;color:#8a8f98;margin-top:2px}
.pingcell .csub{color:#4f46e5}
/* sparkline */
.spark{display:flex;gap:2px;align-items:center}
.spark .tick{width:5px;height:18px;border-radius:2px;background:#e2e8f0}
.tick.t-ok{background:#16a34a}
.tick.t-fail{background:#dc2626}
.tick.t-start{background:#cbd5e1}
.sparkcell{width:130px}
/* reliability */
.relval{font-weight:700;font-variant-numeric:tabular-nums}
.r-good{color:#16a34a} .r-mid{color:#d97706} .r-bad{color:#dc2626}
/* inline akce */
.actcol{width:78px}
.actcell{white-space:nowrap;text-align:right}
.rowbtn{border:1px solid var(--line);background:#fff;border-radius:6px;padding:3px 8px;margin-left:4px;cursor:pointer;font-size:13px;opacity:0;transition:opacity .1s}
tr:hover .rowbtn,tr:focus-within .rowbtn{opacity:1}
.rowbtn:hover{background:#eef2f7;border-color:#cbd5e1}
/* skupiny dle serveru */
.grouprow td{background:#eef1f5;cursor:pointer;font-size:13px;padding:9px 14px;color:#334155;border-bottom:1px solid var(--line)}
.grouprow td:hover{background:#e6eaf0}
.gtri{display:inline-block;width:12px;color:#94a3b8}
.gcount{color:#94a3b8;font-size:12px;margin-left:2px}
.gb{display:inline-block;font-size:11px;font-weight:600;border-radius:999px;padding:2px 9px;margin-left:6px}
.gb-down{background:#fde8e8;color:#b91c1c}
.gb-late{background:#fff3e0;color:#92500a}
.gb-ok{background:#e6f4ea;color:#2e7d32}
@media(max-width:820px){
  .sparkcell,.spark,th:nth-child(3),td.sparkcell{display:none}
  .relcell,th:nth-child(4){display:none}
}