/* СМК 0.45 · общий стиль макетов. Имена переменных совпадают с приложением (--bg, --card, --raised, --txt, --dim, --teal, --onteal, --ok, --warn, --alarm, --pr, --off). Новое: роли кнопок, «выбрано», статусы словом. */

/* ---------- Тёмная тема (релиз) ---------- */
.n45 {
  --bg: #0f1416; --bar: #141a1d; --well: #12181b; --card: #182024; --card-hi: #1d272b; --dlg: #1c2428;
  --raised: #222b30; --raised-hi: #2a353a;
  --line: rgba(255,255,255,.06); --line-2: rgba(255,255,255,.11);
  --txt: #e8eef0; --soft: #c9d4d8; --sec: #b7c3c8; --dim: #8a9aa1; --faint: #5d6d74;
  --acc: #4fd1c5; --acc-txt: #6fe3d8; --teal: linear-gradient(180deg, #6fe3d8, #45c2b6); --teal-hi: linear-gradient(180deg, #84ebe1, #52cfc3); --teal-press: #3aa99e; --onteal: #0b2422;
  --sel-bg: #263236; --sel-line: rgba(111,227,216,.45);
  --ok: #3fd68f; --ok-txt: #6fd8a4; --ok-bg: rgba(63,214,143,.12);
  --warn: #f5b83d; --warn-txt: #ffd27a; --warn-bg: rgba(245,184,61,.12); --warn-tint: linear-gradient(180deg, rgba(245,184,61,.10), rgba(245,184,61,.02) 60%);
  --alarm: #ff5a52; --alarm-txt: #ff8a84; --alarm-bg: rgba(255,90,82,.14); --alarm-tint: linear-gradient(180deg, rgba(255,90,82,.16), rgba(255,90,82,.03) 60%);
  --alarm-fill: linear-gradient(180deg, #ff8a84, #ff5a52); --onalarm: #2a0c0a; --warn-fill: linear-gradient(180deg, #ffd27a, #f5b83d); --onwarn: #2a1d00;
  --pr: #4d9bff; --pr-txt: #8fc0ff; --pr-bg: rgba(77,155,255,.14);
  --off: #3a464b; --off-txt: #b7c3c8; --off-bg: #222b30;
  --focus: #6fe3d8;
  --sh-card: none; --sh-pop: 0 24px 60px -20px rgba(0,0,0,.85); --scrim: rgba(5,8,9,.64);
  --chart-1: #f5c06a; --chart-2: #6fb6ff; --chart-3: #8fe0a8; --chart-set: #6fe3d8; --chart-grid: rgba(255,255,255,.06);
  font-family: Onest, system-ui, sans-serif; color: var(--txt); background: var(--bg);
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; box-sizing: border-box;
}
/* ---------- Светлая тема (позже) ---------- */
.n45.th-light {
  --bg: #eef2f3; --bar: #f7f9fa; --well: #e7ecee; --card: #ffffff; --card-hi: #f4f7f8; --dlg: #ffffff;
  --raised: #eef2f3; --raised-hi: #e3e9eb;
  --line: rgba(18,38,46,.10); --line-2: rgba(18,38,46,.17);
  --txt: #16232a; --soft: #2c3b42; --sec: #3d4d54; --dim: #56666d; --faint: #9aa8ae;
  --acc: #0a7a70; --acc-txt: #0a6f65; --teal: linear-gradient(180deg, #12897d, #0a6f65); --teal-hi: linear-gradient(180deg, #16978a, #0b7a6f); --teal-press: #085e56; --onteal: #ffffff;
  --sel-bg: #e0f1ef; --sel-line: rgba(10,122,112,.45);
  --ok: #179a5d; --ok-txt: #11784a; --ok-bg: rgba(26,168,101,.12);
  --warn: #e0960f; --warn-txt: #8f5b00; --warn-bg: rgba(224,150,15,.14); --warn-tint: linear-gradient(180deg, rgba(224,150,15,.10), rgba(224,150,15,.02) 60%);
  --alarm: #dc3f36; --alarm-txt: #a8291f; --alarm-bg: rgba(214,58,50,.11); --alarm-tint: linear-gradient(180deg, rgba(214,58,50,.10), rgba(214,58,50,.02) 60%);
  --alarm-fill: linear-gradient(180deg, #e5554c, #c8322a); --onalarm: #ffffff; --warn-fill: linear-gradient(180deg, #f2b13b, #e0960f); --onwarn: #2a1d00;
  --pr: #1d68c7; --pr-txt: #1d5bb0; --pr-bg: rgba(29,104,199,.11);
  --off: #c2ccd0; --off-txt: #3d4d54; --off-bg: #e8edef;
  --focus: #0a7a70;
  --sh-card: 0 1px 2px rgba(18,38,46,.06), 0 8px 24px -14px rgba(18,38,46,.20); --sh-pop: 0 24px 60px -20px rgba(18,38,46,.38); --scrim: rgba(16,28,33,.40);
  --chart-1: #c27a06; --chart-2: #1d68c7; --chart-3: #179a5d; --chart-set: #0a7a70; --chart-grid: rgba(18,38,46,.08);
}

.n45 *, .n45 *::before, .n45 *::after { box-sizing: border-box; }
.n45 button, .n45 input, .n45 select { font: inherit; color: inherit; }
.n45 button, .n45 a { -webkit-tap-highlight-color: transparent; }
.n45 a { color: inherit; text-decoration: none; }
.n45 h1, .n45 h2, .n45 h3, .n45 p { margin: 0; }
.n45 :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Текст ---------- */
.n45 .t-display { font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: -.01em; }
.n45 .t-h1 { font-size: 20px; line-height: 1.25; font-weight: 700; }
.n45 .t-h2 { font-size: 17px; line-height: 1.3; font-weight: 700; }
.n45 .t-h3 { font-size: 15px; line-height: 1.35; font-weight: 700; }
.n45 .t-body { font-size: 14px; line-height: 1.45; }
.n45 .t-small { font-size: 13px; line-height: 1.4; }
.n45 .t-cap { font-size: 12px; line-height: 1.35; font-weight: 600; }
.n45 .t-over { font-size: 12px; line-height: 1.3; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.n45.ph .t-display { font-size: 40px; }
.n45.ph .t-h1 { font-size: 22px; }
.n45.ph .t-h2 { font-size: 18px; }
.n45.ph .t-h3 { font-size: 16px; }
.n45.ph .t-body { font-size: 15px; }
.n45 .c-txt { color: var(--txt); } .n45 .c-soft { color: var(--soft); } .n45 .c-sec { color: var(--sec); } .n45 .c-dim { color: var(--dim); } .n45 .c-acc { color: var(--acc-txt); }
.n45 .c-ok { color: var(--ok-txt); } .n45 .c-warn { color: var(--warn-txt); } .n45 .c-alarm { color: var(--alarm-txt); } .n45 .c-pr { color: var(--pr-txt); }
.n45 .num { font-variant-numeric: tabular-nums; }

/* ---------- Кнопки: пять ролей ---------- */
.n45 .btn { height: 40px; padding: 0 16px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  font-size: 14px; font-weight: 600; color: var(--txt); background: var(--raised); border: 1px solid var(--line-2); cursor: pointer; }
.n45 .btn svg { flex: none; }
.n45 .btn:hover, .n45 .btn.is-hover { background: var(--raised-hi); }
.n45 .btn:active, .n45 .btn.is-press { background: var(--card-hi); border-color: var(--sel-line); }
.n45 .btn.is-focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.n45 .btn[disabled], .n45 .btn.is-off { color: var(--faint); background: var(--well); border-color: var(--line); cursor: not-allowed; }
.n45 .btn.primary { color: var(--onteal); background: var(--teal); border-color: transparent; font-weight: 700; }
.n45 .btn.primary:hover, .n45 .btn.primary.is-hover { background: var(--teal-hi); }
.n45 .btn.primary:active, .n45 .btn.primary.is-press { background: var(--teal-press); }
.n45 .btn.primary[disabled], .n45 .btn.primary.is-off { color: var(--onteal); background: var(--teal); opacity: .38; }
.n45 .btn.quiet { color: var(--acc-txt); background: transparent; border-color: transparent; padding: 0 8px; }
.n45 .btn.quiet:hover, .n45 .btn.quiet.is-hover { background: var(--sel-bg); }
.n45 .btn.quiet:active, .n45 .btn.quiet.is-press { background: var(--sel-bg); border-color: var(--sel-line); }
.n45 .btn.quiet[disabled], .n45 .btn.quiet.is-off { color: var(--faint); background: transparent; }
.n45 .btn.danger { color: var(--alarm-txt); background: transparent; border-color: var(--alarm); border-color: color-mix(in srgb, var(--alarm) 55%, transparent); }
.n45 .btn.danger:hover, .n45 .btn.danger.is-hover { background: var(--alarm-bg); }
.n45 .btn.danger:active, .n45 .btn.danger.is-press { background: var(--alarm-bg); border-color: var(--alarm); }
.n45 .btn.urgent { color: var(--onalarm); background: var(--alarm-fill); border-color: transparent; font-weight: 700; }
.n45 .btn.urgent.amber { color: var(--onwarn); background: var(--warn-fill); }
.n45 .btn.lg { height: 48px; padding: 0 20px; font-size: 16px; border-radius: 12px; }
.n45 .btn.sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.n45 .btn.ico { width: 40px; padding: 0; }
.n45 .btn.ico.lg { width: 48px; }
.n45 .btn.wide { width: 100%; }
.n45.ph .btn { height: 48px; font-size: 16px; }
.n45.ph .btn.sm { height: 44px; font-size: 15px; }
.n45.ph .btn.ico { width: 48px; }
.n45.ph .btn.quiet { height: 44px; font-size: 15px; }
.n45 .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; opacity: .8; }

/* ---------- Выбор: вкладки, сегменты, фильтры ---------- */
.n45 .tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.n45 .tab { flex: none; height: 46px; padding: 0; display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-size: 15px; font-weight: 600; color: var(--dim); cursor: pointer; }
.n45 .tab:hover { color: var(--soft); }
.n45 .tab.on { color: var(--txt); font-weight: 700; border-bottom-color: var(--acc); }
.n45.ph .tabs { gap: 22px; padding: 0 16px; }
.n45 .seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--well); border: 1px solid var(--line); }
.n45 .seg .sb { height: 32px; padding: 0 14px; border-radius: 9px; border: 0; background: transparent; font-size: 13px; font-weight: 600; color: var(--dim); cursor: pointer; }
.n45 .seg .sb.on { color: var(--txt); background: var(--raised); box-shadow: 0 1px 0 var(--line-2) inset; }
.n45.ph .seg .sb { height: 38px; padding: 0 14px; font-size: 14px; }
.n45 .pills { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.n45 .pill { flex: none; height: 36px; padding: 0 14px; border-radius: 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  color: var(--sec); background: var(--card); border: 1px solid var(--line-2); cursor: pointer; }
.n45 .pill .n { font-weight: 700; color: var(--dim); }
.n45 .pill.on { color: var(--acc-txt); background: var(--sel-bg); border-color: var(--sel-line); }
.n45 .pill.on .n { color: var(--acc-txt); }
.n45 .pill .n.hot { color: var(--alarm-txt); }
.n45 .pill .n.att { color: var(--warn-txt); }
.n45.ph .pill { height: 40px; }

/* ---------- Переключатели и флажки ---------- */
.n45 .tgl { flex: none; width: 46px; height: 28px; border-radius: 14px; padding: 3px; background: var(--raised-hi); border: 1px solid var(--line-2); display: inline-flex; }
.n45 .tgl::after { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--sec); }
.n45 .tgl.on { background: var(--acc); border-color: transparent; justify-content: flex-end; }
.n45 .tgl.on::after { background: var(--onteal); }
.n45 .chk { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--dim); display: grid; place-items: center; color: var(--onteal); }
.n45 .chk.on { background: var(--acc); border-color: var(--acc); }

