:root {
  color-scheme: light;
  --bg: #f4f6ef;
  --ink: #0d1510;
  --muted: #5f695f;
  --line: #d7ded1;
  --panel: #ffffff;
  --panel-strong: #f9fbf5;
  --green: #36d449;
  --green-soft: #e8f8df;
  --red: #d7352a;
  --red-soft: #fae1de;
  --amber: #b87400;
  --amber-soft: #fff1cf;
  --blue: #0d1510;
  --shadow: 0 18px 45px rgba(13, 21, 16, 0.08);
  --blue-soft: #e9f2e0;
  --plant-soft: #f1f8e9;
  --neutral-soft: #edf1e8;
  --step-soft: #e5ebdf;
  --map-line: #8fa29b;
  --button-bg: #0d1510;
  --button-ink: #ffffff;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --ink: #f4f7f5;
  --muted: #aab7b2;
  --line: #283028;
  --panel: #0b0f0c;
  --panel-strong: #111711;
  --green: #6cff57;
  --green-soft: #173414;
  --red: #ff5a4f;
  --red-soft: #3b1513;
  --amber: #ffc24b;
  --amber-soft: #392705;
  --blue: #6cff57;
  --blue-soft: #132313;
  --plant-soft: #132313;
  --neutral-soft: #151c15;
  --step-soft: #1b241a;
  --map-line: #46564f;
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
  --button-bg: #6cff57;
  --button-ink: #061006;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--bg) 0%, var(--panel-strong) 100%);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}

.app-shell {
  min-height: 100vh;
  padding: 24px;
}

.workspace {
  width: min(1360px, 100%);
  margin: 0 auto;
}

.topbar {
  display: grid;
  grid-template-columns: minmax(180px, auto) minmax(0, 1fr);
  gap: 12px 20px;
  align-items: start;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.top-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}

.top-actions label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

body[data-view="weiheng"] .top-actions,
body[data-view="sinexcel"] .top-actions,
body[data-view="pv-inverters"] .top-actions,
body[data-view="unibms"] .top-actions {
  display: none;
}

.weiheng-top-actions {
  display: none;
}

body[data-view="weiheng"] .weiheng-top-actions,
body[data-view="sinexcel"] .weiheng-top-actions,
body[data-view="pv-inverters"] .weiheng-top-actions,
body[data-view="unibms"] .weiheng-top-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(240px, 1fr) minmax(520px, auto);
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
}

body[data-view="sinexcel"] .sinexcel-top-actions,
body[data-view="pv-inverters"] .pv-inverters-top-actions,
body[data-view="unibms"] .unibms-top-actions {
  grid-template-columns: minmax(180px, 260px) minmax(260px, 420px);
}

body[data-view="weiheng"][data-weiheng-view="status"] .weiheng-data-actions {
  display: none;
}

.weiheng-select-field {
  display: grid;
  gap: 7px;
  min-width: 220px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.weiheng-select-field[hidden] {
  display: none !important;
}

.weiheng-select-field:first-child {
  max-width: 260px;
}

.weiheng-top-actions > .weiheng-select-field:first-child {
  grid-column: 1;
}

.weiheng-top-actions > .weiheng-select-field:nth-child(2) {
  grid-column: 2;
}

.weiheng-power-control {
  display: flex;
  grid-column: 3;
  justify-self: end;
  align-items: end;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
}

body[data-view="weiheng"] .weiheng-top-actions > .weiheng-power-control {
  display: none;
}

body[data-view="weiheng"][data-weiheng-view="status"] .weiheng-top-actions > .weiheng-power-control.is-aggregate-command {
  display: flex;
}

.weiheng-power-control label {
  display: grid;
  flex: 1 1 130px;
  gap: 6px;
  min-width: 120px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.weiheng-power-control input {
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
}

.weiheng-power-control .weiheng-command-button {
  flex: 0 0 92px;
  min-height: 34px;
}

.weiheng-power-control .weiheng-aggregate-command-stack {
  display: grid;
  grid-template-columns: 94px 128px 170px 132px;
  align-items: end;
  gap: 6px;
  width: 548px;
  max-width: min(548px, 100%);
  margin: 0;
}

.weiheng-aggregate-command-stack > #weihengAggregatePowerButton {
  grid-column: 1;
  align-self: end;
}

.weiheng-aggregate-command-stack > .weiheng-soc-limit-control {
  grid-column: 2;
}

.weiheng-aggregate-command-stack > .weiheng-power-inputs {
  grid-column: 3;
}

.weiheng-aggregate-command-stack > .weiheng-power-buttons {
  grid-column: 4;
}

.weiheng-aggregate-command-stack > #weihengCommandStatus {
  grid-column: 1 / -1;
}

.weiheng-power-control label.weiheng-power-field {
  display: grid;
  flex: initial;
  gap: 2px;
  min-width: 0;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.05;
}

.weiheng-power-control label.weiheng-power-field input {
  min-height: 26px;
  padding: 2px 5px;
  font-size: 11px;
}

.weiheng-power-control .weiheng-command-button {
  flex: initial;
  min-height: 30px;
}

#weihengCommandStatus {
  flex: 1 1 160px;
  min-width: 150px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.weiheng-power-control #weihengCommandStatus {
  flex: initial;
  min-width: 0;
  font-size: 10.5px;
  line-height: 1.15;
}

@media (max-width: 1180px) {
  body[data-view="weiheng"] .weiheng-top-actions {
    grid-template-columns: minmax(180px, 260px) minmax(240px, 1fr);
  }

  .weiheng-power-control {
    grid-column: 1 / -1;
    justify-self: end;
  }
}

.weiheng-meter-list {
  display: grid;
  gap: 8px;
}

.weiheng-meter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-strong);
  color: var(--ink);
}

.weiheng-meter-row span {
  min-width: 0;
  color: var(--muted);
  font-weight: 800;
}

.weiheng-meter-row strong {
  flex: 0 0 auto;
  color: var(--ink);
  font-weight: 900;
  text-align: right;
}

.weiheng-meter-row .weiheng-history-value {
  text-align: right;
}

select {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-strong);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
}

