:root {
  --bg: #0f1620;
  --panel: #16202c;
  --line: #2b3b4d;
  --text: #e6edf3;
  --dim: #8b9bb4;
  --ok: #4cc38a;
  --warn: #ffd166;
  --alarm: #e0533d;
  --bar: 52px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.35 "Segoe UI", Roboto, Arial, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
}

body { display: flex; flex-direction: column; }

#bar {
  flex: 0 0 var(--bar);
  height: var(--bar);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 20;
}

.brand { font-weight: 600; letter-spacing: .2px; white-space: nowrap; }
.brand span { color: var(--dim); font-weight: 400; }

#screenSel {
  background: #0f1620;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  font: inherit;
  max-width: 42vw;
}

.grow { flex: 1; }

.chip {
  font-size: 12px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--dim);
  white-space: nowrap;
}
.chip.ok { color: var(--ok); border-color: #2c5b47; }
.chip.bad { color: var(--alarm); border-color: #6a2f26; }

.zoom { display: flex; align-items: center; gap: 6px; }
.zoom button {
  background: #0f1620;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 10px;
  font: inherit;
  cursor: pointer;
}
.zoom button:hover { background: #1c2733; }
#zoomVal { color: var(--dim); font-size: 12px; min-width: 44px; text-align: center; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }

/* ПК: масштабирование не нужно — схема вписана в окно, панель зума не показываем */
html.desktop .zoom { display: none; }
html.desktop .stage { cursor: default; }
html.desktop .stage:active { cursor: default; }

.stage {
  flex: 1 1 auto;
  position: relative;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
  cursor: grab;
}
.stage:active { cursor: grabbing; }
.stage canvas { display: block; touch-action: none; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  background: rgba(12, 18, 26, .94);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s;
  z-index: 20;
  max-width: 80vw;
}
.toast.show { opacity: 1; }

@media (max-width: 720px) {
  :root { --bar: 48px; }
  #bar { gap: 6px; padding: 0 8px; }
  .brand { font-size: 13px; }
  .brand span { display: none; }
  #screenSel { max-width: 52vw; font-size: 13px; padding: 5px 6px; }
  .chip { font-size: 11px; padding: 3px 7px; }
  /* зум уводим вниз, чтобы шапка не ломалась на узком экране */
  .zoom {
    position: fixed;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(22, 32, 44, .92);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 4px;
    gap: 4px;
    z-index: 10;
  }
  .zoom button { padding: 5px 9px; }
  #zoomVal { min-width: 38px; font-size: 11px; }
}

/* панель диагностики — долгое нажатие на проценте масштаба */
#diag {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: 76px;
  margin: 0;
  padding: 10px 12px;
  background: rgba(8, 12, 22, .96);
  border: 1px solid #22314a;
  border-radius: 10px;
  color: #cfe0f5;
  font: 12px/1.5 ui-monospace, Consolas, monospace;
  white-space: pre-wrap;
  z-index: 60;
  display: none;
}
#build { color: #4a5b73; font-size: 11px; margin: 0 8px 0 0; -webkit-user-select: none; user-select: none; }
@media (max-width: 720px) { #build { font-size: 10px; margin-right: 4px; } }

/* ---------- команды со схемы (этап 3) ---------- */
button.chip {
  background: transparent;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
button.chip:hover { color: var(--text); border-color: #3d5470; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(6, 10, 15, .62);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.modal.hidden { display: none; }
.modal .box {
  width: min(430px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 18px 14px;
  box-shadow: 0 20px 64px rgba(0, 0, 0, .55);
}
.modal .box.wide { width: min(560px, 100%); }
.modal h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.modal p { margin: 0 0 12px; }
.modal .muted { color: var(--dim); }
.modal .err { color: var(--alarm); }
.modal .error { color: var(--alarm); }
.modal .hidden { display: none; }
.modal .row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
.modal .row.head { justify-content: space-between; align-items: center; margin: 0 0 10px; }
.modal .row.head h3 { margin: 0; }

.btn {
  font: inherit;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 9px;
  border: 1px solid #2f6f52;
  background: #1f7a55;
  color: #fff;
  cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--text); }
.btn.small { padding: 4px 10px; font-size: 12px; }

.jlist { overflow: auto; margin-top: 2px; font-size: 13px; }
.jrow {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 4px 10px;
  padding: 7px 2px;
  border-bottom: 1px solid #1f2a37;
  align-items: baseline;
}
.jrow:last-child { border-bottom: 0; }
.jrow .jt { color: var(--dim); font-variant-numeric: tabular-nums; font-size: 12px; }
.jrow .jn { color: var(--text); }
.jrow .jv { color: var(--text); font-variant-numeric: tabular-nums; }
.jrow .jres { grid-column: 2 / 4; font-size: 12px; color: var(--ok); }
.jrow.bad .jres { color: var(--alarm); }
.jlist .empty { color: var(--dim); padding: 8px 2px; }

@media (max-width: 700px) {
  body.cmd-open .stage { pointer-events: none; }
  .modal .box { padding: 14px 14px 12px; }
  /* шапка на телефоне: убираем второстепенное, журнал — отдельной кнопкой внизу */
  #build { display: none; }
  .brand span { display: none; }
  #bar { gap: 8px; padding: 0 10px; }
  #screenSel { max-width: 40vw; }
  /* на телефоне: связь — точкой, частота данных и кнопки зума не нужны */
  #data { display: none; }
  .zoom #zoomOut, .zoom #zoomVal, .zoom #zoomIn { display: none; }
  #link { width: 24px; padding: 0; font-size: 0; text-align: center; }
  #link::before { content: '●'; font-size: 11px; line-height: 18px; }
  #journal {
    position: fixed;
    left: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    z-index: 10;
    background: rgba(22, 32, 44, .92);
    padding: 5px 10px;
  }
}

/* поле ввода значения в окне команды */
.modal .num {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 6px;
}
.modal .num.hidden { display: none; }
.modal .num input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: #e6edf3;
  background: #0e1720;
  border: 1px solid #2e3d4e;
  border-radius: 10px;
  padding: 10px 12px;
}
.modal .num input:focus { outline: none; border-color: #4aa3e0; }
.modal .num .unit { flex: 0 0 auto; color: #8b9bb4; font-size: 16px; }
.modal .hint { margin: 2px 0 0; color: #8b9bb4; font-size: 12px; }
.modal .hint.hidden { display: none; }
.modal .hint.bad { color: #ff6b5a; }

/* поле ввода: выделение текста читаемо на тёмном */
.modal .num input::selection { background: #26557a; color: #fff; }
.modal .num input::-moz-selection { background: #26557a; color: #fff; }

@media (max-width: 700px) {
  /* телефон: окно выше клавиатуры — прижимаем к верху, поле ввода остаётся видимым */
  .modal { align-items: flex-start; padding-top: 5vh; }
  .modal .box { max-height: 84vh; overflow: auto; }
}
/* ссылка на редактор — только там, где им можно пользоваться */
#edit { text-decoration: none; line-height: 1.1; }
#trend { text-decoration: none; line-height: 1.1; }
@media (max-width: 700px) { #edit { display: none; } }

/* ---------- аварии (этап 5) ---------- */
.alarmchip { cursor: pointer; }
.alarmchip.ok { color: var(--ok); border-color: #2c5b47; }
.alarmchip.warn { color: #1b1405; background: var(--warn); border-color: var(--warn); font-weight: 600; }
.alarmchip.alarm, .alarmchip.crit {
  color: #fff; background: var(--alarm); border-color: var(--alarm); font-weight: 600;
  animation: alarmPulse 2.4s ease-in-out infinite;
}
@keyframes alarmPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 83, 61, .55); }
  50% { box-shadow: 0 0 0 5px rgba(224, 83, 61, 0); }
}

.alarmbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, .35);
  color: #fff;
  background: #7a2a1f;
  z-index: 19;
}
.alarmbar.hidden { display: none; }
.alarmbar.sev-critical { background: linear-gradient(180deg, #a5241a, #7d1a12); }
.alarmbar.sev-alarm { background: linear-gradient(180deg, #8e3226, #6f271d); }
.alarmbar.sev-warning { background: linear-gradient(180deg, #6f5616, #57420f); color: #fff8e1; }
.ab-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.ab-badge {
  flex: 0 0 auto;
  font-size: 10px; font-weight: 700; letter-spacing: .8px;
  padding: 4px 7px; border-radius: 4px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(255, 255, 255, .25);
}
.ab-text { min-width: 0; }
.ab-title {
  font-weight: 600; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ab-sub { font-size: 11px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-right { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.ab-more { font-size: 11px; opacity: .85; cursor: pointer; text-decoration: underline; }
.ab-btn {
  font: inherit; font-size: 12px;
  min-height: 32px; padding: 6px 10px;
  border-radius: 8px; cursor: pointer;
  color: #fff; background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
}
.ab-btn:hover { background: rgba(255, 255, 255, .22); }
.ab-btn.ok { background: #fff; color: #6f271d; font-weight: 600; border-color: #fff; }
.ab-btn.ic { min-width: 34px; padding: 6px 8px; }

/* панель аварий */
.al-who { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.al-who label { font-size: 12px; color: var(--dim); flex: 0 0 auto; }
.al-who input {
  flex: 1; min-width: 0;
  font: inherit; font-size: 13px;
  color: var(--text); background: #0f1620;
  border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px;
}
.al-who input:focus { outline: none; border-color: #4aa3e0; }
.alist { display: flex; flex-direction: column; gap: 8px; max-height: 54vh; overflow: auto; }
.al-card {
  border: 1px solid var(--line);
  border-left: 4px solid var(--alarm);
  border-radius: 8px;
  padding: 9px 11px;
  background: #131c27;
}
.al-card.sev-warning { border-left-color: var(--warn); }
.al-card.sev-info { border-left-color: #4aa3e0; }
.al-card.acked { opacity: .72; }
.al-top { display: flex; align-items: baseline; gap: 8px; }
.al-sev { font-size: 10px; font-weight: 700; letter-spacing: .7px; color: var(--alarm); }
.sev-warning .al-sev { color: var(--warn); }
.al-card.sev-info .al-sev { color: #4aa3e0; }
.al-time { font-size: 11px; color: var(--dim); margin-left: auto; }
.al-text { font-size: 14px; margin: 4px 0 2px; }
.al-meta { font-size: 12px; }
.al-ack { font-size: 12px; color: var(--ok); margin-top: 4px; }
.al-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.al-err { font-size: 11px; color: #ff9c8b; }
.al-empty { padding: 16px 4px; text-align: center; }
.al-empty-t { font-size: 15px; font-weight: 600; margin-bottom: 4px; color: var(--ok); }

@media (max-width: 720px) {
  .alarmbar { padding: 5px 8px; gap: 4px; flex-wrap: wrap; }
  .ab-left { flex: 1 1 100%; }
  .ab-title { white-space: normal; overflow: visible; text-overflow: clip; font-size: 12.5px; }
  .ab-sub { white-space: normal; }
  .ab-right { flex: 1 1 100%; justify-content: flex-end; gap: 5px; }
  .ab-btn { min-height: 34px; font-size: 12.5px; padding: 4px 10px; }
  .ab-btn.ok { flex: 1 1 auto; }
  .alarmchip { font-size: 11px; }
  .alist { max-height: 60vh; }
  .al-text { font-size: 13.5px; }
  .al-row .btn { min-height: 40px; }
}

.hidden { display: none !important; }

/* пользователь в шапке */
.chip.user { cursor: pointer; color: var(--text); border-color: #3a4d63; }
.chip.user:hover { border-color: #4d6a86; }
.popover {
  position: fixed; top: calc(var(--bar) + 6px); right: 12px; z-index: 60;
  display: flex; flex-direction: column; gap: 2px; min-width: 220px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 8px; box-shadow: 0 16px 40px rgba(0,0,0,.5);
}
.popover .who { padding: 8px 10px 10px; border-bottom: 1px solid #1e2a37; margin-bottom: 6px; display: flex; flex-direction: column; gap: 2px; }
.popover .who b { font-size: 14px; }
.popover .who span { color: var(--dim); font-size: 12px; }
.popover button, .popover a {
  display: block; width: 100%; text-align: left; background: transparent; border: 0;
  color: var(--text); font: inherit; padding: 9px 10px; border-radius: 8px; cursor: pointer;
  text-decoration: none;
}
.popover button:hover, .popover a:hover { background: #1c2a38; }
#pw .num input { width: 100%; margin: 8px 0 0; }

/* пользователь в шапке на телефоне: только инициалы */
#me .short { display: none; }
@media (max-width: 700px) {
  #me .full { display: none; }
  #me .short { display: inline; }
  #me { padding: 3px 8px; font-size: 12px; }
  #screenSel { max-width: 34vw; }
}