/* ═══════════════════════════════════════════════════════════════
   VENT — канон «СТОЙКА» (DESIGN.md, зафиксирован 28.07.2026)
   Тёмный корпус с рейками, светлые модули-приборы на винтах.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --case:   oklch(0.885 0.004 95);  /* корпус стойки — светлый металл */
  --case2:  oklch(0.935 0.003 95);  /* утопленные клавиши корпуса */
  --case3:  oklch(0.795 0.006 95);  /* края/отверстия крепежа */
  --plate:  oklch(0.955 0.003 95);
  --plate2: oklch(0.978 0.002 95);
  --ink:    oklch(0.235 0.006 95);
  --muted:  oklch(0.475 0.008 95);
  --etch:   oklch(0.845 0.005 95);
  --edge:   oklch(0.80  0.006 95);
  --hot:    oklch(0.545 0.19  40);
  --ok:     oklch(0.50  0.115 155);
  --warn:   oklch(0.505 0.125 72);
  --bad:    oklch(0.505 0.19  27);
  --glass:  oklch(0.145 0.008 265);
  --glass2: oklch(0.205 0.012 265);
  --gink:   oklch(0.93  0.006 265);
  --gmute:  oklch(0.705 0.010 265);
  --ghot:   oklch(0.755 0.155 50);
  --gok:    oklch(0.80  0.11  155);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--case); color: var(--ink);
  font: 14px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* рейки стойки */
body::before, body::after {
  content: ""; position: fixed; top: 10px; bottom: 10px; width: 13px; border-radius: 3px; z-index: 0;
  background: radial-gradient(circle 2.4px at 50% 13px, oklch(0.735 0.006 95) 2.2px, transparent 2.6px) 0 0 / 13px 26px,
              linear-gradient(90deg, oklch(0.945 0.003 95), oklch(0.845 0.005 95));
  box-shadow: inset 0 0 0 1px oklch(0.79 0.006 95);
  pointer-events: none;
}
body::before { left: 9px; } body::after { right: 9px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }

/* ── Шапка корпуса ── */
.rtop {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px;
  padding: 13px 34px 11px; background: linear-gradient(180deg, oklch(0.925 0.003 95), var(--case));
  border-bottom: 1px solid var(--case3);
  box-shadow: 0 1px 0 oklch(1 0 0 / .6) inset, 0 4px 10px oklch(0.4 0.01 95 / .10);
}
.plogo { display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px; border-radius: 4px;
  background: var(--ink); color: oklch(0.96 0.003 95); font-weight: 700; letter-spacing: .2em; font-size: 12px; }
.plogo i { width: 9px; height: 9px; border-radius: 50%; background: var(--hot); }
.rnav { display: flex; gap: 4px; margin-left: 10px; flex-wrap: wrap; }
.nvb {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 640;
  color: var(--muted); padding: 8px 13px; border-radius: 4px; cursor: pointer;
  background: linear-gradient(180deg, oklch(0.975 0.002 95), var(--case2));
  border: 1px solid var(--case3);
  box-shadow: 0 1px 0 oklch(1 0 0 / .7) inset, 0 1px 2px oklch(0.4 0.01 95 / .14);
  transition: background .15s, color .15s;
}
.nvb:hover { color: var(--ink); background: oklch(0.985 0.002 95); }
.nvb.on { background: var(--ink); color: oklch(0.96 0.003 95); border-color: var(--ink);
  box-shadow: inset 0 1px 3px oklch(0 0 0 / .35); }
.rtop .r { margin-left: auto; display: flex; align-items: center; gap: 13px; }
.lamp { display: flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); }
.lamp i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none;
  box-shadow: 0 0 0 3px oklch(0.50 0.115 155 / .25); animation: lampblink 2.4s ease-in-out infinite; }
.lamp.busy i { background: var(--hot); box-shadow: 0 0 0 3px oklch(0.545 0.19 40 / .3); animation-duration: .8s; }
@keyframes lampblink { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }

/* ── Клавиши ── */
.knob {
  font-size: 11px; letter-spacing: .11em; text-transform: uppercase; font-weight: 640;
  padding: 9px 15px; border-radius: 5px; cursor: pointer; color: oklch(0.99 0.002 95);
  border: 1px solid oklch(0.44 0.17 40); background: linear-gradient(180deg, oklch(0.60 0.19 44), var(--hot));
  box-shadow: 0 1px 0 oklch(1 0 0 / .3) inset, 0 2px 4px oklch(0.4 0.05 40 / .3);
  transition: transform .1s, filter .18s;
}
.knob:hover { filter: brightness(1.07); }
.knob:active { transform: translateY(1px); }
.knob.grey { background: linear-gradient(180deg, oklch(0.98 0.002 95), oklch(0.915 0.004 95)); color: var(--ink);
  border-color: oklch(0.78 0.006 95); box-shadow: 0 1px 0 oklch(1 0 0 / .8) inset, 0 1px 2px oklch(0.4 0.01 95 / .18); }
.knob.sm { padding: 6px 11px; font-size: 10px; }
.knob[disabled] { opacity: .55; cursor: not-allowed; }

/* ── Контент ── */
.deck { position: relative; z-index: 1; padding: 6px 34px 46px; max-width: 1440px; margin: 0 auto; }
.page { animation: pageIn .2s ease-out; }
.hidden { display: none !important; }
@keyframes pageIn { from { opacity: 0; transform: translateY(3px) } to { opacity: 1; transform: none } }

.pagebar { display: flex; align-items: center; gap: 14px; padding: 8px 2px 12px; flex-wrap: wrap; }
.pcap { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 640; }
.chips { display: flex; gap: 5px; flex-wrap: wrap; }
.chip {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 640;
  padding: 6px 11px; border-radius: 4px; cursor: pointer; color: var(--muted);
  background: linear-gradient(180deg, oklch(0.975 0.002 95), var(--case2));
  border: 1px solid var(--case3);
  box-shadow: 0 1px 0 oklch(1 0 0 / .7) inset, 0 1px 2px oklch(0.4 0.01 95 / .12);
  transition: background .15s, color .15s;
}
.chip:hover { color: var(--ink); background: oklch(0.985 0.002 95); }
.chip.active { background: var(--ink); color: oklch(0.96 0.003 95); border-color: var(--ink);
  box-shadow: inset 0 1px 3px oklch(0 0 0 / .35); }

/* ── Модуль ── */
.mod { background: var(--plate); border: 1px solid oklch(0.755 0.006 95); border-radius: 7px; position: relative;
  box-shadow: 0 1px 0 oklch(1 0 0 / .8) inset, 0 2px 7px oklch(0.4 0.01 95 / .16); margin-bottom: 13px; }
.scr { position: absolute; width: 9px; height: 9px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 35% 30%, oklch(0.97 0.002 95), oklch(0.66 0.006 95));
  box-shadow: inset 0 0 0 1px oklch(0.55 0.006 95); pointer-events: none; }
.scr::after { content: ""; position: absolute; left: 1.5px; right: 1.5px; top: 50%; height: 1px;
  background: oklch(0.5 0.006 95); transform: rotate(38deg); }
