/* Пульт. Тёмный намеренно: на него смотрят утром и ночью, и он должен читаться
   одинаково и в браузере, и внутри Телеграма, где своей темы у страницы нет. */

:root{
  --bg:#0C1412; --panel:#131E1B; --panel-2:#182523; --line:#23312E;
  --ink:#E9EFED; --ink-2:#A9B7B2; --mute:#75837E;
  --ok:#5FBE8C; --warn:#E0AC4B; --crit:#E9705E; --accent:#5FC0B8;
  --display:"Golos Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono","Cascadia Mono",ui-monospace,Consolas,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--display); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
button{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}

/* ── шапка ─────────────────────────────────────────────────────────────── */
.bar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
  background:var(--panel); border-bottom:1px solid var(--line);
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;transition:background .3s}
.dot.warn{background:var(--warn)} .dot.crit{background:var(--crit)} .dot.stale{background:var(--mute)}
.brand{font-weight:700;font-size:15px;letter-spacing:-.01em}
.brand span{color:var(--accent)}
.when{font-family:var(--mono);font-size:11px;color:var(--mute);margin-left:auto;text-align:right}
.refresh{
  background:transparent;border:1px solid var(--line);border-radius:4px;
  padding:5px 10px;font-size:12px;color:var(--ink-2);flex:none;
}
.refresh:hover{border-color:var(--accent);color:var(--accent)}
.refresh[disabled]{opacity:.5;cursor:default}

main{max-width:1100px;margin:0 auto;padding:0 14px 40px}
.pane{padding-top:22px}
.pane-title{
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--mute);margin:0 0 12px;font-weight:500;display:flex;gap:9px;align-items:baseline;
}
.pane-title b{color:var(--ink-2);font-weight:500;letter-spacing:.06em}

/* ── тревоги ───────────────────────────────────────────────────────────── */
#alerts{display:flex;flex-direction:column;gap:9px}
.alert{
  display:grid;grid-template-columns:3px 1fr;gap:0 13px;
  background:var(--panel);border:1px solid var(--line);border-radius:4px;overflow:hidden;
}
.alert i.stripe{background:var(--crit)}
.alert.warn i.stripe{background:var(--warn)}
.alert .body{padding:12px 12px 12px 0}
.alert .what{font-size:14.5px;font-weight:600;line-height:1.35}
.alert .why{font-size:12.5px;color:var(--ink-2);margin-top:5px;line-height:1.45}
.alert .age{font-family:var(--mono);font-size:10.5px;color:var(--mute);margin-top:6px}

.calm{
  border:1px solid var(--line);border-radius:4px;background:var(--panel);
  padding:18px 14px;text-align:center;color:var(--ink-2);font-size:14px;
}
.calm b{display:block;color:var(--ok);font-size:15px;margin-bottom:3px}

/* ── блоки и проекты ───────────────────────────────────────────────────── */
.block{margin-bottom:16px}
.block-name{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);margin:0 0 7px;display:flex;align-items:center;gap:8px;font-weight:500;
}
.block-name i{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none}
.block-name i.warn{background:var(--warn)} .block-name i.crit{background:var(--crit)}
.block-name i.unknown{background:var(--mute)}

.rows{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--line);
  display:flex;flex-direction:column;gap:1px}

.row{
  background:var(--panel);border:0;width:100%;text-align:left;padding:12px 13px;
  display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:11px;align-items:center;
}
.row:hover,.row[aria-expanded="true"]{background:var(--panel-2)}
.row i.led{width:7px;height:7px;border-radius:50%;background:var(--ok);justify-self:center}
.row.warn i.led{background:var(--warn)} .row.crit i.led{background:var(--crit)}
.row.unknown i.led{background:var(--mute)}
.row .who{min-width:0}
.row .nm{font-weight:600;font-size:14.5px;letter-spacing:-.005em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .sum{font-size:12px;color:var(--ink-2);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .sum .bad{color:var(--crit)} .row .sum .wr{color:var(--warn)}
.spark{display:block;width:64px;height:16px;flex:none}

.detail{background:var(--panel-2);padding:2px 13px 14px}
.detail h4{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);margin:12px 0 8px;font-weight:500;
}
.checks{display:flex;flex-direction:column;gap:6px}
.check{display:flex;align-items:baseline;gap:9px;font-size:12.5px;color:var(--ink-2)}
.check b.mk{font-family:var(--mono);font-size:11px;color:var(--ok);width:12px;flex:none;font-weight:400}
.check.crit b.mk{color:var(--crit)} .check.warn b.mk{color:var(--warn)}
.check.unknown b.mk{color:var(--mute)}
.check .nm{flex:1;min-width:0}
.check .val{font-family:var(--mono);font-size:10.5px;color:var(--mute);
  font-variant-numeric:tabular-nums;text-align:right;flex:none}
.check .why{width:100%;font-size:11.5px;color:var(--mute);padding-left:21px;margin-top:-2px;line-height:1.4}
.note{font-size:12.5px;color:var(--ink-2);line-height:1.5}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  font-family:var(--mono);font-size:10.5px;padding:4px 8px;border-radius:3px;
  border:1px solid var(--line);color:var(--ink-2);background:var(--bg);text-decoration:none;
}
a.chip:hover{border-color:var(--accent);color:var(--accent)}

