:root {
  color-scheme: dark;
  --bg:#0e1921; --panel:#192833; --panel2:#20333f; --line:#324956;
  --text:#edf5f7; --muted:#afc1c9; --link:#78c3ec;
  --ok:#73cc85; --warn:#f5c451; --alarm:#f18080;
  --offline:#b6a4c9; --service:#82b4ec;
  --shadow:0 8px 30px rgba(0,0,0,.12);
}
html[data-theme="light"] {
  color-scheme: light;
  --bg:#f1f5f7; --panel:#fff; --panel2:#f2f6f8; --line:#d7e2e8;
  --text:#142631; --muted:#526876; --link:#075eaa;
  --ok:#207838; --warn:#8a5700; --alarm:#b32323;
  --offline:#725388; --service:#155cb5;
  --shadow:0 8px 30px rgba(21,45,59,.06);
}
* { box-sizing:border-box }
body { margin:0; background:var(--bg); color:var(--text);
  font:14px/1.5 Inter,Roboto,Arial,sans-serif }
a { color:var(--link); text-decoration:none }
a:hover { text-decoration:underline }
button,input,select,textarea { font:inherit }
button,select,input,textarea { color:var(--text); background:var(--panel2);
  border:1px solid var(--line); border-radius:9px }
button { cursor:pointer; padding:10px 14px }
button:hover { border-color:var(--link) }
button:disabled { opacity:.55; cursor:not-allowed }
input,select,textarea { padding:10px 12px; min-height:44px }
textarea { width:100%; min-height:95px; resize:vertical }
:focus-visible { outline:3px solid var(--link); outline-offset:2px }
.skip { position:absolute; left:-9999px; top:5px }
.skip:focus { left:10px; z-index:100; background:var(--panel); padding:10px }
.top { position:sticky; top:0; z-index:10; display:flex; align-items:center;
  gap:13px; min-height:65px; padding:8px 22px; background:var(--panel);
  border-bottom:1px solid var(--line) }
.brand { font-size:18px; font-weight:800; color:var(--text); white-space:nowrap }
.search { max-width:380px; width:100%; margin-left:auto }
.search input { width:100% }
.top-actions { display:flex; gap:9px; align-items:center }
.muted { color:var(--muted) }
.link-btn { border:0; padding:7px; background:none }
.shell { display:grid; grid-template-columns:238px minmax(0,1fr); min-height:calc(100vh - 65px) }
.sidebar { border-right:1px solid var(--line); padding:16px 10px; background:var(--panel) }
.sidebar nav a { display:flex; align-items:center; gap:11px; padding:9px 13px;
  min-height:43px; border-radius:10px; color:var(--text) }
.sidebar nav a:hover,.sidebar nav a[aria-current="page"] {
  background:var(--panel2); text-decoration:none
}
.sidebar nav a[aria-current="page"] { border-left:3px solid var(--link) }
.sidebar small { display:block; padding:18px 13px 7px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.08em }
.sidebar .nav-icon { width:20px; text-align:center; color:var(--link); font-size:17px }
.sidebar.compact { width:70px }
.shell.compact { grid-template-columns:70px minmax(0,1fr) }
.compact .nav-label,.compact .side-caption { display:none }
.main { min-width:0; max-width:1800px; width:100%; margin:0 auto; padding:20px 26px 45px }
.banner { display:flex; justify-content:space-between; align-items:center; gap:15px;
  border:1px solid var(--alarm); border-left:5px solid var(--alarm);
  border-radius:12px; background:var(--panel); padding:12px 18px; margin-bottom:19px }
.breadcrumbs { color:var(--muted); margin:0 0 8px }
h1 { font-size:26px; line-height:1.2; margin:0 0 6px }
h2 { font-size:19px; margin:0 0 13px }
h3 { font-size:16px; margin:0 0 10px }
.intro { color:var(--muted); margin:0 0 18px }
.grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:15px }
.card { min-width:0; background:var(--panel); border:1px solid var(--line);
  border-radius:13px; padding:17px; box-shadow:var(--shadow) }
.kpi { grid-column:span 3; min-height:118px }
.kpi .value { font-size:27px; font-weight:750; margin:8px 0 4px }
.kpi .source { color:var(--muted); font-size:11px; overflow-wrap:anywhere }
.wide { grid-column:span 8 }
.narrow { grid-column:span 4 }
.full { grid-column:1/-1 }
.status { display:inline-flex; align-items:center; gap:5px; border:1px solid currentColor;
  border-radius:99px; padding:2px 8px; font-size:12px; font-weight:700; white-space:nowrap }