/* ---------- Статус словом ---------- */
.n45 .st { height: 24px; padding: 0 8px; border-radius: 6px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; font-weight: 600; }
.n45 .st i { flex: none; width: 6px; height: 6px; border-radius: 50%; }
.n45 .st.lg { height: 28px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.n45 .st.lg i { width: 7px; height: 7px; }
.n45 .st.ok { color: var(--ok-txt); background: var(--ok-bg); } .n45 .st.ok i { background: var(--ok); }
.n45 .st.warn { color: var(--warn-txt); background: var(--warn-bg); } .n45 .st.warn i { background: var(--warn); }
.n45 .st.alarm { color: var(--alarm-txt); background: var(--alarm-bg); } .n45 .st.alarm i { background: var(--alarm); }
.n45 .st.pr { color: var(--pr-txt); background: var(--pr-bg); } .n45 .st.pr i { background: var(--pr); }
.n45 .st.off { color: var(--off-txt); background: var(--off-bg); } .n45 .st.off i { background: transparent; border: 1.5px solid var(--dim); }
.n45 .st.mount { color: var(--sec); background: var(--off-bg); } .n45 .st.mount i { background: var(--dim); }
.n45 .stedit { height: 40px; padding: 0 10px 0 12px; border-radius: 12px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; cursor: pointer;
  background: var(--card); border: 1px solid var(--line-2); color: var(--txt); }
.n45 .stedit .st { pointer-events: none; }
.n45 .stedit:hover { background: var(--card-hi); }
.n45.ph .stedit { height: 44px; }
.n45 .mode { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sec); white-space: nowrap; }
.n45 .bdg { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--onteal); background: var(--acc); }
.n45 .bdg.hot { color: var(--onalarm); background: var(--alarm); }
.n45 .bdg.pr { color: #fff; background: var(--pr); }

/* ---------- Карточки и строки ---------- */
.n45 .card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-card); }
.n45 .card.link { cursor: pointer; display: block; }
.n45 .card.link:hover, .n45 .card.link.is-hover { background: var(--card-hi); }
.n45 .card.link:active, .n45 .card.link.is-press { background: var(--card-hi); border-color: var(--sel-line); }
.n45 .card.s-alarm { border-color: var(--alarm); background: var(--alarm-tint), var(--card); }
.n45 .card.s-warn { border-color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); background: var(--warn-tint), var(--card); }
.n45 .card.s-pr { border-color: var(--pr); border-color: color-mix(in srgb, var(--pr) 40%, transparent); }
.n45 .card.s-off { border-style: dashed; border-color: var(--line-2); background: var(--well); }
.n45 .card.s-off .dimmable { opacity: .55; }
.n45 .chev { flex: none; color: var(--dim); }
.n45 .group { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--sh-card); }
.n45 .lrow { min-height: 56px; padding: 0 14px 0 16px; display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); cursor: pointer; }
.n45 .lrow:first-child { border-top: 0; }
.n45 .lrow:hover { background: var(--card-hi); }
.n45 .lrow .lt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.n45 .lrow .lv { color: var(--dim); font-size: 14px; white-space: nowrap; }
.n45 button.lrow { width: 100%; text-align: left; background: transparent; border-left: 0; border-right: 0; border-bottom: 0; border-radius: 0; }
.n45 button.lrow:first-child { border-top: 0; }
.n45 .lrow.on, .n45 button.lrow.on { background: var(--sel-bg); color: var(--acc-txt); font-weight: 700; }
.n45 .lrow.on .chev { color: var(--acc-txt); }
.n45 .ic-box { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--raised); color: var(--soft); }

