/* Хаб роутеров — «пульт управления».
   Корпус стойки в молотковой эмали, гравированные подписи, модули с винтами.
   Насыщенный цвет только у индикаторов: так статус читается с первого взгляда. */

/* Шрифты лежат в образе: хаб не зависит от внешних CDN. Лицензия SIL OFL. */
@font-face { font-family: 'Fira Sans Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/fira-sans-condensed-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: 'Fira Sans Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/fira-sans-condensed-cyrillic-400.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Fira Sans Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/fira-sans-condensed-latin-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: 'Fira Sans Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/fira-sans-condensed-cyrillic-500.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Fira Sans Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/fira-sans-condensed-latin-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: 'Fira Sans Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/fira-sans-condensed-cyrillic-600.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/ibm-plex-mono-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/ibm-plex-mono-cyrillic-400.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/ibm-plex-mono-latin-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/ibm-plex-mono-cyrillic-600.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  --enamel: #3e4a45;
  --enamel-deep: #343f3a;
  --plate: #2e3732;
  --plate-edge: #556159;
  --window: #1c2420;
  --engrave: #d5dacf;
  --engrave-muted: #a4ada3;
  --engrave-faint: #7f8a80;
  --alloy: #9aa39c;
  --alloy-light: #c8cfc7;
  --led-green: #8cff6e;
  --led-amber: #ffb23f;
  --led-red: #ff5a45;
  --led-off: #25302a;
  --key: #cfd4c8;
  --key-ink: #1f2622;

  --font-ui: 'Fira Sans Condensed', 'Roboto Condensed', 'Arial Narrow', sans-serif;
  --font-data: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r-module: 6px;
  --r-key: 4px;
  --focus: 0 0 0 2px var(--enamel), 0 0 0 4px var(--led-amber);
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.45;
  color: var(--engrave);
  background-color: var(--enamel);
  /* Молотковая эмаль: два слоя мелкого «рябого» шума поверх ровного цвета. */
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.035) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 60%, rgba(0, 0, 0, 0.08) 0 1px, transparent 1.6px),
    linear-gradient(180deg, #44514b 0%, var(--enamel) 40%, var(--enamel-deep) 100%);
  background-size: 7px 7px, 11px 11px, 100% 100%;
}

button, input, textarea { font: inherit; color: inherit; }

:focus-visible { outline: none; box-shadow: var(--focus); }

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

/* ---------- Мастер-секция ---------- */

.console {
  max-width: 1320px;
  margin: 0 auto;
  padding: var(--s5) var(--s4) var(--s7);
}

.master {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s4) var(--s5);
  align-items: center;
  padding: var(--s4) var(--s5);
  margin-bottom: var(--s5);
  background: var(--plate);
  border: 1px solid var(--plate-edge);
  border-radius: var(--r-module);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 0 rgba(0, 0, 0, 0.35);
}

.master-title {
  margin: 0;
  font-weight: 600;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  /* Гравировка: светлая заливка с тёмной «тенью канавки» сверху. */
  color: var(--engrave);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.05);
}

.master-sub {
  margin: var(--s1) 0 0;
  color: var(--engrave-muted);
  font-size: 0.95rem;
}
.master-sub code { font-family: var(--font-data); font-size: 0.85rem; color: var(--engrave); }

.master-controls { display: flex; gap: var(--s3); align-items: center; justify-content: flex-end; }

.meters {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.04);
}

.meter {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s4) var(--s2) var(--s3);
  background: var(--window);
  border-radius: var(--r-key);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.05);
}
.meter-value {
  font-family: var(--font-data);
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  min-width: 2ch;
  text-align: right;
}
.meter-label { color: var(--engrave-muted); font-size: 0.9rem; }
.meter--online .meter-value { color: var(--led-green); text-shadow: 0 0 10px rgba(140, 255, 110, 0.45); }
.meter--offline .meter-value { color: var(--led-red); text-shadow: 0 0 10px rgba(255, 90, 69, 0.4); }
.meter--never .meter-value { color: var(--led-amber); text-shadow: 0 0 10px rgba(255, 178, 63, 0.4); }
.meter--total .meter-value { color: var(--engrave); }
.meter--updates .meter-value { color: var(--led-amber); text-shadow: 0 0 10px rgba(255, 178, 63, 0.4); }
.meter[hidden] { display: none; }

.search {
  width: min(260px, 100%);
  padding: var(--s2) var(--s3);
  background: var(--window);
  border: 1px solid #111815;
  border-radius: var(--r-key);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.55);
}
.search::placeholder { color: var(--engrave-faint); }

