/* ============================================================================
   admin.css — админка catamoron.ru (T-010) по DESIGN_SPEC §4, §5.2–§5.5, §6.
   Токены — assets/tokens.css (подключается первым). Инлайн-стилей нет.
   ============================================================================ */

[hidden]{display:none !important}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100vh;
  background:var(--c-bg-app);
  color:var(--c-ink);
  font-family:var(--font-sans);
  font-size:var(--fs-14);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}

.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ============================================================================
   1. ЭКРАН ВХОДА (§5.2): светлый фон + статичные акцентные пятна сверху
   ============================================================================ */
.login-screen{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--sp-8) var(--sp-4);
  background:
    radial-gradient(60vw 45vh at 78% -10%,var(--accent-soft) 0%,rgba(232,241,252,0) 70%),
    radial-gradient(55vw 40vh at 12% 0%,var(--accent-wash) 0%,rgba(245,248,253,0) 72%),
    var(--c-bg-app);
}

.login-card{
  width:100%;
  max-width:var(--w-login);
  padding:var(--sp-6);
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--r-modal);
  box-shadow:var(--sh-login);
}

.login-brand{
  margin:0 0 var(--sp-3);
  font-size:var(--fs-12);
  font-weight:var(--fw-black);
  letter-spacing:.14em;
  color:var(--accent-ink);
}

.login-title{
  margin:0;
  font-size:var(--fs-17);
  font-weight:var(--fw-black);
  line-height:1.25;
  color:var(--c-ink);
}

.login-sub{
  margin:var(--sp-2) 0 var(--sp-5);
  font-size:var(--fs-12);
  color:var(--c-muted);
}

.login-form{display:block}

/* ---------- поля (§4.2) ---------- */
.field{margin-bottom:var(--sp-4)}

.field__label{
  display:block;
  margin-bottom:6px;
  font-size:var(--fs-12);
  font-weight:var(--fw-bold);
  color:var(--c-ink-soft);
}

.input{
  display:block;
  width:100%;
  min-height:var(--tap-min);
  padding:0 var(--sp-3);
  background:var(--c-surface);
  border:1px solid var(--c-line-input);
  border-radius:var(--r-sm);
  color:var(--c-ink);
  font-family:inherit;
  font-size:var(--fs-14);
}

.input::placeholder{color:var(--c-muted)}

.input:hover{border-color:var(--c-line-hover)}

.input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-ring);
}

.input:focus-visible{
  outline:2px solid var(--focus-light);
  outline-offset:2px;
}

.input[aria-invalid="true"]{
  border-color:var(--bad);
  box-shadow:0 0 0 3px var(--bad-soft);
}

.input:disabled{
  background:var(--c-surface-3);
  color:var(--c-muted);
  cursor:not-allowed;
}

.hint{
  margin:0 0 var(--sp-4);
  font-size:var(--fs-11);
  color:var(--c-ink-hint);
}

/* ---------- кнопки (§4.1) ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  min-height:var(--tap-min);
  padding:0 var(--sp-4);
  border:1px solid transparent;
  border-radius:var(--r-sm);
  font-family:inherit;
  font-size:var(--fs-13);
  font-weight:var(--fw-bold);
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  background:var(--c-surface);
  color:var(--c-ink-soft);
  transition:box-shadow var(--dur-base) var(--ease-out),background-color var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}

.btn--primary{
  background:var(--grad-accent);
  color:#ffffff;
  box-shadow:var(--sh-glow);
}

.btn--primary:hover{box-shadow:var(--sh-glow-hover)}

.btn--primary:active{transform:translateY(1px)}

.btn--ghost{
  background:var(--c-surface);
  border-color:var(--c-line);
  color:var(--c-ink-soft);
}

.btn--ghost:hover{
  background:var(--c-surface-2);
  border-color:var(--c-line-hover);
}

.btn--block{width:100%}

.btn:focus-visible{
  outline:2px solid var(--focus-light);
  outline-offset:2px;
}

.btn:disabled{
  background:var(--c-surface-3);
  border-color:var(--c-line);
  color:var(--c-ink-hint);
  box-shadow:none;
  cursor:not-allowed;
  transform:none;
}

/* «сбор идёт»: акцентный фон сохраняется, курсор — progress (§4.1) */
.btn.is-running{
  background:var(--grad-accent);
  color:#ffffff;
  box-shadow:var(--sh-glow);
  cursor:progress;
}

