/* ===== Шрифты (вендорены, лицензия OFL, внешних запросов нет) ===== */
@font-face{font-family:"Plex";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Plex";font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex";font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-cyrillic-600-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Plex";font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-latin-700-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex";font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-cyrillic-700-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"PlexMono";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"PlexMono";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

/* ===== Токены ===== */
:root{
  --chassis:#30343a;      /* фон страницы: холодная сталь */
  --plate:#3d434a;        /* панели */
  --plate-hi:#4a5159;     /* панели при наведении, активные элементы */
  --well:#22262a;         /* утопленные «ячейки»: поля, лог, графики */
  --edge-hi:#5d656e;      /* блик верхней грани */
  --edge-lo:#181b1e;      /* тень нижней грани */
  --ink:#e9e6dc;
  --ink-dim:#a9afb4;
  --ink-faint:#7c848b;
  --green:#62d26f;        /* зелёный провод: норма */
  --red:#ee5a4c;          /* красный провод: авария, выключено */
  --amber:#f5b335;        /* опасная жёлтая полоса: действие, фокус */
  --blue:#6fb1e4;
  --font:"Plex",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"PlexMono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r-panel:5px; --r-ctl:3px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--chassis);color:var(--ink);font:400 15px/1.5 var(--font);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.2;letter-spacing:.005em}
p{margin:0}
a{color:var(--amber);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dim{color:var(--ink-dim)} .faint{color:var(--ink-faint)}
.mono{font-family:var(--mono);font-size:.92em}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.grow{flex:1 1 auto;min-width:0}
.right{margin-left:auto}
[hidden]{display:none!important}

/* ===== Панель: «штампованная сталь» ===== */
.panel{background:var(--plate);border-radius:var(--r-panel);box-shadow:inset 0 1px 0 var(--edge-hi),inset 0 -1px 0 var(--edge-lo),0 1px 0 rgba(0,0,0,.35)}
.panel-body{padding:16px 18px}
.panel-head{display:flex;align-items:center;gap:10px;padding:11px 18px;border-bottom:1px solid var(--edge-lo);box-shadow:0 1px 0 var(--edge-hi) inset}
.panel-head h3{font-size:15px}
.well{background:var(--well);border-radius:var(--r-ctl);box-shadow:inset 0 2px 4px rgba(0,0,0,.45),inset 0 -1px 0 rgba(255,255,255,.05)}

/* ===== Кнопки ===== */
.btn{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:6px 14px;border:0;border-radius:var(--r-ctl);background:var(--plate-hi);color:var(--ink);font-weight:600;cursor:pointer;box-shadow:inset 0 1px 0 var(--edge-hi),0 2px 0 var(--edge-lo);transition:transform .06s,box-shadow .06s,background .12s}
.btn:hover{background:#565e67}
.btn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 var(--edge-hi),0 0 0 var(--edge-lo)}
.btn.primary{background:var(--amber);color:#2a2008;box-shadow:inset 0 1px 0 #ffd57a,0 2px 0 #8a6414}
.btn.primary:hover{background:#ffc24d}
.btn.danger{background:#7d2f29;box-shadow:inset 0 1px 0 #a8453d,0 2px 0 #3c1411}
.btn.danger:hover{background:#963830}
.btn.ghost{background:transparent;box-shadow:none;color:var(--ink-dim)}
.btn.ghost:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.btn.sm{min-height:28px;padding:3px 10px;font-size:13px}
.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn svg{width:15px;height:15px;flex:none}

/* ===== Поля ===== */
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field>label,.field>.lbl{font-size:13px;font-weight:600;color:var(--ink-dim)}
.hint{font-size:12.5px;color:var(--ink-faint)}
input[type=text],input[type=password],input[type=number],input[type=search],input[type=url],select,textarea{width:100%;min-height:36px;padding:7px 10px;border:0;border-radius:var(--r-ctl);background:var(--well);color:var(--ink);box-shadow:inset 0 2px 4px rgba(0,0,0,.45),inset 0 -1px 0 rgba(255,255,255,.06)}
textarea{resize:vertical;min-height:120px;font-family:var(--mono);font-size:13px;line-height:1.5}
select{appearance:none;padding-right:30px;background-image:linear-gradient(45deg,transparent 50%,var(--ink-dim) 50%),linear-gradient(135deg,var(--ink-dim) 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px;background-repeat:no-repeat}
input::placeholder{color:var(--ink-faint)}
input[type=file]{font-size:13px;color:var(--ink-dim)}
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0}
.switch .track{width:38px;height:20px;border-radius:10px;background:var(--well);box-shadow:inset 0 2px 3px rgba(0,0,0,.5);position:relative;transition:background .15s;flex:none}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--ink-dim);transition:transform .15s,background .15s}
.switch input:checked+.track{background:#5a4412}
.switch input:checked+.track::after{transform:translateX(18px);background:var(--amber)}
.switch input:focus-visible+.track{outline:2px solid var(--amber);outline-offset:2px}

/* ===== Лампы состояния ===== */
.lamp{display:inline-block;width:11px;height:11px;border-radius:50%;flex:none;background:#59616a;box-shadow:inset 0 1px 1px rgba(255,255,255,.25),0 0 0 2px var(--edge-lo)}
.lamp.green{background:var(--green);box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 0 0 2px var(--edge-lo),0 0 9px rgba(98,210,111,.65)}
.lamp.red{background:var(--red);box-shadow:inset 0 1px 1px rgba(255,255,255,.4),0 0 0 2px var(--edge-lo),0 0 9px rgba(238,90,76,.6)}
.lamp.amber{background:var(--amber);box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 0 0 2px var(--edge-lo),0 0 9px rgba(245,179,53,.6);animation:blink 1.1s steps(2,jump-none) infinite}
@keyframes blink{50%{opacity:.35}}

/* ===== Мелочи ===== */
.chip{display:inline-flex;align-items:center;gap:6px;padding:1px 9px;border-radius:999px;background:var(--well);font-size:12.5px;color:var(--ink-dim)}
.chip.warn{color:var(--amber)} .chip.bad{color:var(--red)} .chip.ok{color:var(--green)}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:12.5px;font-weight:600;color:var(--ink-faint);padding:8px 12px;border-bottom:1px solid var(--edge-lo)}
.tbl td{padding:9px 12px;border-bottom:1px solid rgba(0,0,0,.22);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:rgba(255,255,255,.025)}
.empty{padding:34px 18px;text-align:center;color:var(--ink-dim)}
.empty strong{display:block;color:var(--ink);margin-bottom:4px}
.bar{height:8px;border-radius:4px;background:var(--well);box-shadow:inset 0 1px 3px rgba(0,0,0,.5);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--green);border-radius:4px;transition:width .5s}
.bar.warn>i{background:var(--amber)} .bar.bad>i{background:var(--red)}
.kbd{font-family:var(--mono);font-size:12px;padding:1px 6px;border-radius:3px;background:var(--well);color:var(--ink-dim)}

/* ===== Уведомления и диалоги ===== */
#toasts{position:fixed;right:16px;bottom:16px;z-index:50;display:flex;flex-direction:column;gap:8px;max-width:min(92vw,380px)}
.toast{padding:10px 14px;border-radius:var(--r-ctl);background:var(--plate-hi);box-shadow:inset 3px 0 0 var(--green),0 6px 18px rgba(0,0,0,.45);animation:toast-in .18s ease-out}
.toast.err{box-shadow:inset 3px 0 0 var(--red),0 6px 18px rgba(0,0,0,.45)}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}}
dialog{border:0;padding:0;border-radius:var(--r-panel);background:var(--plate);color:var(--ink);max-width:min(94vw,560px);width:100%;box-shadow:inset 0 1px 0 var(--edge-hi),0 20px 60px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(10,12,14,.65)}
dialog .panel-head{border-radius:var(--r-panel) var(--r-panel) 0 0}
.dlg-body{padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.dlg-foot{display:flex;gap:10px;justify-content:flex-end;padding:0 18px 16px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}