/* ---------- Поля ---------- */
.n45 .field { display: flex; flex-direction: column; gap: 6px; }
.n45 .field .lbl { font-size: 13px; font-weight: 600; color: var(--sec); }
.n45 .inp { height: 44px; padding: 0 14px; border-radius: 12px; display: flex; align-items: center; gap: 10px; background: var(--well); border: 1px solid var(--line-2); font-size: 15px; color: var(--txt); }
.n45 .inp input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-size: 15px; color: var(--txt); }
.n45 .inp input::placeholder { color: var(--dim); }
.n45 .inp.is-focus { border-color: var(--acc); box-shadow: 0 0 0 3px var(--sel-bg); }
.n45 .inp.is-err { border-color: var(--alarm); }
.n45 .help { font-size: 12px; color: var(--dim); }
.n45 .help.err { color: var(--alarm-txt); font-weight: 600; }
.n45.ph .inp { height: 48px; }
.n45 .stp { display: flex; align-items: center; gap: 8px; }
.n45 .stp .v { min-width: 72px; text-align: center; font-size: 24px; font-weight: 700; color: var(--txt); }
.n45 .stp .v.chg { color: var(--warn-txt); }
.n45 .was { font-size: 12px; color: var(--dim); }
.n45 .was s { color: var(--dim); }
.n45 .lock { flex: none; color: var(--dim); }
.n45 .diff { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px auto; align-items: baseline; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; }
.n45 .diff:first-child { border-top: 0; }
.n45 .diff .o { color: var(--dim); text-decoration: line-through; }
.n45 .diff .a { color: var(--dim); }
.n45 .diff .nv { color: var(--txt); font-weight: 700; }