.btn.is-error{
  border-color:var(--bad-line);
  box-shadow:0 0 0 3px var(--bad-soft);
}

.btn .spinner{display:none}
.btn.is-running .spinner,
.btn.is-loading .spinner{display:inline-block}

/* ---------- спиннер (§4.13) ---------- */
.spinner{
  width:14px;
  height:14px;
  border:2px solid rgba(255,255,255,.45);
  border-top-color:#ffffff;
  border-radius:50%;
  animation:spin var(--dur-spin) linear infinite;
  flex:0 0 auto;
}

@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- алерты (§4.8) ---------- */
.alert{
  margin:0 0 var(--sp-4);
  padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  border:1px solid var(--c-line);
  border-left-width:4px;
  border-radius:var(--r-sm);
  font-size:var(--fs-13);
  line-height:1.4;
}

.alert--error{background:var(--bad-soft);border-color:var(--bad-line);border-left-color:var(--bad);color:var(--bad-ink)}
.alert--warn{background:var(--warn-soft);border-color:var(--warn-line);border-left-color:var(--warn);color:var(--warn-ink)}
.alert--info{background:var(--accent-soft);border-color:var(--accent-line);border-left-color:var(--accent);color:var(--accent-ink)}

.link-back{
  display:inline-block;
  margin-top:var(--sp-5);
  padding:var(--sp-2) 0;
  font-size:var(--fs-12);
  color:var(--accent-ink);
  text-decoration:none;
}

.link-back:hover{text-decoration:underline}

.link-back:focus-visible{outline:2px solid var(--focus-light);outline-offset:2px}

/* ============================================================================
   2. ТУЛБАР (§4.6): sticky, переносится, на ≤600 badge-data и легенда скрыты
   ============================================================================ */
.toolbar{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(244,245,247,.94);
  border-bottom:1px solid var(--c-line);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}

.toolbar__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-3);
  min-height:52px;
  padding:var(--sp-2) var(--sp-5);
}

.toolbar__brand{
  margin:0;
  font-size:var(--fs-11);
  font-weight:var(--fw-black);
  letter-spacing:.12em;
  color:var(--c-ink);
  white-space:nowrap;
}

.toolbar__sep{margin:0 var(--sp-2);color:var(--c-line-hover)}

.toolbar__name{color:var(--accent-ink);letter-spacing:.04em}

.badge-data{font-size:var(--fs-11);color:var(--c-muted);white-space:nowrap}

.badge-data .pill{margin-left:var(--sp-2)}

.legend{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-3);
  margin:0;
  padding:0;
  list-style:none;
  font-size:var(--fs-11);
  color:var(--c-ink-hint);
}

.legend li{display:inline-flex;align-items:center;gap:5px}

.dot{
  width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  background:var(--ok);
}

.dot--ok{background:var(--ok)}
.dot--warn{background:var(--warn)}
.dot--bad{background:var(--bad)}

.toolbar__actions{
  display:flex;
  gap:var(--sp-2);
  margin-left:auto;
}

/* постоянный live-регион и блок ошибки сбора — вне перерисовываемой карты */
.live{
  max-width:var(--w-page);
  margin:0 auto;
  padding:0 var(--sp-5);
  font-size:var(--fs-12);
  color:var(--c-ink-hint);
}

.live:not(:empty){padding-top:var(--sp-3);padding-bottom:2px}

.live.is-busy{color:var(--accent-ink)}