select:focus,
input:focus,
button:focus,
a:focus {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.plant-select {
  display: grid;
  gap: 7px;
  min-width: min(360px, 100%);
  flex: 2 1 320px;
}

.target-mode {
  display: grid;
  gap: 7px;
  min-width: 170px;
  flex: 1 1 170px;
}

.target-mode.is-hidden {
  display: none;
}

.status-controls {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.inline-logout {
  display: inline-flex;
  margin: 0;
}

.theme-toggle,
.lang-toggle {
  flex: 0 0 auto;
  min-width: 82px;
  min-height: 42px;
  border: 1px solid var(--button-bg);
  border-radius: 6px;
  background: var(--button-bg);
  color: var(--button-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.auth-link,
.auth-select {
  flex: 0 0 auto;
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-strong);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.auth-select {
  min-width: 116px;
  appearance: auto;
}

.auth-link.active,
.auth-select.active {
  border-color: var(--green);
  background: var(--green-soft);
  color: var(--ink);
}

.lang-toggle {
  min-width: 64px;
}

.status-stack {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: 10px;
}

.brand-logo img {
  width: 150px;
  height: auto;
  display: block;
}

:root[data-theme="dark"] .brand-logo img {
  filter: none;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 38px;
  line-height: 1.1;
  font-weight: 900;
}

h2 {
  margin-bottom: 16px;
  font-size: 18px;
}

.status-pill {
  min-width: 190px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 44px;
  font-weight: 900;
  text-align: right;
  line-height: 1;
}

.status-pill.ok {
  background: transparent;
  border-color: transparent;
  color: var(--green);
}

.status-pill.fault {
  background: transparent;
  border-color: transparent;
  color: var(--red);
}

.status-pill.warn {
  background: transparent;
  border-color: transparent;
  color: var(--amber);
}

.grid {
  display: grid;
  grid-template-columns: minmax(280px, 390px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.controls,
.result-panel,
.map-panel,
.aox-panel {
  padding: 20px;
}

.controls {
  display: grid;
  gap: 14px;
}

.aox-panel {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
}

.aox-panel span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.aox-panel strong {
  font-size: 22px;
}

.aox-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.aox-panel a {
  min-height: 38px;
  display: grid;
  place-items: center;
  padding: 0 14px;
  border: 1px solid var(--button-bg);
  border-radius: 6px;
  background: var(--button-bg);
  color: var(--button-ink);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

label,
legend {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.controls > label {
  font-size: 0;
}

.field-label {
  font-size: 13px;
}

.bess-only.is-hidden {
  display: none;
}

.target-mode select,
.target-mode input {
  width: 100%;
  margin-top: 7px;
}

input[type="number"] {
  width: 100%;
  height: 42px;
  margin-top: 7px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-strong);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}

input[readonly] {
  color: var(--muted);
  background: var(--panel-strong);
}

input[type="password"] {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-strong);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}

.api-key-field {
  display: grid;
  gap: 7px;
}

.api-key-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 10px;
}

.api-key-row button {
  min-height: 42px;
  border: 1px solid var(--button-bg);
  border-radius: 6px;
  background: var(--button-bg);
  color: var(--button-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.mqtt-log {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
}

.mqtt-log span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.mqtt-log pre {
  max-height: 190px;
  margin: 0;
  overflow: auto;
  color: var(--ink);
  font: 12px/1.45 Consolas, "Courier New", monospace;
  white-space: pre-wrap;
}

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
  background: linear-gradient(180deg, var(--bg) 0%, var(--panel-strong) 100%);
}

.auth-card {
  width: min(460px, 100%);
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.auth-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.auth-top-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.auth-top-controls .theme-toggle {
  min-width: 78px;
  min-height: 34px;
  font-size: 12px;
}

.auth-top-controls .lang-toggle {
  min-width: 64px;
  min-height: 34px;
  padding: 0 10px;
  font-size: 12px;
}

.auth-card h1 {
  margin-bottom: 20px;
  font-size: 30px;
  font-weight: 900;
}

.auth-lang {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.auth-lang.inline {
  align-self: center;
}

.auth-lang a {
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-strong);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.auth-lang a.active {
  border-color: var(--green);
  background: var(--green-soft);
  color: var(--ink);
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
}

.auth-tabs a {
  min-height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-strong);
  color: var(--muted);
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
}

.auth-tabs a.active {
  border-color: var(--green);
  background: var(--green-soft);
  color: var(--ink);
}

.auth-single-action {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding: 8px 0;
}

.auth-single-action strong {
  font-size: 18px;
}

.auth-form {
  display: grid;
  gap: 14px;
}

.auth-form.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
}

.auth-form.smtp-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
}

.auth-form input {
  width: 100%;
  height: 42px;
  margin-top: 7px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-strong);
  color: var(--ink);
  font: inherit;
}

.auth-form input[type="checkbox"],
.user-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin-top: 0;
  padding: 0;
  accent-color: var(--green);
}

.auth-form select {
  width: 100%;
  height: 42px;
  margin-top: 7px;
}

.auth-form button,
.user-row button {
  min-height: 42px;
  border: 1px solid var(--button-bg);
  border-radius: 6px;
  background: var(--button-bg);
  color: var(--button-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.auth-form button:disabled,
.user-row button:disabled,
.user-row select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.auth-help {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.auth-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.auth-status.is-ok {
  border-color: rgba(34, 197, 94, 0.45);
  background: var(--green-soft);
}

.auth-status.is-error {
  border-color: rgba(239, 68, 68, 0.45);
  background: var(--red-soft);
}

.ai-test-form {
  margin-top: 8px;
}

.auth-error,
.auth-ok,
.auth-notice {
  padding: 12px;
  border-radius: 8px;
  line-height: 1.4;
}

.auth-error {
  background: var(--red-soft);
  color: var(--red);
}

.auth-ok,
.auth-notice {
  background: var(--green-soft);
  color: var(--ink);
}

.auth-notice {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.auth-notice code,
.auth-notice small {
  overflow-wrap: anywhere;
  font-family: Consolas, "Courier New", monospace;
}

.totp-qr {
  width: 196px;
  min-height: 196px;
  display: grid;
  place-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.totp-qr img,
.totp-qr canvas {
  width: 180px;
  height: 180px;
}

.user-list {
  margin-top: 18px;
}

.settings-subsection {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.settings-subsection-title {
  margin: 4px 0 -4px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 950;
}

.settings-group-title {
  margin: 8px 0 -6px;
  padding: 8px 10px;
  border-left: 4px solid var(--green);
  border-radius: 6px;
  background: var(--panel-strong);
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.user-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
}

.user-row span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.user-online-status {
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
}

.user-online-status.is-online {
  background: var(--green-soft);
  color: var(--green);
}

.user-online-status.is-offline {
  background: var(--neutral-soft);
  color: var(--muted);
}

.user-row form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.settings-user-row {
  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
  align-items: flex-start;
}

.settings-user-row form {
  justify-content: flex-start;
}

.settings-user-row .menu-access {
  flex-basis: 100%;
}

.settings-user-row .inline-password {
  width: min(220px, 100%);
}

.settings-user-row button[value="user_settings"] {
  min-width: 170px;
}

.user-actions-title {
  align-self: center;
  margin-left: 4px;
}

.compact-rights-row {
  align-items: center;
}

.compact-rights-form label {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}

.compact-rights-form input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--green);
}

.user-row .inline-password {
  width: 150px;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-strong);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}

.menu-access {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.menu-access-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.plant-access {
  flex-basis: 100%;
  justify-content: flex-start;
}

.plant-access-group-title {
  flex-basis: 100%;
  margin-top: 3px;
  color: var(--green);
}

.menu-access label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.menu-access input {
  width: 15px;
  height: 15px;
  accent-color: var(--green);
}

.command-access-help {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}

.plant-readout,
.price-readout,
.btd-readout {
  min-height: 76px;
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
}

.plant-readout span,
.price-readout span,
.btd-readout span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.plant-readout strong,
.price-readout strong,
.btd-readout strong {
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
}

.plant-readout {
  border-color: var(--green);
  background: var(--plant-soft);
}

.plant-readout strong {
  font-size: 20px;
  line-height: 1.2;
}

.plant-readout small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.btd-readout {
  border-color: #99d8af;
  background: var(--green-soft);
}

.source-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: -6px;
}

.source-row button {
  min-height: 36px;
  border: 1px solid var(--button-bg);
  border-radius: 6px;
  background: var(--button-bg);
  color: var(--button-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.source-row button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.source-row span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.read-intervals {
  display: grid;
  grid-template-columns: auto repeat(2, minmax(140px, 220px));
  align-items: end;
  gap: 10px 12px;
  margin-top: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.read-intervals > strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.read-intervals label {
  min-width: 0;
}

.read-intervals span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.read-intervals input {
  margin-top: 6px;
}

.auto-read {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-strong);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
}

.auto-read input {
  width: 14px;
  height: 14px;
  accent-color: var(--green);
}

.auto-read span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.source-row .source-label {
  min-height: 36px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-strong);
  color: var(--muted);
  font-weight: 800;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel-strong);
}

.segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented label {
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 6px 10px;
  color: var(--muted);
  cursor: pointer;
  text-align: center;
}

.segmented input:checked + label {
  background: var(--green-soft);
  color: var(--ink);
}

.switch {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}

.switch input {
  width: 20px;
  height: 20px;
  accent-color: var(--green);
}

.static-status {
  min-height: 36px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-left: 4px solid var(--green);
  border-radius: 6px;
  background: var(--green-soft);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

#priceBand {
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--neutral-soft);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.result-card {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 18px;
  min-height: 126px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
}

.signal {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.5);
}

.signal.ok {
  background: var(--green);
}

.signal.fault {
  background: var(--red);
}

.signal.warn {
  background: var(--amber);
}

.result-title {
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: 800;
}

.result-text {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.45;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.metrics div {
  min-height: 76px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
}

.metrics span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.metrics strong {
  display: block;
  font-size: 20px;
}

.metric-detail {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.history-panel {
  margin-top: 18px;
  padding: 20px;
}

.main-history-panel {
  display: none;
}

body[data-view="history"] .grid,
body[data-view="history"] .map-panel,
body[data-view="history"] .status-pill {
  display: none;
}

body[data-view="history"] .main-history-panel {
  display: block;
}

body[data-view="history"] #historyParamSelect {
  display: none;
}

body[data-view="history"] .history-actions {
  justify-content: flex-end;
}

.history-page-panel {
  display: block;
}

.registers-panel,
.weiheng-panel,
.sinexcel-panel,
.pv-inverters-panel,
.unibms-panel,
.balancing-panel {
  display: none;
  padding: 20px;
}

body[data-view="ses-registers"] .grid,
body[data-view="ses-registers"] .main-history-panel,
body[data-view="ses-registers"] .map-panel,
body[data-view="ses-registers"] .status-pill,
body[data-view="bess-registers"] .grid,
body[data-view="bess-registers"] .main-history-panel,
body[data-view="bess-registers"] .map-panel,
body[data-view="bess-registers"] .status-pill,
body[data-view="weiheng"] .grid,
body[data-view="weiheng"] .main-history-panel,
body[data-view="weiheng"] .map-panel,
body[data-view="weiheng"] .status-pill,
body[data-view="sinexcel"] .grid,
body[data-view="sinexcel"] .main-history-panel,
body[data-view="sinexcel"] .map-panel,
body[data-view="sinexcel"] .status-pill,
body[data-view="pv-inverters"] .grid,
body[data-view="pv-inverters"] .main-history-panel,
body[data-view="pv-inverters"] .map-panel,
body[data-view="pv-inverters"] .status-pill,
body[data-view="unibms"] .grid,
body[data-view="unibms"] .main-history-panel,
body[data-view="unibms"] .map-panel,
body[data-view="unibms"] .status-pill,
body[data-view="balancing"] .grid,
body[data-view="balancing"] .top-actions,
body[data-view="balancing"] #monitorForm,
body[data-view="balancing"] .main-history-panel,
body[data-view="balancing"] .map-panel,
body[data-view="balancing"] .status-pill {
  display: none;
}

body[data-view="ses-registers"] .ses-registers-panel,
body[data-view="bess-registers"] .bess-registers-panel,
body[data-view="weiheng"] .weiheng-panel,
body[data-view="sinexcel"] .sinexcel-panel,
body[data-view="pv-inverters"] .pv-inverters-panel,
body[data-view="unibms"] .unibms-panel,
body[data-view="balancing"] .balancing-panel {
  display: block;
}

body[data-view="weiheng"] .weiheng-panel,
body[data-view="sinexcel"] .sinexcel-panel,
body[data-view="pv-inverters"] .pv-inverters-panel,
body[data-view="unibms"] .unibms-panel {
  padding: 14px;
}

body[data-view="weiheng"] .registers-header,
body[data-view="sinexcel"] .registers-header,
body[data-view="pv-inverters"] .registers-header,
body[data-view="unibms"] .registers-header {
  margin-bottom: 12px;
}

.unibms-view-menu {
  margin-bottom: 12px;
}

.unibms-parameters-table th:nth-child(1),
.unibms-parameters-table td:nth-child(1) {
  width: 34%;
}

.unibms-parameters-table th:nth-child(2),
.unibms-parameters-table td:nth-child(2) {
  width: 28%;
}

.unibms-parameters-table th:nth-child(3),
.unibms-parameters-table td:nth-child(3) {
  width: 22%;
}

.unibms-parameters-table th:nth-child(4),
.unibms-parameters-table td:nth-child(4) {
  width: 16%;
}

body[data-view="weiheng"] .weiheng-logo,
body[data-view="sinexcel"] .weiheng-logo,
body[data-view="pv-inverters"] .weiheng-logo {
  width: 48px;
  height: 48px;
  font-size: 14px;
}

body[data-view="weiheng"] .weiheng-view-menu,
body[data-view="sinexcel"] .weiheng-view-menu,
body[data-view="pv-inverters"] .weiheng-view-menu {
  margin-bottom: 10px;
  overflow-x: auto;
}

body[data-view="weiheng"] .weiheng-group-bar,
body[data-view="sinexcel"] .weiheng-group-bar,
body[data-view="pv-inverters"] .weiheng-group-bar {
  display: none;
  align-items: center;
  gap: 8px;
  margin: -2px 0 10px;
}

body[data-view="weiheng"] .weiheng-group-bar > span,
body[data-view="sinexcel"] .weiheng-group-bar > span,
body[data-view="pv-inverters"] .weiheng-group-bar > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

body[data-view="weiheng"] .weiheng-plant-menu,
body[data-view="sinexcel"] .weiheng-plant-menu,
body[data-view="pv-inverters"] .weiheng-plant-menu {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
}

body[data-view="weiheng"] .weiheng-plant-menu-button,
body[data-view="sinexcel"] .weiheng-plant-menu-button,
body[data-view="pv-inverters"] .weiheng-plant-menu-button {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-strong);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  cursor: pointer;
  white-space: nowrap;
}

body[data-view="weiheng"] .weiheng-plant-menu-button.is-active,
body[data-view="sinexcel"] .weiheng-plant-menu-button.is-active,
body[data-view="pv-inverters"] .weiheng-plant-menu-button.is-active {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

body[data-view="weiheng"] .weiheng-select-field:first-child {
  display: grid;
}

body[data-view="weiheng"] .weiheng-view-tab {
  min-height: 28px;
  padding: 0 10px;
  font-size: 12px;
}

body[data-view="weiheng"] .register-block + .register-block {
  margin-top: 14px;
}

body[data-view="weiheng"] .register-block h3 {
  margin-bottom: 6px;
  font-size: 14px;
}

body[data-view="weiheng"] .register-live-header {
  margin-bottom: 6px;
}

body[data-view="weiheng"] .register-live-actions {
  gap: 6px;
  font-size: 12px;
}

body[data-view="weiheng"] .register-live-actions button {
  min-height: 28px;
  padding: 0 10px;
  font-size: 12px;
}

.registers-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.registers-header h2 {
  margin-bottom: 0;
}

.weiheng-header {
  align-items: center;
}

.weiheng-title {
  display: flex;
  align-items: center;
  gap: 14px;
}

.weiheng-logo {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 2px solid var(--green);
  border-radius: 8px;
  background: var(--green-soft);
  color: var(--green);
  font-size: 17px;
  font-weight: 950;
  letter-spacing: 0;
}

.weiheng-view-menu {
  display: inline-flex;
  gap: 8px;
  margin: 0 0 16px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
}

.weiheng-view-tab {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.weiheng-view-tab.is-active {
  background: var(--green);
  color: #fff;
}

.monitoring-view-menu {
  width: fit-content;
  max-width: 100%;
}

.weiheng-section[hidden] {
  display: none;
}

.balancing-subpanel[hidden] {
  display: none;
}

.balancing-view-menu {
  margin: 0 0 14px;
}

.balancing-panel .registers-header,
.balancing-panel .register-live-actions {
  min-width: 0;
}

.balancing-panel .register-live-actions {
  flex-wrap: wrap;
}

.balancing-panel .register-live-actions > span {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

body[data-balancing-subview="live"] .balancing-log-only {
  display: none;
}

.balancing-log-layout {
  display: grid;
  gap: 14px;
}

.balancing-live-panel {
  display: grid;
  gap: 14px;
}

.balancing-live-subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.balancing-live-options,
.balancing-live-series-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.balancing-live-options > strong,
.balancing-live-series-controls > strong {
  margin-right: 4px;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 950;
}

.balancing-live-options label,
.balancing-live-series-controls label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-strong);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
}

.balancing-live-series-controls label {
  display: grid;
  grid-template-columns: auto auto minmax(80px, 1fr);
  align-items: center;
  max-width: 260px;
}

.balancing-live-series-controls .history-swatch {
  position: static;
  margin: 0;
}

.balancing-live-series-buttons {
  display: inline-flex;
  gap: 5px;
}

.balancing-live-series-buttons button {
  min-height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 900;
}

.balancing-live-description {
  display: block;
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.balancing-live-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 8px;
}

.balancing-energy-flow {
  margin: 10px 0 0;
}

.energy-flow-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(40, 167, 69, 0.10), rgba(0, 136, 204, 0.08)),
    var(--panel-strong);
}

.energy-flow-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.energy-flow-header strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 950;
}

.energy-flow-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.energy-flow-header span,
.energy-flow-control-link {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  text-align: right;
}

.energy-flow-control-link {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--green) 45%, var(--line));
  border-radius: 999px;
  color: var(--green);
  text-decoration: none;
  white-space: nowrap;
}

.energy-flow-stage {
  display: grid;
  grid-template-columns: minmax(280px, 1.3fr) 112px minmax(260px, 1.1fr);
  gap: 6px;
  align-items: center;
}

.energy-flow-map {
  position: relative;
  min-height: var(--flow-map-height, 360px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--green) 22%, var(--line));
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--green) 10%, transparent), transparent 28%),
    linear-gradient(90deg, color-mix(in srgb, #2f80ed 7%, transparent), transparent 28%, transparent 72%, color-mix(in srgb, #f0b429 8%, transparent)),
    var(--panel);
}

.energy-flow-map-svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.energy-flow-map-node {
  position: absolute;
  z-index: 3;
  width: 194px;
  min-height: 72px;
  transform: translate(-50%, -50%);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--node-color, var(--green)) 12%, transparent);
}

