/* devices.css — вкладка «Устройства» классического кабинета (B46, 11.10.2026).
   Токены — кабинетные (--bg, --bg-2, --line, --ink, --muted, --dim, --accent #99FFFF, --pad-x), шрифт — страницы.
   Текст не мельче 12 px, кнопки и переключатели не ниже 40 px. Префикс классов — dv-. */

#botDevices{padding:16px var(--pad-x) 28px}
.dv-root{max-width:1520px;color:var(--ink)}
.dv-root *{box-sizing:border-box}
.dv-root button{font:inherit}

/* ---------- шапка раздела ---------- */
.dv-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 6px}
.dv-top h3{font-size:18px;font-weight:500;margin:0}
.dv-top .sp{flex:1}
.dv-lead{color:var(--muted);font-size:13px;line-height:1.55;margin:0 0 16px;max-width:980px}
.dv-tag{display:inline-block;font-size:12px;line-height:1.4;letter-spacing:.04em;border:1px solid var(--line);
  border-radius:6px;color:var(--dim);padding:1px 7px;white-space:nowrap;font-weight:500;vertical-align:middle}
.dv-tag.demo{color:var(--accent);border-color:rgba(153,255,255,.42)}
.dv-tag.warn{color:#E0B040;border-color:rgba(224,176,64,.45)}
.dv-tag.off{color:var(--dim)}
.dv-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;
  background:none;border:1px solid var(--line);color:var(--muted);border-radius:9px;padding:8px 14px;
  font-size:13px;cursor:pointer;transition:color .15s,border-color .15s,background .15s;white-space:nowrap}