/* ---------- Сообщения ---------- */
.n45 .ban { min-height: 44px; padding: 8px 4px 8px 14px; border-radius: 12px; display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.35; }
.n45 .ban .bt { flex: 1; min-width: 0; }
.n45 .ban .x { flex: none; width: 40px; height: 40px; border: 0; background: none; display: grid; place-items: center; color: var(--dim); cursor: pointer; border-radius: 10px; }
.n45 .ban.info { color: var(--soft); background: var(--raised); border: 1px solid var(--line); }
.n45 .ban.warn { color: var(--warn-txt); background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.n45 .ban.alarm { color: var(--alarm-txt); background: var(--alarm-bg); border: 1px solid color-mix(in srgb, var(--alarm) 45%, transparent); }
.n45 .toast { padding: 12px 8px 12px 14px; border-radius: 14px; display: flex; align-items: center; gap: 12px; background: var(--dlg); border: 1px solid var(--line-2); box-shadow: var(--sh-pop); font-size: 14px; }
.n45 .alarmbar { height: 40px; padding: 0 14px; border-radius: 20px; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; white-space: nowrap;
  color: var(--alarm-txt); background: var(--alarm-bg); border: 1px solid var(--alarm); cursor: pointer; }
.n45 .alarmbar i { width: 8px; height: 8px; border-radius: 50%; background: var(--alarm); box-shadow: 0 0 0 4px var(--alarm-bg); }

/* ---------- Окна ---------- */
.n45 .scrim { position: absolute; inset: 0; background: var(--scrim); }
.n45 .sheet { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 16px 18px; border-radius: 22px 22px 0 0; background: var(--dlg); border-top: 1px solid var(--line-2); box-shadow: var(--sh-pop); display: flex; flex-direction: column; gap: 14px; }
.n45 .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line-2); margin: 0 auto 2px; }
.n45 .acts2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.n45 .dlg { width: 560px; padding: 24px; border-radius: 20px; background: var(--dlg); border: 1px solid var(--line-2); box-shadow: var(--sh-pop); display: flex; flex-direction: column; gap: 18px; }
.n45 .dlg .acts { display: flex; justify-content: flex-end; gap: 10px; }
.n45 .pin { display: flex; gap: 10px; }
.n45 .pin span { width: 44px; height: 52px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; font-weight: 700; background: var(--well); border: 1px solid var(--line-2); }
.n45 .pin span.f { border-color: var(--acc); }
.n45 .skel { border-radius: 8px; background: linear-gradient(90deg, var(--raised) 0%, var(--raised-hi) 50%, var(--raised) 100%); }
.n45 .empty { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 28px 20px; }
.n45 .empty .ei { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--raised); color: var(--dim); }