.refresh-error{
  max-width:var(--w-page);
  margin:var(--sp-3) auto 0;
  padding:var(--sp-3) var(--sp-4);
  background:var(--bad-soft);
  border:1px solid var(--bad-line);
  border-left:4px solid var(--bad);
  border-radius:var(--r-sm);
  color:var(--bad-ink);
  font-size:var(--fs-13);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

/* ============================================================================
   3. КАРКАС СТРАНИЦЫ
   ============================================================================ */
.wrap{
  max-width:var(--w-page);
  margin:0 auto;
  padding:var(--sp-5) var(--sp-5) var(--sp-12);
}

.page-head{margin-bottom:var(--sp-4)}

.page-title{
  margin:0;
  font-size:var(--fs-22);
  font-weight:var(--fw-black);
  line-height:1.25;
  color:var(--c-ink);
}

.page-title__count{
  margin-left:var(--sp-2);
  font-size:var(--fs-17);
  color:var(--c-ink-hint);
  font-weight:var(--fw-bold);
}

.meta-line{
  margin:var(--sp-1) 0 0;
  font-size:var(--fs-12);
  color:var(--c-ink-hint);
}

.subtitle{
  margin:var(--sp-1) 0 0;
  font-size:var(--fs-12);
  color:var(--c-muted);
}

.section{margin-top:var(--sp-6)}

.section__title{
  margin:0;
  font-size:var(--fs-15);
  font-weight:var(--fw-black);
  color:var(--c-ink);
}

.section__hint{
  display:inline-block;
  margin:2px 0 0 var(--sp-2);
  font-size:var(--fs-11);
  color:var(--c-muted);
}

/* ---------- счётчики (§4.7) ---------- */
.counters{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2);
  margin:var(--sp-4) 0 0;
}

.counters:empty{display:none}

.cnt{
  min-width:96px;
  padding:var(--sp-2) 14px;
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--r-sm);
  box-shadow:var(--sh-panel);
}

.cnt__num{
  display:block;
  font-size:var(--fs-17);
  font-weight:var(--fw-black);
  line-height:1.2;
  color:var(--c-ink);
}

.cnt__label{display:block;font-size:var(--fs-12);color:var(--c-ink-hint)}

.cnt--ok .cnt__num{color:var(--ok-ink)}
.cnt--warn .cnt__num{color:var(--warn-ink)}
.cnt--bad .cnt__num{color:var(--bad-ink)}

/* ---------- пилюли и чипы (§4.3) ---------- */
.pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 10px;
  border-radius:var(--r-pill);
  font-size:var(--fs-11);
  font-weight:var(--fw-bold);
  line-height:1.35;
  white-space:nowrap;
}

.pill--ok{background:var(--grad-ok);color:#ffffff}
.pill--warn{background:var(--grad-warn);color:#ffffff}
.pill--bad{background:var(--bad-soft);color:var(--bad-ink);border:1px dashed var(--bad)}
.pill--neutral{background:var(--neutral);color:var(--neutral-ink);border:1px dashed var(--neutral-line)}

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 8px;
  background:var(--c-surface-3);
  border:1px solid var(--c-line-soft);
  border-radius:var(--r-pill);
  font-size:var(--fs-11);
  color:var(--c-ink-soft);
}

.chip--warn{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn-ink)}
.chip--bad{background:var(--bad-soft);border-color:var(--bad-line);color:var(--bad-ink)}

.mark-manual{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 8px;
  background:var(--neutral);
  border:1px dashed var(--neutral-line);
  border-radius:var(--r-pill);
  font-size:var(--fs-11);
  font-weight:var(--fw-medium);
  color:var(--neutral-ink);
  cursor:help;
}

.muted{color:var(--c-muted)}
.mono{font-family:var(--font-mono);font-size:var(--fs-11)}
.nowrap{white-space:nowrap}

/* ============================================================================
   4. ТОПОЛОГИЯ (§6): схема не сжимается, контейнер скроллится
   ============================================================================ */
.topo-scroll{
  margin-top:var(--sp-3);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  border-radius:var(--r-card);
  background:var(--c-surface);
  /* рамка — тенью, чтобы 1px не отнимал ширину у доски 1120px и не рожал скролл на десктопе */
  box-shadow:0 0 0 1px var(--c-line),var(--sh-card);
}