/* ---------- Клавиши ---------- */

.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 40px;
  padding: 0 var(--s4);
  border: 1px solid #0f1512;
  border-radius: var(--r-key);
  background: linear-gradient(180deg, #4b5852, #39443f);
  color: var(--engrave);
  font-weight: 500;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 3px 0 #161d19, 0 4px 6px rgba(0, 0, 0, 0.35);
  transition: transform 80ms ease, box-shadow 80ms ease;
  text-decoration: none;
  white-space: nowrap;
}
.key:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 0 #161d19, 0 1px 2px rgba(0, 0, 0, 0.35);
}
.key:disabled { opacity: 0.45; cursor: not-allowed; }
.key[hidden] { display: none; }

/* Главная клавиша — светлый «колпачок», как пусковая кнопка на панели. */
.key--primary {
  background: linear-gradient(180deg, #e2e6dc, var(--key));
  color: var(--key-ink);
  font-weight: 600;
  border-color: #6f786f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 3px 0 #7c857c, 0 4px 6px rgba(0, 0, 0, 0.35);
}
.key--primary:active:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 0 #7c857c; }

.key--danger { color: #ffd2cb; }
.key--small { min-height: 32px; padding: 0 var(--s3); font-size: 0.9rem; }

/* ---------- Стойка модулей ---------- */

.rack {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--s4);
}

.module {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--s3);
  padding: var(--s5) var(--s4) var(--s4);
  background: linear-gradient(180deg, #36413c, var(--plate));
  border: 1px solid var(--plate-edge);
  border-radius: var(--r-module);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 0 rgba(0, 0, 0, 0.4);
}

/* Четыре винта крепления модуля в стойке. */
.module::before {
  content: '';
  position: absolute;
  inset: 7px;
  pointer-events: none;
  background:
    radial-gradient(circle at 5px 5px, var(--alloy-light) 0 1.5px, var(--alloy) 2px, #4d554f 4px, transparent 4.6px) top left / 10px 10px no-repeat,
    radial-gradient(circle at 5px 5px, var(--alloy-light) 0 1.5px, var(--alloy) 2px, #4d554f 4px, transparent 4.6px) top right / 10px 10px no-repeat,
    radial-gradient(circle at 5px 5px, var(--alloy-light) 0 1.5px, var(--alloy) 2px, #4d554f 4px, transparent 4.6px) bottom left / 10px 10px no-repeat,
    radial-gradient(circle at 5px 5px, var(--alloy-light) 0 1.5px, var(--alloy) 2px, #4d554f 4px, transparent 4.6px) bottom right / 10px 10px no-repeat;
}

.module-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); align-items: center; padding: 0 var(--s2); }

/* Флажок «Обновления» — шильдик на верхней кромке модуля, между винтами. */
.module-flag {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 8px;
  line-height: 16px;
  border: 1px solid rgba(255, 178, 63, 0.55);
  border-radius: var(--r-key);
  color: var(--led-amber);
  font-size: 0.72rem;
  font-weight: 600;
  background: #2e3732;
  white-space: nowrap;
}
.module-flag[hidden] { display: none; }

.module-name {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
}
.module-state { margin: 0; font-size: 0.9rem; color: var(--engrave-muted); }
.module-note { min-height: 1.4em; margin: 0; padding: 0 var(--s2); color: var(--engrave-muted); font-size: 0.92rem; overflow-wrap: anywhere; }

/* ---------- Индикатор ---------- */

.led {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #1a211d;
  background: radial-gradient(circle at 35% 30%, #3a463f, var(--led-off) 70%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.08);
}
.led--online {
  background: radial-gradient(circle at 35% 30%, #eaffdf 0 12%, var(--led-green) 45%, #3faa2c 100%);
  box-shadow: 0 0 6px 1px rgba(140, 255, 110, 0.7), 0 0 18px 4px rgba(140, 255, 110, 0.28), 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: led-breathe 3.2s ease-in-out infinite;
}
.led--offline {
  background: radial-gradient(circle at 35% 30%, #ffe1db 0 12%, var(--led-red) 45%, #a62a1c 100%);
  box-shadow: 0 0 6px 1px rgba(255, 90, 69, 0.6), 0 0 14px 3px rgba(255, 90, 69, 0.2);
}
.led--never {
  background: radial-gradient(circle at 35% 30%, #fff0d6 0 12%, var(--led-amber) 45%, #a8681a 100%);
  box-shadow: 0 0 6px 1px rgba(255, 178, 63, 0.55), 0 0 14px 3px rgba(255, 178, 63, 0.18);
}

.led--small { width: 10px; height: 10px; border-width: 1px; animation: none; }

@keyframes led-breathe {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(0.78); }
}

/* ---------- Окно показаний ---------- */

.readout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s1) var(--s3);
  margin: 0;
  padding: var(--s3);
  background: var(--window);
  border-radius: var(--r-key);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.05);
  font-size: 0.88rem;
}
.readout dt { color: var(--engrave-faint); }
.readout dd {
  margin: 0;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  color: var(--engrave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.module--online .readout dd.handshake { color: var(--led-green); }
.readout dd.is-update { color: var(--led-amber); }
/* Версии длинные (1.0.20250521 → 1.0.20260223): переносим, а не обрезаем. */
.readout dd.v-openwrt,
.readout dd.v-podkop,
.readout dd.v-wireguard { white-space: normal; overflow-wrap: anywhere; }
.readout dd.is-unknown { color: var(--engrave-faint); }

.module-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.module-actions .key--primary { flex: 1 1 100%; }

/* ---------- Пустая стойка и сообщения ---------- */

.empty {
  grid-column: 1 / -1;
  display: grid;
  justify-items: start;
  gap: var(--s3);
  padding: var(--s6) var(--s5);
  border: 2px dashed rgba(0, 0, 0, 0.35);
  border-radius: var(--r-module);
  color: var(--engrave-muted);
}
.empty h2 { margin: 0; color: var(--engrave); font-weight: 600; }
.empty p { margin: 0; max-width: 60ch; }

.notice {
  display: flex;
  gap: var(--s3);
  align-items: center;
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s4);
  background: var(--window);
  border-left: 4px solid var(--led-amber);
  border-radius: var(--r-key);
}
.notice[hidden] { display: none; }
.notice p { margin: 0; flex: 1; }

/* ---------- Диалоги ---------- */

dialog {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 1px solid var(--plate-edge);
  border-radius: var(--r-module);
  background: var(--plate);
  color: var(--engrave);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
dialog::backdrop { background: rgba(12, 16, 14, 0.7); }
dialog[open] { animation: panel-in 160ms ease-out; }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.dialog-body { display: grid; gap: var(--s4); padding: var(--s5); }
.dialog-body h2 { margin: 0; font-size: 1.35rem; font-weight: 600; }
.dialog-body p { margin: 0; color: var(--engrave-muted); }
.dialog-actions { display: flex; gap: var(--s2); justify-content: flex-end; flex-wrap: wrap; }
.dialog-actions--start { justify-content: flex-start; }

.restore {
  display: grid;
  gap: var(--s3);
  padding-top: var(--s4);
  border-top: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.04);
}
.restore h3 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.field input[type='file']::file-selector-button {
  margin-right: var(--s3);
  padding: var(--s1) var(--s3);
  border: 1px solid #0f1512;
  border-radius: var(--r-key);
  background: linear-gradient(180deg, #4b5852, #39443f);
  color: var(--engrave);
  font: inherit;
  cursor: pointer;
}

.field { display: grid; gap: var(--s1); }
.field span { color: var(--engrave-muted); font-size: 0.92rem; }
.field input, .field textarea {
  width: 100%;
  padding: var(--s2) var(--s3);
  background: var(--window);
  border: 1px solid #111815;
  border-radius: var(--r-key);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.55);
}

.script {
  margin: 0;
  max-height: 46vh;
  overflow: auto;
  padding: var(--s3);
  background: var(--window);
  border-radius: var(--r-key);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.65);
  font-family: var(--font-data);
  font-size: 0.8rem;
  line-height: 1.5;
  white-space: pre;
  user-select: all;
}

.error { color: #ffb4a8; margin: 0; }
.error:empty { display: none; }

/* ---------- Вход ---------- */

.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--s4);
}
.login-panel { width: min(400px, 100%); }
.login-panel .module { gap: var(--s4); padding: var(--s6) var(--s5) var(--s5); }
.login-panel .module-head { padding: 0; }

/* ---------- Узкий экран ---------- */

@media (max-width: 720px) {
  .console { padding: var(--s4) var(--s4) var(--s6); }
  .master { grid-template-columns: 1fr; padding: var(--s4); }
  .master-controls { justify-content: stretch; flex-wrap: wrap; }
  .master-controls > * { flex: 1 1 100%; }
  .search { width: 100%; }
  .rack { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .led--online { animation: none; }
  dialog[open] { animation: none; }
  .key { transition: none; }
}