:root {
  --ground:#F2F4F7; --surface:#FFF; --surface-2:#F7F9FB;
  --line:#DDE3EA; --ink:#171B21; --ink-2:#4A545F; --ink-3:#78838F;
  --accent:#2E6BA8; --accent-soft:#E7EFF7;
  --good:#2F7D4F; --good-soft:#E4F0E8;
  --warn:#8A6100; --warn-soft:#F7EEDA;
  --crit:#A93226; --crit-soft:#F8E5E2;
  --idle:#6B7480; --idle-soft:#ECEFF2;
  --radius:8px;
  --shadow:0 1px 2px rgba(23,27,33,.05), 0 4px 12px rgba(23,27,33,.04);
  --sans: ui-sans-serif, "Segoe UI Variable Display", "Segoe UI", -apple-system, system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground:#0F1319; --surface:#171C24; --surface-2:#1D232C;
    --line:#2A323D; --ink:#E9EDF2; --ink-2:#A9B4C0; --ink-3:#7A8592;
    --accent:#6BA6DE; --accent-soft:#1B2A3A;
    --good:#63B487; --good-soft:#17281F;
    --warn:#D2A343; --warn-soft:#2A2418;
    --crit:#E0796C; --crit-soft:#2C1B19;
    --idle:#8B95A1; --idle-soft:#1E242C;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{--ground:#0F1319;--surface:#171C24;--surface-2:#1D232C;--line:#2A323D;--ink:#E9EDF2;--ink-2:#A9B4C0;--ink-3:#7A8592;--accent:#6BA6DE;--accent-soft:#1B2A3A;--good:#63B487;--good-soft:#17281F;--warn:#D2A343;--warn-soft:#2A2418;--crit:#E0796C;--crit-soft:#2C1B19;--idle:#8B95A1;--idle-soft:#1E242C;--shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.3)}
:root[data-theme="light"]{--ground:#F2F4F7;--surface:#FFF;--surface-2:#F7F9FB;--line:#DDE3EA;--ink:#171B21;--ink-2:#4A545F;--ink-3:#78838F;--accent:#2E6BA8;--accent-soft:#E7EFF7;--good:#2F7D4F;--good-soft:#E4F0E8;--warn:#8A6100;--warn-soft:#F7EEDA;--crit:#A93226;--crit-soft:#F8E5E2;--idle:#6B7480;--idle-soft:#ECEFF2;--shadow:0 1px 2px rgba(23,27,33,.05),0 4px 12px rgba(23,27,33,.04)}

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:22px 22px 64px}
code{font-family:var(--mono);font-size:.92em;background:var(--surface-2);border:1px solid var(--line);padding:1px 5px;border-radius:4px}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:16px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.nav-brand{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink-2);text-decoration:none;letter-spacing:-.01em}
.nav-right{display:flex;align-items:center;gap:14px;font-size:13px}
.nav-right a{color:var(--ink-3);text-decoration:none}
.nav-right a:hover{color:var(--accent)}
.linkbtn{background:none;border:0;color:var(--ink-3);font:inherit;font-size:13px;cursor:pointer;padding:0}
.linkbtn:hover{color:var(--accent)}