.board{min-width:var(--topo-min);padding:10px}

.board svg{display:block;width:100%;height:auto}

.node{cursor:pointer}

.node-box{
  fill:var(--c-surface);
  stroke:var(--c-line-soft);
  stroke-width:1.4;
  transition:stroke var(--dur-base) var(--ease-out),stroke-width var(--dur-base) var(--ease-out);
}

.node:hover .node-box,
.node:focus-visible .node-box{
  stroke:var(--accent);
  stroke-width:2;
}

.node:focus{outline:none}

.node:focus-visible .node-box{stroke-width:2.5}

.node--off .node-box{
  fill:#fdf7f7;
  stroke:var(--bad-line);
  stroke-dasharray:6 4;
}

.node__title{
  font-family:var(--font-sans);
  font-size:12.5px;
  font-weight:var(--fw-black);
  fill:var(--c-ink);
}

.node__host{
  font-family:var(--font-mono);
  font-size:11px;
  fill:var(--c-ink-soft);
}

.node__sub{
  font-family:var(--font-sans);
  font-size:10.5px;
  fill:var(--c-ink-hint);
}

.node__pill{
  font-family:var(--font-sans);
  font-size:var(--fs-svg-min);
  font-weight:var(--fw-bold);
  fill:#ffffff;
}

.node__pill--bad{fill:var(--bad-ink)}
.node__pill-bg{fill:var(--ok)}
.node__pill-bg--warn{fill:#8f3b0c}
.node__pill-bg--bad{fill:var(--bad-soft);stroke:var(--bad);stroke-dasharray:3 2;stroke-width:1}

.link{stroke:var(--accent);stroke-width:2;fill:none}
.link--dead{stroke:var(--bad);stroke-dasharray:7 5}
.link-label{
  font-family:var(--font-mono);
  font-size:10.5px;
  fill:var(--c-muted);
}

/* мобильная раскладка-список: включается на ≤640px вместо SVG */
.topo-mobile{display:none;margin-top:var(--sp-3)}

.tm-node{
  position:relative;
  padding:var(--sp-3);
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--r-sm);
  box-shadow:var(--sh-panel);
}

.tm-node + .tm-node{margin-top:var(--sp-5)}

.tm-node + .tm-node::before{
  content:"";
  position:absolute;
  left:22px;
  top:-20px;
  width:0;
  height:16px;
  border-left:2px dashed var(--accent);
}

.tm-node--off + .tm-node::before,
.tm-node--off::before{border-left-color:var(--bad)}

.tm-node__head{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  justify-content:space-between;
}

.tm-node__name{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:var(--fs-13);
  font-weight:var(--fw-black);
  color:var(--c-ink);
}

.tm-node__dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--ok);flex:0 0 auto;
}

.tm-node--off .tm-node__dot{background:transparent;border:1.6px dashed var(--bad)}

.tm-node__meta{
  margin:4px 0 0;
  font-size:var(--fs-11);
  color:var(--c-ink-hint);
}

/* ============================================================================
   5. КАРТОЧКИ СЕРВЕРОВ (§4.5)
   ============================================================================ */
.cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-4);
  margin-top:var(--sp-3);
}

.card{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  padding:var(--sp-4);
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--r-card);
  box-shadow:var(--sh-card);
}

.card--off{
  background:linear-gradient(#ffffff,#fbf6f6);
  border-color:var(--bad-line);
}

.card__head{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-2);
  justify-content:space-between;
}

.card__title{
  margin:0;
  font-size:var(--fs-13);
  font-weight:var(--fw-black);
  color:var(--c-ink);
}

.card__role{
  margin:2px 0 0;
  font-size:var(--fs-11);
  color:var(--c-muted);
}

.kv{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:3px var(--sp-3);
  margin:0;
  font-size:var(--fs-12);
}

.kv dt{color:var(--c-muted);font-weight:var(--fw-medium)}

.kv dd{
  margin:0;
  color:var(--c-ink-soft);
  overflow-wrap:anywhere;
}

.gauges{display:grid;gap:6px}

