.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* вход */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { width: 100%; max-width: 360px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; padding: 28px 22px; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.login-card h1 { margin: 4px 0 0; font-size: 22px; }
.login-card p { margin: 0 0 6px; }
.login-card img { border-radius: 14px; }
.linkbtn { background: none; border: 0; color: var(--accent); font: inherit; font-size: 14px; cursor: pointer; padding: 6px; text-decoration: underline; }
.login-card .sub { max-width: 30em; }
.input { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); font: inherit; }
.input:focus-visible, .btn:focus-visible, .icon-btn:focus-visible, .tile:focus-visible, .tabs button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; }
.input.code { text-align: center; font-size: 22px; letter-spacing: .15em; font-weight: 700; text-transform: uppercase; }
.btn.wide { width: 100%; }
.err { color: var(--crit); min-height: 1.2em; font-size: 13px; }

/* вкладки */
.tabs { display: flex; gap: 6px; padding: 10px 12px 0; max-width: 1100px; margin: 0 auto; }
.tabs button { flex: 1; padding: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer; }
.tabs button.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* плитки */
.site-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 8px 2px; }
.site-head h2 { margin: 0; flex: 1; min-width: 0; }
.site-head { align-items: center; }
.site-toggle { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 6px 4px 6px 0;
  font: inherit; font-size: 18px; font-weight: 700; color: var(--text); cursor: pointer; text-align: left; max-width: 100%; }
.site-toggle:focus-visible, .evg-h:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.site-title { overflow: hidden; text-overflow: ellipsis; }
.chev { display: inline-block; transition: transform .15s; color: var(--muted); font-size: 14px; width: 14px; flex: none; }
.group.closed .chev, .evg.closed > .evg-h .chev { transform: rotate(-90deg); }
.group.closed .site-body { display: none; }
.group.closed { margin-bottom: 4px; }
.site-sum { white-space: nowrap; }
.site-toggle .dot, .evg-h .dot { width: 10px; height: 10px; flex: none; }
.gw { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.gw i { width: 8px; height: 8px; border-radius: 50%; background: var(--nodata); display: inline-block; }
.gw.on i { background: var(--ok); }
.tile .top { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.tile .top svg { width: 18px; height: 18px; flex: none; }
.tile .tsub { color: var(--muted); font-size: 12.5px; margin-top: 4px; min-height: 1.2em; }
.tile.lost { border-left-color: var(--nodata); opacity: .8; }
.tile.lost .val { color: var(--muted); font-size: 20px; }
.tile .val.txt { font-size: 22px; }
.tile.crit .tsub, .tile.warn .tsub { color: inherit; }

/* общий вид индикаторов */
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); }
.dot.crit { background: var(--crit); } .dot.lost, .dot.nodata { background: var(--nodata); }

/* оборудование: несколько датчиков одного устройства */
.eq { border: 1px solid var(--line); border-left: 4px solid var(--ok); border-radius: 14px; padding: 10px;
  margin-bottom: 12px; background: var(--panel-2); }
.eq.warn { border-left-color: var(--warn); } .eq.crit { border-left-color: var(--crit); }
.eq.lost, .eq.nodata { border-left-color: var(--nodata); }
.eq-head { display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; flex-wrap: wrap; }
.eq-head b { font-size: 15px; }
.eq-head .sub { margin-left: auto; }
.eq-other { margin: 4px 0 8px 2px; }

/* фильтры событий */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.fld { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 150px; font-size: 12px; color: var(--muted); }
.fld .input { padding: 10px 12px; }
.evb { flex: 1; min-width: 0; }
.locs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.loc { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--muted); }
.loc.e { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }

/* события */
.events { display: flex; flex-direction: column; gap: 6px; }
.ev { display: flex; gap: 10px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.ev .dot { margin-top: 6px; }
.ev .dot.ok { background: var(--ok); } .ev .dot.warn { background: var(--warn); }
.ev .dot.crit { background: var(--crit); } .ev .dot.lost { background: var(--nodata); }
.ev .t { font-weight: 600; } .ev .when { margin-left: auto; white-space: nowrap; }
.empty { color: var(--muted); text-align: center; padding: 40px 12px; }
.banner.lost { border-color: var(--nodata); }
.banner.lost .dot { background: var(--nodata); }

/* владелец */
.admin-bar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.admin-bar .input { flex: 1; min-width: 180px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 14px; }
.card h3 { margin: 0 0 2px; font-size: 17px; }
.card .meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 6px 0 10px; }
.chip { font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--panel-2); border: 1px solid var(--line);
  padding: 4px 8px; border-radius: 8px; cursor: pointer; color: var(--text); }