/* zaglavlje */
.top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}
.brand h1{margin:0;font-size:21px;font-weight:620;letter-spacing:-.01em}
.brand p{margin:3px 0 0;color:var(--ink-3);font-size:13.5px}
.verdict{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:100px;font-size:13.5px;font-weight:600;border:1px solid transparent}
.verdict .dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.verdict.ok{background:var(--good-soft);color:var(--good);border-color:color-mix(in srgb,var(--good) 28%,transparent)}
.verdict.warn{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.verdict.crit{background:var(--crit-soft);color:var(--crit);border-color:color-mix(in srgb,var(--crit) 30%,transparent)}
.verdict.idle{background:var(--idle-soft);color:var(--idle);border-color:var(--line)}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:26px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;box-shadow:var(--shadow)}
.kpi .label{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);font-weight:600}
.kpi .value{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:30px;font-weight:600;line-height:1.15;margin-top:8px;letter-spacing:-.02em}
.kpi .sub{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.kpi.is-good .value{color:var(--good)}
.kpi.is-warn .value{color:var(--warn)}
.kpi.is-crit .value{color:var(--crit)}

h2.sec{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:650;margin:0 0 11px}
section{margin-bottom:30px}

/* serveri */
.servers{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.srv{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 17px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:13px}
.srv.stale{border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
.stale-note{background:var(--warn-soft);color:var(--warn);font-size:12.5px;padding:7px 10px;border-radius:6px}
.srv-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.srv-name{font-weight:620;font-size:15px}
.srv-ip{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.srv-panel{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);background:var(--surface-2);border:1px solid var(--line);padding:2px 7px;border-radius:4px}
.srv-foot{font-size:12.5px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:11px}
.srv-foot .bad{color:var(--crit)}
.metric{display:flex;flex-direction:column;gap:5px}
.metric-top{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px}
.metric-top .k{color:var(--ink-2)}
.metric-top .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600}
.meter{height:7px;background:var(--idle-soft);border-radius:100px;overflow:hidden}
.meter>span{display:block;height:100%;border-radius:100px}
.services{display:flex;flex-wrap:wrap;gap:6px}
.svc{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:550;padding:3px 8px;border-radius:5px;background:var(--good-soft);color:var(--good);border:1px solid color-mix(in srgb,var(--good) 22%,transparent)}
.svc.off{background:var(--crit-soft);color:var(--crit);border-color:color-mix(in srgb,var(--crit) 26%,transparent)}
.svc .d{width:6px;height:6px;border-radius:50%;background:currentColor}

/* tabela */
.tablewrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;min-width:680px}
thead th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:650;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap}
tbody td{padding:11px 14px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
td.site{font-weight:550}
td.mono,th.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px}
td.dim{color:var(--ink-3)}
.ver-old{color:var(--warn);font-weight:600}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:100px;white-space:nowrap}
.chip .d{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.chip.ok{background:var(--good-soft);color:var(--good)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.crit{background:var(--crit-soft);color:var(--crit)}

.all-clear,.empty{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);color:var(--ink-2);font-size:14px}
.empty h2{margin:0 0 8px;font-size:16px;color:var(--ink)}
.empty p{margin:0}

footer{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);color:var(--ink-3);font-size:12.5px;display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between}

/* Identity stranice */
.auth{max-width:400px;margin:8vh auto 0}
.auth h1{font-size:19px;margin:0 0 4px}
.auth .lead{color:var(--ink-3);font-size:13.5px;margin:0 0 22px}
.auth form{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px}
.auth label{font-size:12.5px;font-weight:600;color:var(--ink-2);display:block;margin-bottom:5px}
.auth input[type=text],.auth input[type=email],.auth input[type=password]{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2);color:var(--ink);font:inherit;font-size:14px}
.auth button[type=submit]{background:var(--accent);color:#fff;border:0;border-radius:6px;padding:10px 16px;font:inherit;font-weight:600;font-size:14px;cursor:pointer}
.auth button[type=submit]:hover{filter:brightness(1.08)}
.auth .checkbox{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-2)}
.validation-summary-errors,.field-validation-error,.text-danger{color:var(--crit);font-size:13px}

@media(max-width:560px){
  .wrap{padding:16px 14px 48px}
  .kpi .value{font-size:26px}
}

/* dnevnik */
.feed{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.ev{display:grid;grid-template-columns:84px 1fr;gap:14px;background:var(--surface);padding:12px 15px 12px 12px;border-left:3px solid var(--idle)}
.ev.crit{border-left-color:var(--crit)}
.ev.warn{border-left-color:var(--warn)}
.ev.ok{border-left-color:var(--good)}
.ev time{font-family:var(--mono);font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;padding-top:1px}
.ev .txt{font-size:13.5px}
.ev .txt strong{font-weight:620}
.ev .txt .where{font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}
.ev .txt p{margin:3px 0 0;color:var(--ink-3);font-size:12.5px}
@media(max-width:560px){.ev{grid-template-columns:1fr;gap:4px}}

/* popis svih sajtova */
.allsites summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:10px;user-select:none}
.allsites summary::-webkit-details-marker{display:none}
.allsites summary::before{content:"▸";color:var(--ink-3);font-size:12px;transition:transform .12s}
.allsites[open] summary::before{transform:rotate(90deg)}
.allsites summary:hover .sec{color:var(--accent)}
.allsites .hint{font-size:11.5px;color:var(--ink-3)}
.allsites summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
tr.grouprow td{background:var(--surface-2);font-family:var(--mono);font-size:11.5px;color:var(--ink-3);letter-spacing:.03em;padding:7px 14px;font-weight:600}
tr.grouprow:hover td{background:var(--surface-2)}