.gauge{
  display:grid;
  grid-template-columns:52px 1fr 96px;
  align-items:center;
  gap:var(--sp-2);
  font-size:var(--fs-11);
}

.g__name{color:var(--c-muted)}

.bar{
  height:7px;
  background:var(--c-surface-3);
  border-radius:var(--r-pill);
  overflow:hidden;
}

.bar__fill{
  display:block;
  width:0;
  height:100%;
  background:var(--grad-ok);
  border-radius:var(--r-pill);
  transition:width var(--dur-gauge) var(--ease-out);
}

.bar__fill--mid{background:linear-gradient(90deg,#e0a23c,#d9771f)}
.bar__fill--hot{background:linear-gradient(90deg,#d95757,#b23232)}

.g__val{
  font-weight:var(--fw-bold);
  color:var(--c-ink-soft);
  text-align:right;
  white-space:nowrap;
}

.traffic{
  padding:var(--sp-2) var(--sp-3);
  background:var(--c-surface-2);
  border:1px solid var(--c-line-soft);
  border-radius:var(--r-xs);
  font-size:var(--fs-12);
  color:var(--c-ink-soft);
}

.traffic__if{color:var(--c-muted);font-size:var(--fs-11)}

.apptable{
  width:100%;
  border-collapse:collapse;
  font-size:var(--fs-11);
}

.apptable th,
.apptable td{
  padding:4px 6px 4px 0;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--c-line-soft);
}

.apptable th{
  font-weight:var(--fw-bold);
  color:var(--c-muted);
  font-size:var(--fs-11);
}

.apptable td{color:var(--c-ink-soft);overflow-wrap:anywhere}

.apptable tr:last-child td{border-bottom:0}

.apptable .st{font-weight:var(--fw-bold);white-space:nowrap}
.apptable .st--on{color:var(--ok-ink)}
.apptable .st--off{color:var(--c-muted)}
.apptable .st--warn{color:var(--warn-ink)}

.wg{
  padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--c-line-soft);
  border-radius:var(--r-xs);
  font-size:var(--fs-12);
}

.wg__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-2);
  font-weight:var(--fw-bold);
  color:var(--c-ink-soft);
}

.wg__kv{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:2px var(--sp-3);
  margin:var(--sp-2) 0 0;
  font-size:var(--fs-11);
}

.wg__kv dt{color:var(--c-muted)}
.wg__kv dd{margin:0;color:var(--c-ink-soft);overflow-wrap:anywhere}

.wg__note{margin:var(--sp-2) 0 0;font-size:var(--fs-11);color:var(--c-muted)}

.offnote{
  padding:var(--sp-2) var(--sp-3);
  background:#fdf7f7;
  border-radius:var(--r-xs);
  border-left:3px solid var(--bad);
  font-size:var(--fs-11);
  color:var(--bad-ink);
}

.card__foot{margin-top:auto}

.btn--subtle{
  width:100%;
  min-height:36px;
  background:var(--accent-wash);
  border-color:var(--accent-line);
  color:var(--accent-ink);
  font-size:var(--fs-12);
}

.btn--subtle:hover{
  border-color:var(--accent);
  box-shadow:0 4px 12px -6px rgba(47,111,208,.5);
}

/* ---------- алерты карты (§4.8) ---------- */
.alerts{display:grid;gap:var(--sp-2);margin-top:var(--sp-3)}
.alerts:empty{display:none}

.al{
  padding:var(--sp-3) var(--sp-4);
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-left:4px solid var(--accent);
  border-radius:var(--r-sm);
  box-shadow:var(--sh-panel);
  font-size:var(--fs-13);
  color:var(--c-ink-soft);
}

.al--crit{border-left-color:var(--bad)}
.al--warn{border-left-color:var(--warn)}
.al--info{border-left-color:var(--accent)}

.al__where{
  display:block;
  margin-bottom:2px;
  font-size:var(--fs-11);
  font-weight:var(--fw-black);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--c-muted);
}

.al--crit .al__where{color:var(--bad-ink)}
.al--warn .al__where{color:var(--warn-ink)}

