:root{
  --bg:#0f141a; --panel:#1a222c; --panel2:#222d3a; --line:#2d3a49;
  --fg:#e7edf3; --muted:#93a4b5; --accent:#2f81f7;
  --ok:#1f6f43; --ok-bg:#12351f; --warn:#8a5a00; --warn-bg:#3a2a07;
  --alarm:#8a1f1f; --alarm-bg:#3a1212; --stale:#3a4350;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:16px}
a{color:var(--accent)}
header.top{display:flex;align-items:center;gap:16px;padding:12px 18px;
  background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
header.top h1{font-size:18px;margin:0;font-weight:650}
header.top .spacer{flex:1}
header.top .who{color:var(--muted);font-size:14px}
button,.btn{background:var(--panel2);color:var(--fg);border:1px solid var(--line);
  border-radius:8px;padding:8px 14px;font-size:15px;cursor:pointer}
button:hover,.btn:hover{border-color:var(--accent)}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.active{background:var(--accent);border-color:var(--accent);color:#fff}
.wrap{max-width:1100px;margin:0 auto;padding:18px}
.muted{color:var(--muted)}
.hide{display:none!important}

/* přehled */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.site-h{margin:22px 0 8px;font-size:16px;color:var(--muted);
  border-bottom:1px solid var(--line);padding-bottom:6px;font-weight:600}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;cursor:pointer}
.card:hover{border-color:var(--accent)}
.card .name{font-weight:600;margin-bottom:10px}
.card .readings{display:flex;gap:14px}
.reading{flex:1}
.reading .label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.reading .val{font-size:30px;font-weight:700;line-height:1.1}
.reading .val small{font-size:15px;font-weight:600;color:var(--muted)}
.reading .age{font-size:12px;color:var(--muted);margin-top:2px}
.state-ok .val{color:#6fe39b}
.state-warn .val{color:#ffc24d}
.state-alarm .val{color:#ff7373}
.state-stale .val{color:var(--muted)}
.badge{display:inline-block;font-size:11px;padding:2px 7px;border-radius:999px;margin-left:6px;vertical-align:middle}
.badge.stale{background:var(--stale);color:#cfe0f0}
.badge.alarm{background:var(--alarm);color:#ffdede}
.badge.warn{background:var(--warn);color:#ffeccb}

/* detail / graf */
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0}
.controls select,.controls input[type=datetime-local]{background:var(--panel2);color:var(--fg);
  border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:15px}
.ranges{display:flex;gap:6px;flex-wrap:wrap}
.chart-box{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:8px}
.chart-title{font-size:17px;font-weight:650;margin-bottom:2px}
.chart-sub{color:var(--muted);font-size:13px;margin-bottom:10px}
.statrow{display:flex;gap:22px;margin-top:12px;flex-wrap:wrap}
.statrow .s{font-size:14px}
.statrow .s b{font-size:18px}
#chart{width:100%;height:360px}

/* login */
.login{max-width:340px;margin:12vh auto;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:26px}
.login h2{margin:0 0 4px}
.login p{color:var(--muted);margin:0 0 18px;font-size:14px}
.login input{width:100%;background:var(--panel2);color:var(--fg);border:1px solid var(--line);
  border-radius:8px;padding:11px;font-size:16px;margin-bottom:12px}
.login .err{color:#ff7373;font-size:14px;min-height:20px;margin-bottom:6px}

/* tisk */
.print-only{display:none}
@media print{
  :root{--bg:#fff;--panel:#fff;--panel2:#fff;--fg:#000;--muted:#444;--line:#bbb}
  header.top,.controls,.ranges,.app-nav,button{display:none!important}
  body{background:#fff;color:#000}
  .wrap{max-width:100%;padding:0}
  .chart-box{border:none;padding:0}
  .print-only{display:block;margin-bottom:10px}
  .print-only h2{margin:0 0 2px;font-size:18px}
  .print-only .meta{color:#333;font-size:13px}
  #chart{height:420px}
  .statrow{border-top:1px solid #999;padding-top:10px;margin-top:16px}
}