:root {
    --ikc-cyan: #007D79;
    --ikc-cyan-light: #e0f2f1;
    --ikc-red: #C13646;
    --bg-main: #f4f7f6;
}

html, body { height: 100%; }
body { display: flex; flex-direction: column; background-color: var(--bg-main); color: #2d3748; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

.main-wrapper { max-width: 1400px; margin: 0 auto; padding-top: 20px; flex: 1 0 auto; width: 100%; padding-bottom: 40px; }

/* Подвал сайта (Footer) */
.ikc-footer { background-color: #fff; border-top: 1px solid #e2e8f0; padding: 25px 0; margin-top: auto; }
.ikc-footer a { color: var(--ikc-cyan); text-decoration: none; font-weight: 600; transition: color 0.2s; }
.ikc-footer a:hover { color: var(--ikc-red); }

/* Табы */
.nav-tabs { border-bottom: 2px solid #e2e8f0; margin-bottom: 25px; }
.nav-tabs .nav-link { color: #718096; font-weight: 600; border: none; padding: 12px 24px; transition: all 0.2s; }
.nav-tabs .nav-link:hover { color: var(--ikc-cyan); background: var(--ikc-cyan-light); border-radius: 8px 8px 0 0; }
.nav-tabs .nav-link.active { color: var(--ikc-cyan); border-bottom: 3px solid var(--ikc-cyan); background: transparent; }
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }

/* Контейнер Контроллера (Гибрид Варианта 1 и 3) */
.ctrl-container { background: #eef2f6; padding: 25px; border-radius: 16px; border-top: 6px solid var(--ikc-cyan); margin-bottom: 30px; }

/* Сетка карточек */
.card { border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.03); background: #fff; height: 100%; transition: box-shadow 0.2s; }
.card-header { background: #f8f9fa; border-bottom: 1px solid #e2e8f0; padding: 12px 16px; border-radius: 12px 12px 0 0 !important; }
.card-body { padding: 16px; }

.card-ctrl { border-top: 4px solid var(--ikc-cyan); border-left: none; }

.btn-icon { background: none; border: none; padding: 0 5px; color: #718096; font-size: 1.1rem; border-radius: 4px; line-height: 1; }
.btn-icon:hover { background: #e2e8f0; color: var(--ikc-cyan); }

/* Ползунки */
input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 6px; background: #e2e8f0; border-radius: 10px; }
input[type=range]::-webkit-slider-thumb { height: 18px; width: 18px; border-radius: 50%; background: var(--ikc-cyan); cursor: pointer; -webkit-appearance: none; margin-top: -6px; }

.text-ikc-cyan { color: var(--ikc-cyan) !important; }
.bg-ikc-cyan { background-color: var(--ikc-cyan) !important; color: white; }
.bg-ikc-red { background-color: var(--ikc-red) !important; color: white; }
.icon-svg { fill: none; stroke-width: 2; width: 20px; height: 20px; stroke-linecap: round; stroke-linejoin: round; }
.flame-on { stroke: var(--ikc-red); }
.flame-off { stroke: #cbd5e0; }

/* Карточки устройств — общие элементы (вынесено из inline-стилей шаблонов) */
.dev-name-input { box-shadow: none !important; color: #000 !important; }

/* Окно лога (контроллер/глобальный) */
.log-window { background: #121212; font-family: monospace; font-size: 0.85rem; min-height: 400px; max-height: 65vh; overflow-y: auto; }

/* Переключатель видов (Контроллеры / Объекты) */
.seg { background: #fff; border-radius: 30px; padding: 3px; display: inline-flex; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.seg .seg-btn { border: none; background: none; border-radius: 30px; padding: 6px 18px; font-weight: 600; color: #718096; font-size: .9rem; }
.seg .seg-btn.active { background: var(--ikc-cyan); color: #fff; }

/* Пилюли зон в виде Объекта */
.zone-pills .nav-link { color: #718096; font-weight: 600; border-radius: 8px; }
.zone-pills .nav-link.active { background: var(--ikc-cyan); color: #fff; }

/* Вкладки контроллеров (вид «Контроллеры»): пилюли + ◀▶ переупорядочивание */
.ctrl-tabs .nav-link { color: #718096; font-weight: 600; border-radius: 8px; white-space: nowrap; }
.ctrl-tabs .nav-link.active { background: var(--ikc-cyan); color: #fff; }
.ctrl-tab-item { background: #fff; border-radius: 8px; }
.ctab-arrow { border: none; background: none; color: #a0aec0; font-weight: 700; font-size: 1.15rem; line-height: 1; padding: 0 4px; cursor: pointer; }
.ctab-arrow:hover { color: var(--ikc-cyan); }
.ctrl-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin-right: 2px; }
.ctrl-dot.on { background: #48bb78; }
.ctrl-dot.off { background: #cbd5e0; }
/* Фаза 9.1: «на связи, но НЕ работает» (ждёт активации / потерян ключ) — оранжевая, пульсирует */
.ctrl-dot.warn { background: #ed8936; animation: ctrl-warn-pulse 1.6s ease-in-out infinite; }
@keyframes ctrl-warn-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* ============================================================================
   Фаза 13 «Редизайн панели» (задание дизайн-ветки 09.07.2026).
   Источник истины: workspace/design/avelsa_dashboard_concept.html
   (+ спека workspace/design/DASHBOARD_REDESIGN_SPEC.md, CSS скопирован оттуда).
   Классы прототипа сохранены, но правила ЗАСКОУПЛЕНЫ:
     - анатомия карточек — только внутри сетки (.dpanel .grid .card …), иначе
       глобальный .card сломал бы Bootstrap-карточки (панель автоматизаций,
       панель контроллера, страницы users/profile/help);
     - .badge / input[type=range] — тоже через .dpanel .grid (конфликт с Bootstrap);
     - уникальные классы прототипа (chead/cbody/metric/zone-h/…) — скоуп .dpanel.
   Контейнер настроек устройства = div.dev-set (в прототипе .dev-settings; имя
   занято старым спойлером — уйдёт вместе с ним).
   ТЁМНАЯ ТЕМА: АКТИВИРОВАНА 12.07.2026 — переключатель 🌙/☀️ в навбаре (base.html)
   ставит data-theme + data-bs-theme; доводка хрома — блок «ТЁМНАЯ ТЕМА — АКТИВАЦИЯ»
   в конце файла. Токены :root[data-theme="dark"] задаются ниже.
   ============================================================================ */
:root {
    --page:#EAF0EE; --card:#FFFFFF; --tile:#F4F8F7; --tile-2:#EEF4F3;
    --ink:#12302C; --ink-2:#537571; --ink-3:#8AA6A1;
    --line:#E4EDEB; --line-2:#D6E2DF;
    --teal:#007D79; --teal-d:#005D59; --teal-100:#DCF0EE; --teal-50:#EEF7F6;
    --red:#C13646; --red-d:#9A2A38; --red-50:#FBEBEE;
    --flame:#E4571F; --amber:#A9700A; --amber-50:#F8F0DC; --grey-dot:#B1BEBB;
    --radius:12px; --radius-sm:9px;
    --shadow-c:0 1px 2px rgba(18,48,44,.04),0 1px 10px rgba(18,48,44,.03);
}
:root[data-theme="dark"] {
    --page:#0E1917; --card:#16211E; --tile:#1D2A26; --tile-2:#22302B;
    --ink:#E7F0ED; --ink-2:#9BB4AF; --ink-3:#6C8984;
    --line:#26332F; --line-2:#2F3F3A;
    --teal:#2AA79E; --teal-d:#3FBBB0; --teal-100:#123331; --teal-50:#14211F;
    --red:#E36A79; --red-d:#EE8291; --red-50:#2B1619;
    --flame:#F0812F; --amber:#D69A3B; --amber-50:#2A2113; --grey-dot:#4C5C58;
    --shadow-c:0 1px 2px rgba(0,0,0,.25),0 1px 12px rgba(0,0,0,.18);
}

/* --- Заголовок секции зоны (задание п.1) --- */
.dpanel .zone-h { display:flex; align-items:center; gap:10px; padding:14px 0 10px; font-size:12px;
                  text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); font-weight:500; }
.dpanel .zone-h .ln { flex:1; height:1px; background:var(--line); }
.dpanel .zone-h .cnt { color:var(--ink-3); letter-spacing:0; text-transform:none; }

/* --- Сетка равновысоких рядов (задание п.4, спека §5): НЕ dense, ряды считает layout() --- */
.dpanel .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(324px,1fr));
                column-gap:16px; row-gap:16px; grid-auto-rows:var(--row,auto);
                grid-auto-flow:row; align-items:stretch; padding:6px 0 18px; }
.dpanel .grid.measuring { align-items:start; grid-auto-rows:auto; }
.dpanel .grid.measuring .card { grid-row:auto !important; }

/* --- Анатомия карточки (задание п.2) --- */
.dpanel .grid .card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
                      box-shadow:var(--shadow-c); position:relative; transition:border-color .15s;
                      overflow:hidden; display:flex; flex-direction:column; height:auto; }
.dpanel .grid .card:hover { border-color:var(--line-2); }
.dpanel .grid .card:hover .chead .acts { opacity:1; }
.dpanel .grid .card.alarm { border-left:3px solid var(--red); }
.dpanel .grid .card.wide { grid-column:1/-1; }
.dpanel .chead { display:flex; align-items:center; gap:10px; padding:13px 14px 11px; }
.dpanel .gicon { width:30px; height:30px; border-radius:9px; display:flex; align-items:center;
                 justify-content:center; flex:none; background:var(--teal-100); color:var(--teal-d);
                 font-size:15px; }
.dpanel .gicon.red { background:var(--red-50); color:var(--red-d); }
/* SVG-иконки типов (сет дизайн-ветки, workspace/design/device_icons.md): размер глифа
   задаёт CSS — один глиф работает в карточке (30×30) и в «Списке» (26×26) */
.dpanel .gicon svg { width:16px; height:16px; stroke-linecap:round; stroke-linejoin:round; display:block; }
.dpanel .gicon svg.ic-flame { width:17px; height:17px; }
.dpanel .grid.list .gicon svg { width:14px; height:14px; }
.dpanel .cname { font-size:14.5px; font-weight:500; letter-spacing:-.01em; line-height:1.25;
                 display:flex; align-items:center; gap:7px; flex-wrap:wrap; color:var(--ink); }
.dpanel .ctype { font-size:11px; color:var(--ink-3); margin-top:1px; }
.dpanel .cstatus { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:12px;
                   color:var(--ink-2); white-space:nowrap; }
.dpanel .acts { display:flex; gap:2px; opacity:0; transition:opacity .15s; }
.dpanel .iconbtn { width:26px; height:26px; border-radius:7px; border:0; background:transparent;
                   color:var(--ink-3); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.dpanel .iconbtn:hover { background:var(--tile); color:var(--ink); }
.dpanel .cbody { padding:2px 14px 12px; flex:1 1 auto; }
.dpanel .tnum { font-variant-numeric:tabular-nums; }

/* Точка-статус в шапке карточки (спека §2) */
.dpanel .dot { width:8px; height:8px; border-radius:50%; flex:none; }
.dpanel .dot.on { background:var(--teal); }
.dpanel .dot.off { background:var(--grey-dot); }
.dpanel .dot.warn { background:var(--amber); }
.dpanel .dot.al { background:var(--red); }

/* Живой огонёк котла (задание п.5, спека §7) */
.dpanel .flame { display:inline-flex; color:var(--flame); transform-origin:50% 90%;
                 animation:flick 1.15s infinite ease-in-out; }
@keyframes flick { 0%,100% { opacity:.7; transform:scale(.92) rotate(-1deg); }
                   45% { opacity:1; transform:scale(1.06) rotate(1.5deg); }
                   70% { opacity:.85; transform:scale(.98); } }

/* Бейджи и чип типа (скоуп .grid — не задеть Bootstrap .badge вне карточек) */
.dpanel .grid .badge { display:inline-flex; align-items:center; gap:6px; font-size:11.5px;
                       font-weight:500; padding:3px 8px; border-radius:6px; line-height:1.3; }
.dpanel .grid .badge.ok { background:var(--teal-50); color:var(--teal-d); }
.dpanel .grid .badge.off { background:var(--tile); color:var(--ink-2); }
.dpanel .grid .badge.warn { background:var(--amber-50); color:var(--amber); }
.dpanel .grid .badge.al { background:var(--red-50); color:var(--red-d); }
.dpanel .type-chip { font-size:10.5px; color:var(--ink-2); background:var(--tile);
                     border:1px solid var(--line); border-radius:5px; padding:1px 6px; font-weight:400; }

/* Авария котла: строка + кнопка сброса */
.dpanel .alarm-row { display:flex; align-items:center; gap:11px; background:var(--red-50);
                     border-radius:var(--radius-sm); padding:9px 11px; margin-bottom:12px; }
.dpanel .alarm-row .tx { font-size:12.5px; color:var(--red-d); font-weight:500; line-height:1.3; }
.dpanel .btn-al { margin-left:auto; height:30px; padding:0 11px; border-radius:8px;
                  border:1px solid var(--red); background:transparent; color:var(--red-d);
                  font-size:12.5px; cursor:pointer; white-space:nowrap; }
.dpanel .btn-al:hover { background:var(--red); color:#fff; }

/* Плитки показаний */
.dpanel .metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(66px,1fr)); gap:8px; }
.dpanel .metric { background:var(--tile); border-radius:var(--radius-sm); padding:9px 10px; }
.dpanel .metric .v { font-size:20px; font-weight:500; line-height:1.05; letter-spacing:-.02em; color:var(--ink); }
.dpanel .metric .v .u { font-size:11px; color:var(--ink-2); font-weight:400; margin-left:2px; }
.dpanel .metric .l { font-size:10px; text-transform:uppercase; letter-spacing:.05em;
                     color:var(--ink-3); margin-top:5px; }
.dpanel .metric.hl .v { color:var(--teal-d); }
/* Кликабельная плитка = открыть историю; значок 📈 в углу — видимая подсказка */
.dpanel .metric.click, .dpanel .otile.click { cursor:pointer; position:relative; }
.dpanel .metric.click:hover, .dpanel .otile.click:hover { background:var(--tile-2); }
.dpanel .metric.click::after, .dpanel .otile.click::after {
    content:"📈"; position:absolute; top:6px; right:8px; font-size:10px;
    line-height:1; opacity:.45; pointer-events:none; }
.dpanel .metric.click:hover::after, .dpanel .otile.click:hover::after { opacity:1; }
/* MQ-датчик: раскраска плитки по уровню (реюз классов mq-*) */
.dpanel .metric.mq-warn { background:var(--amber-50); }
.dpanel .metric.mq-warn .v { color:var(--amber); }
.dpanel .metric.mq-danger { background:var(--red-50); }
.dpanel .metric.mq-danger .v { color:var(--red-d); }

/* Питание котла */
.dpanel .powerbar { display:flex; align-items:center; gap:12px; margin:12px 0 4px; padding:10px 12px;
                    border-radius:var(--radius-sm); background:var(--red-50); }
.dpanel .powerbar.on { background:var(--teal-50); }
.dpanel .powerbar .lab { font-size:13px; color:var(--ink-2); }
.dpanel .powerbar .lab b { color:var(--red-d); }
.dpanel .powerbar.on .lab b { color:var(--teal-d); }
.dpanel .powerbar .pbtn { margin-left:auto; height:30px; padding:0 13px; border-radius:9px;
                          border:1px solid var(--line-2); background:var(--card); color:var(--ink);
                          font-size:13px; cursor:pointer; white-space:nowrap; }
.dpanel .powerbar .pbtn:hover { border-color:var(--teal); color:var(--teal); }

/* Уставка-ползунок */
.dpanel .setp { margin-top:14px; }
.dpanel .setp .top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px; }
.dpanel .setp .top .nm { font-size:12.5px; color:var(--ink-2); }
.dpanel .setp .top .val { font-size:17px; font-weight:500; color:var(--teal-d); }
.dpanel .setp .ends { display:flex; justify-content:space-between; font-size:11px;
                      color:var(--ink-3); margin-top:7px; }
.dpanel .grid input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:5px;
    border-radius:3px; outline:none;
    background:linear-gradient(to right,var(--teal) 0 var(--pct,50%),var(--tile-2) var(--pct,50%) 100%); }
.dpanel .grid input[type=range]::-webkit-slider-runnable-track { background:transparent; height:5px; }
.dpanel .grid input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:17px; height:17px;
    border-radius:50%; background:var(--teal); border:2.5px solid var(--card);
    box-shadow:0 1px 3px rgba(0,0,0,.18); cursor:pointer; margin-top:-6px; }
.dpanel .grid input[type=range]::-moz-range-thumb { width:17px; height:17px; border-radius:50%;
    background:var(--teal); border:2.5px solid var(--card); cursor:pointer; }

/* Строки ключ-значение (реле/модем) */
.dpanel .rows { display:flex; flex-direction:column; gap:2px; }
.dpanel .krow { display:flex; align-items:center; justify-content:space-between; padding:9px 2px;
                border-bottom:1px solid var(--line); }
.dpanel .krow:last-child { border-bottom:0; }
.dpanel .krow .k { font-size:13px; color:var(--ink-2); }
.dpanel .krow .v { font-size:13px; font-weight:500; color:var(--ink); }

/* Тумблер прототипа */
.dpanel .switch { position:relative; width:40px; height:23px; flex:none; display:inline-block; }
.dpanel .switch input { opacity:0; width:0; height:0; position:absolute; }
.dpanel .track { position:absolute; inset:0; border-radius:999px; background:var(--tile-2); transition:.15s; cursor:pointer; }
.dpanel .track:before { content:""; position:absolute; width:17px; height:17px; border-radius:50%;
                        left:3px; top:3px; background:#fff; transition:.15s; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.dpanel .switch input:checked + .track { background:var(--teal); }
.dpanel .switch input:checked + .track:before { transform:translateX(17px); }

/* Кнопки режимов-пресетов */
.dpanel .modes { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.dpanel .mode { border:1px solid var(--line-2); background:var(--card); border-radius:var(--radius-sm);
                padding:13px 10px; text-align:center; font-size:13px; color:var(--ink); cursor:pointer;
                display:flex; flex-direction:column; align-items:center; gap:7px; }
.dpanel .mode:hover { border-color:var(--teal); }
.dpanel .mode.on { background:var(--teal); border-color:transparent; color:#fff; }
.dpanel .mode .mi { font-size:20px; line-height:1; }

/* Плитки шины датчиков (имя + адрес) */
.dpanel .obj-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; }
.dpanel .otile { background:var(--tile); border-radius:var(--radius-sm); padding:10px 11px;
                 display:flex; align-items:center; gap:10px; }
.dpanel .otile .v { font-size:17px; font-weight:500; color:var(--teal-d); }
.dpanel .otile .nm { font-size:12px; color:var(--ink); }
.dpanel .otile .id { font-size:10px; color:var(--ink-3); }
.dpanel .note { font-size:12.5px; color:var(--ink-2); background:var(--tile);
                border-radius:var(--radius-sm); padding:9px 11px; line-height:1.45; }

/* Сводка для вида «Список» (скрыта в карточных видах) */
.dpanel .lsum { display:none; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-2);
                margin-left:auto; flex-wrap:wrap; justify-content:flex-end; }
.dpanel .lsum .lv { color:var(--ink); font-weight:500; }

/* Шестерёнка настроек устройства + тултип (задание п.3) */
.dpanel .gear-btn { position:relative; width:28px; height:28px; border-radius:8px;
                    border:1px solid transparent; background:transparent; color:var(--ink-3);
                    cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.dpanel .gear-btn:hover { background:var(--tile); color:var(--teal); border-color:var(--line); }
.dpanel .gear-btn .tip { position:absolute; top:calc(100% + 6px); right:0; background:var(--ink);
                         color:var(--page); font-size:11.5px; font-weight:400; white-space:nowrap;
                         padding:5px 9px; border-radius:7px; opacity:0; pointer-events:none;
                         transition:opacity .12s; z-index:25; box-shadow:0 4px 14px rgba(0,0,0,.2); }
.dpanel .gear-btn:hover .tip { opacity:1; }

/* Контент настроек устройства: скрыт в карточке, показывается в модалке #devModal */
div.dev-set { display:none; }
#devModal div.dev-set { display:block; }

/* --- Вид «Воздушный» (airy) --- */
.dpanel[data-variant="airy"] .grid { column-gap:20px; grid-template-columns:repeat(auto-fill,minmax(336px,1fr)); }
.dpanel[data-variant="airy"] .grid .card { border-color:transparent; box-shadow:0 1px 14px rgba(18,48,44,.05); }
.dpanel[data-variant="airy"] .grid .card:hover { border-color:transparent; }
.dpanel[data-variant="airy"] .gicon { display:none; }
.dpanel[data-variant="airy"] .type-chip { display:none; }
.dpanel[data-variant="airy"] .chead { padding:15px 18px 8px; }
.dpanel[data-variant="airy"] .cbody { padding:2px 18px 14px; }
.dpanel[data-variant="airy"] .cname { font-size:15px; }
.dpanel[data-variant="airy"] .cstatus { color:var(--ink-3); }
.dpanel[data-variant="airy"] .metric { background:transparent; padding:2px 0; }
.dpanel[data-variant="airy"] .metric .v { font-size:26px; }
.dpanel[data-variant="airy"] .metrics { gap:8px 26px; grid-template-columns:repeat(auto-fit,minmax(74px,auto)); }
.dpanel[data-variant="airy"] .otile { background:transparent; padding:6px 4px; }

/* --- Вид «Список» (плотные строки) --- */
.dpanel .grid.list { grid-template-columns:1fr; column-gap:0; row-gap:0; grid-auto-rows:auto;
                     background:var(--card); border:1px solid var(--line); border-radius:14px;
                     overflow:hidden; box-shadow:var(--shadow-c); padding:0; margin:6px 0 18px; }
.dpanel .grid.list .card { border:0; border-bottom:1px solid var(--line); border-radius:0;
                           box-shadow:none; background:transparent; grid-row:auto !important;
                           overflow:visible; display:flex; flex-direction:row; align-items:center;
                           gap:10px; padding:0 16px; flex-wrap:wrap; }
.dpanel .grid.list .card.alarm { border-left:3px solid var(--red); }
.dpanel .grid.list .card:last-child { border-bottom:0; }
.dpanel .grid.list .card.wide { grid-column:auto; }
.dpanel .grid.list .chead { flex:0 1 auto; padding:12px 0; min-width:0; }
.dpanel .grid.list .cbody { display:none; }
.dpanel .grid.list .cstatus { margin-left:8px; }
.dpanel .grid.list .acts { display:none; }
.dpanel .grid.list .gear-btn { display:none; }
.dpanel .grid.list .gicon { width:26px; height:26px; }
.dpanel .grid.list .lsum { display:flex; }

/* Поповер «Вид панели» в шапке (Bootstrap dropdown со стилями .pop прототипа) */
.viewpop { min-width:250px; padding:10px; border-radius:12px; }
.viewpop h6 { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3);
              margin:2px 8px 8px; font-weight:500; }
.viewpop .opt { display:flex; align-items:center; gap:10px; padding:8px 9px; border-radius:8px;
                cursor:pointer; font-size:.88rem; color:var(--ink); }
.viewpop .opt:hover { background:var(--tile); }
.viewpop .opt .rd { width:16px; height:16px; border-radius:50%; border:2px solid var(--line-2); flex:none; }
.viewpop .opt.on { color:var(--teal-d); font-weight:600; }
.viewpop .opt.on .rd { border-color:var(--teal); box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 8px var(--teal); }
.viewpop .opt small { color:var(--ink-3); font-weight:400; margin-left:auto; }
.viewpop .vnote { font-size:.74rem; color:var(--ink-3); padding:8px 9px 2px; line-height:1.4; }

/* Мобильная ширина: одна колонка, равновысокость выключена (спека §8) */
@media (max-width: 760px) {
    .dpanel .grid { grid-template-columns:1fr; grid-auto-rows:auto; }
    .dpanel .grid .card { grid-row:auto !important; }
}
@media (prefers-reduced-motion: reduce) {
    .dpanel .flame { animation:none; }
}

/* ============================================================================
   ТЁМНАЯ ТЕМА — АКТИВАЦИЯ (дизайн-ветка, 12.07.2026).
   Переключатель в навбаре (base.html) ставит data-theme + data-bs-theme на <html>;
   выбор в localStorage('av_theme'), дефолт — prefers-color-scheme.
   Токены :root[data-theme="dark"] заданы выше. Bootstrap-компоненты (модалки,
   дропдауны, формы, .text-muted, .table) красит сам Bootstrap 5.3 по data-bs-theme;
   здесь — доводка хрома, который использовал захардкоженные светлые цвета (не токены).
   ============================================================================ */
:root[data-theme="dark"] { --bg-main:#0E1917; --ikc-cyan-light:#123331; }

[data-theme="dark"] body { background-color: var(--page); color: var(--ink); }

/* Подвал */
[data-theme="dark"] .ikc-footer { background-color: var(--card); border-top-color: var(--line); }
[data-theme="dark"] .ikc-footer .text-dark { color: var(--ink) !important; }
[data-theme="dark"] .ikc-footer .text-muted { color: var(--ink-3) !important; }

/* Табы / пилюли / сегменты */
[data-theme="dark"] .nav-tabs { border-bottom-color: var(--line); }
[data-theme="dark"] .nav-tabs .nav-link { color: var(--ink-2); }
[data-theme="dark"] .nav-tabs .nav-link:hover { background: var(--teal-100); color: var(--teal-d); }
[data-theme="dark"] .seg { background: var(--tile); box-shadow: var(--shadow-c); }
[data-theme="dark"] .seg .seg-btn { color: var(--ink-2); }
[data-theme="dark"] .zone-pills .nav-link,
[data-theme="dark"] .ctrl-tabs .nav-link { color: var(--ink-2); }
[data-theme="dark"] .ctrl-tab-item { background: var(--tile); }
[data-theme="dark"] .ctab-arrow { color: var(--ink-3); }

/* Контейнеры и Bootstrap-карточки ВНЕ сетки панели (профиль/пользователи/автоматизации/логин/…) */
[data-theme="dark"] .ctrl-container { background: var(--tile); }
[data-theme="dark"] .card { background: var(--card); border-color: var(--line); box-shadow: var(--shadow-c); color: var(--ink); }
[data-theme="dark"] .card-header { background: var(--tile); border-bottom-color: var(--line); color: var(--ink); }
[data-theme="dark"] .btn-icon { color: var(--ink-3); }
[data-theme="dark"] .btn-icon:hover { background: var(--tile); color: var(--teal-d); }
[data-theme="dark"] .dev-name-input { color: var(--ink) !important; }

/* Ползунок / прочее */
[data-theme="dark"] input[type=range]::-webkit-slider-runnable-track { background: var(--line-2); }
[data-theme="dark"] .flame-off { stroke: var(--ink-3); }
[data-theme="dark"] #ph-power { background: var(--teal-100) !important; color: var(--teal-d) !important; }

/* Bootstrap-утилиты, которые сами не инвертируются в data-bs-theme=dark */
[data-theme="dark"] .bg-light { background-color: var(--tile) !important; }
[data-theme="dark"] .text-dark { color: var(--ink) !important; }