/* ── лента ─────────────────────────────────────────────────────────────── */
.log{display:flex;flex-direction:column;gap:8px}
.log .ev{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline;font-size:12.5px}
.log time{font-family:var(--mono);font-size:10.5px;color:var(--mute);flex:none}
.log .t{color:var(--ink-2)}
.log .ev.crit .t{color:var(--crit)} .log .ev.warn .t{color:var(--warn)}
.log .ev.up .t{color:var(--ok)}

.foot{
  max-width:1100px;margin:0 auto;padding:20px 14px 30px;
  font-family:var(--mono);font-size:10.5px;color:var(--mute);
  border-top:1px solid var(--line);
}

.err{
  margin:14px;padding:12px 14px;border:1px solid var(--crit);border-radius:4px;
  background:var(--panel);color:var(--crit);font-size:13px;
}

/* заходы */
.traffic{display:flex;flex-direction:column;gap:8px}
.tnums{display:flex;flex-wrap:wrap;gap:0 18px}
.tnum{display:flex;flex-direction:column;gap:1px}
.tnum b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tnum span{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.tbars{display:block;width:100%;max-width:280px;height:auto}
.tnote{font-family:var(--mono);font-size:10px;color:var(--mute)}
.tlists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:4px}
.tlist{display:flex;flex-direction:column;gap:4px}
.trow{display:grid;grid-template-columns:minmax(0,1fr) 46px auto;gap:8px;align-items:center;font-size:11.5px;color:var(--ink-2)}
.trow .tl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trow .tbar{height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.trow .tbar i{display:block;height:100%;background:var(--accent);opacity:.7}
.trow .tv{font-family:var(--mono);font-size:10.5px;color:var(--mute);font-variant-numeric:tabular-nums}
@media (max-width:560px){ .tlists{grid-template-columns:1fr} }

/* сколько проектов кормит провайдер */
.row .eats{font-family:var(--mono);font-size:10px;color:var(--mute);white-space:nowrap}

/* поле для числа, которого провайдер не отдаёт */
.manual{display:flex;gap:6px;margin:8px 0 2px 21px}
.manual input{
  flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:3px;
  color:var(--ink);font-family:var(--mono);font-size:12px;padding:5px 8px;
}
.manual input:focus{border-color:var(--accent);outline:none}
.manual .save{
  background:transparent;border:1px solid var(--line);border-radius:3px;
  color:var(--ink-2);font-size:11.5px;padding:5px 10px;flex:none;
}
.manual .save:hover{border-color:var(--accent);color:var(--accent)}
.manual .save[disabled]{opacity:.5}
a.chip.primary{border-color:var(--accent);color:var(--accent)}

/* На широком экране лента стоит сбоку, остальное — колонкой слева. */
@media (min-width:900px){
  main{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
    grid-template-areas:"attention log" "blocks log" "money log";gap:0 26px;align-items:start}
  #attention-pane{grid-area:attention}
  #blocks-pane{grid-area:blocks}
  #money-pane{grid-area:money}
  #log-pane{grid-area:log;position:sticky;top:60px}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* последние посетители — отметить «это я» */
.vlist{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.vrow{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;font-size:11.5px}
.vrow .vid{font-family:var(--mono);font-size:10.5px;color:var(--mute)}
.vrow .vwhen{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vrow .vme{background:transparent;border:1px solid var(--line);border-radius:3px;
  color:var(--mute);font-size:10.5px;padding:2px 7px;flex:none}
.vrow .vme:hover{border-color:var(--accent);color:var(--accent)}
.vrow .vme.on{border-color:var(--warn);color:var(--warn)}