/* Сетевая лаборатория. Цвета уровней OSI те же, что на странице модели OSI */

.page--lab{ padding:12px 0 24px; }
.page--lab::before{ display:none; }
.page-wrap--lab{ width:calc(100% - 24px); z-index:auto; }

.lab{ display:flex; flex-direction:column; gap:10px; }
.lab .panel{ border-radius:6px; }
.lab .btn, .lab .input{ border-radius:4px; }
html.lab-noscroll, html.lab-noscroll body{ overflow:hidden; }

/* Полный экран: лаборатория занимает весь экран, без отступов и центрирования */
.lab.lab--full{
  position:fixed; inset:0; z-index:5000;
  background:var(--bg);
  padding:8px;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:8px;
}
.lab--full .lab-stage{ height:100%; min-height:0; }

/* ===== Тулбар ===== */
.lab-toolbar{ display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; padding:8px 10px; }
.lab-group{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.lab-group--end{ margin-left:auto; }
.lab-group__label{ font-family:var(--mono); font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-right:2px; }
.lab-add{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line); background:var(--bg); color:var(--text);
  border-radius:4px; padding:5px 10px 5px 6px;
  font:inherit; font-size:12px; font-weight:600; cursor:pointer;
  transition:border-color .16s ease, background .16s ease;
}
.lab-add:hover{ border-color:#55556a; }
.lab-seg-ctl button, .lab-btn{
  border:1px solid var(--line); background:var(--bg); color:var(--text-2);
  border-radius:4px; padding:6px 11px;
  font:inherit; font-size:12px; font-weight:600; cursor:pointer;
  transition:border-color .16s ease, color .16s ease, background .16s ease;
}
.lab-seg-ctl button:hover, .lab-btn:hover{ border-color:var(--accent); color:var(--accent); }
.lab-seg-ctl button.active{ background:#26262f; border-color:#55556a; color:var(--text); }
.lab-btn--icon{ display:inline-flex; align-items:center; justify-content:center; padding:6px 8px; color:var(--text-2); }
.lab-btn--icon:hover{ color:var(--text); border-color:#55556a; }
.lab-select{
  background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:4px;
  padding:6px 8px; font:inherit; font-size:12px; outline:none; max-width:240px;
}
.lab-select:focus{ border-color:var(--green); }

/* ===== Холст ===== */
.lab-stage{
  position:relative;
  height:calc(100vh - var(--header-h) - 76px);
  min-height:460px;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
}
.lab-svg{ display:block; width:100%; height:100%; touch-action:none; user-select:none; cursor:grab; }
.lab-svg:active{ cursor:grabbing; }
.lab-stage[data-tool="link"] .lab-svg{ cursor:crosshair; }
.lab-stage[data-tool="delete"] .lab-svg{ cursor:not-allowed; }

.lab-link__hit{ stroke:transparent; stroke-width:16; cursor:pointer; }
.lab-link__line{ stroke-width:2.5; stroke-linecap:round; transition:stroke-width .16s ease; pointer-events:none; }
.lab-link:hover .lab-link__line{ stroke-width:4; }
.lab-link.is-down .lab-link__line{ stroke-dasharray:4 6; }
.lab-link.is-sel .lab-link__line{ stroke-width:4; }
.lab-link.is-busy .lab-link__line, .lab-link.is-flash .lab-link__line{ stroke-width:4; }
.lab-link.is-flash .lab-link__line{ stroke:var(--text) !important; }
.lab-stage[data-tool="delete"] .lab-link:hover .lab-link__line{ stroke:var(--danger) !important; }
.lab-port{
  font-family:var(--mono); font-size:9.5px; fill:var(--text-2);
  paint-order:stroke; stroke:var(--panel-2); stroke-width:4px; stroke-linejoin:round;
  pointer-events:none;
}
.lab-port.is-down{ fill:var(--danger); }
.lab-stage:not([data-view="l1"]) .lab-port:not(.is-key){ display:none; }
.lab-stage:not([data-view="l1"]) .lab-link:hover .lab-port,
.lab-stage:not([data-view="l1"]) .lab-link.is-near .lab-port,
.lab-stage:not([data-view="l1"]) .lab-link.is-sel .lab-port{ display:inline; }
.lab-stage[data-view="l1"] .lab-port{ font-size:8.5px; fill:#8a8ca0; }
.lab-preview{ stroke:#8a8ca0; stroke-width:2; stroke-dasharray:4 4; pointer-events:none; }
.lab-preview.is-ok{ stroke:var(--green); stroke-dasharray:none; }
.lab-stage.is-wiring .lab-svg{ cursor:crosshair; }

.lab-node{ cursor:pointer; }
.lab-node__halo{ fill:transparent; stroke:transparent; stroke-width:1.5; transition:fill .16s ease, stroke .16s ease; }
.lab-node:hover .lab-node__halo{ fill:rgba(255,255,255,.03); stroke:#3a3a48; }
.lab-node.is-sel .lab-node__halo{ fill:rgba(255,255,255,.03); stroke:#8a8ca0; }
.lab-node.is-from .lab-node__halo{ fill:rgba(97,209,173,.08); stroke:var(--green); stroke-dasharray:5 4; }
.lab-stage[data-tool="delete"] .lab-node:hover .lab-node__halo{ stroke:var(--danger); fill:rgba(255,143,143,.06); }
.lab-node.is-ok .lab-node__halo{ stroke:var(--green); }
.lab-node.is-err .lab-node__halo{ stroke:var(--danger); }
.lab-node__name{ font-family:var(--sans); font-size:12px; font-weight:700; fill:var(--text); paint-order:stroke; stroke:var(--panel-2); stroke-width:4px; }
.lab-node__sub{ font-family:var(--mono); font-size:9.5px; fill:var(--muted); paint-order:stroke; stroke:var(--panel-2); stroke-width:4px; }
.lab-node__sub.is-err{ fill:var(--danger); }
.lab-node__svc{ font-family:var(--mono); font-size:8.5px; font-weight:700; fill:var(--muted); paint-order:stroke; stroke:var(--panel-2); stroke-width:3px; }
.lab-link-del{ cursor:pointer; }
.lab-link-del rect{ fill:#1b1b22; stroke:#55556a; stroke-width:1; }
.lab-link-del path{ stroke:var(--text-2); stroke-width:1.6; stroke-linecap:round; }
.lab-link-del:hover rect{ fill:#c42b1c; stroke:#c42b1c; }
.lab-link-del:hover path{ stroke:#fff; }
.lab-node__plug{ opacity:0; transition:opacity .12s ease; cursor:crosshair; }
.lab-node:hover .lab-node__plug, .lab-node.is-sel .lab-node__plug{ opacity:1; }
.lab-stage.is-wiring .lab-node__plug{ opacity:0; }
.lab-node__plug-hit{ fill:transparent; }
.lab-node__plug-dot{ fill:#1e1e25; stroke:var(--green); stroke-width:1.6; }
.lab-node__plug:hover .lab-node__plug-dot{ fill:var(--green); }
@media (hover: none){ .lab-node.is-sel .lab-node__plug{ opacity:1; } }
.lab-seg{ opacity:.18; transition:opacity .25s ease; }
.lab-seg.is-in{ opacity:.45; }
.lab-seg.is-on{ opacity:1; animation:labSeg .9s ease; }
@keyframes labSeg{ 0%{ opacity:.45; } 15%{ opacity:1; } 100%{ opacity:1; } }

.lab-pk{ pointer-events:none; }
.lab-pill rect{ filter:none; }
.lab-pill text{ font-family:var(--mono); font-size:9.5px; font-weight:700; fill:#151518; }

.lab-hint{
  position:absolute; left:50%; top:10px; transform:translateX(-50%); z-index:4;
  font-size:12px; color:var(--text-2); line-height:1.45;
  background:rgba(21,21,24,.82); border:1px solid var(--line-2); border-radius:4px;
  padding:6px 10px; pointer-events:none; width:max-content; max-width:min(520px, calc(100% - 140px));
}
.lab-hint.is-ok{ color:var(--text); }
.lab-hint.is-err{ color:var(--danger); }
.lab-legend{
  position:absolute; left:10px; bottom:10px;
  max-width:min(320px, calc(100% - 20px)); z-index:2;
  background:rgba(21,21,24,.8); border:1px solid var(--line-2); border-radius:4px;
  padding:5px 8px; font-size:11px; color:var(--text-2); line-height:1.45; pointer-events:none;
}
.lab-legend__title{ font-family:var(--mono); font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:3px; }
.lab-legend__row{ display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; }
.lab-legend__row i{ width:14px; height:4px; border-radius:2px; flex:0 0 auto; }
.lab-legend__note{ color:var(--muted); font-size:11px; margin-top:3px; }

/* ===== Кнопки на холсте, меню, всплывающие панели ===== */
.lab-ctl{ position:absolute; right:10px; bottom:10px; display:flex; gap:4px; z-index:3; }
.lab-ctl__btn{
  min-width:30px; height:30px; padding:0 8px; border-radius:4px; border:1px solid var(--line);
  background:rgba(21,21,24,.9); color:var(--text-2); font:inherit; font-size:14px; cursor:pointer;
}
.lab-ctl__btn--text{ font-size:12px; font-weight:600; padding:0 11px; }
.lab-ctl__btn:hover, .lab-ctl__btn.active{ border-color:#55556a; color:var(--text); }
.lab-info-btn{ position:absolute; right:10px; top:10px; z-index:3; }

.lab-pop{
  position:absolute; right:10px; top:48px; z-index:30;
  width:min(380px, calc(100% - 20px)); max-height:calc(100% - 100px); overflow:auto;
  background:#1b1b22; border:1px solid var(--line); border-radius:6px;
  box-shadow:0 18px 40px rgba(0,0,0,.45); padding:12px 14px;
  display:flex; flex-direction:column; gap:12px;
  scrollbar-width:thin; scrollbar-color:#3a3a48 transparent;
}
.lab-pop[hidden]{ display:none; }
.lab-info__sec{ display:flex; flex-direction:column; gap:6px; }
.lab-info__sec + .lab-info__sec{ border-top:1px solid #2a2a34; padding-top:10px; }
.lab-info__sec p{ margin:0; font-size:12.5px; color:var(--text-2); line-height:1.55; }
.lab-info__sec .btn{ align-self:flex-start; font-family:var(--mono); font-size:12px; padding:6px 12px; }
.lab-info__label{ font-family:var(--mono); font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.lab-info__stat{ font-family:var(--mono); font-size:11px; color:var(--muted); }
.lab-help{ margin:0; padding-left:16px; font-size:12px; color:var(--text-2); line-height:1.55; }
.lab-help li + li{ margin-top:4px; }
.lab-help b{ color:var(--text); }

.lab-menu{
  position:absolute; z-index:40; min-width:180px;
  background:#1b1b22; border:1px solid var(--line); border-radius:4px;
  box-shadow:0 14px 30px rgba(0,0,0,.45); padding:4px;
}
.lab-menu[hidden]{ display:none; }
.lab-menu__title{ padding:5px 10px 6px; font-family:var(--mono); font-size:10.5px; color:var(--muted); border-bottom:1px solid #2a2a34; margin-bottom:3px; }
.lab-menu__item{ display:block; width:100%; text-align:left; border:none; background:transparent; color:var(--text); border-radius:3px; padding:6px 10px; font:inherit; font-size:12.5px; cursor:pointer; }
.lab-menu__item:hover{ background:#26262f; }
.lab-menu__item.is-danger{ color:var(--danger); }
.lab-menu__sep{ height:1px; background:#2a2a34; margin:3px 0; }
.lab-menu__note{ padding:5px 10px; font-size:11.5px; color:var(--muted); }

.lab-maps__head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.lab-maps__head span{ font-family:var(--mono); font-size:11px; color:var(--muted); }
.lab-maps__row{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.lab-maps__row .input{ flex:1 1 160px; padding:7px 10px; font-size:12.5px; }
.lab-maps__row .btn{ padding:7px 12px; font-size:12px; text-decoration:none; }
.lab-maps__cur{ display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12.5px; color:var(--text-2); }
.lab-maps__cur .btn{ padding:6px 12px; font-size:12px; }
.lab-maps__err{ margin:0; font-size:12px; color:var(--danger); line-height:1.5; }
.lab-maps__list{ display:flex; flex-direction:column; border:1px solid #2a2a34; border-radius:4px; }
.lab-maps__item{ display:flex; align-items:stretch; border-bottom:1px solid #2a2a34; }
.lab-maps__item:last-child{ border-bottom:none; }
.lab-maps__item.is-cur{ box-shadow:inset 2px 0 0 var(--accent); }
.lab-maps__open{ flex:1; min-width:0; text-align:left; border:none; background:transparent; color:var(--text); padding:7px 10px; font:inherit; cursor:pointer; }
.lab-maps__open:hover{ background:#22222b; }
.lab-maps__open b{ display:block; font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lab-maps__open small{ display:block; font-family:var(--mono); font-size:10.5px; color:var(--muted); }
.lab-maps__act{ width:32px; border:none; border-left:1px solid #2a2a34; background:transparent; color:var(--muted); font-size:13px; cursor:pointer; }
.lab-maps__act:hover{ color:var(--text); background:#22222b; }
.lab-maps__act.is-danger:hover{ color:var(--danger); }
.lab-maps button:disabled{ opacity:.5; cursor:default; }

/* Плашка статуса симуляции */
.lab-chip{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:3;
  display:flex; align-items:center; gap:10px;
  background:rgba(27,27,34,.95); border:1px solid var(--line); border-radius:4px;
  padding:6px 8px 6px 12px; font-size:12px; color:var(--text-2); white-space:nowrap; max-width:calc(100% - 230px);
  overflow:hidden; text-overflow:ellipsis;
}
.lab-chip[hidden]{ display:none; }
.lab-chip.is-ok{ color:var(--green); }
.lab-chip.is-err{ color:var(--danger); }
.lab-chip button{ border:1px solid #3a3a48; background:transparent; color:var(--text-2); border-radius:3px; padding:2px 8px; font:inherit; font-size:11.5px; cursor:pointer; }
.lab-chip button:hover{ color:var(--text); border-color:#55556a; }
.lab-chip__dot{ width:6px; height:6px; border-radius:50%; background:var(--green); animation:chipDot 1s ease-in-out infinite; }
@keyframes chipDot{ 50%{ opacity:.25; } }

/* Журнал: выезжает снизу поверх холста */
.lab-dock{
  position:absolute; left:0; right:0; bottom:0; z-index:20;
  height:min(42%, 380px); min-height:140px;
  display:flex; flex-direction:column;
  background:rgba(24,24,30,.98); border-top:1px solid var(--line);
  box-shadow:0 -14px 30px rgba(0,0,0,.35);
}
.lab-dock[hidden]{ display:none; }
.lab-dock__grip{ height:6px; cursor:ns-resize; flex:0 0 auto; touch-action:none; }
.lab-dock__grip:hover{ background:#2a2a35; }
.lab-dock__head{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:2px 10px 8px; border-bottom:1px solid #2a2a34; }
.lab-dock__head > b{ font-size:12.5px; margin-right:6px; }
.lab-dock__head .lab-btn{ padding:5px 10px; }
.lab-dst{ width:200px; padding:5px 9px; font-family:var(--mono); font-size:12px; }
.lab-dock__close{ margin-left:auto; border:none; background:transparent; color:var(--muted); font-size:14px; cursor:pointer; padding:4px 6px; }
.lab-dock__close:hover{ color:var(--text); }
.lab-dock__body{ flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
.lab-dock .lab-log{ height:auto; border:none; border-right:1px solid #2a2a34; border-radius:0; background:transparent; }
.lab-dock .lab-pdu{ min-height:0; overflow:auto; padding:8px 10px; }
.lab-btn--quiet{ color:var(--muted); }
.lab-empty{ margin:0; font-size:12px; color:var(--muted); line-height:1.5; }

/* ===== Окна устройств ===== */
/* Слой окон фиксирован на всё окно браузера: окно можно поднять над холстом до шапки */
.lab-windows{ position:fixed; inset:0; pointer-events:none; z-index:1500; }
.lw{
  position:absolute;
  min-width:300px; min-height:200px;
  max-width:calc(100vw - 8px); max-height:calc(100vh - 8px);
  display:flex; flex-direction:column;
  background:#18181d;
  border:1px solid #3a3a48;
  border-radius:6px;
  box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4);
  overflow:hidden;
  resize:both;
  pointer-events:auto;
  animation:lwIn .18s ease both;
}
@keyframes lwIn{ from{ opacity:0; transform:translateY(8px) scale(.985); } to{ opacity:1; transform:none; } }
.lw.is-front{ border-color:#4c4c60; }
.lw.is-max{ left:8px !important; top:8px !important; width:calc(100vw - 16px) !important; height:calc(100vh - 16px) !important; resize:none; }
.lw.is-min{ height:auto !important; min-height:0; resize:none; }
.lw.is-min .lw__body{ display:none; }
.lw__bar{
  display:flex; align-items:center; gap:10px;
  padding:0 0 0 12px; min-height:38px; background:#202027; border-bottom:1px solid #2e2e3a;
  cursor:move; user-select:none; touch-action:none;
}
/* Кнопки окна справа, как в Windows */
.lw__ctls{ display:flex; align-self:stretch; flex:0 0 auto; margin-left:2px; }
.lw__ctl{
  width:46px; border:none; background:transparent; color:var(--text-2);
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
}
.lw__ctl:hover{ background:#2c2c37; color:var(--text); }
.lw__ctl--close:hover{ background:#c42b1c; color:#fff; }
.lw__title{ flex:1; min-width:0; font-family:var(--mono); font-size:12px; color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
.lw__tabs{ display:flex; gap:2px; background:#151518; border:1px solid #2e2e3a; border-radius:4px; padding:2px; flex:0 0 auto; }
.lw__tab{
  border:none; background:transparent; color:var(--muted);
  border-radius:3px; padding:4px 10px; font:inherit; font-size:11.5px; font-weight:600; cursor:pointer;
}
.lw__tab:hover{ color:var(--text); }
.lw__tab.active{ background:#2a2a35; color:var(--text); }
.lw__body{ flex:1; min-height:0; overflow:auto; position:relative; scrollbar-width:thin; scrollbar-color:#3a3a48 transparent; }
.wtoast{
  position:absolute; right:14px; bottom:14px;
  background:#1d1d24; color:var(--text); border:1px solid #3a3a48;
  border-radius:4px; padding:7px 12px; font-size:12px; pointer-events:none;
  animation:lwIn .18s ease both;
}

/* ===== Диагностика ===== */
.wdiag{ display:flex; flex-direction:column; gap:10px; height:100%; padding:12px; box-sizing:border-box; }
.wdiag .wrow{ flex-wrap:wrap; }
.wdiag__in{ flex:1 1 180px; min-width:140px; }
.wdiag__out{
  flex:1; min-height:120px; overflow:auto;
  padding:10px 12px; background:#0f0f13; border:1px solid #2e2e3a; border-radius:3px;
  font-family:var(--mono); font-size:12px; line-height:1.6; color:#d6d9e0;
  scrollbar-width:thin; scrollbar-color:#3a3a48 transparent;
}
.wdiag__line{ white-space:pre-wrap; word-break:break-word; }
.wdiag__line.is-cmd{ color:var(--text); margin-top:8px; }
.wdiag__line.is-cmd:first-child{ margin-top:0; }
.wdiag__line.is-cmd::before{ content:'> '; color:var(--muted); }
.wdiag__line.is-ok{ color:#61d1ad; }
.wdiag__line.is-err{ color:#e06c6c; }
.wdiag__line.is-dim{ color:#6f7385; }
.wdiag__out .wempty{ margin:0; }

/* ===== Веб-админка ===== */
.wurl{
  display:flex; align-items:center; gap:8px;
  margin:8px 10px 0; padding:5px 10px;
  background:#111114; border:1px solid #2e2e3a; border-radius:3px;
  font-family:var(--mono); font-size:11px; color:var(--text-2);
}
.wurl__lock{ color:var(--green); }
.wa{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:0; min-height:calc(100% - 40px); }
.wa__nav{ display:flex; flex-direction:column; gap:2px; padding:10px 8px; border-right:1px solid #2a2a34; }
.wa__brand{ font-family:var(--mono); font-size:12px; font-weight:700; color:var(--text); padding:4px 8px 10px; }
.wa__name{
  display:block; width:100%; margin-top:4px; padding:3px 6px; margin-left:-6px;
  background:transparent; border:1px solid transparent; border-radius:3px;
  color:var(--text-2); font-family:var(--mono); font-size:11px; font-weight:400; outline:none;
}
.wa__name:hover{ border-color:#33333f; }
.wa__name:focus{ border-color:var(--green); background:#121216; color:var(--text); }
.wa__link{
  text-align:left; border:none; background:transparent; color:var(--text-2);
  border-radius:3px; padding:7px 10px; font:inherit; font-size:12.5px; cursor:pointer;
}
.wa__link:hover{ background:#22222b; color:var(--text); }
.wa__link.active{ background:#26262f; color:var(--text); font-weight:600; box-shadow:inset 2px 0 0 var(--accent); }
.wa__page{ padding:12px 16px 18px; display:flex; flex-direction:column; gap:12px; min-width:0; }
.wa__h{ margin:0; font-size:16px; }

.wstats{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.wstats div{ background:#1f1f27; border:1px solid #2e2e3a; border-radius:5px; padding:10px 12px; }
.wstats b{ display:block; font-size:20px; font-family:var(--mono); color:var(--text); }
.wstats span{ font-size:11px; color:var(--muted); }

.wcard{ background:#1d1d24; border:1px solid #2e2e3a; border-radius:5px; padding:10px 12px; display:flex; flex-direction:column; gap:10px; }
.wcard.is-off{ opacity:.82; }
.wcard__head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.wcard__head b{ font-family:var(--mono); font-size:13px; }
.wcard__sub{ font-size:11.5px; color:var(--muted); flex:1; min-width:0; }
.wgrid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px 10px; }
.wgrid--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.wrow{ display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; }
.wrow > .wf__in{ flex:1 1 120px; width:auto; }
.wrow--end{ justify-content:flex-end; align-items:center; }
.wrow--end .wf__err{ flex:1; }
.wf{ display:flex; flex-direction:column; gap:4px; min-width:0; flex:1 1 140px; }
.wf__label{ font-size:11px; color:var(--muted); font-weight:600; }
.wf__help{ font-size:10.5px; color:#6f7385; }
.wf__in{
  width:100%; background:#121216; border:1px solid #33333f; border-radius:3px;
  padding:7px 9px; color:var(--text); font-family:var(--mono); font-size:12px; outline:none;
}
.wf__in:focus{ border-color:var(--green); box-shadow:0 0 0 3px rgba(97,209,173,.12); }
.wf__mask{ font-size:11.5px; }
.wf__area{ resize:vertical; min-height:70px; font-family:var(--sans); font-size:13px; line-height:1.5; }
.wf__err{ font-size:11.5px; color:var(--danger); }
.wf__err:empty{ display:none; }
.wbtn{
  border:1px solid #3a3a48; background:#22222b; color:var(--text);
  border-radius:3px; padding:7px 12px; font:inherit; font-size:12px; font-weight:600; cursor:pointer;
  transition:border-color .16s ease, background .16s ease, color .16s ease; white-space:nowrap;
}
.wbtn:hover{ border-color:var(--accent); color:var(--accent); }
.wbtn:disabled{ opacity:.6; cursor:default; }
.wbtn--primary{ background:var(--accent); border-color:transparent; color:#151518; }
.wbtn--primary:hover{ background:#ffd65c; color:#151518; border-color:transparent; }
.wnote{ margin:0; font-size:11.5px; color:var(--muted); line-height:1.55; }
.wempty{ margin:0; font-size:12px; color:var(--muted); line-height:1.5; }
.wsub{ font-family:var(--mono); font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-top:4px; }

.wtable{ width:100%; border-collapse:collapse; font-size:12px; }
.wtable th{ text-align:left; font-family:var(--mono); font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; font-weight:500; padding:5px 8px; border-bottom:1px solid #2e2e3a; }
.wtable td{ padding:6px 8px; border-bottom:1px solid #26262f; color:var(--text-2); font-family:var(--mono); font-size:11.5px; }
.wtable td b{ color:var(--text); font-weight:600; }
.wtable td small{ color:var(--muted); font-family:var(--sans); }
.wtable tr:last-child td{ border-bottom:none; }
.wtable tr.is-bad td{ color:var(--danger); }
.wtable code{ color:var(--text); }
.wcode{ display:inline-block; width:20px; text-align:center; border-radius:4px; font-weight:700; }
.wcode--C{ color:var(--text-2); border:1px solid #33333f; }
.wcode--S{ color:var(--text); border:1px solid #4a4a5c; }
.wx{ border:none; background:none; color:var(--muted); font-size:16px; cursor:pointer; padding:0 4px; }
.wx:hover{ color:var(--danger); }
.wpill{ font-family:var(--mono); font-size:10px; border-radius:3px; padding:1px 8px; border:1px solid; }
.wpill--ok{ color:var(--green); border-color:#33333f; }
.wpill--off{ color:var(--danger); border-color:#33333f; }
.wpill--dim{ color:var(--muted); border-color:#33333f; }
.wvlan{ display:inline-block; min-width:28px; text-align:center; border-radius:3px; padding:0 6px; border:1px solid #33333f; border-left:2px solid var(--vc); color:var(--text); }

.wtoggle{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-size:11.5px; color:var(--text-2); margin-left:auto; }
.wtoggle input{ position:absolute; opacity:0; width:0; height:0; }
.wtoggle__track{ position:relative; width:34px; height:19px; border-radius:3px; background:#33333f; transition:background .16s ease; flex:0 0 auto; }
.wtoggle__track span{ position:absolute; left:2px; top:2px; width:14px; height:14px; border-radius:2px; background:#d6d9e0; transition:transform .16s ease; }
.wtoggle input:checked + .wtoggle__track{ background:#4f9c84; }
.wtoggle input:checked + .wtoggle__track span{ transform:translateX(14px); background:#fff; }
.wtoggle input:focus-visible + .wtoggle__track{ box-shadow:0 0 0 3px rgba(97,209,173,.3); }

/* Лицевая панель коммутатора */
.wface-wrap{ background:#101014; border:1px solid #2e2e3a; border-radius:5px; padding:10px 12px; display:flex; align-items:center; gap:14px; overflow-x:auto; }
.wface__label{ font-family:var(--mono); font-size:11px; color:var(--muted); writing-mode:vertical-rl; transform:rotate(180deg); }
.wface{ display:flex; gap:6px; }
.wport{
  position:relative; width:44px; height:46px; flex:0 0 auto;
  border:1px solid #3a3a48; background:#1b1b22; color:var(--text-2);
  border-radius:3px; padding:0; cursor:pointer; font:inherit;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  border-bottom:2px solid var(--vc);
}
.wport:hover{ border-color:#5a5a6e; border-bottom-color:var(--vc); }
.wport.active{ outline:2px solid var(--accent); outline-offset:2px; }
.wport__led{ position:absolute; top:5px; right:5px; width:6px; height:6px; border-radius:50%; background:#3a3a48; }
.wport.is-up .wport__led{ background:#61d1ad; }
.wport.is-down .wport__led{ background:#e06c6c; }
.wport__num{ font-family:var(--mono); font-size:13px; font-weight:700; color:var(--text); }
.wport__vlan{ font-family:var(--mono); font-size:9px; color:var(--muted); }

/* Параметры сети ПК */
.wos{ padding:14px 16px 18px; display:flex; flex-direction:column; gap:12px; }
.wos__head{ display:flex; align-items:center; gap:12px; }
.wos__head b{ display:block; font-size:14px; }
.wos__head small{ display:block; font-size:11.5px; color:var(--muted); font-family:var(--mono); }
.wos__ico{ width:38px; height:38px; border-radius:5px; display:flex; align-items:center; justify-content:center; background:var(--panel-2); border:1px solid #33333f; color:var(--text-2); font-size:18px; flex:0 0 auto; }
.wseg{ display:inline-flex; background:#121216; border:1px solid #2e2e3a; border-radius:4px; padding:3px; gap:3px; align-self:flex-start; }
.wseg button{ border:none; background:transparent; color:var(--text-2); border-radius:3px; padding:6px 12px; font:inherit; font-size:12px; font-weight:600; cursor:pointer; }
.wseg button.active{ background:#2a2a35; color:var(--text); }
.wlease{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.wlease div{ background:#1f1f27; border:1px solid #2e2e3a; border-radius:4px; padding:8px 10px; }
.wlease span{ display:block; font-size:10.5px; color:var(--muted); }
.wlease b{ font-family:var(--mono); font-size:12.5px; }
.wdetails summary{ cursor:pointer; font-size:12px; color:var(--text-2); }
.wdetails[open] summary{ margin-bottom:6px; }

/* Службы сервера */
.wsvc-list{ padding:12px 14px 16px; display:flex; flex-direction:column; gap:10px; }
.wsvc{ background:#1d1d24; border:1px solid #2e2e3a; border-left:2px solid #3a3a48; border-radius:5px; padding:10px 12px; display:flex; flex-direction:column; gap:10px; }
.wsvc.is-on{ border-left-color:var(--green); }
.wsvc__head{ display:flex; align-items:center; gap:10px; }
.wsvc__head b{ display:block; font-size:14px; }
.wsvc__head small{ display:block; font-size:11px; color:var(--muted); font-family:var(--mono); }
.wsvc > div:last-child{ display:flex; flex-direction:column; gap:8px; }

/* Браузер */
.wbr{ display:flex; flex-direction:column; height:100%; }
.wbr__bar{ display:flex; align-items:center; gap:6px; padding:8px 10px; background:#202027; border-bottom:1px solid #2e2e3a; }
.wbr__nav{ width:28px; height:28px; border-radius:50%; border:none; background:transparent; color:var(--text-2); font-size:15px; cursor:pointer; }
.wbr__nav:hover{ background:#2a2a35; color:var(--text); }
.wbr__url{
  flex:1; min-width:0; background:#121216; border:1px solid #33333f; border-radius:3px;
  padding:6px 14px; color:var(--text); font-family:var(--mono); font-size:12px; outline:none;
}
.wbr__url:focus{ border-color:var(--green); }
.wbr__view{ flex:1; min-height:0; overflow:auto; background:#f6f6f2; color:#1d1d22; }
.wbr__blank{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:20px; text-align:center; color:#55576a; }
.wbr__blank b{ color:#1d1d22; font-size:15px; }
.wbr__blank p{ margin:0; max-width:380px; font-size:13px; line-height:1.55; }
.wbr__spin{ width:26px; height:26px; border-radius:50%; border:3px solid #d9d9e0; border-top-color:#5aa7ff; animation:wspin .8s linear infinite; }
@keyframes wspin{ to{ transform:rotate(360deg); } }
.wbr__page{ max-width:640px; margin:0 auto; padding:28px 26px; font-family:Georgia, 'Times New Roman', serif; }
.wbr__page h1{ margin:0 0 14px; font-size:28px; line-height:1.2; font-family:var(--sans); }
.wbr__page p{ margin:0 0 10px; font-size:15px; line-height:1.65; }
.wbr__page footer{ margin-top:24px; padding-top:10px; border-top:1px solid #d9d9e0; font-family:var(--mono); font-size:11px; color:#77798a; }
.wbr__error{ padding:40px 28px; max-width:520px; font-family:var(--sans); }
.wbr__sad{ font-size:44px; color:#9a9cab; margin-bottom:10px; }
.wbr__error h2{ margin:0 0 8px; font-size:20px; }
.wbr__error p{ margin:0 0 12px; font-size:13.5px; color:#55576a; line-height:1.55; }
.wbr__error code{ font-family:var(--mono); font-size:11.5px; color:#77798a; }

.lab-log{
  height:280px; overflow:auto; border:1px solid var(--line-2); border-radius:4px; background:var(--panel-2);
  padding:4px; scrollbar-width:thin; scrollbar-color:#3a3a48 transparent;
}
.lab-log__row{
  display:grid; grid-template-columns:24px 40px minmax(0,1fr); gap:6px; align-items:baseline;
  padding:4px 6px; border-radius:3px; font-size:12px; line-height:1.45; color:var(--text-2);
  animation:labRow .25s ease both;
}
@keyframes labRow{ from{ opacity:0; transform:translateY(3px); } to{ opacity:1; transform:none; } }
.lab-log__row b{ color:var(--text); font-weight:600; }
.lab-log__tick{ font-family:var(--mono); font-size:10px; color:#5d5f70; text-align:right; }
.lab-log__layer{ font-family:var(--mono); font-size:10px; font-weight:700; color:var(--lc); }
.lab-log__kind{ font-family:var(--mono); font-size:9.5px; font-weight:700; color:var(--kc); text-align:left; }
.lab-log__row.is-hop, .lab-log__row.is-click{ cursor:pointer; }
.lab-log__row.is-hop:hover, .lab-log__row.is-click:hover{ background:rgba(255,255,255,.04); }
.lab-log__row.is-picked{ background:rgba(255,255,255,.05); box-shadow:inset 2px 0 0 var(--text-2); }
.lab-log__row.is-dim{ color:#6a6c7e; }
.lab-log__row.is-dim b{ color:#8a8c9c; }
.lab-log__row.is-ok{ color:var(--green); }
.lab-log__row.is-err{ color:var(--danger); }
.lab-log__row.is-head{ display:block; font-family:var(--mono); font-size:11px; color:var(--accent); border-bottom:1px solid var(--line-2); border-radius:0; margin-bottom:2px; }
.lab-log__row.is-sum{ display:block; font-weight:700; border-top:1px solid var(--line-2); border-radius:0; margin-top:2px; }

.lab-pdu{ min-height:280px; }
.lab-pdu__where{ font-family:var(--mono); font-size:11px; color:var(--muted); margin-bottom:8px; }
.lab-pdu__box{
  border:1px solid #2e2e3a;
  border-left:2px solid var(--lc);
  background:rgba(255,255,255,.015);
  border-radius:3px; padding:8px 10px 10px;
  display:flex; flex-direction:column; gap:6px;
  animation:labRow .25s ease both;
}
.lab-pdu__box .lab-pdu__box{ margin-top:2px; }
.lab-pdu__head{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:var(--text); }
.lab-pdu__head span{ font-family:var(--mono); font-size:10px; color:var(--lc); }
.lab-pdu__fields{ width:100%; border-collapse:collapse; font-size:11.5px; }
.lab-pdu__fields th{ text-align:left; color:var(--muted); font-weight:500; padding:2px 8px 2px 0; width:44%; vertical-align:top; }
.lab-pdu__fields td{ font-family:var(--mono); color:var(--text); padding:2px 0; word-break:break-all; }
.lab-pdu__note{ margin:0; font-size:11px; color:var(--muted); line-height:1.5; }
.lab-pdu__bits{ font-family:var(--mono); font-size:10.5px; color:var(--muted); }

/* ===== Адаптив ===== */
@media (max-width: 1200px){
  .lab-add__t{ display:none; }
  .lab-add{ padding:5px 7px; }
}
@media (max-width: 1100px){
  .lab-dock__body{ grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) minmax(0,1fr); }
  .lab-dock .lab-log{ border-right:none; border-bottom:1px solid #2a2a34; }
}
@media (max-width: 720px){
  .page-wrap--lab{ width:calc(100% - 16px); }
  .lab-stage{ height:66vh; min-height:380px; }
  .lab-group--end{ margin-left:0; }
  .lab-hint{ top:10px; max-width:calc(100% - 20px); font-size:11px; }
  .lab-legend{ bottom:48px; }
  .lab-dst{ width:auto; flex:1 1 120px; }
  .lab-dock{ height:55%; }
  .lab-chip{ max-width:calc(100% - 20px); bottom:50px; }
  .lw{ left:4px !important; top:4px !important; width:calc(100vw - 8px) !important; height:calc(100vh - 8px) !important; resize:none; }
  .lw__ctl{ width:40px; }
  .lw__bar{ flex-wrap:wrap; }
  .lw__title{ text-align:left; }
  .wa{ grid-template-columns:1fr; }
  .wa__nav{ flex-direction:row; flex-wrap:wrap; border-right:none; border-bottom:1px solid #2a2a34; }
  .wa__brand{ display:none; }
  .wgrid, .wgrid--2, .wlease, .wstats{ grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .lab-log__row, .lab-pdu__box, .lw, .wtoast{ animation:none; }
}