.scr.tl { top: 6px; left: 7px; } .scr.tr { top: 6px; right: 7px; }
.scr.bl { bottom: 6px; left: 7px; } .scr.br { bottom: 6px; right: 7px; }
.mod > header { display: flex; align-items: center; gap: 10px; padding: 9px 26px; border-bottom: 1px solid var(--etch); }
.mod > header h4 { margin: 0; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 680; }
.mod > header .sp { margin-left: auto; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.mod > header span.n { font-size: 10.5px; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.mod .pad { padding: 14px 26px 16px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; align-items: start; }
.duo > .mod { margin-bottom: 0; }
.duo { margin-bottom: 13px; }

/* ── Меры (gauges) и линейка цифр ── */
.gaugerow { display: grid; grid-template-columns: repeat(4, 1fr); }
.gg { padding: 13px 8px 11px; text-align: center; border-right: 1px solid var(--etch); }
.gg:last-child { border-right: 0; }
.gg .cap { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.gg .sub { font-size: 11px; color: var(--muted); margin-top: 3px; }
.gg svg { display: block; margin: 6px auto 2px; }
.gg .tick { stroke: oklch(0.72 0.006 95); }
.gg .tick.hi { stroke: var(--ink); }
.gg .arcbg { fill: none; stroke: oklch(0.875 0.005 95); }
.gg .arc { fill: none; }
.gg .num { font-size: 21px; font-weight: 680; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.gg .unit { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; fill: var(--muted); }
.strip { display: flex; border-top: 1px solid var(--etch); flex-wrap: wrap; }
.strip .cell { flex: 1 1 160px; padding: 10px 26px; border-right: 1px solid var(--etch); }
.strip .cell:last-child { border-right: 0; }
.strip .l { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.strip .v { font-size: 19px; font-weight: 660; font-variant-numeric: tabular-nums; margin-top: 2px; letter-spacing: -.02em; }
.strip .d { font-size: 11px; margin-top: 1px; color: var(--muted); }
.up { color: var(--ok); font-weight: 620; }
.down { color: var(--bad); font-weight: 620; }

/* ── Таблицы ── */
.tscroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.wide { min-width: 680px; }
thead th { text-align: left; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  font-weight: 640; padding: 7px 26px 7px 0; border-bottom: 1px solid var(--edge); white-space: nowrap; }
thead th:first-child, tbody td:first-child { padding-left: 26px; }
tbody td { padding: 6px 26px 6px 0; border-bottom: 1px solid var(--etch); }
tbody tr:nth-child(even) { background: var(--plate2); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: oklch(0.985 0.004 95); }
th.n, td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.dim { color: var(--muted); }
.art { font-weight: 660; letter-spacing: .03em; }
.thumb { width: 30px; height: 30px; border-radius: 4px; object-fit: cover; border: 1px solid var(--etch);
  background: var(--plate2); display: block; }

/* ── Лампы-статусы ── */
.led { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 620; white-space: nowrap; }
.led i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.led.ok { color: var(--ok); } .led.ok i { background: var(--ok); box-shadow: 0 0 0 2.5px oklch(0.50 0.115 155 / .18); }
.led.warn { color: var(--warn); } .led.warn i { background: var(--warn); box-shadow: 0 0 0 2.5px oklch(0.505 0.125 72 / .18); }
.led.bad { color: var(--bad); } .led.bad i { background: var(--bad); box-shadow: 0 0 0 2.5px oklch(0.505 0.19 27 / .2); }

/* ── График ── */
.chart { display: block; }
.chart .cbar { fill: var(--ink); opacity: .88; }
.chart .cbar2 { fill: oklch(0.72 0.006 95); }
.chart .ax { stroke: var(--etch); }
.chart .ax0 { stroke: var(--ink); stroke-width: 1; }
.chart text { fill: var(--muted); font-size: 9.5px; letter-spacing: .03em; }

/* ── Формы ── */
label.fld { display: block; margin-bottom: 13px; }
label.fld span { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 5px; font-weight: 640; }
input[type="text"], input[type="password"] {
  width: 100%; padding: 9px 11px; border-radius: 5px; border: 1px solid var(--edge);
  background: var(--plate2); color: var(--ink); font: 12.5px/1.4 ui-monospace, "JetBrains Mono", Consolas, monospace;
}
input::placeholder { color: oklch(0.62 0.008 95); }
input:focus { outline: none; border-color: var(--hot); box-shadow: 0 0 0 3px oklch(0.545 0.19 40 / .15); }
.hint { color: var(--muted); font-size: 11.5px; margin-top: 7px; }
.hint b { color: var(--ink); font-weight: 620; }

/* инструкция шагами */
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li {
  position: relative; padding: 0 0 12px 32px; margin-bottom: 12px; font-size: 12.5px;
  border-bottom: 1px solid var(--etch); counter-increment: step;
}
.steps li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.steps li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: -1px;
  font-size: 10px; letter-spacing: .08em; font-weight: 680; color: var(--hot);
  border: 1px solid var(--edge); border-radius: 3px; padding: 2px 5px; background: var(--plate2);
}
.steps li b { font-weight: 660; }
.steps .sub { color: var(--muted); font-size: 11.5px; margin-top: 5px; }
.scope {
  display: inline-block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 640;
  padding: 3px 8px; margin: 5px 5px 0 0; border-radius: 3px;
  border: 1px solid var(--edge); background: var(--plate2); color: var(--ink);
}
.empty { color: var(--muted); padding: 24px 26px; font-size: 12.5px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── Пульт FBS ── */
.nvb-badge {
  display: inline-block; margin-left: 7px; padding: 1px 6px; border-radius: 3px;
  background: var(--hot); color: oklch(0.99 0.002 95); font-size: 10px; font-weight: 700;
  letter-spacing: .02em; vertical-align: 1px;
}
.nvb.on .nvb-badge { background: var(--hot); }
.tgl { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 640; }
.tgl input { appearance: none; width: 34px; height: 18px; border-radius: 3px; margin: 0; cursor: pointer;
  background: oklch(0.83 0.005 95); box-shadow: inset 0 1px 3px oklch(0.4 0.01 95 / .3); position: relative;
  transition: background .18s; }
.tgl input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 2px;
  background: linear-gradient(180deg, oklch(1 0 0), oklch(0.93 0.003 95));
  box-shadow: 0 1px 2px oklch(0.3 0.01 95 / .4); transition: transform .18s cubic-bezier(.22,1,.36,1); }
.tgl input:checked { background: var(--hot); }
.tgl input:checked::after { transform: translateX(16px); }

.fbs-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 11px 26px; border-bottom: 1px solid var(--etch); }
.fbs-tools .sel { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.fbs-tools .sel b { color: var(--ink); font-variant-numeric: tabular-nums; }
.fbs-tools .gap { flex: 1; }
.fbs-row td { vertical-align: middle; }
.fbs-row.fresh { background: oklch(0.975 0.020 60) !important; }
.fbs-row.fresh:hover { background: oklch(0.965 0.028 60) !important; }
.fbs-row .ago { font-size: 10.5px; color: var(--muted); }
.fbs-row .ago.late { color: var(--bad); font-weight: 620; }
.chk { appearance: none; width: 15px; height: 15px; border-radius: 3px; margin: 0; cursor: pointer;
  border: 1px solid var(--edge); background: var(--plate2); position: relative; }
.chk:checked { background: var(--hot); border-color: var(--hot); }
.chk:checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border: solid oklch(0.99 0.002 95); border-width: 0 2px 2px 0; transform: rotate(42deg); }
.stpair { display: flex; flex-direction: column; gap: 2px; }
.stpair .wbst { font-size: 10.5px; color: var(--muted); letter-spacing: .04em; }
.supbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 26px; }
.supbar select, .supbar input[type="text"] {
  font: inherit; font-size: 12.5px; padding: 7px 10px; border-radius: 5px; border: 1px solid var(--edge);
  background: var(--plate2); color: var(--ink); font-family: inherit; max-width: 260px;
}

/* ── Печать этикеток ── */
.print-sheet { display: none; }
.print-sheet .lbl { break-inside: avoid; page-break-after: always; display: grid; place-items: center;
  width: 100%; height: 100vh; }
.print-sheet .lbl svg, .print-sheet .lbl img { max-width: 92%; max-height: 92vh; }
@media print {
  body > *:not(.print-sheet) { display: none !important; }
  body::before, body::after { display: none !important; }
  .print-sheet { display: block; }
  @page { margin: 4mm; }
}

/* ── Тосты ── */
.toasts { position: fixed; right: 30px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.toast { background: var(--plate); border: 1px solid oklch(0.755 0.006 95); border-radius: 6px;
  padding: 10px 14px 10px 12px; min-width: 250px; max-width: 400px; display: flex; gap: 10px; align-items: flex-start;
  box-shadow: 0 1px 0 oklch(1 0 0 / .8) inset, 0 5px 16px oklch(0.4 0.01 95 / .22); animation: toastIn .2s ease-out; }
.toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; flex: none;
  background: var(--muted); }
.toast.ok::before { background: var(--ok); box-shadow: 0 0 0 3px oklch(0.50 0.115 155 / .2); }
.toast.err::before { background: var(--bad); box-shadow: 0 0 0 3px oklch(0.505 0.19 27 / .2); }
.toast b { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2px; }
.toast span { color: var(--muted); font-size: 12px; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

/* ── Адаптив ── */
@media (max-width: 1000px) {
  .rtop, .deck { padding-left: 20px; padding-right: 20px; }
  body::before, body::after { display: none; }
  .gaugerow { grid-template-columns: repeat(2, 1fr); }
  .gg:nth-child(2) { border-right: 0; }
  .duo { grid-template-columns: 1fr; }
  .duo > .mod { margin-bottom: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}