/* ---------- Навигация ---------- */
.n45 .navb { flex: none; height: 76px; padding: 0 8px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; background: var(--bar); border-top: 1px solid var(--line); }
.n45 .navb a { height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--dim); }
.n45 .navb a .ic { position: relative; width: 60px; height: 32px; border-radius: 16px; display: grid; place-items: center; }
.n45 .navb a .ic .bdg { position: absolute; top: -2px; right: 8px; }
.n45 .navb a.on { color: var(--acc-txt); font-weight: 700; }
.n45 .navb a.on .ic { background: var(--sel-bg); }
.n45 .side { flex: none; width: 236px; padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; background: var(--bar); border-right: 1px solid var(--line); }
.n45 .side .grp { padding: 14px 12px 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.n45 .side .it { height: 40px; padding: 0 12px; border-radius: 10px; display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: var(--sec); cursor: pointer; }
.n45 .side .it:hover { background: var(--raised); color: var(--txt); }
.n45 .side .it.on { background: var(--sel-bg); color: var(--acc-txt); font-weight: 700; }
.n45 .side .it.is-press { background: var(--raised-hi); color: var(--txt); }
.n45 .side .it .bdg { margin-left: auto; }
.n45 .topbar { flex: none; height: 68px; padding: 0 28px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); }
.n45 .search { height: 40px; width: 300px; padding: 0 8px 0 12px; border-radius: 12px; display: flex; align-items: center; gap: 10px; background: var(--well); border: 1px solid var(--line-2); font-size: 14px; color: var(--dim); }
.n45 .kbd { font-size: 11px; font-weight: 600; color: var(--dim); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line-2); }