.energy-flow-map-node.is-compact {
  width: 214px;
  min-height: 126px;
  aspect-ratio: auto;
  border-radius: 14px;
}

.energy-flow-link {
  --flow-color: var(--green);
  fill: none;
  stroke: var(--flow-color);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 16 12;
  opacity: calc(0.38 + (var(--flow-strength, 0.65) * 0.5));
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--flow-color) 58%, transparent));
  animation: energy-flow-svg-dash var(--flow-speed, 1.8s) linear infinite;
}

.energy-flow-link-pv,
.energy-flow-dot-pv {
  --flow-color: #f0b429;
}

.energy-flow-link-bess,
.energy-flow-dot-bess {
  --flow-color: #2f80ed;
}

.energy-flow-link-grid,
.energy-flow-dot-grid {
  --flow-color: #9b51e0;
}

.energy-flow-link-ems,
.energy-flow-dot-ems {
  --flow-color: var(--green);
}

.energy-flow-link-manager,
.energy-flow-dot-manager {
  --flow-color: var(--green);
}

.energy-flow-link.is-idle {
  stroke-width: 3;
  stroke-dasharray: 6 12;
  opacity: 0.26;
  animation: none;
  filter: none;
}

.energy-flow-dot {
  fill: var(--flow-color);
  opacity: calc(0.50 + (var(--flow-strength, 0.65) * 0.42));
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--flow-color) 76%, transparent));
}

.energy-flow-stack {
  display: grid;
  gap: 8px;
  min-width: 0;
  align-content: start;
}

.energy-flow-stack-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 0 2px;
}

.energy-flow-stack-title strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 950;
  text-transform: uppercase;
}

.energy-flow-stack-title small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 850;
  white-space: nowrap;
}

.energy-flow-route {
  display: grid;
  gap: 6px;
  min-width: 0;
  align-items: center;
}

.energy-flow-route-inverter {
  grid-template-columns: minmax(150px, 0.92fr) minmax(128px, 1.08fr);
}

.energy-flow-route-site {
  grid-template-columns: minmax(128px, 1fr) minmax(132px, 0.84fr);
}

.energy-flow-node {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 68px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--node-color, var(--green)) 42%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--node-color, var(--green)) 13%, var(--panel));
  box-shadow: inset 3px 0 0 var(--node-color, var(--green));
}