/* ---------- ручные пометки (§4.12) ---------- */
.anns{display:grid;gap:var(--sp-2);margin-top:var(--sp-3)}
.anns:empty{display:none}

.ann{
  padding:var(--sp-3) var(--sp-4);
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--r-sm);
  box-shadow:var(--sh-panel);
  font-size:var(--fs-13);
  color:var(--c-ink-soft);
}

.ann__scope{
  display:block;
  margin-bottom:2px;
  font-size:var(--fs-11);
  font-family:var(--font-mono);
  color:var(--c-muted);
}

.ann__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-2);
  margin-top:var(--sp-2);
  font-size:var(--fs-11);
  color:var(--c-muted);
}

/* ---------- пустое состояние (§4.9) ---------- */
.empty{
  margin-top:var(--sp-5);
  padding:var(--sp-8) var(--sp-6);
  background:var(--c-surface);
  border:1px dashed var(--c-line-hover);
  border-radius:var(--r-card);
  text-align:center;
}

.empty__title{margin:0;font-size:var(--fs-15);font-weight:var(--fw-black);color:var(--c-ink)}
.empty__text{max-width:56ch;margin:var(--sp-2) auto var(--sp-4);font-size:var(--fs-13);color:var(--c-ink-hint)}

/* ---------- футер ---------- */
.foot{
  max-width:var(--w-page);
  margin:0 auto;
  padding:0 var(--sp-5) var(--sp-10);
}

.foot__text{margin:0;font-size:var(--fs-11);line-height:var(--lh-loose);color:var(--c-muted)}

/* ============================================================================
   6. МОДАЛКА (§4.10)
   ============================================================================ */
.modal-back{
  position:fixed;
  inset:0;
  z-index:40;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:var(--sp-10) var(--sp-4);
  background:rgba(30,40,60,.45);
  overflow:auto;
}

.modal{
  position:relative;
  width:100%;
  max-width:860px;
  padding:22px var(--sp-6);
  background:var(--c-surface);
  border-radius:var(--r-modal);
  box-shadow:var(--sh-modal);
}

.modal__title{margin:0;font-size:var(--fs-15);font-weight:var(--fw-black);color:var(--c-ink)}

.modal__sub{margin:2px 0 var(--sp-4);font-size:var(--fs-11);color:var(--c-muted)}

.m-close{
  position:absolute;
  top:var(--sp-3);
  right:var(--sp-3);
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:50%;
  color:var(--c-muted);
  font-size:15px;
  line-height:1;
  cursor:pointer;
}

.m-close:hover{color:var(--bad);border-color:var(--bad-line)}

.m-close:focus-visible{outline:2px solid var(--focus-light);outline-offset:2px}

.m-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-4) var(--sp-6);
}

.m-sec h4{
  margin:0 0 var(--sp-2);
  font-size:var(--fs-12);
  font-weight:var(--fw-black);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--c-muted);
}

.m-table{width:100%;border-collapse:collapse;font-size:var(--fs-11)}

.m-table th,
.m-table td{
  padding:4px 6px 4px 0;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid #f0f2f6;
  color:var(--c-ink-soft);
  overflow-wrap:anywhere;
}

.m-table th{color:var(--c-muted);font-weight:var(--fw-bold)}
.m-table tr:last-child td{border-bottom:0}

.m-empty{margin:0;font-size:var(--fs-12);color:var(--c-muted)}

/* ============================================================================
   7. АДАПТИВ (§2.7, §6.4)
   ============================================================================ */
@media (max-width:960px){
  .cards{grid-template-columns:1fr}
  .m-grid{grid-template-columns:1fr}
}

@media (max-width:760px){
  .board{min-width:var(--topo-min)}
}