/* ---------- Боковое меню: раскрыто / свёрнуто / выдвижное ---------- */
.n45 .side .it .tx { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n45 .side .tog { margin-left: auto; width: 36px; height: 36px; border-radius: 10px; border: 0; background: transparent; color: var(--dim); display: grid; place-items: center; cursor: pointer; }
.n45 .side .tog:hover { background: var(--raised); color: var(--txt); }
.n45 .side.mini { width: 76px; padding: 12px 8px; align-items: center; }
.n45 .side.mini .it { width: 56px; height: 44px; padding: 0; justify-content: center; position: relative; }
.n45 .side.mini .it .tx { display: none; }
.n45 .side.mini .it .bdg { position: absolute; top: 4px; right: 2px; margin: 0; }
.n45 .side.mini .grp { width: 40px; height: 1px; padding: 0; margin: 10px 0; font-size: 0; background: var(--line-2); }
.n45 .side.mini .tog { margin: 0 0 6px; }
.n45 .drawer { position: absolute; top: 0; bottom: 0; left: 0; z-index: 3; width: 280px; box-shadow: var(--sh-pop); }
.n45 .tip { position: absolute; z-index: 4; padding: 8px 12px; border-radius: 10px; background: var(--dlg); border: 1px solid var(--line-2); box-shadow: var(--sh-pop); font-size: 14px; font-weight: 600; white-space: nowrap; }

/* ---------- Полосы показаний: влажность, фазы ---------- */
.n45 { --ph-a: #f5c34a; --ph-b: #3fd68f; --ph-c: #ff6b63; }
.n45.th-light { --ph-a: #c79100; --ph-b: #179a5d; --ph-c: #d0433a; }
.n45 .meter { position: relative; height: 10px; border-radius: 5px; background: var(--raised); }
.n45 .meter b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; }
.n45 .meter .tick { position: absolute; top: -4px; bottom: -4px; width: 2px; border-radius: 1px; background: var(--txt); opacity: .7; }
.n45 .mrow { display: grid; grid-template-columns: 92px minmax(0, 1fr) 84px; gap: 12px; align-items: center; font-size: 14px; }
.n45 .mrow .mv { text-align: right; font-size: 17px; font-weight: 700; }
.n45 .mrow .mv small { font-size: 12px; font-weight: 600; color: var(--dim); margin-left: 3px; }
.n45 .fill { flex: 1 1 0; min-height: 0; }

/* ---------- Каркас ПК и планшета ---------- */
.n45 .main { flex: 1; min-height: 0; padding: 24px 32px; display: flex; flex-direction: column; gap: 18px; overflow: hidden; }
.n45.dev-tab .main { padding: 18px 20px; gap: 14px; }
.n45.dev-tab .topbar { padding: 0 20px; gap: 14px; }
.n45 .tabsbar { flex: none; padding: 0 32px; }
.n45.dev-tab .tabsbar { padding: 0 20px; }
.n45 .cols { flex: 1; min-height: 0; display: grid; gap: 20px; }
.n45.dev-tab .cols { gap: 14px; }
.n45.dev-tab .hide-tab { display: none !important; }
.n45.b-admin .work-only { display: none !important; }
.n45:not(.b-admin) .admin-only { display: none !important; }
.n45:not(.dev-tab) .only-tab { display: none !important; }

/* ---------- Таблицы и пары «ключ — значение» ---------- */
.n45 .tbl { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--sh-card); }
.n45 .tbl .th { display: grid; gap: 14px; align-items: center; padding: 11px 18px; background: var(--well); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); }
.n45 .tbl .tr { display: grid; gap: 14px; align-items: center; padding: 11px 18px; border-top: 1px solid var(--line); font-size: 14px; }
.n45 .tbl .tr.link { cursor: pointer; }
.n45 .tbl .tr.link:hover { background: var(--card-hi); }
.n45 .tbl .tr.on { background: var(--sel-bg); }
.n45 .kv { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.n45 .kv:first-child { border-top: 0; }
.n45 .kv .k { color: var(--dim); }
.n45 .kv .v { font-weight: 600; text-align: right; }
.n45 .area { min-height: 96px; padding: 12px 14px; border-radius: 12px; background: var(--well); border: 1px solid var(--line-2); font-size: 15px; line-height: 1.45; color: var(--txt); }
.n45 .drop { min-height: 72px; padding: 14px; border-radius: 12px; border: 1.5px dashed var(--sel-line); background: var(--sel-bg); display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--acc-txt); font-size: 14px; font-weight: 600; text-align: center; }
.n45 .file { height: 32px; padding: 0 10px; border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; background: var(--raised); border: 1px solid var(--line); font-size: 13px; }
.n45 .av { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--raised); font-weight: 700; font-size: 14px; }