.energy-flow-node span,
.energy-flow-node small {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.energy-flow-node span {
  text-transform: uppercase;
}

.energy-flow-node strong {
  min-width: 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.15;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.energy-flow-node-pv {
  --node-color: #f0b429;
  grid-area: pv;
}

.energy-flow-node-manager {
  --node-color: var(--green);
}

.energy-flow-map-node.energy-flow-node-manager {
  width: 132px;
  min-height: 68px;
  padding-inline: 8px;
  background: color-mix(in srgb, var(--green) 15%, var(--panel));
}

.energy-flow-map-node.energy-flow-node-manager span {
  font-size: 10px;
}

.energy-flow-map-node.energy-flow-node-manager strong {
  font-size: 14px;
}

.energy-flow-node-bess {
  --node-color: #2f80ed;
  grid-area: bess;
}

.energy-flow-node-grid {
  --node-color: #9b51e0;
  grid-area: grid;
}

.energy-flow-node-ems {
  --node-color: var(--green);
  justify-self: center;
  align-self: center;
  width: 104px;
  min-height: 104px;
  aspect-ratio: 1;
  padding: 11px;
  border-radius: 999px;
  text-align: center;
  box-shadow:
    inset 0 0 0 4px color-mix(in srgb, var(--green) 14%, transparent),
    0 8px 22px color-mix(in srgb, var(--green) 16%, transparent);
}

.energy-flow-node-ems strong {
  font-size: 22px;
  letter-spacing: 0;
}

.energy-flow-node-ems small {
  font-size: 10px;
  line-height: 1.2;
}

.energy-flow-hub {
  --node-color: var(--green);
  grid-area: hub;
  min-height: 100%;
  text-align: center;
  box-shadow: inset 0 4px 0 var(--green);
}

.energy-flow-inverters {
  grid-area: inverters;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 8px;
  min-width: 0;
}

.energy-flow-inverter {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 9px;
  border: 1px solid color-mix(in srgb, #2f80ed 34%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, #2f80ed 8%, var(--panel));
}

.energy-flow-inverter.is-offline {
  opacity: 0.72;
  border-color: var(--line);
}

.energy-flow-inverter-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.energy-flow-inverter-top strong {
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.18;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.energy-flow-inverter-top span {
  flex: 0 0 auto;
  color: var(--green);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 900;
  white-space: nowrap;
}

.energy-flow-inverter.is-offline .energy-flow-inverter-top span {
  color: var(--muted);
}

.energy-flow-lane-inverter {
  min-height: 34px;
}

.energy-flow-lane-connector {
  min-height: 42px;
}

.energy-flow-lane-inverter small {
  align-self: center;
}

.energy-flow-inverter-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 850;
}

.energy-flow-inverter-meta span,
.energy-flow-inverter-meta small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.energy-flow-lane {
  --lane-color: var(--green);
  position: relative;
  display: grid;
  align-content: center;
  min-height: 54px;
  overflow: hidden;
  border-radius: 8px;
}

.energy-flow-lane::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 10px;
  transform: translateY(-50%);
  border-radius: 999px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--lane-color) 18%, transparent), color-mix(in srgb, var(--lane-color) 45%, transparent)),
    repeating-linear-gradient(90deg, transparent 0 8px, var(--lane-color) 8px 22px, transparent 22px 34px);
  background-size: 100% 100%, 34px 100%;
  opacity: calc(0.36 + (var(--flow-strength, 0.65) * 0.52));
  animation: energy-flow-track var(--flow-speed, 1.8s) linear infinite;
}

.energy-flow-lane::after {
  display: none;
}

.energy-flow-pulse {
  position: absolute;
  top: 50%;
  left: 0;
  width: 22px;
  height: 12px;
  border-radius: 999px;
  background: var(--lane-color);
  box-shadow: 38px 0 0 color-mix(in srgb, var(--lane-color) 84%, transparent), 76px 0 0 color-mix(in srgb, var(--lane-color) 62%, transparent);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--lane-color) 70%, transparent));
  opacity: calc(0.42 + (var(--flow-strength, 0.65) * 0.5));
  animation: energy-flow-move var(--flow-speed, 1.8s) linear infinite;
}

.energy-flow-lane small {
  position: relative;
  z-index: 1;
  justify-self: center;
  align-self: end;
  max-width: 100%;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 900;
  white-space: nowrap;
}

.energy-flow-lane-pv {
  --lane-color: #f0b429;
  grid-area: pv-line;
}

.energy-flow-lane-bess {
  --lane-color: #2f80ed;
  grid-area: bess-line;
}

.energy-flow-lane-grid {
  --lane-color: #9b51e0;
  grid-area: grid-line;
}

.energy-flow-lane.is-reverse .energy-flow-pulse {
  animation-direction: reverse;
}

.energy-flow-lane.is-reverse::before {
  animation-direction: reverse;
}

.energy-flow-lane.is-reverse::after {
  display: none;
}

.energy-flow-lane.is-idle {
  opacity: 0.58;
}

.energy-flow-lane.is-idle .energy-flow-pulse {
  left: 30%;
  animation: none;
  opacity: 0.22;
}

.energy-flow-lane.is-idle::before {
  animation: none;
  background: color-mix(in srgb, var(--lane-color) 24%, transparent);
  opacity: 0.45;
}

.energy-flow-lane.is-idle::after {
  display: none;
}

@keyframes energy-flow-move {
  from {
    left: -120px;
    transform: translateY(-50%);
  }
  to {
    left: calc(100% + 120px);
    transform: translateY(-50%);
  }
}

@keyframes energy-flow-track {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 0 0, 38px 0;
  }
}

@keyframes energy-flow-svg-dash {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -56;
  }
}

.balancing-live-card,
.balancing-live-empty {
  min-height: 78px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
}