@media (max-width:640px){
  .toolbar__inner{padding:var(--sp-2) var(--sp-4);row-gap:6px}
  .wrap{padding:var(--sp-4) var(--sp-4) var(--sp-10)}
  .live{padding-left:var(--sp-4);padding-right:var(--sp-4)}
  .topo-scroll{display:none}
  .topo-mobile{display:block}
  .counters{gap:6px}
  .cnt{min-width:0;flex:1 1 calc(50% - 6px)}
  .modal-back{padding:var(--sp-4)}
  .modal{padding:var(--sp-5) var(--sp-4)}
  .foot{padding-left:var(--sp-4);padding-right:var(--sp-4)}
}

@media (max-width:600px){
  .badge-data,
  .legend{display:none}
  .toolbar__actions{margin-left:0;width:100%}
  .toolbar__actions .btn{flex:1 1 0}
}

/* ============================================================================
   8. prefers-reduced-motion (§3.4)
   ============================================================================ */
@media (prefers-reduced-motion: reduce){
  .spinner{
    animation:none;
    border-top-color:rgba(255,255,255,.9);
  }
  .btn,
  .bar__fill,
  .node-box{transition:none}
  .hist-chart svg .hist-line{transition:none}
}

/* ============================================================================
   9. ЭКРАН «ИСТОРИЯ» (T-022): переключатель экранов, фильтры, график, таблица
   ============================================================================ */
.view-switch{
  display:inline-flex;
  align-items:stretch;
  border:1px solid var(--c-line);
  border-radius:var(--r-sm);
  background:var(--c-surface);
  overflow:hidden;
}

.view-switch__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--tap-min);
  padding:0 var(--sp-4);
  border:0;
  background:transparent;
  color:var(--c-ink-soft);
  font-family:inherit;
  font-size:var(--fs-13);
  font-weight:var(--fw-bold);
  line-height:1;
  cursor:pointer;
}

.view-switch__btn + .view-switch__btn{border-left:1px solid var(--c-line)}

.view-switch__btn:hover{background:var(--c-surface-2)}

.view-switch__btn[aria-pressed="true"]{
  background:var(--accent-wash);
  color:var(--accent-ink);
}

.view-switch__btn:focus-visible{
  outline:2px solid var(--focus-light);
  outline-offset:-2px;
}

/* ---------- фильтры ---------- */
.hist-controls{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:var(--sp-3);
  margin-top:var(--sp-4);
}

.hist-field{flex:0 1 200px;min-width:150px}

.hist-field .field__label{margin-bottom:4px}

.hist-select{
  min-height:var(--tap-min);
  padding-right:var(--sp-6);
  background-color:var(--c-surface);
}

.hist-versions{
  margin:0 0 var(--sp-3) auto;
  font-size:var(--fs-11);
  color:var(--c-muted);
}

/* ---------- карточка графика ---------- */
.hist-card{
  position:relative;
  margin-top:var(--sp-3);
  padding:var(--sp-4);
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--r-card);
  box-shadow:var(--sh-card);
}

.hist-status{
  margin:0 0 var(--sp-2);
  min-height:16px;
  font-size:var(--fs-12);
  color:var(--c-ink-hint);
}

.hist-status.is-error{color:var(--bad-ink)}

/* баннер «хранилище недоступно» / ошибка чтения (Д2-F2) */
.hist-status.is-banner{
  margin:var(--sp-2) 0 var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:var(--bad-soft);
  border:1px solid var(--bad-line);
  border-left:4px solid var(--bad);
  border-radius:var(--r-sm);
}

.hist-chart{position:relative}

.hist-card[aria-busy="true"] .hist-chart,
.hist-card.is-stale .hist-chart{opacity:.55}

.hist-chart svg{display:block;overflow:visible}

/* ---------- элементы SVG (цвета — только токены) ---------- */
.hist-grid{
  stroke:var(--c-line-soft);
  stroke-width:1;
  fill:none;
}

.hist-axis{
  fill:var(--c-ink-hint);
  font-family:var(--font-sans);
  font-size:var(--fs-svg-min);
}

.hist-axis--end{text-anchor:end}
.hist-axis--middle{text-anchor:middle}

.hist-line{
  fill:none;
  stroke-width:2;
  stroke-linejoin:round;
  stroke-linecap:round;
}

.hist-line--rx{stroke:var(--accent)}
.hist-line--tx{stroke:var(--accent-2)}