.dv-btn:hover{color:var(--ink);border-color:var(--line-strong)}
.dv-btn:focus-visible,.dv-card:focus-visible,.dv-seg button:focus-visible,.dv-sw:focus-visible,
.dv-arr:focus-visible,.dv-x:focus-visible,.dv-root select:focus-visible,.dv-root input:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}
.dv-btn.pri{background:var(--accent);border-color:var(--accent);color:#101314;font-weight:700}
.dv-btn.pri:hover{filter:brightness(1.07);color:#101314}
.dv-btn.danger{color:#FF9D9D;border-color:rgba(255,157,157,.45)}
.dv-btn.danger:hover{background:rgba(255,157,157,.1)}
.dv-btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- группы и лента ---------- */
.dv-group{margin:0 0 18px}
.dv-gh{display:flex;align-items:center;gap:10px;margin:0 0 8px;min-height:40px}
.dv-gh h4{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:500;margin:0}
.dv-gh .n{font-size:12px;color:var(--dim)}
.dv-gh .sp{flex:1}
.dv-arr{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--bg-2);color:var(--muted);
  cursor:pointer;font-size:18px;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:.15s}
.dv-arr:hover{color:var(--ink);border-color:var(--line-strong)}
.dv-arr[disabled]{opacity:.35;cursor:default}
.dv-strip{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-behavior:smooth;
  overscroll-behavior-x:contain;padding:2px 2px 10px;margin:0 -2px;-webkit-overflow-scrolling:touch}
.dv-card{flex:0 0 268px;min-height:140px;scroll-snap-align:start;display:grid;grid-template-columns:56px minmax(0,1fr);
  gap:7px 12px;align-items:start;align-content:start;text-align:left;background:var(--bg-2);border:1px solid var(--line);border-radius:13px;
  padding:13px 14px 12px;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s;position:relative}
.dv-card:hover{border-color:var(--line-strong)}
.dv-card[aria-selected="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:#2c3337}
.dv-ic{width:56px;height:56px;border-radius:11px;background:var(--bg);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.dv-ic svg{width:48px;height:48px;display:block}
.dv-ct{min-width:0;display:flex;flex-direction:column;gap:3px}
.dv-nm{font-size:14px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.dv-tp{font-size:12px;color:var(--dim);line-height:1.35}
.dv-sl{grid-column:1 / -1;font-size:12.5px;color:var(--muted);line-height:1.4;display:flex;gap:7px;align-items:baseline;min-width:0;margin-top:2px}
.dv-sl i{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--accent);transform:translateY(-1px)}
.dv-sl span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dv-card.wide{flex-basis:380px}
.dv-sl i.warn{background:#E0B040}.dv-sl i.alarm{background:#FF7878}.dv-sl i.off{background:var(--dim)}
.dv-fr{grid-column:1 / -1;font-size:12px;color:var(--dim);display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-height:22px}
.dv-bar{grid-column:1 / -1;height:4px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:2px}
.dv-bar i{display:block;height:100%;background:var(--accent);transition:width .4s}
.dv-bar i.warn{background:#E0B040}.dv-bar i.alarm{background:#FF7878}
.dv-card.add{border-style:dashed;background:none;color:var(--muted);grid-template-columns:1fr;align-content:center;
  justify-items:center;text-align:center;min-height:140px}
.dv-card.add b{font-size:14px;font-weight:500;color:var(--ink)}
.dv-card.add span{font-size:12px;color:var(--dim);max-width:200px;line-height:1.4}
.dv-card.add .plus{width:40px;height:40px;border-radius:50%;border:1px dashed var(--line-strong);display:flex;
  align-items:center;justify-content:center;font-size:22px;color:var(--accent);margin-bottom:4px}
.dv-card.add:hover{border-color:rgba(153,255,255,.5);color:var(--ink)}

/* ---------- меню устройства ---------- */
.dv-menu{margin:6px 0 0;background:var(--bg-2);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  scroll-margin-top:12px}
.dv-mh{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.dv-mh .ttl{flex:1;min-width:180px;display:flex;align-items:center;gap:12px}
.dv-mh .ttl .dv-ic{width:44px;height:44px;border-radius:9px}
.dv-mh .ttl .dv-ic svg{width:38px;height:38px}
.dv-mh h3{font-size:16px;font-weight:600;margin:0;line-height:1.25;outline:none}
.dv-mh .k{font-size:12px;color:var(--dim);display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:2px}
.dv-x{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:none;color:var(--muted);
  font-size:20px;cursor:pointer;line-height:1}
.dv-x:hover{color:var(--ink);border-color:var(--line-strong)}
.dv-mb{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(330px,1fr);min-height:0}
.dv-viz{position:relative;min-height:420px;height:clamp(420px,56vh,620px);overflow:hidden;
  background:radial-gradient(120% 95% at 50% 30%,#2b3337 0%,#1f2427 62%,#1b1f21 100%);border-right:1px solid var(--line)}
.dv-viz [data-stage]{position:absolute;inset:0}
.dv-viz canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;touch-action:none}
.dv-viz .dv-svg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:44px 12px 52px}
.dv-viz .dv-svg svg{width:100%;height:100%;max-width:760px}
.dv-chips{position:absolute;left:12px;top:12px;right:12px;display:flex;gap:6px;flex-wrap:wrap;pointer-events:none;z-index:3}
.dv-chip{font-size:12px;color:var(--ink);background:rgba(27,30,32,.8);border:1px solid rgba(255,255,255,.14);
  border-radius:7px;padding:3px 8px;white-space:nowrap}
.dv-chip.mode{border-color:rgba(153,255,255,.45);color:var(--accent)}
.dv-chip.warn{border-color:rgba(224,176,64,.5);color:#E0B040}
.dv-chip.alarm{border-color:rgba(255,120,120,.55);color:#FF9D9D}
.dv-views{position:absolute;left:12px;bottom:12px;display:flex;gap:6px;flex-wrap:wrap;z-index:3;max-width:calc(100% - 24px)}
.dv-views button{min-height:40px;padding:6px 11px;border-radius:9px;border:1px solid rgba(255,255,255,.16);
  background:rgba(27,30,32,.82);color:var(--muted);font-size:12px;cursor:pointer}
.dv-views button:hover{color:var(--ink)}
.dv-views button.on{color:#101314;background:var(--accent);border-color:var(--accent);font-weight:700}
.dv-vnote{position:absolute;right:12px;bottom:14px;font-size:12px;color:#c9cfcd;background:rgba(27,30,32,.74);
  border:1px solid rgba(153,255,255,.22);border-radius:6px;padding:3px 8px;pointer-events:none;z-index:3;max-width:46%}
.dv-load{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  color:var(--muted);font-size:13px;z-index:2;text-align:center;padding:20px}
.dv-load .pg{width:180px;height:4px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.dv-load .pg i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
.dv-3d{position:absolute;left:12px;bottom:12px;z-index:4;background:rgba(27,30,32,.86)}
.dv-lbls{position:absolute;inset:0;pointer-events:none;z-index:2}
.dv-lbl{position:absolute;transform:translate(-50%,-100%);font-size:12px;line-height:1.3;color:var(--ink);
  background:rgba(27,30,32,.84);border:1px solid rgba(189,247,113,.35);border-radius:6px;padding:2px 7px;white-space:nowrap}
.dv-lbl.r{transform:translate(8px,-50%)}.dv-lbl.l{transform:translate(calc(-100% - 8px),-50%)}
.dv-ctl{padding:14px 16px 16px;overflow-y:auto;max-height:clamp(420px,56vh,620px);min-width:0}
.dv-sec{margin:0 0 16px}
.dv-sec:last-child{margin-bottom:0}
.dv-sec h5{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:500;margin:0 0 8px;
  display:flex;gap:8px;align-items:center}
.dv-sec h5 .sp{flex:1}
.dv-sec h5 em{font-style:normal;text-transform:none;letter-spacing:0;color:var(--muted)}
.dv-seg{display:flex;flex-wrap:wrap;gap:6px}
.dv-seg.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr))}
.dv-seg button{min-height:40px;padding:7px 12px;border-radius:9px;border:1px solid var(--line);background:var(--bg);
  color:var(--muted);font-size:13px;cursor:pointer;transition:.15s;line-height:1.25;text-align:center}
.dv-seg button:hover{color:var(--ink);border-color:var(--line-strong)}
.dv-seg button.on,.dv-seg button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#101314;font-weight:700}
.dv-seg button.stop{color:#FF9D9D;border-color:rgba(255,157,157,.4)}
.dv-seg button.stop.on{background:#FF7878;border-color:#FF7878;color:#101314}
.dv-seg button small{display:block;font-size:12px;font-weight:400;opacity:.8}
.dv-seg button[disabled]{opacity:.45;cursor:not-allowed}
.dv-seg button.pend{border-style:dashed;border-color:var(--accent);color:var(--accent)}
.dv-sws{display:flex;flex-direction:column;gap:6px}
.dv-sw{display:flex;align-items:center;gap:10px;min-height:40px;width:100%;background:var(--bg);border:1px solid var(--line);
  border-radius:9px;padding:6px 10px;color:var(--muted);font-size:13px;cursor:pointer;text-align:left}
.dv-sw:hover{color:var(--ink)}
.dv-sw .tk{flex:0 0 auto;width:36px;height:20px;border-radius:11px;background:var(--bg-3);position:relative;transition:.15s}
.dv-sw .tk::after{content:'';position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#d9dcdb;transition:.15s}
.dv-sw[aria-checked="true"]{color:var(--ink)}
.dv-sw[aria-checked="true"] .tk{background:var(--accent)}
.dv-sw[aria-checked="true"] .tk::after{left:18px;background:#101314}
.dv-sw .tx{flex:1;min-width:0;line-height:1.3}
.dv-sw .tx small{display:block;font-size:12px;color:var(--dim)}
.dv-sw[disabled]{opacity:.5;cursor:not-allowed}
.dv-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dv-kpi{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 10px;min-width:0}
.dv-kpi .t{font-size:12px;color:var(--dim);line-height:1.35}
.dv-kpi .v{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv-kpi .v small{font-size:12px;color:var(--muted);font-weight:400;margin-left:3px}
.dv-kpi.ok .v{color:var(--accent)}.dv-kpi.warn .v{color:#E0B040}.dv-kpi.alarm .v{color:#FF9D9D}
.dv-note{font-size:12px;color:var(--dim);line-height:1.5;margin:8px 0 0}
.dv-note b{color:var(--muted);font-weight:500}
.dv-banner{border:1px solid rgba(224,176,64,.45);background:rgba(224,176,64,.08);border-radius:10px;padding:9px 12px;
  font-size:12.5px;line-height:1.5;color:var(--ink);margin:0 0 14px}
.dv-banner.demo{border-color:rgba(153,255,255,.35);background:rgba(153,255,255,.06)}
.dv-banner b{font-weight:700}
.dv-said{font-size:12.5px;color:var(--accent);min-height:18px;margin:8px 0 0;line-height:1.45}
.dv-said.err{color:#FF9D9D}
.dv-soc{display:flex;align-items:center;gap:12px}
.dv-soc .big{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.dv-soc .big small{font-size:13px;color:var(--muted);font-weight:400}
.dv-soc .gauge{flex:1;height:12px;border-radius:7px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid var(--line)}
.dv-soc .gauge i{display:block;height:100%;background:var(--accent);transition:width .5s}
.dv-soc .gauge i.warn{background:#E0B040}.dv-soc .gauge i.alarm{background:#FF7878}
.dv-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.dv-sel{min-height:40px;background:var(--bg);border:1px solid var(--line);border-radius:9px;color:var(--ink);
  padding:8px 10px;font:inherit;font-size:13px;max-width:100%}
.dv-prog{height:6px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:8px}
.dv-prog i{display:block;height:100%;background:var(--accent);transition:width .6s}
.dv-arms{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
.dv-arms span{font-size:12px;text-align:center;border:1px solid var(--line);border-radius:7px;padding:4px 0;color:var(--dim);
  background:var(--bg);line-height:1.25}
.dv-arms span b{display:block;font-size:12px;color:var(--muted);font-weight:500}
.dv-arms span.work{border-color:rgba(153,255,255,.45);color:var(--accent)}
.dv-arms span.hold{border-color:rgba(224,92,92,.55);color:#FF9D9D}

/* ---------- низ меню: маршрут, питание, журнал ---------- */
.dv-mf{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(330px,1fr);border-top:1px solid var(--line)}
.dv-mf > div{padding:14px 16px;min-width:0}
.dv-mf > div + div{border-left:1px solid var(--line)}
.dv-route svg{width:100%;height:auto;display:block;max-height:240px}
.dv-log{list-style:none;margin:0;padding:0;max-height:200px;overflow-y:auto}
.dv-log li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px;font-size:12.5px;line-height:1.45;padding:5px 0;
  border-bottom:1px solid var(--line);color:var(--muted)}
.dv-log li:last-child{border-bottom:0}
.dv-log li time{color:var(--dim);font-variant-numeric:tabular-nums}
.dv-log li em{font-style:normal;color:var(--dim)}
.dv-log li.ok b{color:var(--accent);font-weight:500}
.dv-log li.no b{color:#E0B040;font-weight:500}
.dv-log .empty{display:block;color:var(--dim);border:0}
.dv-spark svg{width:100%;height:70px;display:block}
.dv-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;font-size:12.5px;margin:0}
.dv-dl dt{color:var(--dim)}.dv-dl dd{margin:0;color:var(--ink);overflow-wrap:anywhere}

/* ---------- Ivy и форма ---------- */
.dv-ivy{padding:14px 16px 18px;min-height:320px}
.dv-ivy-wait{display:flex;flex-direction:column;gap:10px;align-items:flex-start;color:var(--muted);font-size:13px;line-height:1.55;
  max-width:640px;padding:18px 4px}
.dv-ivy-wait b{color:var(--ink);font-size:15px}
.dv-form{padding:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;max-width:900px}
.dv-form label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--dim);letter-spacing:.02em}
.dv-form label.full{grid-column:1 / -1}
.dv-form input,.dv-form select{min-height:40px;background:var(--bg);border:1px solid var(--line);border-radius:9px;color:var(--ink);
  padding:9px 12px;font:inherit;font-size:13.5px;width:100%}
.dv-form input:focus,.dv-form select:focus{border-color:var(--accent);outline:none}
.dv-form .hint{font-size:12px;color:var(--dim);line-height:1.45}
.dv-form .acts{grid-column:1 / -1;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.dv-form .err{grid-column:1 / -1;color:#FF9D9D;font-size:12.5px;min-height:18px;margin:0}
.dv-form .err.ok{color:var(--accent)}
.dv-gen{padding:16px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.dv-empty{color:var(--dim);font-size:13px;padding:18px 0;line-height:1.6}

/* ---------- узкие экраны ---------- */
@media(max-width:1100px){
  .dv-mb,.dv-mf{grid-template-columns:minmax(0,1fr)}
  .dv-viz{border-right:0;border-bottom:1px solid var(--line);height:clamp(320px,52vh,480px);min-height:320px}
  .dv-ctl{max-height:none}
  .dv-mf > div + div{border-left:0;border-top:1px solid var(--line)}
  .dv-gen{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
  .dv-gh .dv-arr{display:none}
  .dv-mh{gap:8px;padding:8px}
  .dv-mh .ttl{order:-1;flex:1 1 100%}
  .dv-mh .dv-arr[data-act="next"]{margin-right:auto}
  .dv-card{flex-basis:min(80vw,300px)}
  .dv-strip{scroll-snap-type:x mandatory}
  .dv-viz{height:300px;min-height:300px}
  .dv-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dv-form{grid-template-columns:minmax(0,1fr)}
  .dv-vnote{display:none}
  .dv-mh .ttl{min-width:0}
  .dv-arms{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){
  .dv-strip{scroll-behavior:auto}
  .dv-card,.dv-bar i,.dv-soc .gauge i,.dv-prog i,.dv-sw .tk,.dv-sw .tk::after{transition:none}
}

/* B56: device overview replaces the narrow map drawer for Bee. */
.dv-overview{padding:20px;border-top:1px solid var(--line);min-width:0}
.dv-overview>h4{margin:0 0 12px;font-size:16px;font-weight:500}
.dv-overview-grid{columns:2;column-gap:28px}
.dv-overview-grid>.dp-sec{margin:0 0 24px;min-width:0;break-inside:avoid}
.dv-overview .cams{max-width:100%;width:100%;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"fl f fr" "bl b br"}
.dv-overview .cams>.cam::before{padding-top:66%}
.dv-overview .surround svg{max-height:240px}
.dv-overview svg{max-width:100%}
@media(max-width:760px){.dv-overview{padding:16px}.dv-overview-grid{columns:1}}