.balancing-live-card {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

.balancing-live-card span {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 900;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.balancing-live-card strong {
  min-width: 0;
  color: var(--ink);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.18;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.balancing-live-card small {
  min-height: 16px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.balancing-live-empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 850;
}

.balancing-live-schedule-table {
  min-width: 520px;
}

.balancing-live-schedule-table td:nth-child(3),
.balancing-live-schedule-table th:nth-child(3) {
  text-align: right;
}

.balancing-live-sections {
  display: grid;
  gap: 14px;
}

.balancing-live-section {
  display: grid;
  gap: 10px;
}

.balancing-live-decoded {
  display: grid;
  gap: 10px;
}

.balancing-live-chart {
  display: grid;
  gap: 8px;
  min-height: 160px;
}

.balancing-live-decoded-wrap {
  max-height: 360px;
  overflow: auto;
}

.balancing-live-decoded-table {
  min-width: 920px;
}

.balancing-live-schedule-chart {
  display: grid;
  gap: 8px;
  min-height: 160px;
  margin-bottom: 10px;
}

.balancing-live-chart-body {
  display: grid;
  gap: 12px;
}

.balancing-live-log {
  max-height: 260px;
  margin: 0;
  padding: 12px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.balancing-log-table {
  min-width: 620px;
}

.balancing-log-table button {
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--green);
  font: inherit;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}

.balancing-log-table button:hover {
  color: var(--green-dark);
}

.balancing-log-table tr.is-active {
  background: var(--green-soft);
}

.balancing-object-field,
.balancing-lines-field {
  margin: 0;
}

.balancing-lines-field input {
  width: 90px;
}

.balancing-log-content {
  min-height: 360px;
  max-height: 60vh;
  margin: 0;
  padding: 14px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.balancing-log-chart {
  min-height: 180px;
  margin-bottom: 12px;
}

.balancing-sort-button {
  width: 100%;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 950;
  text-align: left;
  cursor: pointer;
}

.balancing-sort-button.is-active {
  color: var(--green-dark);
}

.balancing-file-filter-field {
  min-width: 220px;
}

.balancing-file-filter-field input {
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-strong);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
}

.balancing-log-group-row td {
  padding: 7px 9px;
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.balancing-chart-stack {
  display: grid;
  gap: 14px;
}

.balancing-chart-panel {
  display: grid;
  gap: 8px;
  padding: 10px 0 14px;
  border-top: 1px solid var(--line);
}

.balancing-chart-panel:first-child {
  border-top: 0;
  padding-top: 0;
}

.balancing-chart-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.balancing-chart-header strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.balancing-chart-header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.balancing-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.balancing-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
}

.balancing-legend-chip i {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
}

.balancing-chart-svg {
  min-height: 260px;
}

.balancing-history-line {
  stroke-width: 1.7;
}

.balancing-chart-empty {
  min-height: 110px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
  color: var(--muted);
  font-weight: 850;
}

.balancing-decoded-table {
  min-width: 980px;
}

.balancing-decoded-table td:nth-child(1) {
  width: 170px;
  white-space: nowrap;
}

.balancing-decoded-table td:nth-child(2) {
  width: 150px;
  font-weight: 900;
}

.balancing-decoded-values {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.balancing-value-chip {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  min-height: 24px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.balancing-value-chip span {
  color: var(--muted);
  font-weight: 750;
}

.online-badge {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 950;
}

.online-badge.online {
  border: 1px solid var(--line);
  background: var(--panel-strong);
  color: var(--ink);
}

.online-badge.offline {
  border: 1px solid var(--line);
  background: var(--panel-strong);
  color: var(--amber);
}

.weiheng-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.weiheng-summary > div {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
}

.weiheng-summary span,
.weiheng-summary small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.weiheng-summary strong {
  display: block;
  margin: 6px 0 4px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 950;
  word-break: break-word;
}

.registers-kicker {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.register-type-select {
  display: grid;
  gap: 7px;
  min-width: 150px;
}

.register-type-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.register-block + .register-block {
  margin-top: 22px;
}

.register-block h3 {
  margin: 0 0 10px;
  font-size: 16px;
}

.register-live-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.register-live-header h3 {
  margin-bottom: 0;
}

.register-live-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.register-live-actions button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #8cc6a0;
  border-radius: 6px;
  background: var(--green-soft);
  color: var(--green);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.register-live-actions button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.register-live-actions span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.register-note {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.register-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
}

.register-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 13px;
}

.live-register-table {
  min-width: 1120px;
}

body[data-view="weiheng"] .live-register-table,
body[data-view="sinexcel"] .live-register-table,
body[data-view="pv-inverters"] .live-register-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  font-size: 12px;
}

body[data-view="weiheng"] .live-register-table th,
body[data-view="weiheng"] .live-register-table td,
body[data-view="sinexcel"] .live-register-table th,
body[data-view="sinexcel"] .live-register-table td,
body[data-view="pv-inverters"] .live-register-table th,
body[data-view="pv-inverters"] .live-register-table td {
  overflow: visible;
  padding: 3px 4px;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.weiheng-status-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  font-size: 12px;
}

.weiheng-status-table .weiheng-col-bess {
  width: 158px;
}

.weiheng-status-table .weiheng-col-online {
  width: 128px;
}

.weiheng-status-table .weiheng-col-messages {
  width: auto;
}

.weiheng-status-table .weiheng-col-soc {
  width: 188px;
}

.weiheng-status-table .weiheng-col-power {
  width: 126px;
}

.weiheng-status-table .weiheng-col-times {
  width: 150px;
}

.weiheng-status-table .weiheng-col-commands {
  width: 160px;
}

.sinexcel-status-table .sinexcel-col-device {
  width: 175px;
}

.sinexcel-status-table .sinexcel-col-online {
  width: 128px;
}

.sinexcel-status-table .sinexcel-col-messages {
  width: auto;
}

.sinexcel-status-table .sinexcel-col-power,
.sinexcel-status-table .sinexcel-col-energy {
  width: 190px;
}

.pv-inverters-status-table .sinexcel-col-power {
  width: 170px;
}

.pv-inverters-status-table .pv-inverters-col-dc {
  width: 240px;
}

.sinexcel-status-table .sinexcel-col-times {
  width: 140px;
}

.sinexcel-logo {
  background: color-mix(in srgb, var(--green) 18%, var(--panel-strong));
  color: var(--green);
}

.pv-inverters-logo {
  background: color-mix(in srgb, #f0b429 18%, var(--panel-strong));
  color: #b87400;
}

.weiheng-status-table th,
.weiheng-status-table td {
  overflow: visible;
  padding: 7px 8px;
  text-overflow: clip;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.weiheng-status-table th {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.18;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}

body[data-view="weiheng"] .weiheng-status-table th {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}

.weiheng-status-table td,
.weiheng-status-table button,
.weiheng-status-table span,
.weiheng-status-table strong {
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.18;
}

.weiheng-status-table th:nth-child(1),
.weiheng-status-table td:nth-child(1) {
  width: 158px;
}

.weiheng-status-table th:nth-child(2),
.weiheng-status-table td:nth-child(2) {
  width: 128px;
}

.weiheng-status-table th:nth-child(3),
.weiheng-status-table td:nth-child(3) {
  width: auto;
}

.weiheng-status-table .weiheng-bess-cell .weiheng-cell-main,
.weiheng-status-table .weiheng-bess-cell .weiheng-cell-sub,
.weiheng-status-table .weiheng-online-cell .weiheng-status-chip span,
.weiheng-status-table .weiheng-online-cell .weiheng-status-chip strong {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}

.weiheng-status-table th:nth-child(4),
.weiheng-status-table td:nth-child(4) {
  width: 188px;
}

.weiheng-status-table .weiheng-online-cell .weiheng-status-chip {
  gap: 4px;
  padding-left: 5px;
  padding-right: 5px;
}

.weiheng-status-table th:nth-child(5),
.weiheng-status-table td:nth-child(5) {
  width: 126px;
}

.weiheng-status-table th:nth-child(6),
.weiheng-status-table td:nth-child(6) {
  width: 150px;
}

.weiheng-status-table th:nth-child(7),
.weiheng-status-table td:nth-child(7) {
  width: 160px;
  text-align: center;
}

.sinexcel-status-table th:nth-child(1),
.sinexcel-status-table td:nth-child(1) {
  width: 175px;
}

.sinexcel-status-table th:nth-child(2),
.sinexcel-status-table td:nth-child(2) {
  width: 128px;
}

.sinexcel-status-table th:nth-child(3),
.sinexcel-status-table td:nth-child(3) {
  width: auto;
}

.sinexcel-status-table th:nth-child(4),
.sinexcel-status-table td:nth-child(4),
.sinexcel-status-table th:nth-child(5),
.sinexcel-status-table td:nth-child(5) {
  width: 190px;
}

.sinexcel-status-table th:nth-child(6),
.sinexcel-status-table td:nth-child(6) {
  width: 140px;
  text-align: left;
}

.weiheng-status-table th .weiheng-head-lines {
  display: inline;
  line-height: 1.08;
  white-space: nowrap;
}

.weiheng-status-table th .weiheng-head-line {
  display: inline;
}

.weiheng-status-table th .weiheng-head-line + .weiheng-head-line::before {
  content: " ";
}

.weiheng-status-stack,
.weiheng-status-messages,
.weiheng-status-group-lines {
  display: grid;
  gap: 4px;
}

.weiheng-status-stack.is-compact {
  gap: 5px;
}

.weiheng-status-chip,
.weiheng-status-pair,
.weiheng-status-group {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--panel-strong) 88%, var(--ink) 12%);
}

.weiheng-status-chip,
.weiheng-status-pair {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 24px;
  padding: 3px 7px;
}

.weiheng-status-pair {
  width: 100%;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
}

.weiheng-status-chip span,
.weiheng-status-pair span {
  color: var(--muted);
  line-height: 1.15;
}

.weiheng-status-chip strong,
.weiheng-status-pair strong,
.weiheng-status-value {
  color: var(--ink);
  line-height: 1.15;
  white-space: nowrap;
}

.weiheng-status-table .weiheng-status-pair strong,
.weiheng-status-table .weiheng-status-value {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: right;
}

.weiheng-status-table .weiheng-times-cell .weiheng-status-pair {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.weiheng-status-table .weiheng-times-cell .weiheng-status-pair span {
  max-width: none;
  overflow-wrap: normal;
  word-break: normal;
}

.weiheng-status-table .weiheng-times-cell .weiheng-status-pair strong,
.weiheng-status-table .weiheng-times-cell .weiheng-status-value {
  white-space: nowrap;
  text-align: right;
}

.weiheng-status-value {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  text-align: right;
}

.weiheng-status-value:hover,
.weiheng-history-mini:hover {
  color: var(--green);
}

.weiheng-status-chip.register-status-ok strong,
.weiheng-status-pair.register-status-ok strong,
.weiheng-status-pair.register-status-ok .weiheng-status-value {
  color: var(--green);
}

.weiheng-status-chip.register-status-error strong,
.weiheng-status-pair.register-status-error strong,
.weiheng-status-pair.register-status-error .weiheng-status-value {
  color: var(--amber);
}

.weiheng-status-pair.online strong,
.weiheng-status-pair.online .weiheng-status-value {
  color: var(--green);
}

.weiheng-status-pair.offline strong,
.weiheng-status-pair.offline .weiheng-status-value,
.weiheng-status-pair.is-fault strong,
.weiheng-status-pair.is-fault .weiheng-status-value {
  color: var(--red);
}

.weiheng-status-pair.is-warning strong,
.weiheng-status-pair.is-warning .weiheng-status-value {
  color: var(--amber);
}

.register-table.unibms-status-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

body[data-view="unibms"] .register-table-wrap {
  overflow-x: visible;
}

body[data-view="unibms"] .live-register-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  font-size: 12px;
}

body[data-view="unibms"] .live-register-table th,
body[data-view="unibms"] .live-register-table td {
  padding: 5px 6px;
  overflow: visible;
  text-overflow: clip;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.unibms-status-table th:nth-child(1),
.unibms-status-table td:nth-child(1) {
  width: 14%;
}

.unibms-status-table th:nth-child(2),
.unibms-status-table td:nth-child(2) {
  width: 10%;
}

.unibms-status-table th:nth-child(3),
.unibms-status-table td:nth-child(3) {
  width: 20%;
}

.unibms-status-table th:nth-child(4),
.unibms-status-table td:nth-child(4) {
  width: 16%;
}

.unibms-status-table th:nth-child(5),
.unibms-status-table td:nth-child(5) {
  width: 16%;
}

.unibms-status-table th:nth-child(6),
.unibms-status-table td:nth-child(6) {
  width: 16%;
}

.unibms-status-table th:nth-child(7),
.unibms-status-table td:nth-child(7) {
  width: 8%;
}

.unibms-status-table th {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.unibms-status-table .weiheng-device-cell strong,
.unibms-status-table .weiheng-device-cell small {
  display: block;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}

.unibms-status-table .weiheng-device-cell small {
  margin-top: 2px;
}

.unibms-status-table .unibms-device-meta {
  color: var(--muted);
  font-size: 11px;
  white-space: normal;
}

.unibms-status-table .weiheng-status-stack {
  gap: 4px;
}

.unibms-status-table .weiheng-status-pair {
  align-items: flex-start;
  gap: 6px;
  min-height: 24px;
  padding: 3px 7px;
}

.unibms-status-table .weiheng-status-pair span {
  flex: 0 1 auto;
  max-width: 46%;
  color: var(--muted);
  line-height: 1.18;
  white-space: normal;
  overflow-wrap: anywhere;
}

.unibms-status-table .weiheng-status-pair strong,
.unibms-status-table .weiheng-status-value {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  line-height: 1.18;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: right;
}

.unibms-status-table .weiheng-times-cell .weiheng-status-pair {
  flex-direction: column;
  gap: 2px;
}

.unibms-status-table .weiheng-times-cell .weiheng-status-pair span,
.unibms-status-table .weiheng-times-cell .weiheng-status-pair strong {
  white-space: nowrap;
  overflow-wrap: normal;
}

.unibms-messages-cell .weiheng-status-pair strong,
.unibms-messages-cell .weiheng-status-value,
.unibms-blocks-cell .weiheng-status-pair strong,
.unibms-blocks-cell .weiheng-status-value,
.unibms-strings-cell .weiheng-status-pair strong,
.unibms-strings-cell .weiheng-status-value {
  text-align: right;
}

.weiheng-status-group {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 6px;
  width: 100%;
  padding: 5px 6px;
  border-color: var(--line) !important;
  background: color-mix(in srgb, var(--panel-strong) 88%, var(--ink) 12%) !important;
  box-shadow: none !important;
  color: inherit;
  font: inherit;
  text-align: left;
}

.weiheng-status-group.register-status-ok {
  border-color: var(--line) !important;
}

.weiheng-status-group.register-status-error {
  border-color: var(--line) !important;
  background: color-mix(in srgb, var(--panel-strong) 88%, var(--ink) 12%) !important;
}

.weiheng-status-group.is-bms-status-group {
  border-color: var(--line) !important;
  background: color-mix(in srgb, var(--panel-strong) 88%, var(--ink) 12%) !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] .weiheng-status-group.is-bms-status-group {
  border-color: var(--line) !important;
  background: color-mix(in srgb, var(--panel-strong) 88%, var(--ink) 12%) !important;
  box-shadow: none !important;
}

.weiheng-status-group.is-bms-status-group.register-status-error {
  border-color: var(--line) !important;
  background: color-mix(in srgb, var(--panel-strong) 88%, var(--ink) 12%) !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] .weiheng-status-group.is-bms-status-group.register-status-error {
  border-color: var(--line) !important;
  background: color-mix(in srgb, var(--panel-strong) 88%, var(--ink) 12%) !important;
  box-shadow: none !important;
}

.weiheng-status-group-label {
  display: grid;
  gap: 4px;
  justify-items: start;
  align-self: start;
  color: var(--muted);
  letter-spacing: 0;
}

.weiheng-history-mini {
  appearance: none;
  min-width: 18px;
  min-height: 18px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0 4px;
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  text-align: center;
}

.weiheng-status-group-lines {
  min-width: 0;
  justify-items: end;
  text-align: right;
}

.weiheng-status-group-lines span {
  color: var(--ink);
  line-height: 1.22;
  overflow-wrap: normal;
  word-break: normal;
  text-align: right;
}

.weiheng-status-group-lines .weiheng-history-value {
  width: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  line-height: 1.22;
  text-align: right;
  text-decoration: none;
  cursor: pointer;
}

.weiheng-status-messages-cell {
  padding-top: 5px;
  padding-bottom: 5px;
}

.unibms-visualization {
  display: grid;
  gap: 12px;
}

.unibms-visual-summary,
.unibms-visual-facts,
.unibms-visual-battery-meta {
  display: grid;
  gap: 7px;
}

.unibms-visual-summary {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.unibms-visual-facts {
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  align-items: stretch;
}

.unibms-visual-metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--panel-strong) 90%, var(--ink) 10%);
}

.unibms-visual-metric span {
  min-width: 0;
  color: var(--muted);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.unibms-visual-metric strong {
  min-width: 0;
  color: var(--ink);
  line-height: 1.15;
  text-align: right;
  overflow-wrap: anywhere;
}

.unibms-visual-block,
.unibms-visual-string,
.unibms-visual-battery {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.unibms-visual-block {
  display: grid;
  gap: 10px;
  padding: 10px;
}

.unibms-visual-string {
  display: grid;
  gap: 9px;
  padding: 9px;
  background: color-mix(in srgb, var(--panel) 92%, var(--neutral-soft) 8%);
}

.unibms-visual-block-header,
.unibms-visual-string-header {
  display: grid;
  grid-template-columns: minmax(110px, max-content) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.unibms-visual-block-header h3,
.unibms-visual-string-header h4 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.unibms-visual-strings,
.unibms-visual-modules {
  display: grid;
  gap: 9px;
}

.unibms-visual-strings {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.unibms-visual-modules {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.unibms-visual-battery {
  padding: 0;
  overflow: hidden;
}

.unibms-visual-battery summary {
  display: grid;
  grid-template-columns: minmax(58px, max-content) repeat(3, minmax(0, 1fr));
  gap: 6px;
  align-items: center;
  padding: 7px 8px;
  cursor: pointer;
  list-style: none;
}

.unibms-visual-battery summary::-webkit-details-marker {
  display: none;
}

.unibms-visual-battery summary strong,
.unibms-visual-battery summary span {
  min-width: 0;
  line-height: 1.14;
  overflow-wrap: anywhere;
}

.unibms-visual-battery summary span {
  color: var(--muted);
  text-align: right;
}

.unibms-visual-battery[open] summary {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--neutral-soft) 70%, transparent);
}

.unibms-visual-battery-meta {
  padding: 8px;
  grid-template-columns: 1fr;
}

.unibms-visual-cell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 6px;
  padding: 0 8px 8px;
}

.unibms-visual-cell {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--panel-strong) 92%, var(--green) 8%);
}

.unibms-visual-cell.is-fault,
.unibms-visual-battery.is-error,
.unibms-visual-battery.is-fault,
.unibms-visual-string.is-fault,
.unibms-visual-block.is-fault {
  border-color: color-mix(in srgb, var(--red) 55%, var(--line) 45%);
}

.unibms-visual-cell.is-balancing {
  background: color-mix(in srgb, var(--panel-strong) 86%, var(--amber) 14%);
}

.unibms-visual-cell strong,
.unibms-visual-cell span,
.unibms-visual-cell small {
  min-width: 0;
  line-height: 1.14;
  overflow-wrap: anywhere;
}

.unibms-visual-cell span,
.unibms-visual-cell small {
  color: var(--muted);
  text-align: right;
}

@media (max-width: 760px) {
  .unibms-visual-block-header,
  .unibms-visual-string-header,
  .unibms-visual-battery summary {
    grid-template-columns: 1fr;
  }

  .unibms-visual-battery summary span {
    text-align: left;
  }
}

body[data-view="weiheng"] .register-table-wrap {
  overflow-x: visible;
}

.register-table th,
.register-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.register-table th {
  background: var(--neutral-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.register-table tr:last-child td {
  border-bottom: 0;
}

.register-table th:last-child,
.register-table td:last-child {
  border-right: 0;
}

.register-table.weiheng-status-table th,
.register-table.weiheng-status-table td {
  padding: 5px 6px;
  font-size: 12px;
  line-height: 1.18;
  vertical-align: top;
}

.register-table.weiheng-status-table th {
  white-space: nowrap;
}

.register-table.weiheng-status-table td {
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

.register-section {
  background: var(--green-soft);
  color: var(--green);
  font-weight: 900;
}

.register-live-value {
  font-weight: 900;
}

.weiheng-history-value {
  display: block;
  max-width: 100%;
  overflow: visible;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-align: left;
  text-decoration: none;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.weiheng-cell-lines {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.weiheng-cell-main,
.weiheng-cell-sub {
  overflow-wrap: anywhere;
}

.weiheng-cell-sub {
  color: var(--muted);
  font-size: 0.9em;
  font-weight: 700;
}

.weiheng-lite-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.weiheng-lite-link:hover {
  color: var(--green);
  text-decoration: none;
}

.weiheng-history-value:hover {
  color: var(--green);
}

.weiheng-command-stack {
  display: grid;
  gap: 5px;
  width: 100%;
  max-width: 160px;
  min-width: 0;
  margin: 0 auto;
}

.weiheng-power-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px;
  width: 100%;
}

.weiheng-power-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
}

.weiheng-direct-setpoint {
  display: block;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--green) 28%, var(--line));
  border-radius: 6px;
  padding: 4px 5px;
  background: color-mix(in srgb, var(--green) 8%, var(--panel));
  color: var(--text);
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.weiheng-power-field {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.05;
}

.weiheng-power-field > span:first-child {
  white-space: pre-line;
}

.weiheng-power-field input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 26px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 5px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 11px;
  font-weight: 850;
}

.weiheng-soc-limit-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  width: 100%;
  align-items: end;
}

.weiheng-soc-limit-current {
  grid-column: 1 / -1;
  display: block;
  min-width: 0;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.weiheng-soc-limit-control .is-soc-command {
  grid-column: 1 / -1;
  width: 100%;
}

.weiheng-command-status {
  min-height: 14px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.15;
}

.weiheng-command-button {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 5px;
  background: var(--panel);
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.08;
  text-align: center;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  cursor: pointer;
}

.weiheng-command-button:hover {
  border-color: var(--green);
  color: var(--green);
}

.weiheng-command-button:disabled {
  cursor: progress;
  opacity: 0.58;
}

.weiheng-command-button.is-on-command {
  border-color: color-mix(in srgb, var(--green) 55%, var(--line));
  color: var(--green);
}

.weiheng-command-button.is-off-command {
  border-color: color-mix(in srgb, #c84747 55%, var(--line));
  color: #c84747;
}

.weiheng-command-button.is-charge-command {
  border-color: color-mix(in srgb, #2f7dd3 55%, var(--line));
  color: #2f7dd3;
}

.weiheng-command-button.is-discharge-command {
  border-color: color-mix(in srgb, var(--green) 55%, var(--line));
  color: var(--green);
}

.weiheng-command-button.is-run-command,
.weiheng-command-button.is-soc-command {
  border-color: color-mix(in srgb, var(--green) 55%, var(--line));
  color: var(--green);
}

.weiheng-command-button.is-stop-command {
  border-color: color-mix(in srgb, #c9821b 60%, var(--line));
  color: #c9821b;
}

.weiheng-command-button.is-diagnostic-command {
  border-color: color-mix(in srgb, #5a7d8c 55%, var(--line));
  color: #325f70;
}

.weiheng-reset-button {
  color: var(--text);
}

.sinexcel-control-panel {
  display: grid;
  gap: 12px;
  max-width: 760px;
}

.sinexcel-control-note {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.sinexcel-command-grid,
.sinexcel-setpoint-form {
  display: grid;
  gap: 8px;
}

.sinexcel-command-grid {
  grid-template-columns: repeat(5, minmax(92px, 1fr));
}

.sinexcel-setpoint-form {
  grid-template-columns: repeat(2, minmax(130px, 1fr)) minmax(120px, 0.8fr);
  align-items: end;
}

.sinexcel-parameter-group-field {
  display: inline-grid;
  grid-template-columns: auto minmax(180px, 260px);
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.sinexcel-parameter-group-field select {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 8px;
  background: var(--panel);
  color: var(--text);
  font-weight: 850;
}

body[data-view="sinexcel"] .sinexcel-parameters-table {
  min-width: 860px;
  table-layout: auto;
}

body[data-view="sinexcel"] .sinexcel-parameters-table th,
body[data-view="sinexcel"] .sinexcel-parameters-table td {
  vertical-align: top;
}

.sinexcel-param-theme-row td {
  padding: 7px 9px !important;
  border-top: 2px solid color-mix(in srgb, var(--green) 34%, var(--line));
  border-bottom: 1px solid color-mix(in srgb, var(--green) 18%, var(--line));
  background: color-mix(in srgb, var(--green) 10%, var(--panel-strong));
}

.sinexcel-param-theme-row strong,
.sinexcel-param-theme-row span {
  display: inline-flex;
  align-items: center;
  margin-right: 10px;
}

.sinexcel-param-theme-row strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.sinexcel-param-theme-row span {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 850;
}

.sinexcel-param-name {
  min-width: 210px;
}

.sinexcel-param-name strong,
.sinexcel-param-name small {
  display: block;
}

.sinexcel-param-name strong {
  color: var(--ink);
  font-weight: 900;
  overflow-wrap: anywhere;
}

.sinexcel-param-name small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.register-row-skipped td {
  color: var(--muted);
  background: color-mix(in srgb, var(--panel-strong) 86%, var(--line));
}

.sinexcel-param-value,
.sinexcel-param-editor {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.sinexcel-param-editor {
  grid-template-columns: minmax(80px, 1fr) minmax(72px, 0.7fr);
  align-items: center;
}

.sinexcel-param-editor input,
.sinexcel-param-editor select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 6px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-weight: 800;
}

.sinexcel-param-editor .weiheng-command-button {
  min-height: 28px;
  font-size: 10.5px;
}

.weiheng-history-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(8, 12, 10, 0.42);
}

.weiheng-history-modal[hidden] {
  display: none;
}

.weiheng-history-dialog {
  width: min(920px, 100%);
  max-height: min(720px, 92vh);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
  padding: 14px;
}

.weiheng-history-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.weiheng-history-dialog-header h3 {
  margin: 0;
  font-size: 16px;
}

.weiheng-history-dialog-header button {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 6px;
}

.weiheng-history-dialog-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.history-range-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.history-range-control select {
  min-width: 92px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-weight: 700;
}

.weiheng-history-series-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}

.weiheng-history-series-controls[hidden] {
  display: none;
}

.weiheng-history-series-option {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 999px;
  background: var(--panel-strong);
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}

.weiheng-history-series-color {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 999px;
}

.weiheng-history-chart {
  width: 100%;
  min-height: 300px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 12px;
  background: var(--panel-strong);
}

.weiheng-history-chart.ha-history-chart {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-strong) 96%, white 4%), var(--panel-strong));
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 40%, transparent);
}

svg.ha-history-chart {
  border-radius: 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-strong) 96%, white 4%), var(--panel-strong));
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 40%, transparent);
}

body.theme-dark .weiheng-history-chart.ha-history-chart {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-strong) 92%, white 3%), var(--panel-strong));
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
}