.hist-line--dash1{stroke-dasharray:6 4}
.hist-line--dash2{stroke-dasharray:2 3}

.hist-dot{stroke:var(--c-surface);stroke-width:1}
.hist-dot--rx{fill:var(--accent)}
.hist-dot--tx{fill:var(--accent-2)}

/* ---------- легенда ---------- */
.hist-legend-wrap:empty{display:none}

.hist-legend{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2) var(--sp-4);
  margin:var(--sp-3) 0 0;
  padding:0;
  list-style:none;
  font-size:var(--fs-11);
  color:var(--c-ink-soft);
}

.hist-legend__item{display:inline-flex;align-items:center;gap:6px}

.hist-swatch{
  display:inline-block;
  width:22px;
  height:0;
  border-top:3px solid var(--accent);
}

.hist-swatch--tx{border-top-color:var(--accent-2)}
.hist-swatch--dash1{border-top-style:dashed}
.hist-swatch--dash2{border-top-style:dotted}

.hist-legend__more{color:var(--c-muted)}

.hist-note{
  margin:var(--sp-2) 0 0;
  font-size:var(--fs-11);
  color:var(--c-muted);
}

.hist-note:empty{display:none}

/* ---------- пустое состояние ---------- */
.hist-empty{
  margin-top:var(--sp-3);
  padding:var(--sp-4);
  background:var(--c-surface);
  border:1px dashed var(--c-line-hover);
  border-radius:var(--r-sm);
  text-align:center;
}

.hist-empty__text{
  margin:0 0 var(--sp-3);
  font-size:var(--fs-13);
  color:var(--c-ink-hint);
}

.hist-empty .btn{margin:0 auto}

/* баннер недоступного хранилища (503 / db_unavailable) */
.hist-banner{
  margin-top:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:var(--bad-soft);
  border:1px solid var(--bad-line);
  border-left:4px solid var(--bad);
  border-radius:var(--r-sm);
  color:var(--bad-ink);
  font-size:var(--fs-13);
}

/* ---------- таблица значений (AC 10, она же мобильный эквивалент) ---------- */
.hist-values{margin-top:var(--sp-3)}

.hist-values__summary{
  display:inline-flex;
  align-items:center;
  min-height:var(--tap-min);
  font-size:var(--fs-12);
  font-weight:var(--fw-bold);
  color:var(--accent-ink);
  cursor:pointer;
}

.hist-values__summary:focus-visible{
  outline:2px solid var(--focus-light);
  outline-offset:2px;
}

.hist-table-wrap{
  max-height:240px;
  overflow:auto;
  border:1px solid var(--c-line-soft);
  border-radius:var(--r-xs);
}

.hist-table{
  width:100%;
  border-collapse:collapse;
  font-size:var(--fs-11);
}

.hist-table th,
.hist-table td{
  padding:5px 8px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--c-line-soft);
  color:var(--c-ink-soft);
  white-space:nowrap;
}

.hist-table th{
  position:sticky;
  top:0;
  background:var(--c-surface);
  color:var(--c-muted);
  font-weight:var(--fw-bold);
}

.hist-table td.num{text-align:right;font-variant-numeric:tabular-nums}

.hist-table .hist-table__iface{
  display:block;
  font-family:var(--font-mono);
  color:var(--c-muted);
  font-size:var(--fs-11);
}

.hist-table tr:last-child td{border-bottom:0}

@media (max-width:640px){
  .hist-controls{gap:var(--sp-2)}
  .hist-field{flex:1 1 100%;min-width:0}
  .hist-versions{margin:0}
  .hist-card{padding:var(--sp-3)}
}

/* Табличный режим (< 480 px контента): SVG скрыт, таблица раскрыта (Д1-C-1).
   Класс ставит JS по фактической ширине контейнера — один источник истины для CSS и рендера. */
.hist-card.is-compact .hist-chart{display:none}
.hist-values.is-mobile .hist-values__summary{display:none}
.hist-values.is-mobile .hist-table-wrap{max-height:320px}