/* ---------- Мастер: шаги и чек-лист ---------- */
.n45 .steps { display: grid; gap: 8px; }
.n45 .step { min-height: 60px; padding: 8px 14px; border-radius: 14px; display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); }
.n45 .step .sn { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; color: var(--dim); background: var(--raised); }
.n45 .step.done .sn { color: var(--onteal); background: var(--ok); }
.n45 .step.on { background: var(--sel-bg); border-color: var(--sel-line); }
.n45 .step.on .sn { color: var(--onteal); background: var(--acc); }
.n45 .step.todo { opacity: .6; }
.n45 .ck { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.4; }
.n45 .ck:first-child { border-top: 0; }
.n45 .ck .cm { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; }
.n45 .ck .cm.ok { color: var(--onteal); background: var(--ok); }
.n45 .ck .cm.run { color: var(--acc-txt); border: 2px solid var(--acc); border-right-color: transparent; }
.n45 .ck .cm.wait { border: 2px solid var(--line-2); }
.n45 .ck .cm.bad { color: #fff; background: var(--alarm); }

/* ---------- Переписка, календарь ---------- */
.n45 .bub { max-width: 78%; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: var(--raised); font-size: 14px; line-height: 1.45; display: flex; flex-direction: column; gap: 4px; }
.n45 .bub.me { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--sel-bg); }
.n45 .bub .meta { font-size: 12px; color: var(--dim); }
.n45 .cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; font-size: 14px; }
.n45 .cal span { height: 40px; border-radius: 10px; display: grid; place-items: center; }
.n45 .cal .dw { height: 28px; font-size: 12px; font-weight: 700; color: var(--dim); }
.n45 .cal .out { color: var(--faint); }
.n45 .cal .has { font-weight: 700; }
.n45 .cal .on { color: var(--onteal); background: var(--acc); font-weight: 700; }
.n45 .cal .today { border: 1px solid var(--sel-line); }