.status.ok { color:var(--ok) }.status.warn { color:var(--warn) }
.status.alarm { color:var(--alarm) }.status.offline { color:var(--offline) }
.status.service { color:var(--service) }
.panel-title { display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:12px }
.panel-title h2 { margin:0 }
.diagram { width:100%; min-height:180px; object-fit:contain; border-radius:12px;
  background:#132631 }
table { border-collapse:collapse; width:100% }
th,td { text-align:left; border-bottom:1px solid var(--line); padding:10px 8px; vertical-align:top }
th { color:var(--muted); font-size:12px; font-weight:650 }
.table-wrap { overflow-x:auto }
.toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.toolbar input { max-width:280px }
.menu-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px }
.menu-grid a { display:flex; flex-direction:column; gap:6px; border:1px solid var(--line);
  border-radius:10px; background:var(--panel2); padding:13px; color:var(--text) }
.menu-grid a:hover { border-color:var(--link); text-decoration:none }
.events { list-style:none; padding:0; margin:0 }
.events li { border-bottom:1px solid var(--line); padding:9px 0 }
.events li:last-child { border:0 }
.event-head { display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.event-head time { color:var(--muted) }
.actions a,.actions button { display:inline-flex; margin:4px 5px 4px 0 }
.note { border-left:3px solid var(--link); background:var(--panel2);
  padding:11px 13px; border-radius:5px; color:var(--muted) }
.detail-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px }
.detail-list div { background:var(--panel2); border-radius:9px; padding:10px }
.detail-list strong { display:block; font-size:12px; color:var(--muted) }
.modal-backdrop { position:fixed; inset:0; z-index:30; background:rgba(0,0,0,.7);
  display:grid; place-items:center; padding:15px }
.modal { width:min(100%,510px); background:var(--panel); border:1px solid var(--line);
  border-radius:15px; padding:23px }
.modal form { display:grid; gap:12px }
.modal-actions { display:flex; justify-content:flex-end; gap:8px }
.notice { position:fixed; right:18px; bottom:18px; z-index:40;
  background:var(--panel); border:1px solid var(--line);
  padding:13px 17px; border-radius:10px; max-width:350px }
.chart { width:100%; height:220px; display:block }
.mobile-toggle { display:none }
.footer { margin-top:22px; color:var(--muted); font-size:12px }
@media (max-width:1100px) {
  .kpi { grid-column:span 6 }
  .wide,.narrow { grid-column:span 12 }
  .menu-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:760px) {
  .top { flex-wrap:wrap; padding:9px 13px }
  .brand { font-size:16px }
  .search { order:3; max-width:none; flex:1 0 100% }
  .top-actions { margin-left:auto }
  .top .connection { display:none }
  .mobile-toggle { display:inline-block }
  .shell,.shell.compact { display:block }
  .sidebar { display:none }
  .sidebar.open { display:block }
  .main { padding:15px 12px 36px }
  .kpi { grid-column:span 6 }
  .menu-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  h1 { font-size:22px }
}
@media (max-width:420px) {
  .kpi { grid-column:span 12 }
  .menu-grid { grid-template-columns:1fr }
  .top-actions button { padding:7px 9px }
}


/* BMS inline SVG theme v2 */
.diagram-host {
  width: 100%;
  min-height: 180px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--panel2);
}
.diagram-host svg {
  display: block;
  width: 100%;
  height: auto;

  /* Эти значения имеют приоритет над запасными цветами внутри SVG.
     Они меняются сразу при переключении data-theme на html. */
  --d-bg: #132631;
  --d-card: #203844;
  --d-text: #f0f5f7;
  --d-muted: #bdd0d7;
  --d-line: #718c99;
  --d-flow: #58aec4;
  --d-return: #8cadd4;
  --d-hot: #e0a56e;
  --d-signal: #ac9bcf;
  --d-ok: #79c789;
  --d-warn: #f5c451;
  --d-alarm: #f18080;
}
html[data-theme="light"] .diagram-host svg {
  --d-bg: #f1f6f8;
  --d-card: #ffffff;
  --d-text: #18303d;
  --d-muted: #4c6471;
  --d-line: #65808d;
  --d-flow: #177798;
  --d-return: #466db0;
  --d-hot: #a55913;
  --d-signal: #7652a2;
  --d-ok: #207838;
  --d-warn: #946000;
  --d-alarm: #b32323;
}
@media (max-width: 760px) {
  .diagram-host {
    /* Мобильная мнемосхема прокручивается, вместо уменьшения текста. */
    overflow-x: auto;
  }
  .diagram-host svg {
    min-width: 720px;
  }
}