.site { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.srow { display: grid; grid-template-columns: 14px 1fr auto auto auto; gap: 10px; align-items: center; padding: 6px 0; }
.srow .dot { width: 10px; height: 10px; }
.srow .dot.ok { background: var(--ok); } .srow .dot.warn { background: var(--warn); }
.srow .dot.crit { background: var(--crit); } .srow .dot.lost, .srow .dot.nodata { background: var(--nodata); }
.x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 16px; padding: 6px; }
.x:hover { color: var(--crit); }
.x[data-edit]:hover { color: var(--accent); }
details.add { margin-top: 8px; }
details.add summary { cursor: pointer; color: var(--accent); font-weight: 600; padding: 6px 0; }
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 8px; }
.form .full { grid-column: 1 / -1; }
.form label { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
.rowh { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rowh .sub { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.acts { display: flex; align-items: center; }
.eqt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.eqbox { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; margin: 10px 0; background: var(--panel-2); }
.editf { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin: 6px 0; }
.eqbox .editf { background: var(--panel); }
.form .check { flex-direction: row; align-items: center; gap: 8px; color: var(--text); font-size: 13px; }
.form .check input { width: 18px; height: 18px; flex: none; }
.actions { display: flex; gap: 8px; }
.form:is([data-kind=door], [data-kind=power], [data-kind=meter], [data-kind=leak], [data-kind=alarm], [data-kind=state], [data-kind=enum]) .thr { display: none; }
.form:is([data-kind=door], [data-kind=power], [data-kind=leak], [data-kind=alarm], [data-kind=state], [data-kind=enum]) .dvd { display: none; }
pre.how { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px; overflow: auto;
  font-size: 12px; margin: 8px 0 0; white-space: pre-wrap; word-break: break-all; }

/* события клиента: группы объект → оборудование */
.evg { margin-bottom: 10px; }
.evg-h { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; font: inherit; color: var(--text); cursor: pointer; text-align: left; }
.evg-h b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.evg-h .sub { white-space: nowrap; }
.evg-b { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.evg.closed > .evg-b { display: none; }
.evg.d1 { margin: 2px 0 0 14px; }
.evg.d1 > .evg-h { background: var(--panel-2); padding: 8px 10px; font-size: 14px; }

/* очистка событий и таблица «по датчикам» */
.evtools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.evtools:empty { display: none; }
.evtools .seg { margin-right: auto; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg button { border: 0; background: var(--panel); color: var(--muted); padding: 8px 12px; font: inherit; font-weight: 600; cursor: pointer; }
.seg button.on { background: var(--accent); color: #fff; }
.btn.danger { background: var(--crit); border-color: var(--crit); color: #fff; }
.btn.danger.ghost { background: transparent; color: var(--crit); }
.btn:disabled { opacity: .5; cursor: default; }
.evg-hw { display: flex; align-items: center; gap: 6px; }
.evg-hw .evg-h { flex: 1; min-width: 0; width: auto; }
.ev-ck { display: flex; align-items: center; padding: 4px; cursor: pointer; flex: none; }
.ev-ck input { width: 20px; height: 20px; accent-color: var(--accent); }
.ev.picked, .evtab tr.picked { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.ev .ck-wrap { flex: none; }
.evtab-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.evtab { width: 100%; border-collapse: collapse; font-size: 13px; }
.evtab th { text-align: left; font-size: 12px; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; position: sticky; top: 0; background: var(--panel); }
.evtab td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; min-width: 110px; }
.evtab td.when { white-space: nowrap; min-width: 0; }
.evtab td.ck, .evtab th.ck { min-width: 0; width: 1%; padding-right: 0; }
.evtab tr:last-child td { border-bottom: 0; }
.evtab td.c .t { font-weight: 600; }
.evtab td.c.crit { border-left: 3px solid var(--crit); } .evtab td.c.warn { border-left: 3px solid var(--warn); }
.evtab td.c.lost { border-left: 3px solid var(--nodata); } .evtab td.c.ok { border-left: 3px solid var(--ok); }
.row .actions { align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.row .check { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.row .check input { width: 18px; height: 18px; }

/* мнемосхема */
.sheet.wide { max-width: 1100px; width: 96vw; max-height: 94vh; overflow: auto; }
.sch-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.sch-bar .input { width: auto; min-width: 180px; flex: 1; max-width: 320px; }
.sch-bar label.btn { display: inline-flex; align-items: center; cursor: pointer; }
.sch-hint { margin-bottom: 8px; }
.btn.sm { padding: 6px 10px; font-size: 13px; }
.scrow { padding: 4px 0; }
.sch { position: relative; }
.sch-zoom { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.sch-pct { min-width: 44px; }
.sch-scroll { overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.sch-stage { position: relative; margin: 0 auto; width: 100%; line-height: 0; }
.sch-stage.hidden { display: none; }
.sch-img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.sch-pts { position: absolute; inset: 0; }
.sch-msg { padding: 24px 12px; text-align: center; }
/* плашка датчика: шрифт растёт и сжимается вместе со схемой (--sw — ширина схемы в px) */
.sp { position: absolute; transform: translate(-50%, -50%); box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  padding: .25em .6em; border-radius: .7em; border: 2px solid var(--ok); background: color-mix(in srgb, var(--ok) 14%, #fff);
  color: #14202e; font-size: clamp(9px, calc(var(--sw, 600) * .0165px), 22px); white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: default; }
.sp.sized { padding: 0 .3em; }
.sp-in { display: flex; flex-direction: column; align-items: center; line-height: 1.2; max-width: 100%; }
.sp.sized .sp-in { max-width: none; }
.sp-name { font-size: .82em; opacity: .85; max-width: 14em; overflow: hidden; text-overflow: ellipsis; }
.sp.sized .sp-name { max-width: none; overflow: visible; }
.sp-name.hidden { display: none; }
.sp-val { font-weight: 700; font-size: 1.05em; }
.sp.s-pill { border-radius: 999px; }
.sp.s-pill .sp-in { flex-direction: row; gap: .5em; align-items: baseline; }
.sp.s-circle { border-radius: 50%; padding: 0; }
.sp.s-value { background: transparent !important; border-color: transparent !important; box-shadow: none; animation: none;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 6px #fff; }
.sp.s-value.ok { color: #0d6b34; }
.sp.s-value.warn { color: #8a5a00; }
.sp.s-value.crit { color: #b3141c; }
.sp.s-value.lost, .sp.s-value.nodata, .sp.s-value.missing { color: #55606d; }
.sp.warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 22%, #fff); }
.sp.crit { border-color: var(--crit); background: color-mix(in srgb, var(--crit) 22%, #fff); animation: spPulse 1.2s ease-in-out infinite; }
.sp.lost, .sp.nodata, .sp.missing { border-color: var(--nodata); background: #eceff3; color: #55606d; }
.sch-stage .sp[role=button] { cursor: pointer; }
.sch .sp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sch-pts .sp { touch-action: none; }
.sp.sel { outline: 2px dashed var(--accent); outline-offset: 3px; }
.sp-rs { position: absolute; right: -9px; bottom: -9px; width: 16px; height: 16px; border-radius: 4px; background: var(--accent); border: 2px solid #fff;
  cursor: nwse-resize; touch-action: none; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.sch-props { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; margin: 0 0 8px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; }
.sch-props .fld { display: grid; gap: 2px; font-size: 12px; }
.sch-props .input { width: auto; min-width: 120px; }
.sch-props input[type=number] { min-width: 0; width: 76px; }
@keyframes spPulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--crit) 35%, transparent); } }
@media (prefers-reduced-motion: reduce) { .sp.crit { animation: none; } }

/* ---------- рабочий стол (клиентское приложение) ----------
   Телефон: одна колонка, вкладки сверху, карточка датчика снизу.
   Рабочий стол (от 1024 px): боковая панель, широкая сетка, карточка датчика — панель справа. */
#side { display: contents; }
.side-brand { display: none; }
@media (min-width: 1024px) {
  body.cl #shell { padding-left: 270px; }
  body.cl #side { display: flex; flex-direction: column; gap: 14px; position: fixed; inset: 0 auto 0 0; width: 270px;
    padding: 18px 14px; background: var(--panel); border-right: 1px solid var(--line); overflow: auto; z-index: 6; }
  body.cl .side-brand { display: flex; align-items: center; gap: 10px; font-size: 17px; padding: 0 4px 4px; }
  body.cl .side-brand img { border-radius: 8px; }
  body.cl header { display: contents; }
  body.cl .side-brand { order: 0; }
  body.cl .banner { order: 1; flex: none; background: var(--panel-2); }
  body.cl .tabs { order: 2; flex-direction: column; padding: 0; margin: 0; max-width: none; gap: 4px; }
  body.cl .tabs button { text-align: left; padding: 12px 14px; flex: none; background: transparent; border-color: transparent; }
  body.cl .tabs button:hover { background: var(--panel-2); }
  body.cl .tabs button.on { background: var(--accent); }
  body.cl #settingsBtn { order: 3; margin-top: auto; width: 100%; height: 40px; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; }
  body.cl #settingsBtn::after { content: 'Настройки'; font-weight: 600; }
  body.cl #shell > main { max-width: 1400px; padding: 24px 32px; }
  body.cl #offline { margin-left: 0; }

  /* объекты и оборудование: карточки оборудования в несколько колонок */
  body.cl .grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
  body.cl .tile { padding: 16px; min-height: 120px; }
  body.cl .tile .val { font-size: 32px; }
  body.cl .site-head { margin-bottom: 14px; }
  body.cl .site-toggle { font-size: 20px; }
  /* «кладка»: колонки заполняются независимо, раскрытая группа не оставляет дыр рядом (высоты считает masonry() в app.js) */
  body.cl .site-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); grid-auto-rows: 4px; column-gap: 16px; row-gap: 0; align-items: start; }
  body.cl .site-body > .eq { margin-bottom: 0; }
  body.cl .site-body > .eq-other, body.cl .site-body > .sec, body.cl .site-body > .sub { grid-column: 1 / -1; }

  /* карточка датчика — панель справа, плитки остаются на виду */
  body.cl #modal { align-items: stretch; justify-content: flex-end; background: rgba(0, 0, 0, .3); }
  body.cl #modal .sheet { max-width: 600px; width: 600px; height: 100%; max-height: none; border-radius: 0; border-left: 1px solid var(--line); padding: 22px; }
  body.cl #chart { height: 340px; }
  body.cl .tile { cursor: pointer; }
  body.cl .tile:hover { border-color: var(--accent); }

  /* схемы: на всю ширину, без горизонтальной прокрутки */

  /* события: вложенность объект → оборудование остаётся видимой */
  body.cl .filters .fld { max-width: 320px; }
}
@media (min-width: 1500px) {
  body.cl .site-body { grid-template-columns: repeat(auto-fill, minmax(480px, 1fr)); }
}

.m-value small { font-size: 15px; font-weight: 500; color: var(--muted); margin-left: 4px; }

/* страница владельца на рабочем столе: клиенты карточками в несколько колонок */
@media (min-width: 1024px) {
  body.ad .admin-bar { max-width: 720px; }
  body.ad #list { display: grid; grid-template-columns: repeat(auto-fill, minmax(520px, 1fr)); gap: 16px; align-items: start; }
  body.ad #list > .card, body.ad #list > .empty { margin-bottom: 0; }
  body.ad #list > .empty { grid-column: 1 / -1; }
  body.ad .events { max-width: 980px; }
}

/* вложенность групп событий: содержимое объекта сдвинуто и отмечено направляющей линией */
.evg.d0 > .evg-b { margin-left: 12px; padding-left: 12px; border-left: 2px solid var(--line); }
.evg.d1 > .evg-b { margin-left: 10px; }
.evg.d1 { margin-left: 0; }
.evg.closed > .evg-b, .evg.d0.closed > .evg-b { display: none; }

/* оборудование у клиента сворачивается */
.eq-toggle { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 4px 2px; color: var(--text);
  font: inherit; font-size: 15px; cursor: pointer; text-align: left; min-width: 0; }
.eq-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.eq-toggle b { overflow: hidden; text-overflow: ellipsis; }
.eq.closed .chev { transform: rotate(-90deg); }
.eq.closed > .grid, .eq.closed > .eq-body { display: none; }
.eq.closed .eq-head { margin-bottom: 0; }

/* страница владельца: сворачиваемые клиенты, объекты и оборудование */
.tog { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 4px 4px 4px 0; color: var(--text);
  font: inherit; cursor: pointer; text-align: left; min-width: 0; }
.tog:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.tog .dot { width: 10px; height: 10px; }
.card h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.card h3 .tog { font-size: 17px; font-weight: 700; }
.csum { font-weight: 400; }
.site > .rowh .tog, .eqbox > .rowh .tog { font-weight: 700; }
.card.closed > .cbody, .site.closed > .cbody, .eqbox.closed > .cbody { display: none; }
.card.closed .rowh { margin-bottom: 0; }
.site.closed { padding-bottom: 0; }
.card.closed > .rowh .tog .chev, .site.closed > .rowh .tog .chev, .eqbox.closed > .rowh .tog .chev { transform: rotate(-90deg); }

.chip.mq { font-size: 11px; padding: 1px 7px; margin-left: 4px; word-break: break-all; }

/* расположение плиток: цветные метки, разделы, режим правки */
.c-blue { --tag: #5b9dff; } .c-purple { --tag: #a88bff; } .c-cyan { --tag: #3cc9d9; }
.c-pink { --tag: #ff7ac0; } .c-sand { --tag: #c9a46a; } .c-slate { --tag: #8b97a8; }
.tile.tagged { box-shadow: inset 0 4px 0 var(--tag); }
.layout-bar { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin: 0 0 10px; flex-wrap: wrap; }
.layout-bar .sub { flex: 1; min-width: 200px; }
.sec { margin-top: 14px; }
.eq-body > .sec:first-child { margin-top: 2px; }
.sec.named > .grid { margin-top: 8px; }
.sec.closed > .grid { display: none; }
.sec-h { display: flex; align-items: center; gap: 8px; margin: 0 2px; padding: 6px 10px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); }
.sec-toggle { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 2px; color: var(--text); font: inherit; cursor: pointer; min-width: 0; }
.sec-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.sec-name { font-size: 15px; font-weight: 700; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; }
.sec-h .chev, .eq-toggle .chev { transition: transform .15s; }
.sec.closed .sec-h .chev { transform: rotate(-90deg); }
.mvs { display: inline-flex; gap: 6px; margin-left: auto; }
.sec-h .mvs + .sub, .eq-head .mvs + .sub { margin-left: 0; }
.eq-head[draggable="true"], .sec-h[draggable="true"] { cursor: grab; }
.eq.nested { background: var(--panel); margin: 10px 0 0; }
.mv:disabled { opacity: .35; cursor: default; }
.tile.edit { display: block; cursor: grab; outline: 2px dashed var(--line); outline-offset: -2px; }
.tile.edit.dragging { opacity: .4; }
.tl-ctl { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.mv { min-width: 30px; height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font: inherit; font-size: 16px; cursor: pointer; }
.mv:focus-visible, .swb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sw { display: inline-flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.swb { width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 2px solid var(--line); background: var(--tag, transparent); cursor: pointer; }
.swb.c-none { background: repeating-linear-gradient(45deg, transparent 0 3px, var(--line) 3px 4px); }
.swb.on { border-color: var(--text); }
.sec-sel { margin-top: 8px; padding: 6px 8px; font-size: 13px; }

/* экран восстановления кода */
.rc-res { width: 100%; text-align: left; font-size: 14px; line-height: 1.45; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); }
.rc-res.ok { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--panel)); }
.rc-res.warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--panel)); }
.rc-res.bad { border-color: var(--crit); background: color-mix(in srgb, var(--crit) 12%, var(--panel)); }
.rc-act { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 10px; }
.rc-tg { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.rc-tg ol { margin: 6px 0 10px; padding-left: 20px; }
.rc-res a:not(.btn) { color: var(--accent); }
a.btn { display: inline-flex; text-decoration: none; }

.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin-left: 10px; }

/* окно подтверждения удаления */
.cdlg { max-width: 460px; }
.cdlg h3 { margin: 0 0 8px; }
.cdlg p { margin: 0 0 12px; white-space: pre-line; color: var(--muted); }
.cdlg .actions { display: flex; gap: 10px; margin-top: 14px; }
.btn.danger { background: var(--crit); color: #fff; border-color: transparent; }
.btn.danger:disabled { opacity: .4; cursor: not-allowed; }
/* правила оповещений и корзина */
.rules { margin: 4px 0 14px 12px; padding-left: 10px; border-left: 2px solid var(--line); }
.rules .off { opacity: .6; }
.pick { max-height: 260px; overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: 10px; }
.pick[hidden] { display: none; }
.pick-site { margin-bottom: 8px; }
.pick-site .chk { display: flex; margin: 2px 0 2px 8px; }
form.rule .chk { margin-left: 0; margin-right: 14px; }
.trash { margin-top: 18px; }
form.rule label.chk, .pick label.chk { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; margin: 2px 14px 2px 0; font-size: 14px; }
form.rule label.chk input, .pick label.chk input { width: auto; margin: 0; }
.pick label.chk { display: flex; }
form.rule { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 14px; align-items: end; }
form.rule > .full { grid-column: 1 / -1; }
form.rule > label:not(.chk) { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-width: 0; margin: 0; }
form.rule select, form.rule input.input { width: 100%; min-width: 0; box-sizing: border-box; margin: 0; }

/* сравнение графиков */
.cmp-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }
.cmp-pick { max-height: 240px; overflow: auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; }
.cmp-pick[hidden], #cmpNormW[hidden] { display: none; }
.cmp-pick .pick-site { margin: 8px 0; }
.cmp-pick label.chk { display: flex; align-items: center; gap: 6px; margin: 3px 0 3px 8px; font-size: 14px; }
.cmp-pick label.chk input { width: auto; margin: 0; }
.cmp-pick .btn { margin-top: 6px; }
.cmp-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.cmp-legend:empty { display: none; }
.cmp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; cursor: pointer; background: var(--panel-2); }
.cmp-chip i, .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; margin-right: 4px; }
.cmp-chip i { margin: 0; }
.cmp-chip.off { opacity: .45; text-decoration: line-through; }
.cmp-x { font-weight: 400; opacity: .7; padding: 0 2px; }
.cmp-x:hover { opacity: 1; }
.m-stats.multi { flex-direction: column; gap: 4px; }

.head-btns { display: flex; gap: 8px; }
.chart-wrap { position: relative; }
/* график на весь экран */
body #modal .sheet.full, body.cl #modal .sheet.full { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; border-radius: 0; border: 0;
  display: flex; flex-direction: column; padding: 16px 22px calc(14px + env(safe-area-inset-bottom)); overflow: hidden; }
body #modal:has(.sheet.full), body.cl #modal:has(.sheet.full) { background: var(--bg, var(--panel)); align-items: stretch; justify-content: stretch; }
body.cl #modal .sheet.full #chart, #modal .sheet.full #chart { height: 100%; }
.sheet.full .chart-wrap { flex: 1 1 auto; min-height: 260px; }
.sheet.full .chart-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100% !important; }
.sheet.full .cmp-pick { columns: 3 260px; max-height: 30vh; flex: none; }
.sheet.full .cmp-pick .pick-site { break-inside: avoid; }
.sheet.full .ranges { max-width: 520px; }
.sheet.full .m-stats { flex: none; }
.sheet.full .m-stats.multi { flex-direction: row; flex-wrap: wrap; gap: 6px 22px; }
.sheet.full .sub { flex: none; }

/* список состояний датчика-состояния */
.enumbox { display: none; }
.form[data-kind=enum] .enumbox { display: block; grid-column: 1 / -1; }
.es-rows { display: grid; gap: 6px; margin: 8px 0; }
.es-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) 150px 34px; gap: 8px; align-items: center; }
.es-row .input { width: 100%; box-sizing: border-box; margin: 0; }
@media (max-width: 600px) { .es-row { grid-template-columns: 70px minmax(0, 1fr) 34px; } .es-row .es-level { grid-column: 1 / 3; } }

.tile .val.txt.long { font-size: 17px; line-height: 1.2; overflow-wrap: anywhere; }
#mValue { overflow-wrap: anywhere; }

/* левая панель: убирается; в скрытом виде выезжает по кнопке ☰ */
#sideToggle { display: none; }
@media (min-width: 1024px) {
  #sideToggle { display: flex; position: fixed; top: 10px; left: 226px; z-index: 8; width: 34px; height: 34px; align-items: center; justify-content: center; font-size: 18px; }
  body.side-off #sideToggle { left: 10px; background: var(--panel); border: 1px solid var(--line); }
  body.side-off.side-open #sideToggle { left: 226px; background: transparent; border: 0; }
  body.cl.side-off #shell { padding-left: 0; }
  body.cl.side-off #side { transform: translateX(-100%); transition: transform .18s ease; box-shadow: none; }
  body.cl.side-off.side-open #side { transform: none; box-shadow: 6px 0 24px rgba(0, 0, 0, .35); }
  body.cl:not(.side-off) #side { transition: none; }
  body.cl.side-off #shell > main { padding-left: 56px; }
  body.cl #side .side-brand { padding-right: 36px; }
}

/* подтверждение проблем */
.ackbtn { margin-top: 6px; padding: 5px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ackbtn:hover { border-color: var(--accent); }
.ackbtn.hidden { display: none; }
.m-ack { margin: 8px 0 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.m-ack:empty { display: none; }

.sack { display: inline-flex; align-items: center; gap: 6px; }
.btn.sm { padding: 3px 10px; font-size: 13px; }
.sack:empty { display: none; }