/* ---------- Окна поверх экрана ---------- */
.n45 .over { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; }
.n45 .over > .scrim { z-index: 0; }
.n45 .over > .dlg { position: relative; z-index: 1; }

/* ---------- Кондиционер (рисунок-заглушка) ---------- */
.n45 .acpic { flex: none; width: 36px; height: 68px; border-radius: 4px; padding: 6px 5px; display: flex; flex-direction: column; gap: 3px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-2); }
.n45 .acpic span { height: 2px; background: var(--line-2); }
.n45 .acpic b { width: 9px; height: 6px; margin-top: 4px; border-radius: 1px; background: var(--pr); }

/* ---------- Пометки на макетах (не часть интерфейса) ---------- */
.n45 .mk { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 800; color: #1b0f2e; background: #cdb8ff; box-shadow: 0 0 0 3px rgba(205,184,255,.28); }
.n45 .legend { padding: 16px 18px; border-radius: 16px; border: 1px dashed rgba(205,184,255,.7); background: rgba(205,184,255,.06); display: grid; gap: 10px 28px; }
.n45 .legend > div { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.4; color: var(--soft); }
.n45 .legend b { color: var(--txt); }
.n45 .note { position: absolute; padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; line-height: 1.35; color: #1b0f2e; background: #cdb8ff; box-shadow: 0 6px 16px rgba(0,0,0,.35); }

/* ---------- карты переходов и «что где нажимается» (страницы сборок) */
.n45 .fl-card { break-inside: avoid; margin: 0 0 18px; padding: 16px 18px 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.n45 .fl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 4px; }
.n45 .fl-n { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 12px; border-radius: 10px; background: var(--raised); border: 1px solid var(--line-2); font-size: 14px; font-weight: 600; line-height: 1.25; }
.n45 .fl-n.ev { background: transparent; border-style: dashed; border-color: var(--dim); color: var(--soft); font-weight: 500; }
.n45 .fl-a { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 4px; color: var(--dim); }
.n45 .fl-a em { font-style: normal; font-size: 12px; line-height: 1.25; color: var(--soft); max-width: 240px; text-align: center; }
.n45 .fl-fan { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.n45 .pr-sec { column-span: all; margin: 10px 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.n45 .pr-card { break-inside: avoid; margin: 0 0 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.n45 .pr-h { padding: 11px 16px 9px; display: flex; align-items: baseline; gap: 10px; justify-content: space-between; font-size: 15px; }
.n45 .pr-h .c-dim { font-size: 11px; }
.n45 .pr-r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; padding: 7px 16px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.35; }
.n45 .pr-r > span:last-child { color: var(--soft); }
.n45 .pr-r b { color: var(--acc-txt); font-weight: 600; }