body.theme-dark svg.ha-history-chart {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-strong) 92%, white 3%), var(--panel-strong));
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
}

.weiheng-history-chart[hidden] {
  display: none !important;
  min-height: 0;
  border: 0;
}

.weiheng-history-chart[hidden] + .weiheng-history-table-wrap {
  margin-top: 0;
}

.weiheng-history-table-wrap {
  max-height: 240px;
  overflow: auto;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.weiheng-history-table {
  font-size: 13px;
}

.weiheng-history-table th,
.weiheng-history-table td {
  padding: 6px 8px;
}

.weiheng-ai-row td:first-child {
  width: 120px;
  font-weight: 900;
}

.weiheng-ai-row.is-critical td:first-child {
  color: #c84747;
}

.weiheng-ai-row.is-warning td:first-child {
  color: #c9821b;
}

.weiheng-ai-row.is-ok td:first-child {
  color: var(--green);
}

.weiheng-ai-row.is-info td:first-child {
  color: #325f70;
}

.weiheng-ai-analysis {
  white-space: pre-wrap;
  line-height: 1.45;
  font-weight: 700;
}

.register-status-ok {
  color: var(--green);
  font-weight: 900;
}

.register-status-error {
  color: var(--amber);
  font-weight: 900;
}

.register-row-error td {
  background: var(--amber-soft);
}

body[data-view="weiheng"] .register-row-error td {
  background: transparent;
}

.weiheng-status-table td.register-status-ok {
  background: transparent;
  color: var(--ink);
}

.weiheng-status-table td.register-status-error {
  background: transparent;
  color: var(--amber);
}

.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.history-header h2 {
  margin-bottom: 0;
}

.history-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.history-series-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.history-series-options label {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-strong);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.history-series-options input {
  width: 16px;
  height: 16px;
  accent-color: var(--green);
}

.history-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.history-actions select {
  min-width: 230px;
}

.history-actions button {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--button-bg);
  border-radius: 6px;
  background: var(--button-bg);
  color: var(--button-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.history-chart {
  width: 100%;
  min-height: 180px;
  display: block;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
}

body[data-view="history"] .history-chart {
  min-height: 300px;
}

.history-chart-large {
  min-height: 280px;
}

.history-axis {
  fill: none;
  stroke: color-mix(in srgb, var(--muted) 32%, transparent);
  stroke-width: 1;
}

.history-grid {
  fill: none;
  stroke: color-mix(in srgb, var(--muted) 18%, transparent);
  stroke-dasharray: none;
  stroke-width: 1;
  opacity: 1;
}

.history-grid-strong {
  fill: none;
  stroke: color-mix(in srgb, var(--muted) 26%, transparent);
  stroke-width: 1;
  opacity: 1;
}

.history-grid-time {
  opacity: 0.45;
}

.history-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.35;
  filter: drop-shadow(0 1px 1px color-mix(in srgb, black 14%, transparent));
}

.history-area {
  opacity: 0.12;
  pointer-events: none;
}

.history-point {
  stroke: var(--panel-strong);
  stroke-width: 2;
}

.history-label,
.history-empty,
.history-scale-label,
.history-unit-label {
  fill: var(--muted);
  font: 700 14px Arial, Helvetica, sans-serif;
}

.history-scale-label {
  font-size: 10.5px;
  fill: color-mix(in srgb, var(--muted) 78%, transparent);
}

.history-scale-label-right,
.history-unit-label-right {
  fill: var(--blue);
}

.history-unit-label {
  font-size: 12px;
  font-weight: 900;
}

.history-stat-label {
  fill: var(--ink);
  font: 800 11px Arial, Helvetica, sans-serif;
}

.history-table-wrap {
  max-height: 230px;
  margin-top: 12px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.history-table th,
.history-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.history-table th {
  color: var(--muted);
  font-weight: 900;
}

.history-table tr:last-child td {
  border-bottom: 0;
}

.timeline {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
}

.step-index {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--step-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.step-index.ok {
  background: var(--green-soft);
  color: var(--green);
}

.step-index.fault {
  background: var(--red-soft);
  color: var(--red);
}

.step-index.warn {
  background: var(--amber-soft);
  color: var(--amber);
}

.map-panel {
  margin-top: 18px;
}

.system-map {
  display: grid;
  grid-template-columns: repeat(8, minmax(120px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.node {
  position: relative;
  min-height: 72px;
  display: grid;
  place-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
  color: var(--muted);
  text-align: center;
  font-size: 13px;
  font-weight: 800;
}

.node:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -12px;
  width: 12px;
  border-top: 2px solid var(--map-line);
}

.node.primary {
  border-color: var(--green);
  background: var(--green-soft);
  color: var(--ink);
}

.node.warning {
  border-color: #e2b3ad;
  background: var(--red-soft);
  color: var(--red);
}

@media (max-width: 900px) {
  .app-shell {
    padding: 14px;
  }

  .topbar,
  .grid,
  .aox-panel {
    display: grid;
    grid-template-columns: 1fr;
  }

  .top-actions {
    min-width: 0;
  }

  .result-panel {
    order: 1;
  }

  .controls {
    order: 2;
  }

  h1 {
    font-size: 28px;
  }

  .status-stack {
    justify-items: start;
  }

  .status-controls {
    justify-content: flex-start;
  }

  .status-pill {
    min-width: 0;
    font-size: 38px;
    text-align: left;
  }

  .metrics {
    grid-template-columns: 1fr;
  }

  .history-header,
  .history-actions,
  .registers-header,
  .weiheng-summary {
    display: grid;
    grid-template-columns: 1fr;
  }

  .history-actions select {
    min-width: 0;
    width: 100%;
  }

  .result-card {
    grid-template-columns: 1fr;
  }

  .source-row {
    grid-template-columns: 1fr;
  }

  .read-intervals {
    grid-template-columns: 1fr;
  }

  .api-key-row {
    grid-template-columns: 1fr;
  }

  .auth-form.compact,
  .auth-form.smtp-form,
  .user-row {
    grid-template-columns: 1fr;
  }

  .user-row form {
    display: grid;
  }
}

@media (max-width: 760px) {
  body {
    background: var(--bg);
  }

  .app-shell {
    padding: 10px;
  }

  .workspace {
    width: 100%;
  }

  .topbar,
  .registers-header,
  .weiheng-header,
  .register-live-header,
  .register-live-actions,
  .history-header,
  .history-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .top-actions,
  body[data-view="weiheng"] .weiheng-top-actions,
  body[data-view="unibms"] .weiheng-top-actions,
  .weiheng-power-control {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  body[data-view="weiheng"][data-weiheng-view="status"] .weiheng-top-actions > .weiheng-power-control.is-aggregate-command {
    display: grid;
  }

  .weiheng-power-control .weiheng-aggregate-command-stack {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: none;
  }

  .weiheng-aggregate-command-stack > #weihengAggregatePowerButton,
  .weiheng-aggregate-command-stack > .weiheng-soc-limit-control,
  .weiheng-aggregate-command-stack > .weiheng-power-inputs,
  .weiheng-aggregate-command-stack > .weiheng-power-buttons,
  .weiheng-aggregate-command-stack > #weihengCommandStatus {
    grid-column: 1;
  }

  .top-actions > *,
  .weiheng-top-actions > *,
  .weiheng-select-field,
  .weiheng-select-field:first-child,
  .sinexcel-parameter-group-field,
  .sinexcel-parameter-group-field select,
  .weiheng-power-control,
  .weiheng-power-control label {
    max-width: none;
    min-width: 0;
    width: 100%;
  }

  .sinexcel-parameter-group-field {
    grid-template-columns: 1fr;
  }

  .panel,
  .controls,
  .result-panel,
  .map-panel,
  .aox-panel,
  .registers-panel,
  .weiheng-panel,
  .unibms-panel {
    padding: 12px;
  }

  .weiheng-title {
    align-items: start;
  }

  .energy-flow-header {
    display: grid;
    grid-template-columns: 1fr;
  }

  .energy-flow-header-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .energy-flow-header span {
    text-align: left;
  }

  .energy-flow-stage {
    grid-template-columns: 1fr;
  }

  .energy-flow-route,
  .energy-flow-route-inverter,
  .energy-flow-route-site,
  .energy-flow-inverters {
    grid-template-columns: 1fr;
  }

  .energy-flow-node-ems {
    min-height: 96px;
  }

  .energy-flow-lane {
    min-height: 38px;
  }

  .energy-flow-lane small {
    align-self: center;
  }

  .weiheng-logo {
    width: 42px;
    height: 42px;
    font-size: 13px;
  }

  .weiheng-view-menu,
  body[data-view="weiheng"] .weiheng-view-menu,
  body[data-view="weiheng"] .weiheng-plant-menu {
    width: 100%;
    overflow-x: auto;
  }

  .weiheng-view-tab,
  body[data-view="weiheng"] .weiheng-view-tab,
  body[data-view="weiheng"] .weiheng-plant-menu-button {
    min-height: 34px;
    font-size: 13px;
  }

  .register-table-wrap,
  body[data-view="weiheng"] .register-table-wrap,
  body[data-view="unibms"] .register-table-wrap {
    overflow-x: visible;
    border: 0;
    background: transparent;
  }

  body[data-view="weiheng"] .live-register-table,
  body[data-view="unibms"] .live-register-table,
  .weiheng-status-table {
    min-width: 0;
    width: 100%;
  }

  .weiheng-status-table,
  .weiheng-status-table colgroup,
  .weiheng-status-table tbody,
  .weiheng-status-table tr,
  .weiheng-status-table td {
    display: block;
  }

  .weiheng-status-table colgroup,
  .weiheng-status-table thead {
    display: none;
  }

  .weiheng-status-table tbody {
    display: grid;
    gap: 12px;
  }

  .weiheng-status-table tr {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-strong);
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  .register-table.weiheng-status-table td,
  body[data-view="weiheng"] .live-register-table td,
  .weiheng-status-table td,
  .weiheng-status-table td:nth-child(n) {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 8px;
    width: auto;
    padding: 8px 10px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    white-space: normal;
  }

  .weiheng-status-table td:last-child {
    border-bottom: 0;
  }

  .weiheng-status-table td::before {
    content: attr(data-mobile-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 950;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .weiheng-status-table .weiheng-status-stack,
  .weiheng-status-table .weiheng-status-messages,
  .weiheng-command-stack {
    min-width: 0;
    width: 100%;
  }

  .weiheng-status-group {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .weiheng-status-table .weiheng-bess-cell .weiheng-cell-main,
  .weiheng-status-table .weiheng-bess-cell .weiheng-cell-sub,
  .weiheng-status-table .weiheng-online-cell .weiheng-status-chip span,
  .weiheng-status-table .weiheng-online-cell .weiheng-status-chip strong {
    white-space: normal;
  }

  .weiheng-power-inputs,
  .weiheng-power-buttons,
  .weiheng-soc-limit-control {
    grid-template-columns: 1fr;
  }

  .weiheng-command-button,
  .weiheng-soc-limit-control .is-soc-command {
    width: 100%;
  }

  .sinexcel-command-grid,
  .sinexcel-setpoint-form {
    grid-template-columns: 1fr;
  }

  .weiheng-history-modal {
    padding: 10px;
  }

  .weiheng-history-dialog {
    width: 100%;
    max-height: calc(100vh - 20px);
  }
}

@media (max-width: 760px) {
  body[data-view="balancing"] .app-shell {
    padding: 8px;
  }

  body[data-view="balancing"] .workspace {
    width: 100%;
  }

  body[data-view="balancing"] .balancing-panel {
    padding: 10px;
    border-radius: 8px;
  }

  body[data-view="balancing"] .balancing-panel .registers-header,
  body[data-view="balancing"] .balancing-panel .register-live-header,
  body[data-view="balancing"] .balancing-panel .register-live-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: stretch;
  }

  body[data-view="balancing"] .balancing-panel .register-live-actions > *,
  body[data-view="balancing"] .balancing-panel .weiheng-select-field,
  body[data-view="balancing"] .balancing-panel select,
  body[data-view="balancing"] .balancing-panel input,
  body[data-view="balancing"] .balancing-panel button {
    min-width: 0;
    width: 100%;
  }

  body[data-view="balancing"] .balancing-view-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 4px;
  }

  body[data-view="balancing"] .balancing-view-menu .weiheng-view-tab {
    width: 100%;
    min-height: 38px;
    font-size: 13px;
  }

  body[data-view="balancing"] .balancing-live-panel,
  body[data-view="balancing"] .balancing-log-layout,
  body[data-view="balancing"] .balancing-live-sections,
  body[data-view="balancing"] .balancing-live-section {
    gap: 10px;
  }

  body[data-view="balancing"] .register-block {
    padding: 10px;
    border-radius: 8px;
  }

  body[data-view="balancing"] .balancing-live-options,
  body[data-view="balancing"] .balancing-live-series-controls {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 8px;
  }

  body[data-view="balancing"] .balancing-live-options label,
  body[data-view="balancing"] .balancing-live-series-controls label {
    width: 100%;
    max-width: none;
    justify-content: start;
  }

  body[data-view="balancing"] .balancing-live-series-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  body[data-view="balancing"] .balancing-live-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  body[data-view="balancing"] .balancing-live-card,
  body[data-view="balancing"] .balancing-live-empty {
    min-height: 72px;
    padding: 9px;
  }

  body[data-view="balancing"] .balancing-live-card span {
    font-size: 10.5px;
    line-height: 1.15;
  }

  body[data-view="balancing"] .balancing-live-card strong {
    font-size: 16px;
  }

  body[data-view="balancing"] .balancing-live-card small {
    font-size: 10.5px;
  }

  body[data-view="balancing"] .energy-flow-card {
    padding: 10px;
    gap: 10px;
  }

  body[data-view="balancing"] .balancing-energy-flow {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body[data-view="balancing"] .energy-flow-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
  }

  body[data-view="balancing"] .energy-flow-header-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  body[data-view="balancing"] .energy-flow-header span {
    text-align: left;
  }

  body[data-view="balancing"] .energy-flow-stage {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  body[data-view="balancing"] .energy-flow-map {
    min-width: 720px;
  }

  body[data-view="balancing"] .energy-flow-map-node {
    width: 174px;
  }

  body[data-view="balancing"] .energy-flow-map-node.is-compact {
    width: 190px;
    min-height: 122px;
    aspect-ratio: auto;
    border-radius: 14px;
  }

  body[data-view="balancing"] .energy-flow-node {
    min-height: 62px;
    padding: 8px 9px;
  }

  body[data-view="balancing"] .energy-flow-node strong {
    font-size: 16px;
  }

  body[data-view="balancing"] .energy-flow-route,
  body[data-view="balancing"] .energy-flow-route-inverter,
  body[data-view="balancing"] .energy-flow-route-site,
  body[data-view="balancing"] .energy-flow-inverters {
    grid-template-columns: 1fr;
  }

  body[data-view="balancing"] .energy-flow-node-ems {
    min-height: 88px;
  }

  body[data-view="balancing"] .energy-flow-lane {
    min-height: 34px;
  }

  body[data-view="balancing"] .energy-flow-lane small {
    align-self: center;
    font-size: 10.5px;
  }

  body[data-view="balancing"] .register-table-wrap,
  body[data-view="balancing"] .balancing-live-decoded-wrap,
  body[data-view="balancing"] .balancing-chart-panel,
  body[data-view="balancing"] .balancing-log-chart,
  body[data-view="balancing"] .balancing-live-chart,
  body[data-view="balancing"] .balancing-live-schedule-chart {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body[data-view="balancing"] .balancing-chart-svg {
    width: 820px;
    min-width: 820px;
    max-width: none;
    min-height: 250px;
  }

  body[data-view="balancing"] .balancing-chart-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
  }

  body[data-view="balancing"] .balancing-chart-legend {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
  }

  body[data-view="balancing"] .balancing-legend-chip {
    width: 100%;
    align-items: flex-start;
    white-space: normal;
  }

  body[data-view="balancing"] .balancing-live-schedule-table {
    min-width: 440px;
  }

  body[data-view="balancing"] .balancing-log-table {
    min-width: 520px;
  }

  body[data-view="balancing"] .balancing-decoded-table,
  body[data-view="balancing"] .balancing-live-decoded-table {
    min-width: 760px;
  }

  body[data-view="balancing"] .balancing-log-content,
  body[data-view="balancing"] .balancing-live-log {
    max-height: 42vh;
    padding: 10px;
    font-size: 11px;
  }

  body[data-view="balancing"] .balancing-decoded-values {
    gap: 4px;
  }

  body[data-view="balancing"] .balancing-value-chip {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  body[data-view="balancing"] .balancing-live-summary {
    grid-template-columns: 1fr;
  }

  body[data-view="balancing"] .balancing-chart-svg {
    width: 740px;
    min-width: 740px;
  }
}