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

body[data-shell="platform"] .panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  background: linear-gradient(155deg, rgba(10, 28, 52, 0.92), rgba(7, 16, 30, 0.9));
  box-shadow: var(--shadow);
}

body[data-shell="business"] .panel {
  position: relative;
  border-radius: 11px;
  padding: 13px 15px;
  background: linear-gradient(180deg, var(--surface-panel), var(--surface-panel-deep));
}

body[data-shell="business"] .panel::before {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(120, 200, 255, 0.5), transparent);
}

body[data-shell="business"] .pt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 11px;
  color: var(--txt);
  font-size: 14px;
  font-weight: 400;
}

body[data-shell="business"] .pt::before,
body[data-shell="business"] .control-right-panel .panel-title.compact h2::before,
body[data-shell="business"] .control-right-panel .panel-title.compact h3::before,
body[data-shell="business"] .control-detail-title::before {
  width: 3px;
  height: 13px;
  content: "";
  border-radius: 2px;
  background: linear-gradient(var(--cyan), var(--blue));
}

body[data-shell="business"] .pt .r {
  margin-left: auto;
}

body[data-shell="business"] .pt a.r {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

body[data-shell="business"] .pt a.r:hover {
  color: var(--cyan);
}

.panel h3 {
  margin: 0 0 10px;
  font-size: 20px;
}

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

.loading-state {
  min-height: 280px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
}

.loading-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid var(--border-muted);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: loading-spin 0.8s linear infinite;
}

@keyframes loading-spin {
  to {
    transform: rotate(360deg);
  }
}
.empty-state {
  margin-top: 18px;
  border: 1px dashed var(--border-muted-dashed);
  border-radius: var(--radius);
  padding: 18px;
  color: var(--muted);
  background: var(--surface-panel-deeper);
}

.route-entry-shell {
  display: grid;
  gap: 14px;
  min-height: 360px;
}

.route-entry-head {
  display: grid;
  gap: 5px;
}

.route-entry-head span {
  color: var(--muted);
  font-size: 13px;
}

.route-entry-head strong {
  color: var(--text);
  font-size: 20px;
}

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

.route-entry-panel {
  min-height: 118px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.5), rgba(10, 20, 40, 0.5));
}

.route-entry-panel i,
.route-entry-panel b,
.route-entry-panel span {
  display: block;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(39, 224, 255, 0.09), rgba(25, 230, 160, 0.22), rgba(39, 224, 255, 0.09));
  animation: ops-loading-pulse 1.4s ease-in-out infinite;
}

.route-entry-panel i {
  width: 32px;
  height: 32px;
  margin-bottom: 18px;
  opacity: calc(0.9 - var(--i, 0) * 0.05);
}

.route-entry-panel b {
  width: 70%;
  height: 14px;
  margin-bottom: 12px;
}

.route-entry-panel span {
  width: 46%;
  height: 10px;
}

.permission-state {
  border-color: var(--border-danger-subtle);
}

.field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.field input,
.field select,
.inp {
  min-height: 38px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  color: var(--text);
  background: var(--bg-strong);
}

.ops-dashboard {
  display: grid;
  gap: 18px;
}

.ops-kpi-strip,
.ops-grid {
  display: grid;
  gap: 14px;
}

.ops-kpi-strip {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.ops-kpi,
.ops-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-panel);
  box-shadow: var(--shadow);
}

.ops-kpi {
  min-height: 112px;
  display: grid;
  align-content: space-between;
  padding: 16px;
  color: var(--text);
  text-decoration: none;
}

.ops-kpi span,
.ops-kpi em,
.ops-panel-head a,
.ops-row em,
.ops-ring em,
.ops-runtime-list dt,
.ops-linkage dt,
.ops-bar-item small {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.ops-kpi strong {
  overflow-wrap: anywhere;
  font-size: 24px;
  line-height: 1.1;
}

.ops-grid {
  grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr);
}

.ops-grid-wide {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ops-panel {
  min-width: 0;
  padding: 18px;
}

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

.ops-panel-head h3 {
  margin: 0;
  font-size: 17px;
}

.ops-panel-head a,
.ops-row {
  text-decoration: none;
}

.ops-rings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ops-ring {
  --value: 0;
  min-height: 148px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at center, var(--surface-ring-core) 0 47%, transparent 48%),
    conic-gradient(var(--accent) calc(var(--value) * 1%), var(--border-muted-faint) 0);
}

.ops-ring strong {
  font-size: 24px;
}

.ops-ring span {
  font-weight: 700;
}

.ops-runtime-list,
.ops-linkage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 0;
}

.ops-runtime-list div,
.ops-linkage div,
.ops-mode-list span {
  border: 1px solid var(--border-muted);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface-panel-deep);
}

.ops-runtime-list dd,
.ops-linkage dd {
  margin: 6px 0 0;
  font-size: 21px;
  font-weight: 800;
}

.ops-mode-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.ops-mode-list strong {
  color: var(--accent);
}

.ops-bars {
  min-height: 228px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(54px, 1fr);
  align-items: end;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 8px;
}

.ops-bar-item {
  min-width: 54px;
  height: 220px;
  display: grid;
  grid-template-rows: 1fr auto auto;
  justify-items: center;
  gap: 7px;
}

.ops-bar {
  width: 100%;
  min-height: 8px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--accent-blue), var(--accent));
}

.ops-bar-item strong {
  color: var(--text-bar);
  font-size: 11px;
}

.ops-table {
  display: grid;
  gap: 8px;
}

.ops-row {
  min-height: 48px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) max-content;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 10px 12px;
  color: var(--text);
  background: var(--surface-panel-deep);
}

.ops-row span {
  color: var(--accent);
  font-weight: 800;
}

.ops-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-row.alert-critical span {
  color: var(--danger);
}

.confirmed-ops {
  display: grid;
  gap: 12px;
}

.confirmed-ops.ops-sample {
  display: block;
  font: 13px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif;
  margin-top: 0;
}

.confirmed-ops.ops-loading-shell {
  opacity: 0.96;
}

.confirmed-ops .ops-kpi-card.is-loading {
  pointer-events: none;
}

.confirmed-ops .ops-loading-lines {
  display: grid;
  gap: 10px;
  padding: 6px 0;
}

.confirmed-ops .ops-loading-lines span {
  height: 11px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(39, 224, 255, 0.09), rgba(25, 230, 160, 0.24), rgba(39, 224, 255, 0.09));
  opacity: calc(0.88 - var(--i, 0) * 0.12);
  animation: ops-loading-pulse 1.4s ease-in-out infinite;
}

.confirmed-ops .ops-loading-lines span:nth-child(2n) {
  width: 72%;
}

.confirmed-ops .ops-loading-lines span:nth-child(3n) {
  width: 86%;
}

@keyframes ops-loading-pulse {
  0%, 100% {
    opacity: 0.36;
  }
  50% {
    opacity: 0.9;
  }
}

.ops-sample .ops-home-layout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(340px, 0.72fr) minmax(0, 2.35fr);
  gap: 12px;
  align-items: stretch;
}

.ops-sample .ops-home-left,
.ops-sample .ops-home-right {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.ops-sample .ops-home-left {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.ops-sample .ops-home-right {
  grid-template-rows: auto minmax(286px, auto) minmax(0, 1fr);
}

.ops-sample .ops-home-left > .panel,
.ops-sample .ops-home-left > .ops-weather-contract,
.ops-sample .ops-home-right > .panel,
.ops-sample .ops-home-bottom-row > .panel {
  min-width: 0;
  margin: 0;
}

.ops-sample .ops-home-right > .kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(112px, 1fr));
  gap: 10px;
  margin-bottom: 0;
}

.ops-sample .ops-home-right > .ops-energy-trend {
  min-height: 286px;
}

.ops-sample .ops-home-bottom-row {
  grid-template-columns: minmax(0, 1.34fr) minmax(300px, 0.72fr);
  align-items: stretch;
}

.ops-sample .ops-home-bottom-row > .panel {
  min-height: 268.5px;
}

.ops-sample .ops-home-acbar {
  grid-column: 1 / -1;
}

.ops-sample .ops-ac-status-layout {
  display: grid;
  grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.ops-sample .ops-ac-status-summary {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(21, 38, 74, 0.45);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ops-sample .ops-ac-summary-row {
  display: flex;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid rgba(96, 150, 230, 0.08);
  font-size: 12.5px;
}

.ops-sample .ops-ac-summary-row:last-child {
  border-bottom: 0;
}

.ops-sample .ops-ac-summary-row > span {
  color: var(--muted);
}

.ops-sample .ops-ac-summary-row > b {
  margin-left: auto;
  font-size: 16px;
  font-weight: 700;
}

.ops-sample .ops-ac-summary-row > b strong.good {
  color: var(--green);
  font-size: 16px;
}

.ops-sample .ops-ac-summary-row > b small {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  margin-left: 2px;
}

.ops-sample .ops-ac-summary-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(96, 150, 230, 0.08);
  font-size: 11.5px;
  color: var(--muted);
}

.ops-sample .ops-ac-summary-mode b {
  color: var(--text);
}

.ops-sample .ops-ac-summary-mode.tone-cool b { color: var(--cool); }
.ops-sample .ops-ac-summary-mode.tone-dehum b { color: var(--dehum); }
.ops-sample .ops-ac-summary-mode.tone-heat b { color: var(--heat); }

.ops-sample .ops-ac-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  align-content: start;
}

.ops-sample .ops-ac-status-empty {
  display: grid;
  align-content: center;
}

.ops-sample .ops-ac-unit {
  display: block;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(21, 38, 74, 0.45);
  padding: 9px 12px;
  position: relative;
  color: inherit;
  text-decoration: none;
  min-width: 0;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.ops-sample .ops-ac-unit:hover {
  transform: translateY(-1px);
}

.ops-sample .ops-ac-unit.is-on.mode-cool { border-color: rgba(47, 139, 255, 0.45); }
.ops-sample .ops-ac-unit.is-on.mode-dry { border-color: rgba(34, 211, 238, 0.45); }
.ops-sample .ops-ac-unit.is-on.mode-heat { border-color: rgba(255, 177, 61, 0.45); }
.ops-sample .ops-ac-unit.is-off,
.ops-sample .ops-ac-unit.is-offline {
  opacity: 0.62;
}

.ops-sample .ops-ac-unit-name {
  display: block;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 42px;
}

.ops-sample .ops-ac-unit-badge {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 10.5px;
  border-radius: 99px;
  padding: 1px 8px;
  color: var(--muted);
  border: 1px solid var(--line);
}

.ops-sample .ops-ac-unit.is-on.mode-cool .ops-ac-unit-badge { color: var(--cool); border-color: rgba(47, 139, 255, 0.4); background: rgba(47, 139, 255, 0.1); }
.ops-sample .ops-ac-unit.is-on.mode-dry .ops-ac-unit-badge { color: var(--dehum); border-color: rgba(34, 211, 238, 0.4); background: rgba(34, 211, 238, 0.1); }
.ops-sample .ops-ac-unit.is-on.mode-heat .ops-ac-unit-badge { color: var(--heat); border-color: rgba(255, 138, 61, 0.4); background: rgba(255, 138, 61, 0.1); }
.ops-sample .ops-ac-unit.is-offline .ops-ac-unit-badge { color: var(--bad); border-color: rgba(255, 95, 102, 0.4); }

.ops-sample .ops-ac-unit-set {
  display: block;
  font-size: 21px;
  font-weight: 800;
  margin: 4px 0 1px;
}

.ops-sample .ops-ac-unit-set small {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 600;
  margin-left: 3px;
}

.ops-sample .ops-ac-unit-room {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

.ops-sample .ops-ac-unit-room b {
  color: var(--text);
  font-weight: 600;
}

.ops-sample .ops-ac-unit-fan {
  display: flex;
  gap: 3px;
  margin-top: 6px;
  align-items: center;
}

.ops-sample .ops-ac-unit-fan i {
  width: 12px;
  height: 4px;
  border-radius: 2px;
  background: rgba(96, 150, 230, 0.22);
}

.ops-sample .ops-ac-unit.is-on.mode-cool .ops-ac-unit-fan i.on { background: var(--cool); }
.ops-sample .ops-ac-unit.is-on.mode-dry .ops-ac-unit-fan i.on { background: var(--dehum); }
.ops-sample .ops-ac-unit.is-on.mode-heat .ops-ac-unit-fan i.on { background: var(--heat); }
.ops-sample .ops-ac-unit.is-on .ops-ac-unit-fan i.on { background: var(--cyan); }

.ops-sample .ops-ac-unit-fan em {
  font-style: normal;
  font-size: 10px;
  color: var(--muted);
  margin-left: 4px;
}

.ops-sample .ops-ac-unit-more {
  display: grid;
  place-content: center;
  text-align: center;
  color: var(--muted);
}

.ops-sample .ops-ac-unit-more b {
  font-size: 18px;
  color: var(--text);
}
.ops-sample .kpi {
  min-height: 90.5px;
  display: block;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.5), rgba(10, 20, 40, 0.5));
  box-shadow: none;
}

.confirmed-ops.ops-sample .kpi.ops-kpi-card {
  min-height: 90.5px;
  display: block;
  align-content: initial;
  gap: 0;
  padding: 10px 12px;
  color: var(--txt);
  text-decoration: none;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.5), rgba(10, 20, 40, 0.5));
  box-shadow: none;
}

.ops-sample .kpi .l {
  color: var(--mut);
  font-size: 11px;
}

.ops-sample .kpi .v {
  margin-top: 2px;
  color: var(--txt);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.5;
}


.confirmed-ops.ops-sample .ops-kpi-foot {
  margin-top: 2px;
  color: var(--mut);
  font-size: 10px;
}

.confirmed-ops.ops-sample .ops-kpi-card .ops-kpi-wave {
  display: grid;
  gap: 1px;
  margin-top: 3px;
  min-width: 0;
}

.confirmed-ops.ops-sample .ops-kpi-card .ops-kpi-wave span {
  color: #8fdcf0;
  font-size: 10px;
  line-height: 1.1;
  white-space: nowrap;
}

.confirmed-ops.ops-sample .ops-kpi-card .ops-kpi-wave .ops-load-waveform {
  display: block;
  width: 100%;
  height: 28px;
  overflow: visible;
}

.confirmed-ops.ops-sample .ops-kpi-card .ops-kpi-wave .ops-load-waveform path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.confirmed-ops.ops-sample .ops-kpi-card .ops-kpi-wave .ops-load-waveform-glow {
  stroke: rgba(39, 224, 255, 0.24);
  stroke-width: 8;
  filter: drop-shadow(0 0 8px rgba(39, 224, 255, 0.38));
}

.confirmed-ops.ops-sample .ops-kpi-card .ops-kpi-wave .ops-load-waveform-line {
  stroke: var(--cyan, #27e0ff);
  stroke-width: 2.4;
}
.ops-realtime-load-panel {
  height: auto;
  min-height: 148px;
  overflow: hidden;
  border-color: rgba(34, 211, 238, 0.26);
  background: linear-gradient(135deg, rgba(8, 31, 47, 0.62), rgba(12, 24, 52, 0.56));
}

.ops-realtime-load-panel .ops-realtime-load-board {
  display: grid;
  grid-template-columns: minmax(210px, 0.55fr) minmax(0, 1.45fr);
  gap: 16px;
  align-items: stretch;
  min-width: 0;
}

.ops-realtime-load-panel .ops-realtime-load-total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(118px, 0.78fr);
  grid-template-rows: auto auto auto;
  gap: 3px 14px;
  align-content: center;
  min-width: 0;
  padding: 4px 14px 4px 0;
  border-right: 1px solid rgba(70, 101, 151, 0.26);
}

.ops-realtime-load-panel .ops-realtime-load-total span,
.ops-realtime-load-panel .ops-load-split-main span,
.ops-realtime-load-panel .ops-load-split-row em {
  color: var(--mut);
  font-style: normal;
  font-size: 11px;
}

.ops-realtime-load-panel .ops-realtime-load-total strong {
  color: var(--cyan);
  font-size: 30px;
  line-height: 1.08;
  text-shadow: 0 0 16px rgba(39, 224, 255, 0.32);
}

.ops-realtime-load-panel .ops-realtime-load-total strong small,
.ops-realtime-load-panel .ops-load-split-row strong small {
  margin-left: 3px;
  color: var(--mut);
  font-size: 11px;
}

.ops-realtime-load-panel .ops-realtime-load-total em {
  color: #8db4e8;
  font-style: normal;
  font-size: 11px;
}

.ops-realtime-load-panel .ops-realtime-load-total .ops-load-waveform {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: center;
}

.ops-realtime-load-panel .ops-realtime-load-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  min-width: 0;
}

.ops-realtime-load-panel .ops-load-split-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(82px, max-content);
  grid-template-areas:
    "main value"
    "main wave"
    "detail wave";
  gap: 4px 10px;
  align-items: center;
  min-width: 0;
  padding: 4px 0 6px 10px;
  border-left: 1px solid rgba(39, 224, 255, 0.18);
}

.ops-realtime-load-panel .ops-load-split-main {
  grid-area: main;
  min-width: 0;
}

.ops-realtime-load-panel .ops-load-split-main b,
.ops-realtime-load-panel .ops-load-split-main span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-realtime-load-panel .ops-load-split-main b {
  color: var(--txt);
  font-size: 12px;
}

.ops-realtime-load-panel .ops-load-split-main i {
  position: relative;
  display: block;
  height: 3px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(39, 224, 255, 0.12);
}

.ops-realtime-load-panel .ops-load-split-main i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--load, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), #ffb13d);
  box-shadow: 0 0 10px rgba(255, 177, 61, 0.35);
}

.ops-realtime-load-panel .ops-load-split-row strong {
  grid-area: value;
  justify-self: end;
  color: var(--cyan);
  font-size: 18px;
  line-height: 1.1;
}

.ops-realtime-load-panel .ops-load-wave {
  grid-area: wave;
  min-width: 82px;
}

.ops-realtime-load-panel .ops-load-split-row em {
  grid-area: detail;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-realtime-load-panel .ops-load-split-empty {
  grid-column: 1 / -1;
  min-height: 54px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(70, 101, 151, 0.35);
  color: var(--mut);
  font-size: 12px;
}

.ops-realtime-load-panel .ops-load-waveform {
  display: block;
  width: 100%;
  height: 42px;
  overflow: visible;
}

.ops-realtime-load-panel .ops-load-waveform.is-wide {
  height: 56px;
}

.ops-realtime-load-panel .ops-load-waveform path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ops-realtime-load-panel .ops-load-waveform-glow {
  stroke: rgba(255, 177, 61, 0.24);
  stroke-width: 9;
  filter: drop-shadow(0 0 8px rgba(255, 177, 61, 0.34));
}

.ops-realtime-load-panel .ops-load-waveform-line {
  stroke: #c98222;
  stroke-width: 3;
}

body[data-route="daily-usage"] #viewHost .daily-realtime-load-panel {
  margin-top: 12px;
  min-height: 0;
}

body[data-route="daily-usage"] #viewHost .daily-realtime-load-panel .ops-realtime-load-board {
  grid-template-columns: minmax(240px, 0.42fr) minmax(0, 1.58fr);
}

body[data-route="daily-usage"] #viewHost .daily-realtime-load-panel .ops-realtime-load-list {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  align-content: start;
}

.ops-sample .kpi .v small {
  color: var(--mut);
  font-size: 11px;
}

.ops-sample .grid {
  display: grid;
  gap: 12px;
}
.ops-sample table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.ops-sample th,
.ops-sample td {
  border-bottom: 1px solid var(--line);
  padding: 8px 7px;
  text-align: left;
}

.ops-sample th {
  color: var(--mut);
  font-size: 11px;
  font-weight: 600;
}

.ops-sample tr.lk {
  cursor: pointer;
}

.ops-sample tr.lk:hover td {
  background: rgba(47, 139, 255, 0.1);
}

.ops-sample .statg {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  text-align: center;
}

.ops-sample .statg b {
  display: block;
  color: var(--txt);
  font-size: 22px;
  font-weight: 800;
}

.ops-sample .statg span {
  color: var(--mut);
  font-size: 11px;
}

.ops-sample .legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
  color: var(--mut);
  font-size: 11px;
}

.ops-sample .legend i {
  width: 9px;
  height: 9px;
  display: inline-block;
  margin-right: 5px;
  border-radius: 50%;
}

.ops-sample .pt .ops-card-title {
  display: inline;
  margin: 0;
}

.ops-sample .pt .ops-card-title a {
  padding-left: 0;
  color: inherit;
  text-decoration: none;
  font-size: inherit;
  font-weight: inherit;
}

.ops-sample .pt .ops-card-title a::before {
  display: none;
}

.ops-sample .tag {
  min-height: 0;
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 20px;
  padding: 2px 8px;
  color: #9fc6ff;
  background: rgba(47, 139, 255, 0.16);
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.5;
}

.ops-sample .tag.g {
  color: #86efac;
  background: rgba(34, 197, 94, 0.18);
}

.ops-sample .tag.w {
  color: #ffd089;
  background: rgba(255, 177, 61, 0.18);
}

.ops-sample .tag.b {
  color: #ff9aa4;
  background: rgba(255, 90, 106, 0.18);
}

.ops-sample .bar9 {
  height: 9px;
  border-radius: 6px;
  background: linear-gradient(90deg, #2f8bff, #27e0ff);
}

.ops-sample .aibig {
  color: var(--green);
  font-size: 28px;
  font-weight: 900;
}

.confirmed-ops.ops-sample .ops-ai-total .aibig {
  color: var(--green);
  font-size: 28px;
  font-weight: 900;
}

.confirmed-ops.ops-sample .ops-ai-total .aibig + .aibig {
  color: var(--cyan);
  font-size: 20px;
}

.confirmed-ops.ops-sample .ops-ai-total .aibig small {
  color: inherit;
  font-size: 13px;
}

.confirmed-ops.ops-sample .ops-stat-grid div {
  border: 0;
  padding: 0;
  background: transparent;
}

.confirmed-ops.ops-sample .status-grid b {
  font-size: 22px;
}

.confirmed-ops.ops-sample .ops-sample-ai .ops-stat-grid b {
  font-size: 18px;
}

.confirmed-ops.ops-sample .ops-sample-ai .ops-stat-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.confirmed-ops.ops-sample .ops-split-note {
  color: var(--mut);
  font-size: 11px;
}

.confirmed-ops.ops-sample .ops-delta {
  font-size: inherit;
  font-weight: 400;
}

.confirmed-ops.ops-sample .ops-mini-table {
  border-radius: 0;
  font-size: 12px;
}

.confirmed-ops.ops-sample .ops-mini-table th,
.confirmed-ops.ops-sample .ops-mini-table td {
  border-bottom: 1px solid var(--line);
  padding: 8px 7px;
}

.confirmed-ops.ops-sample .ops-mini-table th {
  color: var(--mut);
  font-size: 11px;
  font-weight: 600;
  background: transparent;
}

.confirmed-ops.ops-sample .ops-mini-table a {
  color: inherit;
  font-weight: 400;
}

.confirmed-ops.ops-sample .ops-ai-chip {
  min-height: 0;
  border: 0;
  border-radius: 20px;
  padding: 2px 8px;
  color: #9fc6ff;
  background: rgba(47, 139, 255, 0.16);
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.5;
}

.confirmed-ops.ops-sample .ops-ai-chip.tone-warn {
  color: #ffd089;
  background: rgba(255, 177, 61, 0.18);
}

.confirmed-ops.ops-sample .ops-ai-chip.tone-bad {
  color: #ff9aa4;
  background: rgba(255, 90, 106, 0.18);
}

.confirmed-ops.ops-sample .ops-sample-ai {
  border-color: rgba(25, 230, 160, 0.35);
  background: linear-gradient(160deg, rgba(25, 230, 160, 0.12), rgba(10, 20, 40, 0.5));
}

.confirmed-ops .ops-kpis {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}

.confirmed-ops .ops-kpi-card {
  min-height: 76px;
  display: grid;
  align-content: start;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 10px 11px;
  color: var(--text);
  text-decoration: none;
  background: linear-gradient(180deg, var(--surface-panel), var(--surface-panel-deep));
}

.confirmed-ops .ops-kpi-card span,
.confirmed-ops .ops-kpi-card em,
.confirmed-ops .ops-card-title span,
.confirmed-ops .ops-chart-note,
.confirmed-ops .ops-split-note,
.confirmed-ops .ops-card-foot {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}

.confirmed-ops .ops-kpi-card strong {
  overflow-wrap: anywhere;
  font-size: 22px;
  line-height: 1.05;
}

.confirmed-ops .ops-kpi-trend,
.confirmed-ops .ops-delta {
  font-size: 10px;
  font-weight: 800;
}

.confirmed-ops .ops-delta {
  color: var(--muted);
  white-space: nowrap;
}

.confirmed-ops .ops-delta.up {
  color: var(--red);
}

.confirmed-ops .ops-delta.down {
  color: var(--green);
}

.confirmed-ops .ops-row-grid {
  display: grid;
  grid-template-columns: 1.15fr 1.8fr 1.15fr;
  gap: 12px;
}

.confirmed-ops .ops-card {
  min-width: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 13px 15px;
  background: linear-gradient(180deg, var(--surface-panel), var(--surface-panel-deep));
  box-shadow: var(--shadow);
}

.confirmed-ops .ops-card::before {
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

.confirmed-ops .ops-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.confirmed-ops .ops-card-title a {
  position: relative;
  padding-left: 10px;
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 900;
}

.confirmed-ops .ops-card-title a::before {
  position: absolute;
  left: 0;
  top: 3px;
  width: 3px;
  height: 14px;
  content: "";
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent), var(--accent-blue));
}

.confirmed-ops .ops-card-title span,
.confirmed-ops .ops-badge {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--text-soft);
  background: var(--surface-pill);
}

.confirmed-ops .ai-panel {
  border-color: var(--border-accent-strong);
  background: linear-gradient(160deg, var(--overlay-accent), var(--surface-panel-deep));
}

.confirmed-ops .ops-gauges,
.confirmed-ops .ops-mode-block,
.confirmed-ops .ops-tou,
.confirmed-ops .ops-ready-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 10px;
}

.confirmed-ops .ops-gauge,
.confirmed-ops .ops-ring {
  --value: 0;
  --ring-color: var(--accent);
  width: 96px;
  height: 96px;
  min-height: 96px;
  max-width: 96px;
  flex: 0 0 96px;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  border: 1px solid var(--border-muted);
  border-radius: 999px;
  background:
    radial-gradient(circle at center, var(--surface-ring-core) 0 55%, transparent 56%),
    conic-gradient(var(--ring-color) calc(var(--value) * 1%), var(--surface-track) 0);
}

.confirmed-ops .ops-gauge.tone-good,
.confirmed-ops .ops-ring.tone-good {
  --ring-color: var(--green);
}

.confirmed-ops .ops-gauge.tone-blue,
.confirmed-ops .ops-ring.tone-blue {
  --ring-color: var(--blue);
}

.confirmed-ops .ops-gauge.tone-warn,
.confirmed-ops .ops-ring.tone-warn {
  --ring-color: var(--amber);
}

.confirmed-ops .trend-svg .tou-peak {
  fill: #ff5a6a;
}

.confirmed-ops .trend-svg .tou-flat {
  fill: #ffb13d;
}

.confirmed-ops .trend-svg .tou-valley {
  fill: #19e6a0;
}

.confirmed-ops .ops-trend-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  /* 容器须可收缩,否则其内宽 SVG(min-width:Npx)会撑大父级而非横向滚动,
     在窄屏(手机)造成整页横向溢出。min-width:0 让 overflow-x:auto 真正生效。 */
  min-width: 0;
  max-width: 100%;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(80, 140, 235, .45) transparent;
}

.confirmed-ops .trend-svg {
  display: block;
  max-width: none;
  /* 无固定 height + viewBox 等比缩放:图表始终撑满面板宽度,
     消除宽屏下 xMidYMid 居中造成的两侧留白。 */
  height: auto;
}

.confirmed-ops .trend-svg .trend-value-label {
  fill: #dce8ff;
  font-size: 9px;
  font-weight: 800;
}

.confirmed-ops .trend-svg .trend-date-label {
  fill: #7e98c6;
  font-size: 9px;
  font-weight: 700;
}

.confirmed-ops .trend-svg .trend-point {
  cursor: pointer;
}

.confirmed-ops .trend-svg .trend-point:focus {
  outline: none;
}

.confirmed-ops .trend-svg .trend-point rect {
  transition: opacity .16s ease, stroke .16s ease;
}

.confirmed-ops .trend-svg .trend-point.is-missing rect {
  fill: #94a3b8;
  opacity: .28;
}

.confirmed-ops .trend-svg .trend-value-label.is-missing {
  fill: #94a3b8;
  font-size: 8px;
}

.confirmed-ops .trend-svg .trend-point.is-selected rect,
.confirmed-ops .trend-svg .trend-point:focus rect {
  stroke: #0f67d8;
  stroke-width: 2px;
}
.confirmed-ops.ops-sample .ops-energy-trend {
  min-width: 0;
}

.confirmed-ops.ops-sample .ops-trend-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.confirmed-ops.ops-sample .ops-trend-head .r {
  margin-left: 0;
}

.confirmed-ops.ops-sample .ops-trend-controls {
  min-width: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.confirmed-ops.ops-sample .ops-trend-controls select,
.confirmed-ops.ops-sample .ops-trend-controls input {
  min-width: 0;
  height: 26px;
  border: 1px solid rgba(70, 140, 235, 0.32);
  border-radius: 6px;
  padding: 0 8px;
  color: var(--txt);
  background: rgba(8, 16, 31, 0.72);
  font: inherit;
  font-size: 11px;
}

.confirmed-ops.ops-sample .ops-trend-controls select {
  width: 78px;
}

.confirmed-ops.ops-sample .ops-trend-controls input {
  width: 116px;
}

.confirmed-ops.ops-sample .ops-trend-sep {
  color: var(--mut);
  font-size: 11px;
}

.confirmed-ops.ops-sample [data-energy-trend-chart].is-loading {
  opacity: 0.55;
}

.confirmed-ops.ops-sample .ops-trend-mode {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid rgba(70, 140, 235, 0.28);
  border-radius: 7px;
  background: rgba(7, 15, 30, 0.56);
}

.confirmed-ops.ops-sample .ops-trend-mode button {
  height: 24px;
  border: 0;
  border-radius: 5px;
  padding: 0 9px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.confirmed-ops.ops-sample .ops-trend-mode button[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(135deg, #2f8bff, #1cc8ff);
  box-shadow: 0 8px 18px rgba(47, 139, 255, 0.26);
}

.confirmed-ops.ops-sample .ops-trend-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 148px;
  gap: 12px;
  align-items: stretch;
}

.confirmed-ops.ops-sample .ops-trend-chart-area {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.confirmed-ops.ops-sample .ops-trend-summary {
  min-width: 0;
  display: grid;
  gap: 0;
  align-self: stretch;
  border: 1px solid rgba(70, 140, 235, 0.18);
  border-radius: 8px;
  background: rgba(8, 18, 35, 0.62);
  overflow: hidden;
}

.confirmed-ops.ops-sample .ops-trend-summary-item {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 12px 13px;
  border-bottom: 1px solid rgba(150, 180, 225, 0.13);
}

.confirmed-ops.ops-sample .ops-trend-summary-item:last-child {
  border-bottom: 0;
}

.confirmed-ops.ops-sample .ops-trend-summary-item span {
  color: #8ea8cf;
  font-size: 11px;
  font-weight: 800;
}

.confirmed-ops.ops-sample .ops-trend-summary-item strong {
  min-width: 0;
  color: #ecf5ff;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.confirmed-ops.ops-sample .ops-trend-summary-item strong small {
  margin-left: 4px;
  color: #a9bbd9;
  font-size: 12px;
  font-weight: 800;
}

.confirmed-ops.ops-sample .ops-trend-summary-item [data-energy-trend-rate-label] {
  font-size: 15px;
}

.confirmed-ops.ops-sample .ops-trend-summary-item [data-energy-trend-summary-source] {
  font-size: 13px;
  line-height: 1.3;
  overflow-wrap: normal;
  word-break: keep-all;
}

@media (max-width: 767px) {
  .confirmed-ops.ops-sample .ops-trend-controls {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

  .confirmed-ops.ops-sample .ops-trend-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .confirmed-ops.ops-sample .ops-trend-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .confirmed-ops.ops-sample .ops-trend-summary-item {
    border-right: 1px solid rgba(150, 180, 225, 0.13);
    border-bottom: 0;
  }

  .confirmed-ops.ops-sample .ops-trend-summary-item:last-child {
    border-right: 0;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  body[data-responsive="real"][data-route="billing"] #viewHost .billing-query-toolbar {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  body[data-responsive="real"][data-route="billing"] #viewHost .billing-query-toolbar :is(.inp, .btn) {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
  }

  body[data-responsive="real"][data-route="daily-usage"] #viewHost .daily-filters .field:nth-child(1) {
    box-sizing: border-box;
    grid-column: 1 / -1;
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
  }

  body[data-responsive="real"][data-route="daily-usage"] #viewHost .daily-filters .field:nth-child(1) .wide {
    flex: 1 1 0;
    width: auto !important;
    min-width: 0;
    max-width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  body[data-responsive="real"][data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-workbench-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  body[data-responsive="real"][data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-command-row {
    width: 100%;
  }

  body[data-responsive="real"][data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-time-axis {
    padding-left: 0;
  }

  body[data-responsive="real"][data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-timeline-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }

  body[data-responsive="real"][data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-actions {
    grid-column: auto;
    justify-content: flex-start;
  }
}

/* UI-2026.07.12.06 · clarity pass for group control, room binding and gateways. */
body[data-shell="business"] #viewHost {
  font-family: var(--font);
}

body[data-shell="business"][data-skin="light"]:is(
  [data-route="control-groups"],
  [data-route="room-bindings"],
  [data-route="controllers"]
) #viewHost {
  color: #12233d;
  font-size: 13px;
  letter-spacing: 0;
}

/* Group control: one typographic and icon language, with readable inactive states. */
body[data-shell="business"][data-skin="light"][data-route="control-groups"] #viewHost .group-command-rail {
  color: #12233d;
}

body[data-shell="business"][data-skin="light"][data-route="control-groups"] #viewHost .control-right-panel {
  padding: 18px;
}

body[data-shell="business"][data-skin="light"][data-route="control-groups"] #viewHost .panel-title h2 {
  color: #12233d;
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -0.15px;
}

body[data-shell="business"][data-skin="light"][data-route="control-groups"] #viewHost .group-command-context {
  margin-top: -2px;
  color: #5b6c83;
  font-size: 12.5px;
  font-weight: 500;
}

body[data-shell="business"][data-skin="light"][data-route="control-groups"] #viewHost .control-power-tile {
  border: 1px solid #d9e2ee;
  color: #52647c;
  background: #f8fafc;
  box-shadow: none;
}

body[data-shell="business"][data-skin="light"][data-route="control-groups"] #viewHost .control-power-tile b {
  color: inherit;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.15;
}

body[data-shell="business"][data-skin="light"][data-route="control-groups"] #viewHost .control-power-tile span {
  margin-top: 5px;
  color: inherit;
  font-size: 12.5px;
  font-weight: 650;
}

body[data-shell="business"][data-skin="light"][data-route="control-groups"] #viewHost .control-power-tile.on.active {
  border-color: #32b978;
  color: #087044;
  background: #eafaf2;
  box-shadow: inset 0 0 0 1px rgba(50, 185, 120, 0.12);
}

body[data-shell="business"][data-skin="light"][data-route="control-groups"] #viewHost :is(.group-mode-grid, .group-fan-grid) .ctile {
  display: grid;
  min-height: 54px;
  place-items: center;
  border: 1px solid #dbe4ef;
  color: #52647c;
  background: #f7f9fc;
  background-image: none;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 650;
  opacity: 1;
  box-shadow: none;
}

body[data-shell="business"][data-skin="light"][data-route="control-groups"] #viewHost :is(.group-mode-grid, .group-fan-grid) .ctile:hover {
  border-color: #8db8f4;
  color: #145db4;
  background: #eef6ff;
}

body[data-shell="business"][data-skin="light"][data-route="control-groups"] #viewHost :is(.group-mode-grid, .group-fan-grid) .ctile.on {
  border-color: #3d8ef0;
  color: #0b5fc6;
  background: #e7f2ff;
  box-shadow: inset 0 0 0 1px rgba(61, 142, 240, 0.12);
}

body[data-shell="business"][data-skin="light"][data-route="control-groups"] #viewHost :is(
  .lock-temp-label,
  .panel-lock-line > span,
  .group-lock-mode-options label,
  .group-lock-power-options .btn,
  .lock-enable-cell em
) {
  color: #41546e;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
}

/* Room binding: replace the dark confirmation blocks with explicit, high-contrast choices. */
body[data-shell="business"][data-skin="light"][data-route="room-bindings"] #viewHost :is(.room-bindings-page, .bindtable) {
  font-family: var(--font);
}

body[data-shell="business"][data-skin="light"][data-route="room-bindings"] #viewHost .room-step-head h3 {
  color: #12233d;
  font-weight: 750;
}

body[data-shell="business"][data-skin="light"][data-route="room-bindings"] #viewHost .room-step-head h3 em,
body[data-shell="business"][data-skin="light"][data-route="room-bindings"] #viewHost :is(.room-mini-note, .room-scroll-table small, .room-building-summary) {
  color: #607188;
  font-weight: 500;
}

body[data-shell="business"][data-skin="light"][data-route="room-bindings"] #viewHost .bindtable th {
  color: #50627a;
  font-size: 12px;
  font-weight: 700;
}

body[data-shell="business"][data-skin="light"][data-route="room-bindings"] #viewHost .bindtable td {
  color: #243751;
  font-size: 13px;
  font-weight: 500;
}

body[data-shell="business"][data-skin="light"][data-route="room-bindings"] #viewHost .room-confirm-choice {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  min-height: 68px;
  justify-content: stretch;
  padding: 10px 12px;
  border: 1px solid #cbdced;
  border-left: 3px solid #2f7fe2;
  border-radius: 8px;
  color: #12233d;
  background: linear-gradient(135deg, #f7fbff, #edf5ff);
  box-shadow: 0 4px 12px rgba(31, 82, 145, 0.08);
  text-align: left;
}

body[data-shell="business"][data-skin="light"][data-route="room-bindings"] #viewHost .room-confirm-choice > span:last-child {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 2px;
}

body[data-shell="business"][data-skin="light"][data-route="room-bindings"] #viewHost .room-confirm-choice small {
  color: #64758b;
  font-size: 11px;
  font-weight: 600;
}

body[data-shell="business"][data-skin="light"][data-route="room-bindings"] #viewHost .room-confirm-choice strong {
  overflow: hidden;
  color: #183456;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
  text-overflow: ellipsis;
}

body[data-shell="business"][data-skin="light"][data-route="room-bindings"] #viewHost .room-confirm-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 9px;
  color: #ffffff;
  background: #2f7fe2;
  font-size: 13px;
  font-weight: 800;
}

body[data-shell="business"][data-skin="light"][data-route="room-bindings"] #viewHost .room-confirm-icon.ac {
  color: #075b71;
  background: #dff8ff;
  box-shadow: inset 0 0 0 1px #8fdcea;
}

body[data-shell="business"][data-skin="light"][data-route="room-bindings"] #viewHost .room-arrow {
  position: relative;
  min-height: 24px;
  color: #6f91b8;
  font-size: 0;
}

body[data-shell="business"][data-skin="light"][data-route="room-bindings"] #viewHost .room-arrow span {
  position: relative;
  width: 2px;
  height: 20px;
  border-radius: 99px;
  background: #8da9c8;
}

body[data-shell="business"][data-skin="light"][data-route="room-bindings"] #viewHost .room-arrow span::after {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 7px;
  height: 7px;
  border-right: 2px solid #6f91b8;
  border-bottom: 2px solid #6f91b8;
  content: "";
  transform: translate(-50%, 1px) rotate(45deg);
}

body[data-shell="business"][data-skin="light"][data-route="room-bindings"] #viewHost .room-step-confirm .bindbtn {
  border: 1px solid #1f61c3;
  color: #ffffff;
  background: linear-gradient(135deg, #2466ca, #1f54ad);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 750;
  box-shadow: 0 8px 18px rgba(32, 91, 176, 0.2);
}

/* Gateway management: stronger data hierarchy and explicit disabled actions. */
body[data-shell="business"][data-skin="light"][data-route="controllers"] #viewHost .controllers-page {
  font-family: var(--font);
  color: #12233d;
}

body[data-shell="business"][data-skin="light"][data-route="controllers"] #viewHost .gateway-tabs button {
  color: #52647c;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 650;
}

body[data-shell="business"][data-skin="light"][data-route="controllers"] #viewHost .gateway-tabs button.active {
  color: #1768cf;
  font-weight: 750;
}

body[data-shell="business"][data-skin="light"][data-route="controllers"] #viewHost .gateway-filter-bar .inp {
  height: 38px;
  min-height: 38px;
  color: #1e3049;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
}

body[data-shell="business"][data-skin="light"][data-route="controllers"] #viewHost .gateway-filter-bar .inp::placeholder {
  color: #728197;
  opacity: 1;
}

body[data-shell="business"][data-skin="light"][data-route="controllers"] #viewHost .hardware-unavailable-banner {
  border-color: #e8c96f;
  color: #80551a;
  background: #fff9e9;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

body[data-shell="business"][data-skin="light"][data-route="controllers"] #viewHost .gateway-host-card {
  min-height: 0;
  padding: 18px;
  border-color: #d7e0eb;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 5px 16px rgba(24, 48, 80, 0.08);
}

body[data-shell="business"][data-skin="light"][data-route="controllers"] #viewHost .host-card-head {
  margin-bottom: 14px;
  padding-bottom: 11px;
  border-bottom: 1px solid #edf1f6;
}

body[data-shell="business"][data-skin="light"][data-route="controllers"] #viewHost .host-card-head b {
  min-width: 0;
  overflow: hidden;
  color: #12233d;
  font-size: 17px;
  font-weight: 750;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-shell="business"][data-skin="light"][data-route="controllers"] #viewHost .gateway-host-card dl {
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 8px 14px;
}

body[data-shell="business"][data-skin="light"][data-route="controllers"] #viewHost .gateway-host-card dt {
  color: #5d6e84;
  font-size: 13px;
  font-weight: 600;
}

body[data-shell="business"][data-skin="light"][data-route="controllers"] #viewHost .gateway-host-card dd {
  color: #20334f;
  font-size: 13px;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}

body[data-shell="business"][data-skin="light"][data-route="controllers"] #viewHost .gateway-host-card dd.ok {
  color: #13824f;
  font-weight: 750;
}

body[data-shell="business"][data-skin="light"][data-route="controllers"] #viewHost .gateway-host-card dd.bad {
  color: #c8373f;
  font-weight: 750;
}

body[data-shell="business"][data-skin="light"][data-route="controllers"] #viewHost .host-actions {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid #edf1f6;
}

body[data-shell="business"][data-skin="light"][data-route="controllers"] #viewHost .host-actions .btn:disabled {
  border-color: #d6dee9;
  color: #607188;
  background: #f3f6f9;
  background-image: none;
  font-family: var(--font);
  font-weight: 650;
  opacity: 1;
  box-shadow: none;
}

@media (max-width: 1279px) {
  body[data-responsive="real"][data-route="room-bindings"] #viewHost .room-confirm-choice {
    min-height: 60px;
  }

  body[data-responsive="real"][data-route="control-groups"] #viewHost .group-management-layout {
    min-height: 0;
  }

  body[data-responsive="real"][data-route="control-groups"] #viewHost .group-management-main {
    height: auto;
    min-height: 560px;
  }
}

.confirmed-ops .ops-ring {
  width: 86px;
  height: 86px;
  min-height: 86px;
  max-width: 86px;
  flex-basis: 86px;
}

.confirmed-ops .ops-gauge strong,
.confirmed-ops .ops-ring strong,
.confirmed-ops .ops-ai-total strong {
  max-width: calc(100% - 14px);
  overflow: hidden;
  font-size: 22px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.confirmed-ops .ops-ring strong {
  font-size: 19px;
}

.confirmed-ops .ops-gauge span,
.confirmed-ops .ops-ring span,
.confirmed-ops .ops-ai-total span,
.confirmed-ops .ops-stat-grid span {
  color: var(--muted);
  font-size: 10px;
}

.confirmed-ops .ops-mode-block {
  margin-top: 8px;
}

.confirmed-ops .ops-runtime-layout {
  min-height: 0;
  display: grid;
  gap: 8px;
}

.confirmed-ops .ops-runtime-main {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}

.confirmed-ops.ops-sample .ops-runtime-main {
  gap: 0;
}

.confirmed-ops .ops-runtime-gauges {
  min-width: 0;
  justify-content: center;
  gap: 30px;
}

.confirmed-ops .ops-runtime-gauges .ops-gauge-svg {
  width: 108px;
  height: 90px;
}

.confirmed-ops.ops-sample .ops-runtime-gauges .ops-gauge-svg {
  width: 116px;
  height: 96px;
}

.confirmed-ops .ops-runtime-donut {
  display: grid;
  place-items: center;
}

.confirmed-ops .ops-runtime-donut .ops-tou-donut {
  width: 96px;
  height: 96px;
}

.confirmed-ops.ops-sample .ops-runtime-donut .ops-tou-donut {
  width: 152px;
  height: 152px;
}

.confirmed-ops .ops-runtime-bottom {
  width: 245px;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0 0 0 72px;
}

.confirmed-ops.ops-sample .ops-runtime-bottom {
  width: auto;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 6px 0 0;
}

.confirmed-ops .ops-runtime-legend {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  color: var(--mut);
  font-size: 11px;
}

.confirmed-ops .ops-runtime-legend-row {
  display: grid;
  grid-template-columns: 12px minmax(34px, max-content) max-content max-content;
  align-items: center;
  gap: 7px;
  min-height: 16px;
}

.confirmed-ops .ops-runtime-legend-row i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--weak);
}

.confirmed-ops .ops-runtime-legend-row b {
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.confirmed-ops .ops-runtime-legend-row em {
  color: var(--mut);
  font-size: 11px;
  font-style: normal;
}

.confirmed-ops .ops-runtime-legend-row i.cool {
  background: var(--cool);
}

.confirmed-ops .ops-runtime-legend-row i.fan {
  background: var(--cyan);
}

.confirmed-ops .ops-runtime-legend-row i.heat {
  background: var(--heat);
}

.confirmed-ops .ops-runtime-legend-row i.auto {
  background: #9b8cff;
}

.confirmed-ops .ops-runtime-legend-row i.dehum {
  background: var(--dehum);
}

.confirmed-ops .ops-runtime-legend-row i.off {
  background: #3a465c;
}

.confirmed-ops.ops-sample .ops-device-run {
  overflow: hidden;
}

.confirmed-ops.ops-sample .ops-device-run-layout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(210px, 0.88fr) minmax(230px, 1fr);
  align-items: center;
  gap: 20px;
  min-height: 226px;
}

.confirmed-ops.ops-sample .ops-device-run-list {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 10px;
  border-right: 1px solid var(--line);
  padding-right: 20px;
}

.confirmed-ops.ops-sample .ops-device-run-item {
  min-width: 0;
  min-height: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 16px;
}

.confirmed-ops.ops-sample .ops-device-run-label {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.confirmed-ops.ops-sample .ops-device-run-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  color: #7f98c5;
}

.confirmed-ops.ops-sample .ops-device-run-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.confirmed-ops.ops-sample .ops-device-run-item em {
  overflow: hidden;
  color: var(--mut);
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.confirmed-ops.ops-sample .ops-device-run-item b {
  color: var(--txt);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.05;
  white-space: nowrap;
}

.confirmed-ops.ops-sample .ops-device-run-item b small {
  margin-left: 5px;
  color: #91a7cd;
  font-size: 13px;
  font-weight: 700;
}

.confirmed-ops.ops-sample .ops-device-run-item.tone-g b {
  color: var(--green);
}

.confirmed-ops.ops-sample .ops-device-run-item.tone-w b {
  color: #ffb13d;
}

.confirmed-ops.ops-sample .ops-device-run-item.tone-b b {
  color: #ff5a6a;
}

.confirmed-ops.ops-sample .ops-device-run-item.tone-blue b {
  color: #2f8bff;
}

.confirmed-ops.ops-sample .ops-device-run-visual {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.confirmed-ops.ops-sample .ops-device-run-donut {
  margin-top: 2px;
}

.confirmed-ops.ops-sample .ops-device-run .ops-runtime-legend {
  width: min(160px, 100%);
}

.confirmed-ops .ops-runtime-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.confirmed-ops .ops-runtime-cell {
  min-width: 0;
  border: 1px solid var(--border-muted);
  border-radius: 8px;
  padding: 6px 7px;
  background: linear-gradient(180deg, var(--surface-panel-muted), var(--surface-panel-deep));
}

.confirmed-ops .ops-runtime-cell b {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 16px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.confirmed-ops .ops-runtime-cell span,
.confirmed-ops .ops-runtime-cell em {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.confirmed-ops .ops-runtime-cell.tone-good b {
  color: var(--green);
}

.confirmed-ops .ops-runtime-cell.tone-blue b {
  color: var(--blue);
}

.confirmed-ops .ops-runtime-cell.tone-cyan b {
  color: var(--cyan);
}

.confirmed-ops .ops-runtime-cell.tone-warn b {
  color: var(--amber);
}

.confirmed-ops .ops-runtime-modes {
  display: grid;
  gap: 5px;
}

.confirmed-ops .ops-runtime-mode {
  --runtime-color: var(--weak);
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(64px, 1fr) max-content minmax(70px, 1.2fr);
  align-items: center;
  gap: 8px;
  color: var(--text-soft);
  font-size: 11px;
}

.confirmed-ops .ops-runtime-mode > span,
.confirmed-ops .ops-runtime-mode > b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.confirmed-ops .ops-runtime-mode > span > i {
  width: 8px;
  height: 8px;
  display: inline-block;
  margin-right: 6px;
  border-radius: 999px;
  background: var(--runtime-color);
}

.confirmed-ops .ops-runtime-mode > b {
  color: var(--text);
  font-size: 12px;
}

.confirmed-ops .ops-runtime-mode.tone-cool {
  --runtime-color: var(--cool);
}

.confirmed-ops .ops-runtime-mode.tone-heat {
  --runtime-color: var(--heat);
}

.confirmed-ops .ops-runtime-mode.tone-fan {
  --runtime-color: var(--fan);
}

.confirmed-ops .ops-runtime-mode.tone-dehum {
  --runtime-color: var(--dehum);
}

.confirmed-ops .ops-runtime-mode.tone-auto {
  --runtime-color: var(--auto);
}

.confirmed-ops .ops-runtime-mode.tone-off {
  --runtime-color: var(--weak);
}

.confirmed-ops .ops-runtime-bar {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-track);
}

.confirmed-ops .ops-runtime-bar i {
  width: calc(var(--value) * 1%);
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--runtime-color), var(--cyan));
}

.confirmed-ops .ops-runtime-empty {
  border: 1px dashed var(--border-muted-dashed);
  border-radius: 8px;
  padding: 10px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.confirmed-ops .ops-legend {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  color: var(--text-soft);
  font-size: 11px;
}

.confirmed-ops .ops-legend.inline {
  flex-direction: row;
  margin-top: 8px;
}

.confirmed-ops .ops-legend i {
  width: 8px;
  height: 8px;
  display: inline-block;
  margin-right: 6px;
  border-radius: 999px;
  background: var(--weak);
}

.confirmed-ops .ops-legend i.cool,
.confirmed-ops .ops-legend i.actual,
.confirmed-ops .ops-legend i.flat {
  background: var(--cool);
}

.confirmed-ops .ops-legend i.heat,
.confirmed-ops .ops-legend i.peak {
  background: var(--heat);
}

.confirmed-ops .ops-legend i.fan,
.confirmed-ops .ops-legend i.valley,
.confirmed-ops .ops-legend i.desired {
  background: var(--fan);
}

.confirmed-ops .ops-legend i.area {
  background: var(--accent-blue);
}

.confirmed-ops .ops-legend i.dehum {
  background: var(--dehum);
}

.confirmed-ops .ops-bar-chart,
.confirmed-ops .daily-area-chart {
  width: 100%;
  min-height: 156px;
  border: 1px solid var(--border-muted);
  border-radius: 10px;
  background:
    repeating-linear-gradient(90deg, transparent 0 39px, var(--border-muted-faint) 40px),
    linear-gradient(180deg, var(--surface-chart), transparent);
}

.confirmed-ops .ops-bar-chart {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(28px, 1fr);
  align-items: end;
  gap: 8px;
  padding: 14px 10px 10px;
}

.confirmed-ops .ops-day-bar {
  min-width: 0;
  height: 132px;
  display: grid;
  grid-template-rows: 1fr auto auto;
  justify-items: center;
  gap: 5px;
}

.confirmed-ops .ops-day-bar i {
  width: 100%;
  min-height: 6px;
  align-self: end;
  border-radius: 8px 8px 2px 2px;
  background: linear-gradient(180deg, var(--accent-blue), var(--accent));
  height: calc(var(--value) * 1%);
}

.confirmed-ops .ops-day-bar b,
.confirmed-ops .ops-day-bar em {
  max-width: 100%;
  overflow: hidden;
  color: var(--text-soft);
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.confirmed-ops .daily-area-chart {
  display: block;
}

.confirmed-ops .daily-area {
  display: block;
  height: auto;
}

.confirmed-ops .ops-usage-area {
  fill: var(--overlay-blue);
}

.confirmed-ops .daily-area .ops-usage-area {
  fill: url("#opsDailyArea");
}

.confirmed-ops .daily-area .ops-usage-line {
  stroke: var(--cyan);
  stroke-width: 2;
}

.confirmed-ops .ops-usage-line,
.confirmed-ops .ops-temp-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.confirmed-ops .ops-temp-line.indoor {
  stroke: var(--cool);
  stroke-width: 3;
}

.confirmed-ops .ops-temp-line.desired {
  stroke: var(--fan);
  stroke-width: 3;
  stroke-dasharray: 8 6;
}

.confirmed-ops .ops-split-note {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}

.confirmed-ops .ops-split-note strong,
.confirmed-ops .tone-good,
.confirmed-ops .tone-good b,
.confirmed-ops .tone-good strong,
.confirmed-ops .ops-kpi-card.tone-good .v {
  color: var(--green);
}

.confirmed-ops .tone-bad,
.confirmed-ops .tone-bad b,
.confirmed-ops .tone-bad strong,
.confirmed-ops .ops-kpi-card.tone-bad .v {
  color: var(--red);
}

.confirmed-ops .tone-warn,
.confirmed-ops .tone-warn b,
.confirmed-ops .tone-warn strong,
.confirmed-ops .ops-kpi-card.tone-warn .v {
  color: var(--amber);
}

.confirmed-ops .tone-cyan,
.confirmed-ops .tone-cyan strong,
.confirmed-ops .ops-kpi-card.tone-cyan .v {
  color: var(--cyan);
}

.confirmed-ops .tone-blue,
.confirmed-ops .tone-blue strong,
.confirmed-ops .ops-kpi-card.tone-blue .v {
  color: var(--blue);
}

.confirmed-ops .ops-ai-total {
  display: flex;
  gap: 12px;
  align-items: baseline;
}

.confirmed-ops .ops-ai-total strong {
  color: var(--green);
}

.confirmed-ops .ops-ai-total.is-empty strong {
  color: var(--mut);
}

.confirmed-ops .ops-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 9px 0 10px;
}

.confirmed-ops .ops-stat-grid.status-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.confirmed-ops .ops-stat-grid div {
  border: 1px solid var(--border-muted);
  border-radius: 9px;
  padding: 8px;
  background: var(--surface-panel-deep);
}

.confirmed-ops .ops-stat-grid b {
  display: block;
  font-size: 18px;
}

.confirmed-ops .ops-mini-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 9px;
  font-size: 11px;
}

.confirmed-ops .ops-mini-table th,
.confirmed-ops .ops-mini-table td {
  border-bottom: 1px solid var(--border-muted);
  padding: 7px 8px;
  text-align: left;
}

.confirmed-ops .ops-mini-table th {
  color: var(--muted);
  font-weight: 800;
  background: var(--surface-panel-deep);
}

.confirmed-ops .ops-mini-table a {
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
}

.confirmed-ops .ops-ai-chip {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 7px;
  color: var(--text-soft);
  background: var(--surface-pill);
  font-size: 10px;
  font-weight: 900;
}

.confirmed-ops .ops-ai-chip.tone-warn {
  color: var(--amber);
  background: var(--overlay-amber);
}

.confirmed-ops .ops-ai-chip.tone-bad {
  color: var(--red);
  background: var(--overlay-red);
}

.confirmed-ops .ops-bar-meter {
  display: block;
  width: 100%;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-track);
}

.confirmed-ops .ops-bar-meter i {
  width: calc(var(--value) * 1%);
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent));
}

.confirmed-ops.ops-sample .ops-bar-meter i {
  background: linear-gradient(90deg, #2f8bff, #27e0ff);
}

.confirmed-ops .ops-linkage-list {
  color: var(--text-soft);
  font-size: 12px;
  line-height: 2.1;
}

.confirmed-ops .ops-linkage-list b {
  color: var(--text);
}

.confirmed-ops .ops-card-foot {
  margin-top: 8px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.confirmed-ops.ops-sample .ops-card-foot {
  color: var(--mut);
  font-size: 11px;
}

.confirmed-ops.ops-sample .ops-weather-contract {
  min-width: 0;
  display: grid;
  gap: 12px;
  margin: 0 0 12px;
  border: 1px solid rgba(39, 224, 255, 0.24);
  border-radius: 10px;
  padding: 13px 14px 12px;
  background: linear-gradient(180deg, rgba(25, 230, 160, 0.1), rgba(47, 139, 255, 0.1));
  overflow: hidden;
}

.confirmed-ops.ops-sample .ops-weather-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--txt);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.confirmed-ops.ops-sample .ops-weather-title i {
  width: 3px;
  height: 16px;
  border-radius: 3px;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(39, 224, 255, 0.5);
}

.confirmed-ops.ops-sample .ops-weather-current {
  min-width: 0;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(92px, max-content);
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(70, 101, 151, 0.34);
  padding: 2px 0 12px;
}

.confirmed-ops.ops-sample .ops-weather-current-icon {
  min-width: 0;
}

.confirmed-ops.ops-sample .ops-weather-now-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.confirmed-ops.ops-sample .ops-weather-now-main strong {
  color: var(--txt);
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
}

.confirmed-ops.ops-sample .ops-weather-now-main span {
  color: #bcd4ff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.confirmed-ops.ops-sample .ops-weather-now-main small {
  color: var(--mut);
  font-size: 11px;
  line-height: 1.2;
}

.confirmed-ops.ops-sample .ops-weather-meta {
  min-width: 88px;
  display: grid;
  gap: 7px;
  margin: 0;
}

.confirmed-ops.ops-sample .ops-weather-meta div {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.confirmed-ops.ops-sample .ops-weather-meta dt {
  color: #8da8d2;
  font-size: 11px;
  font-weight: 700;
}

.confirmed-ops.ops-sample .ops-weather-meta dd {
  margin: 0;
  color: #dce9ff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.confirmed-ops.ops-sample .weather-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--txt);
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.confirmed-ops.ops-sample .weather-icon i {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(12, 28, 50, 0.72);
  border: 1px solid rgba(78, 169, 255, 0.32);
  box-shadow: inset 0 0 12px rgba(47, 139, 255, 0.12);
  font-size: 16px;
}

.confirmed-ops.ops-sample .ops-weather-current-icon .weather-icon {
  display: grid;
  justify-items: center;
  gap: 0;
}

.confirmed-ops.ops-sample .ops-weather-current-icon .weather-icon em,
.confirmed-ops.ops-sample .ops-weather-day .weather-icon em {
  display: none;
}

.confirmed-ops.ops-sample .ops-weather-current-icon .weather-icon i {
  width: 58px;
  height: 58px;
  background: rgba(10, 31, 55, 0.72);
  border: 1px solid rgba(78, 169, 255, 0.34);
  box-shadow: inset 0 0 18px rgba(47, 139, 255, 0.16);
  font-size: 38px;
}

.confirmed-ops.ops-sample .weather-icon i::before { content: "\2601"; }
.confirmed-ops.ops-sample .weather-icon-sun i::before { content: "\2600"; }
.confirmed-ops.ops-sample .weather-icon-cloud-sun i::before { content: "\26c5"; }
.confirmed-ops.ops-sample .weather-icon-rain i::before { content: "\2614"; }
.confirmed-ops.ops-sample .weather-icon-lightning i::before { content: "\26a1"; }
.confirmed-ops.ops-sample .weather-icon-snow i::before { content: "\2744"; }
.confirmed-ops.ops-sample .weather-icon-fog i::before { content: "\224b"; }
.confirmed-ops.ops-sample .weather-icon-wind i::before { content: "\21ac"; }
.confirmed-ops.ops-sample .weather-icon-sun i,
.confirmed-ops.ops-sample .weather-icon-cloud-sun i { color: #ffc94a; }
.confirmed-ops.ops-sample .weather-icon-rain i,
.confirmed-ops.ops-sample .weather-icon-lightning i { color: #4ad7ff; }
.confirmed-ops.ops-sample .weather-icon-snow i,
.confirmed-ops.ops-sample .weather-icon-fog i { color: #d7ecff; }

.confirmed-ops.ops-sample .weather-icon.compact {
  gap: 0;
  font-size: 11px;
}

.confirmed-ops.ops-sample .weather-icon.compact i {
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 15px;
}

.confirmed-ops.ops-sample .ops-weather-week-empty,
.confirmed-ops.ops-sample .ops-weather-day span,
.confirmed-ops.ops-sample .ops-weather-day em {
  color: var(--mut);
  font-style: normal;
  font-size: 10px;
  line-height: 1.15;
}

.confirmed-ops.ops-sample .ops-weather-week {
  min-width: 0;
  display: grid;
}

.confirmed-ops.ops-sample .ops-weather-week-cards {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.confirmed-ops.ops-sample .ops-weather-day {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 3px;
  border-radius: 7px;
  padding: 4px 1px 2px;
  background: rgba(5, 15, 29, 0.14);
}

.confirmed-ops.ops-sample .ops-weather-day-label {
  color: #e6f1ff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
}

.confirmed-ops.ops-sample .ops-weather-date {
  color: #8da8d2;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
}

.confirmed-ops.ops-sample .ops-weather-day .weather-icon {
  justify-content: center;
  gap: 0;
}

.confirmed-ops.ops-sample .ops-weather-day span,
.confirmed-ops.ops-sample .ops-weather-day em {
  max-width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
}
.confirmed-ops.ops-sample .ops-home-left .ops-device-run-layout {
  grid-template-columns: minmax(152px, 0.98fr) minmax(130px, 0.9fr);
  gap: 12px;
}

.confirmed-ops.ops-sample .ops-home-left .ops-device-run-list {
  gap: 8px;
  padding-right: 12px;
}

.confirmed-ops.ops-sample .ops-home-left .ops-device-run-item {
  gap: 10px;
}

.confirmed-ops.ops-sample .ops-home-left .ops-device-run-item em {
  font-size: 11px;
}

.confirmed-ops.ops-sample .ops-home-left .ops-device-run-item b {
  font-size: 19px;
}

.confirmed-ops.ops-sample .ops-home-left .ops-device-run-donut .ops-tou-donut {
  width: 118px;
  height: 118px;
}

.confirmed-ops.ops-sample .ops-home-left .ops-weather-contract {
  margin: 0;
  min-height: 0;
}

.confirmed-ops.ops-sample .ops-home-left .ops-weather-current {
  grid-template-columns: 56px minmax(0, 1fr) minmax(78px, max-content);
  gap: 10px;
  padding-bottom: 10px;
}

.confirmed-ops.ops-sample .ops-home-left .ops-weather-current-icon .weather-icon i {
  width: 52px;
  height: 52px;
  font-size: 34px;
}

.confirmed-ops.ops-sample .ops-home-left .ops-weather-now-main strong {
  font-size: 28px;
}

.confirmed-ops.ops-sample .ops-home-left .ops-weather-meta {
  min-width: 76px;
  gap: 6px;
}

.confirmed-ops.ops-sample .ops-home-left .ops-weather-meta div {
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 5px;
}

.confirmed-ops.ops-sample .ops-home-left .ops-weather-week-cards {
  gap: 3px;
  overflow-x: visible;
}

.confirmed-ops.ops-sample .ops-home-left .ops-weather-day {
  padding: 3px 0 1px;
  background: transparent;
}

.confirmed-ops.ops-sample .ops-home-left .ops-weather-day-label {
  font-size: 10px;
}

.confirmed-ops.ops-sample .ops-home-left .ops-weather-date,
.confirmed-ops.ops-sample .ops-home-left .ops-weather-day span,
.confirmed-ops.ops-sample .ops-home-left .ops-weather-day em {
  font-size: 9px;
  line-height: 1.15;
}

.confirmed-ops.ops-sample .ops-home-left .ops-weather-day .weather-icon i {
  width: 18px;
  height: 18px;
  font-size: 12px;
}
.confirmed-ops.ops-sample .ops-device-weather .ops-mini-table td:nth-child(4) {
  color: var(--cyan);
  font-weight: 800;
}

@media (max-width: 720px) {
  .confirmed-ops.ops-sample .ops-device-run {
    height: auto !important;
    overflow: visible;
  }

  .confirmed-ops.ops-sample .ops-weather-contract,
  .confirmed-ops.ops-sample .ops-device-run-layout {
    grid-template-columns: 1fr;
  }

  .confirmed-ops.ops-sample .ops-device-run-layout {
    gap: 14px;
    min-height: 0;
  }

  .confirmed-ops.ops-sample .ops-device-run-list {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding-right: 0;
    padding-bottom: 10px;
  }

  .confirmed-ops.ops-sample .ops-device-run-visual {
    display: grid;
    grid-template-columns: minmax(104px, max-content) minmax(0, auto);
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding-top: 2px;
  }

  .confirmed-ops.ops-sample .ops-device-run-donut .ops-tou-donut {
    width: 112px;
    height: 112px;
  }

  .confirmed-ops.ops-sample .ops-device-run .ops-runtime-legend {
    width: auto;
    min-width: 112px;
  }
}

@media (max-width: 767px) {
  .confirmed-ops .ops-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

  .ops-sample .ops-home-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .ops-sample .ops-home-left,
  .ops-sample .ops-home-bottom-row,
  .ops-sample .ops-ac-status-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .ops-sample .ops-home-left > .panel,
  .ops-sample .ops-home-left > .ops-weather-contract,
  .ops-sample .ops-home-bottom-row > .panel {
    height: auto;
    min-height: 0;
    min-width: 0;
  }
  .ops-realtime-load-panel .ops-realtime-load-board {
    grid-template-columns: minmax(0, 1fr);
  }

  .ops-realtime-load-panel .ops-realtime-load-total {
    grid-template-columns: minmax(0, 1fr) minmax(120px, 0.7fr);
    padding-right: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(70, 101, 151, 0.26);
    padding-bottom: 10px;
  }
}

@media (max-width: 720px) {
  .ops-sample .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


  .ops-sample .ops-home-right > .kpis,
  .confirmed-ops.ops-sample .ops-home-left .ops-device-run-layout,
  .confirmed-ops.ops-sample .ops-home-left .ops-weather-contract {
    grid-template-columns: minmax(0, 1fr);
  }

  .confirmed-ops.ops-sample .ops-home-left .ops-device-run-list {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding-right: 0;
    padding-bottom: 10px;
  }
  .ops-sample .kpi .v {
    font-size: 20px;
  }

  .confirmed-ops .ops-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .confirmed-ops .ops-gauges,
  .confirmed-ops .ops-mode-block,
  .confirmed-ops .ops-tou,
  .confirmed-ops .ops-ready-row,
  .confirmed-ops .ops-split-note {
    flex-direction: column;
    align-items: stretch;
  }

  .confirmed-ops .ops-runtime-main,
  .confirmed-ops .ops-runtime-summary {
    grid-template-columns: 1fr;
  }

  .confirmed-ops .ops-runtime-gauges {
    align-items: center;
  }

  .confirmed-ops.ops-sample .ops-runtime-bottom {
    width: 100%;
    flex-direction: column;
    align-items: center;
    margin: 8px 0 0;
  }

  .ops-realtime-load-panel .ops-realtime-load-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .confirmed-ops .ops-runtime-mode {
    grid-template-columns: minmax(0, 1fr) max-content;
  }

  .confirmed-ops .ops-runtime-bar {
    grid-column: 1 / -1;
  }
}

@media (max-width: 420px) {
  .ops-sample .kpis,
  .ops-realtime-load-panel .ops-realtime-load-list,
  .ops-realtime-load-panel .ops-realtime-load-total {
    grid-template-columns: 1fr;
  }

  .ops-realtime-load-panel .ops-realtime-load-total .ops-load-waveform {
    grid-column: 1;
    grid-row: auto;
  }
}

.ops-row.alert-warning span {
  color: var(--warning);
}

.platform-page {
  display: grid;
  gap: 18px;
}

.platform-page-message {
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
}

.platform-page-message:empty {
  display: none;
}

.platform-page-message.error {
  color: var(--danger);
}

.platform-head,
.platform-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.platform-head {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.platform-head h3,
.platform-card h4 {
  margin: 0;
}

.platform-head p {
  margin: 6px 0 0;
  color: var(--muted);
}

.platform-head span,
.platform-card header span,
.platform-card small,
.platform-table th {
  color: var(--muted);
  font-size: 12px;
}

.platform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

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

.platform-metric {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--panel);
}

.platform-metric span,
.platform-metric small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.platform-metric strong {
  display: block;
  margin: 6px 0 4px;
  font-size: 24px;
}

.confirmed-platform-overview {
  display: grid;
  gap: 18px;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 767px) {
  body[data-shell="platform"] .kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-shell="platform"] .span-8,
  body[data-shell="platform"] .span-7,
  body[data-shell="platform"] .span-6,
  body[data-shell="platform"] .span-5,
  body[data-shell="platform"] .span-4,
  body[data-shell="platform"] .span-3 {
    grid-column: span 12;
  }
}

.kpi {
  min-width: 0;
  min-height: 132px;
  display: grid;
  align-content: space-between;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background:
    linear-gradient(140deg, var(--wash-blue), transparent 58%),
    var(--surface-panel-strong);
  box-shadow: var(--shadow);
}

.kpi.good {
  background:
    linear-gradient(140deg, var(--wash-teal), transparent 58%),
    var(--surface-panel-strong);
}

.kpi.warn,
.kpi.amber {
  background:
    linear-gradient(140deg, var(--wash-amber), transparent 58%),
    var(--surface-panel-strong);
}

.kpi.red {
  background:
    linear-gradient(140deg, var(--wash-red), transparent 58%),
    var(--surface-panel-strong);
}

.kpi.purple {
  background:
    linear-gradient(140deg, var(--wash-purple), transparent 58%),
    var(--surface-panel-strong);
}

body[data-shell="platform"] .kpi {
  position: relative;
  display: block;
  min-height: 112px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: linear-gradient(140deg, rgba(13, 32, 59, 0.95), rgba(8, 19, 35, 0.9));
  box-shadow: var(--shadow);
  overflow: hidden;
}

body[data-shell="platform"] .kpi::after {
  content: "";
  position: absolute;
  inset: auto -18% -48% 10%;
  height: 90px;
  background: radial-gradient(circle, rgba(47, 139, 255, 0.22), transparent 60%);
  pointer-events: none;
}

body[data-shell="platform"] .kpi.good::after {
  background: radial-gradient(circle, rgba(22, 215, 160, 0.2), transparent 62%);
}

body[data-shell="platform"] .kpi.warn::after,
body[data-shell="platform"] .kpi.amber::after {
  background: radial-gradient(circle, rgba(255, 189, 69, 0.18), transparent 62%);
}

body[data-shell="platform"] .kpi.red::after {
  background: radial-gradient(circle, rgba(255, 88, 108, 0.18), transparent 62%);
}

body[data-shell="platform"] .kpi.purple::after {
  background: radial-gradient(circle, rgba(139, 108, 255, 0.18), transparent 62%);
}

body[data-shell="platform"] .kpi-label {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
}

body[data-shell="platform"] .kpi-value {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 32px;
  line-height: 1;
  font-weight: 900;
}

body[data-shell="platform"] .kpi-value small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

body[data-shell="platform"] .kpi-note {
  margin-top: 10px;
  color: #a9bad0;
  font-size: 12px;
  line-height: 1.45;
}

body[data-shell="platform"] .kpi-action {
  position: relative;
  z-index: 1;
  width: auto;
  height: 28px;
  min-height: 28px;
  margin-top: 12px;
  padding: 0 10px;
  border-color: rgba(255, 189, 69, 0.46);
  background: rgba(255, 189, 69, 0.14);
  color: #ffd88b;
  font-size: 12px;
  font-weight: 850;
}

.kpi-label,
.kpi-note,
.sub,
.row-meta,
.table th,
.trend-stat label,
.ring span {
  color: var(--muted);
  font-size: 12px;
}

.kpi-value {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.05;
}

.kpi-value small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

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

.span-4 {
  grid-column: span 4;
}

.span-5 {
  grid-column: span 5;
}

.span-6 {
  grid-column: span 6;
}

.span-7 {
  grid-column: span 7;
}

.span-8 {
  grid-column: span 8;
}

.span-12 {
  grid-column: 1 / -1;
}

.panel-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.title-left {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.title-bar {
  width: 4px;
  min-height: 22px;
  margin-top: 2px;
  border-radius: 999px;
  background: var(--title-bar-gradient);
  box-shadow: 0 0 18px var(--glow-blue);
}

.panel-title h2 {
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.2;
}

body[data-shell="platform"] .panel-title h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 850;
}

body[data-shell="platform"] .panel-title {
  align-items: center;
  gap: 12px;
  min-height: 48.39px;
  margin-bottom: 14px;
}

body[data-shell="platform"] .panel-title .sub {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

body[data-route="platform/overview"] .panel-title h2 {
  color: #e8f2ff;
  font-weight: 820;
}

body[data-route="platform/overview"] .panel-title .sub {
  color: #8ea4bc;
}

body[data-route="platform/overview"] .row-main {
  color: #d1e0f0;
}

body[data-route="platform/overview"] .alert-list {
  transform: translateY(-1px);
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 9px;
  color: var(--badge-amber-text);
  background: var(--overlay-amber);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

body[data-shell="platform"] .badge {
  height: 24px;
  min-height: 24px;
  border-radius: 8px;
  padding: 0 10px;
  color: #7dffd1;
  background: rgba(22, 215, 160, 0.16);
  font-size: 12px;
  font-weight: 850;
}

body[data-shell="platform"] .badge.blue {
  color: #9dc7ff;
  background: rgba(46, 134, 255, 0.18);
}

body[data-shell="platform"] .badge.amber {
  color: #ffd88b;
  background: rgba(255, 189, 69, 0.16);
}

body[data-shell="platform"] .badge.red {
  color: #ffb1bc;
  background: rgba(255, 88, 108, 0.16);
}

body[data-shell="platform"] .badge.purple {
  color: #c7b8ff;
  background: rgba(139, 108, 255, 0.16);
}

.badge.red {
  color: var(--badge-red-text);
  background: var(--overlay-red);
}

.badge.green {
  color: var(--badge-green-text);
  background: var(--overlay-teal);
}

.badge.blue {
  color: var(--badge-blue-text);
  background: var(--overlay-blue-strong);
}

.badge.neutral {
  color: var(--muted);
  background: var(--surface-panel-muted);
}

.alert-list,
.todo-list,
.audit-list {
  display: grid;
  gap: 10px;
}

.alert-row,
.todo-row {
  min-width: 0;
  min-height: 48px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) max-content max-content;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 10px 12px;
  color: var(--text);
  background: var(--surface-panel-deep);
  text-decoration: none;
}

body[data-shell="platform"] .alert-row,
body[data-shell="platform"] .todo-row,
body[data-shell="platform"] .audit-row {
  min-height: 48px;
  border: 1px solid rgba(84, 137, 210, 0.18);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(7, 16, 30, 0.62);
}

body[data-shell="platform"] .alert-row {
  grid-template-columns: 70px 1fr 72px minmax(92px, auto);
}

body[data-shell="platform"] .todo-row {
  grid-template-columns: 76px 1fr 70px;
}

.todo-row {
  grid-template-columns: 72px minmax(0, 1fr) max-content;
}

.row-type {
  color: var(--badge-amber-text);
  font-size: 12px;
  font-weight: 900;
}

.row-type.red {
  color: var(--badge-red-text);
}

.row-type.blue {
  color: var(--badge-blue-text);
}

.row-type.green {
  color: var(--badge-green-text);
}

.row-main {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-shell="platform"] .row-main {
  color: #dbe9f8;
  font-size: 13px;
}

body[data-shell="platform"] .row-meta {
  color: var(--weak);
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
}

body[data-shell="platform"] .row-type {
  font-size: 12px;
  font-weight: 850;
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border: 1px solid var(--border-blue-strong);
  border-radius: var(--radius);
  padding: 0 12px;
  color: var(--text-button);
  background: var(--overlay-blue);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

body[data-shell="platform"] .btn {
  min-height: 30px;
  border: 1px solid rgba(47, 134, 255, 0.5);
  border-radius: 8px;
  padding: 0 12px;
  color: #cfe2ff;
  background: rgba(47, 134, 255, 0.16);
  font-size: 12px;
  font-weight: 800;
}

body[data-shell="platform"] .row-action {
  height: 28px;
  min-height: 28px;
  justify-content: center;
  padding: 0 10px;
  border-color: rgba(46, 134, 255, 0.46);
  color: #b9dcff;
  background: rgba(46, 134, 255, 0.18);
  font-size: 12px;
  font-weight: 800;
}

body[data-shell="platform"] .row-actions .row-action {
  min-width: 58px;
}

body[data-shell="platform"] .btn.kpi-action {
  height: 28px;
  min-height: 28px;
  margin-top: 12px;
  border-color: rgba(255, 189, 69, 0.46);
  color: #ffd88b;
  background: rgba(255, 189, 69, 0.14);
  font-size: 12px;
  font-weight: 850;
}

.float-tools {
  display: none;
}

body[data-shell="platform"] .float-tools {
  position: fixed;
  right: 18px;
  top: 54%;
  z-index: 20;
  display: grid;
  gap: 8px;
}

body[data-shell="platform"] .float-tools button {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(158, 126, 255, 0.5);
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(180deg, #7f5cff, #344cff);
  box-shadow: 0 10px 26px rgba(61, 78, 255, 0.34);
  font-weight: 900;
}

body[data-shell="business"] .btn {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 12px;
  color: var(--txt);
  background: #12203c;
  font-size: 12.5px;
}

body[data-shell="business"] .btn.pri,
body[data-shell="business"] .btn.primary {
  border: 0;
  color: var(--txt);
  background: linear-gradient(135deg, var(--ac), var(--ac2));
}

body[data-route="ac-control"] .btn {
  font-weight: 400;
}

body[data-shell="business"] .btn[data-ledger-disabled]:disabled {
  opacity: 1;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.btn.active {
  border-color: var(--accent);
  color: var(--text);
  background: var(--overlay-blue-strong);
}

.btn.primary {
  border-color: var(--accent);
  color: var(--bg);
  background: var(--accent);
}

.btn.ghost {
  border-color: var(--line);
  color: var(--text);
  background: var(--surface-panel-muted);
}

.btn.green {
  border-color: var(--accent);
  color: var(--bg);
  background: var(--accent);
}

.btn.danger {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--overlay-red);
}

.btn.mini {
  min-height: 26px;
  padding: 0 8px;
  font-size: 11px;
}

.sr-action {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  opacity: 0;
}

button.tag {
  border: 0;
  cursor: pointer;
  font: inherit;
}

.ledger-message:empty {
  display: none;
}

.ring-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.ring {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 10px;
}

body[data-shell="platform"] .ring {
  display: grid;
  place-items: center;
  min-height: 150px;
  border: 1px solid rgba(84, 137, 210, 0.18);
  border-radius: 8px;
  background: rgba(7, 16, 30, 0.58);
}

.ring-core {
  width: 106px;
  height: 106px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--surface-ring-core-strong) 0 50%, transparent 51%),
    conic-gradient(var(--ring-color) var(--ring-value), var(--border-muted-faint) 0);
}

body[data-shell="platform"] .ring-core {
  width: 104px;
  height: 104px;
  background:
    radial-gradient(circle at center, #081528 0 54%, transparent 55%),
    conic-gradient(var(--ring-color) 0 var(--ring-value), rgba(68, 96, 140, 0.28) var(--ring-value) 100%);
}

body[data-shell="platform"] .ring span {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}

.ring-core strong {
  font-size: 24px;
}

.ring-core.count {
  align-content: center;
  gap: 2px;
  border: 1px solid var(--border-muted-soft);
  background: var(--surface-panel-deep);
}

.ring-core.count small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.muted-cell {
  color: var(--muted);
  font-weight: 700;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

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

.table small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.audit-row {
  min-width: 0;
  min-height: 48px;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) max-content;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--surface-panel-deep);
}

.income-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  margin-bottom: 12px;
  padding: 12px 14px;
  background: var(--surface-panel-deep);
}

.income-summary span {
  color: var(--muted);
  font-size: 12px;
}

.income-summary strong {
  overflow-wrap: anywhere;
  font-size: 22px;
}

.quota {
  width: 96px;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-track);
}

.quota i {
  display: block;
  height: 100%;
  width: var(--value);
  border-radius: inherit;
  background: var(--quota-gradient);
}

.trend-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.6fr);
  gap: 18px;
  align-items: stretch;
}

.combo-chart {
  position: relative;
  min-height: 260px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 16px;
  border: 1px solid var(--border-muted-faint);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--combo-chart-background);
}

.trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--muted);
  font-size: 12px;
}

.legend-dot::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--accent-blue);
}

.legend-dot.line::before {
  background: var(--accent);
}

.trend-bars {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(82px, 1fr);
  align-items: end;
  gap: 12px;
  /* 月份标签(::after)悬在柱底外 24px:留出底衬,避免 overflow 把它剪成图表内滚动条。 */
  padding-bottom: 28px;
  overflow-x: auto;
  overflow-y: hidden;
}

.trend-bar {
  position: relative;
  min-height: 48px;
  height: var(--bar);
  display: grid;
  align-content: start;
  justify-items: center;
  border-radius: 7px 7px 2px 2px;
  padding-top: 8px;
  background: var(--bar-gradient);
}

.trend-bar::after {
  content: attr(data-label);
  position: absolute;
  bottom: -24px;
  color: var(--muted);
  font-size: 12px;
}

.trend-bar strong {
  font-size: 12px;
}

.trend-line {
  position: absolute;
  z-index: 2;
  inset: 64px 18px 46px;
  width: calc(100% - 36px);
  height: calc(100% - 110px);
  overflow: visible;
  pointer-events: none;
}

.trend-line polyline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trend-line circle {
  fill: var(--surface-panel-strong);
  stroke: var(--accent);
  stroke-width: 4;
}

.trend-side {
  display: grid;
  gap: 10px;
}

.trend-stat {
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--surface-panel-deep);
}

.trend-stat strong {
  display: block;
  margin-top: 8px;
  font-size: 22px;
}

.green-text {
  color: var(--accent);
}

.confirmed-empty-page {
  display: grid;
  min-height: 420px;
  align-items: start;
}

.confirmed-empty-card {
  border: 1px dashed var(--border-muted-dashed-strong);
  border-radius: var(--radius);
  padding: 24px;
  background: var(--surface-panel-muted);
}

.confirmed-route-note {
  margin-top: 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.control-center-page {
  display: grid;
  gap: 18px;
  font: 13px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif;
}

.control-center-page.control-loading-shell {
  opacity: 0.96;
}

body[data-route="ac-control"] .main {
  --ac-control-workspace-height: calc(100vh - 112px);
  height: 100vh;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.control-kpis {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.control-layout-grid {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr) 336px;
  gap: 16px;
  align-items: start;
}

body[data-route="ac-control"] .control-layout-grid {
  grid-template-columns: minmax(220px, 236px) minmax(590px, 1fr) minmax(300px, 336px);
  align-items: stretch;
  min-height: var(--ac-control-workspace-height);
}

body[data-shell="business"] .control-layout-grid {
  align-items: stretch;
  gap: 12px;
  min-height: 816px;
}

.control-tree-panel,
.control-main-panel,
.control-right-panel,
.control-empty-panel {
  min-width: 0;
}

.panel-title.compact h2,
.panel-title.compact h3 {
  margin: 0;
}

.control-search {
  width: 100%;
  margin: 10px 0 12px;
}

body[data-route="ac-control"] .control-search {
  height: 30px;
  margin: 0 0 8px;
  padding: 7px 10px;
}

.control-zone-list {
  display: grid;
  gap: 6px;
}

.control-zone-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  border-radius: var(--radius);
  padding: 8px;
  color: var(--muted-strong);
  font-size: 13px;
}

body[data-shell="business"] .control-zone-list {
  gap: 0;
}

body[data-shell="business"] .control-zone-row,
body[data-shell="business"] .control-zone-root {
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: 6px;
  padding: 6px 8px;
  color: #c2d2f2;
  background: transparent;
  font-size: 13px;
  font-weight: 400;
}

body[data-shell="business"] .control-zone-row:hover,
body[data-shell="business"] .control-zone-root:hover {
  background: rgba(47, 139, 255, 0.12);
}

body[data-shell="business"] .control-zone-row input[type="checkbox"],
body[data-shell="business"] .control-zone-root input[type="checkbox"],
body[data-shell="business"] .control-tree-node input[type="checkbox"] {
  appearance: none;
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 2px;
  background: #fff;
  accent-color: #2f8bff;
}

body[data-shell="business"] .control-zone-row input[type="checkbox"]:checked,
body[data-shell="business"] .control-zone-root input[type="checkbox"]:checked,
body[data-shell="business"] .control-tree-node input[type="checkbox"]:checked {
  border-color: #2f8bff;
  background:
    linear-gradient(135deg, transparent 0 42%, #fff 42% 55%, transparent 55%) 2px 5px / 4px 4px no-repeat,
    linear-gradient(45deg, transparent 0 46%, #fff 46% 60%, transparent 60%) 5px 3px / 6px 7px no-repeat,
    #2f8bff;
}

body[data-shell="business"] .control-zone-row .zone-name,
body[data-shell="business"] .control-zone-root > span {
  flex: 1;
}

body[data-route="ac-control"] .control-search {
  min-height: 0;
  height: 30px;
  font-size: 12px;
  line-height: normal;
}

.control-zone-row:hover {
  background: var(--overlay-blue);
}

.zone-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zone-count {
  color: var(--text);
  font-weight: 900;
}

.control-zone-row i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
}

.control-zone-row i.online {
  background: var(--green);
  box-shadow: 0 0 8px color-mix(in srgb, var(--green) 62%, transparent);
}

.control-zone-row i.warn {
  background: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.62);
}

.control-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}

body[data-shell="business"] .control-filter-row {
  margin-bottom: 12px;
}

body[data-route="ac-control"] .control-filter-row {
  min-height: 82.75px;
}

.control-filter-status {
  flex: 1 1 160px;
  min-width: 120px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.control-filter-status:empty {
  display: none;
}

.control-filter-status.error {
  color: var(--danger);
}
body[data-route="ac-control"] .control-filter-row > .btn {
  display: block;
  height: 35px;
  min-height: 0;
  font: 400 12.5px Arial, sans-serif;
  line-height: normal;
}

.control-layout-toggle {
  margin-left: auto;
  display: grid;
  grid-auto-flow: column;
  gap: 8px;
  align-items: center;
}

.control-layout-toggle b {
  border: 1px solid var(--border-blue-strong);
  border-radius: var(--radius);
  padding: 10px;
  color: var(--text);
  background: var(--overlay-blue-strong);
  font-size: 12px;
}

.layout-switch,
.floor-toolbar,
.floor-actions,
.floor-tabs,
.binding-floor-source {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.layout-switch {
  justify-content: flex-end;
  margin: -2px 0 12px;
}

.floor-plan-layout {
  display: grid;
  gap: 16px;
}

.floor-toolbar {
  justify-content: space-between;
}

.floor-plan-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.32fr);
  gap: 16px;
  align-items: start;
}

.floor-plan-main,
.floor-device-list,
.floor-side-section {
  min-width: 0;
}

.floor-plan-stage {
  min-height: 520px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background:
    linear-gradient(90deg, var(--border-muted-faint) 1px, transparent 1px),
    linear-gradient(180deg, var(--border-muted-faint) 1px, transparent 1px),
    var(--surface-chart);
  background-size: 48px 48px;
}

.floor-plan-stage.compact {
  min-height: 360px;
}

.floor-plan-canvas {
  position: relative;
  min-width: 680px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius);
  background: var(--surface-panel-deeper);
  transform: scale(var(--zoom));
  transform-origin: top left;
}

.floor-plan-canvas img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.floor-plan-placeholder {
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--muted);
}

.floor-zone-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.floor-zone-polygon {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  display: grid;
  align-content: start;
  gap: 4px;
  border: 1px solid var(--border-blue-strong);
  border-radius: var(--radius);
  padding: 10px;
  color: var(--text);
  background: var(--overlay-blue);
}

.floor-zone-polygon.bound {
  border-color: color-mix(in srgb, var(--green) 48%, transparent);
  background: var(--overlay-teal);
}

.floor-zone-polygon.unbound {
  border-color: color-mix(in srgb, var(--amber) 52%, transparent);
  background: var(--overlay-amber);
}

.floor-zone-polygon.missing {
  border-color: color-mix(in srgb, var(--red) 50%, transparent);
  background: var(--overlay-red);
}

.floor-zone-polygon b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.floor-zone-polygon small {
  color: var(--muted);
  font-size: 11px;
}

.floor-device-marker {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 2px solid var(--surface-panel-strong);
  border-radius: 999px;
  color: var(--text);
  background: var(--green);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 16%, transparent);
  transform: translate(-50%, -50%);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.floor-device-marker.unbound {
  background: var(--amber);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--amber) 16%, transparent);
}

.floor-device-marker.offline {
  background: var(--weak);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--weak) 16%, transparent);
}

.floor-device-marker.active {
  outline: 2px solid var(--badge-amber-text);
  outline-offset: 3px;
}

.floor-plan-hint,
.floor-side-section p,
.floor-plan-row small {
  color: var(--muted);
  font-size: 12px;
}

.floor-plan-hint {
  margin-top: 10px;
}

.floor-device-list {
  display: grid;
  gap: 12px;
}

.floor-side-section {
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--surface-panel-deep);
}

.floor-side-section h3,
.floor-side-section p {
  margin: 0 0 10px;
}

.floor-plan-row {
  width: 100%;
  display: grid;
  gap: 4px;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius);
  margin-bottom: 8px;
  padding: 10px;
  color: var(--text);
  background: var(--surface-nav);
  text-align: left;
}

.floor-plan-row.active {
  border-color: var(--accent);
  background: var(--overlay-accent);
}

.floor-device-detail {
  display: grid;
  gap: 12px;
}

.binding-floor-source {
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
}

.binding-floor-map .floor-plan-stage {
  min-height: 360px;
}

.hidden-input {
  display: none;
}

.control-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 12px;
}

body[data-shell="business"] .control-legend {
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--mut);
  font-size: 11px;
}

body[data-route="ac-control"] .control-legend {
  transform: translateY(4.25px);
}

.control-legend span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

body[data-route="ac-control"] .control-legend span {
  display: block;
  gap: normal;
}

.control-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}

body[data-route="ac-control"] .control-legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  transform: translateY(-1.25px);
}

.control-legend i.run {
  background: var(--green);
}

.control-legend i.fan {
  background: var(--dehum);
}

.control-legend i.cool {
  background: var(--accent);
}

.control-legend i.heat {
  background: var(--amber);
}

.control-legend i.off {
  background: var(--weak);
}

body[data-route="ac-control"] .control-legend i.run {
  background: var(--on);
}

body[data-route="ac-control"] .control-legend i.cool {
  background: var(--cool);
}

body[data-route="ac-control"] .control-legend i.heat {
  background: var(--heat);
}

body[data-route="ac-control"] .control-legend i.off {
  background: #3a465c;
}

.control-card-grid,
.control-device-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.control-batch-actions {
  position: relative;
  margin-top: 10px;
  min-height: 0;
}

.control-batch-actions summary {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  list-style: none;
  cursor: pointer;
}

.control-batch-actions summary::-webkit-details-marker {
  display: none;
}

.control-batch-actions[open] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 8px;
  background: var(--surface-nav);
}

.control-batch-actions[open] summary {
  margin-right: 2px;
}

.control-card {
  min-width: 0;
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--surface-panel-deep);
}

.control-card.online {
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
}

.control-card.offline {
  opacity: 0.78;
}

.control-card.selected {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.control-card header,
.control-card footer,
.device-check {
  display: flex;
  align-items: center;
  gap: 10px;
}

.control-card header {
  justify-content: space-between;
}

.control-card footer {
  flex-wrap: wrap;
}

.device-check {
  min-width: 0;
  font-weight: 800;
}

.device-check span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.control-focus {
  display: grid;
  gap: 4px;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 10px;
  color: var(--text);
  background: var(--surface-nav);
  text-align: left;
}

.control-focus span {
  color: var(--muted);
  font-size: 12px;
}

.device-state-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.device-state-grid div {
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--surface-nav);
}

.device-state-grid dt {
  color: var(--muted);
  font-size: 12px;
}

.device-state-grid dd {
  margin: 6px 0 0;
  overflow-wrap: anywhere;
  font-weight: 800;
}

.control-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  color: var(--muted);
  font-size: 12px;
}

body[data-shell="business"] .control-footer {
  position: relative;
  top: 5.625px;
  min-height: 53px;
  margin-top: auto;
  padding-top: 14px;
}

body[data-route="ac-control"] .control-footer {
  top: 0;
  flex: 0 0 auto;
  margin-top: 12px;
}

.control-footer b {
  color: var(--text);
}

.control-pager {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
}

.control-pager > b {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 5px 12px;
  color: var(--muted);
  background: #12203c;
  font-size: 12px;
}

.control-pager .btn {
  min-height: 30px;
  padding: 3px 9px;
}

body[data-shell="business"] .control-pager .btn {
  min-height: 30px;
  padding: 3px 9px;
}

.control-power-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.control-power-tile {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 10px;
  color: var(--muted);
  background: var(--surface-nav);
}

.control-power-tile b,
.control-power-tile span {
  display: block;
}

.control-power-tile.active {
  border-color: color-mix(in srgb, var(--green) 46%, transparent);
  color: var(--green);
  background: color-mix(in srgb, var(--green) 18%, var(--surface-nav));
}

.control-temp-row,
.control-tile-section {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.control-temp-row {
  grid-template-columns: 1fr repeat(3, auto);
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}

.control-tile-section > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.control-tile-grid {
  display: grid;
  gap: 8px;
}

.control-tile-grid.five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.control-tile-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.control-tile-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.control-mode-tile {
  min-height: 42px;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius);
  color: var(--text);
  background: var(--surface-panel-deep);
  font-size: 12px;
  font-weight: 900;
}

.control-lock-panel {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 18px 0;
  padding: 14px 0;
}

.title-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.control-lock-note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.control-lock-form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.lock-range-grid,
.lock-mode-grid {
  display: grid;
  gap: 8px;
}

.lock-range-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lock-mode-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.lock-check {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius);
  padding: 9px 10px;
  background: var(--surface-panel-deep);
  font-size: 12px;
  font-weight: 900;
}

.lock-check span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.control-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.control-detail-title {
  margin: 16px 0 10px;
  color: var(--text);
  font-size: 15px;
}

.control-detail-grid div {
  min-width: 0;
}

.control-detail-grid span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
}

.control-detail-grid b {
  display: block;
  color: var(--text);
  overflow-wrap: anywhere;
  font-size: 13px;
}

body[data-shell="business"] .control-right-panel {
  max-height: calc(100vh - 70px);
  overflow: hidden;
}

body[data-shell="business"] .control-right-panel .panel-title.compact {
  align-items: center;
  margin-bottom: 11px;
}

body[data-shell="business"] .control-panel-title {
  font-size: 15px;
}

body[data-shell="business"] .control-panel-title .r {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

body[data-shell="business"] .control-right-panel .panel-title.compact h2,
body[data-shell="business"] .control-right-panel .panel-title.compact h3,
body[data-shell="business"] .control-detail-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--txt);
  font-size: 15px;
  font-weight: 800;
}

body[data-route="ac-control"] .control-right-panel .panel-title.compact h2,
body[data-route="ac-control"] .control-right-panel .panel-title.compact h3 {
  font-weight: 400;
}

body[data-route="ac-control"] .control-detail-title {
  font-weight: 400;
  transform: translateY(18px);
}

body[data-route="ac-control"] .control-detail-grid {
  transform: translateY(29px);
}

body[data-route="ac-control"] .control-detail-grid span {
  margin-bottom: 2px;
}

body[data-route="ac-control"] .control-detail-grid b {
  font-weight: 400;
}

body[data-shell="business"] .control-right-panel .panel-title.compact .btn {
  box-sizing: border-box;
  height: 27px;
  min-height: 27px;
  line-height: 15px;
  padding: 5px 12px;
}

body[data-route="ac-control"] .control-right-panel .panel-title.compact .btn {
  display: block;
  font: 400 12.5px Arial, sans-serif;
  line-height: normal;
}

body[data-route="ac-control"] .control-right-panel > .panel-title.compact:first-child .btn {
  padding-right: 14px;
  padding-left: 14px;
}

body[data-shell="business"] .control-panel-title .btn {
  min-height: 29px;
  padding: 5px 12px;
}

.control-main-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

body[data-route="ac-control"] .control-main-panel {
  min-height: var(--ac-control-workspace-height);
  align-self: stretch;
}

.control-zone-root {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius);
  padding: 8px;
  color: var(--text);
  background: var(--surface-nav);
  font-size: 13px;
  font-weight: 900;
}

.control-zone-root span {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.control-zone-root b {
  color: var(--muted);
}

body[data-shell="business"] .control-zone-root b,
body[data-shell="business"] .zone-count {
  display: none;
}

.control-layout-toggle {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--border-blue-strong);
  border-radius: var(--radius);
  background: var(--surface-nav);
}

.control-layout-toggle b,
.control-layout-toggle .btn {
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 7px 10px;
  white-space: nowrap;
}

body[data-shell="business"] .control-layout-toggle {
  border-radius: 9px;
  padding: 3px;
  background: #0b1626;
}

body[data-route="ac-control"] .control-layout-toggle {
  border-color: rgba(70, 140, 235, 0.2);
  gap: 0;
  transform: translateY(-1.31px);
}

body[data-shell="business"] .control-layout-toggle b,
body[data-shell="business"] .control-layout-toggle .btn {
  min-height: 0;
  border-radius: 7px;
  padding: 6px 14px;
  color: var(--mut);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
}

body[data-route="ac-control"] .control-layout-toggle .btn {
  display: block;
  height: 30px;
  border: 0;
  line-height: 18px;
}

body[data-shell="business"] .control-layout-toggle b {
  color: #fff;
  background: linear-gradient(135deg, var(--ac), var(--ac2));
}

.control-layout-toggle b {
  color: var(--text);
  background: var(--overlay-blue-strong);
}

.control-card {
  position: relative;
  min-height: 188px;
  overflow: hidden;
  align-content: start;
  gap: 10px;
  padding: 12px;
}

.control-card-accent {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--weak);
}

.control-card.pwr-on .control-card-accent {
  background: var(--green);
}

.control-card.m-cool .control-card-accent {
  background: var(--accent);
}

.control-card.m-heat .control-card-accent {
  background: var(--amber);
}

.control-power-chip {
  border: 1px solid var(--border-muted);
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--muted);
  background: var(--surface-pill);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.control-card.pwr-on .control-power-chip {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 46%, transparent);
  background: color-mix(in srgb, var(--green) 18%, transparent);
}

.control-card .control-focus {
  position: relative;
  min-height: 104px;
  border: 0;
  padding: 0 78px 0 0;
  background: transparent;
}

.control-temp-value {
  color: var(--text);
  font-size: 42px;
  font-weight: 950;
  line-height: 1;
}

.control-temp-value small {
  color: var(--muted);
  font-size: 18px;
}

.control-room-temp {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.control-power-icon {
  position: absolute;
  right: 0;
  top: 10px;
  width: 72px;
  height: 72px;
  color: var(--muted);
}

.control-card.pwr-on .control-power-icon {
  color: var(--green);
}

.control-power-icon svg {
  width: 72px;
  height: 72px;
  display: block;
}

.control-card footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  padding-top: 9px;
  color: var(--muted);
  font-size: 12px;
}

.control-card footer span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.control-panel-sub {
  margin-top: -4px;
  color: var(--muted);
  font-size: 12px;
}

.control-power-tile {
  border-radius: 11px;
  padding: 18px 10px;
  text-align: center;
  font-size: 16px;
}

body[data-shell="business"] .control-power-row {
  display: flex;
  gap: 10px;
  margin: 0 0 16px;
}

body[data-shell="business"] .control-power-tile {
  flex: 1;
  min-height: 86px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 18px;
  color: var(--mut);
  background: transparent;
  font-size: 16px;
}

body[data-shell="business"] .control-power-tile.active {
  border-color: var(--on);
  color: #7ef0a6;
  background: rgba(34, 197, 94, 0.25);
  font-weight: 800;
}

/* 关机选中态用中性色,绿色只代表"开机/运行",避免关机也显绿造成误读。 */
body[data-shell="business"] .control-power-tile.off.active {
  border-color: var(--line-strong);
  color: #d7e4f7;
  background: rgba(120, 140, 170, 0.22);
}

body[data-shell="business"] .control-power-tile small,
body[data-shell="business"] .control-power-tile span {
  font-size: 11px;
}

body[data-route="ac-control"] .control-power-tile:not(.active) b {
  font-weight: 400;
}

.control-temp-row {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
}

body[data-shell="business"] .control-temp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 33px;
  margin-bottom: 16px;
}

body[data-shell="business"] .control-slider,
body[data-shell="business"] .lock-slider-row i {
  flex: 1;
  height: 6px;
  border-radius: 4px;
  background: var(--line);
}

body[data-shell="business"] .control-slider i,
body[data-shell="business"] .lock-slider-row i b,
body[data-shell="business"] .sld .fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 4px;
  background: #2f8bff;
}

body[data-shell="business"] .control-slider b,
body[data-shell="business"] .lock-slider-row i em,
body[data-shell="business"] .sld .thumb {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: #2f8bff;
  box-shadow: 0 0 8px #2f8bff;
  transform: translate(-50%, -50%);
}

body[data-shell="business"] .control-temp-row .btn {
  height: 33px;
  min-height: 33px;
  padding: 7px 14px;
  font-size: 15px;
}

.control-slider,
.lock-slider-row i {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: var(--surface-track);
}

.control-slider i,
.lock-slider-row i b {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--value) * 1%);
  border-radius: inherit;
  background: var(--accent);
}

.control-slider b,
.lock-slider-row i em {
  position: absolute;
  left: calc(var(--value) * 1%);
  top: 50%;
  width: 16px;
  height: 16px;
  border: 2px solid var(--surface-panel);
  border-radius: 999px;
  background: var(--text);
  transform: translate(-50%, -50%);
}

.control-temp-current {
  color: var(--text);
  font-size: 20px;
}

body[data-shell="business"] .control-temp-current {
  min-width: 42px;
  color: #fff;
  font-size: 20px;
  text-align: right;
}

body[data-shell="business"] .control-tile-section {
  margin-bottom: 8px;
}

body[data-shell="business"] .control-tile-grid {
  gap: 8px;
}

body[data-shell="business"] .control-mode-tile {
  min-height: 78px;
  border: 1px solid rgba(150, 170, 210, 0.16);
  border-radius: 10px;
  padding: 13px 2px;
  color: var(--text-bar);
  background: linear-gradient(180deg, rgba(130, 150, 190, 0.2), rgba(120, 140, 180, 0.07));
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

body[data-shell="business"] .control-mode-tile i {
  display: block;
  font-size: 20px;
  font-style: normal;
  line-height: 1.6;
}

body[data-shell="business"] .control-mode-tile:hover,
body[data-shell="business"] .control-mode-tile.active,
body[data-shell="business"] .ctile.on {
  border-color: var(--cool);
  color: #fff;
  background: rgba(47, 139, 255, 0.32);
  box-shadow: 0 0 12px rgba(47, 139, 255, 0.3);
}

body[data-shell="business"] .ctile {
  appearance: none;
  border: 1px solid rgba(150, 170, 210, 0.16);
  border-radius: 10px;
  padding: 13px 2px;
  color: #cfe0ff;
  background: linear-gradient(180deg, rgba(130, 150, 190, 0.2), rgba(120, 140, 180, 0.07));
  font-family: inherit;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
  transition: 0.15s;
}

body[data-shell="business"] .ctile i {
  display: block;
  font-size: 20px;
  font-style: normal;
  line-height: 1.6;
}

body[data-shell="business"] .ctile:hover {
  border-color: rgba(150, 170, 210, 0.4);
  background: linear-gradient(180deg, rgba(130, 150, 190, 0.28), rgba(120, 140, 180, 0.12));
}

body[data-shell="business"] .ctile.on {
  border-color: var(--cool);
  color: #fff;
  background: rgba(47, 139, 255, 0.32);
  box-shadow: 0 0 12px rgba(47, 139, 255, 0.3);
}

body[data-shell="business"] .sld {
  position: relative;
  flex: 1;
  height: 6px;
  border-radius: 4px;
  background: var(--line);
}

body[data-shell="business"] .sld .fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 4px;
  background: #2f8bff;
}

body[data-shell="business"] .sld .thumb {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2f8bff;
  box-shadow: 0 0 8px #2f8bff;
  transform: translate(-50%, -50%);
}

body[data-shell="business"] .tval {
  min-width: 42px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: right;
}

.lock-slider-row,
.lock-inline-row {
  display: grid;
  grid-template-columns: auto 56px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
}

.lock-slider-row input {
  width: 56px;
}

.lock-slider-row[data-lock-temp-empty="true"] i {
  opacity: 0.48;
}

.lock-slider-row[data-lock-temp-empty="true"] strong {
  color: var(--muted);
}

.lock-inline-row {
  grid-template-columns: auto minmax(0, 1fr);
}

.lock-inline-row select {
  min-width: 0;
}

.lock-inline-row .lock-mode-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body[data-shell="business"] .control-lock-panel {
  margin: 18px 0 0;
  border-top: 0;
  border-bottom: 0;
  padding: 0;
}

body[data-shell="business"] .control-lock-panel .panel-title.compact {
  margin-top: 20px;
  margin-bottom: 8px;
}

body[data-route="ac-control"] .control-lock-panel .panel-title.compact {
  height: 29px;
  margin-bottom: 11px;
}

body[data-shell="business"] .panel-lock-form {
  gap: 0;
  color: var(--mut);
  font-size: 13px;
  line-height: 2.8;
}

body[data-route="ac-control"] .panel-lock-form {
  display: block;
  margin: 0;
  transform: none;
}

body[data-route="ac-control"] .control-tree-panel,
body[data-route="ac-control"] .control-right-panel {
  align-self: stretch;
  min-height: 0;
  overflow: auto;
}

body[data-route="ac-control"] .control-tree-panel {
  display: flex;
  flex-direction: column;
  border-color: rgba(86, 118, 172, 0.16);
  border-radius: 8px;
  padding: 10px 8px;
  background: rgba(10, 20, 36, 0.48);
  box-shadow: none;
  overflow: hidden;
}

body[data-route="ac-control"] .control-tree-panel::before {
  content: none;
}
body[data-route="ac-control"] .control-right-panel {
  display: grid;
  grid-template-rows: none;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 12px;
  border: 0;
  border-radius: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  background: transparent;
  box-shadow: none;
}

body[data-route="ac-control"] .control-right-panel::before,
body[data-route="ac-control"] .control-right-panel::after {
  content: none;
}

body[data-route="ac-control"] .control-layout-grid.is-right-panel-collapsed {
  grid-template-columns: minmax(220px, 236px) minmax(590px, 1fr) 26px;
}

body[data-route="ac-control"] .control-layout-grid.is-right-panel-collapsed .control-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

body[data-route="ac-control"] .control-panel-collapse-toggle {
  position: absolute;
  left: 0;
  top: 58px;
  z-index: 6;
  width: 22px;
  height: 78px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 11px 11px 0;
  color: #d6e6ff;
  background: linear-gradient(180deg, var(--surface-panel), var(--surface-panel-deep));
  box-shadow: inset 1px 0 0 rgba(39, 224, 255, 0.48), 0 8px 18px rgba(2, 8, 23, 0.22);
  cursor: pointer;
}

body[data-route="ac-control"] .control-panel-collapse-toggle span {
  display: block;
  font-size: 20px;
  line-height: 1;
}

body[data-route="ac-control"] .control-panel-collapse-toggle:hover,
body[data-route="ac-control"] .control-panel-collapse-toggle:focus-visible {
  border-color: rgba(39, 224, 255, 0.58);
  border-left: 0;
  color: #fff;
  outline: none;
  background: linear-gradient(180deg, rgba(16, 36, 64, 0.98), rgba(10, 22, 40, 0.98));
  box-shadow: inset 1px 0 0 rgba(39, 224, 255, 0.72), 0 0 0 2px rgba(39, 224, 255, 0.16), 0 8px 18px rgba(2, 8, 23, 0.22);
}

body[data-route="ac-control"] .control-right-panel.is-collapsed {
  min-height: calc(100vh - 192px);
  align-self: stretch;
  gap: 0;
}

body[data-route="ac-control"] .control-right-panel.is-collapsed .control-panel-section {
  display: none;
}

body[data-route="ac-control"] .control-right-panel.is-collapsed .control-panel-collapse-toggle {
  left: 0;
  right: auto;
  top: 94px;
  width: 26px;
  height: 94px;
  border: 1px solid var(--line);
  border-right-color: rgba(72, 95, 135, 0.72);
  border-radius: 14px 0 0 14px;
}

body[data-route="ac-control"] .control-panel-section {
  position: relative;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 13px 15px;
  background: linear-gradient(180deg, var(--surface-panel), var(--surface-panel-deep));
  box-shadow: var(--shadow);
}

body[data-route="ac-control"] .control-panel-section-status {
  padding-left: 30px;
}

body[data-route="ac-control"] .control-panel-section::before {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(120, 200, 255, 0.5), transparent);
}

body[data-route="ac-control"] .control-panel-section-lock .control-lock-panel,
body[data-route="ac-control"] .control-panel-section-lock .panel-title.compact {
  margin-top: 0;
}

body[data-route="ac-control"] .control-panel-section-lock {
  min-height: max-content;
}

body[data-route="ac-control"] .control-panel-section-details .control-detail-title,
body[data-route="ac-control"] .control-panel-section-details .control-detail-grid {
  transform: none;
}

body[data-route="ac-control"] .control-panel-section-details .control-detail-title {
  margin-bottom: 10px;
}

body[data-route="ac-control"] .control-panel-section-details {
  display: block;
  min-height: 0;
  overflow: visible;
}

body[data-route="ac-control"] .control-capability-editor {
  padding: 8px 10px;
  font-size: 12px;
}

body[data-route="ac-control"] .control-panel-section-capabilities {
  padding: 0;
}

body[data-route="ac-control"] .control-capability-editor summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 900;
}

body[data-route="ac-control"] .control-capability-editor summary span,
body[data-route="ac-control"] .control-capability-editor p {
  color: var(--muted);
  font-weight: 500;
}

body[data-route="ac-control"] .control-capability-editor p {
  margin: 8px 0;
  line-height: 1.55;
}

body[data-route="ac-control"] .control-capability-editor fieldset {
  margin: 0 0 8px;
  border: 0;
  padding: 0;
}

body[data-route="ac-control"] .control-capability-editor legend {
  margin-bottom: 6px;
  color: var(--text);
  font-weight: 800;
}

body[data-route="ac-control"] .capability-fan-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-route="ac-control"] .capability-temperature-step {
  margin-bottom: 8px;
}

body[data-route="ac-control"] .control-capability-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body[data-route="ac-control"] .control-fan-capability-notice {
  margin: 6px 0 0;
  color: var(--amber);
  font-size: 10px;
  line-height: 1.3;
}

body[data-route="ac-control"] .control-panel-section-details .control-detail-grid {
  align-content: start;
  min-height: 0;
  overflow: visible;
  padding-bottom: 2px;
}

body[data-route="ac-control"] .control-batch-actions {
  margin-top: 14px;
  margin-bottom: 10px;
}

body[data-route="ac-control"] .control-right-panel .panel-title.compact {
  margin-bottom: 8px;
}

body[data-route="ac-control"] .control-power-row {
  gap: 8px;
  margin: 0 0 10px;
}

body[data-route="ac-control"] .control-power-tile {
  min-height: 68px;
  padding: 12px 10px;
  font-size: 15px;
}

body[data-route="ac-control"] .control-temp-row {
  gap: 8px;
  height: 28px;
  margin-bottom: 10px;
}

body[data-route="ac-control"] .control-temp-row .btn {
  height: 28px;
  min-height: 28px;
  padding: 4px 10px;
}

body[data-route="ac-control"] .control-temp-current {
  font-size: 18px;
}

body[data-route="ac-control"] .control-tile-section {
  margin-bottom: 6px;
}

body[data-route="ac-control"] .control-tile-grid {
  gap: 6px;
}

body[data-route="ac-control"] .ctile {
  min-height: 56px;
  padding: 7px 2px;
}

body[data-route="ac-control"] .ctile i {
  font-size: 17px;
  line-height: 1.35;
}

body[data-route="ac-control"] .panel-lock-temp {
  height: 32px;
}

body[data-route="ac-control"] .panel-lock-temp strong {
  height: 32px;
  font-size: 15px;
  line-height: 32px;
}

body[data-route="ac-control"] .panel-lock-line {
  height: 28px;
}

body[data-route="ac-control"] .panel-lock-line .btn {
  height: 24px;
}

body[data-route="ac-control"] .control-detail-grid {
  gap: 8px 12px;
  font-size: 12px;
}

body[data-route="ac-control"] .control-tree-panel::after {
  content: none;
}

body[data-shell="business"] .panel-lock-temp {
  display: flex;
  grid-template-columns: none;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}

body[data-route="ac-control"] .panel-lock-temp {
  height: 44.8px;
}

body[data-shell="business"] .panel-lock-temp > span {
  flex: 0 0 auto;
}

body[data-shell="business"] .panel-lock-temp > em {
  font-style: normal;
}

body[data-shell="business"] .panel-lock-temp .lock-temp-input {
  width: 0;
  min-width: 0;
  height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

body[data-route="ac-control"] .control-panel-section-lock .panel-lock-temp .lock-temp-input {
  width: 44px;
  min-width: 44px;
  height: 26px;
  padding: 2px 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  opacity: 1;
  pointer-events: auto;
  color: var(--txt);
  background: var(--surface-input);
  font: inherit;
  text-align: center;
}

body[data-shell="business"] .panel-lock-temp i {
  flex: 1 1 auto;
  height: 6px;
}

body[data-shell="business"] .panel-lock-temp strong {
  min-width: 42px;
  color: #fff;
  text-align: right;
}

body[data-route="ac-control"] .panel-lock-temp strong {
  height: 44.8px;
  font-size: 16px;
  line-height: 44.8px;
}

body[data-shell="business"] .panel-lock-line {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--mut);
  font-size: 13px;
}

body[data-route="ac-control"] .panel-lock-line {
  height: 36.39px;
}

body[data-shell="business"] .panel-lock-line label {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

body[data-route="ac-control"] .panel-lock-line label {
  display: block;
  width: 46px;
}

body[data-shell="business"] .panel-lock-temp input[type="checkbox"],
body[data-shell="business"] .panel-lock-line input[type="checkbox"] {
  appearance: none;
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 2px;
  background: #fff;
}

body[data-shell="business"] .panel-lock-temp input[type="checkbox"]:checked,
body[data-shell="business"] .panel-lock-line input[type="checkbox"]:checked {
  border-color: #2f8bff;
  background:
    linear-gradient(135deg, transparent 0 42%, #fff 42% 55%, transparent 55%) 2px 5px / 4px 4px no-repeat,
    linear-gradient(45deg, transparent 0 46%, #fff 46% 60%, transparent 60%) 5px 3px / 6px 7px no-repeat,
    #2f8bff;
}

body[data-route="ac-control"] .control-zone-row input[type="checkbox"],
body[data-route="ac-control"] .control-zone-root input[type="checkbox"],
body[data-route="ac-control"] .control-tree-node input[type="checkbox"],
body[data-route="ac-control"] .panel-lock-temp input[type="checkbox"],
body[data-route="ac-control"] .panel-lock-line input[type="checkbox"] {
  appearance: auto;
  width: 13px;
  height: 13px;
  margin: 3px 3px 3px 4px;
  border: initial;
  border-radius: 0;
  background: initial;
  accent-color: #2f8bff;
  color-scheme: light;
}

body[data-route="ac-control"] .control-zone-row input[type="checkbox"]:checked,
body[data-route="ac-control"] .control-zone-root input[type="checkbox"]:checked,
body[data-route="ac-control"] .control-tree-node input[type="checkbox"]:checked,
body[data-route="ac-control"] .panel-lock-temp input[type="checkbox"]:checked,
body[data-route="ac-control"] .panel-lock-line input[type="checkbox"]:checked {
  border: initial;
  background: initial;
}

body[data-shell="business"] .panel-lock-line .btn {
  min-height: 28px;
  padding: 4px 12px;
}

body[data-route="ac-control"] .panel-lock-line .btn {
  display: block;
  height: 27px;
  min-height: 0;
  font: 400 12.5px Arial, sans-serif;
  line-height: normal;
}

body[data-shell="business"] .panel-lock-line select[data-lock-power] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

body[data-route="ac-control"] .panel-lock-line select[data-lock-power] {
  display: none;
}

body[data-shell="business"] .panel-lock-form .control-lock-note {
  display: none;
}

body[data-route="ac-control"] .control-panel-section-lock .panel-lock-form {
  display: grid;
  gap: 9px;
  line-height: normal;
}

body[data-route="ac-control"] .control-panel-section-lock .panel-lock-temp {
  min-width: 0;
  height: 30px;
  display: grid;
  grid-template-columns: minmax(52px, 62px) 38px 24px minmax(46px, 1fr) 24px 42px;
  gap: 5px;
  align-items: center;
  color: var(--mut);
  font-size: 12.5px;
}

@media (max-width: 1279px) {
  body[data-route="ac-control"] #viewHost .control-panel-section-lock .panel-lock-temp {
    height: auto;
    min-height: 44px;
    grid-template-columns: minmax(52px, 62px) 44px 44px minmax(46px, 1fr) 44px minmax(48px, 54px);
  }
}

body[data-route="ac-control"] .control-panel-section-lock .lock-temp-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-route="ac-control"] .control-panel-section-lock .lock-enable-cell {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  white-space: nowrap;
}

body[data-route="ac-control"] .control-panel-section-lock .lock-enable-cell em {
  color: var(--mut);
  font-style: normal;
}

body[data-route="ac-control"] .control-panel-section-lock .panel-lock-temp .lock-temp-input {
  position: absolute;
  width: 1px;
  min-width: 0;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

body[data-route="ac-control"] .control-panel-section-lock .lock-temp-step {
  width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border-color: rgba(78, 108, 157, 0.72);
  color: #cfe0ff;
  background: rgba(28, 44, 72, 0.88);
  line-height: 22px;
}

body[data-route="ac-control"] .control-panel-section-lock .lock-temp-step:hover,
body[data-route="ac-control"] .control-panel-section-lock .panel-lock-line .btn:hover {
  border-color: rgba(47, 139, 255, 0.72);
  background: rgba(47, 139, 255, 0.24);
}

body[data-route="ac-control"] .control-panel-section-lock .lock-temp-range-wrap {
  position: relative;
  min-width: 0;
  height: 24px;
  display: block;
}

body[data-route="ac-control"] .control-panel-section-lock .lock-temp-range-wrap > i {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 6px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--line);
}

body[data-route="ac-control"] .control-panel-section-lock .lock-temp-range-wrap > i b {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(var(--value) * 1%);
  border-radius: inherit;
  background: #2f8bff;
}

body[data-route="ac-control"] .control-panel-section-lock .lock-temp-range-wrap > i em {
  position: absolute;
  left: calc(var(--value) * 1%);
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #2f8bff;
  box-shadow: 0 0 8px #2f8bff;
}

body[data-route="ac-control"] .control-panel-section-lock .lock-temp-range {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 24px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

body[data-route="ac-control"] .control-panel-section-lock .panel-lock-temp strong {
  min-width: 42px;
  height: 30px;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  line-height: 30px;
  text-align: right;
  white-space: nowrap;
}

body[data-route="ac-control"] .control-panel-section-lock .panel-lock-line {
  min-width: 0;
  height: auto;
  display: grid;
  align-items: center;
  gap: 6px;
  color: var(--mut);
  font-size: 12.5px;
}

body[data-route="ac-control"] .control-panel-section-lock .panel-lock-line > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-route="ac-control"] .control-panel-section-lock .panel-lock-mode-line {
  grid-template-columns: minmax(52px, 62px) repeat(5, minmax(30px, 1fr));
}

body[data-route="ac-control"] .control-panel-section-lock .panel-lock-power-line {
  grid-template-columns: minmax(52px, 62px) repeat(2, minmax(76px, 1fr));
}

body[data-route="ac-control"] .control-panel-section-lock .panel-lock-line label {
  width: auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  overflow: hidden;
  white-space: nowrap;
}

body[data-route="ac-control"] .control-panel-section-lock .panel-lock-line .btn {
  width: 100%;
  height: 27px;
  min-height: 27px;
  padding: 4px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-route="ac-control"] .control-panel-section-lock .panel-lock-line .btn.active {
  border-color: var(--cool);
  color: #fff;
  background: rgba(47, 139, 255, 0.36);
  box-shadow: 0 0 12px rgba(47, 139, 255, 0.26);
}

.control-card-grid {
  gap: 14px;
  margin-top: 4.5px;
}

.control-loading-input {
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(25, 230, 160, 0.08);
}

.control-loading-lines {
  display: grid;
  gap: 10px;
  padding: 8px 0;
}

.control-loading-lines span {
  height: 11px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(39, 224, 255, 0.09), rgba(25, 230, 160, 0.22), rgba(39, 224, 255, 0.09));
  opacity: calc(0.9 - var(--i, 0) * 0.1);
  animation: ops-loading-pulse 1.4s ease-in-out infinite;
}

.control-loading-lines span:nth-child(2n) {
  width: 68%;
}

.control-loading-lines span:nth-child(3n) {
  width: 82%;
}

.control-card-loading {
  justify-content: center;
  padding: 18px;
  pointer-events: none;
}

.control-loading-dot {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(39, 224, 255, 0.12), rgba(25, 230, 160, 0.28));
  animation: ops-loading-pulse 1.4s ease-in-out infinite;
}

body[data-route="ac-control"] .control-card-grid {
  transform: translateY(-0.25px);
}

.dcard.control-card {
  position: relative;
  height: 156.5px;
  min-height: 156.5px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  background: linear-gradient(180deg, var(--surface-panel-strong), var(--surface-panel-deeper));
  cursor: pointer;
}

.dcard.selected {
  border-color: var(--line);
  box-shadow: none;
}

.dcard.selected::after {
  content: none;
}

.dcard.offline {
  opacity: 0.92;
}

.dcard .acc {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--weak);
}

.dcard .top2 {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--mut);
  font-size: 12px;
}

body[data-route="ac-control"] .dcard .top2 {
  gap: normal;
}

.dcard .top2 > span:first-child {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-route="ac-control"] .dcard .top2 > span:first-child {
  min-width: auto;
  flex: 0 1 auto;
  overflow: visible;
  text-overflow: clip;
}

.dcard .device-select-ghost {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.dcard .device-check {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0;
  font-weight: 400;
}

.dcard .device-check input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: 0;
  opacity: 0;
  accent-color: var(--accent-blue);
}

.dcard .device-check span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dcard .signal-dot {
  margin-left: 2px;
}

body[data-route="ac-control"] .dcard .signal-dot {
  margin-left: 0;
}

.dcard .pchip {
  flex: 0 0 auto;
  border-radius: 20px;
  padding: 2px 8px;
  color: var(--mut);
  background: color-mix(in srgb, var(--weak) 18%, transparent);
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

body[data-route="ac-control"] .dcard .pchip {
  font-weight: 400;
}

.dcard .dcard-face {
  position: static;
  width: 100%;
  min-height: 65px;
  display: block;
  margin: 0;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.dcard .temp {
  margin: 8px 0 0;
  color: var(--text);
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
}

.dcard .temp small {
  color: var(--mut);
  font-size: 14px;
}

.dcard .rt {
  color: var(--mut);
  font-size: 12px;
}

.dcard .pw {
  position: absolute;
  right: 14px;
  top: 50%;
  color: currentColor;
  line-height: 0;
  transform: translateY(-40%);
}
.card-power-toggle {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.card-power-toggle:focus-visible {
  outline: 2px solid var(--cool);
  outline-offset: 3px;
  border-radius: 50%;
}

.card-power-toggle:disabled {
  cursor: wait;
  opacity: 0.68;
}

.card-power-toggle.off:hover,
.card-power-toggle.off:focus-visible {
  color: #8cc6ff;
}

.card-power-toggle.on:hover,
.card-power-toggle.on:focus-visible {
  filter: brightness(1.16);
}

.dcard .pw svg {
  width: 72px;
  height: 72px;
  display: block;
  filter: drop-shadow(0 0 7px currentColor);
}

.dcard:hover .pw svg {
  filter: drop-shadow(0 0 12px currentColor);
}

.dcard .ft {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  color: var(--text-bar);
  font-size: 13px;
}

.dcard .ft span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dcard.pwr-off {
  border-color: color-mix(in srgb, var(--weak) 25%, transparent);
  background: linear-gradient(180deg, #0c1424, #0a1018);
}

.dcard.pwr-off .temp,
.dcard.pwr-off .pw {
  color: var(--weak);
}

.dcard.pwr-off .acc {
  background: #3a465c;
}

.dcard.pwr-off .pchip {
  color: #9fb2d0;
  background: rgba(120, 140, 175, 0.18);
}

.dcard.pwr-on .pchip {
  color: #86efac;
  background: rgba(34, 197, 94, 0.2);
}

.dcard.pwr-on.m-cool {
  background: linear-gradient(135deg, color-mix(in srgb, var(--cool) 30%, transparent), rgba(10, 20, 40, 0.7));
}

.dcard.pwr-on.m-cool .acc {
  background: var(--cool);
  box-shadow: 0 0 12px var(--cool);
}

.dcard.pwr-on.m-cool .pw {
  color: #8cc6ff;
  text-shadow: 0 0 14px var(--cool);
}

.dcard.pwr-on.m-heat {
  background: linear-gradient(135deg, color-mix(in srgb, var(--heat) 28%, transparent), rgba(10, 20, 40, 0.7));
}

.dcard.pwr-on.m-heat .acc {
  background: var(--heat);
  box-shadow: 0 0 12px var(--heat);
}

.dcard.pwr-on.m-heat .pw {
  color: #ffc197;
  text-shadow: 0 0 14px var(--heat);
}

.dcard.pwr-on.m-fan {
  background: linear-gradient(135deg, color-mix(in srgb, var(--fan) 26%, transparent), rgba(10, 20, 40, 0.7));
}

.dcard.pwr-on.m-fan .acc {
  background: var(--fan);
  box-shadow: 0 0 12px var(--fan);
}

.dcard.pwr-on.m-fan .pw {
  color: #9af0bb;
  text-shadow: 0 0 14px var(--fan);
}

.dcard.pwr-on.m-dehum {
  background: linear-gradient(135deg, color-mix(in srgb, var(--dehum) 26%, transparent), rgba(10, 20, 40, 0.7));
}

.dcard.pwr-on.m-dehum .acc {
  background: var(--dehum);
  box-shadow: 0 0 12px var(--dehum);
}

.dcard.pwr-on.m-dehum .pw {
  color: #9fe9f7;
}

body[data-route="ac-control"] .dcard .card-power-toggle.on {
  color: var(--green);
  text-shadow: 0 0 14px rgba(25, 230, 160, 0.72);
}

body[data-route="ac-control"] .dcard .card-power-toggle.off {
  color: var(--weak);
  text-shadow: none;
}

@media (max-width: 767px) {
  .control-layout-grid {
    grid-template-columns: 168px minmax(0, 1fr);
  }

  body[data-route="ac-control"] .control-layout-grid {
    grid-template-columns: minmax(220px, 236px) minmax(0, 1fr);
  }

  .floor-plan-grid {
    grid-template-columns: 1fr;
  }

  .control-right-panel {
    grid-column: 1 / -1;
  }

  .control-card-grid,
  .control-device-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  body[data-route="ac-control"] .control-layout-grid {
    grid-template-columns: minmax(220px, 232px) minmax(408px, 1fr) minmax(260px, 280px);
  }

  body[data-route="ac-control"] .control-right-panel {
    grid-column: auto;
  }

  body[data-route="ac-control"] .control-card-grid {
    grid-template-columns: 1fr;
  }

  body[data-route="ac-control"] .control-layout-grid.is-right-panel-collapsed {
    grid-template-columns: minmax(220px, 232px) minmax(408px, 1fr) 26px;
  }

  body[data-route="ac-control"] .control-layout-grid.is-right-panel-collapsed .control-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  }

}
@media (max-width: 767px) {
  body[data-route="ac-control"] .control-layout-grid,
  body[data-route="ac-control"] .control-card-grid,
  body[data-route="ac-control"] .control-device-grid {
    grid-template-columns: 1fr;
  }

  body[data-route="ac-control"] .control-right-panel {
    grid-column: auto;
  }

  body[data-route="ac-control"] .control-layout-grid.is-right-panel-collapsed {
    grid-template-columns: 1fr;
  }

  body[data-route="ac-control"] .control-right-panel.is-collapsed {
    min-height: 54px;
  }

  body[data-route="ac-control"] .control-right-panel.is-collapsed .control-panel-collapse-toggle {
    right: 8px;
    top: 0;
    width: 42px;
    height: 42px;
    border-radius: 11px;
  }


  .control-layout-grid,
  .control-card-grid,
  .control-device-grid,
  .floor-plan-grid,
  .control-kpis {
    grid-template-columns: 1fr;
  }

  .control-temp-row,
  .control-tile-grid.five,
  .control-tile-grid.four,
  .control-tile-grid.three {
    grid-template-columns: 1fr;
  }
}

.control-groups-page {
  display: grid;
  gap: 18px;
}

.control-group-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: 16px;
  align-items: start;
}

.control-group-main {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.control-group-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}

.group-topology-panel,
.control-group-preview,
.group-queue-panel {
  min-width: 0;
}

.group-topology {
  min-height: 168px;
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 12px;
  padding: 26px 22px 12px;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  background: linear-gradient(90deg, color-mix(in srgb, var(--surface-panel) 88%, transparent), color-mix(in srgb, var(--accent) 10%, var(--surface-panel)));
}

.group-node {
  flex: 0 0 82px;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, transparent);
  border-radius: 50%;
  padding: 10px;
  color: var(--text);
  background: var(--surface-panel-deep);
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 24%, transparent);
  text-align: center;
}

.group-node b {
  color: var(--accent);
  font-size: 20px;
  line-height: 1;
}

.group-node span {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
}

.group-node small {
  color: var(--muted);
  font-size: 11px;
}

.group-node.online {
  border-color: color-mix(in srgb, var(--green) 34%, transparent);
}

.group-node.core {
  border-color: color-mix(in srgb, var(--cyan) 64%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--cyan) 30%, transparent);
}

.group-node.idle {
  border-color: color-mix(in srgb, var(--weak) 42%, transparent);
  color: var(--muted);
}

.group-node.overflow {
  border-color: color-mix(in srgb, var(--amber) 52%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--amber) 24%, transparent);
}

.gline {
  flex: 1 1 40px;
  height: 1px;
  background: color-mix(in srgb, var(--accent) 46%, transparent);
}

.group-zone-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.group-zone-card {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--surface-panel-muted);
}

.group-zone-card i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--weak);
}

.group-zone-card i.online {
  background: var(--green);
  box-shadow: 0 0 8px color-mix(in srgb, var(--green) 60%, transparent);
}

.group-zone-card span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-weight: 900;
}

.group-zone-card small {
  grid-column: 2;
  color: var(--muted);
  font-size: 11px;
}

.control-groups-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.42fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.control-group-builder,
.control-group-list-panel,
.control-group-card {
  min-width: 0;
}

.control-group-builder {
  display: grid;
  gap: 14px;
}

.control-group-device-pool {
  max-height: 188px;
  overflow: auto;
  display: grid;
  gap: 8px;
  padding-right: 4px;
}

.group-device-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 10px;
  align-items: center;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--surface-panel-deep);
}

.group-device-option small {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
}

.control-group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.control-group-card {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--surface-panel-deep);
}

.control-group-card.selected {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.control-group-add-card {
  border-style: dashed;
}

.control-group-card header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.control-group-card h3,
.control-group-card p {
  margin: 0;
}

.control-group-card p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.group-card-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.group-card-metrics div {
  min-width: 0;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--surface-nav);
}

.group-card-metrics small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.group-card-metrics b {
  display: block;
  margin-top: 4px;
  color: var(--text);
  overflow-wrap: anywhere;
}

.control-group-members {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.control-group-members span,
.control-group-members em {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--cyan) 24%, transparent);
  border-radius: var(--radius);
  padding: 7px 9px;
  background: color-mix(in srgb, var(--cyan) 8%, transparent);
  color: var(--text);
  font-style: normal;
}

.control-group-members button {
  border: 0;
  padding: 0;
  color: var(--danger);
  background: transparent;
  cursor: pointer;
}

.control-toolbar.compact {
  gap: 8px;
}

.control-group-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.control-group-preview {
  position: sticky;
  top: 84px;
  display: grid;
  gap: 14px;
}

.group-preview-hero {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--surface-panel-deep);
}

.group-preview-hero small,
.group-preview-hero span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.group-preview-hero b {
  display: block;
  margin: 6px 0;
  color: var(--text);
  font-size: 18px;
}

.preview-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}

.preview-flow div {
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 8px;
  background: var(--surface-nav);
  text-align: center;
}

.group-queue-panel .empty-state {
  min-height: 120px;
}

.queue {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 0.75fr));
  gap: 8px;
}

.qitem {
  min-width: 0;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius);
  padding: 10px;
  color: var(--text);
  background: var(--surface-nav);
  font-size: 12px;
  font-weight: 800;
}

.qitem small {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
}

body[data-shell="business"] .control-groups-page {
  display: block;
  gap: 0;
  font: 13px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif;
}

body[data-route="control-groups"] .platform-shell,
body[data-route="schedules"] .platform-shell {
  transform: translateY(1px);
}

body[data-shell="business"] .control-groups-page .btn {
  appearance: none;
  display: inline-block;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 12px;
  color: var(--txt);
  background: #12203c;
  font: 400 12.5px Arial, sans-serif;
  line-height: normal;
  text-align: center;
  cursor: pointer;
}

body[data-shell="business"] .control-groups-page .btn.pri {
  border: 0;
  background: linear-gradient(135deg, var(--ac), var(--ac2));
}

body[data-shell="business"] .control-groups-page .inp {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--txt);
  background: #0b1626;
  font-size: 12px;
}

body[data-shell="business"] .control-groups-page .pt {
  color: var(--txt);
  font-size: 14px;
  font-weight: 400;
}

body[data-shell="business"] .control-groups-page .tag {
  min-height: 0;
  border: 0;
  border-radius: 20px;
  padding: 2px 8px;
  color: #9fc6ff;
  background: rgba(47, 139, 255, 0.16);
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.5;
}

body[data-shell="business"] .control-groups-page .tag.g {
  color: #86efac;
  background: rgba(34, 197, 94, 0.18);
}

body[data-shell="business"] .control-group-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 11px;
}

body[data-shell="business"] .control-group-filters .inp {
  flex: 0 0 148px;
  width: 148px;
  min-width: 0;
}

body[data-shell="business"] .control-group-filters .btn {
  flex: 0 0 auto;
  min-height: 34px;
}

body[data-shell="business"] .gstats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

body[data-shell="business"] .gstat {
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 13px;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.5), rgba(8, 18, 35, 0.55));
}

body[data-shell="business"] .gstat small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

body[data-shell="business"] .gstat b {
  color: var(--text);
  font-size: 22px;
}

body[data-shell="business"] .gstat span {
  float: right;
  margin-top: 7px;
  color: var(--muted);
  font-size: 11px;
}

body[data-shell="business"] .gpage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 12px;
  align-items: start;
}

body[data-shell="business"] .topomap {
  position: relative;
  height: 178px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
  margin-bottom: 12px;
  background:
    radial-gradient(circle at 46% 50%, rgba(47, 139, 255, 0.16), transparent 58%),
    linear-gradient(180deg, rgba(20, 42, 80, 0.5), rgba(8, 18, 35, 0.55));
}

body[data-shell="business"] .topomap .gline {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(120, 180, 255, 0.65), transparent);
  transform-origin: left center;
}

body[data-shell="business"] .gnode {
  appearance: none;
  position: absolute;
  width: 66px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  padding: 0;
  color: #eaf3ff;
  background: rgba(7, 15, 30, 0.86);
  box-shadow: 0 0 15px currentColor;
  font-family: inherit;
  font-size: 10px;
  line-height: 1.35;
  text-align: center;
  transform: translate(-50%, -50%);
}

body[data-shell="business"] button.gnode,
body[data-shell="business"] .gnode[data-group-preview] {
  cursor: pointer;
}

body[data-shell="business"] .gnode b {
  display: block;
  color: inherit;
  font-size: 15px;
}

body[data-shell="business"] .gnode.core {
  width: 78px;
  height: 78px;
  color: #27e0ff;
}

body[data-shell="business"] .gnode.cool {
  color: var(--cool);
}

body[data-shell="business"] .gnode.fan {
  color: var(--fan);
}

body[data-shell="business"] .gnode.off {
  color: #74849e;
}

body[data-shell="business"] .gnode.ai {
  color: #7c5cff;
}

body[data-shell="business"] .group-zone-strip.sample {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

body[data-shell="business"] .group-zone-strip.sample .groom {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
  color: #cfe0ff;
  background: rgba(20, 42, 80, 0.36);
  font-size: 12px;
}

body[data-shell="business"] .group-zone-strip.sample .groom i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--cool);
  box-shadow: 0 0 7px var(--cool);
}

body[data-shell="business"] .group-zone-strip.sample .groom i.idle {
  background: #74849e;
  box-shadow: 0 0 7px rgba(116, 132, 158, 0.58);
}

body[data-shell="business"] .group-zone-strip.sample .groom i.fan {
  background: #22c55e;
  box-shadow: 0 0 7px rgba(34, 197, 94, 0.7);
}

body[data-shell="business"] .group-zone-strip.sample .groom i.heat {
  background: #ff8a3d;
  box-shadow: 0 0 7px rgba(255, 138, 61, 0.68);
}

body[data-shell="business"] .group-zone-strip.sample .groom i.off {
  background: #74849e;
  box-shadow: 0 0 7px rgba(116, 132, 158, 0.58);
}

body[data-shell="business"] .group-zone-strip.sample .groom span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-shell="business"] .group-zone-strip.sample .groom small {
  margin-left: auto;
  color: var(--muted);
}

body[data-shell="business"] .grpgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

body[data-shell="business"] .gcard {
  position: relative;
  min-height: 205px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: linear-gradient(160deg, rgba(20, 42, 80, 0.62), rgba(8, 18, 35, 0.65));
}

body[data-shell="business"] .gcard::after {
  content: "";
  position: absolute;
  top: -42px;
  right: -42px;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: radial-gradient(circle, currentColor, transparent 62%);
  opacity: 0.13;
}

body[data-shell="business"] .gcard.cool {
  color: var(--cool);
}

body[data-shell="business"] .gcard.fan {
  color: var(--fan);
}

body[data-shell="business"] .gcard.off {
  color: #74849e;
}

body[data-shell="business"] .gcard.heat {
  color: var(--heat);
}

body[data-shell="business"] .gcard.selected {
  box-shadow: none;
}

body[data-shell="business"] .ghead {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
}

body[data-shell="business"] .ghead b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}

body[data-shell="business"] .ghead .tag {
  margin-left: auto;
}

body[data-shell="business"] .gmeta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

body[data-shell="business"] .gmeta div {
  min-width: 0;
  border-radius: 8px;
  padding: 8px;
  background: rgba(8, 16, 32, 0.55);
}

body[data-shell="business"] .gmeta small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

body[data-shell="business"] .gmeta b {
  color: #fff;
  font-size: 15px;
}

body[data-shell="business"] .devdots {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 5px;
  margin: 12px 0;
}

body[data-shell="business"] .gdot {
  height: 18px;
  border: 1px solid rgba(130, 170, 230, 0.18);
  border-radius: 5px;
  background: #24324c;
}

body[data-shell="business"] .gdot.cool {
  background: rgba(47, 139, 255, 0.24);
  box-shadow: 0 0 8px rgba(47, 139, 255, 0.45);
}

body[data-shell="business"] .gdot.heat {
  background: rgba(255, 138, 61, 0.24);
  box-shadow: 0 0 8px rgba(255, 138, 61, 0.42);
}

body[data-shell="business"] .gdot.fan {
  background: rgba(34, 197, 94, 0.22);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.38);
}

body[data-shell="business"] .gdot.off {
  background: rgba(90, 110, 145, 0.18);
  opacity: 0.72;
}

body[data-shell="business"] .gactions {
  display: flex;
  gap: 7px;
  margin-top: 10px;
}

body[data-shell="business"] .gactions .btn {
  min-height: 29px;
  padding: 5px 10px;
}

body[data-shell="business"] .gadd {
  min-height: 205px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(120, 170, 240, 0.35);
  border-radius: 12px;
  color: #9fc6ff;
  background: rgba(20, 42, 80, 0.2);
  text-align: center;
}

body[data-shell="business"] .group-queue-panel {
  padding: 14px;
}

body[data-shell="business"] .queue {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr;
  gap: 8px;
}

body[data-shell="business"] .qitem {
  min-width: 0;
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 9px;
  padding: 7px 10px;
  color: #cfe0ff;
  background: rgba(8, 16, 32, 0.58);
  font-size: 12px;
  font-weight: 400;
}

body[data-shell="business"] .qitem small {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
}

body[data-shell="business"] .control-group-preview {
  position: sticky;
  top: 84px;
  display: block;
}

body[data-shell="business"] .ctrlhero {
  border: 1px solid rgba(47, 139, 255, 0.32);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  background:
    radial-gradient(circle at 82% 20%, rgba(47, 139, 255, 0.28), transparent 42%),
    linear-gradient(180deg, rgba(20, 42, 80, 0.6), rgba(8, 16, 32, 0.72));
}

body[data-shell="business"] .ctrlhero small {
  color: var(--muted);
}

body[data-shell="business"] .ctrlhero b {
  color: var(--text);
  font-size: 20px;
}

body[data-shell="business"] .previewflow {
  display: grid;
  grid-template-columns: 1fr 28px 1fr 28px 1fr;
  align-items: center;
  margin: 12px 0;
  color: #cfe0ff;
  font-size: 11px;
  text-align: center;
}

body[data-shell="business"] .previewflow div {
  border-radius: 9px;
  padding: 9px 6px;
  background: rgba(8, 16, 32, 0.58);
}

body[data-shell="business"] .previewflow i {
  color: var(--cyan);
  font-style: normal;
}

body[data-shell="business"] .control-group-preview .control-power-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

body[data-shell="business"] .control-group-preview .control-temp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: auto;
  margin: 8px 0 14px;
}

body[data-shell="business"] .control-group-preview .control-temp-row .btn {
  height: auto;
  min-height: 34px;
  padding: 7px 12px;
  font-size: 12.5px;
}

body[data-shell="business"] .control-group-preview input[type="checkbox"] {
  color-scheme: light;
  accent-color: #0075ff;
}

body[data-shell="business"] .group-event-mini {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 11px;
}

@media (max-width: 767px) {
  .control-group-workspace {
    grid-template-columns: 1fr;
  }

  body[data-shell="business"] .gpage {
    grid-template-columns: 1fr;
  }

  .control-group-preview {
    position: static;
  }

  .group-topology {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .control-group-toolbar,
  .group-zone-strip,
  .group-card-metrics,
  .group-topology {
    grid-template-columns: 1fr;
  }
}

.schedule-page {
  display: grid;
  gap: 18px;
}

.schedule-filter-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(140px, auto) minmax(140px, auto) auto auto auto auto;
  gap: 10px;
  align-items: center;
}

.schedule-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.schedule-stat {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--surface-panel);
  box-shadow: var(--shadow);
}

.schedule-stat small,
.schedule-stat span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.schedule-stat b {
  display: block;
  margin: 6px 0 4px;
  color: var(--text);
  font-size: 24px;
}

.schedule-stepbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.schedule-step {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface-panel-deep);
}

.schedule-step.on {
  border-color: var(--border-blue-strong);
  background: var(--overlay-blue);
}

.schedule-step b,
.schedule-step small {
  display: block;
}

.schedule-step small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.schedule-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: start;
}

.schedule-main,
.schedule-editbox,
.schedule-right-rail {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.schedule-right-rail {
  position: sticky;
  top: 84px;
}

.schedule-stepcard {
  min-width: 0;
}

.schedule-target-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 12px;
}

.schedule-target-tools {
  display: grid;
  align-content: start;
  gap: 8px;
}

.schedule-target-grid {
  max-height: 278px;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-right: 4px;
}

.schedule-target-card {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--surface-panel-deep);
  cursor: pointer;
}

.schedule-target-card:has(input:checked) {
  border-color: var(--accent);
  background: var(--overlay-blue);
}

.schedule-target-card strong,
.schedule-target-card span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-target-card span {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
}

.schedule-form-grid,
.schedule-action-grid,
.schedule-impact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.schedule-weekline {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.schedule-weekline label,
.schedule-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  color: var(--text);
  background: var(--surface-panel-deep);
  font-weight: 800;
}

.schedule-weekline b {
  min-width: 0;
}

.schedule-savebar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.schedule-lock-details {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  color: var(--text);
}

.schedule-lock-details summary {
  cursor: pointer;
  font-weight: 900;
}

.schedule-impact-grid div {
  min-width: 0;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--surface-panel-deep);
}

.schedule-impact-grid small,
.schedule-impact-grid b {
  display: block;
}

.schedule-impact-grid small {
  color: var(--muted);
  font-size: 11px;
}

.schedule-impact-grid b {
  margin-top: 4px;
  color: var(--text);
  overflow-wrap: anywhere;
}

.schedule-runs {
  display: grid;
  gap: 8px;
}

.schedule-run {
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--surface-panel-deep);
}

.schedule-run b,
.schedule-run span,
.schedule-run small {
  display: block;
}

.schedule-run span,
.schedule-run small {
  color: var(--muted);
  font-size: 12px;
}

.schedule-timeline,
.schedule-table-card {
  overflow-x: auto;
}

.schedule-timehead,
.schedule-trow {
  min-width: 680px;
  display: grid;
  grid-template-columns: 180px repeat(6, 1fr);
  gap: 8px;
  align-items: center;
}

.schedule-timehead {
  color: var(--muted);
  font-size: 12px;
}

.schedule-trow {
  margin-top: 10px;
}

.schedule-tname {
  min-width: 0;
  color: var(--text);
  font-weight: 900;
}

.schedule-tname small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-track {
  grid-column: 2 / -1;
  position: relative;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-panel-deep);
}

.schedule-slot {
  position: absolute;
  top: 5px;
  min-width: 86px;
  max-width: calc(100% - 10px);
  height: 22px;
  overflow: hidden;
  border-radius: var(--radius);
  padding: 3px 8px;
  color: var(--text);
  background: var(--overlay-blue-strong);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.schedule-slot.off {
  background: var(--surface-action);
  color: var(--muted);
}

.schedule-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
}

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

.schedule-table th {
  background: var(--surface-nav);
}

.schedule-table td small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.schedule-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 767px) {
  .schedule-workspace,
  .schedule-target-layout {
    grid-template-columns: 1fr;
  }

  .schedule-right-rail {
    position: static;
  }

  .schedule-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .schedule-filter-row,
  .schedule-stats,
  .schedule-stepbar,
  .schedule-target-grid,
  .schedule-form-grid,
  .schedule-action-grid,
  .schedule-impact-grid,
  .schedule-weekline {
    grid-template-columns: 1fr;
  }
}

body[data-shell="business"] .schedule-page {
  display: block;
  font: 13px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif;
}

body[data-shell="business"] .schedule-page .btn {
  display: inline-block;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 12px;
  color: var(--txt);
  background: #12203c;
  font: 400 12.5px Arial, sans-serif;
  line-height: normal;
  text-align: center;
  cursor: pointer;
}

body[data-shell="business"] .schedule-page .btn.pri {
  border: 0;
  background: linear-gradient(135deg, var(--ac), var(--ac2));
}

body[data-shell="business"] .schedule-page .inp {
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--txt);
  background: #0b1626;
  box-sizing: border-box;
  font-size: 12px;
}

body[data-shell="business"] .schedule-page input.inp {
  height: 30px;
}

body[data-shell="business"] .schedule-page select.inp {
  height: 32px;
}

body[data-shell="business"] .schedule-page .tag {
  min-height: 0;
  border: 0;
  border-radius: 20px;
  padding: 2px 8px;
  color: #9fc6ff;
  background: rgba(47, 139, 255, 0.16);
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.5;
}

body[data-shell="business"] .schedule-page .tag.g {
  color: #86efac;
  background: rgba(34, 197, 94, 0.18);
}

body[data-shell="business"] .schedule-page .tag.w {
  color: #ffd089;
  background: rgba(255, 177, 61, 0.18);
}

body[data-shell="business"] .schedule-page .form-message:empty {
  display: none;
}

body[data-shell="business"] .schedule-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 11px;
}

body[data-shell="business"] .schedule-filter-row .inp {
  width: 148px;
}

body[data-shell="business"] .schstats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

body[data-shell="business"] .schstat {
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 13px;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.52), rgba(8, 18, 35, 0.58));
}

body[data-shell="business"] .schstat small {
  display: block;
  color: var(--mut);
  font-size: 10px;
}

body[data-shell="business"] .schstat b {
  color: var(--txt);
  font-size: 22px;
}

body[data-shell="business"] .schstat span {
  float: right;
  margin-top: 7px;
  color: var(--mut);
  font-size: 11px;
}

body[data-shell="business"] .stepbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

body[data-shell="business"] .step {
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 10px 12px;
  color: #cfe0ff;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.46), rgba(8, 18, 35, 0.55));
}

body[data-shell="business"] .step b {
  display: block;
  font-size: 13px;
}

body[data-shell="business"] .step small {
  color: var(--mut);
  font-size: 10px;
}

body[data-shell="business"] .step.on {
  border-color: #2f8bff;
  box-shadow: 0 0 14px rgba(47, 139, 255, 0.16);
}

body[data-shell="business"] .editbox {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 12px;
  align-items: start;
  margin-bottom: 12px;
}

body[data-shell="business"] .editstack {
  display: grid;
  gap: 12px;
}

body[data-shell="business"] .stepcard {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.5), rgba(8, 18, 35, 0.6));
}

body[data-shell="business"] .stepcard .num {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  margin-right: 8px;
  background: linear-gradient(135deg, var(--ac), var(--ac2));
  font-weight: 800;
}

body[data-shell="business"] .treebox {
  max-height: 238px;
  overflow: hidden;
}

body[data-shell="business"] .treeitem {
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: 7px;
  padding: 7px 6px;
  color: #cfe0ff;
  font-size: 12px;
}

body[data-shell="business"] .treeitem.on {
  color: #fff;
  background: rgba(47, 139, 255, 0.14);
}

body[data-shell="business"] .treeitem small {
  margin-left: auto;
  color: var(--mut);
}

body[data-shell="business"] .treeitem i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 7px #22c55e;
}

body[data-shell="business"] .selectedpath {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 9px 0;
}

body[data-shell="business"] .selectedpath span {
  border: 1px solid rgba(70, 140, 235, 0.18);
  border-radius: 20px;
  padding: 4px 9px;
  color: #cfe0ff;
  background: rgba(47, 139, 255, 0.12);
  font-size: 11px;
}

body[data-shell="business"] .impact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}

body[data-shell="business"] .impact div,
body[data-shell="business"] .conflict div,
body[data-shell="business"] .associtem {
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 9px;
  padding: 8px 10px;
  background: rgba(8, 16, 32, 0.58);
}

body[data-shell="business"] .impact small,
body[data-shell="business"] .conflict small,
body[data-shell="business"] .associtem small {
  display: block;
  color: var(--mut);
  font-size: 10px;
}

body[data-shell="business"] .impact b {
  font-size: 16px;
}

body[data-shell="business"] .editform {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body[data-shell="business"] .schedule-page .field {
  display: block;
  border: 1px solid rgba(70, 140, 235, 0.18);
  border-radius: 10px;
  padding: 10px;
  color: var(--txt);
  background: rgba(8, 16, 32, 0.48);
}

body[data-shell="business"] .schedule-page .field label {
  display: block;
  margin-bottom: 7px;
  color: #cfe0ff;
  font-size: 12px;
}

body[data-shell="business"] .schedule-page .field.full {
  grid-column: 1 / -1;
}

body[data-shell="business"] .datebar,
body[data-shell="business"] .timepick {
  display: grid;
  align-items: center;
  gap: 8px;
  color: var(--mut);
  text-align: center;
}

body[data-shell="business"] .datebar {
  grid-template-columns: 1fr 36px 1fr;
}

body[data-shell="business"] .timepick {
  grid-template-columns: 1fr 28px 1fr;
}

body[data-shell="business"] .weekline {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  height: 32.5px;
  overflow: hidden;
  margin-top: 8px;
}

body[data-shell="business"] .weekline label {
  display: block;
  height: 32.5px;
  overflow: hidden;
  line-height: 0;
}

body[data-shell="business"] .weekline b {
  display: block;
  border: 1px solid rgba(70, 140, 235, 0.18);
  border-radius: 8px;
  padding: 7px 0;
  color: var(--mut);
  background: rgba(8, 16, 32, 0.55);
  font-size: 11px;
  line-height: normal;
  text-align: center;
}

body[data-shell="business"] .weekline b.on {
  border-color: #2f8bff;
  color: #fff;
  background: rgba(47, 139, 255, 0.26);
}

body[data-shell="business"] .actionrow {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

body[data-shell="business"] .actionrow .btn {
  min-height: 33px;
  padding: 7px 12px;
}

body[data-shell="business"] .actionrow .on {
  border-color: #2f8bff;
  color: #fff;
  background: rgba(47, 139, 255, 0.24);
}

body[data-shell="business"] .controlpad {
  border: 1px solid rgba(70, 140, 235, 0.2);
  border-radius: 14px;
  padding: 14px;
  margin-top: 10px;
  background: #081121;
}

body[data-shell="business"] .controlpad .tempctl {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

body[data-shell="business"] .controlpad .modegrid,
body[data-shell="business"] .controlpad .fangrid {
  display: grid;
  gap: 8px;
}

body[data-shell="business"] .controlpad .modegrid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 10px;
}

body[data-shell="business"] .controlpad .fangrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body[data-shell="business"] .savebar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 12px;
}

body[data-shell="business"] .savebar .btn {
  min-height: 33px;
}

body[data-shell="business"] .summaryrail {
  display: grid;
  gap: 12px;
}

body[data-shell="business"] .schedule-right-rail {
  position: sticky;
  top: 84px;
}

body[data-shell="business"] .schpanel {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 0;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.52), rgba(8, 18, 35, 0.64));
}

body[data-shell="business"] .taskhero {
  border: 1px solid rgba(47, 139, 255, 0.34);
  border-radius: 12px;
  padding: 13px;
  margin-bottom: 12px;
  background: radial-gradient(circle at 88% 18%, rgba(47, 139, 255, 0.25), transparent 45%), rgba(8, 16, 32, 0.62);
}

body[data-shell="business"] .taskhero small {
  display: block;
  color: var(--mut);
  font-size: 10px;
}

body[data-shell="business"] .taskhero b {
  font-size: 20px;
}

body[data-shell="business"] .taskflow {
  display: grid;
  grid-template-columns: 1fr 24px 1fr 24px 1fr;
  align-items: center;
  margin: 12px 0;
  color: #cfe0ff;
  font-size: 11px;
  text-align: center;
}

body[data-shell="business"] .taskflow div,
body[data-shell="business"] .taskflow span {
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 9px;
  padding: 9px 5px;
  background: rgba(8, 16, 32, 0.58);
}

body[data-shell="business"] .taskflow i {
  color: var(--cyan);
  font-style: normal;
}

body[data-shell="business"] .conflict {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body[data-shell="business"] .conflict b {
  font-size: 14px;
}

body[data-shell="business"] .assoc {
  display: grid;
  gap: 8px;
}

body[data-shell="business"] .associtem {
  color: #cfe0ff;
  font-size: 12px;
}

body[data-shell="business"] .timeline {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 14px;
  margin-bottom: 12px;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.48), rgba(8, 18, 35, 0.58));
}

body[data-shell="business"] .timehead {
  display: grid;
  grid-template-columns: 118px repeat(6, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 8px;
  color: var(--mut);
  font-size: 10px;
}

body[data-shell="business"] .timehead span:not(:first-child) {
  border-left: 1px solid rgba(70, 140, 235, 0.14);
  text-align: center;
}

body[data-shell="business"] .trow {
  display: grid;
  grid-template-columns: 118px 1fr;
  align-items: center;
  min-height: 48px;
  border-top: 1px solid rgba(70, 140, 235, 0.12);
}

body[data-shell="business"] .tname {
  color: #cfe0ff;
  font-size: 12px;
}

body[data-shell="business"] .tname small {
  display: block;
  color: var(--mut);
  font-size: 10px;
}

body[data-shell="business"] .track {
  position: relative;
  height: 34px;
  border-left: 1px solid rgba(70, 140, 235, 0.14);
  background: repeating-linear-gradient(90deg, rgba(70, 140, 235, 0.11) 0 1px, transparent 1px 16.66%);
}

body[data-shell="business"] .slot {
  position: absolute;
  top: 7px;
  height: 20px;
  overflow: hidden;
  border: 1px solid currentColor;
  border-radius: 7px;
  padding: 2px 8px;
  color: #fff;
  background: rgba(7, 15, 30, 0.84);
  box-shadow: 0 0 12px currentColor;
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body[data-shell="business"] .slot.cool {
  color: var(--cool);
}

body[data-shell="business"] .slot.off {
  color: #74849e;
}

body[data-shell="business"] .slot.auto {
  color: var(--green);
}

body[data-shell="business"] .schedule-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  font-size: 12px;
}

body[data-shell="business"] .schedule-table th,
body[data-shell="business"] .schedule-table td {
  border-bottom: 1px solid var(--line);
  text-align: left;
}

body[data-shell="business"] .schedule-table th {
  padding: 8px 7px;
  color: var(--mut);
  background: transparent;
  font-size: 11px;
  font-weight: 600;
}

body[data-shell="business"] .schedule-table td {
  padding: 7.125px 7px;
}

body[data-shell="business"] .schedule-actions {
  display: table-cell;
  white-space: nowrap;
}

body[data-shell="business"] .schedule-actions .btn {
  min-height: 0;
  border: 0;
  padding: 0 3px;
  background: transparent;
  box-shadow: none;
  color: var(--txt);
  font-size: 12px;
  font-weight: 700;
}

body[data-shell="business"] .schedule-console {
  display: block;
  color: #d5deef;
}

body[data-shell="business"] .schedule-console .btn {
  min-width: 0;
  min-height: 40px;
  border: 1px solid rgba(119, 134, 158, 0.35);
  border-radius: 4px;
  padding: 0 16px;
  color: #d5deef;
  background: #253249;
  font-size: 14px;
  font-weight: 600;
}

body[data-shell="business"] .schedule-console .btn.pri {
  border-color: #1d6dff;
  background: #1768ff;
  color: #ffffff;
}

body[data-shell="business"] .schedule-console .btn.ghost {
  background: #1263f1;
}

body[data-shell="business"] .schedule-console .btn.muted {
  background: #2c354a;
}

body[data-shell="business"] .schedule-filter-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 14px;
  margin-bottom: 18px;
}

body[data-shell="business"] .schedule-filter-field {
  display: grid;
  grid-template-columns: auto minmax(180px, 230px);
  gap: 10px;
  align-items: center;
  color: #c5cedf;
  font-size: 14px;
}

body[data-shell="business"] .schedule-filter-field.wide {
  grid-template-columns: auto minmax(260px, 286px);
}

body[data-shell="business"] .schedule-console .inp {
  min-height: 40px;
  border: 1px solid #303c54;
  border-radius: 4px;
  padding: 0 13px;
  color: #dbe5f5;
  background: #081323;
  font-size: 14px;
}

body[data-shell="business"] .schedule-console textarea.inp {
  min-height: 68px;
  padding-top: 12px;
  resize: vertical;
}

body[data-shell="business"] .schedule-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

body[data-shell="business"] .schedule-range em {
  color: #8e9aae;
  font-style: normal;
  text-align: center;
}

body[data-shell="business"] .schedule-command-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

body[data-shell="business"] .schedule-page-message {
  color: #8e9aae;
  font-size: 13px;
}

body[data-shell="business"] .schedule-page-message.error,
body[data-shell="business"] .schedule-modal-foot .error {
  color: #ff5d67;
}

body[data-shell="business"] .schedule-table-card {
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body[data-shell="business"] .competitor-schedule-table {
  width: 100%;
  min-width: 1530px;
  border-collapse: collapse;
  table-layout: fixed;
  color: #cbd5e8;
}

body[data-shell="business"] .competitor-schedule-table th,
body[data-shell="business"] .competitor-schedule-table td {
  border-bottom: 1px solid rgba(56, 68, 90, 0.58);
  padding: 13px 12px;
  overflow-wrap: anywhere;
  text-align: left;
  vertical-align: middle;
}

body[data-shell="business"] .competitor-schedule-table th {
  color: #d1d8e6;
  background: #202b3e;
  font-size: 14px;
  font-weight: 700;
}

body[data-shell="business"] .competitor-schedule-table td {
  background: #081021;
  font-size: 14px;
}

body[data-shell="business"] .competitor-schedule-table tr:nth-child(even) td {
  background: #1c2638;
}

body[data-shell="business"] .competitor-schedule-table th:first-child,
body[data-shell="business"] .competitor-schedule-table td:first-child {
  width: 42px;
}

body[data-shell="business"] .competitor-schedule-table th:nth-child(2),
body[data-shell="business"] .competitor-schedule-table td:nth-child(2) {
  width: 58px;
  text-align: center;
}

body[data-shell="business"] .competitor-schedule-table th:nth-child(14),
body[data-shell="business"] .competitor-schedule-table td:nth-child(14) {
  width: 166px;
}

body[data-shell="business"] .competitor-schedule-table strong {
  display: block;
  color: #e9eef8;
  font-weight: 700;
}

body[data-shell="business"] .competitor-schedule-table small {
  display: block;
  margin-top: 4px;
  color: #8793a8;
  font-size: 12px;
}

body[data-shell="business"] .schedule-actions {
  white-space: nowrap;
}

body[data-shell="business"] .schedule-actions button,
body[data-shell="business"] .schedule-exclude-table button {
  border: 0;
  padding: 0 7px;
  color: #1768ff;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

body[data-shell="business"] .schedule-actions button:last-child {
  color: #ff424f;
}

body[data-shell="business"] .schedule-sync {
  color: #cbd5e8;
}

body[data-shell="business"] .schedule-sync.ok {
  color: #d8e0ee;
}

body[data-shell="business"] .schedule-sync.pending {
  color: #f7c76c;
}

body[data-shell="business"] .schedule-sync.bad {
  color: #ff6370;
}

body[data-shell="business"] .schedule-sync.idle {
  color: #8e9aae;
}

body[data-shell="business"] .schedule-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 190px;
  color: #9ca8ba;
  font-size: 14px;
}

body[data-shell="business"] .schedule-pagination .inp {
  width: 88px;
  min-height: 36px;
}

body[data-shell="business"] .schedule-pagination input.inp {
  width: 58px;
  text-align: center;
}

body[data-shell="business"] .schedule-pagination .btn {
  min-width: 38px;
  min-height: 36px;
  padding: 0 10px;
}

body[data-shell="business"] .schedule-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 5, 14, 0.72);
}

body[data-shell="business"] .schedule-modal-backdrop[hidden] {
  display: none;
}

body[data-shell="business"] .schedule-modal-panel {
  width: min(1106px, calc(100vw - 96px));
  height: min(916px, calc(100vh - 96px));
  border-radius: 18px;
  background: #1d2738;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

body[data-shell="business"] .schedule-task-modal {
  display: flex;
  flex-direction: column;
  height: 100%;
}

body[data-shell="business"] .schedule-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 0 0 auto;
  height: 76px;
  padding: 0 26px;
}

body[data-shell="business"] .schedule-modal-head h2 {
  margin: 0;
  color: #f4f7fb;
  font-size: 23px;
  font-weight: 600;
}

body[data-shell="business"] .schedule-close {
  border: 0;
  color: #b9c3d2;
  background: transparent;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

body[data-shell="business"] .schedule-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 36px;
  padding: 12px 26px 24px;
  overflow-y: auto;
}

body[data-shell="business"] .schedule-target-column {
  min-width: 0;
}

body[data-shell="business"] .schedule-modal-field {
  display: grid;
  gap: 12px;
  color: #f0f3f8;
  font-size: 16px;
}

body[data-shell="business"] .schedule-modal-field.full {
  grid-column: 1 / -1;
}

body[data-shell="business"] .schedule-tree-title,
body[data-shell="business"] .schedule-section-title,
body[data-shell="business"] .schedule-week-panel > span {
  display: block;
  margin: 22px 0 12px;
  color: #f0f3f8;
  font-size: 16px;
  font-weight: 600;
}

body[data-shell="business"] .schedule-section-title small {
  color: #ff353f;
  font-size: 13px;
  font-weight: 600;
}

body[data-shell="business"] .schedule-room-tree {
  display: grid;
  gap: 2px;
  max-height: 650px;
  overflow-y: auto;
  padding-right: 4px;
}

body[data-shell="business"] .schedule-tree-line {
  display: grid;
  grid-template-columns: 18px 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  color: #c7d0de;
  font-size: 15px;
}

body[data-shell="business"] .schedule-tree-line .schedule-tree-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-shell="business"] .schedule-tree-toggle,
body[data-shell="business"] .schedule-tree-caret {
  width: 18px;
  height: 22px;
  display: inline-grid;
  place-items: center;
}

body[data-shell="business"] .schedule-tree-toggle {
  border: 0;
  padding: 0;
  color: #8793a8;
  background: transparent;
  cursor: pointer;
  font: inherit;
  line-height: 1;
}

body[data-shell="business"] .schedule-tree-toggle:hover {
  color: #f0f3f8;
}

body[data-shell="business"] .schedule-tree-line.is-collapsed .schedule-tree-toggle {
  color: #72a7ff;
}

body[data-shell="business"] .schedule-tree-children[hidden],
body[data-shell="business"] .schedule-device-children[hidden] {
  display: none;
}

body[data-shell="business"] .schedule-tree-line small {
  color: #8793a8;
  font-size: 12px;
}

body[data-shell="business"] .schedule-tree-line.on {
  color: #72a7ff;
}

body[data-shell="business"] .schedule-tree-line.floor {
  padding-left: 20px;
}

body[data-shell="business"] .schedule-tree-line.room {
  padding-left: 42px;
}

body[data-shell="business"] .schedule-tree-line.device {
  padding-left: 66px;
  color: #97a4b8;
  font-size: 14px;
}

body[data-shell="business"] .schedule-form-column {
  display: grid;
  align-content: start;
  gap: 26px;
  min-width: 0;
}

body[data-shell="business"] .schedule-field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
}

body[data-shell="business"] .schedule-count-input {
  position: relative;
}

body[data-shell="business"] .schedule-count-input i {
  position: absolute;
  right: 12px;
  bottom: 10px;
  color: #c2cbd8;
  font-style: normal;
  font-size: 14px;
}

body[data-shell="business"] .schedule-count-input .inp {
  width: 100%;
  padding-right: 64px;
}

body[data-shell="business"] .schedule-time-pick {
  display: grid;
  grid-template-columns: 164px 24px 164px;
  gap: 10px;
  align-items: center;
}

body[data-shell="business"] .schedule-time-pick em {
  color: #8d99ac;
  font-style: normal;
  text-align: center;
}

body[data-shell="business"] .schedule-expired {
  color: #ffb02e;
  font-size: 14px;
}

body[data-shell="business"] .schedule-weekline {
  display: grid;
  grid-template-columns: repeat(7, minmax(94px, 1fr));
  gap: 10px;
  max-width: 990px;
}

body[data-shell="business"] .schedule-weekline label {
  display: block;
  min-width: 0;
  height: 46px;
  border: 0;
  padding: 0;
  background: transparent;
}

body[data-shell="business"] .schedule-weekline input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

body[data-shell="business"] .schedule-weekline b {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  border: 1px solid #46536c;
  border-radius: 8px;
  padding: 0 12px;
  color: #aeb8ca;
  background: #182238;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

body[data-shell="business"] .schedule-weekline b.on {
  border-color: #1768ff;
  color: #ffffff;
  background: #1f3761;
  box-shadow: inset 0 0 0 1px rgba(23, 104, 255, 0.28);
}

body[data-shell="business"] .schedule-week-presets {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

body[data-shell="business"] .schedule-week-presets .btn {
  min-width: 118px;
  min-height: 40px;
}

body[data-shell="business"] .schedule-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

body[data-shell="business"] .schedule-action-row .btn {
  min-width: 90px;
  background: #202b3e;
}

body[data-shell="business"] .schedule-action-row .btn i {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #67748a;
  border-radius: 50%;
  margin-right: 9px;
  vertical-align: -2px;
}

body[data-shell="business"] .schedule-action-row .btn.on {
  border-color: #1768ff;
  color: #ffffff;
}

body[data-shell="business"] .schedule-action-row .btn.on i {
  border-color: #1768ff;
  box-shadow: inset 0 0 0 3px #1d2738;
  background: #1768ff;
}

body[data-shell="business"] .schedule-control-pad {
  width: min(430px, 100%);
  margin-top: 30px;
  border-radius: 18px;
  padding: 24px;
  background: #081427;
}

body[data-shell="business"] .schedule-temp-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px auto;
  gap: 16px;
  align-items: center;
}

body[data-shell="business"] .schedule-temp-row .btn {
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  font-size: 26px;
}

body[data-shell="business"] .schedule-temp-row b {
  min-width: 86px;
  color: #ffffff;
  font-size: 46px;
  line-height: 1;
}

body[data-shell="business"] .schedule-temp-row sup {
  font-size: 18px;
}

body[data-shell="business"] .schedule-temp-slider {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: #334158;
}

body[data-shell="business"] .schedule-temp-slider span {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: #1768ff;
}

body[data-shell="business"] .schedule-temp-slider i {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1768ff;
  transform: translate(-50%, -50%);
}

body[data-shell="business"] .schedule-mode-grid,
body[data-shell="business"] .schedule-fan-grid {
  display: grid;
  gap: 8px;
}

body[data-shell="business"] .schedule-mode-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 24px;
}

body[data-shell="business"] .schedule-fan-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 18px;
}

body[data-shell="business"] .schedule-mode-grid button,
body[data-shell="business"] .schedule-fan-grid button {
  min-height: 90px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: #c7d0de;
  background: #506079;
  cursor: pointer;
}

body[data-shell="business"] .schedule-mode-grid button.on,
body[data-shell="business"] .schedule-fan-grid button.on {
  border-color: #1768ff;
  background: #0b5bd8;
}

body[data-shell="business"] .schedule-mode-grid i,
body[data-shell="business"] .schedule-fan-grid i,
body[data-shell="business"] .schedule-mode-grid span,
body[data-shell="business"] .schedule-fan-grid span {
  display: block;
}

body[data-shell="business"] .schedule-mode-grid i,
body[data-shell="business"] .schedule-fan-grid i {
  margin-bottom: 8px;
  color: #e9eef8;
  font-size: 30px;
  font-style: normal;
}

body[data-shell="business"] .schedule-exclude-tools {
  display: grid;
  grid-template-columns: minmax(0, 370px) 70px 112px;
  gap: 12px;
  align-items: center;
}

body[data-shell="business"] .schedule-exclude-table {
  width: 100%;
  margin-top: 28px;
  border-collapse: collapse;
  color: #cbd5e8;
}

body[data-shell="business"] .schedule-exclude-table th,
body[data-shell="business"] .schedule-exclude-table td {
  border-bottom: 1px solid #334058;
  padding: 13px 16px;
  text-align: left;
}

body[data-shell="business"] .schedule-exclude-table th {
  background: #202b3e;
  font-weight: 700;
}

body[data-shell="business"] .schedule-exclude-table td[colspan] {
  color: #c2cbd8;
  text-align: center;
}

body[data-shell="business"] .schedule-modal-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-height: 80px;
  padding: 0 26px 24px;
}

body[data-shell="business"] .schedule-modal-foot span {
  margin-right: auto;
  color: #8e9aae;
}

@media (max-width: 767px) {
  body[data-shell="business"] .schedule-filter-field,
  body[data-shell="business"] .schedule-filter-field.wide,
  body[data-shell="business"] .schedule-modal-body {
    grid-template-columns: 1fr;
  }

  body[data-shell="business"] .schedule-modal-panel {
    width: calc(100vw - 28px);
    height: calc(100vh - 28px);
  }

  body[data-shell="business"] .schedule-weekline,
  body[data-shell="business"] .schedule-mode-grid,
  body[data-shell="business"] .schedule-fan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-shell="business"] .schedule-exclude-tools,
  body[data-shell="business"] .schedule-time-pick {
    grid-template-columns: 1fr;
  }
}

.environment-page {
  display: grid;
  gap: 12px;
}

.environment-tools {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.environment-tools .inp {
  flex: 0 0 178px;
}

.environment-tools [data-env-create] {
  margin-left: auto;
}

body[data-shell="business"] .environment-tools .seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 3px;
  background: #0b1626;
}

body[data-shell="business"] .environment-tools .seg b {
  border-radius: 7px;
  padding: 6px 14px;
  color: var(--mut);
  font-size: 12px;
  font-weight: 700;
}

body[data-shell="business"] .environment-tools .seg b.on {
  color: #fff;
  background: linear-gradient(135deg, var(--ac), var(--ac2));
}

.environment-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.environment-stat {
  position: relative;
  height: 72px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 13px;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.52), rgba(8, 18, 35, 0.58));
}

.environment-stat small,
.environment-stat span {
  display: block;
  color: var(--mut);
  font-size: 10px;
}

.environment-stat b,
.environment-stat strong {
  display: block;
  margin-top: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.environment-stat strong {
  color: #86efac;
}

.environment-stat span {
  position: absolute;
  top: 35px;
  right: 13px;
  max-width: 84px;
  margin-top: 0;
  text-align: right;
}

.environment-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 12px;
  align-items: start;
}

.environment-main,
.environment-rail {
  display: grid;
  gap: 12px;
}

.environment-main {
  position: relative;
}

.environment-rail {
  position: sticky;
  top: 96px;
}

.environment-rail > .environment-hero {
  height: 222px;
}

.environment-rail > .environment-panel:nth-child(2) {
  height: 158px;
}

.environment-rail > .environment-panel:nth-child(3) {
  height: 240px;
}

.environment-rail > .environment-panel:nth-child(4) {
  height: 149px;
}

.environment-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.52), rgba(8, 18, 35, 0.64));
}

.environment-plan {
  position: relative;
  height: 360px;
  overflow: hidden;
  border: 1px solid var(--border-muted-faint);
  border-radius: 12px;
  background: radial-gradient(circle at 42% 52%, rgba(47, 139, 255, 0.18), transparent 48%), rgba(5, 10, 20, 0.64);
}

.environment-plan::before {
  content: "";
  position: absolute;
  inset: 28px;
  border: 8px solid var(--border-muted-faint);
  box-shadow:
    180px 0 0 -4px rgba(170, 205, 255, 0.08),
    0 112px 0 -4px rgba(170, 205, 255, 0.08),
    300px 116px 0 -4px rgba(170, 205, 255, 0.08);
}

.environment-route {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 1;
  width: var(--w);
  height: 1px;
  transform: rotate(var(--r));
  transform-origin: left center;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 54%, transparent), transparent);
}

.environment-sensor-dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 3;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: var(--warn);
  box-shadow: 0 0 0 6px rgba(255, 177, 61, 0.14), 0 0 16px var(--warn);
}

.environment-sensor-dot.on {
  background: #19e6a0;
  box-shadow: 0 0 0 6px rgba(25, 230, 160, 0.12), 0 0 16px #19e6a0;
}

.environment-sensor-dot.off {
  background: #74849e;
  box-shadow: 0 0 0 6px rgba(120, 132, 158, 0.14);
}

.environment-zone {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  min-width: 136px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  color: #cfe0ff;
  background: rgba(8, 16, 32, 0.66);
}

.environment-zone b,
.environment-zone small {
  display: block;
}

.environment-zone small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.environment-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  color: var(--mut);
  font-size: 11px;
}

.environment-legend .r {
  margin-left: auto;
  color: #86efac;
}

.environment-legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border-radius: 999px;
  background: var(--weak);
}

.environment-legend i.on {
  background: var(--green);
}

.environment-legend i.wait {
  background: var(--warn);
}

.environment-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.environment-cards div {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: rgba(8, 16, 32, 0.52);
}

.environment-cards small,
.environment-cards b {
  display: block;
}

.environment-cards small {
  color: var(--muted);
  font-size: 10px;
}

.environment-cards b {
  margin-top: 5px;
  color: var(--text);
  font-size: 18px;
}

.environment-action-form {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 120px;
  height: 36px;
  overflow: hidden;
  opacity: 0.01;
}

.environment-target-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.environment-target-card {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--surface-panel-deep);
}

.environment-target-card input {
  grid-row: 1 / 3;
}

.environment-target-card strong,
.environment-target-card span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.environment-target-card span {
  color: var(--muted);
  font-size: 12px;
}

.environment-form {
  display: grid;
  gap: 12px;
}

.environment-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.environment-form-grid .full {
  grid-column: 1 / -1;
}

.environment-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  background: var(--surface-panel-deep);
}

.environment-savebar,
.environment-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.environment-lock-details {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  color: var(--text);
}

.environment-lock-details summary {
  cursor: pointer;
  font-weight: 900;
}

.environment-hero {
  border-color: rgba(25, 230, 160, 0.34);
  background: radial-gradient(circle at 88% 18%, rgba(25, 230, 160, 0.2), transparent 45%), rgba(8, 16, 32, 0.62);
}

.environment-hero small,
.environment-hero b {
  display: block;
}

.environment-hero > b {
  margin: 4px 0 10px;
  color: #86efac;
  font-size: 22px;
}

.environment-hero-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.environment-hero-grid div {
  border-radius: 8px;
  padding: 8px;
  background: rgba(8, 16, 32, 0.58);
}

.environment-hero-grid b {
  margin-top: 4px;
  color: #86efac;
  font-size: 22px;
  line-height: 1.05;
}

body[data-route="environment"] .environment-hero .environment-hero-grid div {
  border: 0;
  border-radius: 8px;
  padding: 8px;
  background: rgba(8, 16, 32, 0.58);
}

body[data-route="environment"] .environment-hero .environment-hero-grid b {
  color: #86efac;
  font-size: 22px;
  line-height: 1.05;
}

.environment-alert {
  border: 1px solid var(--border-muted-faint);
  border-left: 3px solid var(--cyan);
  border-radius: 9px;
  padding: 8px 9px;
  background: rgba(8, 16, 32, 0.58);
  color: #cfe0ff;
  font-size: 12px;
}

.environment-alert.warn {
  border-left-color: #ffb13d;
}

.environment-savebar .form-message {
  color: var(--muted);
  font-size: 12px;
}

.environment-savebar .form-message.error {
  color: var(--danger);
}

.environment-bars,
.environment-alerts {
  display: grid;
  gap: 8px;
}

.environment-bar {
  display: grid;
  grid-template-columns: 74px 1fr 52px;
  gap: 8px;
  align-items: center;
  color: #cfe0ff;
  font-size: 12px;
}

.environment-bar .rail {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-action);
}

.environment-bar .rail i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.environment-bar:first-child .rail i {
  background: #ff9940;
}

.environment-alert small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.environment-table-card {
  max-width: 100%;
  height: 267px;
  margin-bottom: 11px;
  overflow: hidden;
}

.sensortable-body {
  height: 204px;
  overflow: hidden;
}

.environment-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}

.environment-table th,
.environment-table td {
  border-bottom: 1px solid var(--line);
  padding: 6px 6px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.environment-table th:nth-child(1),
.environment-table td:nth-child(1) {
  width: 76px;
}

.environment-table th:nth-child(2),
.environment-table td:nth-child(2) {
  width: 76px;
}

.environment-table th:nth-child(3),
.environment-table td:nth-child(3),
.environment-table th:nth-child(4),
.environment-table td:nth-child(4) {
  width: 58px;
}

.environment-table th:nth-child(5),
.environment-table td:nth-child(5) {
  width: 54px;
}

.environment-table th:nth-child(6),
.environment-table td:nth-child(6),
.environment-table th:nth-child(7),
.environment-table td:nth-child(7) {
  width: 46px;
}

.environment-table th:nth-child(8),
.environment-table td:nth-child(8) {
  width: 74px;
}

.environment-table th:nth-child(9),
.environment-table td:nth-child(9) {
  width: 104px;
}

.environment-table th:nth-child(10),
.environment-table td:nth-child(10) {
  width: 134px;
}

.environment-table .row-action,
.environment-link-action {
  min-height: 26px;
  height: 26px;
  margin: 0 2px 0 0;
  padding: 0 6px;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

.environment-link-action {
  display: inline;
  width: 100%;
  height: auto;
  min-height: 0;
  border: 0;
  padding: 0;
  color: #d9e8ff;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.environment-table td strong,
.environment-table td small {
  display: block;
}

.environment-table td small {
  max-width: 112px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-route="environment"] .environment-cards div {
  border-color: rgba(70, 140, 235, 0.16);
  color: #cfe0ff;
  font-size: 12px;
}

body[data-route="environment"] .environment-cards b {
  margin-top: 4px;
  color: #fff;
}

body[data-route="environment"] .tag {
  min-height: 0;
  border: 0;
  border-radius: 20px;
  padding: 2px 8px;
  color: #9fc6ff;
  background: rgba(47, 139, 255, 0.16);
  display: inline;
  font-size: 10.5px;
  font-weight: 400;
  line-height: 15.75px;
}

body[data-route="environment"] .tag.g {
  color: #86efac;
  background: rgba(34, 197, 94, 0.18);
}

body[data-route="environment"] .tag.w {
  color: #ffd089;
  background: rgba(255, 177, 61, 0.18);
}

body[data-route="environment"] .environment-table {
  table-layout: auto;
}

body[data-route="environment"] .environment-table th,
body[data-route="environment"] .environment-table td {
  width: auto;
  padding: 8px 7px;
}

body[data-route="environment"] .environment-table td:nth-child(3),
body[data-route="environment"] .environment-table td:nth-child(4),
body[data-route="environment"] .environment-table td:nth-child(5) {
  font-variant-numeric: tabular-nums;
}

body[data-route="environment"] .environment-table th {
  color: var(--mut);
  font-size: 11px;
  font-weight: 600;
}

body[data-route="environment"] .environment-link-action {
  all: unset;
  display: inline;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

body[data-route="environment"] .environment-hero {
  padding: 13px;
}

body[data-route="environment"] .environment-stat small {
  display: block;
  color: var(--mut);
  font-size: 10px;
}

body[data-route="environment"] .environment-stat b {
  display: inline;
  margin-top: 0;
  overflow: visible;
  color: #fff;
  font-size: 22px;
  text-overflow: clip;
}

body[data-route="environment"] .environment-stat strong {
  display: inline;
  color: #86efac;
  font-size: 22px;
}

body[data-route="environment"] .environment-stat span {
  position: static;
  float: right;
  max-width: none;
  margin-top: 7px;
  color: var(--mut);
  font-size: 11px;
  text-align: left;
}

body[data-route="environment"] .environment-hero small {
  display: block;
  color: var(--mut);
  font-size: 10px;
}

body[data-route="environment"] .environment-hero > b {
  display: inline;
  margin: 4px 0 10px;
  color: #86efac;
  font-size: 22px;
}

body[data-route="environment"] .environment-table-card {
  height: 270.5px;
  margin-bottom: 12px;
}

body[data-route="environment"] .sensortable-body {
  height: auto;
  overflow: visible;
}

body[data-route="environment"] .environment-flow span {
  display: inline;
  color: inherit;
  font-size: inherit;
}

body[data-route="environment"] .environment-flow div {
  border-color: rgba(70, 140, 235, 0.16);
  background: rgba(8, 16, 32, 0.54);
}

body[data-route="environment"] .environment-flow b {
  margin-bottom: 3px;
  color: #fff;
  font-size: 12px;
}

body[data-route="environment"] .environment-flow i {
  color: var(--cyan);
}

body[data-route="environment"] .environment-flow {
  margin: 12px 0;
}

body[data-route="environment"] .environment-bar .rail {
  border-radius: 8px;
  background: rgba(70, 140, 235, 0.18);
}

body[data-route="environment"] .environment-bar .rail i {
  border-radius: 8px;
  background: linear-gradient(90deg, #19e6a0, #27e0ff);
}

body[data-route="environment"] .environment-bar:first-child .rail i {
  background: linear-gradient(90deg, #ffb13d, #ff8a3d);
}

body[data-route="environment"] .environment-alert {
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-left: 3px solid var(--cyan);
  border-radius: 9px;
  padding: 8px 9px;
  background: rgba(8, 16, 32, 0.52);
  color: #cfe0ff;
  font-size: 12px;
}

body[data-route="environment"] .environment-alert.warn {
  border-left-color: #ffb13d;
}

.environment-runs {
  display: grid;
  gap: 8px;
}

.environment-run {
  border: 1px solid var(--border-muted-faint);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 9px 10px;
  background: var(--surface-panel-deep);
}

.environment-run b,
.environment-run span,
.environment-run small {
  display: block;
}

.environment-run span,
.environment-run small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.environment-flow {
  display: grid;
  grid-template-columns: 1fr 24px 1fr 24px 1fr 24px 1fr;
  align-items: center;
  margin: 12px 0 0;
  text-align: center;
  color: #cfe0ff;
  font-size: 11px;
}

.environment-flow div {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 4px;
  background: var(--surface-panel-deep);
}

.environment-flow b,
.environment-flow span {
  display: block;
}

.environment-flow span,
.environment-flow i {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}

@media (max-width: 767px) {
  .environment-body {
    grid-template-columns: 1fr;
  }

  .environment-rail {
    position: static;
  }
}

@media (max-width: 767px) {
  .environment-stats,
  .environment-form-grid,
  .environment-target-grid,
  .environment-flow {
    grid-template-columns: 1fr;
  }

  .environment-flow i {
    display: none;
  }
}

.faults-page {
  display: grid;
  gap: 14px;
}

.faults-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.faults-tools .inp {
  flex: 1 1 190px;
}

.faults-tools [data-fault-search] {
  flex-basis: 300px;
}

.faults-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.fault-stat {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 14px;
  background: var(--panel);
}

.fault-stat small,
.fault-stat span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.fault-stat b {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--text);
  font-size: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fault-stat span {
  margin-top: 4px;
}

.faults-workspace {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr) 380px;
  gap: 14px;
  align-items: start;
}

.faults-main,
.faults-detail {
  display: grid;
  gap: 14px;
}

.fault-queue-list {
  display: grid;
  gap: 8px;
}

.fault-queue-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 6px 10px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 12px;
  color: var(--text);
  background: var(--surface-panel-deep);
  text-align: left;
  cursor: pointer;
}

.fault-queue-item.active,
.fault-queue-item:hover {
  border-color: var(--accent);
  background: var(--surface-panel-strong);
}

.fault-queue-item strong,
.fault-queue-item small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fault-queue-item small {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
}

.fault-dot {
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--accent);
}

.fault-dot.critical,
.fault-pin.critical,
.fault-detail-hero.critical {
  background: var(--danger);
}

.fault-dot.warning,
.fault-pin.warning,
.fault-detail-hero.warning {
  background: var(--warning);
}

.faults-map,
.faults-trend,
.faults-table-card {
  min-width: 0;
}

.fault-map-canvas {
  position: relative;
  min-height: 180px;
  overflow: hidden;
  border: 1px solid var(--border-muted-faint);
  border-radius: var(--radius);
  background: var(--combo-chart-background);
}

.fault-map-plan {
  position: absolute;
  inset: 10px 16px;
  width: calc(100% - 32px);
  height: calc(100% - 20px);
}

.fault-map-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.fault-zone {
  position: absolute;
  left: var(--x);
  top: var(--y);
  min-width: 132px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--surface-panel-strong);
}

.fault-zone b,
.fault-zone small {
  display: block;
}

.fault-zone small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.fault-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--bg);
  background: var(--accent);
  font-weight: 800;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.fault-bars {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  min-height: 96px;
}

.fault-bars div {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.fault-bars i {
  display: block;
  width: 100%;
  max-width: 30px;
  height: var(--h);
  border-radius: 999px 999px 4px 4px;
  background: var(--weak);
}

.fault-bars i.fault-trend-critical {
  background: var(--danger);
  box-shadow: 0 0 18px color-mix(in srgb, var(--danger) 30%, transparent);
}

.fault-bars i.fault-trend-warning {
  background: var(--warning);
  box-shadow: 0 0 18px color-mix(in srgb, var(--warning) 26%, transparent);
}

.fault-bars small,
.fault-bars b {
  color: var(--muted);
  font-size: 11px;
}

.faults-table-card {
  overflow-x: auto;
}

.faults-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
}

.visual-fault-table {
  min-width: 960px;
}

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

.faults-table th {
  background: var(--surface-nav);
}

.faults-table td strong,
.faults-table td small {
  display: block;
}

.faults-table td small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.fault-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fault-detail-hero {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  color: var(--bg);
  background: var(--accent);
}

.fault-detail-hero small {
  opacity: 0.85;
}

.fault-detail-hero b {
  font-size: 20px;
}

.fault-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.visual-fault-detail {
  max-height: 390px;
  overflow: auto;
}

.fault-detail-grid div,
.fault-json,
.fault-detail-facts,
.fault-steps div {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--surface-panel-deep);
}

.fault-detail-grid small,
.fault-json small,
.fault-detail-facts small,
.fault-steps small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.fault-detail-grid b {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.fault-json {
  margin-top: 12px;
}

.fault-detail-facts {
  margin-top: 12px;
}

.fault-detail-facts > div {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.fault-detail-facts span {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.fault-detail-facts em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}

.fault-detail-facts b {
  overflow-wrap: anywhere;
}

.fault-json pre {
  max-height: 190px;
  overflow: auto;
  margin: 8px 0 0;
  color: var(--text);
  white-space: pre-wrap;
}

.detail-actions {
  margin-top: 12px;
}

.fault-steps {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.fault-steps div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.fault-steps i {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: var(--bg);
  background: var(--accent);
  font-style: normal;
  font-weight: 800;
}


body[data-route="faults"] .faults-page {
  display: grid;
  gap: 8px;
  height: 1038px;
  margin-top: 0;
}

body[data-route="faults"] .filters.faults-tools {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

body[data-route="faults"] .filters.faults-tools .inp {
  flex: 0 0 147px;
  min-width: 0;
  height: 35px;
  min-height: 35px;
  padding: 7px 10px;
  background: #0b1626;
  font: 12px Arial, sans-serif;
}

body[data-route="faults"] .filters.faults-tools select.inp {
  flex-basis: 84px;
  appearance: none;
  padding: 7px 12px;
  background: #12203c;
  font-size: 12.5px;
}

body[data-route="faults"] .filters.faults-tools .btn {
  flex: 0 0 auto;
  display: block;
  height: 35px;
  min-height: 35px;
  font-family: Arial, sans-serif;
  font-weight: 400;
}

body[data-route="faults"] .faultstats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

body[data-route="faults"] .faultstat {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 13px;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.52), rgba(8, 18, 35, 0.58));
}

body[data-route="faults"] .faultstat small {
  display: block;
  color: var(--mut);
  font-size: 10px;
}

body[data-route="faults"] .faultstat b {
  overflow: hidden;
  color: var(--text);
  font-size: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-route="faults"] .faultstat span {
  float: right;
  margin-top: 7px;
  color: var(--mut);
  font-size: 11px;
}

body[data-route="faults"] .tag {
  display: block;
  min-height: auto;
  border: 0;
  border-radius: 20px;
  padding: 2px 8px;
  color: #9fc6ff;
  background: rgba(47, 139, 255, 0.16);
  box-shadow: none;
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.5;
  white-space: normal;
}

body[data-route="faults"] .tag.b {
  color: #ff9aa4;
  background: rgba(255, 90, 106, 0.18);
}

body[data-route="faults"] .tag.w {
  color: #ffd480;
  background: rgba(255, 177, 61, 0.18);
}

body[data-route="faults"] .tag.g {
  color: #86efac;
  background: rgba(34, 197, 94, 0.16);
}

body[data-route="faults"] .faultgrid {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr) 360px;
  gap: 12px;
  align-items: start;
  margin-top: -8px;
}

body[data-route="faults"] .faults-main {
  display: block;
  min-width: 0;
}

body[data-route="faults"] .faults-detail {
  display: block;
}

body[data-route="faults"] .faultqueue {
  display: grid;
  gap: 8px;
  min-height: 340px;
  overflow: hidden;
}

body[data-route="faults"] .faults-queue {
  overflow: visible;
}

body[data-route="faults"] .fitem {
  min-width: 0;
  width: 100%;
  display: block;
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 10px;
  padding: 10px;
  color: #cfe0ff;
  background: rgba(8, 16, 32, 0.52);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

body[data-route="faults"] .fitem.on,
body[data-route="faults"] .fitem:hover {
  border-color: #2f8bff;
  background: rgba(47, 139, 255, 0.16);
  box-shadow: 0 0 14px rgba(47, 139, 255, 0.12);
}

body[data-route="faults"] .fitem .topline {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  inline-size: 100%;
  min-width: 0;
  width: 100%;
}

body[data-route="faults"] .fitem .topline b {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: #cfe0ff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-route="faults"] .fitem .topline .tag {
  flex: 0 0 auto;
  margin-left: 0 !important;
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-route="faults"] .fitem small {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--mut);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-route="faults"] .sev {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bad);
  box-shadow: 0 0 8px var(--bad);
}

body[data-route="faults"] .sev.w {
  background: var(--warn);
  box-shadow: 0 0 8px var(--warn);
}

body[data-route="faults"] .sev.g {
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
}

body[data-route="faults"] .faultmap {
  position: relative;
  height: 206px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 12px;
  background:
    radial-gradient(circle at 24% 42%, rgba(255, 90, 106, 0.2), transparent 20%),
    radial-gradient(circle at 70% 55%, rgba(255, 177, 61, 0.18), transparent 24%),
    linear-gradient(180deg, rgba(20, 42, 80, 0.5), rgba(8, 18, 35, 0.6));
}

body[data-route="faults"] .faultmap svg {
  position: absolute;
  inset: 20px;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  opacity: 0.55;
}

body[data-route="faults"] .fault-zone {
  position: absolute;
  min-width: 0;
  border: 1px solid rgba(70, 140, 235, 0.18);
  border-radius: 9px;
  padding: 7px 9px;
  color: #cfe0ff;
  background: rgba(8, 16, 32, 0.52);
  transform: translate(-50%, -50%);
}

body[data-route="faults"] .fault-zone b,
body[data-route="faults"] .fault-zone small {
  display: block;
  max-width: 82px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-route="faults"] .fault-zone small {
  color: var(--mut);
  font-size: 10px;
}

body[data-route="faults"] .faultpin {
  position: absolute;
  min-height: 0;
  border: 1px solid currentColor;
  border-radius: 20px;
  padding: 4px 9px;
  color: var(--bad);
  background: rgba(8, 16, 32, 0.88);
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 0 14px currentColor;
  transform: translate(-50%, -50%);
}

body[data-route="faults"] .faultpin.w {
  color: var(--warn);
}

body[data-route="faults"] .faultpin.g {
  color: var(--green);
}

body[data-route="faults"] .faulttrend {
  height: 118px;
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 12px;
  background: rgba(8, 16, 32, 0.5);
}

body[data-route="faults"] .faulttrend .bars {
  display: flex;
  align-items: end;
  gap: 8px;
  height: 70px;
}

body[data-route="faults"] .faulttrend .bars i {
  flex: 1;
  min-height: 12px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, #ff5a6a, rgba(255, 90, 106, 0.12));
}

body[data-route="faults"] .faulttrend .bars i:nth-child(2n),
body[data-route="faults"] .faulttrend .bars i.fault-trend-warning {
  background: linear-gradient(180deg, #ffb13d, rgba(255, 177, 61, 0.12));
}

body[data-route="faults"] .faulttrend .bars i.fault-trend-empty {
  background: linear-gradient(180deg, rgba(126, 152, 198, 0.78), rgba(126, 152, 198, 0.12));
}

body[data-route="faults"] .faulttrend-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: var(--mut);
  font-size: 10px;
}

body[data-route="faults"] .faults-table-card {
  height: 446px;
  overflow: hidden;
}

body[data-route="faults"] .faults-table {
  width: 466px;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 12px;
}

body[data-route="faults"] .faults-table th:nth-child(1),
body[data-route="faults"] .faults-table td:nth-child(1) {
  width: 25px;
}

body[data-route="faults"] .faults-table th:nth-child(2),
body[data-route="faults"] .faults-table th:nth-child(3),
body[data-route="faults"] .faults-table td:nth-child(2),
body[data-route="faults"] .faults-table td:nth-child(3) {
  width: 26px;
}

body[data-route="faults"] .faults-table th:nth-child(4),
body[data-route="faults"] .faults-table td:nth-child(4) {
  width: 36px;
}

body[data-route="faults"] .faults-table th:nth-child(5),
body[data-route="faults"] .faults-table td:nth-child(5),
body[data-route="faults"] .faults-table th:nth-child(7),
body[data-route="faults"] .faults-table td:nth-child(7) {
  width: 26px;
}

body[data-route="faults"] .faults-table th:nth-child(6),
body[data-route="faults"] .faults-table td:nth-child(6) {
  width: 98px;
}

body[data-route="faults"] .faults-table th:nth-child(8),
body[data-route="faults"] .faults-table td:nth-child(8) {
  width: 77px;
}

body[data-route="faults"] .faults-table th:nth-child(9),
body[data-route="faults"] .faults-table td:nth-child(9),
body[data-route="faults"] .faults-table th:nth-child(10),
body[data-route="faults"] .faults-table td:nth-child(10) {
  width: 50px;
}

body[data-route="faults"] .faults-table th:nth-child(11),
body[data-route="faults"] .faults-table td:nth-child(11) {
  width: 26px;
}

body[data-route="faults"] .faults-table th,
body[data-route="faults"] .faults-table td {
  padding: 8px 7px;
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

body[data-route="faults"] .faults-table th {
  color: var(--mut);
  font-size: 11px;
  font-weight: 600;
  background: transparent;
}

body[data-route="faults"] .faults-table thead tr {
  height: 82px;
}

body[data-route="faults"] .faults-table tbody tr {
  height: 107px;
}

body[data-route="faults"] .faults-table tbody tr:nth-child(2) {
  height: 89px;
}

body[data-route="faults"] .faults-table .tag {
  display: inline-block;
  white-space: nowrap;
}

body[data-route="faults"] .fault-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body[data-route="faults"] .fault-actions .btn {
  padding: 5px 8px;
  font-size: 11px;
}

body[data-route="faults"] .faults-table .fault-actions {
  display: table-cell;
  white-space: normal;
}

body[data-route="faults"] .faults-table .fault-actions .btn,
body[data-route="faults"] .faults-table .fault-actions .btn.pri {
  display: inline;
  min-height: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
  font: inherit;
  line-height: inherit;
}

body[data-route="faults"] .detail-actions {
  gap: 8px;
  margin-top: 14px;
}

body[data-route="faults"] .taskhero.fault-detail-hero {
  display: block;
  border: 1px solid rgba(255, 90, 106, 0.36);
  border-radius: 12px;
  padding: 10px 13px;
  margin-bottom: 12px;
  color: #eaf3ff;
  background: radial-gradient(circle at 88% 18%, rgba(47, 139, 255, 0.25), transparent 45%), rgba(8, 16, 32, 0.62);
}

body[data-route="faults"] .taskhero.fault-detail-hero small {
  display: block;
  color: var(--mut);
  font-size: 10px;
}

body[data-route="faults"] .taskhero.fault-detail-hero b {
  display: block;
  margin: 4px 0;
  color: #ff9aa4;
  font-size: 22px;
}

body[data-route="faults"] .faultdetail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

body[data-route="faults"] .faultdetail div,
body[data-route="faults"] .fault-detail-facts,
body[data-route="faults"] .fault-json {
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 9px;
  padding: 9px 10px;
  background: rgba(8, 16, 32, 0.52);
}

body[data-route="faults"] .faultdetail small,
body[data-route="faults"] .fault-detail-facts small,
body[data-route="faults"] .faultsteps small {
  display: block;
  color: var(--mut);
  font-size: 10px;
}

body[data-route="faults"] .faultdetail b {
  display: inline;
  min-width: 0;
  margin-top: 0;
  color: #eaf3ff;
  font-size: 12px;
  overflow-wrap: normal;
  word-break: normal;
}

body[data-route="faults"] .fault-detail-facts {
  margin-top: 12px;
}

body[data-route="faults"] .faultsteps {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

body[data-route="faults"] .faultstep {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  border: 0;
  padding: 0;
  color: #cfe0ff;
  background: transparent;
  font-size: 12px;
}

body[data-route="faults"] .faultstep i {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #9fc6ff;
  background: rgba(47, 139, 255, 0.18);
  font-style: normal;
  font-size: 10px;
}

@media (max-width: 767px) {
  .faults-workspace {
    grid-template-columns: 1fr;
  }

  .faults-queue,
  .faults-detail {
    position: static;
  }

  .faults-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .faults-tools,
  .faults-stats,
  .fault-detail-grid,
  .fault-bars {
    grid-template-columns: 1fr;
  }

  .faults-tools {
    display: grid;
  }

  .fault-map-canvas {
    min-height: 420px;
  }
}

.platform-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.platform-wide {
  grid-column: 1 / -1;
}

.platform-health {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.platform-health div {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
}

.platform-health span,
.platform-task-list small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.platform-health strong {
  display: block;
  margin-top: 4px;
  font-size: 20px;
}

.platform-compact-list,
.platform-task-list,
.platform-trend {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.platform-compact-list li,
.platform-task-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.platform-task-list a,
.platform-table a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-right: 6px;
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.platform-trend li {
  display: grid;
  grid-template-columns: 64px minmax(80px, 1fr) 52px;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.platform-trend i {
  display: block;
  height: 8px;
  width: var(--value);
  min-width: 4px;
  border-radius: 999px;
  background: var(--accent);
}

.platform-trend strong {
  color: var(--text);
  text-align: right;
}

.platform-form {
  display: grid;
  gap: 12px;
}

.platform-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.platform-form input,
.platform-form select {
  min-height: 38px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  color: var(--text);
  background: var(--bg-strong);
}

.platform-form-row,
.platform-checks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.platform-checks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.platform-checks label {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  color: var(--text);
  background: var(--bg-strong);
}

.platform-checks input {
  width: auto;
  min-height: auto;
}

.platform-form button {
  min-height: 40px;
  border: 0;
  border-radius: var(--radius);
  color: var(--bg-strong);
  background: var(--accent);
  font-weight: 800;
  cursor: pointer;
}

.platform-card header span.error {
  color: var(--danger);
}

.platform-table-card {
  overflow-x: auto;
}

.platform-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  margin-top: 14px;
}

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

.platform-table td strong,
.platform-table td small {
  display: block;
}

.platform-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.platform-mini-stat,
.ledger-kpi,
.ledger-gap {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--surface-panel-deep);
}

.platform-mini-stat span,
.ledger-kpi span,
.ledger-kpi small,
.ledger-gap small,
.ledger-note,
.ledger-message {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.platform-mini-stat strong,
.ledger-kpi strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 20px;
}

.confirmed-platform-ops,
.ops-search-grid,
.ops-action-grid,
.ops-evidence-grid,
.confirmed-platform-tenants,
.tenant-toolbar,
.tenant-profile-guards,
.tenant-profile-actions,
.tenant-redline-grid,
.quota-cell,
.impersonation-banner,
.confirmed-platform-plans,
.plan-grid,
.tabs,
.plans-create-form,
.plans-checks,
.confirmed-platform-onboarding,
.onboard-summary,
.billing-mode-grid,
.branch-grid,
.branch-steps,
.stepper,
.form-grid,
.guard-grid,
.device-grid,
.ready-list,
.evidence-grid {
  display: grid;
  gap: 14px;
}

.ops-kpi-grid {
  margin-bottom: 18px;
}

.confirmed-platform-ops .ops-kpi-grid {
  margin-bottom: 4px;
}

.confirmed-platform-ops .ops-dependency-panel {
  background: #ffffff;
  border-color: #dce7f5;
}

.ops-dependency-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ops-dependency-card {
  min-width: 0;
  border: 1px solid #dce7f5;
  border-top: 3px solid #1e63e9;
  border-radius: 10px;
  padding: 14px;
  color: #0f1f38;
  background: #f7f9fb;
}

.ops-dependency-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ops-dependency-card span,
.ops-dependency-card small,
.ops-dependency-card p {
  color: #64768c;
}

.ops-dependency-card strong {
  display: block;
  margin: 10px 0 5px;
  color: #0f1f38;
  font-size: 18px;
}

.ops-dependency-card p {
  margin: 0;
  line-height: 1.5;
}

.ops-dependency-card.is-healthy { border-top-color: #21956f; }
.ops-dependency-card.is-unhealthy { border-top-color: #cf3f4f; background: #fff7f8; }
.ops-dependency-card.is-stale,
.ops-dependency-card.is-unknown { border-top-color: #d89025; background: #fffaf1; }
.ops-dependency-card.is-disabled { border-top-color: #91a1b5; }

@media (max-width: 960px) {
  .ops-dependency-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .ops-dependency-grid { grid-template-columns: 1fr; }
}

.confirmed-platform-ops .ops-command-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body[data-shell="platform"] .confirmed-platform-ops .ops-command-grid .guard-card {
  min-height: 86px;
  box-sizing: border-box;
  transform: translateY(-1px);
}

body[data-shell="platform"] .confirmed-platform-ops .guard-card.ok {
  border-color: rgba(22, 215, 160, 0.35);
  background: rgba(9, 42, 48, 0.38);
}

body[data-shell="platform"] .confirmed-platform-ops .guard-card.warn {
  border-color: rgba(255, 189, 69, 0.34);
  background: rgba(66, 45, 12, 0.28);
}

body[data-shell="platform"] .confirmed-platform-ops .ops-command-grid .guard-card label {
  display: block;
  margin: 0 0 7px;
}

body[data-shell="platform"] .confirmed-platform-ops .ops-command-grid .guard-card strong {
  display: inline;
  margin: 0;
}

body[data-shell="platform"] .confirmed-platform-ops .ops-command-grid .row-meta {
  color: #5e738f;
  margin-top: 8px;
  text-align: left;
}

body[data-shell="platform"] .confirmed-platform-ops > .grid > .panel:nth-child(2) {
  transform: translateY(4px);
}

body[data-shell="platform"] .confirmed-platform-ops .title-bar {
  height: 20px;
  min-height: 20px;
  border-radius: 3px;
  box-shadow: 0 0 14px rgba(40, 213, 245, 0.45);
}

.confirmed-platform-ops .ops-gateway-table th,
.confirmed-platform-ops .ops-gateway-table td {
  white-space: nowrap;
}

.confirmed-platform-ops .ops-gateway-table {
  font-size: 13px;
}

.confirmed-platform-ops .ops-gateway-table th {
  height: 40px;
  color: #9db1cc;
  font-size: 13px;
  font-weight: 750;
  padding: 0 10px;
}

.confirmed-platform-ops .ops-gateway-table td {
  height: 46px;
  border-bottom-color: rgba(78, 132, 202, 0.13);
  color: #dbe8f8;
  font-size: 13px;
  padding: 0 10px;
}

.confirmed-platform-ops .ops-gateway-table .btn {
  height: 38px;
  min-height: 38px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 650;
}

body[data-shell="platform"] .confirmed-platform-ops > .grid > .panel:nth-child(2) > .panel-title .btn {
  height: 38px;
  min-height: 38px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 650;
}

.ops-full-button {
  width: 100%;
  margin-top: 12px;
}

.ops-search-grid {
  grid-template-columns: 1fr;
}

.ops-evidence-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ops-action-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ops-safety-panel {
  border-color: var(--warning);
}

.tenant-toolbar {
  grid-template-columns: minmax(220px, 1fr) max-content max-content;
  align-items: center;
  gap: 10px;
}

.confirmed-platform-tenants .tenant-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.confirmed-platform-tenants .tenant-toolbar .input {
  flex: 0 0 auto;
}

.confirmed-platform-tenants .tenant-toolbar .input,
.confirmed-platform-tenants .tenant-toolbar .btn {
  height: 38px;
  min-height: 38px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 650;
}

body[data-shell="platform"] .confirmed-platform-tenants .tenant-toolbar .input {
  border-color: rgba(84, 137, 210, 0.34);
  color: #aebfd4;
  background: rgba(13, 30, 55, 0.86);
  gap: 8px;
  justify-content: flex-start;
  white-space: nowrap;
}

body[data-shell="platform"] .confirmed-platform-tenants .tenant-toolbar .btn {
  color: #e8f3ff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  gap: 8px;
  white-space: nowrap;
}

body[data-shell="platform"] .confirmed-platform-tenants .tenant-toolbar .btn.ghost {
  border-color: rgba(84, 137, 210, 0.34);
  color: #c5d6eb;
  background: rgba(27, 39, 62, 0.88);
}

body[data-shell="platform"] .confirmed-platform-tenants .tenant-toolbar .btn.green {
  border-color: rgba(22, 215, 160, 0.5);
  color: #e8f3ff;
  background: linear-gradient(180deg, #19c997, #147ec3);
}

.input {
  min-height: 34px;
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 12px;
  color: var(--muted);
  background: var(--bg-strong);
  font-size: 12px;
}

.tenant-ledger-table .row-actions {
  justify-content: flex-start;
}

.quota-cell {
  grid-template-columns: 96px max-content;
  align-items: center;
  gap: 8px;
}

.tenant-lifecycle-todo {
  margin-top: 14px;
}

.tenant-card {
  min-width: 0;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--surface-panel-deep);
}

.tenant-card.active {
  border-color: var(--accent);
  background: var(--surface-panel-muted);
}

.tenant-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.tenant-head h3 {
  margin: 0;
}

.tenant-meta {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.tenant-profile-guards,
.tenant-redline-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

.tenant-profile-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

.tenant-redline-panel {
  border-color: var(--warning);
}

.impersonation-banner {
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--overlay-red);
}

.impersonation-banner div {
  min-width: 0;
  color: var(--text);
  font-weight: 900;
}

.impersonation-banner small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

body[data-shell="business"] .global-impersonation-banner #impersonationEndButton {
  border-color: #9f1d20;
  color: #fff;
  background: #9f1d20;
}

.note.red {
  border-color: var(--danger);
  background: var(--overlay-red);
}

.plan-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.plans-empty {
  grid-column: 1 / -1;
}

.tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tab {
  min-height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 0 10px;
  color: var(--muted);
  background: var(--surface-panel-deep);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.tab.active {
  border-color: var(--accent);
  color: var(--text);
  background: var(--surface-panel-muted);
}

.tenant-tabs {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.confirmed-platform-tenants {
  gap: 18px;
}

.confirmed-platform-tenants .tenant-tabs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.confirmed-platform-tenants .tenant-tabs .tab {
  height: 36px;
  display: inline-flex;
  align-items: center;
  min-width: 82px;
  border-color: rgba(84, 137, 210, 0.34);
  padding: 0 14px;
  color: #c9d9ec;
  background: rgba(7, 16, 30, 0.62);
  font-size: 13px;
  font-weight: 800;
}

.confirmed-platform-tenants .tenant-tabs .tab.active {
  border-color: rgba(22, 215, 160, 0.54);
  color: #c9fff0;
  background: linear-gradient(90deg, rgba(22, 215, 160, 0.28), rgba(46, 134, 255, 0.14));
}

.confirmed-platform-tenants .tenant-ledger-table {
  width: 100%;
  font-size: 13px;
}

.confirmed-platform-tenants .tenant-ledger-table th:nth-child(6),
.confirmed-platform-tenants .tenant-ledger-table td:nth-child(6) {
  width: 155px;
  max-width: 155px;
}

.confirmed-platform-tenants .tenant-ledger-table th {
  height: 40px;
  color: #9db1cc;
  font-size: 13px;
  font-weight: 750;
  border-bottom: 1px solid var(--line);
  padding: 0 10px;
  white-space: nowrap;
}

.confirmed-platform-tenants .tenant-ledger-table th,
.confirmed-platform-tenants .tenant-ledger-table td {
  padding: 0 10px;
  vertical-align: middle;
  white-space: nowrap;
}

.confirmed-platform-tenants .tenant-ledger-table td {
  height: 46px;
  border-bottom: 1px solid rgba(78, 132, 202, 0.13);
  color: #dbe8f8;
}

.confirmed-platform-tenants .tenant-ledger-table tbody {
  transform: translateY(-1px);
}

.confirmed-platform-tenants .muted-inline {
  color: var(--muted);
  font-size: 12px;
}

.confirmed-platform-tenants .quota {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: visible;
  border-radius: 0;
  background: transparent;
}

.confirmed-platform-tenants .qbar {
  width: 92px;
  flex: 0 0 92px;
  height: 8px;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(58, 88, 132, 0.34);
}

.confirmed-platform-tenants .qbar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.confirmed-platform-tenants .qbar.warn span {
  background: linear-gradient(90deg, var(--amber), #ff7a45);
}

.confirmed-platform-tenants .tenant-ledger-table .row-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.confirmed-platform-tenants .tenant-ledger-table .row-action {
  min-width: 58px;
  gap: 8px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

.confirmed-platform-tenants > .grid {
  gap: 18px;
}

.confirmed-platform-plans > .grid {
  gap: 18px;
}

.confirmed-platform-plans {
  display: block;
}

.confirmed-platform-plans .onboard-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 16px;
}

.confirmed-platform-plans .panel-title h2 {
  line-height: normal;
}

.confirmed-platform-plans .summary-cell {
  height: 96px;
  min-height: 74px;
  box-sizing: border-box;
  border: 1px solid rgba(84, 137, 210, 0.2);
  padding: 12px;
  background: rgba(7, 16, 30, 0.56);
}

.confirmed-platform-plans .summary-cell label {
  display: block;
  margin-bottom: 7px;
}

.confirmed-platform-plans .summary-cell strong {
  display: block;
  margin: 0;
  font-size: 20px;
  line-height: 1.1;
}

.confirmed-platform-plans .summary-cell span {
  display: block;
  margin-top: 7px;
  color: var(--weak);
  font-size: 12px;
}

.confirmed-platform-plans .tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.confirmed-platform-plans .tab {
  height: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(84, 137, 210, 0.34);
  border-radius: 8px;
  padding: 0 14px;
  color: #c9d9ec;
  background: rgba(7, 16, 30, 0.62);
  font-size: 13px;
  font-weight: 800;
}

.confirmed-platform-plans .tab.active {
  border-color: rgba(22, 215, 160, 0.54);
  color: #c9fff0;
  background: linear-gradient(90deg, rgba(22, 215, 160, 0.28), rgba(46, 134, 255, 0.14));
}

.confirmed-platform-plans .plan-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.plan {
  min-width: 0;
  display: grid;
  align-content: space-between;
  gap: 12px;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--surface-panel-deep);
}

.confirmed-platform-plans .plan {
  position: relative;
  min-height: 310px;
  display: block;
  border-color: rgba(84, 137, 210, 0.22);
  border-radius: 8px;
  padding: 18px;
  background: rgba(7, 16, 30, 0.62);
}

.plan.hot {
  border-color: var(--accent);
  background: var(--surface-panel-muted);
}

.confirmed-platform-plans .plan.hot {
  border-color: rgba(22, 215, 160, 0.54);
  background: rgba(7, 16, 30, 0.62);
  box-shadow: 0 0 28px rgba(22, 215, 160, 0.1);
}

.plan.selfhosted {
  border-color: var(--warning);
}

.plan h3 {
  margin: 0;
  font-size: 20px;
}

.confirmed-platform-plans .plan h3 {
  font-size: 18px;
}

.plan-tag {
  width: max-content;
}

.confirmed-platform-plans .plan-tag {
  position: absolute;
  right: 14px;
  top: 14px;
}

.plan-price {
  min-height: 36px;
  color: var(--text);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.2;
}

.confirmed-platform-plans .plan-price {
  min-height: auto;
  margin-top: 10px;
  font-size: 34px;
  line-height: normal;
}

.confirmed-platform-plans .plan-price small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.plan ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.confirmed-platform-plans .plan ul {
  display: block;
  list-style: none;
  margin: 16px 0;
  padding: 0;
  color: #c7d7e9;
  font-size: 13px;
  line-height: normal;
}

.confirmed-platform-plans .plan li {
  border-bottom: 1px dashed rgba(84, 137, 210, 0.18);
  padding: 8px 0;
  line-height: normal;
}

.plan .btn {
  width: 100%;
}

.confirmed-platform-plans .plan .btn {
  height: 38px;
  min-height: 38px;
  gap: 8px;
  justify-content: normal;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 650;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

body[data-shell="platform"] .confirmed-platform-plans .plan .btn.primary {
  border-color: rgba(46, 134, 255, 0.72);
  color: #e8f3ff;
  background: linear-gradient(180deg, #2f8bff, #1c5fe9);
}

body[data-shell="platform"] .confirmed-platform-plans .plan .btn.ghost {
  border-color: rgba(84, 137, 210, 0.34);
  color: #c5d6eb;
  background: rgba(27, 39, 62, 0.88);
}

.confirmed-platform-plans .panel-title > .btn {
  height: 38px;
  min-height: 38px;
  gap: 8px;
  justify-content: normal;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 650;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

body[data-shell="platform"] .confirmed-platform-plans .panel-title > .btn.primary {
  border-color: rgba(46, 134, 255, 0.72);
  color: #e8f3ff;
  background: linear-gradient(180deg, #2f8bff, #1c5fe9);
}

.plans-create-form {
  grid-template-columns: repeat(5, minmax(0, 1fr)) max-content minmax(120px, 0.8fr);
  align-items: end;
  border: 1px dashed var(--border-muted-dashed-strong);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface-panel-muted);
}

.plans-create-form label,
.plans-checks label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.plans-create-form input,
.plans-create-form select {
  min-height: 36px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  color: var(--text);
  background: var(--bg-strong);
}

.plans-checks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: end;
  gap: 8px;
}

.plans-checks label {
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
}

.plans-create-form [data-platform-message] {
  min-height: 36px;
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}

.plans-create-form [data-platform-message].error {
  color: var(--danger);
}

.plans-config-table .empty-state {
  margin: 8px 0;
}

.commercial-redline {
  border-color: var(--warning);
}

.onboarding-wizard-panel {
  margin-bottom: 18px;
}

.onboard-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.confirmed-platform-onboarding .onboard-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 16px;
}

.confirmed-platform-onboarding .summary-cell {
  min-height: 96px;
  height: 96px;
  box-sizing: border-box;
}

.confirmed-platform-onboarding .onboarding-wizard-panel > .panel-title {
  margin-bottom: 13px;
}

.confirmed-platform-onboarding .title-bar {
  height: 20px;
  min-height: 20px;
  border-radius: 3px;
  box-shadow: 0 0 14px rgba(40, 213, 245, 0.45);
}

.confirmed-platform-onboarding .summary-cell,
.confirmed-platform-onboarding .mode-card,
.confirmed-platform-onboarding .branch-card,
.confirmed-platform-onboarding .branch-step,
.confirmed-platform-onboarding .guard-card,
.confirmed-platform-onboarding .device-card,
.confirmed-platform-onboarding .ready-item,
.confirmed-platform-onboarding .evidence-card {
  border-color: rgba(84, 137, 210, 0.2);
  border-radius: 8px;
  background: rgba(7, 16, 30, 0.56);
}

.confirmed-platform-onboarding .summary-cell label,
.confirmed-platform-onboarding .guard-card label,
.confirmed-platform-onboarding .device-card label,
.confirmed-platform-onboarding .evidence-card label {
  display: block;
  margin-bottom: 7px;
}

.confirmed-platform-onboarding .summary-cell strong {
  margin: 0;
  font-size: 20px;
  line-height: 1.1;
}

.confirmed-platform-onboarding .summary-cell span {
  display: block;
  margin-top: 7px;
  color: #5e738f;
}

.confirmed-platform-onboarding .billing-mode-grid {
  gap: 12px;
  margin: 14px 0 16px;
}

.confirmed-platform-onboarding .mode-card {
  min-height: 118px;
  height: 118px;
  box-sizing: border-box;
  border-color: rgba(84, 137, 210, 0.24);
  padding: 14px;
  background: rgba(7, 16, 30, 0.58);
}

.confirmed-platform-onboarding .mode-card h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.confirmed-platform-onboarding .mode-card p {
  margin: 0;
  line-height: 18px;
}

.confirmed-platform-onboarding .mode-card strong {
  font-size: 15px;
}

.confirmed-platform-onboarding .mode-card.active {
  border-color: rgba(22, 215, 160, 0.54);
  background: linear-gradient(145deg, rgba(22, 215, 160, 0.2), rgba(7, 16, 30, 0.72));
}

.confirmed-platform-onboarding .mode-card.warn {
  border-color: rgba(255, 189, 69, 0.34);
  background: rgba(66, 45, 12, 0.24);
}

.confirmed-platform-onboarding .branch-grid,
.confirmed-platform-onboarding .branch-steps {
  grid-template-columns: 1fr;
}

.confirmed-platform-onboarding .branch-grid {
  gap: 12px;
  margin: 0 0 16px;
}

.confirmed-platform-onboarding .branch-card {
  padding: 14px;
}

.confirmed-platform-onboarding .branch-card.active {
  border-color: rgba(22, 215, 160, 0.48);
  background: linear-gradient(145deg, rgba(22, 215, 160, 0.16), rgba(7, 16, 30, 0.7));
}

.confirmed-platform-onboarding .branch-card.warn {
  border-color: rgba(255, 189, 69, 0.36);
  background: rgba(66, 45, 12, 0.24);
}

.confirmed-platform-onboarding .branch-card h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.confirmed-platform-onboarding .branch-card p {
  margin: 0;
  line-height: 18.6px;
}

.confirmed-platform-onboarding .branch-steps {
  gap: 10px;
}

.confirmed-platform-onboarding .branch-step {
  min-height: 78px;
  height: 78px;
  box-sizing: border-box;
  border-style: dashed;
  border-color: rgba(84, 137, 210, 0.25);
  padding: 10px;
  background: rgba(7, 16, 30, 0.52);
}

.confirmed-platform-onboarding .branch-step strong {
  margin: 0 0 6px;
  font-size: 13px;
}

.confirmed-platform-onboarding .branch-step span {
  line-height: 17.4px;
}

.summary-cell,
.mode-card,
.branch-card,
.branch-step,
.fake-input,
.fake-area,
.guard-card,
.gateway-node,
.device-card,
.ready-item,
.evidence-card {
  min-width: 0;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface-panel-deep);
}

.summary-cell label,
.summary-cell span,
.mode-card p,
.branch-card p,
.branch-step span,
.field label,
.guard-card label,
.device-card label,
.device-card span,
.ready-item span,
.evidence-card label,
.evidence-card p,
.onboarding-action-form label,
.onboarding-create-form label {
  color: var(--muted);
  font-size: 12px;
}

.summary-cell strong,
.device-card strong,
.guard-card strong,
.evidence-card strong {
  display: block;
  margin: 5px 0;
  color: var(--text);
  font-size: 18px;
}

.billing-mode-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mode-card h3,
.branch-card h3,
.gateway-node h3,
.step h3 {
  margin: 0;
}

.mode-card p,
.branch-card p,
.evidence-card p,
.gateway-node p {
  margin: 8px 0 0;
  line-height: 1.6;
}

.mode-card strong {
  display: block;
  margin-top: 10px;
  color: var(--text);
}

.mode-card.active,
.branch-card.active,
.evidence-card.active {
  border-color: var(--accent);
  background: var(--surface-panel-muted);
}

.mode-card.warn,
.branch-card.warn,
.evidence-card.warn,
.guard-card.warn {
  border-color: var(--warning);
}

.branch-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.branch-steps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

.branch-step strong {
  display: block;
  color: var(--text);
}

.stepper {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.step {
  min-width: 0;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface-panel-deep);
}

.step.done,
.evidence-card.done,
.guard-card.ok {
  border-color: var(--accent);
}

.step.active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--border-accent);
}

.step.warn {
  border-color: var(--warning);
}

.step-num {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  margin-bottom: 8px;
  color: var(--bg);
  background: var(--accent);
  font-weight: 900;
}

.step p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.onboarding-create-form,
.onboarding-action-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) max-content;
  gap: 10px;
  align-items: end;
  border: 1px dashed var(--border-muted-dashed-strong);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface-panel-muted);
}

.onboarding-action-form {
  grid-template-columns: repeat(2, minmax(0, 1fr)) max-content minmax(110px, 0.8fr);
  margin-top: 14px;
}

.step-inline-form {
  margin-top: 16px;
  border: 1px solid var(--accent, #4caf82);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--surface-panel-muted);
}

.step-inline-form h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, #4caf82);
  margin: 0 0 12px;
}

.step-inline-form form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) max-content;
  gap: 10px;
  align-items: end;
}

.step-inline-form label {
  display: grid;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
}

.step-inline-form input {
  min-height: 34px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 10px;
  color: var(--text);
  background: var(--bg-strong);
  font-size: 13px;
}

.step-inline-form button[type="submit"] {
  min-height: 34px;
  padding: 0 16px;
  background: var(--accent, #4caf82);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.onboarding-action-form label,
.onboarding-create-form label {
  display: grid;
  gap: 6px;
}

.onboarding-action-form input,
.onboarding-action-form select,
.onboarding-create-form input,
.onboarding-create-form select {
  min-height: 36px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  color: var(--text);
  background: var(--bg-strong);
}

.onboarding-action-form button,
.onboarding-create-form button {
  min-height: 36px;
  border: 1px solid var(--border-blue-strong);
  border-radius: var(--radius);
  padding: 0 12px;
  color: var(--text-button);
  background: var(--overlay-blue);
  font-weight: 800;
}

.onboarding-action-form [data-platform-message],
.onboarding-create-form [data-platform-message] {
  min-height: 36px;
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}

.onboarding-action-form [data-platform-message].error,
.onboarding-create-form [data-platform-message].error {
  color: var(--danger);
}

.form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.fake-input,
.fake-area {
  color: var(--text);
}

.fake-area {
  min-height: 74px;
  line-height: 1.6;
  white-space: pre-line;
}

.guard-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
}

.guard-card .row-meta {
  margin-top: 8px;
  text-align: left;
}

.note {
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  margin-top: 14px;
  padding: 12px;
  color: var(--text);
  background: var(--surface-panel-deep);
  line-height: 1.6;
}

.note.warn {
  border-color: var(--warning);
}

.gateway-map {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
  gap: 14px;
  margin-top: 14px;
}

.gateway-node {
  border-color: var(--accent);
}

.device-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.device-card strong {
  color: var(--accent);
  font-size: 22px;
}

.ready-list {
  margin-top: 14px;
}

.ready-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) max-content;
  gap: 10px;
  align-items: center;
}

.ready-item strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evidence-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ledger-page,
.ledger-grid,
.ledger-gap-list,
.ledger-form {
  display: grid;
  gap: 14px;
}

.ledger-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.ledger-head,
.ledger-card header,
.ledger-actions,
.ledger-form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ledger-head {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  background: var(--surface-panel);
  box-shadow: var(--shadow);
}

.ledger-head span,
.ledger-card header span {
  color: var(--muted);
  font-size: 12px;
}

.ledger-head h3,
.ledger-card h4 {
  margin: 0;
}

.ledger-head p,
.ledger-note {
  margin: 6px 0 0;
  line-height: 1.6;
}

.ledger-card {
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--surface-panel);
  box-shadow: var(--shadow);
}

.ledger-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.ledger-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.ledger-form input,
.ledger-form select {
  min-height: 38px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  color: var(--text);
  background: var(--bg-strong);
}

.ledger-form-row {
  align-items: stretch;
}

.ledger-form-row label {
  flex: 1;
}

.ledger-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  margin-top: 10px;
}

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

.ledger-table td strong,
.ledger-table td small {
  display: block;
}

.ledger-table td small {
  color: var(--muted);
  font-size: 11px;
}

.ledger-message {
  min-height: 18px;
}

.ledger-message.error {
  color: var(--danger);
}

.customers-page,
.accttree,
.accttable,
.acctdetail,
.acctunit-list,
.acctscope,
.acctform,
.permgrid,
.auditline {
  display: grid;
  gap: 12px;
}

.customer-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) max-content max-content max-content;
  gap: 10px;
  align-items: center;
}

.customer-add {
  margin-left: auto;
}

.acctstats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.acctstat,
.scopebox,
.acctfield,
.permtile {
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  background: var(--surface-panel);
}

.acctstat,
.scopebox {
  display: grid;
  gap: 4px;
  padding: 14px;
}

.acctstat small,
.acctstat span,
.scopebox small,
.acctfield label,
.acctrow small,
.permtile small,
.accthero small,
.audititem small,
.acctnote,
.acct-actions {
  color: var(--muted);
}

.acctstat b {
  color: var(--text);
  font-size: 24px;
}

body[data-route="customers"] .customers-page {
  gap: 10px;
}

body[data-route="customers"] .panel {
  padding: 14px 16px;
}

body[data-route="customers"] .panel-title {
  min-height: 0;
  margin-bottom: 10px;
}

body[data-route="customers"] .panel-title h2 {
  font-size: 17px;
}

body[data-route="customers"] .acctstats {
  gap: 10px;
}

body[data-route="customers"] .acctstat {
  min-height: 72px;
  padding: 10px 14px;
}

body[data-route="customers"] .acctstat b {
  font-size: 22px;
  line-height: 1;
}

body[data-route="customers"] .acctstat small,
body[data-route="customers"] .acctstat span,
body[data-route="customers"] .scopebox small,
body[data-route="customers"] .acctfield label,
body[data-route="customers"] .acctrow small,
body[data-route="customers"] .audititem small {
  font-size: 12px;
  line-height: 1.35;
}

.acctgrid {
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(520px, 1.36fr) minmax(340px, 0.95fr);
  gap: 12px;
  align-items: start;
}

body[data-route="customers"] .acctgrid {
  grid-template-columns: 260px minmax(520px, 1fr) 373px;
  gap: 12px;
}

.accttable {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

.acctunit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) max-content;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--surface-panel-deep);
}

body[data-route="customers"] .accttree,
body[data-route="customers"] .accttable,
body[data-route="customers"] .acctdetail,
body[data-route="customers"] .acctunit-list,
body[data-route="customers"] .acctscope,
body[data-route="customers"] .acctform,
body[data-route="customers"] .permgrid,
body[data-route="customers"] .auditline {
  gap: 10px;
}

body[data-route="customers"] .acctunit {
  min-height: 44px;
  padding: 7px 10px;
}

.acctunit.on,
.acctrow.on {
  border-color: var(--accent);
  background: var(--overlay-blue);
}

.acctunit i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

.acctunit span,
.acctunit span small,
.acctrow b,
.acctrow small {
  display: block;
}

.acct-subtitle {
  margin-top: 6px;
}

.acctscope,
.acctform {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.acctnote {
  margin: 0;
  line-height: 1.7;
}

body[data-route="customers"] .acctnote {
  line-height: 1.55;
}

.acctrow {
  display: grid;
  grid-template-columns: 34px minmax(110px, 1.15fr) minmax(72px, 0.65fr) minmax(110px, 0.9fr) minmax(105px, 0.85fr) minmax(100px, 0.85fr) minmax(64px, 0.55fr);
  gap: 8px;
  align-items: center;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--surface-panel-deep);
}

body[data-route="customers"] .acctrow {
  grid-template-columns: 34px minmax(105px, 1.05fr) minmax(68px, 0.62fr) minmax(92px, 0.78fr) minmax(92px, 0.78fr) minmax(86px, 0.78fr) minmax(54px, 0.48fr);
  gap: 6px;
  min-height: 56px;
  padding: 8px 10px;
}

body[data-route="customers"] .acctrow.head {
  min-height: 34px;
  padding-block: 8px;
}

.acctrow > * {
  min-width: 0;
}

.acctrow b,
.acctrow small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.acctrow.head {
  color: var(--muted);
  background: var(--surface-muted);
  font-size: 12px;
  font-weight: 800;
}

.avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--text);
  background: var(--overlay-teal);
  font-weight: 900;
}

.perms,
.roomchips,
.savebar,
.acct-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.perms {
  gap: 4px;
}

.perm,
.roomchips span {
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--muted);
  background: var(--surface-muted);
  font-size: 12px;
  font-weight: 800;
}

body[data-route="customers"] .perm,
body[data-route="customers"] .roomchips span {
  padding: 3px 7px;
  font-size: 11px;
}

.perm.g {
  color: var(--badge-green-text);
  background: var(--overlay-teal);
}

.perm.pending {
  color: var(--badge-amber-text);
  background: var(--badge-amber-bg);
}

.acct-overflow {
  display: grid;
  gap: 3px;
  border: 1px dashed var(--border-muted);
  border-radius: var(--radius);
  padding: 10px;
  color: var(--badge-amber-text);
  background: var(--badge-amber-bg);
}

.acct-overflow small {
  color: var(--muted);
}

.acct-actions {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  justify-content: space-between;
  margin-top: 10px;
}

.acct-actions > span {
  min-width: 0;
}

.acct-actions > span:first-child {
  flex: 1 1 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct-actions > span:last-child {
  flex: 0 1 260px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.accthero {
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--surface-panel-deep);
}

body[data-route="customers"] .accthero {
  padding: 12px;
}

.accthero b {
  display: block;
  margin: 4px 0;
  font-size: 18px;
}

.acctfield {
  display: grid;
  gap: 5px;
  padding: 10px;
}

body[data-route="customers"] .acctfield {
  padding: 9px 10px;
}

.acctfield.full {
  grid-column: 1 / -1;
}

.permgrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.permtile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 8px;
  align-items: center;
  padding: 10px;
}

body[data-route="customers"] .permtile {
  min-height: 54px;
  padding: 9px 10px;
}

.permtile i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--muted);
  background: var(--surface-muted);
  font-style: normal;
  font-weight: 900;
}

.permtile.on {
  border-color: var(--border-accent);
  background: var(--overlay-accent);
}

.permtile.on i {
  color: var(--text);
  background: var(--accent);
}

.permtile.pending {
  border-style: dashed;
  color: var(--muted);
  background: var(--surface-muted);
}

.permtile.pending i {
  color: var(--badge-amber-text);
  background: var(--badge-amber-bg);
}

.savebar {
  justify-content: flex-end;
}

body[data-route="customers"] .savebar {
  padding-top: 12px;
}

body[data-route="customers"] .savebar .btn {
  display: block;
  min-height: 0;
  padding: 7px 12px;
  font: 12.5px Arial, sans-serif;
  font-weight: 400;
  line-height: normal;
}

.audititem {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--surface-panel-deep);
}

body[data-route="customers"] .audititem {
  padding: 9px 10px;
}

.audititem i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--text);
  background: var(--overlay-blue-strong);
  font-style: normal;
  font-weight: 900;
}

body[data-route="customers"] .customers-page {
  display: block;
  margin-bottom: 0;
}

body[data-route="customers"] .customer-filters {
  display: grid;
  grid-template-columns: 147px 147px 147px max-content max-content minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

body[data-route="customers"] .customer-filters .inp {
  height: 35px;
  min-height: 35px;
  padding: 7px 10px;
  background: #0b1626;
  font: 12px Arial, sans-serif;
}

body[data-route="customers"] .customer-filters .btn {
  display: block;
  height: 35px;
  min-height: 35px;
  padding: 7px 12px;
  font-family: Arial, sans-serif;
  font-weight: 400;
}

body[data-route="customers"] .customer-add {
  justify-self: end;
  margin-left: 0;
}

body[data-route="customers"] .acctstats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

body[data-route="customers"] .acctstat {
  display: block;
  min-height: 72px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 13px;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.52), rgba(8, 18, 35, 0.58));
}

body[data-route="customers"] .acctstat small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

body[data-route="customers"] .acctstat b {
  color: var(--text);
  font-size: 22px;
  line-height: normal;
}

body[data-route="customers"] .acctstat span {
  float: right;
  margin-top: 7px;
  color: var(--muted);
  font-size: 11px;
}

body[data-route="customers"] .acctgrid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 372px;
  gap: 12px;
  align-items: start;
}

body[data-route="customers"] .panel {
  padding: 13px 15px;
}

body[data-route="customers"] .accttree {
  display: block;
  height: 650px;
  overflow: hidden;
}

body[data-route="customers"] .acctunit {
  display: flex;
  min-height: 0;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  border: 1px solid rgba(70, 140, 235, 0.14);
  border-radius: 9px;
  padding: 9px 10px;
  color: #cfe0ff;
  background: rgba(8, 16, 32, 0.42);
  font-size: 12px;
}

body[data-route="customers"] .acctunit.on {
  border-color: rgba(47, 139, 255, 0.45);
  background: rgba(47, 139, 255, 0.14);
  box-shadow: 0 0 12px rgba(47, 139, 255, 0.12);
}

body[data-route="customers"] .acctunit i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
}

body[data-route="customers"] .acctunit > small {
  margin-left: auto;
  color: var(--muted);
}

body[data-route="customers"] .acctunit span small {
  display: inline;
  color: var(--muted);
  font-size: 10px;
}

body[data-route="customers"] .acctunit span {
  display: inline;
}

body[data-route="customers"] .acct-subtitle {
  margin-top: 16px;
}

body[data-route="customers"] .acctscope {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

body[data-route="customers"] .scopebox {
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 9px;
  padding: 9px;
  color: #cfe0ff;
  background: rgba(8, 16, 32, 0.52);
}

body[data-route="customers"] .scopebox small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

body[data-route="customers"] .scopebox b {
  font-size: 15px;
}

body[data-route="customers"] .acctnote {
  margin-top: 12px;
  color: #9ab0d1;
  font-size: 11px;
  line-height: 1.7;
}

body[data-route="customers"] .accttable {
  display: block;
  min-height: 493px;
  overflow: hidden;
}

body[data-route="customers"] .acctrow {
  display: grid;
  grid-template-columns: 34px 1.2fr 0.9fr 0.9fr 1fr 1fr 78px;
  gap: 10px;
  min-height: 69px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid rgba(70, 140, 235, 0.14);
  border-radius: 0;
  padding: 10px 8px;
  color: #cfe0ff;
  background: transparent;
  font-size: 12px;
}

body[data-route="customers"] .acctrow.head {
  min-height: 36px;
  height: 36px;
  padding: 10px 8px;
  border-radius: 0;
  color: var(--muted);
  background: transparent;
  font-size: 10px;
  font-weight: 600;
}

body[data-route="customers"] .acctrow.on {
  min-height: 70px;
  margin: 0 0 6px;
  border: 1px solid rgba(47, 139, 255, 0.22);
  border-radius: 8px;
  background: rgba(47, 139, 255, 0.1);
}

body[data-route="customers"] .acctrow > * {
  min-width: auto;
}

body[data-route="customers"] .acctrow b {
  display: inline;
}

body[data-route="customers"] .acctrow small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

body[data-route="customers"] .avatar {
  display: flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, var(--ac), var(--ac2));
  font-weight: 800;
}

body[data-route="customers"] .perms {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

body[data-route="customers"] .perm {
  border-radius: 16px;
  padding: 2px 6px;
  color: #9fc6ff;
  background: rgba(47, 139, 255, 0.16);
  font-size: 10px;
  font-weight: 400;
}

body[data-route="customers"] .perm.g {
  color: #86efac;
  background: rgba(34, 197, 94, 0.18);
}

body[data-route="customers"] .acct-actions {
  margin-top: 12px;
  color: var(--muted);
  font-size: 11px;
}

body[data-route="customers"] .tag {
  display: inline;
  min-height: auto;
  border: 0;
  border-radius: 20px;
  padding: 2px 8px;
  color: #9fc6ff;
  background: rgba(47, 139, 255, 0.16);
  box-shadow: none;
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.5;
  white-space: normal;
}

body[data-route="customers"] .tag.g {
  color: #86efac;
  background: rgba(34, 197, 94, 0.18);
}

body[data-route="customers"] .tag.w {
  color: #ffd089;
  background: rgba(255, 177, 61, 0.18);
}

body[data-route="customers"] .tag.b {
  color: #ff9aa4;
  background: rgba(255, 90, 106, 0.18);
}

body[data-route="customers"] .acctdetail {
  display: grid;
  gap: 12px;
  min-height: 877px;
}

body[data-route="customers"] .accthero {
  border: 1px solid rgba(25, 230, 160, 0.32);
  border-radius: 12px;
  padding: 13px;
  background: radial-gradient(circle at 88% 20%, rgba(25, 230, 160, 0.2), transparent 42%), rgba(8, 16, 32, 0.62);
}

body[data-route="customers"] .accthero small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

body[data-route="customers"] .accthero b {
  display: inline;
  margin: 0;
  color: #86efac;
  font-size: 21px;
}

body[data-route="customers"] .acctform {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

body[data-route="customers"] .acctfield {
  display: block;
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 9px;
  padding: 9px 10px;
  background: rgba(8, 16, 32, 0.52);
}

body[data-route="customers"] .acctfield label {
  display: block;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

body[data-route="customers"] .acctfield b {
  display: block;
  margin-top: 4px;
  color: #eaf3ff;
  font-size: 12px;
  line-height: 1.5;
}

body[data-route="customers"] .roomchips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

body[data-route="customers"] .roomchips span {
  border: 1px solid rgba(70, 140, 235, 0.18);
  border-radius: 20px;
  padding: 4px 8px;
  color: #cfe0ff;
  background: rgba(47, 139, 255, 0.12);
  font-size: 11px;
  font-weight: 400;
}

body[data-route="customers"] .permgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

body[data-route="customers"] .permtile {
  display: block;
  min-height: 0;
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 9px;
  padding: 9px 5px;
  color: #cfe0ff;
  background: rgba(8, 16, 32, 0.52);
  text-align: center;
  font-size: 11px;
}

body[data-route="customers"] .permtile.on {
  border-color: #2f8bff;
  background: rgba(47, 139, 255, 0.22);
  box-shadow: 0 0 10px rgba(47, 139, 255, 0.16);
}

body[data-route="customers"] .permtile i {
  display: block;
  width: auto;
  height: auto;
  margin-bottom: 3px;
  border-radius: 0;
  color: inherit;
  background: transparent;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
}

body[data-route="customers"] .auditline {
  display: grid;
  gap: 8px;
}

body[data-route="customers"] .audititem {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: #cfe0ff;
  background: transparent;
  font-size: 12px;
}

body[data-route="customers"] .audititem i {
  display: flex;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #9fc6ff;
  background: rgba(47, 139, 255, 0.18);
  font-size: 10px;
  font-style: normal;
}

body[data-route="customers"] .audititem small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.room-bindings-page,
.bindbody,
.bindside,
.bindinglist {
  display: grid;
  gap: 12px;
}

.room-bindings-page {
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  gap: 0;
}

.bindstats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.bindstat {
  display: block;
  border: 1px solid var(--line);
  border-radius: 11px;
  min-height: 72px;
  padding: 11px 13px;
  background: linear-gradient(180deg, var(--surface-panel), color-mix(in srgb, var(--surface-panel-deep) 86%, transparent));
}

.bindstat small,
.bindstat span,
.bindtable th,
.bindingitem small,
.bindhero small {
  color: var(--muted);
}

.bindstat small {
  display: block;
  font-size: 10px;
}

.bindstat b {
  color: var(--text);
  font-size: 22px;
}

.bindstat span {
  float: right;
  margin-top: 7px;
  font-size: 11px;
}

.bindsteps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 220px;
  gap: 12px;
  height: 345px;
  min-height: 345px;
  margin-bottom: 12px;
}

.bindstep {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  min-height: 274px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--surface-panel), color-mix(in srgb, var(--surface-panel-deep) 88%, transparent));
}

.bindstep h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 24px;
}

.bindstep h3 b {
  display: block;
  width: auto;
  height: auto;
  border-radius: 0;
  color: var(--text);
  background: transparent;
  font-size: 26px;
  line-height: 39px;
}

.bindstep .tools {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  position: absolute;
  top: 14px;
  right: 12px;
  font-size: 13px;
  line-height: 19.5px;
}

.bindstep .tools .btn {
  display: block;
  height: 29px;
  min-height: auto;
  padding: 5px 9px;
  font-weight: 400;
}

.room-bindings-page .btn {
  min-height: auto;
  color: var(--text);
  font-weight: 400;
  line-height: normal;
}

.bindtable {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 12px;
  line-height: 18px;
}

.bindtable th,
.bindtable td {
  padding: 8px 7px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-blue) 18%, transparent);
  text-align: left;
  vertical-align: middle;
}

.bindtable th {
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
}

.bindtable td {
  line-height: 18px;
}

.bindtable tr.on td {
  background: color-mix(in srgb, var(--accent-blue) 12%, transparent);
}

.bindcheck {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: color-mix(in srgb, var(--surface-input) 74%, transparent);
}

.bindcheck.on {
  border-color: #2f8bff;
  background: #2f8bff;
  box-shadow: 0 0 8px #2f8bff;
}

.bindconfirm {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  height: 100%;
}

.flowpick {
  border: 1px solid rgba(70, 140, 235, 0.18);
  border-radius: 9px;
  padding: 10px;
  color: var(--text-bar);
  background: rgba(8, 16, 32, 0.52);
  font-size: 13px;
  line-height: 19.5px;
  text-align: center;
}

.flowpick small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

.arrowdown {
  color: var(--mut);
  font-size: 30px;
  line-height: 1.15;
  text-align: center;
}

.bindbtn {
  height: 62px;
  border: 0;
  border-radius: 10px;
  color: white;
  background: linear-gradient(135deg, #1b4ed8, #2f8bff);
  font-size: 16px;
  font-weight: 800;
}

.bindbody {
  grid-template-columns: minmax(0, 1fr) 350px;
  align-items: start;
  min-height: 767px;
}

.room-bindings-page .ledger-message {
  min-height: 0;
}

.bind-list-panel {
  margin-top: 12px;
  min-height: 415px;
}

.room-bindings-page .bindside .panel:nth-child(1) {
  min-height: 270px;
}

.room-bindings-page .bindside .panel:nth-child(2) {
  min-height: 297px;
}

.room-bindings-page .bindside .panel:nth-child(3) {
  min-height: 176px;
}

.bindingitem {
  display: grid;
  grid-template-columns: 1fr 82px 82px 72px;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 10px;
  padding: 9px 10px;
  color: var(--text-bar);
  background: rgba(8, 16, 32, 0.52);
  font-size: 12px;
  line-height: 18px;
}

.bindingitem b,
.bindingitem small {
  display: block;
}

.room-bindings-page .bindinglist {
  gap: 8px;
}

.room-bindings-page .bindingitem b {
  display: inline;
}

.bindingitem small {
  font-size: 10px;
  line-height: 15px;
}

.bindhero {
  border: 1px solid rgba(25, 230, 160, 0.34);
  border-radius: 12px;
  padding: 13px;
  background:
    radial-gradient(circle at 88% 18%, rgba(25, 230, 160, 0.22), transparent 45%),
    rgba(8, 16, 32, 0.62);
}

.bindhero b {
  display: inline;
  margin: 0;
  color: #86efac;
  font-size: 21px;
  line-height: 31.5px;
}

.bindhero small {
  display: block;
  font-size: 10px;
  line-height: 15px;
}

.identify {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.identify div {
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 9px;
  padding: 8px;
  color: var(--text-bar);
  background: rgba(8, 16, 32, 0.52);
  font-size: 11px;
  line-height: 16.5px;
  text-align: center;
}

.identify b {
  display: block;
  color: #fff;
  font-size: 15px;
  line-height: 22.5px;
}

.bindmap {
  height: 268px;
  border: 1px solid var(--line);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  margin-top: 1px;
  margin-bottom: 12px;
  background:
    radial-gradient(circle at 45% 42%, rgba(47, 139, 255, 0.18), transparent 30%),
    linear-gradient(180deg, rgba(20, 42, 80, 0.48), rgba(8, 18, 35, 0.58));
}

.room-bindings-page .binding-floor-source {
  display: none;
}

.room-bindings-page .binding-floor-map {
  margin-bottom: 12px;
}

.room-bindings-page .binding-floor-map .floor-plan-stage.compact {
  min-height: 268px;
  height: 268px;
}

.room-bindings-page .binding-floor-map .floor-plan-canvas {
  min-height: 100%;
}

.room-bindings-page .tag {
  min-height: 0;
  border: 0;
  border-radius: 20px;
  padding: 2px 8px;
  color: #9fc6ff;
  background: rgba(47, 139, 255, 0.16);
  display: inline;
  font-size: 10.5px;
  font-weight: 400;
  line-height: 15.75px;
}

.room-bindings-page .tag.g {
  color: #86efac;
  background: rgba(34, 197, 94, 0.18);
}

.room-bindings-page .tag.w {
  color: #ffd089;
  background: rgba(255, 177, 61, 0.18);
}

.room-bindings-page .tag.b {
  color: #ff9aa4;
  background: rgba(255, 90, 106, 0.18);
}

.roompoly {
  position: absolute;
  border: 1px solid rgba(120, 180, 255, 0.36);
  border-radius: 8px;
  padding: 7px;
  color: var(--text-bar);
  background: rgba(47, 139, 255, 0.08);
  font-size: 11px;
}

.roompoly.on {
  border-color: #19e6a0;
  background: rgba(25, 230, 160, 0.12);
  box-shadow: 0 0 15px rgba(25, 230, 160, 0.2);
}

.acpin {
  position: absolute;
  transform: translate(-50%, -50%);
  border: 1px solid currentColor;
  border-radius: 18px;
  padding: 4px 8px;
  color: #86efac;
  background: rgba(8, 16, 32, 0.88);
  box-shadow: 0 0 12px currentColor;
  font-size: 10px;
}

.acpin.free {
  color: #9fc6ff;
}

.acpin.warn {
  color: var(--warning);
}

.room-bindings-page .evidence {
  gap: 8px;
}

.room-bindings-page .evidence div {
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 10px;
  padding: 9px 10px;
  color: var(--text-bar);
  background: rgba(8, 16, 32, 0.54);
  font-size: 12px;
  line-height: 18px;
}

.room-bindings-page .evidence small {
  margin-bottom: 0;
  font-size: 10px;
  line-height: 15px;
}

.room-bindings-page .auditline {
  gap: 8px;
}

.room-bindings-page .audititem {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: var(--text-bar);
  background: transparent;
  font-size: 12px;
  line-height: 18px;
}

.room-bindings-page .audititem i {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #9fc6ff;
  background: rgba(47, 139, 255, 0.18);
  font-size: 10px;
}

.room-bindings-page .audititem small {
  display: block;
  font-size: 10px;
  line-height: 15px;
}

.room-bindings-page .pt {
  font-weight: 400;
  line-height: 21px;
}

.controllers-page,
.opspanel,
.channelgrid,
.replaceflow {
  display: grid;
  gap: 12px;
}

.controllers-page {
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  gap: 0;
}

body[data-route="controllers"] .platform-shell {
  transform: translateY(2px);
}

.controllers-page .channelgrid {
  gap: 8px;
}

.controllers-page .ledger-message {
  min-height: 0;
}

.controllers-page .replaceflow {
  gap: 8px;
}

.controllers-page .pt {
  font-weight: 400;
  line-height: 21px;
}

.controllers-page .tag {
  min-height: 0;
  border: 0;
  border-radius: 20px;
  padding: 2px 8px;
  color: #9fc6ff;
  background: rgba(47, 139, 255, 0.16);
  display: inline;
  font-size: 10.5px;
  font-weight: 400;
  line-height: 15.75px;
}

.controllers-page .tag.g {
  color: #86efac;
  background: rgba(34, 197, 94, 0.18);
}

.controllers-page .tag.w {
  color: #ffd089;
  background: rgba(255, 177, 61, 0.18);
}

.controllers-page .tag.b {
  color: #ff9aa4;
  background: rgba(255, 90, 106, 0.18);
}

.ctabs {
  display: flex;
  gap: 18px;
  border-bottom: 1px solid rgba(70, 140, 235, 0.18);
  margin-bottom: 10px;
}

.ctabs b,
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  color: var(--muted);
  background: var(--surface-pill);
  font-size: 12px;
  font-weight: 900;
}

.ctabs b {
  min-height: 0;
  border: 0;
  border-radius: 0;
  padding: 9px 0;
  background: transparent;
  color: var(--mut);
  font-size: 12px;
  font-weight: 700;
}

.ctabs b.on {
  border-bottom: 2px solid #2f8bff;
  color: #9fc6ff;
  background: transparent;
}

.tag {
  min-height: 24px;
  padding: 0 8px;
  white-space: nowrap;
}

.tag.g {
  border-color: var(--border-accent-strong);
  color: var(--badge-green-text);
  background: var(--overlay-accent);
}

.tag.w {
  border-color: var(--warning);
  color: var(--badge-amber-text);
  background: var(--overlay-amber);
}

.tag.b {
  border-color: var(--border-danger-subtle);
  color: var(--badge-red-text);
  background: var(--overlay-red);
}

.controller-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.controller-filters .inp {
  flex: 0 0 148px;
  width: auto;
  height: 35px;
  min-height: 35px;
  padding: 7px 10px;
  font-size: 12px;
}

.controller-filters select.inp {
  flex-basis: 128px;
}

.controller-filters .btn {
  height: 35px;
  min-height: 35px;
}

.controller-filters .push-right {
  margin-left: auto;
}

.ctlstats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.ctlstat {
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 13px;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.52), rgba(8, 18, 35, 0.58));
}

.ctlstat small,
.ctlstat span,
.gwmeta small,
.gwhealth small,
.channelitem small,
.watchbox small,
.replaceflow small,
.opsnote {
  color: var(--muted);
  font-size: 12px;
}

.ctlstat small {
  display: block;
  font-size: 10px;
}

.ctlstat b {
  color: var(--text);
  font-size: 22px;
}

.ctlstat span {
  float: right;
  margin-top: 7px;
  font-size: 11px;
}

.ctlgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(410px, 0.8fr) 360px;
  gap: 12px;
  align-items: start;
}

.gatewaycards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.gwcard {
  min-width: 0;
  position: relative;
  overflow: hidden;
  min-height: 236px;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 14px;
  background: linear-gradient(155deg, rgba(20, 42, 80, 0.55), rgba(8, 18, 35, 0.68));
}

.gwcard::after {
  position: absolute;
  right: -42px;
  top: -42px;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: radial-gradient(circle, currentColor, transparent 65%);
  opacity: 0.12;
  content: "";
}

.gwcard.ok {
  color: #19e6a0;
}

.gwcard.warn {
  color: #ffb13d;
}

.gwcard.off {
  color: #ff5a6a;
}

.gwhead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: #fff;
}

.gwhead b {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gwhead .tag {
  margin-left: auto;
}

.gwmeta {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 5px 10px;
  color: var(--text-bar);
  font-size: 12px;
}

.gwmeta span {
  min-width: 0;
  white-space: nowrap;
}

.gwhealth {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin: 11px 0;
}

.gwhealth div {
  border: 0;
  border-radius: 8px;
  padding: 7px;
  background: rgba(8, 16, 32, 0.55);
}

.gwhealth b {
  display: block;
  color: #fff;
  font-size: 13px;
}

.controllers-page .gwmeta small,
.controllers-page .gwhealth small,
.controllers-page .channelitem small,
.controllers-page .watchbox small,
.controllers-page .replaceflow small {
  display: block;
  color: var(--mut);
  font-size: 10px;
  line-height: 15px;
}

.gwactions {
  display: flex;
  gap: 7px;
  margin-top: 10px;
}

.gwactions .btn {
  min-height: 0;
  padding: 5px 10px;
  font-weight: 400;
}

body[data-shell="business"] .controllers-page .gwactions .btn {
  min-height: 0;
  padding: 5px 10px;
  line-height: normal;
  font-weight: 400;
}

.topology {
  position: relative;
  height: 258px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 50%, rgba(47, 139, 255, 0.16), transparent 55%),
    linear-gradient(180deg, rgba(20, 42, 80, 0.48), rgba(8, 18, 35, 0.58));
  margin-bottom: 12px;
}

.toponode {
  position: absolute;
  min-width: 82px;
  min-height: 56px;
  transform: translate(-50%, -50%);
  border: 1px solid currentColor;
  border-radius: 14px;
  padding: 8px 12px;
  color: #9fc6ff;
  background: rgba(8, 16, 32, 0.88);
  text-align: center;
  font-size: 11px;
  box-shadow: 0 0 14px currentColor;
}

.toponode b,
.toponode small {
  display: block;
}

.toponode b {
  color: var(--text);
  font-size: 14px;
}

.toponode small {
  color: var(--muted);
}

.toponode.g {
  border-color: #19e6a0;
  color: #19e6a0;
}

.toponode.w {
  border-color: #ffb13d;
  color: #ffb13d;
}

.controllers-page .toponode.cloud {
  min-width: 92px;
}

.toponode.cloud {
  left: 18%;
  top: 50%;
}

.toponode.gateway {
  left: 50%;
  top: 50%;
}

.toponode.channel-a {
  left: 82%;
  top: 28%;
}

.toponode.channel-b {
  left: 82%;
  top: 50%;
}

.toponode.channel-c {
  left: 82%;
  top: 72%;
}

.topoline {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(120, 180, 255, 0.7), transparent);
  transform-origin: left center;
}

.topoline.line-main {
  left: 26%;
  top: 49%;
  width: 48%;
}

.topoline.line-up,
.topoline.line-down {
  left: 50%;
  top: 49%;
  width: 26%;
}

.topoline.line-up {
  transform: rotate(33deg);
}

.topoline.line-down {
  transform: rotate(-33deg);
}

.channel-detail-panel {
  margin-top: 12px;
}

.channelitem {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) 72px 70px;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 10px;
  padding: 9px 10px;
  color: var(--text-bar);
  background: rgba(8, 16, 32, 0.52);
  font-size: 12px;
}

.channelitem b {
  display: block;
  color: var(--text);
}

.watchbox {
  border: 1px solid rgba(25, 230, 160, 0.34);
  border-radius: 12px;
  padding: 13px;
  background:
    radial-gradient(circle at 88% 18%, rgba(25, 230, 160, 0.2), transparent 45%),
    rgba(8, 16, 32, 0.62);
}

.watchbox b {
  color: #86efac;
  font-size: 21px;
}

.controllers-page .watchbox b {
  display: block;
}

.controllers-page .watchbox b + small {
  margin-top: 5px;
}

.switchline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--text-soft);
}

.switch {
  position: relative;
  width: 38px;
  height: 20px;
  border-radius: 20px;
  background: var(--surface-track);
}

.switch.on {
  background: var(--overlay-accent);
}

.switch::after {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-soft);
  content: "";
}

.switch.on::after {
  left: 20px;
  background: var(--accent);
}

.opsgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.controller-ops-buttons {
  margin-top: 10px;
}

.opsgrid .btn {
  min-height: 38px;
}

.controllers-page .opsgrid .btn {
  height: 37px;
  min-height: 0;
  padding: 9px 5px;
}

body[data-shell="business"] .controllers-page .opsgrid .btn {
  display: block;
  height: 37px;
  min-height: 0;
  padding: 9px 5px;
  font: 12.5px Arial;
  line-height: normal;
}

.opsnote {
  margin-top: 10px;
  line-height: 1.6;
}

.controllers-page .opsnote {
  margin: 10px 0 0;
  color: #9ab0d1;
  font-size: 11px;
  line-height: 16.5px;
}

.replaceflow div {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--text-soft);
  font-size: 12px;
}

.replaceflow i {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--badge-blue-text);
  background: var(--overlay-blue);
  font-style: normal;
  font-weight: 900;
}

.controllers-page .replaceflow i {
  width: 20px;
  height: 20px;
  font-size: 10px;
  font-weight: 400;
}

.nodes-page,
.nodebody,
.nodeside,
.nodecards,
.nodebars,
.nodelog {
  display: grid;
  gap: 12px;
}

.nodes-page {
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  gap: 0;
}

.nodes-page .pt {
  font-weight: 400;
  line-height: 21px;
}

.nodes-page .pt .r {
  margin-left: auto;
  color: var(--mut);
  font-size: 11px;
}

.nodes-page .tag {
  min-height: 0;
  border: 0;
  border-radius: 20px;
  padding: 2px 8px;
  color: #9fc6ff;
  background: rgba(47, 139, 255, 0.16);
  display: inline;
  font-size: 10.5px;
  font-weight: 400;
  line-height: 15.75px;
}

.nodes-page .tag.g {
  color: #86efac;
  background: rgba(34, 197, 94, 0.18);
}

.nodes-page .tag.w {
  color: #ffd089;
  background: rgba(255, 177, 61, 0.18);
}

.nodes-page .tag.b {
  color: #ff9aa4;
  background: rgba(255, 90, 106, 0.18);
}

.nodes-page .ledger-message {
  min-height: 0;
}

.nodes-page .nodeside {
  gap: 0;
}

.nodes-page .nodelog {
  gap: 8px;
}

.node-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.node-filter-label {
  align-self: center;
  color: #cfe0ff;
  font-weight: 400;
}

.node-filters .inp {
  flex: 0 0 148px;
  width: auto;
  height: 35px;
  min-height: 0;
  padding: 7px 10px;
  color: var(--txt);
  background: #0b1626;
  font: 12px Arial, sans-serif;
  line-height: normal;
}

.node-filters select.inp {
  flex-basis: 168px;
  height: 35px;
  padding: 7px 12px;
  color: var(--txt);
  background: #12203c;
  font: 12.5px Arial, sans-serif;
  line-height: normal;
}

.node-filters .inp:disabled,
.node-filters select.inp:disabled {
  opacity: 1;
  color: var(--txt);
  background: #0b1626;
  -webkit-text-fill-color: var(--txt);
}

.node-filters select.inp:disabled {
  background: #12203c;
}

.node-filters .inp::placeholder {
  color: rgba(234, 243, 255, 0.54);
  opacity: 1;
}

.node-filters .btn {
  height: 35px;
  min-height: 0;
  padding: 7px 12px;
  font: 12.5px Arial, sans-serif;
  line-height: normal;
  font-weight: 400;
}

.node-filters .push-right {
  margin-left: auto;
}

.nodestats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.nodestat {
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 13px;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.52), rgba(8, 18, 35, 0.58));
}

.nodestat small,
.nodestat span,
.nodemeta small,
.nodehero small,
.nodechain small,
.nodefact small,
.nodefact span,
.nodelog small {
  color: var(--muted);
  font-size: 12px;
}

.nodestat small {
  display: block;
  font-size: 10px;
}

.nodestat b {
  color: #fff;
  font-size: 22px;
}

.nodes-page .nodestat small,
.nodes-page .nodestat span {
  color: var(--mut);
}

.nodestat span {
  float: right;
  margin-top: 7px;
  font-size: 11px;
}

.nodebody {
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 12px;
  align-items: start;
}

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

.nodecard {
  min-width: 0;
  position: relative;
  overflow: hidden;
  min-height: 238px;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 14px;
  background: linear-gradient(155deg, rgba(20, 42, 80, 0.56), rgba(8, 18, 35, 0.68));
}

.nodecard::after {
  position: absolute;
  right: -42px;
  top: -42px;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: radial-gradient(circle, currentColor, transparent 65%);
  opacity: 0.1;
  content: "";
}

.nodecard.ok {
  color: #19e6a0;
}

.nodecard.search {
  color: #2f8bff;
}

.nodecard.warn {
  color: #ffb13d;
}

.nodecard.off {
  color: #74849e;
}

.nodehead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.nodehead b {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nodehead .tag {
  flex: 0 0 auto;
  margin-left: auto;
}

.nodemeta {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 5px 10px;
  color: #cfe0ff;
  font-size: 12px;
}

.nodemeta small {
  color: var(--mut);
}

.nodes-page .nodemeta small {
  font-size: 10px;
  line-height: 15px;
}

.nodemeta span {
  min-width: 0;
  white-space: nowrap;
}

.nodes-page .nodemeta span {
  overflow: visible;
  text-overflow: clip;
}

.nodefoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}

.nodefoot .btn {
  min-height: 0;
  padding: 5px 10px;
}

body[data-shell="business"] .nodes-page .nodefoot .btn {
  display: inline-block;
  min-height: 0;
  padding: 5px 10px;
  font: 12.5px Arial;
  line-height: normal;
  font-weight: 400;
}

body[data-shell="business"] .nodes-page .node-restart-button {
  border: 0;
  background: #ef2b2b;
}

.signal {
  display: flex;
  align-items: end;
  gap: 3px;
  height: 18px;
}

.signal i {
  width: 4px;
  border-radius: 4px;
  background: currentColor;
  opacity: 0.45;
}

.signal i:nth-child(1) {
  height: 7px;
}

.signal i:nth-child(2) {
  height: 11px;
}

.signal i:nth-child(3) {
  height: 15px;
}

.signal i:nth-child(4) {
  height: 18px;
  opacity: 1;
}

.nodepanel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.52), rgba(8, 18, 35, 0.64));
  margin-bottom: 12px;
}

.nodes-page .nodeside .nodepanel:first-child {
  height: 362px;
}

.nodehero {
  border: 1px solid rgba(47, 139, 255, 0.34);
  border-radius: 12px;
  padding: 13px;
  background:
    radial-gradient(circle at 88% 20%, rgba(47, 139, 255, 0.22), transparent 45%),
    rgba(8, 16, 32, 0.62);
  margin-bottom: 12px;
}

.nodehero small {
  display: block;
  color: var(--mut);
  font-size: 10px;
}

.nodehero b {
  color: #9fc6ff;
  font-size: 21px;
}

.nodes-page .nodehero b + small {
  margin-top: 5px;
}

.nodechain {
  display: grid;
  grid-template-columns: 1fr 26px 1fr 26px 1fr;
  gap: 0;
  align-items: center;
  margin: 12px 0;
  color: #cfe0ff;
  font-size: 11px;
  text-align: center;
}

.nodechain div {
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 9px;
  padding: 9px 4px;
  background: rgba(8, 16, 32, 0.54);
  text-align: center;
}

.nodechain i {
  color: var(--cyan);
  font-style: normal;
}

.nodebars {
  display: grid;
  gap: 8px;
}

.nodebar {
  display: grid;
  grid-template-columns: 74px 1fr 44px;
  gap: 8px;
  align-items: center;
  color: #cfe0ff;
  font-size: 12px;
}

.nodebar .rail {
  height: 8px;
  border-radius: 8px;
  background: rgba(70, 140, 235, 0.18);
  overflow: hidden;
}

.nodebar .rail i {
  display: block;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--green), var(--cyan));
}

.nodes-page .savebar {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

body[data-shell="business"] .nodes-page .opsgrid .btn {
  display: block;
  min-height: 37px;
  padding: 9px 5px;
  font: 12.5px Arial;
  line-height: normal;
}

body[data-shell="business"] .nodes-page .savebar .btn {
  display: block;
  height: 34px;
  min-height: 0;
  padding: 7px 12px;
  font: 12.5px Arial;
  line-height: normal;
}

.node-overflow {
  margin-top: 10px;
  border: 1px dashed var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 10px;
  color: var(--badge-amber-text);
  background: var(--badge-amber-bg);
  font-size: 12px;
  font-weight: 800;
}

.nodelog div {
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 9px;
  padding: 8px 9px;
  color: #cfe0ff;
  background: rgba(8, 16, 32, 0.52);
  font-size: 12px;
}

.nodelog small {
  display: block;
  min-width: 56px;
  margin-right: 8px;
  color: var(--mut);
  font-size: 10px;
}

.nodeopsnote {
  margin-top: 10px;
  color: #9ab0d1;
  font-size: 11px;
}

.node-management-page {
  min-height: calc(100vh - 69px);
  display: flex;
  flex-direction: column;
  padding: 0 8px 6px;
  background: var(--bg, #050a14);
}

.node-host-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0 0 8px;
  color: #cbd8ee;
  font-size: 13px;
}

.node-host-toolbar label {
  flex: 0 0 auto;
  color: #cfdaee;
  font-weight: 400;
  line-height: 32px;
}

.node-host-toolbar .inp {
  flex: 0 0 300px;
  height: 34px;
  min-height: 0;
  border-color: rgba(70, 90, 122, 0.82);
  border-radius: 4px;
  padding: 6px 36px 6px 14px;
  color: #d6e1f2;
  background: #0b1322;
  font-size: 13px;
}

.node-host-toolbar .btn {
  height: 34px;
  min-height: 0;
  border-radius: 4px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 600;
}

.node-host-toolbar .node-query-button {
  border-color: #2f76ff;
  background: #1f6df2;
  color: #fff;
}

.node-host-toolbar .node-reset-button {
  border-color: rgba(102, 119, 148, 0.6);
  background: #2f3c55;
  color: #d8e2f1;
}

.node-card-stage {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.node-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(304px, 1fr));
  gap: 10px;
  align-items: stretch;
}

.gateway-node-card {
  position: relative;
  min-width: 0;
  min-height: 260px;
  border: 1px solid rgba(79, 100, 132, 0.55);
  border-radius: 18px;
  padding: 56px 16px 15px;
  background: #1a2333;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  color: #d9e4f4;
}

.gateway-node-card.ok,
.gateway-node-card.warn,
.gateway-node-card.off {
  color: #d9e4f4;
}

.gateway-node-card[hidden] {
  display: none !important;
}

.node-edit-icon {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 20px;
  height: 20px;
  border: 0;
  padding: 0;
  color: #9ba9bd;
  background: transparent;
  font-size: 20px;
  line-height: 18px;
  cursor: pointer;
}

.node-card-title {
  position: absolute;
  top: 18px;
  left: 16px;
  max-width: calc(100% - 62px);
  overflow: hidden;
  color: #f2f6ff;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-info-list {
  display: grid;
  gap: 5px;
}

.node-info-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  font-size: 13px;
  line-height: 18px;
}

.node-info-row span {
  color: #aab8ce;
  white-space: nowrap;
}

.node-info-row b {
  min-width: 0;
  overflow: hidden;
  color: #dce7f7;
  font-weight: 500;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-card-actions {
  position: absolute;
  right: 16px;
  bottom: 16px;
}

body[data-shell="business"] .nodes-page .node-card-actions .node-restart-button,
.nodes-page .node-card-actions .node-restart-button {
  min-height: 0;
  border: 0;
  border-radius: 4px;
  padding: 7px 14px;
  background: #ff2d25;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
}

.node-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding: 22px 0 0;
  color: #b8c4d8;
  font-size: 13px;
}

.node-pagination .inp {
  width: 72px;
  height: 30px;
  min-height: 0;
  border-color: rgba(70, 90, 122, 0.78);
  border-radius: 4px;
  padding: 4px 8px;
  color: #d5e0f0;
  background: #0b1322;
  text-align: center;
}

.node-pagination select.inp {
  width: 100px;
}

.node-page-button,
.node-page-arrow {
  width: 32px;
  height: 30px;
  border: 1px solid rgba(70, 90, 122, 0.72);
  border-radius: 4px;
  color: #cad6e9;
  background: #243149;
  font-size: 13px;
}

.node-page-button.active {
  border-color: #2f76ff;
  background: #1f6df2;
  color: #fff;
}

.node-page-arrow:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.node-filter-empty {
  grid-column: 1 / -1;
}

@media (max-width: 767px) {
  .node-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  }

  .node-host-toolbar {
    flex-wrap: wrap;
  }

  .node-host-toolbar .inp {
    flex: 1 1 260px;
  }
}
.gateway-channels-page,
.channelbody,
.channelside,
.channelcards,
.channelbars,
.channelissues {
  display: grid;
  gap: 12px;
}

.readfilters {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr)) auto auto auto auto;
  gap: 10px;
  align-items: end;
}

.channelstats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.channelstat {
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface-panel);
}

.channelstat small,
.channelstat span,
.channelmeta small,
.channelread small,
.channelhero small,
.channelbar span,
.channelmatrix small,
.tenantcard small,
.channelissue small {
  color: var(--muted);
  font-size: 12px;
}

.channelstat b {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 24px;
}

.channelstat span {
  display: block;
  margin-top: 4px;
}

.channelbody {
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
  align-items: start;
}

.channelpanel,
.channelhero {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  background: var(--surface-panel);
  box-shadow: var(--shadow);
}

.channelpanel + .channelpanel {
  margin-top: 12px;
}

.channelcards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.channelcard {
  min-width: 0;
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--surface-panel-deep);
}

.channelcard.ok {
  border-color: var(--border-accent-strong);
}

.channelcard.idle {
  border-color: var(--warning);
}

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

.channelhead b {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channelhead .tag {
  flex: 0 0 auto;
}

.channelmeta {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 6px 10px;
  color: var(--text-soft);
  font-size: 12px;
}

.channelmeta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channelread {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.channelread div {
  border: 1px solid var(--border-muted-faint);
  border-radius: var(--radius);
  padding: 8px;
  background: var(--surface-panel-deep);
}

.channelread b {
  display: block;
  color: var(--text);
}

.channelactions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gateway-channel-list {
  display: grid;
  gap: 7px;
}

.channelrow {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) 70px minmax(96px, 1fr) 74px 72px 92px 72px 84px;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 9px;
  color: var(--text-soft);
  background: var(--surface-panel-deep);
  font-size: 12px;
}

.channelrow.head {
  color: var(--muted);
  background: var(--surface-panel-muted);
  font-weight: 900;
}

.channelflow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.channelflow div {
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface-panel-deep);
  text-align: center;
}

.channelflow b {
  display: block;
  color: var(--text);
}

.channelflow i {
  color: var(--accent);
  font-style: normal;
  font-weight: 900;
}

.channelhero {
  border-color: var(--border-accent-strong);
}

.channelhero b {
  display: block;
  margin: 4px 0 12px;
  color: var(--badge-green-text);
  font-size: 20px;
}

.sum,
.channelmatrix,
.tenantcards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sum div,
.channelmatrix div,
.tenantcard,
.channelissue {
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--surface-panel-deep);
}

.sum b,
.channelmatrix b,
.tenantcard b {
  display: block;
  color: var(--text);
}

.channelbar {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) 54px;
  gap: 8px;
  align-items: center;
}

.channelbar .rail {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-track);
}

.channelbar .rail i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--quota-gradient);
}

.channelbar.pending .rail {
  border: 1px dashed var(--border-muted-soft);
  background: var(--surface-muted);
}

.channelbar.pending .rail i {
  width: 0;
  background: transparent;
}

.channelbar.pending b {
  color: var(--muted);
}

.channelbar b {
  color: var(--text);
  text-align: right;
}

.tenantcard {
  color: var(--text-soft);
}

.channelissue {
  color: var(--text-soft);
}

.channelissue.warn {
  border-color: var(--warning);
}

.channel-overflow {
  border: 1px dashed var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 10px;
  color: var(--badge-amber-text);
  background: var(--badge-amber-bg);
  font-size: 12px;
  font-weight: 800;
}

.list-overflow {
  grid-column: 1 / -1;
  border: 1px dashed var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 9px 10px;
  color: var(--muted);
  background: var(--surface-panel-deep);
  font-size: 12px;
  text-align: center;
}

.channelissue small {
  display: block;
  margin-top: 4px;
  line-height: 1.5;
}

.gateway-channels-page {
  display: grid;
  gap: 0;
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  font-size: 13px;
  line-height: 1.5;
}

body[data-route="gateway-channels"][data-shell="business"] {
  background: radial-gradient(1200px 600px at 60% -200px, rgba(47, 139, 255, 0.14), transparent 60%), var(--bg, #050a14);
  font: 13px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif;
}

body[data-route="gateway-channels"][data-shell="business"] .main {
  background: transparent;
  font: inherit;
}

.gateway-channels-page .ledger-message {
  display: block;
  min-height: 0;
  margin: 0;
}

.gateway-channels-page .readfilters {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 1px 0;
}

.gateway-channels-page .readfilters .field {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(70, 140, 235, 0.18);
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(8, 16, 32, 0.48);
}

.gateway-channels-page .readfilters label {
  color: #cfe0ff;
  font-size: 12px;
  white-space: nowrap;
}

.gateway-channels-page .readfilters .inp {
  width: 170px;
  height: 34px;
  min-height: 0;
}

body[data-shell="business"] .gateway-channels-page .readfilters .btn {
  display: block;
  min-height: 34px;
  border: 1px solid var(--line);
  padding: 7px 11px;
  color: var(--txt);
  background: #12203c;
  font: 12.5px Arial;
  font-weight: 400;
  line-height: normal;
}

.gateway-channels-page .channelstats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.gateway-channels-page .channelstat {
  box-sizing: border-box;
  height: 72px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 13px;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.52), rgba(8, 18, 35, 0.58));
}

.gateway-channels-page .channelstat small {
  display: block;
  color: var(--mut);
  font-size: 10px;
  line-height: 1.2;
}

.gateway-channels-page .channelstat b,
.gateway-channels-page .channelstat strong {
  display: inline-block;
  margin: 0;
  color: #fff;
  font-size: 22px;
  line-height: 1.5;
}

.gateway-channels-page .channelstat strong {
  color: var(--green);
}

.gateway-channels-page .channelstat span {
  float: right;
  display: inline-block;
  margin-top: 7px;
  color: var(--mut);
  font-size: 11px;
}

.gateway-channels-page .channelbody {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 12px;
  align-items: start;
}

.gateway-channels-page .channelside {
  display: block;
}

.gateway-channels-page .channelpanel,
.gateway-channels-page .channelhero {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.52), rgba(8, 18, 35, 0.64));
  box-shadow: none;
}

.gateway-channels-page .channelpanel {
  margin-bottom: 12px;
}

.gateway-channels-page .channelpanel + .channelpanel {
  margin-top: 0;
}

.gateway-channels-page .pt {
  margin-bottom: 9px;
  color: var(--txt);
  font-size: 14px;
  font-weight: 400;
}

.gateway-channels-page .pt .tag {
  margin-left: 6px;
}

.gateway-channels-page .tag {
  display: inline;
  min-height: 0;
  border: 0;
  border-radius: 20px;
  padding: 2px 8px;
  color: #9fc6ff;
  background: rgba(47, 139, 255, 0.16);
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.5;
}

.gateway-channels-page .tag.g {
  color: #86efac;
  background: rgba(34, 197, 94, 0.18);
}

.gateway-channels-page .tag.w {
  color: #ffd089;
  background: rgba(255, 177, 61, 0.18);
}

.gateway-channels-page .channelcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.gateway-channels-page .channelcard {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 218px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 14px;
  background: linear-gradient(155deg, rgba(20, 42, 80, 0.56), rgba(8, 18, 35, 0.68));
}

.gateway-channels-page .channelcard.ok {
  border-color: var(--line);
  color: #19e6a0;
}

.gateway-channels-page .channelcard.idle {
  border-color: var(--line);
  color: #74849e;
}

.gateway-channels-page .channelcard.warn {
  color: #ffb13d;
}

.gateway-channels-page .channelcard::after {
  content: "";
  position: absolute;
  top: -42px;
  right: -42px;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: radial-gradient(circle, currentColor, transparent 65%);
  opacity: 0.1;
}

.gateway-channels-page .channelhead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.gateway-channels-page .channelhead b {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gateway-channels-page .channelhead .tag {
  margin-left: auto;
}

.gateway-channels-page .channelmeta {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 5px 10px;
  color: #cfe0ff;
  font-size: 12px;
}

.gateway-channels-page .channelmeta small {
  color: var(--mut);
  font-size: 10px;
}

.gateway-channels-page .channelmeta span {
  min-width: 0;
  overflow: hidden;
  color: #cfe0ff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gateway-channels-page .channelread {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin: 11px 0;
}

.gateway-channels-page .channelread div {
  border: 0;
  border-radius: 8px;
  padding: 7px;
  background: rgba(8, 16, 32, 0.55);
}

.gateway-channels-page .channelread small {
  display: block;
  color: var(--mut);
  font-size: 10px;
}

.gateway-channels-page .channelread b {
  color: #fff;
  font-size: 13px;
}

.gateway-channels-page .channelactions {
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  margin-top: 10px;
}

body[data-shell="business"] .gateway-channels-page .channelactions .btn {
  display: block;
  min-height: 0;
  padding: 5px 10px;
  font: 12.5px Arial;
  font-weight: 400;
  line-height: normal;
}

.gateway-channels-page table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.gateway-channels-page th,
.gateway-channels-page td {
  border-bottom: 1px solid var(--line);
  padding: 8px 7px;
  color: var(--txt);
  text-align: left;
}

.gateway-channels-page th {
  color: var(--mut);
  font-size: 11px;
  font-weight: 600;
}

.gateway-channels-page .channelflow {
  display: grid;
  grid-template-columns: 1fr 24px 1fr 24px 1fr 24px 1fr;
  gap: 0;
  align-items: center;
  margin: 12px 0;
  color: #cfe0ff;
  font-size: 11px;
  text-align: center;
}

.gateway-channels-page .channelflow div {
  min-height: 48px;
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 9px;
  padding: 9px 4px;
  background: rgba(8, 16, 32, 0.54);
}

.gateway-channels-page .channelflow b {
  display: block;
  margin-bottom: 3px;
  color: #fff;
  font-size: 12px;
}

.gateway-channels-page .channelflow i {
  color: var(--cyan);
  font-style: normal;
}

.gateway-channels-page .channelhero {
  box-sizing: border-box;
  height: 218px;
  margin-bottom: 12px;
  border-color: rgba(25, 230, 160, 0.34);
  padding: 13px;
  background: radial-gradient(circle at 88% 18%, rgba(25, 230, 160, 0.22), transparent 45%), rgba(8, 16, 32, 0.62);
}

.gateway-channels-page .channelhero small {
  display: block;
  color: var(--mut);
  font-size: 10px;
}

.gateway-channels-page .channelhero > b {
  display: block;
  margin: 0;
  color: #86efac;
  font-size: 21px;
}

.gateway-channels-page .channelhero .sum {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.gateway-channels-page .channelhero .sum div {
  box-sizing: border-box;
  height: 63px;
  border: 0;
  border-radius: 8px;
  padding: 8px;
  background: rgba(8, 16, 32, 0.58);
}

.gateway-channels-page .channelhero .sum b {
  color: #fff;
}

.gateway-channels-page .channelbars,
.gateway-channels-page .channelissues {
  display: grid;
  gap: 8px;
}

.gateway-channels-page .channelbar {
  display: grid;
  grid-template-columns: 74px 1fr 48px;
  gap: 8px;
  align-items: center;
  color: #cfe0ff;
  font-size: 12px;
}

.gateway-channels-page .channelbar .rail {
  height: 8px;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(70, 140, 235, 0.18);
}

.gateway-channels-page .channelbar .rail i {
  display: block;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--green), var(--cyan));
}

.gateway-channels-page .channelbar b {
  color: #cfe0ff;
  text-align: left;
}

.gateway-channels-page .channelmatrix {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.gateway-channels-page .channelmatrix div {
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 9px;
  padding: 9px;
  color: #cfe0ff;
  background: rgba(8, 16, 32, 0.52);
  font-size: 12px;
}

.gateway-channels-page .channelmatrix b {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: 16px;
}

.gateway-channels-page .channelmatrix small {
  color: var(--mut);
  font-size: 10px;
}

.gateway-channels-page .tenantcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.gateway-channels-page .tenantcard {
  box-sizing: border-box;
  height: 88px;
  overflow: hidden;
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 10px;
  padding: 10px;
  color: #cfe0ff;
  background: rgba(8, 16, 32, 0.52);
  font-size: 12px;
}

.gateway-channels-page .tenantcard b {
  display: block;
  margin-top: 6px;
  color: #fff;
  font-size: 16px;
}

.gateway-channels-page .tenantcard small {
  display: block;
  margin-top: 3px;
  color: var(--mut);
  font-size: 10px;
  line-height: 1.2;
}

.gateway-channels-page .channelissue {
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-left: 3px solid var(--cyan);
  border-radius: 9px;
  padding: 8px 9px;
  color: #cfe0ff;
  background: rgba(8, 16, 32, 0.52);
  font-size: 12px;
}

.gateway-channels-page .channelissue.warn {
  border-color: rgba(70, 140, 235, 0.16);
  border-left-color: #ffb13d;
}

.gateway-channels-page .channelissue small {
  display: block;
  margin-top: 3px;
  color: var(--mut);
  font-size: 10px;
}

.smart-box-page {
  display: grid;
  gap: 12px;
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  font-size: 13px;
  line-height: 1.5;
}

body[data-route="platform/smart-box-onboarding"][data-shell="platform"] {
  background: radial-gradient(1100px 620px at 62% -210px, rgba(25, 230, 160, 0.12), transparent 60%), var(--bg, #050a14);
  font: 13px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif;
}

body[data-route="platform/smart-box-onboarding"][data-shell="platform"] .main {
  background: transparent;
  font: inherit;
}

body[data-route="platform/smart-box-onboarding"] .global-impersonation-banner {
  position: static;
}

.smart-box-page .ledger-message {
  display: block;
  min-height: 0;
  margin: 0;
}

.smartbox-hero,
.smartbox-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.52), rgba(8, 18, 35, 0.66));
  box-shadow: none;
}

.smartbox-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
  gap: 16px;
  align-items: center;
  padding: 16px;
}

.smartbox-hero small,
.smartbox-note,
.smartbox-discovery-row small,
.smartbox-review small,
.smartbox-stats small,
.smartbox-step small,
.smartbox-unit small {
  color: var(--mut);
  font-size: 11px;
}

.smartbox-hero b {
  display: block;
  margin: 4px 0;
  color: var(--txt);
  font-size: 22px;
  line-height: 1.25;
}

.smartbox-hero span {
  display: block;
  color: #cfe0ff;
}

.smartbox-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.smartbox-stats div,
.smartbox-review div,
.smartbox-step,
.smartbox-discovery-row,
.smartbox-unit,
.smartbox-meter-row {
  min-width: 0;
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 10px;
  background: rgba(8, 16, 32, 0.54);
}

.smartbox-stats div {
  min-height: 74px;
  padding: 10px;
}

.smartbox-stats b {
  overflow: hidden;
  color: #fff;
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smartbox-stats span {
  overflow: hidden;
  color: var(--mut);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smartbox-steps {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.smartbox-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 1px 8px;
  align-items: center;
  padding: 9px 10px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.smartbox-step i {
  grid-row: 1 / 3;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--mut);
  background: rgba(70, 140, 235, 0.16);
  font-style: normal;
  font-weight: 700;
}

.smartbox-step b {
  overflow: hidden;
  color: var(--txt);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smartbox-step.done {
  border-color: rgba(25, 230, 160, 0.32);
}

.smartbox-step.done i {
  color: #06121c;
  background: var(--green);
}

.smartbox-step.active {
  border-color: rgba(255, 177, 61, 0.42);
  background: rgba(255, 177, 61, 0.08);
}

.smartbox-step:hover,
.smartbox-step:focus-visible {
  border-color: rgba(25, 230, 160, 0.44);
  background: rgba(25, 230, 160, 0.08);
  outline: none;
}

.smartbox-step:active {
  transform: translateY(1px);
}

.smartbox-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 410px;
  gap: 12px;
  align-items: start;
}

.smartbox-side {
  display: grid;
  gap: 12px;
}

.smartbox-panel {
  padding: 14px;
}

.smartbox-section-focus {
  border-color: rgba(25, 230, 160, 0.72);
  box-shadow: 0 0 0 2px rgba(25, 230, 160, 0.12);
}

.smartbox-panel + .smartbox-panel {
  margin-top: 12px;
}

.smartbox-list-first {
  display: grid;
  gap: 12px;
}

.smartbox-function-row {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: rgba(8, 18, 35, 0.68);
}

body[data-route="platform/smart-box-onboarding"] .smart-box-page .smartbox-plus {
  width: 38px;
  min-width: 38px;
  padding: 0;
  border-radius: 999px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

body[data-route="platform/smart-box-onboarding"] .smart-box-page .btn.active {
  border-color: rgba(25, 230, 160, 0.46);
  color: #06121c;
  background: var(--green);
}

.smartbox-function-note {
  min-width: 180px;
  margin-left: auto;
  color: var(--mut);
  font-size: 12px;
}

.smartbox-list-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
  gap: 12px;
  align-items: start;
}

.smartbox-list-main,
.smartbox-current-task {
  min-width: 0;
}

.smartbox-list-main,
.smartbox-current-task {
  display: grid;
  gap: 12px;
}

.smartbox-current-task {
  position: sticky;
  top: 12px;
}

.smartbox-task-stage {
  display: grid;
  gap: 12px;
  width: min(880px, 100%);
  margin: 0 auto;
}

.smartbox-panel.smartbox-result-panel {
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.smartbox-result-table td:first-child,
.smartbox-result-table th:first-child {
  width: 56px;
}

.smartbox-table-wrap {
  overflow-x: auto;
}

.smartbox-result-table {
  width: 100%;
  min-width: 680px;
  border-collapse: separate;
  border-spacing: 0 8px;
}

.smartbox-result-table th,
.smartbox-result-table td {
  padding: 10px;
  color: var(--txt);
  text-align: left;
  vertical-align: middle;
}

.smartbox-result-table th {
  color: var(--mut);
  font-size: 11px;
  font-weight: 400;
}

.smartbox-result-table tbody tr {
  background: rgba(8, 16, 32, 0.54);
}

.smartbox-result-table tbody td {
  border-top: 1px solid rgba(70, 140, 235, 0.16);
  border-bottom: 1px solid rgba(70, 140, 235, 0.16);
}

.smartbox-result-table tbody td:first-child {
  border-left: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 10px 0 0 10px;
}

.smartbox-result-table tbody td:last-child {
  border-right: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 0 10px 10px 0;
}

.smartbox-result-table b,
.smartbox-result-table small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smartbox-result-table small,
.smartbox-column-card small,
.smartbox-column-card span,
.smartbox-quiet-task span,
.smartbox-stage-trail span {
  color: var(--mut);
  font-size: 11px;
}

.smartbox-table-actions {
  width: 136px;
  white-space: nowrap;
}

.smartbox-table-actions .btn + .btn {
  margin-left: 6px;
}

.smartbox-column-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.smartbox-column-card {
  min-width: 0;
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 10px;
  padding: 10px;
  background: rgba(8, 16, 32, 0.54);
}

.smartbox-column-card b,
.smartbox-column-card span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smartbox-column-card b {
  margin: 3px 0;
  color: var(--txt);
}

.smartbox-stage-trail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.smartbox-stage-trail span {
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(8, 16, 32, 0.54);
}

.smartbox-stage-trail span.done {
  color: var(--green);
  border-color: rgba(25, 230, 160, 0.28);
}

.smartbox-stage-trail span.current {
  color: #06121c;
  border-color: transparent;
  background: var(--green);
}

.smartbox-quiet-task {
  min-height: 180px;
  place-items: center;
  text-align: center;
}

.smartbox-quiet-task b,
.smartbox-quiet-task span {
  display: block;
}

.smartbox-quiet-task b {
  margin-bottom: 6px;
  color: var(--txt);
  font-size: 18px;
}

.smartbox-current-task .smartbox-form,
.smartbox-current-task .smartbox-unit,
.smartbox-current-task .smartbox-meter-row {
  grid-template-columns: minmax(0, 1fr);
}

.smartbox-current-task .smartbox-source {
  grid-column: 1 / -1;
}

.smart-box-page .pt {
  margin-bottom: 10px;
  color: var(--txt);
  font-size: 14px;
  font-weight: 500;
}

.smart-box-page .pt .r {
  float: right;
  color: var(--mut);
  font-size: 11px;
  font-weight: 400;
}

.smart-box-page .tag {
  display: inline;
  min-height: 0;
  border: 0;
  border-radius: 20px;
  margin-left: 6px;
  padding: 2px 8px;
  color: #9fc6ff;
  background: rgba(47, 139, 255, 0.16);
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.5;
}

.smart-box-page .tag.g {
  color: #86efac;
  background: rgba(34, 197, 94, 0.18);
}

.smart-box-page .tag.w {
  color: #ffd089;
  background: rgba(255, 177, 61, 0.18);
}

.smartbox-form,
.smartbox-unit,
.smartbox-meter-row {
  display: grid;
  gap: 10px;
}

.smartbox-form {
  grid-template-columns: minmax(190px, 0.9fr) minmax(230px, 1.1fr) minmax(120px, 0.55fr) minmax(170px, 0.75fr);
  align-items: end;
}

.smartbox-form label,
.smartbox-unit label,
.smartbox-meter-row label {
  min-width: 0;
  color: var(--mut);
  font-size: 11px;
}

.smart-box-page .inp {
  width: 100%;
  min-width: 0;
  height: 34px;
  min-height: 0;
  margin-top: 4px;
}

.smartbox-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.smartbox-form .smartbox-actions {
  grid-column: 1 / -1;
  margin-top: 0;
}

body[data-route="platform/smart-box-onboarding"] .smart-box-page .btn {
  min-height: 34px;
  border: 1px solid var(--line);
  padding: 7px 11px;
  color: var(--txt);
  background: #12203c;
  font: 12.5px Arial;
  font-weight: 400;
  line-height: normal;
}

body[data-route="platform/smart-box-onboarding"] .smart-box-page .btn.pri {
  color: #07111c;
  background: var(--green);
}

.smartbox-note {
  margin: 10px 0 0;
}

.smartbox-discovery {
  display: grid;
  gap: 8px;
}

.smartbox-poll {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  border: 1px solid rgba(25, 230, 160, 0.2);
  border-radius: 10px;
  padding: 9px 10px;
  color: #cfe0ff;
  background: rgba(25, 230, 160, 0.08);
}

.smartbox-poll b {
  color: var(--green);
  font-size: 12px;
}

.smartbox-poll span {
  overflow: hidden;
  color: var(--mut);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smartbox-discovery-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) minmax(110px, auto);
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
}

.smartbox-discovery-row span,
.smartbox-discovery-row b,
.smartbox-discovery-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smartbox-discovery-row span {
  color: var(--green);
  font-weight: 700;
}

.smartbox-discovery-row b {
  color: var(--txt);
}

.smartbox-discovery-row.bound {
  opacity: 0.7;
}

.smartbox-unit-list,
.smartbox-meter-list {
  display: grid;
  gap: 10px;
}

.smartbox-unit {
  grid-template-columns: 72px repeat(3, minmax(130px, 1fr));
  align-items: end;
  padding: 10px;
}

.smartbox-unit > div {
  min-width: 0;
}

.smartbox-unit b,
.smartbox-unit span {
  display: block;
  overflow: hidden;
  color: var(--txt);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smartbox-unit span {
  color: var(--mut);
  font-size: 11px;
}

.smartbox-source {
  grid-column: 2 / -1;
  overflow: hidden;
  color: var(--mut);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smartbox-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
}

.smartbox-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--green);
}

.smartbox-meter-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 10px;
  overflow: hidden;
}

.smartbox-meter-row .smartbox-check {
  grid-column: 1 / -1;
}

.smart-box-page select.inp {
  text-overflow: ellipsis;
}

.smartbox-review {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.smartbox-review div {
  padding: 10px;
}

.smartbox-review b {
  display: block;
  overflow: hidden;
  color: var(--txt);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smartbox-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.smartbox-links a {
  overflow: hidden;
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 10px;
  padding: 10px;
  color: #cfe0ff;
  background: rgba(8, 16, 32, 0.54);
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-meters-page,
.meterbody,
.meterside,
.meterstats,
.metercards,
.meterchain-list,
.readquality {
  display: grid;
  gap: 12px;
}

.meter-filters {
  grid-template-columns: repeat(3, minmax(128px, 1fr)) repeat(7, max-content);
}

.meter-filters .btn.danger {
  border-color: var(--border-danger-subtle);
  color: var(--danger);
}

.meteralert {
  border: 1px solid var(--warning);
  border-radius: var(--radius);
  padding: 10px 12px;
  color: var(--text);
  background: var(--surface-panel);
}

.meterstats {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.meterstat {
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface-panel);
}

.meterstat small,
.meterstat span,
.metermeta small,
.meterread small,
.meterhero small,
.meterchain-row.head,
.readq span,
.meternote,
.bindrow small {
  color: var(--muted);
  font-size: 12px;
}

.meterstat b {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 24px;
}

.meterstat span {
  display: block;
  margin-top: 4px;
}

.meterbody {
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
  align-items: start;
}

.meterpanel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  background: var(--surface-panel);
  box-shadow: var(--shadow);
}

.meterpanel + .meterpanel {
  margin-top: 12px;
}

.metercards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metercard {
  min-width: 0;
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--surface-panel-deep);
}

.metercard.ok {
  border-color: var(--border-accent-strong);
}

.metercard.warn {
  border-color: var(--warning);
}

.metercard.bad {
  border-color: var(--border-danger-subtle);
}

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

.meterhead b {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meterhead .tag {
  flex: 0 0 auto;
}

.metermeta {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 6px 10px;
  color: var(--text-soft);
  font-size: 12px;
}

.metermeta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meterread {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.meterread div {
  min-width: 0;
  border: 1px solid var(--border-muted-faint);
  border-radius: var(--radius);
  padding: 8px;
  background: var(--surface-panel-deep);
}

.meterread b {
  display: block;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meteractions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.meterflow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.meterflow div {
  min-width: 0;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface-panel-deep);
  text-align: center;
}

.meterflow small {
  display: block;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meterflow i {
  color: var(--accent);
  font-style: normal;
  font-weight: 900;
}

.meterchain-row {
  display: grid;
  grid-template-columns: minmax(96px, 1fr) minmax(100px, 1fr) minmax(90px, 0.9fr) 92px 82px;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 9px;
  color: var(--text-soft);
  background: var(--surface-panel-deep);
  font-size: 12px;
}

.meterchain-row.head {
  background: var(--surface-panel-muted);
  font-weight: 900;
}

.meterchain-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meterhero {
  border: 1px solid var(--border-accent-strong);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--surface-panel-deep);
}

.meterhero b {
  display: block;
  margin: 4px 0;
  color: var(--badge-green-text);
  font-size: 20px;
}

.bindcols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.bindcol {
  min-width: 0;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--surface-panel-deep);
}

.bindcol h4 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 13px;
}

.bindrow {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  color: var(--text-soft);
  font-size: 12px;
}

.bindrow + .bindrow {
  border-top: 1px solid var(--border-muted-faint);
}

.bindrow small {
  grid-column: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bindrow.muted {
  color: var(--muted);
}

.bindmid {
  display: grid;
  align-content: center;
  gap: 8px;
}

.readquality {
  gap: 9px;
}

.readq {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) 54px;
  gap: 8px;
  align-items: center;
}

.readq .rail {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-track);
}

.readq .rail i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--quota-gradient);
}

.readq.warn .rail i {
  background: var(--warning);
}

.readq b {
  color: var(--text);
  text-align: right;
}

.meternote {
  margin: 10px 0 0;
  line-height: 1.5;
}

.project-meters-page .filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.project-meters-page {
  display: block;
  gap: 0;
  font: 13px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif;
}

.project-meters-page .filters > span {
  align-self: center;
  color: var(--text-bar);
  font-size: 13px;
  line-height: 19.5px;
}

.project-meters-page .sel {
  box-sizing: border-box;
  height: 35px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 24px 0 12px;
  color: var(--txt);
  background: #12203c;
  font: 400 12.5px Arial;
}

.project-meters-page .filters select:nth-of-type(1) {
  width: 96px;
}

.project-meters-page .filters select:nth-of-type(2) {
  width: 134px;
}

.project-meters-page .meter-danger {
  border-color: #ef4444;
  background: #7f1d1d;
}

.project-meters-page .btn {
  display: inline-block;
  min-height: 0;
  padding: 7px 12px;
  font: 400 12.5px Arial;
  line-height: normal;
}

.project-meters-page .meteralert {
  border: 1px solid rgba(255, 177, 61, 0.3);
  border-radius: 9px;
  margin-bottom: 12px;
  padding: 10px 13px;
  color: #ffd089;
  background: rgba(255, 177, 61, 0.16);
  font-size: 12px;
}

.project-meters-page .meterstats {
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.project-meters-page .meterstat {
  box-sizing: border-box;
  height: 72px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 13px;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.52), rgba(8, 18, 35, 0.58));
}

.project-meters-page .meterstat small,
.project-meters-page .meterstat span,
.project-meters-page .metermeta small,
.project-meters-page .meterread small,
.project-meters-page .meterhero small,
.project-meters-page .meterchain-row.head,
.project-meters-page .readq span,
.project-meters-page .meternote,
.project-meters-page .bindrow small {
  color: var(--mut);
  font-size: 10px;
}

.project-meters-page .meterstat small,
.project-meters-page .meterread small,
.project-meters-page .meterhero small {
  display: block;
}

.project-meters-page .meterstat b {
  display: inline;
  margin-top: 0;
  color: var(--txt);
  font-size: 22px;
}

.project-meters-page .meterstat span {
  display: inline;
  float: right;
  margin-top: 7px;
}

.project-meters-page .meterbody {
  grid-template-columns: minmax(0, 1fr) 370px;
  gap: 12px;
  align-items: start;
}

.project-meters-page .metercards {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.project-meters-page .metercard {
  box-sizing: border-box;
  position: relative;
  display: block;
  height: 313px;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 14px;
  background: linear-gradient(155deg, rgba(20, 42, 80, 0.56), rgba(8, 18, 35, 0.68));
}

.project-meters-page .metercard::after {
  position: absolute;
  right: -42px;
  top: -42px;
  width: 128px;
  height: 128px;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, currentColor, transparent 65%);
  opacity: 0.1;
}

.project-meters-page .metercard.ok {
  border-color: var(--line);
  color: #19e6a0;
}

.project-meters-page .metercard.warn {
  border-color: var(--line);
  color: #ffb13d;
}

.project-meters-page .metercard.bad {
  border-color: var(--line);
  color: #ff5a6a;
}

.project-meters-page .meterhead {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.project-meters-page .meterhead b {
  flex: 0 1 auto;
  overflow: visible;
  color: var(--txt);
  font-size: 15px;
  white-space: normal;
}

.project-meters-page .meterhead .tag {
  margin-left: auto;
}

.project-meters-page .metermeta {
  grid-template-columns: 92px 1fr;
  gap: 5px 10px;
  color: var(--text-bar);
  font-size: 12px;
}

.project-meters-page .metermeta span {
  overflow: visible;
  color: var(--text-bar);
  text-overflow: clip;
  white-space: normal;
}

.project-meters-page .meterread {
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin: 11px 0;
}

.project-meters-page .meterread div {
  border: 0;
  border-radius: 8px;
  padding: 7px;
  background: rgba(8, 16, 32, 0.55);
}

.project-meters-page .meterread b {
  display: block;
  overflow: visible;
  color: #fff;
  font-size: 13px;
  text-overflow: clip;
  white-space: normal;
}

.project-meters-page .meteractions {
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  margin-top: 10px;
}

.project-meters-page .meteractions .btn {
  padding: 5px 10px;
}

.project-meters-page .meterpanel {
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 0;
  padding: 14px;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.52), rgba(8, 18, 35, 0.64));
  box-shadow: none;
}

.project-meters-page .meterpanel + .meterpanel {
  margin-top: 0;
}

body[data-shell="business"] .project-meters-page .pt {
  margin: 0 0 11px;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

body[data-shell="business"] .project-meters-page .pt .r {
  margin-left: auto;
  color: var(--mut);
  font-size: 11px;
  font-weight: 400;
}

body[data-shell="business"] .project-meters-page .tag {
  display: inline;
  min-height: 0;
  border: 0;
  border-radius: 20px;
  padding: 2px 8px;
  color: #9fc6ff;
  background: rgba(47, 139, 255, 0.16);
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.5;
}

body[data-shell="business"] .project-meters-page .tag.g {
  color: #86efac;
  background: rgba(34, 197, 94, 0.18);
}

body[data-shell="business"] .project-meters-page .tag.w {
  color: #ffd089;
  background: rgba(255, 177, 61, 0.18);
}

body[data-shell="business"] .project-meters-page .tag.b {
  color: #ff9aa4;
  background: rgba(255, 90, 106, 0.18);
}

.project-meters-page .acctform {
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.project-meters-page .acctfield {
  box-sizing: border-box;
  display: block;
  min-width: auto;
  overflow: visible;
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 9px;
  padding: 9px 10px;
  background: rgba(8, 16, 32, 0.52);
}

.project-meters-page .meterpanel:first-child .acctfield {
  height: 75px;
}

.project-meters-page .meterpanel:first-child .acctfield:nth-child(n + 5) {
  height: 57px;
}

.project-meters-page .acctfield b {
  overflow: visible;
  font-size: 12px;
  text-overflow: unset;
  white-space: normal;
}

.project-meters-page .meterpanel:first-child .acctfield input[data-field] {
  width: 100%;
  min-height: 0;
  height: auto;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--text);
  font: 700 12px/18px "Segoe UI", "Microsoft YaHei", sans-serif;
  outline: 0;
}

.project-meters-page .meterpanel:first-child .acctfield input[data-field]:focus {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.project-meters-page .meterhero {
  box-sizing: border-box;
  height: 95px;
  border: 1px solid rgba(25, 230, 160, 0.34);
  border-radius: 12px;
  margin-bottom: 12px;
  padding: 13px;
  background: radial-gradient(circle at 88% 18%, rgba(25, 230, 160, 0.22), transparent 45%), rgba(8, 16, 32, 0.62);
}

.project-meters-page .meterhero b {
  display: block;
  margin: 0;
  color: #86efac;
  font-size: 21px;
}

.project-meters-page .meterflow {
  grid-template-columns: 1fr 26px 1fr 26px 1fr;
  gap: 0;
  align-items: center;
  margin: 12px 0;
  color: var(--text-bar);
  font-size: 11px;
  text-align: center;
}

.project-meters-page .meterflow div {
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 9px;
  padding: 9px 4px;
  background: rgba(8, 16, 32, 0.54);
}

.project-meters-page .meterflow small {
  display: inline;
  overflow: visible;
  color: var(--mut);
  text-overflow: clip;
  white-space: normal;
}

.project-meters-page .meterflow i {
  color: var(--cyan);
  font-style: normal;
  font-weight: 400;
}

.project-meters-page .meter-chain-panel {
  margin-top: 12px;
}

.project-meters-page table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.project-meters-page th,
.project-meters-page td {
  border-bottom: 1px solid var(--line);
  padding: 8px 7px;
  color: var(--text-bar);
  line-height: 1.5;
  text-align: left;
}

.project-meters-page th {
  color: var(--mut);
  font-size: 11px;
  font-weight: 600;
}

.project-meters-page .bindcols {
  grid-template-columns: 1fr 74px 1fr;
  gap: 10px;
  align-items: start;
}

.project-meters-page .bindcol {
  min-height: 210px;
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 10px;
  padding: 10px;
  background: rgba(8, 16, 32, 0.52);
}

.project-meters-page .bindcol h4 {
  margin: 0 0 8px;
  color: var(--text-bar);
  font-size: 12px;
}

.project-meters-page .bindrow {
  display: flex;
  grid-template-columns: none;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid rgba(70, 140, 235, 0.12);
  padding: 8px 0;
  color: var(--text-bar);
  font-size: 12px;
}

.project-meters-page .bindrow + .bindrow {
  border-top: 0;
}

.project-meters-page .bindrow small {
  grid-column: auto;
  margin-left: auto;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.project-meters-page .bindmid {
  display: grid;
  gap: 10px;
  align-self: center;
}

.project-meters-page .bindmid .btn {
  padding: 8px 6px;
}

.project-meters-page .readquality {
  gap: 8px;
}

.project-meters-page .readq {
  grid-template-columns: 82px 1fr 46px;
  gap: 8px;
  color: var(--text-bar);
  font-size: 12px;
}

.project-meters-page .readq .rail {
  height: 8px;
  border-radius: 8px;
  background: rgba(70, 140, 235, 0.18);
}

.project-meters-page .readq .rail i {
  background: linear-gradient(90deg, var(--green), var(--cyan));
}

.project-meters-page .readq.warn .rail i {
  background: linear-gradient(90deg, var(--warn), #ffd089);
}

.project-meters-page .readq b {
  color: var(--txt);
  text-align: left;
}

.project-meters-page .meternote {
  margin-top: 10px;
  color: var(--mut);
  font-size: 11px;
}

body[data-shell="business"] .project-meters-page .savebar {
  box-sizing: border-box;
  gap: 8px;
  height: 46px;
  justify-content: flex-end;
  margin-top: 12px;
  min-height: 0;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.project-meters-page > .ledger-message:empty {
  display: none;
  min-height: 0;
}

.project-meters-page .meterpanel .acctfield:has(input),
.project-meters-page .meterpanel .acctfield:has(select) {
  height: auto;
  min-height: 57px;
}

.project-meters-page .meterpanel .acctfield input,
.project-meters-page .meterpanel .acctfield select {
  width: 100%;
  box-sizing: border-box;
  background: var(--input-bg, #13191f);
  color: var(--text, #e8eaf0);
  border: 1px solid var(--border, #2d3748);
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 12px;
  margin-top: 4px;
}

.tariffs-page,
.tariffstats {
  display: grid;
  gap: 12px;
}

.tariffstats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.tariffstat {
  min-height: 72px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 13px;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.52), rgba(8, 18, 35, 0.58));
}

.tariffstat small,
.tariffstat span,
.tariffdesc,
.tariffnote {
  color: var(--muted);
  font-size: 12px;
}

.tariffstat small {
  display: block;
  font-size: 10px;
}

.tariffstat b {
  color: var(--text);
  font-size: 22px;
}

.tariffstat strong {
  color: var(--accent);
  font-size: 22px;
}

.tariffstat span {
  float: right;
  margin-top: 7px;
  font-size: 11px;
}

.tariffhero {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.52), rgba(8, 18, 35, 0.64));
  box-shadow: var(--shadow);
}

.tariffhero {
  border-color: var(--border-accent-strong);
  padding: 16px;
  background: radial-gradient(circle at 90% 18%, rgba(25, 230, 160, 0.2), transparent 45%), rgba(8, 16, 32, 0.62);
}

.tariffhero h3 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 20px;
}


.tariffdesc,
.tariffnote {
  line-height: 1.5;
}

.tariffdesc {
  margin-bottom: 14px;
}

.tariffform {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.tariffform .inp {
  width: 160px;
}



.tariff-simple-card {
  display: grid;
  gap: 18px;
}

.tariff-simple-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
}

.tariff-current-rate {
  min-width: 128px;
  border: 1px solid rgba(111, 190, 255, 0.28);
  border-radius: 8px;
  padding: 12px 14px;
  text-align: right;
  background: rgba(17, 34, 62, 0.72);
}

.tariff-current-rate span,
.tariff-status-note {
  color: var(--text-soft);
  font-size: 12px;
}

.tariff-current-rate strong {
  display: block;
  margin: 4px 0;
  color: var(--accent);
  font-size: 28px;
}

.tariff-simple-fields,
.tariff-actions-simple {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
}

.tariff-simple-fields label {
  display: grid;
  gap: 6px;
  color: var(--text-soft);
  font-size: 12px;
}

.tariffform span:not(.tag) {
  color: var(--text-soft);
}

.tariffwarn {
  margin-top: 10px;
  border: 1px solid var(--warning);
  border-radius: 9px;
  padding: 9px 11px;
  color: var(--badge-amber-text);
  background: rgba(255, 177, 61, 0.12);
  font-size: 12px;
}

.tariffs-page .tag {
  min-height: 20px;
  border-radius: 20px;
  padding: 0 8px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 700;
}


.billing-page,
.feelayout,
.feestats,
.feebody,
.feeside,
.feesplit,
.feerules {
  display: grid;
  gap: 12px;
}

.feelayout {
  grid-template-columns: 270px minmax(0, 1fr);
  align-items: start;
}

.feetree {
  min-width: 0;
  position: sticky;
  top: 84px;
  max-height: calc(100vh - 110px);
  overflow: auto;
}

.feetree .inp {
  width: 100%;
  margin-bottom: 12px;
}

.feetree-list {
  display: grid;
  gap: 6px;
}

.feetreeitem {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 58px;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--border-muted-faint);
  border-radius: var(--radius);
  padding: 9px;
  color: var(--text-soft);
  background: var(--surface-panel-deep);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.feetreeitem.on {
  border-color: var(--border-accent-strong);
  color: var(--text);
  background: var(--surface-panel);
}

.feetreeitem span:nth-child(2),
.feetreeitem small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feetreeitem small {
  color: var(--muted);
  text-align: right;
}

.feequery {
  display: grid;
  grid-template-columns: auto 140px auto 140px minmax(150px, 1fr) repeat(4, max-content) minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.feequery label,
.feequery span {
  color: var(--muted);
  font-size: 12px;
}

.feequery .sp {
  min-width: 0;
}

.feestats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 12px;
}

.feestat {
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface-panel);
}

.feestat small,
.feestat span,
.feedetail small,
.feehint {
  color: var(--muted);
  font-size: 12px;
}

.feestat b,
.feestat strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 24px;
}

.feestat strong {
  color: var(--badge-green-text);
}

.feestat b.warn,
.feestat strong.warn {
  color: var(--warning);
}

.feestat span {
  display: block;
  margin-top: 4px;
}

.feebody {
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
  align-items: start;
}

.feetable,
.feepanel,
.feedetail {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  background: var(--surface-panel);
  box-shadow: var(--shadow);
}

.feepanel + .feepanel {
  margin-top: 12px;
}

.fee-table-grid {
  display: grid;
  gap: 7px;
}

.fee-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.fee-table th,
.fee-table td {
  border-bottom: 1px solid var(--line);
  padding: 8px 7px;
  text-align: left;
}

.fee-table th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.fee-table tr.lk {
  cursor: pointer;
}

.fee-table tr.lk:hover td {
  background: rgba(47, 139, 255, 0.1);
}

.fee-table tr.lk.on td {
  background: rgba(25, 230, 160, 0.1);
}

.fee-table td {
  max-width: 156px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fee-device-table-wrap {
  overflow-x: auto;
}

.fee-device-table {
  min-width: 680px;
}

.fee-device-table td b,
.fee-device-table td small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fee-device-table td small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.fee-device-warn td {
  background: rgba(255, 177, 61, 0.08);
}

.fee-table-meta {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
}

.fee-table-meta span,
.fee-table-meta b {
  min-width: 0;
}

.fee-table-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fee-table-meta b {
  color: var(--text);
  white-space: nowrap;
}

.fee-row {
  display: grid;
  grid-template-columns: 42px minmax(70px, 0.7fr) minmax(120px, 1.2fr) 86px 88px minmax(88px, 0.9fr) 76px;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 9px;
  color: var(--text-soft);
  background: var(--surface-panel-deep);
  font-size: 12px;
}

.fee-row.head {
  color: var(--muted);
  background: var(--surface-panel-muted);
  font-weight: 900;
}

.fee-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.money {
  color: var(--badge-green-text);
  font-weight: 900;
}

.zero {
  color: var(--muted);
}

.tenant-pending {
  color: var(--muted);
}

.feeoverflow {
  margin-top: 9px;
  border: 1px dashed var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 9px;
  color: var(--muted);
  background: var(--surface-panel-deep);
  font-size: 12px;
}

.feehint {
  margin-top: 12px;
  border: 1px solid var(--warning);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--surface-panel-deep);
  line-height: 1.5;
}

.feechain {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.feechain div {
  min-width: 0;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 12px;
  color: var(--text-soft);
  background: var(--surface-panel-deep);
  text-align: center;
}

.feechain b {
  display: block;
  color: var(--text);
}

.feechain i {
  color: var(--accent);
  font-style: normal;
  font-weight: 900;
}

.feedetail {
  border-color: var(--border-accent-strong);
}

.feedetail b {
  display: block;
  margin: 4px 0 12px;
  color: var(--badge-green-text);
  font-size: 22px;
}

.feeactions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.feesplitrow {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 76px;
  gap: 8px;
  align-items: center;
}

.feesplitrow span {
  color: var(--muted);
  font-size: 12px;
}

.feesplitrow .rail {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-track);
}

.feesplitrow .rail i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--quota-gradient);
}

.feesplitrow.warn .rail i {
  background: var(--warning);
}

.feesplitrow b {
  color: var(--text);
  text-align: right;
}

.feerule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 10px;
  color: var(--text-soft);
  background: var(--surface-panel-deep);
  font-size: 12px;
}

.meter-readings-page,
.readstats,
.readbody,
.readside,
.readbars,
.readissues {
  display: grid;
  gap: 12px;
}

.meter-reading-filters {
  grid-template-columns: repeat(6, minmax(120px, 1fr)) repeat(3, max-content);
}

.meter-reading-filters .field {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 10px;
  background: var(--surface-panel);
}

.meter-reading-filters .inp {
  min-height: 30px;
  border-color: var(--border-muted-soft);
  background: var(--surface-panel-deep);
}

.readstats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.readstat {
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface-panel);
}

.readstat small,
.readstat span,
.readhero small,
.readbar span,
.readissue small {
  color: var(--muted);
  font-size: 12px;
}

.readstat b,
.readstat strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 24px;
}

.readstat strong {
  color: var(--badge-green-text);
}

.readstat span {
  display: block;
  margin-top: 4px;
}

.readbody {
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
  align-items: start;
}

.readtable,
.readpanel,
.readhero {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  background: var(--surface-panel);
  box-shadow: var(--shadow);
}

.readpanel + .readpanel {
  margin-top: 12px;
}

.readtable {
  overflow-x: auto;
}

.read-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 7px;
  table-layout: fixed;
}

.read-table th,
.read-table td {
  border: 1px solid var(--border-muted-soft);
  padding: 9px 10px;
  color: var(--text-soft);
  background: var(--surface-panel-deep);
  font-size: 12px;
  text-align: left;
  vertical-align: middle;
}

.read-table th {
  color: var(--muted);
  background: var(--surface-panel-muted);
  font-weight: 900;
}

.read-table tr.lk {
  cursor: default;
}

.read-table tr.lk:hover td {
  border-color: var(--border-accent-strong);
  background: var(--surface-panel-muted);
}

.read-table th:first-child,
.read-table td:first-child {
  border-radius: var(--radius) 0 0 var(--radius);
  width: 42px;
}

.read-table th:last-child,
.read-table td:last-child {
  border-radius: 0 var(--radius) var(--radius) 0;
}

.read-table th:nth-child(5),
.read-table td:nth-child(5),
.read-table th:nth-child(6),
.read-table td:nth-child(6) {
  width: 74px;
}

.read-table th:nth-child(7),
.read-table td:nth-child(7) {
  width: 82px;
}

.read-table th:nth-child(8),
.read-table td:nth-child(8) {
  width: 94px;
}

.read-table th,
.read-table td {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.readok,
.readwait {
  border-radius: 999px;
  padding: 3px 8px;
  color: var(--badge-green-text);
  background: var(--badge-green-bg);
  font-weight: 800;
}

.readwait {
  color: var(--warning);
  background: var(--surface-panel);
}

.readflow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.readflow div {
  min-width: 0;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 12px;
  color: var(--text-soft);
  background: var(--surface-panel-deep);
  text-align: center;
}

.readflow b {
  display: block;
  color: var(--text);
}

.readflow i {
  color: var(--accent);
  font-style: normal;
  font-weight: 900;
}

.readhero {
  border-color: var(--border-accent-strong);
}

.readhero b {
  display: block;
  margin: 4px 0 12px;
  color: var(--badge-green-text);
  font-size: 20px;
}

.readbars {
  gap: 9px;
}

.readbar {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) 54px;
  gap: 8px;
  align-items: center;
}

.readbar .rail {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-track);
}

.readbar .rail i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--quota-gradient);
}

.readbar b {
  color: var(--text);
  text-align: right;
}

.readissue {
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 10px;
  color: var(--text-soft);
  background: var(--surface-panel-deep);
}

.readissue.warn {
  border-color: var(--warning);
}

.readissue.bad {
  border-color: var(--border-danger-subtle);
}

.readissue small {
  display: block;
  margin-top: 4px;
  line-height: 1.5;
}

body[data-route="billing"] .feelayout {
  grid-template-columns: 300px minmax(0, 1fr);
}

body[data-route="billing"] .feebody {
  grid-template-columns: minmax(0, 1fr) 370px;
}

body[data-route="billing"] .feetree {
  position: static;
  top: auto;
  min-height: 760px;
  overflow: hidden;
}

body[data-route="billing"] .feetreeitem,
body[data-route="runtime-records"] .feetreeitem,
body[data-route="daily-usage"] .feetreeitem {
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  padding: 8px 7px;
  color: var(--text-soft);
  background: transparent;
  font-size: 12px;
}

body[data-route="billing"] .feetreeitem.on,
body[data-route="runtime-records"] .feetreeitem.on,
body[data-route="daily-usage"] .feetreeitem.on {
  color: var(--text);
  background: rgba(47, 139, 255, 0.16);
}

body[data-route="billing"] .feetreeitem small,
body[data-route="runtime-records"] .feetreeitem small,
body[data-route="daily-usage"] .feetreeitem small {
  color: var(--muted);
  font-size: 10px;
}

body[data-route="billing"] .feequery {
  grid-template-columns: auto 170px auto 170px repeat(3, max-content) minmax(0, 1fr) auto auto;
}

body[data-route="billing"] .feequery .inp,
body[data-route="billing"] .feequery .btn {
  min-height: 32px;
  padding-top: 6px;
  padding-bottom: 6px;
}

body[data-route="billing"] .billing-zone-select {
  display: none;
}

body[data-route="billing"] .bill-draft-submit {
  display: none;
}

body[data-route="billing"] .feetree .inp {
  min-height: 32px;
  margin-bottom: 9px;
}

body[data-route="billing"] .feetree-list {
  gap: 4px;
}

body[data-route="billing"] .feetreeitem {
  padding: 7px 9px;
}

body[data-route="billing"] .feestat {
  box-sizing: border-box;
  height: 72px;
  padding: 9px 12px;
  overflow: hidden;
}

body[data-route="billing"] .feestat b,
body[data-route="billing"] .feestat strong {
  margin-top: 3px;
  font-size: 24px;
  line-height: 1;
}

body[data-route="billing"] .feestat span {
  margin-top: 3px;
}

body[data-route="billing"] .feetable,
body[data-route="billing"] .feepanel,
body[data-route="billing"] .feedetail {
  padding: 14px;
}

body[data-route="billing"] .fee-table th,
body[data-route="billing"] .fee-table td {
  padding: 6px 7px;
}

body[data-route="billing"] .feechain {
  grid-template-columns: 1fr 24px 1fr 24px 1fr 24px 1fr;
  gap: 0;
  margin: 12px 0;
  color: var(--text-soft);
  font-size: 11px;
  text-align: center;
}

body[data-route="billing"] .feechain div {
  border-radius: 9px;
  min-height: 48px;
  padding: 9px 5px;
}

body[data-route="billing"] .feechain b {
  margin-bottom: 3px;
  font-size: 12px;
}

body[data-route="billing"] .feedetail {
  padding: 13px;
}

body[data-route="billing"] .feedetail > b {
  margin: 0;
  color: var(--text);
  font-size: 22px;
}

body[data-route="billing"] .feedetail .sum {
  margin-top: 10px;
}

body[data-route="billing"] .feedetail .sum div {
  padding: 8px;
}

body[data-route="billing"] .feedetail .sum b {
  margin: 0;
  color: var(--text);
  font-size: 22px;
}

body[data-route="billing"] .feesplitrow {
  grid-template-columns: 58px minmax(0, 1fr) 64px;
  color: var(--text-soft);
  font-size: 12px;
}

body[data-route="billing"] .feerule {
  border-radius: 9px;
  padding: 8px 9px;
}

body[data-route="meter-readings"] .meter-reading-filters {
  display: flex;
  grid-template-columns: none;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

body[data-route="meter-readings"] .meter-reading-filters .field {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

body[data-route="meter-readings"] .meter-reading-filters label {
  color: var(--text-soft);
  font-size: 12px;
  white-space: nowrap;
}

body[data-route="meter-readings"] .meter-reading-filters .inp {
  width: 170px;
  min-height: 34px;
  border-color: var(--line);
  background: var(--surface-panel-deep);
}

body[data-route="meter-readings"] .meter-reading-filters .wide {
  width: 250px;
}

body[data-route="meter-readings"] .readstats {
  gap: 10px;
  margin-bottom: 12px;
}

body[data-route="meter-readings"] .readstat {
  border-radius: 11px;
  padding: 11px 13px;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.52), rgba(8, 18, 35, 0.58));
}

body[data-route="meter-readings"] .readstat small {
  font-size: 10px;
}

body[data-route="meter-readings"] .readstat b,
body[data-route="meter-readings"] .readstat strong {
  margin-top: 0;
  font-size: 22px;
}

body[data-route="meter-readings"] .readstat span {
  float: right;
  margin-top: 7px;
  font-size: 11px;
}

body[data-route="meter-readings"] .readstat b.warn {
  color: var(--warning);
}

body[data-route="meter-readings"] .readbody {
  grid-template-columns: minmax(0, 1fr) 370px;
  gap: 12px;
}

body[data-route="meter-readings"] .readtable,
body[data-route="meter-readings"] .readpanel,
body[data-route="meter-readings"] .readhero {
  border-radius: 12px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.52), rgba(8, 18, 35, 0.64));
  box-shadow: none;
}

body[data-route="meter-readings"] .readpanel {
  margin-bottom: 12px;
}

body[data-route="meter-readings"] .readtable {
  overflow: hidden;
}

body[data-route="meter-readings"] .read-table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: auto;
}

body[data-route="meter-readings"] .read-table th,
body[data-route="meter-readings"] .read-table td {
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 8px 7px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

body[data-route="meter-readings"] .read-table th {
  color: var(--muted);
  background: transparent;
  font-size: 11px;
  font-weight: 600;
}

body[data-route="meter-readings"] .read-table th:first-child,
body[data-route="meter-readings"] .read-table td:first-child {
  width: auto;
  border-radius: 0;
}

body[data-route="meter-readings"] .read-table th:last-child,
body[data-route="meter-readings"] .read-table td:last-child {
  border-radius: 0;
}

body[data-route="meter-readings"] .read-table th:nth-child(5),
body[data-route="meter-readings"] .read-table td:nth-child(5),
body[data-route="meter-readings"] .read-table th:nth-child(6),
body[data-route="meter-readings"] .read-table td:nth-child(6),
body[data-route="meter-readings"] .read-table th:nth-child(7),
body[data-route="meter-readings"] .read-table td:nth-child(7),
body[data-route="meter-readings"] .read-table th:nth-child(8),
body[data-route="meter-readings"] .read-table td:nth-child(8) {
  width: auto;
}

body[data-route="meter-readings"] .read-table tr.lk:hover td {
  border-color: var(--line);
  background: transparent;
}

body[data-route="meter-readings"] .readok,
body[data-route="meter-readings"] .readwait {
  border-radius: 0;
  padding: 0;
  background: transparent;
}

body[data-route="meter-readings"] .readflow {
  grid-template-columns: 1fr 24px 1fr 24px 1fr;
  gap: 0;
  margin: 12px 0;
  color: var(--text-soft);
  font-size: 11px;
  text-align: center;
}

body[data-route="meter-readings"] .readflow div {
  border-color: rgba(70, 140, 235, 0.16);
  border-radius: 9px;
  padding: 9px 4px;
  background: rgba(8, 16, 32, 0.54);
}

body[data-route="meter-readings"] .readflow b {
  margin-bottom: 3px;
  font-size: 12px;
}

body[data-route="meter-readings"] .readhero {
  border-color: rgba(25, 230, 160, 0.34);
  background: radial-gradient(circle at 88% 18%, rgba(25, 230, 160, 0.2), transparent 45%), rgba(8, 16, 32, 0.62);
}

body[data-route="meter-readings"] .readside {
  display: block;
}

body[data-route="meter-readings"] .readhero,
body[data-route="meter-readings"] .readside .readpanel {
  margin-bottom: 12px;
}

body[data-route="meter-readings"] .readhero b {
  margin: 0;
  color: var(--badge-green-text);
  font-size: 22px;
}

body[data-route="meter-readings"] .readhero .sum {
  margin-top: 10px;
}

body[data-route="meter-readings"] .readhero .sum div {
  border-radius: 8px;
  padding: 8px;
  background: rgba(8, 16, 32, 0.58);
}

body[data-route="meter-readings"] .readbar {
  grid-template-columns: 74px minmax(0, 1fr) 48px;
  color: var(--text-soft);
  font-size: 12px;
}

body[data-route="meter-readings"] .readbar b {
  color: var(--text-soft);
  text-align: left;
}

body[data-route="meter-readings"] .readissue {
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-left: 3px solid var(--accent);
  border-radius: 9px;
  padding: 8px 9px;
  background: rgba(8, 16, 32, 0.52);
  font-size: 12px;
}

body[data-route="meter-readings"] .readissue.warn {
  border-color: rgba(70, 140, 235, 0.16);
  border-left-color: var(--warning);
}

body[data-route="meter-readings"] .readissue.bad {
  border-color: rgba(70, 140, 235, 0.16);
  border-left-color: var(--danger);
}

body[data-route="meter-readings"] .readissue small {
  margin-top: 3px;
  font-size: 10px;
}

.runtime-records-page,
.runtime-main,
.runstats,
.runbody,
.runside,
.runbars,
.runissues {
  display: grid;
  gap: 12px;
}

.runtime-layout {
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: start;
}

.runtime-layout > .runtime-tree {
  grid-column: 1;
  grid-row: 1 / span 3;
}

.runtime-layout > .runtime-main {
  grid-column: 2;
  grid-row: 1;
}

.runtime-filters,
.runtime-filter-fields,
.runtime-filter-actions {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.runtime-filters {
  grid-template-columns: 1fr;
}

.runtime-filter-fields {
  grid-template-columns: minmax(260px, 1.45fr) minmax(180px, 1fr) minmax(230px, 1.15fr);
}

.runtime-filter-actions {
  grid-template-columns: minmax(180px, 0.9fr) repeat(5, max-content);
  align-items: end;
  justify-content: start;
}

.runtime-filters .field {
  min-height: 52px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  background: var(--surface-panel);
}

.runtime-filters label {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.runtime-filters .inp {
  width: 100%;
  height: 34px;
  min-height: 0;
  border-color: var(--border-muted-soft);
  background: var(--surface-panel-deep);
}

.runtime-tree .inp {
  width: 100%;
  margin-bottom: 12px;
}

.runtime-tree {
  position: static;
  top: auto;
  max-height: none;
  min-height: 760px;
  overflow: hidden;
}

.runstats {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.runstat {
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface-panel);
}

.runstat small,
.runstat span,
.runhero small,
.runbar span,
.runissue small {
  color: var(--muted);
  font-size: 12px;
}

.runstat b,
.runstat strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 24px;
}

.runstat strong {
  color: var(--badge-green-text);
}

.runstat.warn b,
.runstat.warn strong {
  color: var(--warning);
}

.runstat span {
  display: block;
  margin-top: 4px;
}

.runbody {
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
  align-items: start;
}

.runtable,
.runpanel,
.runhero {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  background: var(--surface-panel);
  box-shadow: var(--shadow);
}

.runpanel + .runpanel {
  margin-top: 12px;
}

.runtable {
  overflow-x: auto;
}

.run-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 7px;
  table-layout: fixed;
}

.run-table th,
.run-table td {
  border: 1px solid var(--border-muted-soft);
  padding: 9px 10px;
  color: var(--text-soft);
  background: var(--surface-panel-deep);
  font-size: 12px;
  text-align: left;
  vertical-align: middle;
}

.run-table th {
  color: var(--muted);
  background: var(--surface-panel-muted);
  font-weight: 900;
}

.run-table tr.lk {
  cursor: default;
}

.run-table tr.lk:hover td {
  border-color: var(--border-accent-strong);
  background: var(--surface-panel-muted);
}

.run-table th:first-child,
.run-table td:first-child {
  border-radius: var(--radius) 0 0 var(--radius);
  width: 42px;
}

.run-table th:nth-child(2),
.run-table td:nth-child(2) {
  width: 92px;
}

.run-table th:nth-child(3),
.run-table td:nth-child(3),
.run-table th:nth-child(4),
.run-table td:nth-child(4),
.run-table th:nth-child(6),
.run-table td:nth-child(6) {
  width: 70px;
}

.run-table th:nth-child(7),
.run-table td:nth-child(7),
.run-table th:nth-child(9),
.run-table td:nth-child(9),
.run-table th:nth-child(10),
.run-table td:nth-child(10) {
  width: 86px;
}

.run-table th:last-child,
.run-table td:last-child {
  border-radius: 0 var(--radius) var(--radius) 0;
}

.run-table th,
.run-table td {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runmins,
.runzero {
  color: var(--badge-green-text);
  font-weight: 900;
}

.runzero {
  color: var(--warning);
}

.runflow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.runflow.compact {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
}

.runflow div {
  min-width: 0;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 12px;
  color: var(--text-soft);
  background: var(--surface-panel-deep);
  text-align: center;
}

.runflow b {
  display: block;
  color: var(--text);
}

.runflow i {
  color: var(--accent);
  font-style: normal;
  font-weight: 900;
}

.runhero {
  border-color: var(--border-accent-strong);
}

.runhero b {
  display: block;
  margin: 4px 0 12px;
  color: var(--badge-green-text);
  font-size: 20px;
}

.runhero .sum {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.runhero .sum div {
  min-width: 0;
  border-radius: var(--radius);
  padding: 8px;
  background: var(--surface-panel-deep);
}

.runhero .sum b {
  margin-bottom: 0;
}

.runhero .sum b.good {
  color: var(--badge-green-text);
}

.runheat {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 7px;
}

.runheat span {
  min-height: 46px;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  background: var(--surface-panel-deep);
}

.runheat span.mid {
  border-color: var(--border-accent);
  background: var(--surface-panel-muted);
}

.runheat span.hot {
  border-color: var(--badge-green-text);
  background: var(--badge-green-bg);
}

.runbar {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) 54px;
  gap: 8px;
  align-items: center;
}

.runbar .rail {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-track);
}

.runbar .rail i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--quota-gradient);
}

.runbar b {
  color: var(--text);
  text-align: right;
}

.runissue {
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 10px;
  color: var(--text-soft);
  background: var(--surface-panel-deep);
}

.runissue.warn {
  border-color: var(--warning);
}

.runissue small {
  display: block;
  margin-top: 4px;
  line-height: 1.5;
}

body[data-route="runtime-records"] .runtable,
body[data-route="runtime-records"] .runpanel,
body[data-route="runtime-records"] .runhero {
  border-radius: 12px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.52), rgba(8, 18, 35, 0.64));
  box-shadow: none;
}

body[data-route="runtime-records"] .runtable {
  overflow: hidden;
}

body[data-route="runtime-records"] .run-table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}

body[data-route="runtime-records"] .run-table th,
body[data-route="runtime-records"] .run-table td {
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 8px 7px;
  background: transparent;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.35;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  word-break: keep-all;
}

body[data-route="runtime-records"] .run-table th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

body[data-route="runtime-records"] .run-table th:first-child,
body[data-route="runtime-records"] .run-table td:first-child {
  width: 42px;
  border-radius: 0;
}

body[data-route="runtime-records"] .run-table th:nth-child(2),
body[data-route="runtime-records"] .run-table td:nth-child(2) {
  width: 92px;
}

body[data-route="runtime-records"] .run-table th:nth-child(3),
body[data-route="runtime-records"] .run-table td:nth-child(3),
body[data-route="runtime-records"] .run-table th:nth-child(4),
body[data-route="runtime-records"] .run-table td:nth-child(4),
body[data-route="runtime-records"] .run-table th:nth-child(6),
body[data-route="runtime-records"] .run-table td:nth-child(6) {
  width: 70px;
}

body[data-route="runtime-records"] .run-table th:nth-child(7),
body[data-route="runtime-records"] .run-table td:nth-child(7),
body[data-route="runtime-records"] .run-table th:nth-child(9),
body[data-route="runtime-records"] .run-table td:nth-child(9),
body[data-route="runtime-records"] .run-table th:nth-child(10),
body[data-route="runtime-records"] .run-table td:nth-child(10) {
  width: 86px;
}

body[data-route="runtime-records"] .run-table th:last-child,
body[data-route="runtime-records"] .run-table td:last-child {
  border-radius: 0;
}

body[data-route="runtime-records"] .run-table tr.lk:hover td {
  border-color: var(--line);
  background: transparent;
}

body[data-route="runtime-records"] .runflow {
  gap: 0;
}

.daily-usage-page,
.daily-main,
.usestats,
.usebody,
.useside,
.usebars,
.useissues {
  display: grid;
  gap: 12px;
}

.daily-layout {
  grid-template-columns: 300px minmax(0, 1fr);
}

.daily-main {
  min-width: 0;
}

.daily-filters {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.daily-filters .field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  background: var(--surface-panel);
}

.daily-filters label {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.daily-filters .field:nth-child(1) {
  grid-column: 1 / 5;
}

.daily-filters .field:nth-child(2) {
  grid-column: 5 / 9;
}

.daily-filters .field:nth-child(3) {
  grid-column: 9 / 13;
}

.daily-filters .btn {
  grid-row: 2;
  min-height: 34px;
  padding: 7px 13px;
}

.daily-filters .btn:nth-child(4) {
  grid-column: 1 / 2;
}

.daily-filters .btn:nth-child(5) {
  grid-column: 2 / 3;
}

.daily-filters .btn:nth-child(6) {
  grid-column: 3 / 4;
}

.daily-filters .btn:nth-child(7) {
  grid-column: 4 / 6;
}

.daily-filters .inp {
  height: 34px;
  min-height: 0;
  min-height: 30px;
  border-color: var(--border-muted-soft);
  background: var(--surface-panel-deep);
}

.daily-tree .inp {
  width: 100%;
  margin-bottom: 12px;
}

.daily-tree {
  position: static;
  top: auto;
  min-height: 760px;
  overflow: hidden;
}

.usestats {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.usestat {
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface-panel);
}

.usestat small,
.usestat span,
.usehero small,
.usebar span,
.useissue small {
  color: var(--muted);
  font-size: 12px;
}

.usestat b,
.usestat strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 24px;
}

.usestat strong {
  color: var(--badge-green-text);
}

.usestat.warn b,
.usestat.warn strong {
  color: var(--warning);
}

.usestat span {
  display: block;
  margin-top: 4px;
}

.usebody {
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
  align-items: start;
}

.usetable,
.usepanel,
.usehero {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--surface-panel);
  box-shadow: var(--shadow);
}

.useside .usepanel,
.useside .usehero {
  padding: 11px 14px;
}

.usepanel + .usepanel {
  margin-top: 12px;
}

.usetable {
  overflow-x: auto;
}

.use-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 7px;
  table-layout: fixed;
}

.use-table th,
.use-table td {
  border: 1px solid var(--border-muted-soft);
  padding: 9px 10px;
  color: var(--text-soft);
  background: var(--surface-panel-deep);
  font-size: 12px;
  text-align: left;
  vertical-align: middle;
}

.use-table th {
  color: var(--muted);
  background: var(--surface-panel-muted);
  font-weight: 900;
}

.use-table tr.lk {
  cursor: default;
}

.use-table tr.lk:hover td {
  border-color: var(--border-accent-strong);
  background: var(--surface-panel-muted);
}

.use-table th:first-child,
.use-table td:first-child {
  border-radius: var(--radius) 0 0 var(--radius);
  width: 42px;
}

.use-table th:nth-child(4),
.use-table td:nth-child(4),
.use-table th:nth-child(5),
.use-table td:nth-child(5),
.use-table th:nth-child(6),
.use-table td:nth-child(6),
.use-table th:nth-child(7),
.use-table td:nth-child(7) {
  width: 92px;
}

.use-table th:last-child,
.use-table td:last-child {
  border-radius: 0 var(--radius) var(--radius) 0;
  width: 130px;
}

.use-table th,
.use-table td {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-usage-page .use-table th,
.daily-usage-page .use-table td {
  padding: 8px 8px;
  font-size: 11px;
  line-height: 1.3;
  white-space: normal;
}

.daily-usage-page .use-table th:first-child,
.daily-usage-page .use-table td:first-child {
  width: 38px;
}

.daily-usage-page .use-table th:nth-child(2),
.daily-usage-page .use-table td:nth-child(2) {
  width: 40px;
}

.daily-usage-page .use-table th:nth-child(3),
.daily-usage-page .use-table td:nth-child(3) {
  width: 76px;
}

.daily-usage-page .use-table th:nth-child(4),
.daily-usage-page .use-table td:nth-child(4) {
  width: 82px;
}

.daily-usage-page .use-table th:nth-child(5),
.daily-usage-page .use-table td:nth-child(5),
.daily-usage-page .use-table th:nth-child(6),
.daily-usage-page .use-table td:nth-child(6) {
  width: 66px;
}

.daily-usage-page .use-table th:nth-child(7),
.daily-usage-page .use-table td:nth-child(7) {
  width: 82px;
}

.daily-usage-page .use-table th:last-child,
.daily-usage-page .use-table td:last-child {
  width: 68px;
}

.usekwh,
.usemoney,
.use-table td.kwh,
.use-table td.money {
  color: var(--badge-green-text);
  font-weight: 900;
}

.useflow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.useflow div {
  min-width: 0;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 12px;
  color: var(--text-soft);
  background: var(--surface-panel-deep);
  text-align: center;
}

.useflow b {
  display: block;
  color: var(--text);
}

.useflow i {
  color: var(--accent);
  font-style: normal;
  font-weight: 900;
}

.usehero {
  border-color: var(--border-accent-strong);
}

.usehero b {
  display: block;
  margin: 4px 0 12px;
  color: var(--badge-green-text);
  font-size: 20px;
}

.usehero .sum {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.usehero .sum div {
  min-width: 0;
  border-radius: var(--radius);
  padding: 8px;
  background: var(--surface-panel-deep);
}

.usehero .sum b {
  margin-bottom: 0;
}

.usebar {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 70px;
  gap: 8px;
  align-items: center;
}

.usebar .rail {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-track);
}

.usebar .rail i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--quota-gradient);
}

.usebar b {
  color: var(--text);
  text-align: right;
}

.usemix {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.usemix div {
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 8px 10px;
  color: var(--text-soft);
  background: var(--surface-panel-deep);
}

.usemix b {
  display: block;
  margin-top: 4px;
  color: var(--badge-green-text);
  font-size: 16px;
}

.useissue {
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 7px 9px;
  color: var(--text-soft);
  background: var(--surface-panel-deep);
  font-size: 12px;
}

.useissue.warn {
  border-color: var(--warning);
}

.useissue small {
  display: block;
  margin-top: 3px;
  line-height: 1.35;
}

body[data-route="daily-usage"] .usetable,
body[data-route="daily-usage"] .usepanel,
body[data-route="daily-usage"] .usehero {
  border-radius: 12px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.52), rgba(8, 18, 35, 0.64));
  box-shadow: none;
}

body[data-route="daily-usage"] .usetable {
  overflow: hidden;
}

body[data-route="daily-usage"] .use-table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}

body[data-route="daily-usage"] .use-table th,
body[data-route="daily-usage"] .use-table td {
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 8px 7px;
  background: transparent;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.35;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  word-break: keep-all;
}

body[data-route="daily-usage"] .use-table th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

body[data-route="daily-usage"] .use-table th:first-child,
body[data-route="daily-usage"] .use-table td:first-child {
  width: 38px;
  border-radius: 0;
}

body[data-route="daily-usage"] .use-table th:nth-child(2),
body[data-route="daily-usage"] .use-table td:nth-child(2) {
  width: 40px;
}

body[data-route="daily-usage"] .use-table th:nth-child(3),
body[data-route="daily-usage"] .use-table td:nth-child(3) {
  width: 76px;
}

body[data-route="daily-usage"] .use-table th:nth-child(4),
body[data-route="daily-usage"] .use-table td:nth-child(4) {
  width: 82px;
}

body[data-route="daily-usage"] .use-table th:nth-child(5),
body[data-route="daily-usage"] .use-table td:nth-child(5),
body[data-route="daily-usage"] .use-table th:nth-child(6),
body[data-route="daily-usage"] .use-table td:nth-child(6) {
  width: 66px;
}

body[data-route="daily-usage"] .use-table th:nth-child(7),
body[data-route="daily-usage"] .use-table td:nth-child(7) {
  width: 82px;
}

body[data-route="daily-usage"] .use-table th:last-child,
body[data-route="daily-usage"] .use-table td:last-child {
  width: 68px;
  border-radius: 0;
}

body[data-route="daily-usage"] .use-table tr.lk:hover td {
  border-color: var(--line);
  background: transparent;
}

body[data-route="runtime-records"] .run-table,
body[data-route="daily-usage"] .use-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: auto;
  font-size: 12px;
}

body[data-route="runtime-records"] .run-table th,
body[data-route="runtime-records"] .run-table td,
body[data-route="daily-usage"] .use-table th,
body[data-route="daily-usage"] .use-table td {
  width: auto !important;
  max-width: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 8px 7px;
  background: transparent;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.5;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  word-break: normal;
}

body[data-route="runtime-records"] .run-table th,
body[data-route="daily-usage"] .use-table th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

body[data-route="runtime-records"] .run-table .tag,
body[data-route="daily-usage"] .use-table .tag {
  min-height: auto;
  padding: 2px 8px;
  line-height: 1.3;
  white-space: nowrap;
}

body[data-route="runtime-records"] .run-table td:nth-child(9) .tag {
  display: inline-block;
  width: 34px;
  padding: 2px 4px;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
}

body[data-route="daily-usage"] .daily-filters .field:nth-child(3) .inp {
  width: 235px;
}

body[data-route="runtime-records"] .run-table {
  table-layout: fixed;
}

body[data-route="runtime-records"] .run-table th:first-child,
body[data-route="runtime-records"] .run-table td:first-child { width: 30px !important; }
body[data-route="runtime-records"] .run-table th:nth-child(2),
body[data-route="runtime-records"] .run-table td:nth-child(2) { width: 66px !important; }
body[data-route="runtime-records"] .run-table th:nth-child(3),
body[data-route="runtime-records"] .run-table td:nth-child(3) { width: 34px !important; }
body[data-route="runtime-records"] .run-table th:nth-child(4),
body[data-route="runtime-records"] .run-table td:nth-child(4) { width: 31px !important; }
body[data-route="runtime-records"] .run-table th:nth-child(5),
body[data-route="runtime-records"] .run-table td:nth-child(5) { width: 55px !important; }
body[data-route="runtime-records"] .run-table th:nth-child(6),
body[data-route="runtime-records"] .run-table td:nth-child(6) { width: 31px !important; }
body[data-route="runtime-records"] .run-table th:nth-child(7),
body[data-route="runtime-records"] .run-table td:nth-child(7) { width: 59px !important; }
body[data-route="runtime-records"] .run-table th:nth-child(8),
body[data-route="runtime-records"] .run-table td:nth-child(8) { width: 55px !important; }
body[data-route="runtime-records"] .run-table th:nth-child(9),
body[data-route="runtime-records"] .run-table td:nth-child(9) { width: 50px !important; }
body[data-route="runtime-records"] .run-table th:nth-child(10),
body[data-route="runtime-records"] .run-table td:nth-child(10) { width: 42px !important; }

body[data-route="runtime-records"] .runtime-filters,
body[data-route="daily-usage"] .daily-filters {
  display: flex;
  grid-template-columns: none;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

body[data-route="runtime-records"] .runtime-filter-fields,
body[data-route="runtime-records"] .runtime-filter-actions {
  display: flex;
  flex: 0 0 100%;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
}

body[data-route="runtime-records"] .runtime-filters .field,
body[data-route="daily-usage"] .daily-filters .field {
  display: flex;
  min-height: auto;
  min-width: 0;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

body[data-route="runtime-records"] .runtime-filters label,
body[data-route="daily-usage"] .daily-filters label {
  color: var(--text-soft);
  font-size: 12px;
  white-space: nowrap;
}

body[data-route="runtime-records"] .runtime-filters .inp,
body[data-route="daily-usage"] .daily-filters .inp {
  width: 170px;
  min-height: 34px;
  border-color: var(--line);
  background: var(--surface-panel-deep);
}

body[data-route="runtime-records"] .runtime-filters .wide,
body[data-route="daily-usage"] .daily-filters .wide {
  width: 250px;
}

body[data-route="runtime-records"] .runtime-filters .btn,
body[data-route="daily-usage"] .daily-filters .btn {
  grid-column: auto;
  grid-row: auto;
  min-height: auto;
  padding: 7px 12px;
}

body[data-route="runtime-records"] .runtime-filters .btn.primary,
body[data-route="daily-usage"] .daily-filters .btn.primary {
  border: 1px solid var(--line);
  color: var(--txt);
  background: #12203c;
}


body[data-route="runtime-records"] .runstats,
body[data-route="daily-usage"] .usestats {
  gap: 10px;
  margin-bottom: 12px;
}

body[data-route="runtime-records"] .runstat,
body[data-route="daily-usage"] .usestat {
  border-color: var(--line);
  border-radius: 11px;
  padding: 11px 13px;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.52), rgba(8, 18, 35, 0.58));
}

body[data-route="runtime-records"] .runstat small,
body[data-route="daily-usage"] .usestat small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

body[data-route="runtime-records"] .runstat b,
body[data-route="runtime-records"] .runstat strong,
body[data-route="daily-usage"] .usestat b,
body[data-route="daily-usage"] .usestat strong {
  display: inline;
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
}

body[data-route="runtime-records"] .runstat span,
body[data-route="daily-usage"] .usestat span {
  display: inline;
  float: right;
  margin-top: 7px;
  color: var(--muted);
  font-size: 11px;
}

body[data-route="runtime-records"] .runbody,
body[data-route="daily-usage"] .usebody {
  grid-template-columns: minmax(0, 1fr) 370px;
  gap: 12px;
}

body[data-route="runtime-records"] .runhero,
body[data-route="daily-usage"] .usehero {
  margin-bottom: 12px;
  padding: 13px;
}

body[data-route="runtime-records"] .runhero {
  border-color: rgba(47, 139, 255, 0.34);
  background: radial-gradient(circle at 88% 18%, rgba(47, 139, 255, 0.2), transparent 45%), rgba(8, 16, 32, 0.62);
}

body[data-route="daily-usage"] .usehero {
  border-color: rgba(25, 230, 160, 0.34);
  background: radial-gradient(circle at 88% 18%, rgba(25, 230, 160, 0.2), transparent 45%), rgba(8, 16, 32, 0.62);
}

body[data-route="runtime-records"] .runhero small,
body[data-route="daily-usage"] .usehero small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

body[data-route="runtime-records"] .runhero b,
body[data-route="runtime-records"] .runhero .sum b,
body[data-route="daily-usage"] .usehero b,
body[data-route="daily-usage"] .usehero .sum b {
  display: inline;
  margin: 0;
  font-size: 22px;
}

body[data-route="runtime-records"] .runhero b,
body[data-route="runtime-records"] .runhero .sum b {
  color: #9fc6ff;
}

body[data-route="daily-usage"] .usehero b,
body[data-route="daily-usage"] .usehero .sum b {
  color: var(--badge-green-text);
}

body[data-route="runtime-records"] .runhero .sum,
body[data-route="daily-usage"] .usehero .sum {
  margin-top: 10px;
}

body[data-route="runtime-records"] .runhero .sum div,
body[data-route="daily-usage"] .usehero .sum div {
  border-radius: 8px;
  padding: 8px;
  background: rgba(8, 16, 32, 0.58);
}

body[data-route="runtime-records"] .runheat {
  gap: 5px;
  margin-top: 10px;
}

body[data-route="runtime-records"] .runheat span {
  min-height: 0;
  height: 34px;
  border: 1px solid rgba(70, 140, 235, 0.12);
  border-radius: 7px;
  background: rgba(47, 139, 255, 0.14);
}

body[data-route="runtime-records"] .runheat span.hot {
  background: linear-gradient(180deg, rgba(25, 230, 160, 0.55), rgba(47, 139, 255, 0.18));
}

body[data-route="runtime-records"] .runheat span.mid {
  background: linear-gradient(180deg, rgba(47, 139, 255, 0.35), rgba(47, 139, 255, 0.12));
}

body[data-route="runtime-records"] .runissues,
body[data-route="daily-usage"] .useissues {
  gap: 8px;
}

body[data-route="runtime-records"] .runissue,
body[data-route="daily-usage"] .useissue {
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-left: 3px solid var(--accent);
  border-radius: 9px;
  padding: 8px 9px;
  background: rgba(8, 16, 32, 0.52);
  color: var(--text-soft);
  font-size: 12px;
}

body[data-route="runtime-records"] .runissue.warn,
body[data-route="daily-usage"] .useissue.warn {
  border-color: rgba(70, 140, 235, 0.16);
  border-left-color: var(--warning);
}

body[data-route="runtime-records"] .runissue small,
body[data-route="daily-usage"] .useissue small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.prepaid-tenants-page,
.tenantstats,
.tenantbody,
.tenantside,
.tenantrows {
  display: grid;
  gap: 12px;
}

.prepaid-filters {
  display: flex;
  flex-wrap: wrap;
  grid-template-columns: none;
}

.prepaid-filters .field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 10px;
  background: var(--surface-panel);
}

.prepaid-filters .field:nth-child(1) {
  flex: 0 0 238px;
}

.prepaid-filters .field:nth-child(2) {
  flex: 0 0 285px;
}

.prepaid-filters .field:nth-child(3) {
  flex: 0 0 220px;
}

.prepaid-filters .field:nth-child(4) {
  flex: 0 0 320px;
}

.prepaid-filters label {
  flex: 0 0 auto;
  white-space: nowrap;
}

.prepaid-filters .inp {
  min-height: 30px;
  border-color: var(--border-muted-soft);
  background: var(--surface-panel-deep);
}

.prepaid-filters .btn {
  flex: 0 0 auto;
  justify-self: start;
}

.range-field {
  display: flex;
  grid-template-columns: none;
  gap: 8px;
  align-items: center;
}

.range-field label {
  grid-column: auto;
}

.range-field span {
  color: var(--muted);
  font-weight: 900;
}

.tenantalert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--warning);
  border-radius: var(--radius);
  padding: 10px 12px;
  color: var(--text);
  background: rgba(255, 177, 61, 0.16);
}

.tenantalert b {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: var(--surface-panel);
  background: var(--warning);
  font-size: 12px;
}

.tenantstats {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.tenantstat {
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 11px 13px;
  background: var(--surface-panel);
}

.tenantstat small,
.tenantstat span,
.tenanthero small,
.tenantcard small,
.tenantrow small {
  color: var(--muted);
  font-size: 10px;
}

.tenantstat small {
  display: block;
}

.tenantstat b,
.tenantstat strong {
  display: inline;
  margin-top: 0;
  color: var(--text);
  font-size: 22px;
}

.tenantstat strong {
  color: var(--badge-green-text);
}

.tenantstat b.warn,
.tenantstat strong.warn {
  color: var(--warning);
}

.tenantstat span {
  display: inline;
  float: right;
  margin-top: 7px;
  font-size: 11px;
}

.tenantbody {
  grid-template-columns: minmax(0, 1.35fr) minmax(380px, 0.65fr);
  align-items: start;
}

.tenanttable,
.tenantpanel,
.tenanthero {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--surface-panel);
  box-shadow: var(--shadow);
}

.tenanttable + .tenantpanel {
  margin-top: 12px;
}

.tenanttable {
  overflow-x: auto;
}

.tenant-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 7px;
  table-layout: fixed;
}

.tenant-table th,
.tenant-table td {
  border: 1px solid var(--border-muted-soft);
  padding: 9px 10px;
  color: var(--text-soft);
  background: var(--surface-panel-deep);
  font-size: 12px;
  text-align: left;
  vertical-align: middle;
}

.tenant-table th {
  color: var(--muted);
  background: var(--surface-panel-muted);
  font-weight: 900;
}

.tenant-table tr.lk {
  cursor: default;
}

.tenant-table tr.lk:hover td {
  border-color: var(--border-accent-strong);
  background: var(--surface-panel-muted);
}

.tenant-table th:first-child,
.tenant-table td:first-child {
  border-radius: var(--radius) 0 0 var(--radius);
  width: 42px;
}

.tenant-table th:nth-child(4),
.tenant-table td:nth-child(4) {
  width: 92px;
}

.tenant-table th:nth-child(5),
.tenant-table td:nth-child(5),
.tenant-table th:nth-child(6),
.tenant-table td:nth-child(6) {
  width: 108px;
}

.tenant-table th:last-child,
.tenant-table td:last-child {
  border-radius: 0 var(--radius) var(--radius) 0;
  width: 210px;
}

.tenant-table th,
.tenant-table td {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenantops {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tenantops span {
  color: var(--accent-blue);
  cursor: pointer;
  font-size: 12px;
}

.tenantops span.danger {
  color: var(--danger);
}

.tenantmoney,
.tenantlow {
  color: var(--badge-green-text);
  font-weight: 900;
}

.tenantlow {
  color: var(--warning);
}

.tenantzero {
  color: var(--danger);
  font-weight: 900;
}

body[data-route="prepaid-tenants"] .tenant-table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}

body[data-route="prepaid-tenants"] .tenant-table th,
body[data-route="prepaid-tenants"] .tenant-table td {
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 9px 7px;
  background: transparent;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

body[data-route="prepaid-tenants"] .tenant-table th {
  background: transparent;
  font-weight: 600;
}

body[data-route="prepaid-tenants"] .tenant-table th:first-child,
body[data-route="prepaid-tenants"] .tenant-table td:first-child,
body[data-route="prepaid-tenants"] .tenant-table th:last-child,
body[data-route="prepaid-tenants"] .tenant-table td:last-child {
  border-radius: 0;
}

body[data-route="prepaid-tenants"] .tenant-table th:last-child,
body[data-route="prepaid-tenants"] .tenant-table td:last-child {
  width: 248px;
}

body[data-route="prepaid-tenants"] .tenant-table th:first-child,
body[data-route="prepaid-tenants"] .tenant-table td:first-child {
  width: 42px;
}

body[data-route="prepaid-tenants"] .tenant-table th:nth-child(2),
body[data-route="prepaid-tenants"] .tenant-table td:nth-child(2) {
  width: 78px;
}

body[data-route="prepaid-tenants"] .tenant-table th:nth-child(3),
body[data-route="prepaid-tenants"] .tenant-table td:nth-child(3) {
  width: 96px;
}

body[data-route="prepaid-tenants"] .tenant-table th:nth-child(4),
body[data-route="prepaid-tenants"] .tenant-table td:nth-child(4) {
  width: 86px;
}

body[data-route="prepaid-tenants"] .tenant-table th:nth-child(5),
body[data-route="prepaid-tenants"] .tenant-table td:nth-child(5),
body[data-route="prepaid-tenants"] .tenant-table th:nth-child(6),
body[data-route="prepaid-tenants"] .tenant-table td:nth-child(6) {
  width: 126px;
}

.tenantflow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.tenantflow div {
  min-width: 0;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 12px;
  color: var(--text-soft);
  background: var(--surface-panel-deep);
  text-align: center;
}

.tenantflow b {
  display: block;
  color: var(--text);
}

.tenantflow i {
  color: var(--accent);
  font-style: normal;
  font-weight: 900;
}

.tenanthero {
  border-color: var(--border-accent-strong);
  background: radial-gradient(circle at 88% 18%, rgba(25, 230, 160, 0.2), transparent 45%), rgba(8, 16, 32, 0.62);
}

.tenanthero > b {
  display: block;
  margin: 4px 0 12px;
  color: var(--badge-green-text);
  font-size: 22px;
}

.tenanttabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.tenanttabs span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 0 10px;
  color: var(--muted);
  background: var(--surface-panel-deep);
  font-size: 12px;
  font-weight: 800;
}

.tenanttabs .on {
  border-color: var(--border-accent);
  color: var(--badge-green-text);
  background: var(--badge-green-bg);
}

.tenantform {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

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

.prepaid-tenants-page .tenantcard {
  color: var(--text-soft);
}

.prepaid-tenants-page .tenantcards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.prepaid-tenants-page .tenantcard b {
  margin-top: 4px;
  color: var(--badge-green-text);
  font-size: 20px;
}

.tenantrows {
  gap: 8px;
}

.tenantrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: start;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 10px;
  color: var(--text-soft);
  background: var(--surface-panel-deep);
}

.tenantrow b {
  display: block;
  margin-top: 0;
  color: var(--text);
}

.tenantrow small {
  grid-column: 1 / -1;
}


.tenantrow small {
  display: block;
  margin-top: 4px;
  line-height: 1.5;
}

.group-type-row,
.group-confirm-options,
.schedule-sync-flow:not(.taskflow) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.group-type-row span,
.group-confirm-options label,
.schedule-sync-flow:not(.taskflow) span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--border-muted-faint);
  border-radius: 6px;
  background: var(--surface-panel-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.schedule-sync-flow:not(.taskflow) i {
  align-self: center;
  color: var(--muted);
  font-style: normal;
}

.btn.wide {
  width: 100%;
  margin-top: 12px;
}

.events-page {
  display: grid;
  gap: 16px;
}

.events-tools {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto auto auto minmax(120px, auto);
  gap: 10px;
  align-items: center;
}

.push-right {
  margin-left: auto;
}

.eventstats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.eventstat {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: linear-gradient(180deg, var(--surface-panel), var(--surface-panel-deep));
}

.eventstat small,
.eventstat span,
.eventcard small,
.builditem small,
.eventdetail small,
.eventhero small,
.chainitem small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.eventstat b {
  display: block;
  margin: 4px 0;
  font-size: 22px;
  line-height: 1;
}

.eventgrid {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
}

.buildingbox,
.event-detail-panel,
.event-main {
  min-width: 0;
}

.buildingbox .inp {
  margin-bottom: 12px;
}

.build-list,
.event-main,
.eventlist,
.eventchain {
  display: grid;
  gap: 10px;
}

.builditem {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius);
  padding: 10px;
  color: var(--text);
  background: var(--surface-panel-deep);
  text-align: left;
}

.builditem.on {
  border-color: var(--border-accent-strong);
  background: var(--surface-action);
}

.builditem input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--accent);
  pointer-events: none;
}

.builditem span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.builditem i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

.eventflow {
  position: relative;
  min-height: 148px;
  overflow: hidden;
}

.eventflow .axis {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 72px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--weak), var(--accent), var(--weak));
}

.eventdot {
  position: absolute;
  left: var(--x);
  top: 40px;
  min-width: 64px;
  transform: translateX(-50%);
  border: 1px solid var(--border-muted);
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--text);
  background: var(--surface-action);
  font-weight: 900;
}

.eventdot.on,
.eventcard.on .eventop,
.eventhero.on {
  border-color: var(--border-accent-strong);
}

.eventdot.off,
.eventcard.off .eventop,
.eventhero.off {
  border-color: var(--border-danger-subtle);
}

.eventdot.warn,
.eventcard.warn .eventop,
.eventhero.warn {
  border-color: var(--warning);
}

.eventdot small {
  margin-top: 5px;
  font-size: 10px;
  font-weight: 700;
}

.eventcard {
  min-width: 0;
  display: grid;
  grid-template-columns: 1.1fr 1.5fr 0.85fr 0.8fr;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  color: var(--text);
  background: var(--surface-panel-deep);
  text-align: left;
}

.eventcard:hover,
.eventcard.active,
.eventdot.active {
  border-color: var(--line-strong);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.eventop {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  border: 1px solid var(--border-muted);
  border-radius: 999px;
  padding: 0 9px;
  color: var(--text);
  background: var(--surface-pill);
  font-weight: 900;
}

.event-table-card {
  max-width: 100%;
  overflow-x: auto;
}

.event-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
}

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

.event-table-card .event-table th:last-child,
.event-table-card .event-table td:last-child {
  position: sticky;
  right: 0;
  background: var(--panel);
  box-shadow: -10px 0 14px color-mix(in srgb, var(--panel) 90%, transparent);
}

.event-table-card .event-table th:last-child {
  z-index: 2;
}

.event-table-card .event-table td:last-child {
  z-index: 1;
}

.event-table th {
  color: var(--muted);
  background: var(--surface-panel-deep);
  font-size: 12px;
}

.eventhero {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 12px;
  padding: 14px;
  background: var(--surface-panel-deep);
}

.eventhero b {
  font-size: 20px;
  line-height: 1.15;
}

.eventdetail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.eventdetail div {
  min-width: 0;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 9px;
  background: var(--surface-nav);
}

.eventdetail b {
  display: block;
  overflow-wrap: anywhere;
  font-size: 13px;
}

.event-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.chainitem {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--surface-panel-deep);
}

.chainitem i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--ink-inverse);
  background: var(--accent);
  font-style: normal;
  font-weight: 900;
}

.chainitem div {
  font-weight: 900;
}

.events-page {
  display: block;
  padding-bottom: 0;
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  font-size: 13px;
  line-height: 1.5;
}

.events-page .events-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.events-page .events-tools .inp {
  width: 148px;
  height: 35px;
  min-height: 0;
}

.events-page .events-tools .btn {
  height: 35px;
  min-height: 0;
}

.events-page .eventstats {
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.events-page .eventstat {
  position: relative;
  height: 72px;
  border-radius: 11px;
  padding: 11px 13px;
}

.events-page .eventstat small,
.events-page .eventcard small,
.events-page .eventdetail small,
.events-page .eventhero small,
.events-page .chainitem small {
  color: var(--muted);
  font-size: 10px;
}

.events-page .eventstat b {
  margin: 0;
  color: var(--text);
  font-size: 22px;
}

.events-page .eventstat span {
  position: absolute;
  right: 13px;
  bottom: 11px;
  float: none;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.events-page .eventgrid {
  grid-template-columns: 260px minmax(0, 1fr) 360px;
  gap: 12px;
}

.events-page .buildingbox {
  height: 620px;
  overflow: hidden;
}

.events-page .buildingbox .inp {
  margin-bottom: 10px;
}

.events-page .buildingbox .tag {
  display: none;
}

.events-page .event-detail-panel .pt .tag {
  display: block;
  min-height: auto;
  border: 0;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.5;
  white-space: normal;
}

body[data-route="command-events"] .events-page .control-tree-node input[type="checkbox"] {
  position: relative;
  display: inline-block;
  background: #fff;
}

body[data-route="command-events"] .events-page .control-tree-node input[type="checkbox"]:checked {
  border-color: #2f8bff;
  background: #2f8bff;
}

body[data-route="command-events"] .events-page .control-tree-node input[type="checkbox"]:checked::after {
  position: absolute;
  left: 3px;
  top: 0;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  content: "";
  transform: rotate(45deg);
}
.events-page .build-list,
.events-page .event-main,
.events-page .eventlist,
.events-page .eventchain {
  gap: 0;
}

.events-page .builditem {
  appearance: none;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 7px;
  padding: 8px 6px;
  color: #cfe0ff;
  background: transparent;
  font: inherit;
  font-size: 12px;
  text-align: left;
}

.events-page .builditem.on {
  color: #fff;
  background: rgba(47, 139, 255, 0.14);
}

.events-page .builditem input {
  flex: 0 0 auto;
  position: relative;
  width: 13px;
  height: 13px;
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 2px;
  background: #fff;
  accent-color: #2f8bff;
}

.events-page .builditem input:checked {
  border-color: #2f8bff;
  background: #2f8bff;
}

.events-page .builditem input:checked::after {
  position: absolute;
  left: 3px;
  top: 0;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  content: "";
  transform: rotate(45deg);
}

.events-page .builditem small {
  margin-left: auto;
}

.events-page .eventflow,
.events-page .eventflow.panel {
  height: 188px;
  min-height: 188px;
  margin-bottom: 12px;
  border-radius: 12px;
  padding: 0;
  background:
    radial-gradient(circle at 24% 54%, rgba(34, 197, 94, 0.2), transparent 22%),
    radial-gradient(circle at 76% 52%, rgba(255, 90, 106, 0.18), transparent 22%),
    linear-gradient(180deg, var(--surface-panel), var(--surface-panel-deep));
}

.events-page .eventflow::before,
.events-page .eventflow.panel::before {
  display: none;
}

.events-page .eventflow .axis {
  left: 24px;
  right: 24px;
  top: 88px;
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.1), rgba(47, 139, 255, 0.65), rgba(255, 90, 106, 0.1));
}

.events-page .eventdot {
  appearance: none;
  top: 71px;
  display: flex;
  width: 34px;
  min-width: 0;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 0;
  color: var(--green);
  background: #081121;
  border: 1px solid currentColor;
  box-shadow: 0 0 14px currentColor;
  font: inherit;
}

.events-page .eventdot.off {
  color: #74849e;
}

.events-page .eventdot.warn {
  color: var(--warning);
}

.events-page .eventdot small {
  position: absolute;
  top: 39px;
  left: auto;
  width: auto;
  margin: 0;
  transform: none;
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.events-page .eventlist {
  gap: 8px;
  margin-bottom: 12px;
}

.events-page .eventcard {
  appearance: none;
  grid-template-columns: 90px 1fr 74px 64px;
  gap: 10px;
  border-color: rgba(70, 140, 235, 0.16);
  border-radius: 10px;
  padding: 10px;
  color: #cfe0ff;
  background: rgba(8, 16, 32, 0.52);
  font: inherit;
  font-size: 12px;
  text-align: left;
}

.events-page .eventcard.on {
  border-color: rgba(34, 197, 94, 0.5);
  background: rgba(34, 197, 94, 0.08);
}

.events-page .eventcard.active {
  border-color: rgba(34, 197, 94, 0.5);
  background: rgba(34, 197, 94, 0.08);
}

.events-page .eventcard.off {
  border-color: rgba(116, 132, 158, 0.38);
}

.events-page .eventcard.active {
  border-color: rgba(34, 197, 94, 0.5);
  background: rgba(34, 197, 94, 0.08);
}

.events-page .eventop {
  display: inline;
  min-height: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  font-weight: 800;
}

.events-page .eventop.on {
  color: #86efac;
}

.events-page .eventop.off {
  color: #a8b4c8;
}

.events-page .eventcard.active .eventop {
  color: #86efac;
}

.events-page .event-table-card {
  overflow-x: hidden;
}

.events-page .event-table {
  min-width: 0;
  table-layout: auto;
  font-size: 12px;
}

.events-page .event-table th,
.events-page .event-table td {
  padding: 8px 7px;
}

.events-page .event-table th {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
}

.events-page .event-table-card .event-table th:last-child,
.events-page .event-table-card .event-table td:last-child {
  position: static;
  box-shadow: none;
}

.events-page .event-table .btn {
  min-height: 0;
  border: 0;
  padding: 0;
  color: var(--text);
  background: transparent;
  box-shadow: none;
  font-size: 12px;
  font-weight: inherit;
  line-height: inherit;
}

.events-page .eventdetail {
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.events-page .eventdetail div {
  min-width: auto;
  border-color: rgba(70, 140, 235, 0.16);
  border-radius: 9px;
  padding: 9px 10px;
  background: rgba(8, 16, 32, 0.52);
}

.events-page .eventdetail b {
  display: inline;
  overflow-wrap: normal;
  word-break: normal;
  color: var(--text);
  font-size: 12px;
}

.events-page .eventhero {
  display: block;
  border-color: rgba(34, 197, 94, 0.34);
  border-radius: 12px;
  margin-bottom: 12px;
  padding: 13px;
  background: radial-gradient(circle at 88% 18%, rgba(34, 197, 94, 0.22), transparent 45%), rgba(8, 16, 32, 0.62);
}

.events-page .eventhero b {
  display: inline;
  color: #86efac;
  font-size: 22px;
  line-height: 1.5;
}

.events-page .eventhero small:last-child {
  margin-top: 5px;
}

.events-page .eventchain {
  gap: 8px;
  margin-top: 12px;
}

.events-page .chainitem {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border: 0;
  padding: 0;
  color: #cfe0ff;
  background: transparent;
  font-size: 12px;
}

.events-page .chainitem i {
  display: flex;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  color: #9fc6ff;
  background: rgba(47, 139, 255, 0.18);
  font-size: 10px;
}

.aipage {
  display: grid;
  gap: 12px;
}

body[data-route="ai/anomaly"],
body[data-route="ai/strategy"] {
  font: 13px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif;
}

body[data-route="ai/strategy"] {
  --line: rgba(70, 140, 235, 0.2);
  --blue: #2f8bff;
  --cyan: #27e0ff;
  --green: #19e6a0;
  --warn: #ffb13d;
  --muted: #7e98c6;
}

body[data-route="ai/anomaly"] .main {
  padding-bottom: 36px;
}

body[data-route="ai/anomaly"] .brand-row.compact {
  min-height: 58px;
  margin-bottom: 8px;
  gap: 10px;
  border-color: rgba(70, 140, 235, 0.16);
  padding: 9px 9px 10px;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.46), rgba(8, 16, 32, 0.38));
}

body[data-route="ai/anomaly"] .brand-mark {
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, var(--ac), var(--ac2));
  box-shadow: 0 0 16px rgba(25, 230, 160, 0.16);
  font-weight: 800;
}

.ai-anomaly-page {
  align-content: start;
}

.ai-strategy-page {
  min-width: 0;
}

.aihero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) 1fr;
  gap: 18px;
  align-items: center;
  border: 1px solid rgba(25, 230, 160, 0.36);
  border-radius: 14px;
  margin-bottom: 12px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(25, 230, 160, 0.16), rgba(47, 139, 255, 0.09) 48%, rgba(124, 92, 255, 0.12));
  box-shadow: 0 0 28px rgba(25, 230, 160, 0.08), inset 0 1px 0 rgba(190, 255, 238, 0.18);
  overflow: hidden;
}

.aihero::after {
  position: absolute;
  right: 18px;
  top: 12px;
  bottom: 12px;
  width: 44%;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(39, 224, 255, 0.08));
  pointer-events: none;
}

.aititle small {
  display: block;
  margin-bottom: 4px;
  color: #9fc6ff;
  font-size: 11px;
}

.aititle b {
  font-size: 22px;
  letter-spacing: 0;
}

.aititle p {
  max-width: 720px;
  margin: 5px 0 0;
  color: #9ab0d1;
  font-size: 12px;
}

.aistamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(25, 230, 160, 0.38);
  border-radius: 20px;
  margin-left: 8px;
  padding: 4px 9px;
  color: #86efac;
  background: rgba(25, 230, 160, 0.12);
  font-size: 10.5px;
}

.aihero .metrics {
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.aimetric {
  border: 1px solid rgba(70, 140, 235, 0.18);
  border-radius: 11px;
  padding: 10px 12px;
  background: rgba(5, 10, 20, 0.42);
}

.aimetric small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

.aimetric b {
  color: var(--green);
  font-size: 22px;
}

.aimetric span {
  display: block;
  margin-top: 2px;
  color: #9fc6ff;
  font-size: 10px;
}

.aikpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.aikpi {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.54), rgba(8, 18, 35, 0.62));
}

.aikpi small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

.aikpi b {
  color: var(--green);
  font-size: 24px;
}

.aikpi span {
  float: right;
  margin-top: 8px;
  color: #9fc6ff;
  font-size: 10px;
}

.weatherstrip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.weathercard {
  position: relative;
  border: 1px solid rgba(39, 224, 255, 0.22);
  border-radius: 12px;
  padding: 10px 12px;
  background: linear-gradient(160deg, rgba(39, 224, 255, 0.1), rgba(8, 16, 32, 0.58));
  overflow: hidden;
}

.weathercard::after {
  position: absolute;
  right: -16px;
  top: -16px;
  width: 58px;
  height: 58px;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, rgba(39, 224, 255, 0.22), transparent 68%);
}

.weathercard small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

.weathercard b {
  color: #dff8ff;
  font-size: 18px;
}

.weathercard span {
  display: block;
  margin-top: 2px;
  color: #9fc6ff;
  font-size: 10px;
}

.weathercard.hot b {
  color: #ffd089;
}

.weathercard.ok b {
  color: #86efac;
}

.weathercard.unavailable {
  border-color: var(--border-muted-soft);
  background: var(--surface-panel-deep);
}

.weathercard.unavailable::after {
  opacity: 0;
}

.weathercard.unavailable b,
.weathercard.unavailable span {
  color: var(--muted);
}

.aigrid2 {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
  gap: 12px;
  align-items: start;
}

.aipanel {
  position: relative;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.5), rgba(8, 18, 35, 0.6));
  overflow: hidden;
}

.aipanel .pt {
  margin-bottom: 12px;
}

.curvechart {
  position: relative;
  height: 248px;
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(7, 15, 30, 0.74), rgba(5, 10, 20, 0.56));
}

.curvechart svg {
  width: 100%;
  height: 190px;
}

.chart-grid {
  stroke: var(--line);
  stroke-dasharray: 3 5;
}

.actual-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
}

.baseline-line {
  fill: none;
  stroke: var(--weak);
  stroke-width: 2;
  stroke-dasharray: 5 6;
}

.predicted-line {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 2;
}

.axis,
.curvelegend,
.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: var(--muted);
}

.curvechart .axis {
  justify-content: space-between;
  padding: 0 10px;
  font-size: 10px;
}

.curvelegend {
  gap: 12px;
  margin-top: 6px;
  font-size: 11px;
}

.legend {
  gap: 12px;
  justify-content: center;
  margin-top: 6px;
  font-size: 11px;
}







body[data-route="ai/strategy"] #viewHost .aipanel .pt {
  margin-bottom: 12px;
}

body[data-route="ai/strategy"] #viewHost .tag {
  display: inline-block;
  min-height: 0;
  border: 0;
  border-radius: 20px;
  padding: 2px 8px;
  color: #9fc6ff;
  background: rgba(47, 139, 255, 0.16);
  font: 10.5px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif;
  font-weight: 400;
  white-space: nowrap;
}

body[data-route="ai/strategy"] #viewHost .tag.g {
  color: #86efac;
  background: rgba(34, 197, 94, 0.18);
}

body[data-route="ai/strategy"] #viewHost .tag.w {
  color: #ffd089;
  background: rgba(255, 177, 61, 0.18);
}

body[data-route="ai/strategy"] #viewHost .tag.b {
  color: #ff9aa4;
  background: rgba(255, 90, 106, 0.18);
}

.curve-note {
  margin-left: auto;
  color: var(--badge-green-text);
}

.curvelegend i {
  display: inline-block;
  width: 20px;
  height: 3px;
  border-radius: 4px;
  margin-right: 5px;
  background: var(--weak);
  vertical-align: middle;
}

.legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-right: 6px;
  background: var(--weak);
}

.curvelegend .baseline {
  background: #64748b;
}

.curvelegend .actual,
.legend .pending {
  background: #19e6a0;
}

.curvelegend .predicted {
  background: var(--cyan);
}

.aiinsight {
  border: 1px solid rgba(124, 92, 255, 0.32);
  border-radius: 12px;
  padding: 12px;
  color: #d9e5ff;
  background: linear-gradient(150deg, rgba(124, 92, 255, 0.16), rgba(8, 16, 32, 0.58));
}




.aiinsight b {
  display: block;
  margin-bottom: 4px;
  color: #fff;
}

.aiinsight small {
  display: block;
  color: #9ab0d1;
  font-size: 11px;
}

.aiinsight .btn {
  margin-top: 10px;
  padding: 5px 10px;
}


.modelrail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
}



.modelnode {
  border: 1px solid rgba(124, 92, 255, 0.24);
  border-radius: 10px;
  padding: 9px 10px;
  color: #d9e5ff;
  background: rgba(124, 92, 255, 0.09);
  font-size: 12px;
}

.modelnode b {
  display: block;
  color: #fff;
  font-size: 12px;
}

.modelnode small {
  display: block;
  color: #9ab0d1;
  font-size: 10px;
}

.contrib {
  display: grid;
  gap: 8px;
}

.contribrow {
  display: grid;
  grid-template-columns: 76px 1fr 56px;
  gap: 8px;
  align-items: center;
  color: #cfe0ff;
  font-size: 12px;
}

.contribrow .bar {
  height: 9px;
  border-radius: 8px;
  background: rgba(70, 140, 235, 0.18);
  overflow: hidden;
}

.contribrow .bar i {
  display: block;
  width: var(--w, auto);
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--green), var(--cyan));
}

.heatboard {
  display: grid;
  grid-template-columns: 36px repeat(12, 1fr);
  gap: 5px;
  align-items: center;
}

.heatboard span {
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}

.heatcell {
  height: 20px;
  border: 1px solid rgba(47, 139, 255, 0.07);
  border-radius: 5px;
  background: rgba(47, 139, 255, 0.12);
}

.heatcell.lv2 {
  background: rgba(39, 224, 255, 0.22);
}

.heatcell.lv3 {
  background: rgba(25, 230, 160, 0.35);
  box-shadow: 0 0 10px rgba(25, 230, 160, 0.18);
}

.heatcell.lv4 {
  background: rgba(255, 177, 61, 0.48);
  box-shadow: 0 0 12px rgba(255, 177, 61, 0.22);
}

.heatcell.bad {
  background: rgba(255, 90, 106, 0.52);
  box-shadow: 0 0 12px rgba(255, 90, 106, 0.26);
}

.legend .low {
  background: #2f8bff;
}

.legend .medium {
  background: #19e6a0;
}

.legend .high {
  background: #ffb13d;
}

.legend .bad {
  background: #ff5a6a;
}

.oppgrid {
  display: grid;
  gap: 9px;
}

.oppcard {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 10px;
  padding: 10px;
  background: rgba(8, 16, 32, 0.54);
}

.oppcard i {
  display: flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #86efac;
  background: rgba(25, 230, 160, 0.14);
  font-style: normal;
}

.oppcard b,
.oppcard small {
  display: block;
}

.oppcard b {
  font-size: 13px;
}

.oppcard small {
  color: var(--muted);
  font-size: 10px;
}

.oppcard em {
  color: var(--green);
  font-style: normal;
  font-weight: 800;
}

.anosearch {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr) repeat(3, max-content);
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

body[data-route="ai/anomaly"] .anosearch .inp,
body[data-route="ai/anomaly"] .anosearch .btn {
  box-sizing: border-box;
  height: 35px;
  min-height: 35px;
  padding-top: 0;
  padding-bottom: 0;
}

body[data-route="ai/anomaly"] .aipanel .pt {
  margin-bottom: 10px;
}

.anosearch .form-message {
  grid-column: 1 / -1;
}

.anosearch .form-message:empty {
  display: none;
}

.aigrid3 {
  display: grid;
  grid-template-columns: 300px minmax(420px, 1fr) 360px;
  gap: 12px;
  align-items: start;
}

.anomatrix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.anom {
  display: grid;
  height: 65px;
  gap: 4px;
  border: 1px solid rgba(70, 140, 235, 0.18);
  border-radius: 8px;
  padding: 10px;
  background: rgba(8, 16, 32, 0.48);
}

.anom small,
.evidence small,
.streamitem small,
.scatter-empty {
  color: var(--muted);
}

.anom b {
  color: #dbeafe;
  font-size: 24px;
}

.anom.bad {
  border-color: rgba(255, 90, 106, 0.58);
}

.anom.bad b {
  color: #ff5a6a;
}

.anom.warn {
  border-color: rgba(255, 177, 61, 0.52);
}

.anom.warn b {
  color: #ffce75;
}

.anom.ok {
  border-color: rgba(25, 230, 160, 0.38);
}

.anom.ok b {
  color: #dbeafe;
}

.evidence {
  display: grid;
  gap: 8px;
}

.evidence div {
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 8px;
  padding: 8px 10px;
  color: #cfe0ff;
  background: rgba(8, 16, 32, 0.48);
  font-size: 12px;
  line-height: 1.38;
}

.evidence small {
  display: block;
  margin-bottom: 4px;
}

.scatter {
  position: relative;
  height: 246px;
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 0;
  margin-bottom: 8px;
  background: var(--surface-chart);
  overflow: hidden;
}

.scatter::before,
.scatter::after {
  content: "";
  position: absolute;
  background: var(--line);
}

.scatter::before {
  left: 36px;
  top: 18px;
  bottom: 34px;
  width: 1px;
}

.scatter::after {
  left: 36px;
  right: 22px;
  bottom: 34px;
  height: 1px;
}

.scatter label {
  position: absolute;
  color: var(--muted);
  font-size: 12px;
}

.scatter .y {
  left: 48px;
  top: 18px;
}

.scatter .x {
  right: 24px;
  bottom: 12px;
}

.scatter-empty {
  position: absolute;
  inset: 64px 40px 58px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  text-align: center;
  background: var(--surface-panel-deep);
}

.scatter-dot {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: 14px;
  height: 14px;
  border: 2px solid var(--surface-panel);
  border-radius: 999px;
  background: var(--accent);
  box-shadow: var(--shadow-glow);
}

.scatter-dot.warn {
  background: var(--warning);
}

.stream {
  display: grid;
  gap: 8px;
}

.streamitem {
  display: grid;
  height: 100px;
  gap: 6px;
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 9px;
  padding: 9px 12px;
  background: var(--surface-panel-deep);
  font-size: 12px;
  line-height: 18px;
}

.streamitem:first-child {
  border-color: rgba(255, 90, 106, 0.58);
  background: rgba(255, 90, 106, 0.07);
}

.streamitem .row,
.stream-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.streamitem .row b {
  min-width: 0;
  flex: 1;
}

.streamitem small {
  font-size: 11px;
}

.stream-actions .btn {
  padding: 5px 10px;
}

.sev {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bad);
  box-shadow: 0 0 10px var(--bad);
}

.sev.bad {
  background: var(--bad);
  box-shadow: 0 0 10px var(--bad);
}

.sev.warn,
.sev.w {
  background: var(--warn);
  box-shadow: 0 0 10px var(--warn);
}

.conf {
  border-radius: 999px;
  padding: 3px 8px;
  color: var(--badge-green-text);
  background: var(--badge-green-bg);
  font-size: 12px;
  font-weight: 900;
}

.anomaly-trend {
  margin-top: 0;
}

.anomaly-trend th,
.anomaly-trend td {
  padding: 5px 6px;
  font-size: 12px;
  text-align: left;
}

.anomaly-trend .conf {
  display: inline-block;
  padding: 2px 8px;
}

body[data-route="ai/anomaly"] .aigrid3 {
  grid-template-columns: 300px minmax(0, 1fr) 360px;
}

body[data-route="ai/anomaly"] .ai-anomaly-page,
body[data-route="ai/anomaly"] .ai-anomaly-page *,
body[data-route="ai/anomaly"] .ai-anomaly-page *::before,
body[data-route="ai/anomaly"] .ai-anomaly-page *::after {
  box-sizing: border-box;
}

body[data-route="ai/anomaly"] .ai-anomaly-page .btn {
  display: inline-block;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 12px;
  color: var(--txt);
  background: #12203c;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
}

body[data-route="ai/anomaly"] .ai-anomaly-page .btn.pri {
  border: 0;
  background: linear-gradient(135deg, var(--ac), var(--ac2));
}

body[data-route="ai/anomaly"] .ai-anomaly-page .inp {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--txt);
  background: #0b1626;
  font-size: 12px;
}

body[data-route="ai/anomaly"] .aipanel .pt {
  margin-bottom: 12px;
  font-weight: 400;
}

body[data-route="ai/anomaly"] .aigrid3 .aipanel:nth-child(2) .pt,
body[data-route="ai/anomaly"] .aigrid3 .aipanel:nth-child(3) .pt {
  margin-bottom: 12px;
}

body[data-route="ai/anomaly"] .anosearch {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

body[data-route="ai/anomaly"] .anosearch .inp {
  flex: 0 1 auto;
  width: auto;
  min-width: 150px;
  font-family: Arial, sans-serif;
  line-height: normal;
}

body[data-route="ai/anomaly"] .anosearch .btn {
  font-family: Arial, sans-serif;
  line-height: normal;
}

body[data-route="ai/anomaly"] .tag {
  min-height: 0;
  border: 0;
  border-radius: 20px;
  padding: 2px 8px;
  color: #9fc6ff;
  background: rgba(47, 139, 255, 0.16);
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.5;
}

body[data-route="ai/anomaly"] .tag.g {
  color: #86efac;
  background: rgba(34, 197, 94, 0.18);
}

body[data-route="ai/anomaly"] .tag.b {
  color: #ff9aa4;
  background: rgba(255, 90, 106, 0.18);
}

body[data-route="ai/anomaly"] .anomatrix {
  gap: 9px;
  margin-bottom: 0;
}

body[data-route="ai/anomaly"] .anomaly-spacer {
  height: 12px;
}

body[data-route="ai/anomaly"] .anom {
  display: block;
  height: auto;
  gap: normal;
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 10px;
  padding: 10px;
  background: rgba(8, 16, 32, 0.55);
}

body[data-route="ai/anomaly"] .anom b {
  font-size: 19px;
}

body[data-route="ai/anomaly"] .anom small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

body[data-route="ai/anomaly"] .anom.high {
  border-color: rgba(255, 90, 106, 0.45);
  box-shadow: 0 0 14px rgba(255, 90, 106, 0.1);
}

body[data-route="ai/anomaly"] .anom.high b {
  color: var(--bad);
}

body[data-route="ai/anomaly"] .anom.mid {
  border-color: rgba(255, 177, 61, 0.42);
}

body[data-route="ai/anomaly"] .anomatrix .anom:nth-child(2) b {
  color: var(--warn);
}

body[data-route="ai/anomaly"] .anom.good {
  border-color: rgba(25, 230, 160, 0.35);
}

body[data-route="ai/anomaly"] .evidence {
  gap: 8px;
}

body[data-route="ai/anomaly"] .evidence div {
  height: 53px;
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 10px;
  padding: 9px 10px;
  color: #cfe0ff;
  background: rgba(8, 16, 32, 0.54);
  font-size: 12px;
  line-height: 1.5;
  overflow: hidden;
}

body[data-route="ai/anomaly"] .evidence div:first-child {
  height: 71px;
}

body[data-route="ai/anomaly"] .evidence small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

body[data-route="ai/anomaly"] .scatter {
  height: 246px;
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 12px;
  margin-bottom: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(70, 140, 235, 0.09) 40px),
    repeating-linear-gradient(90deg, transparent 0 59px, rgba(70, 140, 235, 0.08) 60px),
    rgba(8, 16, 32, 0.52);
}

body[data-route="ai/anomaly"] .scatter label {
  color: var(--muted);
  font-size: 10px;
}

body[data-route="ai/anomaly"] .scatter .x {
  left: 50%;
  right: auto;
  bottom: 8px;
}

body[data-route="ai/anomaly"] .scatter .y {
  left: 10px;
  top: 8px;
}

body[data-route="ai/anomaly"] .point {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px var(--green);
  transform: translate(-50%, -50%);
}

body[data-route="ai/anomaly"] .point.w {
  background: var(--warn);
  box-shadow: 0 0 12px var(--warn);
}

body[data-route="ai/anomaly"] .point.b {
  width: 22px;
  height: 22px;
  background: var(--bad);
  box-shadow: 0 0 12px var(--bad);
}

body[data-route="ai/anomaly"] .aigrid3 .aipanel:nth-child(2) table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

body[data-route="ai/anomaly"] .aigrid3 .aipanel:nth-child(2) th,
body[data-route="ai/anomaly"] .aigrid3 .aipanel:nth-child(2) td {
  border-bottom: 1px solid var(--line);
  padding: 8px 7px;
  text-align: left;
}

body[data-route="ai/anomaly"] .aigrid3 .aipanel:nth-child(2) th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

body[data-route="ai/anomaly"] .aigrid3 .aipanel:nth-child(2) table .tag {
  display: inline;
}

body[data-route="ai/anomaly"] .stream {
  gap: 8px;
  max-height: 414px;
  overflow: hidden;
}

body[data-route="ai/anomaly"] .streamitem {
  display: block;
  height: 100px;
  gap: normal;
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 10px;
  padding: 10px;
  color: #cfe0ff;
  background: rgba(8, 16, 32, 0.56);
  font-size: 12px;
  line-height: 18px;
  overflow: hidden;
}

body[data-route="ai/anomaly"] .streamitem.on {
  border-color: rgba(255, 90, 106, 0.42);
  background: rgba(255, 90, 106, 0.08);
}

body[data-route="ai/anomaly"] .streamitem .row {
  display: flex;
  align-items: center;
  gap: 8px;
}

body[data-route="ai/anomaly"] .sev {
  width: 8px;
  height: 8px;
}

body[data-route="ai/anomaly"] .stream-actions {
  display: flex;
  gap: 7px;
  margin-top: 8px;
  flex-wrap: nowrap;
}

body[data-route="ai/anomaly"] .stream-actions .btn {
  height: auto;
  min-height: 0;
  font-family: Arial, sans-serif;
  line-height: normal;
}

body[data-route="ai/anomaly"] .streamitem small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  line-height: 15px;
}

body[data-route="ai/anomaly"] .conf {
  margin-left: auto;
  border-radius: 0;
  padding: 0;
  color: var(--green);
  background: transparent;
  font-size: 10px;
  font-weight: 400;
  line-height: 15px;
}

.pipe {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.pipestep {
  position: relative;
  display: grid;
  gap: 6px;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface-panel);
  box-shadow: var(--shadow);
}

.ai-strategy-page .pipestep:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: -13px;
  z-index: 1;
  color: var(--accent);
  font-weight: 900;
  transform: translateY(-50%);
}

.pipestep i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--ink-inverse);
  background: var(--weak);
  font-style: normal;
  font-weight: 900;
}

.pipestep.ready i {
  background: var(--accent);
}

.pipestep small,
.stratcard p,
.stratmeta small,
.simchart p,
.guard small,
.strategy-input-card small,
.strategy-input-card span {
  color: var(--muted);
}

.stratgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.stratcard {
  display: grid;
  gap: 12px;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--surface-panel-deep);
}

.stratcard .head,
.gactions,
.strategy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.stratcard .head {
  justify-content: space-between;
}

.stratcard p {
  margin: 0;
  line-height: 1.65;
}

.stratmeta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.stratmeta div,
.strategy-input-card {
  display: grid;
  gap: 4px;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--surface-nav);
}

.strategy-side {
  display: grid;
  gap: 16px;
}

.simchart {
  display: grid;
  gap: 12px;
}

.simbar {
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) minmax(140px, 1fr) max-content;
  gap: 10px;
  align-items: center;
}

.simbar .rail {
  height: 10px;
  border-radius: 999px;
  background: var(--surface-track);
  overflow: hidden;
}

.simbar .rail i {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: var(--quota-gradient);
}

.simbar.pending .rail i {
  background: var(--weak);
}

.simchart p {
  margin: 0;
  line-height: 1.65;
}

.guardgrid,
.strategy-input-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.reportgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 370px;
  gap: 12px;
  align-items: start;
}

.report-side {
  display: grid;
  gap: 12px;
}

.report-curvechart {
  min-height: 248px;
}

.report-chart-empty {
  display: grid;
  min-height: 190px;
  place-items: center;
}

.report-grid-lines {
  stroke: var(--line);
  stroke-dasharray: 3 5;
}

.report-actual-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
}

.curvelegend .baseline {
  background: var(--weak);
}

.waterfall {
  display: flex;
  align-items: end;
  gap: 16px;
  height: 250px;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 18px 20px 30px;
  background: var(--surface-chart);
}

.wbar {
  position: relative;
  flex: 1;
  min-height: 48px;
  height: var(--h, 58%);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: 8px 4px;
  color: var(--text);
  background: var(--overlay-accent);
}

.wbar.base {
  border-color: var(--border-muted-soft);
  background: var(--surface-muted);
}

.wbar.warn {
  border-color: var(--warning);
  background: var(--overlay-warning);
}

.waterfall.pending .wbar {
  border-style: dashed;
  border-color: var(--border-muted-soft);
  color: var(--muted);
  background: var(--surface-muted);
}

.waterfall.pending .wbar b {
  color: var(--text);
}

.wbar b {
  position: absolute;
  top: -22px;
  right: 0;
  left: 0;
  text-align: center;
}

.wbar span,
.wbar small {
  position: absolute;
  right: 0;
  left: 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.wbar span {
  bottom: -24px;
}

.wbar small {
  bottom: -44px;
  line-height: 1.35;
}

.report-note {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.7;
}

.report-section-gap {
  height: 14px;
}

.docpreview {
  min-height: 284px;
  border: 1px solid rgba(70, 140, 235, 0.2);
  border-radius: var(--radius);
  padding: 14px;
  color: #1b2a44;
  background: #eaf0f8;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.docpreview h3 {
  margin: 0 0 10px;
  color: #1b2a44;
  font-size: 17px;
}

.docpreview > small {
  display: block;
  color: #60708a;
}

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

.docgrid div {
  border: 1px solid #c8d3e4;
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}

.docgrid small {
  display: block;
  color: #60708a;
}

.docline,
.docblock {
  border-radius: var(--radius-sm);
  background: #c8d3e4;
}

.docline {
  width: 96%;
  height: 8px;
  margin: 8px 0;
}

.docline.short {
  width: 88%;
}

.docline.tiny {
  width: 72%;
}

.docblock {
  min-height: 90px;
  margin-top: 14px;
  border: 1px solid #c8d3e4;
  background: linear-gradient(180deg, #fff, #dfe8f6);
}

.docblock .report-summary {
  margin: 0;
  padding: 12px;
  color: #45566f;
  font-size: 12px;
  line-height: 1.65;
}

.docpreview .btn {
  width: 100%;
  margin-top: 14px;
}

.report-evidence-panel {
  margin-top: 0;
}

.report-ledger {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.report-ledger.empty {
  border: 1px dashed var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--surface-panel-deep);
}

.report-ledger-title,
.report-ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(86px, 0.55fr) minmax(120px, 0.65fr);
  gap: 8px;
  align-items: center;
}

.report-ledger-title {
  color: var(--text);
}

.report-ledger-title span,
.report-ledger-row {
  color: var(--muted);
  font-size: 12px;
}

.report-ledger-row {
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius-sm);
  padding: 8px;
  background: var(--surface-panel-deep);
}

.report-ledger-row.head {
  background: var(--surface-muted);
  font-weight: 800;
}

.report-ledger-row b {
  display: block;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-ledger-row .badge {
  display: inline-flex;
  font-style: normal;
}

.report-ledger-more {
  border: 1px dashed var(--border-muted-soft);
  border-radius: var(--radius-sm);
  padding: 8px;
  color: var(--badge-amber-text);
  background: var(--badge-amber-bg);
  font-size: 12px;
}

.guard {
  display: grid;
  gap: 4px;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--surface-panel-deep);
}

.guard i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

.strategy-input-panel {
  display: grid;
  gap: 12px;
}

body[data-route="ai/strategy"] .pipe {
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: 12px;
}

body[data-route="ai/strategy"] .aihero {
  min-height: 134px;
}

body[data-route="ai/strategy"] .pipestep {
  display: block;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.5), rgba(8, 18, 35, 0.58));
  box-shadow: none;
  text-align: center;
}

body[data-route="ai/strategy"] .pipestep i {
  display: inline-flex;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  color: #9fc6ff;
  background: rgba(47, 139, 255, 0.18);
  font-style: normal;
}

body[data-route="ai/strategy"] .pipestep b {
  display: block;
  margin-top: 7px;
  font-size: 12px;
}

body[data-route="ai/strategy"] .pipestep small {
  display: block;
  color: var(--mut);
  font-size: 10px;
}

body[data-route="ai/strategy"] .tag {
  border: 0;
  border-radius: 20px;
  padding: 2px 8px;
  color: #9fc6ff;
  background: rgba(47, 139, 255, 0.16);
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.5;
}

body[data-route="ai/strategy"] .tag.g {
  color: #86efac;
  background: rgba(34, 197, 94, 0.18);
}

body[data-route="ai/strategy"] .tag.w {
  color: #ffd089;
  background: rgba(255, 177, 61, 0.18);
}

body[data-route="ai/strategy"] .stratgrid {
  transform: translateY(2px);
}

body[data-route="ai/strategy"] .stratcard {
  display: block;
  position: relative;
  border: 1px solid rgba(70, 140, 235, 0.18);
  border-radius: 12px;
  padding: 9px 13px;
  background: linear-gradient(150deg, rgba(20, 42, 80, 0.54), rgba(8, 18, 35, 0.68));
  overflow: hidden;
}

body[data-route="ai/strategy"] .stratcard::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  content: "";
  background: var(--green);
}

body[data-route="ai/strategy"] .stratcard.w::after {
  background: var(--warn);
}

body[data-route="ai/strategy"] .stratcard.b::after {
  background: var(--blue);
}

body[data-route="ai/strategy"] .stratcard.v::after {
  background: #7c5cff;
}

body[data-route="ai/strategy"] .stratcard .head {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
}

body[data-route="ai/strategy"] .stratcard .head b {
  font-size: 15px;
}

body[data-route="ai/strategy"] .stratcard .head .tag {
  margin-left: auto;
}

body[data-route="ai/strategy"] .stratcard p {
  margin: 8px 0;
  color: #9ab0d1;
  font-size: 11px;
  line-height: 1.5;
}

body[data-route="ai/strategy"] .stratmeta {
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin: 10px 0;
}

body[data-route="ai/strategy"] .stratmeta div {
  border: 0;
  border-radius: 8px;
  padding: 8px;
  background: rgba(8, 16, 32, 0.56);
}

body[data-route="ai/strategy"] .stratmeta small {
  display: block;
  color: var(--mut);
  font-size: 10px;
}

body[data-route="ai/strategy"] .stratmeta b {
  font-size: 14px;
}

body[data-route="ai/strategy"] .stratmeta .strategy-saving {
  color: var(--green);
}

body[data-route="ai/strategy"] .strategy-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

body[data-route="ai/strategy"] .strategy-toolbar .form-message {
  flex: 1 1 auto;
  min-width: 180px;
}

body[data-route="ai/strategy"] .strategy-toolbar .form-message:empty {
  display: none;
}

body[data-route="ai/strategy"] .strategy-toolbar .btn,
body[data-route="ai/strategy"] .gactions .btn {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 29px;
  padding: 5px 10px;
  color: var(--txt);
  background: #12203c;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
}

body[data-route="ai/strategy"] .strategy-toolbar .btn.pri,
body[data-route="ai/strategy"] .gactions .btn.pri {
  border: 0;
  background: linear-gradient(135deg, var(--ac), var(--ac2));
}

body[data-route="ai/strategy"] .strategy-approve-ghost {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: -1px;
  border: 0;
  padding: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

body[data-route="ai/strategy"] .strategy-side {
  display: block;
}

body[data-route="ai/strategy"] .strategy-guard-panel {
  margin-top: 12px;
}

body[data-route="ai/strategy"] .simchart {
  display: block;
  min-height: 210px;
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 12px;
  padding: 12px;
  background: rgba(8, 16, 32, 0.55);
}

body[data-route="ai/strategy"] .simbar {
  display: grid;
  grid-template-columns: 76px 1fr 48px;
  gap: 8px;
  align-items: center;
  margin: 12px 0;
  color: #cfe0ff;
  font-size: 12px;
}

body[data-route="ai/strategy"] .simbar .rail {
  height: 15px;
  border-radius: 10px;
  background: rgba(70, 140, 235, 0.17);
}

body[data-route="ai/strategy"] .simbar i {
  width: var(--w);
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(90deg, #64748b, #94a3b8);
}

body[data-route="ai/strategy"] .simbar.green i {
  background: linear-gradient(90deg, var(--green), var(--cyan));
}

body[data-route="ai/strategy"] .simbar.warn i {
  background: linear-gradient(90deg, var(--warn), #ffd089);
}

body[data-route="ai/strategy"] .simchart p {
  margin: 14px 0 0;
  color: #9ab0d1;
  font-size: 11px;
  line-height: 1.5;
}

body[data-route="ai/strategy"] .guardgrid {
  grid-template-columns: 1fr;
  gap: 8px;
}

body[data-route="ai/strategy"] .guard {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 10px;
  padding: 9px;
  color: #cfe0ff;
  background: rgba(8, 16, 32, 0.54);
  font-size: 12px;
}

body[data-route="ai/strategy"] .guard i {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 7px var(--green);
}

body[data-route="ai/strategy"] .guard b {
  min-width: 0;
  color: inherit;
  font-size: 12px;
  font-weight: 400;
}

body[data-route="ai/strategy"] .guard small {
  margin-left: auto;
  color: var(--mut);
  font-size: 10px;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .aihero,
  .aigrid2,
  .aigrid3,
  .anosearch,
  .pipe {
    grid-template-columns: 1fr;
  }

  .metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ops-kpi-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ops-grid,
  .ops-grid-wide,
  .kpi-grid,
  .platform-metrics,
  .platform-grid,
  .ops-search-grid,
  .ops-action-grid,
  .ops-evidence-grid,
  .tenant-toolbar,
  .tenant-tabs,
  .tenant-profile-guards,
  .tenant-profile-actions,
  .tenant-redline-grid,
  .impersonation-banner,
  .plan-grid,
  .tabs,
  .plans-create-form,
  .plans-checks,
  .onboard-summary,
  .billing-mode-grid,
  .branch-grid,
  .branch-steps,
  .stepper,
  .form-grid,
  .guard-grid,
  .gateway-map,
  .device-grid,
  .evidence-grid,
  .onboarding-create-form,
  .onboarding-action-form,
  .ledger-grid,
  .reportgrid,
  .acctgrid,
  .bindsteps,
  .bindbody,
  .ctlgrid,
  .nodebody,
  .channelbody,
  .control-groups-layout,
  .platform-form-row {
    grid-template-columns: 1fr;
  }

  /* customers 的 .acctgrid 有更高特异性的三列基础规则(260px+1fr+372px),
     上面的 .acctgrid{1fr} 覆不掉,导致手机端三列不塌、整页横向溢出。
     用同等特异性的路由选择器在断点内塌成单列。 */
  body[data-route="customers"] .acctgrid {
    grid-template-columns: 1fr;
  }

  .grid,
  .control-kpis,
  .eventgrid,
  .trend-wrap {
    grid-template-columns: 1fr;
  }

  .span-4,
  .span-5,
  .span-6,
  .span-7,
  .span-8,
  .span-12 {
    grid-column: auto;
  }

  .platform-wide {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  /* customers 过滤栏有更高特异性的六列基础规则(147px*3+...),下面分组的
     .customer-filters{1fr} 覆不掉,手机端列轨道超容器、过滤框与按钮溢出。
     用同等特异性的路由选择器塌成单列。 */
  body[data-route="customers"] .customer-filters {
    grid-template-columns: 1fr;
  }

  .ops-kpi-strip,
  .metrics,
  .ops-rings,
  .ops-runtime-list,
  .ops-linkage,
  .ring-grid,
  .eventstats,
  .events-tools,
  .eventcard,
  .eventdetail,
  .control-device-grid,
  .device-state-grid,
  .control-group-device-pool,
  .lock-range-grid,
  .platform-health,
  .platform-mini-grid,
  .platform-checks,
  .quota-cell,
  .plans-checks,
  .ready-item,
  .ledger-kpis,
  .aikpis,
  .weatherstrip,
  .modelrail,
  .oppcard,
  .contribrow,
  .anomatrix,
  .stratgrid,
  .stratmeta,
  .simbar,
  .guardgrid,
  .strategy-input-grid,
  .docgrid,
  .waterfall,
  .customer-filters,
  .acctstats,
  .acctscope,
  .acctform,
  .permgrid,
  .bindstats,
  .identify,
  .controller-filters,
  .ctlstats,
  .gatewaycards,
  .gwhealth,
  .opsgrid,
  .node-filters,
  .nodestats,
  .nodefacts,
  .nodecards,
  .nodechain,
  .readfilters,
  .channelstats,
  .channelcards,
  .channelread,
  .channelrow,
  .channelflow,
  .sum,
  .channelmatrix,
  .prepaid-filters,
  .range-field,
  .tenantstats,
  .tenantflow,
  .tenantform,
  .tenantcards,
  .meterstats,
  .metercards,
  .meterread,
  .meterflow,
  .meterchain-row,
  .bindcols,
  .readq,
  .tariffstats,
  .feelayout,
  .feequery,
  .feestats,
  .fee-row,
  .feechain,
  .feesplitrow,
  .meter-reading-filters,
  .readstats,
  .readflow,
  .readbar,
  .runtime-filters,
  .runstats,
  .runflow,
  .runbar,
  .daily-filters,
  .usestats,
  .useflow,
  .usebar,
  .usemix {
    grid-template-columns: 1fr;
  }

  .ledger-head,
  .ledger-card header,
  .ledger-actions,
  .acct-actions,
  .ledger-form-row {
    align-items: stretch;
    flex-direction: column;
  }

  .acctrow,
  .acctrow.head,
  .report-ledger-title,
  .report-ledger-row {
    grid-template-columns: 1fr;
  }

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

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


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

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

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

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

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

  .runheat {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .feetree {
    position: static;
    max-height: none;
  }

  .runtime-tree {
    min-height: auto;
  }

  .daily-tree {
    min-height: auto;
  }

  .bindmid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .lock-mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .alert-row,
  .todo-row {
    grid-template-columns: 1fr;
  }

  .row-actions {
    justify-content: flex-start;
  }

  .ops-row {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .ops-row em {
    grid-column: 2;
  }
}

/* Confirmed billing-cluster visual skin. Scoped to the remaining visual-lock routes. */
body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) :is(.sidebar, .topbar) {
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) .topbar h2 {
  font: 700 19px/28.5px "Segoe UI", "Microsoft YaHei", sans-serif;
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) .topbar > div:first-child {
  display: grid;
  gap: 0;
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) .topbar-actions {
  transform: translateX(5px);
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) .side-nav {
  transform: translateY(-1px);
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) .theme-label {
  font: 11px/16.5px "Segoe UI", "Microsoft YaHei", sans-serif;
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) .theme-dot {
  width: 15px;
  height: 15px;
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) .theme-dot-green {
  background: #16a34a;
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) .theme-dot-cyan {
  background: #0ea5b7;
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) .theme-dot-purple {
  background: #7c5cff;
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) .breadcrumb {
  font: 11px/16.5px "Segoe UI", "Microsoft YaHei", sans-serif;
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) .side-nav button {
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) .nav-group-title {
  height: 18px;
  margin: 0 7px 8px 0;
  line-height: 18px;
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) .nav-group-title::before {
  height: 15px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--cyan), var(--ac));
}

body[data-route="tariffs"] :is(.sidebar, .topbar) {
  font: 13px/19.5px "Segoe UI", "Microsoft YaHei", sans-serif;
}

body[data-route="tariffs"] .sidebar {
  padding-top: 0;
  transform: translateY(-2px);
}

body[data-route="tariffs"] .topbar h2 {
  font: 700 19px/28.5px "Segoe UI", "Microsoft YaHei", sans-serif;
}

body[data-route="tariffs"] .topbar > div:first-child {
  display: grid;
  gap: 0;
}

body[data-route="tariffs"] .topbar-actions {
  transform: translateX(5px);
}

body[data-route="tariffs"] .side-nav {
  transform: translateY(-1px);
}

body[data-route="tariffs"] .theme-label {
  font: 11px/16.5px "Segoe UI", "Microsoft YaHei", sans-serif;
}

body[data-route="tariffs"] .theme-dot {
  width: 15px;
  height: 15px;
}

body[data-route="tariffs"] .theme-dot-green {
  background: #16a34a;
}

body[data-route="tariffs"] .theme-dot-cyan {
  background: #0ea5b7;
}

body[data-route="tariffs"] .theme-dot-purple {
  background: #7c5cff;
}

body[data-route="tariffs"] .breadcrumb {
  font: 11px/16.5px "Segoe UI", "Microsoft YaHei", sans-serif;
}

body[data-route="tariffs"] .side-nav button {
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
}

body[data-route="tariffs"] .nav-group-title {
  height: 18px;
  margin: 0 7px 8px 0;
  line-height: 18px;
}

body[data-route="tariffs"] .nav-group-title::before {
  height: 15px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--cyan), var(--ac));
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) .nav-group-title::after {
  background: linear-gradient(90deg, rgba(70, 140, 235, 0.24), transparent);
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) :is(#projectSelector, .topbar .ghost-button) {
  font: 12.5px Arial, sans-serif;
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) #viewHost {
  color: var(--text);
  font: 13px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif;
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) #viewHost table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) #viewHost th,
body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) #viewHost td {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 8px 7px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
  white-space: normal;
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) #viewHost th {
  color: var(--mut);
  font-size: 11px;
  font-weight: 600;
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) #viewHost .inp {
  height: 30px;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  color: #eaf3ff;
  background: #0b1626;
  font: 12px Arial, sans-serif;
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) #viewHost .btn {
  display: block;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 12px;
  color: #eaf3ff;
  background: #12203c;
  font: 12.5px Arial, sans-serif;
  font-weight: 400;
  line-height: normal;
  box-shadow: none;
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) #viewHost .btn.primary {
  border: 1px solid var(--line);
  color: #eaf3ff;
  background: #12203c;
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) #viewHost .btn.pri {
  border: 0;
  color: #eaf3ff;
  background: linear-gradient(135deg, var(--ac), var(--ac2));
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) #viewHost .tag {
  display: inline-block;
  min-height: 0;
  border: 0;
  border-radius: 20px;
  padding: 2px 8px;
  color: #9fc6ff;
  background: rgba(47, 139, 255, 0.16);
  font: 10.5px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif;
  font-weight: 400;
  white-space: nowrap;
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) #viewHost .tag.g {
  color: #86efac;
  background: rgba(34, 197, 94, 0.18);
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) #viewHost .tag.w {
  color: #ffd089;
  background: rgba(255, 177, 61, 0.18);
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) #viewHost .panel,
body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) #viewHost :is(.feepanel, .readpanel, .runpanel, .usepanel, .tenantpanel) {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.52), rgba(8, 18, 35, 0.64));
  box-shadow: none;
}

body:is([data-route="billing"], [data-route="runtime-records"], [data-route="daily-usage"]) #viewHost .feelayout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

/* 窄屏响应式(实测修复 #287:billing 等页 ≤860 横向溢出)。
   300px 固定树列(#viewHost 高特异性)把内容挤窄→溢出;断点内塌单列。 */
@media (max-width: 767px) {
  body:is([data-route="billing"], [data-route="runtime-records"], [data-route="daily-usage"]) #viewHost .feelayout {
    grid-template-columns: minmax(0, 1fr);
  }
}

body:is([data-route="billing"], [data-route="runtime-records"], [data-route="daily-usage"]) #viewHost .feetree {
  min-height: 760px;
  overflow: hidden;
  padding: 13px 15px;
  border-radius: 11px;
}

body:is([data-route="billing"], [data-route="runtime-records"], [data-route="daily-usage"]) #viewHost .feetree .pt {
  margin-bottom: 12px;
}

body:is([data-route="billing"], [data-route="runtime-records"], [data-route="daily-usage"]) #viewHost .feetree .inp {
  width: 100%;
  margin-bottom: 12px;
}

body:is([data-route="billing"], [data-route="runtime-records"], [data-route="daily-usage"]) #viewHost .feetreeitem {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 8px;
  align-items: center;
  min-height: 0;
  border: 0;
  border-radius: 8px;
  padding: 8px 7px;
  color: #cfe0ff;
  background: transparent;
  font-size: 12px;
  line-height: 1.5;
}

body:is([data-route="billing"], [data-route="runtime-records"], [data-route="daily-usage"]) #viewHost .feetreeitem.on {
  color: #fff;
  background: rgba(47, 139, 255, 0.16);
}

body:is([data-route="billing"], [data-route="runtime-records"], [data-route="daily-usage"]) #viewHost .feetreeitem small {
  color: var(--mut);
  font-size: 10px;
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) #viewHost .readfilters,
body[data-route="billing"] #viewHost .feequery {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0;
}

body[data-route="billing"] #viewHost .feequery {
  margin-bottom: 12px;
}

body:is(
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) #viewHost .readfilters .field {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 52px;
  border: 1px solid rgba(70, 140, 235, 0.18);
  border-radius: 10px;
  padding: 10px;
  background: rgba(8, 16, 32, 0.48);
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) #viewHost :is(.feequery label, .readfilters label) {
  color: #cfe0ff;
  font-size: 12px;
  white-space: nowrap;
}

body:is([data-route="meter-readings"], [data-route="runtime-records"], [data-route="daily-usage"], [data-route="prepaid-tenants"]) #viewHost .readfilters .inp {
  width: 170px;
  height: 32px;
}

body:is([data-route="meter-readings"], [data-route="runtime-records"], [data-route="daily-usage"]) #viewHost .readfilters .wide {
  width: 250px;
}

body[data-route="billing"] #viewHost .feequery {
  flex-wrap: nowrap;
}

body[data-route="billing"] #viewHost .feequery .inp {
  min-width: 170px;
  width: 170px;
}

body[data-route="billing"] #viewHost .feestats,
body[data-route="meter-readings"] #viewHost .readstats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

body[data-route="meter-readings"] #viewHost .readstats {
  margin-bottom: 0;
}

body:is([data-route="runtime-records"], [data-route="daily-usage"], [data-route="prepaid-tenants"]) #viewHost :is(.runstats, .usestats, .tenantstats) {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 0;
}

/* 窄屏响应式(实测修复 runtime-records/daily-usage 横向溢出)。
   runtime-layout 独立 300px 树列、stats 六列(1fr 有 min-content 最小)均不塌→溢出。 */
@media (max-width: 767px) {
  body:is([data-route="runtime-records"], [data-route="daily-usage"]) #viewHost .runtime-layout,
  .runtime-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body:is([data-route="runtime-records"], [data-route="daily-usage"], [data-route="prepaid-tenants"]) #viewHost :is(.runstats, .usestats, .tenantstats) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) #viewHost :is(.tariffstat, .feestat, .readstat, .runstat, .usestat, .tenantstat) {
  min-height: 72px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 13px;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.52), rgba(8, 18, 35, 0.58));
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) #viewHost :is(.tariffstat, .feestat, .readstat, .runstat, .usestat, .tenantstat) small {
  display: block;
  color: var(--mut);
  font-size: 10px;
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) #viewHost :is(.tariffstat, .feestat, .readstat, .runstat, .usestat, .tenantstat) :is(b, strong) {
  display: inline;
  margin: 0;
  color: #fff;
  font-size: 22px;
  line-height: 1.5;
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) #viewHost :is(.tariffstat, .feestat, .readstat, .runstat, .usestat, .tenantstat) strong {
  color: var(--green);
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) #viewHost :is(.tariffstat, .feestat, .readstat, .runstat, .usestat, .tenantstat) span {
  display: inline;
  float: right;
  margin-top: 7px;
  color: var(--mut);
  font-size: 11px;
}

body[data-route="billing"] #viewHost .feebody,
body[data-route="meter-readings"] #viewHost .readbody,
body[data-route="runtime-records"] #viewHost .runbody,
body[data-route="daily-usage"] #viewHost .usebody {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 370px;
  gap: 12px;
  align-items: start;
}

/* 窄屏响应式(实测修复 #287)。370px 固定详情列把账单列挤成 0→溢出,断点内塌单列;
   feequery/readfilters 桌面是不换行单行工具栏,窄屏放开换行避免过滤控件溢出。 */
@media (max-width: 767px) {
  body[data-route="billing"] #viewHost .feebody,
  body[data-route="meter-readings"] #viewHost .readbody,
  body[data-route="runtime-records"] #viewHost .runbody,
  body[data-route="daily-usage"] #viewHost .usebody {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-route="billing"] #viewHost .feequery,
  body[data-route="meter-readings"] #viewHost .readfilters {
    flex-wrap: wrap;
  }
}

body[data-route="prepaid-tenants"] #viewHost .tenantbody {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 12px;
  align-items: start;
}

/* 窄屏:380px 固定详情列不塌→溢出;过滤栏放开换行。 */
@media (max-width: 767px) {
  body[data-route="prepaid-tenants"] #viewHost .tenantbody {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-route="prepaid-tenants"] #viewHost .prepaid-filters {
    flex-wrap: wrap;
  }
}

body[data-route="billing"] #viewHost :is(.feetable, .feepanel) {
  padding: 14px;
}

body[data-route="billing"] #viewHost .feedetail,
body[data-route="meter-readings"] #viewHost .readhero,
body[data-route="daily-usage"] #viewHost .usehero,
body[data-route="prepaid-tenants"] #viewHost .tenanthero {
  border: 1px solid rgba(25, 230, 160, 0.34);
  border-radius: 12px;
  padding: 13px;
  margin-bottom: 12px;
  background: radial-gradient(circle at 88% 18%, rgba(25, 230, 160, 0.2), transparent 45%), rgba(8, 16, 32, 0.62);
}

body[data-route="billing"] #viewHost .feedetail {
  border-color: rgba(47, 139, 255, 0.32);
  margin-bottom: 0;
  background: radial-gradient(circle at 88% 18%, rgba(47, 139, 255, 0.18), transparent 45%), rgba(8, 16, 32, 0.62);
}

body[data-route="runtime-records"] #viewHost .runhero {
  border: 1px solid rgba(47, 139, 255, 0.34);
  border-radius: 12px;
  padding: 13px;
  margin-bottom: 12px;
  background: radial-gradient(circle at 88% 18%, rgba(47, 139, 255, 0.2), transparent 45%), rgba(8, 16, 32, 0.62);
}

body:is([data-route="billing"], [data-route="meter-readings"], [data-route="runtime-records"], [data-route="daily-usage"], [data-route="prepaid-tenants"]) #viewHost :is(.feedetail, .readhero, .runhero, .usehero, .tenanthero) small {
  display: block;
  color: var(--mut);
  font-size: 10px;
}

body:is([data-route="billing"], [data-route="meter-readings"], [data-route="runtime-records"], [data-route="daily-usage"], [data-route="prepaid-tenants"]) #viewHost :is(.feedetail, .readhero, .runhero, .usehero, .tenanthero) b {
  font-size: 22px;
}

body:is([data-route="billing"], [data-route="meter-readings"], [data-route="runtime-records"], [data-route="daily-usage"], [data-route="prepaid-tenants"]) #viewHost :is(.feedetail, .readhero, .runhero, .usehero, .tenanthero) .sum {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

body:is([data-route="billing"], [data-route="meter-readings"], [data-route="runtime-records"], [data-route="daily-usage"], [data-route="prepaid-tenants"]) #viewHost :is(.feedetail, .readhero, .runhero, .usehero, .tenanthero) .sum div {
  border: 0;
  border-radius: 8px;
  padding: 8px;
  background: rgba(8, 16, 32, 0.58);
}

body:is([data-route="billing"], [data-route="meter-readings"], [data-route="runtime-records"], [data-route="daily-usage"], [data-route="prepaid-tenants"]) #viewHost :is(.feechain, .readflow, .runflow, .useflow, .tenantflow) {
  align-items: center;
  color: #cfe0ff;
  font-size: 11px;
  margin: 12px 0;
  text-align: center;
}

body:is([data-route="billing"], [data-route="meter-readings"], [data-route="runtime-records"], [data-route="daily-usage"], [data-route="prepaid-tenants"]) #viewHost :is(.feechain, .readflow, .runflow, .useflow, .tenantflow) div {
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 9px;
  padding: 9px 4px;
  min-height: 48px;
  color: #cfe0ff;
  background: rgba(8, 16, 32, 0.54);
}

body:is([data-route="billing"], [data-route="meter-readings"], [data-route="runtime-records"], [data-route="daily-usage"], [data-route="prepaid-tenants"]) #viewHost :is(.feechain, .readflow, .runflow, .useflow, .tenantflow) b {
  display: block;
  margin-bottom: 3px;
  color: #fff;
  font-size: 12px;
}

body:is([data-route="billing"], [data-route="meter-readings"], [data-route="runtime-records"], [data-route="daily-usage"], [data-route="prepaid-tenants"]) #viewHost :is(.feechain, .readflow, .runflow, .useflow, .tenantflow) i {
  color: var(--cyan);
  font-style: normal;
}

body[data-route="meter-readings"] #viewHost .readissues,
body[data-route="runtime-records"] #viewHost .runissues,
body[data-route="daily-usage"] #viewHost .useissues {
  gap: 8px;
}

body[data-route="meter-readings"] #viewHost .readbar .rail {
  background: rgba(70, 140, 235, 0.18);
}

body[data-route="meter-readings"] #viewHost .readbar .rail i {
  background: linear-gradient(90deg, var(--green), var(--cyan));
}

body[data-route="meter-readings"] #viewHost .readbars {
  gap: 8px;
}

body[data-route="meter-readings"] #viewHost .readbar,
body[data-route="meter-readings"] #viewHost .readbar span,
body[data-route="meter-readings"] #viewHost .readbar b {
  color: #cfe0ff;
}

body[data-route="meter-readings"] #viewHost .readissue {
  border-left-color: var(--cyan);
}

body[data-route="meter-readings"] #viewHost .readissue.warn {
  border-left-color: #ffb13d;
}

body[data-route="meter-readings"] #viewHost .readissue.bad {
  border-left-color: #ff5a6a;
}

body[data-route="meter-readings"] #viewHost .readquality {
  display: block;
  box-sizing: border-box;
  height: 158px;
}

body[data-route="runtime-records"] #viewHost .runstat {
  min-height: 95.5px;
}

body[data-route="runtime-records"] #viewHost .runstat.warn b {
  color: var(--warning);
}

body[data-route="runtime-records"] #viewHost .runside :is(.runhero, .runpanel) {
  margin-bottom: 0;
}

body[data-route="runtime-records"] #viewHost .runbars {
  gap: 8px;
}

body[data-route="runtime-records"] #viewHost .runbar {
  color: #cfe0ff;
  font-size: 12px;
  line-height: 18px;
}

body[data-route="runtime-records"] #viewHost .runissue {
  min-height: 54px;
}

body[data-route="daily-usage"] #viewHost .usestat {
  min-height: 95.5px;
}

body[data-route="daily-usage"] #viewHost .useside :is(.usehero, .usepanel) {
  margin-bottom: 0;
}

body[data-route="daily-usage"] #viewHost .usebars {
  gap: 8px;
}

body[data-route="daily-usage"] #viewHost .usebar {
  color: #cfe0ff;
  font-size: 12px;
  line-height: 18px;
}

body[data-route="daily-usage"] #viewHost .useissue {
  min-height: 54px;
}

body[data-route="daily-usage"] #viewHost .daily-usage-page {
  padding-bottom: 12px;
}

body[data-route="runtime-records"] #viewHost .runtime-filters {
  display: flex;
  gap: 8px;
  min-height: 0;
  align-items: center;
  flex-wrap: wrap;
}

body[data-route="runtime-records"] .main {
  padding-bottom: 24px;
}

body[data-route="runtime-records"] #viewHost .runflow.compact {
  grid-template-columns: 1fr 24px 1fr 24px 1fr;
  gap: normal;
}

body[data-route="runtime-records"] #viewHost .run-table {
  table-layout: auto;
}

body[data-route="runtime-records"] #viewHost .run-table th,
body[data-route="runtime-records"] #viewHost .run-table td {
  width: auto !important;
}

body[data-route="runtime-records"] #viewHost .run-table td:nth-child(9) .tag {
  display: inline;
  width: auto;
  padding: 2px 8px;
  line-height: normal;
  text-align: left;
  white-space: normal;
}

body[data-route="runtime-records"] #viewHost .runtime-filter-fields {
  display: grid;
  grid-template-columns: minmax(260px, 1.45fr) minmax(180px, 1fr) minmax(230px, 1.15fr);
  gap: 10px;
  flex: initial;
  align-items: stretch;
}

body[data-route="runtime-records"] #viewHost .runtime-filter-actions {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) repeat(5, max-content);
  gap: 10px;
  flex: initial;
  align-items: end;
  justify-content: start;
}

body[data-route="daily-usage"] #viewHost .daily-filters {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

body[data-route="daily-usage"] #viewHost .daily-filters .field:nth-child(1) {
  width: 326px;
}

body[data-route="daily-usage"] #viewHost .daily-filters .field:nth-child(2) {
  width: auto;
}

body[data-route="daily-usage"] #viewHost .daily-filters .field:nth-child(3) {
  width: auto;
}

body[data-route="daily-usage"] #viewHost .daily-filters .btn {
  grid-row: auto;
}

body[data-route="daily-usage"] #viewHost .daily-filters .btn:nth-child(4) {
  grid-column: auto;
}

body[data-route="daily-usage"] #viewHost .daily-filters .btn:nth-child(5) {
  grid-column: auto;
}

body[data-route="daily-usage"] #viewHost .daily-filters .btn:nth-child(6) {
  grid-column: auto;
}

body[data-route="daily-usage"] #viewHost .daily-filters .btn:nth-child(7) {
  grid-column: auto;
}

body[data-route="prepaid-tenants"] #viewHost .prepaid-filters {
  min-height: 95px;
  align-content: flex-start;
  box-sizing: border-box;
  gap: 9px 8px;
  padding-top: 1px;
}

body[data-route="prepaid-tenants"] #viewHost .prepaid-filters .field {
  flex: 0 0 270px;
  height: 52px;
  align-items: center;
  border: 1px solid rgba(70, 140, 235, 0.18);
  border-radius: 10px;
  padding: 10px;
  background: rgba(8, 16, 32, 0.48);
  color: #eaf3ff;
}

body[data-route="prepaid-tenants"] #viewHost .prepaid-filters .field:nth-child(2) {
  flex-basis: 280px;
}

body[data-route="prepaid-tenants"] #viewHost .prepaid-filters .field:nth-child(3) {
  flex-basis: 224px;
}

body[data-route="prepaid-tenants"] #viewHost .prepaid-filters .field:nth-child(4) {
  flex-basis: 296px;
}

body[data-route="prepaid-tenants"] #viewHost .prepaid-filters label {
  display: block;
  margin-right: 0;
  min-width: 0;
}

body[data-route="prepaid-tenants"] #viewHost .prepaid-filters .inp {
  width: 100%;
}

body[data-route="prepaid-tenants"] #viewHost .prepaid-filters .range-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
}

body[data-route="prepaid-tenants"] #viewHost .prepaid-filters .range-field label {
  grid-column: 1 / -1;
}

body[data-route="prepaid-tenants"] #viewHost .tenantstats {
  min-height: 72px;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-table {
  width: 100%;
  table-layout: auto;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-table th,
body[data-route="prepaid-tenants"] #viewHost .tenant-table td {
  width: auto !important;
  min-width: 0;
  padding: 8px 7px;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-table {
  table-layout: auto;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-table th,
body[data-route="prepaid-tenants"] #viewHost .tenant-table td {
  width: auto !important;
}

body[data-route="prepaid-tenants"] #viewHost .tenantops {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0;
}

body[data-route="prepaid-tenants"] #viewHost .tenantrow {
  gap: 8px;
  border-color: rgba(70, 140, 235, 0.16);
  border-radius: 9px;
  padding: 8px 9px;
  background: rgba(8, 16, 32, 0.52);
  color: #cfe0ff;
  font-size: 12px;
  line-height: 1.5;
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) #viewHost :is(.feetable, .readtable, .runtable, .usetable, .tenanttable) {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 13px 15px;
  background: linear-gradient(180deg, rgba(20, 42, 80, 0.5), rgba(10, 20, 40, 0.5));
  box-shadow: 0 0 18px rgba(20, 70, 150, 0.12), inset 0 1px 0 rgba(120, 180, 255, 0.12);
}

body:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) #viewHost :is(.feetable, .readtable, .runtable, .usetable, .tenanttable)::before {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(120, 200, 255, 0.5), transparent);
}

body[data-route="tariffs"] #viewHost {
  color: #eaf3ff;
  font: 13px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif;
}

body[data-route="tariffs"] #viewHost table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}

body[data-route="tariffs"] #viewHost th,
body[data-route="tariffs"] #viewHost td {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 8px 7px;
  background: transparent;
  color: #eaf3ff;
  font-size: 12px;
  line-height: 1.5;
  white-space: normal;
}

body[data-route="tariffs"] #viewHost th {
  color: var(--mut);
  font-size: 11px;
  font-weight: 600;
  line-height: 16.5px;
}

body[data-route="tariffs"] #viewHost .inp {
  height: 30px;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  color: #eaf3ff;
  background: #0b1626;
  font: 12px Arial, sans-serif;
}

body[data-route="tariffs"] #viewHost .btn {
  display: block;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 12px;
  color: #eaf3ff;
  background: #12203c;
  font: 12.5px Arial, sans-serif;
  font-weight: 400;
  line-height: normal;
  box-shadow: none;
}

body[data-route="tariffs"] #viewHost .btn.primary {
  border: 1px solid var(--line);
  color: #eaf3ff;
  background: #12203c;
}

body[data-route="tariffs"] #viewHost .btn.pri {
  border: 0;
  color: #eaf3ff;
  background: linear-gradient(135deg, var(--ac), var(--ac2));
}

body[data-route="tariffs"] #viewHost .tag {
  display: inline-block;
  min-height: 0;
  border: 0;
  border-radius: 20px;
  padding: 2px 8px;
  color: #9fc6ff;
  background: rgba(47, 139, 255, 0.16);
  font: 10.5px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif;
  font-weight: 400;
  white-space: nowrap;
}

body[data-route="tariffs"] #viewHost .tag.g {
  color: #86efac;
  background: rgba(34, 197, 94, 0.18);
}

body[data-route="tariffs"] #viewHost .tag.w {
  color: #ffd089;
  background: rgba(255, 177, 61, 0.18);
}

body[data-route="tariffs"] #viewHost .tariffhero {
  box-shadow: none;
}

body[data-route="tariffs"] #viewHost .tariffhero {
  border-color: rgba(25, 230, 160, 0.34);
}

body[data-route="tariffs"] #viewHost .tariffdesc {
  color: #9ab0d1;
}

body[data-route="tariffs"] #viewHost .tariffform .btn,
body[data-route="tariffs"] #viewHost .tariffform .btn.pri {
  border: 1px solid rgba(70, 140, 235, 0.2);
  color: #eaf3ff;
  background: #12203c;
}

body[data-route="tariffs"] #viewHost .tariffwarn {
  border-color: rgba(255, 177, 61, 0.28);
  color: #ffd089;
}

body[data-route="tariffs"] #viewHost .tariffs-page {
  padding-bottom: 12px;
}

body[data-route="billing"] #viewHost .feetree,
body[data-route="runtime-records"] #viewHost .feetree,
body[data-route="daily-usage"] #viewHost .feetree {
  height: 760px;
  min-height: 0;
  max-height: none;
}

body[data-route="billing"] #viewHost .feeside .feepanel + .feepanel,
body[data-route="runtime-records"] #viewHost .runside .runpanel + .runpanel,
body[data-route="daily-usage"] #viewHost .useside .usepanel + .usepanel,
body[data-route="prepaid-tenants"] #viewHost .tenantside .tenantpanel + .tenantpanel {
  margin-top: 0;
}

body[data-route="billing"] #viewHost :is(.feesplit, .feerules) {
  gap: 8px;
}

body[data-route="billing"] .main {
  padding-bottom: 41px;
}

body[data-route="billing"] #viewHost .billing-page {
  padding-bottom: 8px;
}

body[data-route="billing"] #viewHost .feestat b.warn {
  color: #ffb13d;
}

body[data-route="billing"] #viewHost .feestat strong {
  color: #19e6a0;
}

body[data-route="billing"] #viewHost .fee-table .money {
  color: #86efac;
  font-weight: 800;
}

body[data-route="billing"] #viewHost .fee-table .zero {
  color: #8ca0bf;
}

body[data-route="billing"] #viewHost .feedetail .sum div:nth-child(2) b {
  color: #86efac;
}

body[data-route="billing"] #viewHost .feesplitrow.warn .rail i {
  background: linear-gradient(90deg, #ffb13d, #ff8a45);
}

body[data-route="billing"] #viewHost .feesplitrow:nth-child(2) .rail i {
  background: linear-gradient(90deg, #19e6a0, #27e0ff);
}

body[data-route="billing"] #viewHost .fee-table td {
  padding-top: 7.13px;
  padding-bottom: 7.13px;
}

body[data-route="billing"] #viewHost .fee-table th {
  padding-top: 8px;
  padding-bottom: 8px;
}

body[data-route="billing"] #viewHost .fee-table button.tag {
  display: inline;
  appearance: none;
  min-height: 0;
  margin: 0;
  border: 0;
  padding: 2px 8px;
  font: 10.5px/15.75px "Segoe UI", "Microsoft YaHei", sans-serif;
  vertical-align: baseline;
}

body[data-route="billing"] #viewHost .feehint {
  display: flex;
  gap: 8px;
  align-items: center;
  border-color: rgba(255, 177, 61, 0.28);
  padding: 9px 11px;
  margin-top: 10px;
  color: #ffd089;
  background: rgba(255, 177, 61, 0.12);
}

body[data-route="runtime-records"] #viewHost .runzero {
  color: #9fc6ff;
}

body[data-route="daily-usage"] #viewHost .daily-filters {
  gap: 8px;
}

body[data-route="prepaid-tenants"] #viewHost .tenanthero {
  box-sizing: border-box;
  height: 222px;
  margin-bottom: 0;
}

body[data-route="prepaid-tenants"] #viewHost .tenantcards {
  gap: 10px;
  height: 88px;
  overflow: hidden;
}

body[data-route="prepaid-tenants"] #viewHost .tenanttable + .tenantpanel {
  margin-top: 0;
}

body[data-route="prepaid-tenants"] #viewHost .tenantflow {
  grid-template-columns: 1fr 24px 1fr 24px 1fr 24px 1fr;
  gap: 0;
}

body[data-route="prepaid-tenants"] #viewHost .tenantactions {
  box-sizing: border-box;
  height: 264px;
  overflow: hidden;
}

body[data-route="prepaid-tenants"] #viewHost .tenantsummary {
  box-sizing: border-box;
  height: 150px;
  overflow: hidden;
}

body[data-route="prepaid-tenants"] #viewHost .tenantrooms {
  box-sizing: border-box;
  height: 264px;
  overflow: hidden;
}

body[data-route="prepaid-tenants"] #viewHost .prepaid-tenants-page {
  padding-bottom: 12px;
}

body[data-route="prepaid-tenants"] #viewHost .prepaid-filters .range-field {
  display: flex;
  grid-template-columns: none;
  gap: 8px;
}

body[data-route="prepaid-tenants"] #viewHost .prepaid-filters .range-field label {
  grid-column: auto;
}

body[data-route="prepaid-tenants"] #viewHost .prepaid-filters .range-field .inp {
  width: 98px;
}

body[data-route="prepaid-tenants"] #viewHost .tenantalert {
  gap: 10px;
  border: 1px solid rgba(255, 177, 61, 0.3);
  border-radius: 9px;
  padding: 10px 13px;
  color: #ffd089;
  font-size: 12px;
  flex-wrap: nowrap;
}

body[data-route="prepaid-tenants"] #viewHost .tenantalert b {
  width: auto;
  height: auto;
  display: inline;
  border-radius: 0;
  color: inherit;
  background: transparent;
  font-size: 12px;
}

body[data-route="prepaid-tenants"] #viewHost .tenantalert .sp {
  flex: 1 1 auto;
}

body[data-route="prepaid-tenants"] #viewHost .tenantalert [data-prepaid-enforce] {
  cursor: pointer;
}

body[data-route="prepaid-tenants"] #viewHost .tenantmoney {
  color: #86efac;
  font-weight: 800;
}

body[data-route="prepaid-tenants"] #viewHost .tenantlow {
  color: #ffcf78;
  font-weight: 800;
}

body[data-route="prepaid-tenants"] #viewHost .tenantzero {
  color: #ff7a7a;
  font-weight: 800;
}

body[data-route="prepaid-tenants"] #viewHost .tenantops span {
  color: #2f8bff;
  font-size: 12px;
}

body[data-route="prepaid-tenants"] #viewHost .tenantops span.danger {
  color: #ff5a6a;
}

body[data-route="prepaid-tenants"] #viewHost .tenanthero b {
  color: #86efac;
}

body[data-route="prepaid-tenants"] #viewHost .tenanttabs {
  gap: 6px;
  margin-bottom: 10px;
}

body[data-route="prepaid-tenants"] #viewHost .tenanttabs span {
  min-height: 0;
  display: inline;
  border: 1px solid rgba(70, 140, 235, 0.22);
  border-radius: 8px;
  padding: 6px 9px;
  color: #cfe0ff;
  background: rgba(8, 16, 32, 0.52);
  font-size: 12px;
  font-weight: 400;
}

body[data-route="prepaid-tenants"] #viewHost .tenanttabs .on {
  border-color: rgba(25, 230, 160, 0.45);
  color: #d7fff0;
  background: rgba(25, 230, 160, 0.18);
}

body[data-route="prepaid-tenants"] #viewHost .tenantform {
  grid-template-columns: 84px 1fr;
  gap: 9px 10px;
  color: #cfe0ff;
  font-size: 12px;
}

body[data-route="prepaid-tenants"] #viewHost .tenantform span {
  color: #cfe0ff;
  font-weight: 400;
}

body[data-route="prepaid-tenants"] #viewHost .tenantcard {
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 10px;
  padding: 10px;
  color: #cfe0ff;
  background: rgba(8, 16, 32, 0.52);
  font-size: 12px;
}

body[data-route="prepaid-tenants"] #viewHost .tenantcard b {
  display: block;
  margin-top: 6px;
  color: #fff;
  font-size: 16px;
}

body[data-route="prepaid-tenants"] #viewHost .tenantcard small {
  display: block;
  margin-top: 3px;
  color: var(--mut);
  font-size: 10px;
}

body[data-route="prepaid-tenants"] #viewHost .tenantrow {
  grid-template-columns: 1fr auto;
  gap: 8px;
  border: 1px solid rgba(70, 140, 235, 0.16);
  border-radius: 9px;
  padding: 8px 9px;
  color: #cfe0ff;
  background: rgba(8, 16, 32, 0.52);
  font-size: 12px;
}

body[data-route="prepaid-tenants"] #viewHost .tenantrow small {
  grid-column: auto;
  margin-top: 3px;
  color: var(--mut);
  font-size: 10px;
}
.confirmed-ops.ops-sample .ops-tou-detail {
  min-height: 0;
  display: grid;
  gap: 8px;
}

.confirmed-ops.ops-sample .ops-tou-bill-strip {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 177, 61, 0.32);
  border-radius: 8px;
  padding: 10px 12px;
  background: linear-gradient(90deg, rgba(255, 177, 61, 0.16), rgba(20, 42, 80, 0.35));
}

.confirmed-ops.ops-sample .ops-tou-bill-strip span,
.confirmed-ops.ops-sample .ops-tou-row-foot,
.confirmed-ops.ops-sample .ops-tou-footer {
  color: var(--mut);
  font-size: 10.5px;
}

.confirmed-ops.ops-sample .ops-tou-bill-strip strong {
  display: block;
  margin-top: 2px;
  color: var(--amber);
  font-size: 26px;
  font-weight: 900;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.confirmed-ops.ops-sample .ops-tou-bill-badge {
  min-width: 96px;
  border: 1px solid rgba(39, 224, 255, 0.28);
  border-radius: 7px;
  padding: 7px 9px;
  color: #82e8ff;
  background: rgba(39, 224, 255, 0.08);
  text-align: right;
}

.confirmed-ops.ops-sample .ops-tou-bill-badge b {
  display: block;
  color: var(--cyan);
  font-size: 13px;
  line-height: 1.1;
}

.confirmed-ops.ops-sample .ops-tou-list {
  display: grid;
  gap: 6px;
}

.confirmed-ops.ops-sample .ops-tou-row {
  min-width: 0;
  border: 1px solid rgba(42, 89, 139, 0.48);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(5, 15, 29, 0.34);
}

.confirmed-ops.ops-sample .ops-tou-row-head,
.confirmed-ops.ops-sample .ops-tou-row-foot,
.confirmed-ops.ops-sample .ops-tou-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.confirmed-ops.ops-sample .ops-tou-row-head {
  margin-bottom: 6px;
  color: var(--txt);
  font-size: 12px;
}

.confirmed-ops.ops-sample .ops-tou-row-head b {
  font-size: 13px;
  font-weight: 900;
}

.confirmed-ops.ops-sample .ops-tou-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.confirmed-ops.ops-sample .ops-tou-name i,
.confirmed-ops.ops-sample .ops-tou-track i {
  display: block;
  border-radius: 999px;
}

.confirmed-ops.ops-sample .ops-tou-name i {
  width: 8px;
  height: 8px;
}

.confirmed-ops.ops-sample .ops-tou-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(22, 48, 82, 0.92);
}

.confirmed-ops.ops-sample .ops-tou-track i {
  width: calc(var(--value) * 1%);
  height: 100%;
  box-shadow: 0 0 16px rgba(39, 224, 255, 0.2);
}

.confirmed-ops.ops-sample .ops-tou-row-foot {
  margin-top: 6px;
  min-width: 0;
}

.confirmed-ops.ops-sample .ops-tou-row-foot span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.confirmed-ops.ops-sample .ops-tou-row-foot span:last-child {
  flex: 0 0 auto;
}

.confirmed-ops.ops-sample .ops-tou-footer {
  color: #86a0bf;
}

.confirmed-ops.ops-sample .ops-tou-row .peak,
.confirmed-ops.ops-sample .ops-tou-track .peak {
  background: var(--heat);
}

.confirmed-ops.ops-sample .ops-tou-row .flat,
.confirmed-ops.ops-sample .ops-tou-track .flat {
  background: linear-gradient(90deg, var(--cool), var(--cyan));
}

.confirmed-ops.ops-sample .ops-tou-row .valley,
.confirmed-ops.ops-sample .ops-tou-track .valley {
  background: var(--fan);
}

@media (max-width: 640px) {
  .confirmed-ops.ops-sample .ops-tou-bill-strip {
    grid-template-columns: 1fr;
  }

  .confirmed-ops.ops-sample .ops-tou-bill-badge {
    min-width: 0;
    text-align: left;
  }
}

.confirmed-ops.ops-sample .ops-tou-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  overflow: hidden;
}

.confirmed-ops.ops-sample .ops-tou-panel .pt {
  margin-bottom: 8px;
}

.confirmed-ops.ops-sample .ops-tou-compact {
  height: auto;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  align-items: stretch;
  justify-content: stretch;
  justify-items: stretch;
  gap: 5px;
  overflow: hidden;
}

.confirmed-ops.ops-sample .ops-tou-compact .ops-tou-bill-strip {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  border-color: rgba(42, 89, 139, 0.58);
  padding: 6px 9px;
  background: rgba(6, 18, 36, 0.52);
}

.confirmed-ops.ops-sample .ops-tou-compact .ops-tou-bill-main {
  min-width: 0;
}

.confirmed-ops.ops-sample .ops-tou-compact .ops-tou-bill-main em {
  display: block;
  margin-top: 1px;
  color: #7e98c6;
  font-size: 10px;
  font-style: normal;
  line-height: 1.1;
}

.confirmed-ops.ops-sample .ops-tou-compact .ops-tou-bill-strip strong {
  font-size: 21px;
  line-height: 1;
}

.confirmed-ops.ops-sample .ops-tou-compact .ops-tou-bill-badge {
  min-width: 88px;
  padding: 5px 7px;
}

.confirmed-ops.ops-sample .ops-tou-compact .ops-tou-bill-badge b {
  font-size: 11.5px;
}

.confirmed-ops.ops-sample .ops-tou-compact .ops-tou-list {
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.confirmed-ops.ops-sample .ops-tou-compact .ops-tou-row {
  min-height: 0;
  padding: 4px 8px;
  overflow: hidden;
  border-radius: 7px;
  background: rgba(5, 15, 29, 0.28);
}

.confirmed-ops.ops-sample .ops-tou-compact .ops-tou-row-head {
  margin-bottom: 3px;
  font-size: 11px;
  line-height: 1.1;
}

.confirmed-ops.ops-sample .ops-tou-compact .ops-tou-row-head b {
  font-size: 12px;
}

.confirmed-ops.ops-sample .ops-tou-compact .ops-tou-track {
  height: 5px;
}

.confirmed-ops.ops-sample .ops-tou-compact .ops-tou-row-foot {
  margin-top: 3px;
  font-size: 9px;
  line-height: 1.1;
}

.confirmed-ops.ops-sample .ops-tou-compact .ops-tou-row-foot span:first-child {
  max-width: 70%;
}

body[data-route="ac-control"] .control-filter-select,
body[data-route="ac-control"] .control-page-size {
  width: auto;
  min-width: 104px;
  height: 35px;
  min-height: 0;
  padding: 7px 30px 7px 10px;
  font: 400 12.5px Arial, sans-serif;
  color: var(--text);
  background-color: var(--surface-nav);
}

body[data-route="ac-control"] select.inp option {
  color: var(--txt);
  background-color: var(--surface-input);
}

.control-advanced-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(132px, 1fr));
  gap: 8px 10px;
  align-items: end;
  margin: -4px 0 12px;
  padding: 10px;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  background: rgba(13, 24, 42, 0.72);
}

.control-advanced-filters[hidden] {
  display: none;
}

.control-filter-field {
  min-width: 0;
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}

.control-filter-field.wide {
  grid-column: span 2;
}

.control-filter-field > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.control-filter-field .inp,
.control-filter-field select.inp {
  width: 100%;
  min-width: 0;
  height: 34px;
  min-height: 0;
  padding: 7px 10px;
  font-size: 12px;
}

.control-filter-range {
  grid-template-columns: minmax(72px, auto) minmax(54px, 1fr) auto minmax(54px, 1fr);
  align-items: center;
}

.control-filter-range > span {
  grid-column: 1 / -1;
}

.control-filter-range em {
  color: var(--muted);
  font-style: normal;
  text-align: center;
}

.control-filter-row .btn.active {
  border-color: var(--accent);
  color: #fff;
  background: var(--overlay-blue-strong);
}

.control-card.selection-selected {
  position: relative;
  border-color: var(--green);
  box-shadow: inset 0 0 0 2px var(--green), 0 0 0 1px rgba(25, 230, 160, 0.24), 0 0 22px rgba(25, 230, 160, 0.28);
}

.control-batch-actions.is-disabled {
  opacity: 0.72;
}

.control-batch-actions.is-disabled summary {
  cursor: default;
}

.control-batch-actions.is-disabled [data-batch-command] {
  opacity: 0.54;
}

.control-page-numbers {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.control-page-ellipsis {
  min-width: 22px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 767px) {
  .control-advanced-filters {
    grid-template-columns: repeat(2, minmax(132px, 1fr));
  }

  body[data-route="ac-control"] .control-layout-grid,
  body[data-route="ac-control"] .control-tree-panel,
  body[data-route="ac-control"] .control-main-panel,
  body[data-route="ac-control"] .control-right-panel {
    height: auto;
    min-height: 0;
    max-height: none;
  }
}
.control-tree-toolbar {
  display: grid;
  gap: 8px;
}

.control-tree-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
}

.control-tree-title h3 {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
}

.control-tree-title span {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.control-building-tree {
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 2px 0 8px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(113, 127, 153, 0.42) transparent;
  align-content: start;
}

.control-tree-branch,
.control-tree-floor,
.control-tree-room,
.control-tree-node {
  min-width: 0;
}

.control-tree-branch,
.control-tree-floor,
.control-tree-room {
  display: grid;
  gap: 1px;
}

.control-tree-children {
  min-width: 0;
  box-sizing: border-box;
  display: grid;
  gap: 1px;
  margin-left: 0;
  padding-left: 8px;
  border-left: 0;
}

.control-tree-children[hidden] {
  display: none;
}

.control-tree-toggle,
.tree-caret {
  width: 12px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

.control-tree-toggle {
  border: 0;
  padding: 0;
  color: var(--muted-strong);
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.control-tree-toggle:hover {
  color: var(--text);
}

.control-tree-node.collapsed .control-tree-toggle {
  color: var(--accent-blue);
}

.control-tree-node {
  min-height: 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "primary primary"
    "secondary actions";
  align-items: center;
  gap: 0 3px;
  border: 0;
  border-radius: 4px;
  padding: 2px 2px;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
}

.control-zone-root.control-tree-node,
.control-tree-node.project {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "primary"
    "secondary";
}

body[data-shell="business"] .control-zone-root.control-tree-node {
  display: grid;
  align-items: center;
  gap: 0 4px;
  border-radius: 4px;
  padding: 2px;
  color: var(--muted);
  background: transparent;
}

body[data-shell="business"] .control-zone-root.control-tree-node span {
  flex: initial;
}

body[data-shell="business"] .control-zone-root.control-tree-node:hover {
  background: rgba(47, 139, 255, 0.08);
}

body[data-shell="business"] .control-zone-root.control-tree-node .control-tree-name-input {
  appearance: none;
  width: 100%;
  height: 21px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
}

.control-tree-node:hover,
.control-tree-node.editing {
  background: rgba(47, 139, 255, 0.08);
}

.control-tree-node:has(input[type="checkbox"]:checked) .control-tree-name-input {
  color: var(--text);
}

.control-tree-primary {
  grid-area: primary;
  min-width: 0;
  display: grid;
  grid-template-columns: auto 12px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
}

.control-tree-secondary {
  grid-area: secondary;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  padding-left: 31px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
}

.control-tree-kind {
  max-width: 52px;
  overflow: hidden;
  color: var(--text-soft);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.control-tree-node.room .control-tree-kind {
  display: none;
}

.control-tree-node.editing {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "primary"
    "actions";
  align-items: start;
}

.control-tree-node.editing .control-tree-primary {
  grid-template-columns: auto 12px minmax(0, 1fr);
}

.control-tree-node.editing .control-tree-secondary,
.control-tree-node.editing .control-tree-secondary > i {
  display: none;
}

.control-tree-node.editing .control-tree-edit-actions {
  align-self: start;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-left: 31px;
}

.control-tree-name-input {
  min-width: 0;
  width: 100%;
  height: 19px;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 1px 2px;
  color: var(--text);
  background: transparent;
  font: inherit;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: none;
}

.control-tree-node.room .control-tree-name-input {
  font-weight: 500;
}

.control-tree-name-input[readonly] {
  overflow: hidden;
  cursor: default;
  pointer-events: none;
}

.control-tree-name-input:not([readonly]) {
  border-color: var(--line);
  color: var(--text);
  background: var(--bg-strong);
}

.control-tree-meta {
  flex: 0 0 auto;
  color: var(--muted-strong);
}

.control-tree-secondary > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
}

.control-tree-secondary > i.online {
  background: var(--green);
  box-shadow: 0 0 8px color-mix(in srgb, var(--green) 62%, transparent);
}

.control-tree-secondary > i.warn {
  background: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.62);
}

.control-tree-secondary > i.idle {
  background: var(--muted);
}

.control-tree-secondary > i.offline {
  background: #53637c;
}

.control-tree-edit-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.control-tree-node:hover .control-tree-edit-actions,
.control-tree-node:focus-within .control-tree-edit-actions,
.control-tree-node.editing .control-tree-edit-actions {
  opacity: 1;
  pointer-events: auto;
}

.control-tree-edit-actions.has-empty-cleanup {
  opacity: 1;
  pointer-events: auto;
}

.control-tree-edit-actions.has-empty-cleanup [data-tree-edit] {
  display: none;
}

.control-tree-node:hover .control-tree-edit-actions.has-empty-cleanup [data-tree-edit],
.control-tree-node:focus-within .control-tree-edit-actions.has-empty-cleanup [data-tree-edit] {
  display: inline-flex;
}

.control-tree-edit-actions .btn {
  min-height: 28px;
  padding: 3px 8px;
  font-size: 11px;
}

.control-tree-action-label {
  display: inline-block;
}

.control-tree-device-list {
  gap: 1px;
  padding-left: 12px;
}

.control-tree-device {
  min-width: 0;
  min-height: 20px;
  display: grid;
  grid-template-columns: 14px 7px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  padding: 1px 3px;
  color: var(--muted);
  font-size: 10.5px;
  background: transparent;
}

.control-tree-device:hover {
  background: rgba(47, 139, 255, 0.08);
}

.control-tree-device > i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
}

.control-tree-device > i.online {
  background: var(--green);
  box-shadow: 0 0 8px color-mix(in srgb, var(--green) 62%, transparent);
}

.control-tree-device > i.idle {
  background: #637394;
}

.control-tree-device > i.offline {
  background: #465672;
}

.control-tree-device-name {
  min-width: 0;
  overflow: hidden;
  color: var(--text-soft);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.control-tree-device-meta {
  max-width: 76px;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.control-tree-node[hidden],
.control-tree-floor[hidden],
.control-tree-branch[hidden],
.control-tree-room[hidden],
.control-tree-device[hidden] {
  display: none;
}

@media (max-width: 767px) {
  .smartbox-hero,
  .smartbox-body,
  .smartbox-list-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .smartbox-current-task {
    position: static;
  }

  .smartbox-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .smartbox-unit {
    grid-template-columns: 72px repeat(2, minmax(150px, 1fr));
  }
}

@media (max-width: 767px) {
  .smartbox-stats,
  .smartbox-steps,
  .smartbox-form,
  .smartbox-unit,
  .smartbox-meter-row,
  .smartbox-review,
  .smartbox-links,
  .smartbox-column-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .smartbox-function-row {
    align-items: stretch;
  }

  .smartbox-function-note {
    flex-basis: 100%;
    margin-left: 0;
  }

  .smartbox-discovery-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

body[data-route="control-groups"] .view-host {
  min-height: calc(100vh - 84px);
}

body[data-route="control-groups"] .group-management-page {
  min-height: calc(100vh - 108px);
  display: flex;
  flex-direction: column;
  padding-bottom: 24px;
}

body[data-route="control-groups"] .group-management-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

body[data-route="control-groups"] .group-management-toolbar label {
  color: var(--text-soft);
  white-space: nowrap;
}

body[data-route="control-groups"] .group-management-toolbar .inp {
  width: 230px;
  height: 40px;
}

body[data-route="control-groups"] .group-management-toolbar .btn {
  min-width: 86px;
  height: 40px;
}

body[data-route="control-groups"] .danger-soft {
  color: var(--text-soft);
  background: var(--surface-action);
}

body[data-route="control-groups"] .group-management-count {
  margin-left: auto;
  color: var(--muted);
}

body[data-route="control-groups"] .group-management-layout {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 368px;
  gap: 22px;
  align-items: stretch;
  min-height: calc(100vh - 190px);
}

body[data-route="control-groups"] .group-management-layout.is-group-rail-collapsed {
  grid-template-columns: minmax(0, 1fr) 48px;
}

body[data-route="control-groups"] .group-management-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  min-height: calc(100vh - 190px);
}

body[data-route="control-groups"] .building-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
  max-width: 850px;
}

body[data-route="control-groups"] .building-group-card {
  min-height: 172px;
  padding: 20px;
  border: 1px solid var(--border-blue-strong);
  border-radius: 20px;
  background: linear-gradient(160deg, var(--wash-blue), var(--accent-blue));
  box-shadow: var(--shadow);
  cursor: pointer;
}

body[data-route="control-groups"] .building-group-card.selected {
  border-color: var(--brand-cyan);
  box-shadow: 0 0 0 2px var(--overlay-blue-strong), var(--shadow);
}

body[data-route="control-groups"] .building-group-card[hidden] {
  display: none;
}

body[data-route="control-groups"] .building-group-card-head,
body[data-route="control-groups"] .building-group-card-actions,
body[data-route="control-groups"] .building-group-card-meta {
  display: flex;
  align-items: center;
}

body[data-route="control-groups"] .building-group-card-head {
  justify-content: space-between;
  color: var(--text-soft);
  font-weight: 700;
}

body[data-route="control-groups"] .building-group-card-head b {
  color: var(--text-soft);
  font-size: 13px;
}

body[data-route="control-groups"] .building-group-card h3 {
  margin: 12px 0 8px;
  color: var(--text);
  font-size: 26px;
  line-height: 1.1;
}

body[data-route="control-groups"] .building-group-card p {
  min-height: 24px;
  margin: 0;
  color: var(--text-soft);
}

body[data-route="control-groups"] .building-group-card-meta {
  gap: 8px;
  margin-top: 12px;
  color: var(--text-soft);
  font-size: 11px;
}

body[data-route="control-groups"] .building-group-card-actions {
  justify-content: flex-end;
  gap: 12px;
  margin-top: 10px;
}

body[data-route="control-groups"] .building-group-card-actions .btn {
  height: 28px;
  min-width: 56px;
  padding: 0 12px;
}

body[data-route="control-groups"] .group-management-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 850px;
  margin-top: auto;
  padding-top: 28px;
  padding-bottom: 18px;
  color: var(--muted);
}

body[data-route="control-groups"] .group-management-pager .inp {
  width: 122px;
  height: 34px;
}

body[data-route="control-groups"] .group-management-pager .group-page-input {
  width: 58px;
  text-align: center;
}

body[data-route="control-groups"] .group-management-pager b {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 6px;
  background: var(--accent-blue);
  color: var(--text);
}

body[data-route="control-groups"] .group-command-rail {
  position: relative;
  display: grid;
  gap: 12px;
  min-width: 0;
  transition: width .18s ease;
}

body[data-route="control-groups"] .group-rail-content {
  display: grid;
  gap: 12px;
}

body[data-route="control-groups"] .group-command-rail .control-right-panel {
  width: 100%;
  min-width: 0;
  border-radius: 14px;
  padding: 18px;
}

body[data-route="control-groups"] .group-rail-collapse-toggle {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: -16px;
  display: grid;
  width: 32px;
  min-width: 32px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--border-blue-strong);
  border-radius: 999px;
  color: var(--text);
  background: var(--surface-panel);
  box-shadow: var(--shadow);
}

body[data-route="control-groups"] .group-rail-collapse-toggle span {
  font-size: 20px;
  line-height: 1;
}

body[data-route="control-groups"] .group-rail-collapsed-label {
  display: none;
}

body[data-route="control-groups"] .group-command-rail.is-collapsed {
  min-height: 360px;
  border: 1px solid var(--border-blue-strong);
  border-radius: 14px;
  background: var(--surface-panel);
  box-shadow: var(--shadow);
}

body[data-route="control-groups"] .group-command-rail.is-collapsed .group-rail-content {
  display: none;
}

body[data-route="control-groups"] .group-command-rail.is-collapsed .group-rail-collapsed-label {
  display: grid;
  height: 100%;
  min-height: 360px;
  place-items: center;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  writing-mode: vertical-rl;
}

body[data-route="control-groups"] .group-command-rail.is-collapsed .group-rail-collapse-toggle {
  left: 7px;
  top: 12px;
}

body[data-route="control-groups"] .group-command-context {
  margin: -4px 0 14px;
  color: var(--muted);
  font-size: 12px;
}

body[data-route="control-groups"] .group-control-panel .control-power-row {
  gap: 8px;
  margin-bottom: 12px;
}

body[data-route="control-groups"] .group-control-panel .control-power-tile {
  min-height: 70px;
  padding: 12px 10px;
}

body[data-route="control-groups"] .group-control-panel .control-temp-row {
  gap: 8px;
  margin-bottom: 12px;
}

body[data-route="control-groups"] .group-control-panel .control-temp-row .btn {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
}

body[data-route="control-groups"] .group-control-panel .control-temp-current {
  min-width: 42px;
  font-size: 18px;
}

body[data-route="control-groups"] .group-mode-grid,
body[data-route="control-groups"] .group-fan-grid {
  gap: 8px;
  margin-top: 8px;
}

body[data-route="control-groups"] .group-mode-grid .ctile,
body[data-route="control-groups"] .group-fan-grid .ctile {
  min-height: 58px;
  padding: 8px 2px;
}

body[data-route="control-groups"] .group-lock-panel .panel-title.compact {
  align-items: center;
  gap: 10px;
}

body[data-route="control-groups"] .group-lock-panel .title-actions {
  gap: 8px;
}

body[data-route="control-groups"] .group-lock-panel .title-actions .btn {
  height: 30px;
  min-height: 30px;
  padding: 5px 10px;
}

body[data-route="control-groups"] .group-lock-panel .panel-lock-form {
  gap: 12px;
  margin-top: 14px;
}

body[data-route="control-groups"] .group-lock-panel .panel-lock-temp {
  display: grid;
  grid-template-columns: 58px 54px 26px minmax(74px, 1fr) 26px 42px;
  gap: 6px;
  height: auto;
  min-height: 38px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid var(--border-muted);
  border-radius: 10px;
  background: var(--surface-panel-deep);
}

body[data-route="control-groups"] .group-lock-panel .lock-temp-label,
body[data-route="control-groups"] .group-lock-panel .lock-enable-cell em {
  white-space: nowrap;
}

body[data-route="control-groups"] .group-lock-panel .lock-enable-cell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: var(--text-soft);
  font-size: 12px;
}

body[data-route="control-groups"] .group-lock-panel .lock-temp-input {
  position: absolute;
  width: 1px;
  min-width: 0;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

body[data-route="control-groups"] .group-lock-panel .lock-enable-cell input[data-lock-temp-enabled] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

body[data-route="control-groups"] .group-lock-panel .lock-enable-cell em {
  display: inline-grid;
  box-sizing: border-box;
  width: 50px;
  min-width: 50px;
  height: 24px;
  place-items: center;
  padding: 0 8px;
  border: 1px solid var(--border-muted);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-nav);
  font-size: 12px;
  font-style: normal;
  line-height: 22px;
  overflow: hidden;
}

body[data-route="control-groups"] .group-lock-panel .lock-enable-cell input[data-lock-temp-enabled]:checked + em {
  border-color: rgba(47, 139, 255, 0.72);
  color: var(--text);
  background: var(--overlay-blue-strong);
}

body[data-route="control-groups"] .group-lock-panel .lock-temp-step {
  width: 26px;
  min-width: 26px;
  height: 28px;
  padding: 0;
}

body[data-route="control-groups"] .group-lock-panel .lock-temp-range-wrap {
  position: relative;
  display: block;
  min-width: 0;
  height: 28px;
}

body[data-route="control-groups"] .group-lock-panel .lock-temp-range-wrap > i {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 6px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--line);
}

body[data-route="control-groups"] .group-lock-panel .lock-temp-range-wrap > i b {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(var(--value) * 1%);
  border-radius: inherit;
  background: #2f8bff;
}

body[data-route="control-groups"] .group-lock-panel .lock-temp-range-wrap > i em {
  position: absolute;
  left: calc(var(--value) * 1%);
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #2f8bff;
  box-shadow: 0 0 8px #2f8bff;
}

body[data-route="control-groups"] .group-lock-panel .lock-temp-range {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 28px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

body[data-route="control-groups"] .group-lock-panel .panel-lock-temp strong {
  width: 40px;
  height: 28px;
  font-size: 15px;
  line-height: 28px;
  text-align: right;
}

body[data-route="control-groups"] .group-lock-panel .panel-lock-line {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 8px;
  height: auto;
  align-items: start;
  padding: 8px;
  border: 1px solid var(--border-muted);
  border-radius: 10px;
  background: var(--surface-panel-deep);
}

body[data-route="control-groups"] .group-lock-panel .panel-lock-line > span {
  color: var(--muted);
  font-size: 12px;
  line-height: 28px;
  white-space: nowrap;
}

body[data-route="control-groups"] .group-lock-mode-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

body[data-route="control-groups"] .group-lock-mode-options label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 28px;
  border: 1px solid var(--border-muted);
  border-radius: 8px;
  padding: 0 4px;
  background: var(--surface-nav);
  font-size: 12px;
  white-space: nowrap;
}

body[data-route="control-groups"] .group-lock-power-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

body[data-route="control-groups"] .group-lock-power-options .btn {
  height: 28px;
  min-height: 28px;
  padding: 0 8px;
  font-size: 12px;
}

body[data-route="control-groups"] .group-lock-power-options .btn.active {
  border-color: var(--accent-blue);
  color: var(--text);
  background: var(--overlay-blue-strong);
}

body[data-route="control-groups"] .group-lock-power-options select[data-lock-power] {
  grid-column: 1 / -1;
  height: 30px;
  border: 1px solid var(--border-muted);
  border-radius: 8px;
  color: var(--text-soft);
  background: var(--surface-input);
}

body[data-route="control-groups"] .group-editor-backdrop {
  align-items: center;
  justify-content: center;
  background: var(--surface-panel-deeper);
}

body[data-route="control-groups"] .group-editor-panel {
  width: min(984px, calc(100vw - 64px));
  min-height: 720px;
  padding: 26px;
  border: 1px solid var(--border-muted-soft);
  border-radius: 18px;
  background: var(--panel-2);
}

body[data-route="control-groups"] .group-editor-title {
  align-items: start;
  margin-bottom: 28px;
}

body[data-route="control-groups"] .group-editor-title h2 {
  margin: 0;
  font-size: 22px;
}

body[data-route="control-groups"] .group-editor-body {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 34px;
}

body[data-route="control-groups"] .group-room-picker > label,
body[data-route="control-groups"] .group-editor-field > span,
body[data-route="control-groups"] .group-linkage-row > span {
  display: block;
  margin-bottom: 10px;
  color: var(--text-soft);
  font-size: 15px;
}

body[data-route="control-groups"] .group-room-picker .inp {
  width: 100%;
  margin-bottom: 12px;
}

body[data-route="control-groups"] .group-room-tree {
  max-height: 440px;
  overflow: auto;
  padding-right: 6px;
}

body[data-route="control-groups"] .group-tree-branch,
body[data-route="control-groups"] .group-tree-floor,
body[data-route="control-groups"] .group-tree-room {
  margin: 6px 0;
}

body[data-route="control-groups"] .group-tree-children {
  margin-left: 22px;
}

body[data-route="control-groups"] .group-tree-node {
  display: grid;
  grid-template-columns: 18px 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  color: var(--text-soft);
}

body[data-route="control-groups"] .group-tree-node small {
  color: var(--muted);
  font-size: 11px;
}

body[data-route="control-groups"] .group-tree-toggle {
  width: 18px;
  height: 18px;
  border: 0;
  color: var(--text-soft);
  background: transparent;
}

body[data-route="control-groups"] .group-editor-field {
  position: relative;
  display: block;
  margin-bottom: 22px;
}

body[data-route="control-groups"] .group-editor-field b {
  margin-right: 4px;
  color: var(--danger);
}

body[data-route="control-groups"] .group-editor-field .inp {
  width: 100%;
  height: 40px;
  padding-right: 58px;
}

body[data-route="control-groups"] .group-editor-field small {
  position: absolute;
  right: 12px;
  bottom: 9px;
  color: var(--muted);
}

body[data-route="control-groups"] .group-linkage-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

body[data-route="control-groups"] .group-switch {
  position: relative;
  width: 52px;
  height: 28px;
  flex: 0 0 52px;
}

body[data-route="control-groups"] .group-switch input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

body[data-route="control-groups"] .group-switch i {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: var(--surface-action);
}

body[data-route="control-groups"] .group-switch i::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 22px;
  height: 22px;
  margin: 0;
  border-radius: 50%;
  background: var(--text-soft);
  transition: transform .16s ease;
}

body[data-route="control-groups"] .group-switch input:checked + i {
  background: var(--accent-blue);
}

body[data-route="control-groups"] .group-switch input:checked + i::after {
  transform: translateX(24px);
}

body[data-route="control-groups"] .group-linkage-help {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  color: var(--surface-input);
  background: var(--text);
  font-weight: 800;
}

body[data-route="control-groups"] .group-linkage-note {
  max-width: 500px;
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid var(--border-muted-soft);
  border-radius: 4px;
  color: var(--text-soft);
  background: var(--surface-panel-deep);
  font-size: 14px;
  line-height: 1.65;
}

body[data-route="control-groups"] .group-linkage-help.active {
  color: var(--text);
  background: var(--accent-blue);
}

body[data-route="control-groups"] .group-selected-table-wrap h3 {
  margin: 0 0 12px;
  color: var(--text-soft);
  font-size: 15px;
}

body[data-route="control-groups"] .group-selected-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--text-soft);
}

body[data-route="control-groups"] .group-selected-table th,
body[data-route="control-groups"] .group-selected-table td {
  height: 44px;
  padding: 0 12px;
  text-align: left;
}

body[data-route="control-groups"] .group-selected-table th {
  background: var(--surface-panel);
  color: var(--text-soft);
}

body[data-route="control-groups"] .group-selected-table tr:nth-child(odd) td {
  background: var(--surface-panel-deep);
}

body[data-route="control-groups"] .link-button {
  border: 0;
  color: var(--accent-blue);
  background: transparent;
}

body[data-route="control-groups"] .group-selected-empty {
  padding: 14px;
  border: 1px dashed var(--border-muted-dashed);
  border-radius: 6px;
  color: var(--muted);
}

body[data-route="control-groups"] .group-editor-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 72px;
}

body[data-route="control-groups"] .group-editor-actions .form-message {
  margin-right: auto;
}

@media (max-width: 767px) {
  body[data-route="control-groups"] .group-management-layout,
  body[data-route="control-groups"] .group-editor-body {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-route="control-groups"] .group-management-layout.is-group-rail-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-route="control-groups"] .group-command-rail.is-collapsed {
    min-height: 48px;
  }

  body[data-route="control-groups"] .group-command-rail.is-collapsed .group-rail-collapsed-label {
    min-height: 48px;
    writing-mode: horizontal-tb;
  }
}

@media (max-width: 767px) {
  body[data-route="control-groups"] .group-management-toolbar,
  body[data-route="control-groups"] .group-management-pager {
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  body[data-route="control-groups"] .group-management-toolbar .inp {
    width: min(100%, 280px);
  }

  body[data-route="control-groups"] .group-editor-panel {
    width: calc(100vw - 24px);
    min-height: auto;
    padding: 18px;
  }
}


/* Fault records page: competitor-style searchable table with real alert actions. */
body[data-route="faults"] .fault-records-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: calc(100vh - 112px);
  height: auto;
  margin-top: 0;
}

body[data-route="faults"] .fault-filter-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 0;
}

body[data-route="faults"] .fault-room-selects,
body[data-route="faults"] .fault-filter-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body[data-route="faults"] .fault-room-selects {
  flex: 1 1 460px;
}

body[data-route="faults"] .fault-filter-field {
  flex: 0 1 auto;
}

body[data-route="faults"] .fault-filter-label,
body[data-route="faults"] .fault-filter-field span {
  flex: 0 0 auto;
  color: var(--text-soft);
  font-size: 12px;
  white-space: nowrap;
}

body[data-route="faults"] .filters.faults-tools .inp,
body[data-route="faults"] .filters.faults-tools select.inp {
  flex: 0 1 150px;
  width: 150px;
  height: 34px;
  min-height: 34px;
  border-radius: 4px;
  padding: 6px 10px;
  background: var(--surface-panel-deep);
  color: var(--text);
  font-size: 12px;
}

body[data-route="faults"] .fault-room-cascade {
  position: relative;
  flex: 0 0 250px;
  min-width: 210px;
}

body[data-route="faults"] .fault-room-cascade-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
}

body[data-route="faults"] .fault-room-cascade-trigger::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--text-soft);
  border-bottom: 1px solid var(--text-soft);
  transform: rotate(45deg) translateY(-2px);
}

body[data-route="faults"] .fault-room-cascade-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 120;
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 8px;
  width: min(620px, calc(100vw - 360px));
  min-width: 500px;
  border: 1px solid rgba(95, 124, 170, 0.28);
  border-radius: 6px;
  padding: 10px;
  background: #0d1728;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
}

body[data-route="faults"] .fault-room-cascade-menu[hidden] {
  display: none;
}

body[data-route="faults"] .fault-room-cascade-col {
  display: grid;
  align-content: start;
  gap: 6px;
  max-height: 250px;
  overflow: auto;
}

body[data-route="faults"] .fault-room-cascade-col small {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 2px 0 5px;
  color: var(--text-soft);
  background: #0d1728;
  font-size: 11px;
}

body[data-route="faults"] .fault-room-cascade-option,
body[data-route="faults"] .fault-room-cascade-clear {
  border: 1px solid rgba(95, 124, 170, 0.18);
  border-radius: 4px;
  padding: 7px 9px;
  color: var(--text);
  background: rgba(11, 23, 42, 0.86);
  text-align: left;
  font-size: 12px;
  cursor: pointer;
}

body[data-route="faults"] .fault-room-cascade-option:hover,
body[data-route="faults"] .fault-room-cascade-option.active {
  border-color: rgba(42, 144, 255, 0.58);
  color: #fff;
  background: rgba(25, 99, 205, 0.38);
}

body[data-route="faults"] .fault-room-cascade-clear {
  grid-column: 1 / -1;
  color: var(--text-soft);
  text-align: center;
}

body[data-route="faults"] .fault-room-cascade-empty {
  border: 1px dashed rgba(95, 124, 170, 0.18);
  border-radius: 4px;
  padding: 8px;
  color: var(--muted);
  font-size: 12px;
}
body[data-route="faults"] .fault-date-field .inp {
  width: 132px;
}

body[data-route="faults"] .fault-date-field em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}

body[data-route="faults"] .filters.faults-tools .btn {
  height: 34px;
  min-height: 34px;
  border-radius: 4px;
  padding: 0 16px;
  font-size: 12px;
}

body[data-route="faults"] .fault-table-shell {
  width: 100%;
  overflow: auto;
  border-top: 1px solid var(--line);
}

body[data-route="faults"] .fault-record-table,
body[data-route="faults"] .faults-table.fault-record-table {
  width: 100%;
  min-width: 1240px;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 12px;
}

body[data-route="faults"] .fault-record-table thead tr,
body[data-route="faults"] .fault-record-table tbody tr,
body[data-route="faults"] .fault-record-table tbody tr:nth-child(2) {
  height: 56px;
}

body[data-route="faults"] .fault-record-table th,
body[data-route="faults"] .fault-record-table td {
  height: 56px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(95, 124, 170, 0.16);
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

body[data-route="faults"] .fault-record-table th {
  height: 42px;
  color: var(--text-soft);
  background: rgba(148, 163, 184, 0.12);
  font-weight: 700;
}

body[data-route="faults"] .fault-record-table tbody tr:nth-child(even) td {
  background: rgba(148, 163, 184, 0.08);
}

body[data-route="faults"] .fault-record-table tbody tr:hover td {
  background: rgba(47, 139, 255, 0.12);
}

body[data-route="faults"] .fault-record-table th:nth-child(1),
body[data-route="faults"] .fault-record-table td:nth-child(1) {
  width: 56px;
}

body[data-route="faults"] .fault-record-table th:nth-child(2),
body[data-route="faults"] .fault-record-table td:nth-child(2),
body[data-route="faults"] .fault-record-table th:nth-child(3),
body[data-route="faults"] .fault-record-table td:nth-child(3),
body[data-route="faults"] .fault-record-table th:nth-child(4),
body[data-route="faults"] .fault-record-table td:nth-child(4),
body[data-route="faults"] .fault-record-table th:nth-child(5),
body[data-route="faults"] .fault-record-table td:nth-child(5) {
  width: 92px;
}

body[data-route="faults"] .fault-record-table th:nth-child(6),
body[data-route="faults"] .fault-record-table td:nth-child(6) {
  width: 160px;
}

body[data-route="faults"] .fault-record-table th:nth-child(7),
body[data-route="faults"] .fault-record-table td:nth-child(7),
body[data-route="faults"] .fault-record-table th:nth-child(8),
body[data-route="faults"] .fault-record-table td:nth-child(8) {
  width: 120px;
}

body[data-route="faults"] .fault-record-table th:nth-child(9),
body[data-route="faults"] .fault-record-table td:nth-child(9),
body[data-route="faults"] .fault-record-table th:nth-child(10),
body[data-route="faults"] .fault-record-table td:nth-child(10) {
  width: 150px;
}

body[data-route="faults"] .fault-record-table th:nth-child(11),
body[data-route="faults"] .fault-record-table td:nth-child(11) {
  width: 210px;
}

body[data-route="faults"] .fault-code-link {
  border: 0;
  padding: 0;
  color: var(--accent-blue);
  background: transparent;
  font: inherit;
  cursor: pointer;
}

body[data-route="faults"] .fault-code-link:hover {
  text-decoration: underline;
}

body[data-route="faults"] .fault-actions,
body[data-route="faults"] .fault-record-table .fault-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

body[data-route="faults"] .fault-record-table .fault-actions .btn,
body[data-route="faults"] .fault-record-table .fault-actions .btn.pri,
body[data-route="faults"] .detail-actions .btn,
body[data-route="faults"] .detail-actions .btn.pri {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  border: 1px solid rgba(47, 139, 255, 0.24);
  border-radius: 4px;
  padding: 3px 8px;
  color: var(--accent-blue);
  background: rgba(47, 139, 255, 0.1);
  box-shadow: none;
  font-size: 12px;
  line-height: 1.5;
}

body[data-route="faults"] .fault-record-table .fault-actions .btn.pri,
body[data-route="faults"] .detail-actions .btn.pri {
  color: #fff;
  background: var(--accent-blue);
}

body[data-route="faults"] .fault-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.58);
}

body[data-route="faults"] .fault-modal-backdrop[hidden] {
  display: none;
}

body[data-route="faults"] .fault-modal-panel {
  position: relative;
  width: min(820px, calc(100vw - 48px));
  max-height: calc(100vh - 72px);
  overflow: auto;
  border: 1px solid rgba(95, 124, 170, 0.26);
  border-radius: 8px;
  padding: 22px;
  color: var(--text);
  background: var(--surface-panel);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.42);
}

body[data-route="faults"] .fault-modal-panel h2 {
  margin: 0 0 20px;
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
}

body[data-route="faults"] .fault-modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  border: 0;
  color: var(--text-soft);
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

body[data-route="faults"] .fault-code-modal {
  display: grid;
  gap: 18px;
}

body[data-route="faults"] .fault-code-summary,
body[data-route="faults"] .fault-code-description {
  border: 1px solid rgba(95, 124, 170, 0.2);
  border-radius: 6px;
  padding: 14px 16px;
  background: rgba(8, 16, 32, 0.36);
}

body[data-route="faults"] .fault-code-summary small,
body[data-route="faults"] .fault-code-description small {
  display: block;
  color: var(--text-soft);
  font-size: 12px;
}

body[data-route="faults"] .fault-code-summary b {
  display: block;
  margin-top: 6px;
  color: var(--accent-blue);
  font-size: 18px;
}

body[data-route="faults"] .fault-code-description p {
  margin: 8px 0 0;
  color: var(--text);
  line-height: 1.7;
}

body[data-route="faults"] .fault-detail-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

body[data-route="faults"] .fault-detail-summary strong {
  color: var(--text);
  font-size: 15px;
}

body[data-route="faults"] .fault-detail-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body[data-route="faults"] .fault-detail-modal-grid div,
body[data-route="faults"] .fault-detail-facts {
  border: 1px solid rgba(95, 124, 170, 0.2);
  border-radius: 6px;
  padding: 10px 12px;
  background: rgba(8, 16, 32, 0.34);
}

body[data-route="faults"] .fault-detail-modal-grid small,
body[data-route="faults"] .fault-detail-facts small {
  display: block;
  color: var(--text-soft);
  font-size: 11px;
}

body[data-route="faults"] .fault-detail-modal-grid b,
body[data-route="faults"] .fault-detail-facts b {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
}

body[data-route="faults"] .fault-detail-facts {
  margin-top: 14px;
}

body[data-route="faults"] .fault-detail-facts > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

body[data-route="faults"] .fault-detail-facts span {
  display: block;
  min-width: 0;
}

body[data-route="faults"] .fault-detail-facts em {
  display: block;
  color: var(--text-soft);
  font-style: normal;
  font-size: 11px;
}


body[data-route="faults"] .detail-actions {
  margin-top: 16px;
}

@media (max-width: 767px) {
  body[data-route="faults"] .fault-filter-row,
  body[data-route="faults"] .fault-room-selects,
  body[data-route="faults"] .fault-filter-field {
    align-items: stretch;
  }

  body[data-route="faults"] .fault-room-selects {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }
}

@media (max-width: 760px) {
  body[data-route="faults"] .fault-room-selects,
  body[data-route="faults"] .fault-filter-field,
  body[data-route="faults"] .fault-date-field {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  body[data-route="faults"] .filters.faults-tools .inp,
  body[data-route="faults"] .filters.faults-tools select.inp,
  body[data-route="faults"] .fault-date-field .inp {
    width: 100%;
    flex-basis: auto;
  }

  body[data-route="faults"] .fault-detail-modal-grid,
  body[data-route="faults"] .fault-detail-facts > div {
    grid-template-columns: 1fr;
  }

  body[data-route="faults"] .fault-modal-panel {
    width: calc(100vw - 24px);
    padding: 18px;
  }
}


/* Command events competitor-style ledger */
body[data-route="command-events"] .main {
  --events-workspace-height: calc(100vh - 112px);
}

.events-page .events-competitor-layout {
  display: grid;
  grid-template-columns: 202px minmax(0, 1fr);
  gap: 24px;
  min-height: var(--events-workspace-height, calc(100vh - 112px));
}

.events-page .events-tree-panel {
  min-width: 0;
}

.events-page .events-tree-panel .control-tree-panel {
  min-height: var(--events-workspace-height, calc(100vh - 112px));
  border-radius: 18px;
  padding: 16px 14px;
  overflow: hidden;
}

.events-page .events-tree-panel .control-tree-title h3 {
  font-size: 15px;
}

.events-page .events-tree-panel .control-tree-title span,
.events-page .events-tree-panel .control-tree-secondary,
.events-page .events-tree-panel .control-tree-edit-actions {
  display: none;
}

.events-page .events-tree-panel .control-tree-toolbar,
.events-page .events-tree-panel .control-search {
  margin-top: 10px;
}

.events-page .events-tree-panel .control-building-tree {
  max-height: calc(var(--events-workspace-height, 720px) - 94px);
  overflow: auto;
  padding-right: 4px;
}

.events-page .events-tree-panel .control-tree-node {
  min-height: 26px;
  padding: 4px 2px;
  background: transparent;
  border-color: transparent;
}

.events-page .events-tree-panel .control-tree-node:hover,
.events-page .events-tree-panel .control-tree-node:has(input[type="checkbox"]:checked) {
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(147, 197, 253, 0.16);
}

.events-page .events-tree-panel .control-tree-name-input {
  font-size: 13px;
}

.events-page .event-records-panel {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
}

.events-page .events-tools {
  display: flex;
  align-items: end;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.events-page .events-tools label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.events-page .events-tools .inp {
  width: 200px;
  height: 34px;
}

.events-page .events-tools .event-date-range {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}

.events-page .events-tools .event-date-range .inp {
  width: 142px;
}

.events-page .events-tools .event-date-range em {
  color: var(--muted);
  font-style: normal;
}

.events-page .events-tools .btn {
  height: 34px;
  min-width: 74px;
}

.events-page .events-tools .push-right {
  margin-left: auto;
}

.events-page .event-table-card {
  min-height: 0;
  margin: 0;
  overflow: auto;
}

.events-page .event-table {
  min-width: 1040px;
}

.events-page .event-table th,
.events-page .event-table td {
  height: 40px;
  white-space: nowrap;
}

.events-page .event-table tbody tr[hidden] {
  display: none;
}

.events-page .event-table tbody tr:not([hidden]):hover td {
  background: rgba(96, 165, 250, 0.08);
}

.events-page .event-table [data-event-detail].active,
.events-page .event-table [data-event-detail]:hover {
  border-color: rgba(37, 99, 235, 0.6);
  color: #dbeafe;
}

.events-page .event-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  min-height: 38px;
}

.events-page .event-pager .btn {
  height: 30px;
  min-width: 34px;
}

.events-page .event-page-size {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 4px;
  color: #cbd5e1;
}
.events-page .event-pager label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.events-page .event-pager .inp {
  width: 48px;
  height: 30px;
  text-align: center;
}

.event-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  background: rgba(2, 6, 23, 0.68);
  padding: 24px;
}

.event-modal-backdrop[hidden] {
  display: none;
}

.event-modal-dialog {
  position: relative;
  width: min(920px, calc(100vw - 48px));
  max-height: min(760px, calc(100vh - 48px));
  overflow: auto;
  padding: 20px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px;
  background: #111827;
  box-shadow: 0 24px 70px rgba(2, 6, 23, 0.45);
}

.event-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(15, 23, 42, 0.9);
  color: var(--fg);
  cursor: pointer;
}

.event-modal-head {
  display: grid;
  gap: 6px;
  padding-right: 38px;
  margin-bottom: 14px;
}

.event-modal-head small,
.event-modal-head p {
  margin: 0;
  color: var(--muted);
}

.event-modal-head h3 {
  margin: 0;
  font-size: 18px;
}

.event-modal-loading {
  padding: 38px;
  text-align: center;
  color: var(--muted);
}

.events-page .event-params {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.events-page .event-params code {
  display: block;
  max-height: 140px;
  overflow: auto;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(2, 6, 23, 0.35);
  color: #cbd5e1;
  white-space: pre-wrap;
}

@media (max-width: 767px) {
  .events-page .events-competitor-layout {
    grid-template-columns: 1fr;
  }

  .events-page .events-tree-panel .control-tree-panel {
    min-height: auto;
  }

  .events-page .events-tree-panel .control-building-tree {
    max-height: 260px;
  }
}


body[data-route="environment"] .environment-page {
  display: block;
  min-height: calc(100vh - 88px);
  background: #080e1d;
}

body[data-route="environment"] .environment-monitor-shell {
  position: relative;
  min-height: calc(100vh - 88px);
  color: #d8e2f2;
  background: #080e1d;
}

body[data-route="environment"] .environment-monitor-tabs {
  display: flex;
  align-items: stretch;
  height: 44px;
  border-bottom: 1px solid rgba(117, 132, 158, 0.34);
  background: #171f30;
  box-shadow: inset 0 -1px 0 rgba(71, 85, 105, 0.26);
}

body[data-route="environment"] .environment-monitor-tab {
  position: relative;
  min-width: 112px;
  border: 0;
  padding: 0 20px;
  color: #a9b4c7;
  background: transparent;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

body[data-route="environment"] .environment-monitor-tab.active {
  color: #1677ff;
}

body[data-route="environment"] .environment-monitor-tab.active::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 3px;
  background: #216bff;
}

body[data-route="environment"] .environment-monitor-main {
  position: relative;
  min-height: calc(100vh - 132px);
  padding: 20px 20px 56px;
}

body[data-route="environment"] .environment-monitor-kpis {
  display: grid;
  grid-template-columns: repeat(4, 152px);
  gap: 16px;
  width: max-content;
  max-width: calc(100% - 160px);
}

body[data-route="environment"] .environment-monitor-card {
  height: 80px;
  border: 1px solid rgba(134, 148, 172, 0.35);
  border-radius: 4px;
  padding: 17px 16px 13px;
  background: #30394b;
  box-shadow: none;
}

body[data-route="environment"] .environment-monitor-card.primary {
  border-color: #276dff;
  background: #2468ff;
}

body[data-route="environment"] .environment-monitor-card small,
body[data-route="environment"] .environment-monitor-card b {
  display: block;
}

body[data-route="environment"] .environment-monitor-card small {
  color: rgba(233, 240, 255, 0.78);
  font-size: 13px;
  line-height: 18px;
}

body[data-route="environment"] .environment-monitor-card b {
  margin-top: 3px;
  color: #fff;
  font-size: 22px;
  line-height: 28px;
}

body[data-route="environment"] .environment-monitor-card.danger b {
  color: #ff3030;
}

body[data-route="environment"] .environment-monitor-refresh {
  position: absolute;
  top: 44px;
  right: 20px;
  min-width: 76px;
  height: 34px;
  border: 0;
  border-radius: 3px;
  color: #fff;
  background: #216bff;
  font-weight: 600;
  cursor: pointer;
}

body[data-route="environment"] .environment-monitor-refresh::before {
  content: "↻";
  margin-right: 6px;
}

body[data-route="environment"] .environment-monitor-board {
  position: relative;
  min-height: calc(100vh - 288px);
  margin-top: 28px;
  overflow: auto;
}

body[data-route="environment"] .environment-monitor-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #8c95a8;
  font-size: 14px;
}

body[data-route="environment"] .environment-monitor-table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  color: #d8e2f2;
  font-size: 13px;
}

body[data-route="environment"] .environment-monitor-table th,
body[data-route="environment"] .environment-monitor-table td {
  border-bottom: 1px solid rgba(117, 132, 158, 0.18);
  padding: 10px 12px;
  text-align: left;
  white-space: nowrap;
}

body[data-route="environment"] .environment-monitor-table th {
  color: #94a3b8;
  font-weight: 500;
}

body[data-route="environment"] .environment-status {
  color: #2fd47a;
}

body[data-route="environment"] .environment-status.warn {
  color: #ff3030;
}

body[data-route="environment"] .environment-link-action {
  all: unset;
  color: #4f8cff;
  cursor: pointer;
}

body[data-route="environment"] .environment-monitor-pager {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #a9b4c7;
  font-size: 13px;
}

body[data-route="environment"] .environment-page-size,
body[data-route="environment"] .environment-page-button,
body[data-route="environment"] .environment-monitor-pager input {
  height: 28px;
  border: 1px solid rgba(117, 132, 158, 0.38);
  border-radius: 3px;
  color: #cbd5e1;
  background: #111a2c;
}

body[data-route="environment"] .environment-page-size {
  min-width: 92px;
}

body[data-route="environment"] .environment-page-button {
  width: 32px;
}

body[data-route="environment"] .environment-page-button.active {
  border-color: #216bff;
  color: #fff;
  background: #216bff;
}

body[data-route="environment"] .environment-monitor-pager label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body[data-route="environment"] .environment-monitor-pager input {
  width: 48px;
  padding: 0 8px;
  text-align: center;
}

body[data-route="environment"] .environment-interface-hooks {
  position: fixed;
  left: 4px;
  bottom: 4px;
  z-index: 1;
  width: 180px;
  height: 34px;
  overflow: hidden;
  opacity: 0.01;
  pointer-events: auto;
}

body[data-route="environment"] .environment-interface-hooks form,
body[data-route="environment"] .environment-rule-hooks {
  display: flex;
  align-items: center;
  gap: 4px;
}

body[data-route="environment"] .environment-interface-hooks input,
body[data-route="environment"] .environment-interface-hooks select,
body[data-route="environment"] .environment-interface-hooks button {
  min-width: 32px;
  height: 24px;
  font-size: 12px;
}

body[data-route="environment"] .environment-message {
  position: fixed;
  left: 4px;
  bottom: 44px;
  z-index: 1;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0.01;
}

body[data-route="environment"] .environment-message.error {
  color: #ff3030;
}

@media (max-width: 767px) {
  body[data-route="environment"] .environment-monitor-kpis {
    grid-template-columns: repeat(2, 152px);
    max-width: 100%;
  }

  body[data-route="environment"] .environment-monitor-refresh {
    top: 132px;
  }
}

@media (max-width: 560px) {
  body[data-route="environment"] .environment-monitor-tabs {
    overflow-x: auto;
  }

  body[data-route="environment"] .environment-monitor-main {
    padding: 16px 12px 64px;
  }

  body[data-route="environment"] .environment-monitor-kpis {
    grid-template-columns: 1fr;
    width: 100%;
  }

  body[data-route="environment"] .environment-monitor-card {
    width: 100%;
  }

  body[data-route="environment"] .environment-monitor-refresh {
    position: static;
    margin-top: 12px;
  }
}

body[data-route="ai/strategy"] .strategy-task-console {
  min-height: calc(100vh - 110px);
  padding: 20px 22px 72px;
  color: #d8e2f2;
  background: #070d1c;
}

body[data-route="ai/strategy"] .strategy-console-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

body[data-route="ai/strategy"] .strategy-console-head small {
  display: block;
  margin-bottom: 4px;
  color: #94a3b8;
  font-size: 13px;
}

body[data-route="ai/strategy"] .strategy-console-head h2 {
  margin: 0;
  color: #eef5ff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
}

body[data-route="ai/strategy"] .strategy-filter-strip {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(280px, 1.4fr) minmax(190px, 1fr) minmax(190px, 1fr) auto auto auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 14px;
}

body[data-route="ai/strategy"] .strategy-filter-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #c4ccda;
  font-size: 13px;
}

body[data-route="ai/strategy"] .strategy-date-range {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}

body[data-route="ai/strategy"] .strategy-date-range em {
  color: #aab4c6;
  font-style: normal;
}

body[data-route="ai/strategy"] .strategy-task-table-wrap {
  overflow: auto;
  border-top: 1px solid rgba(116, 132, 160, 0.2);
}

body[data-route="ai/strategy"] .strategy-task-table {
  width: 100%;
  min-width: 1100px;
  border-collapse: collapse;
  color: #cfd8e7;
  font-size: 13px;
}

body[data-route="ai/strategy"] .strategy-task-table th {
  height: 42px;
  padding: 0 14px;
  color: #d7deea;
  background: #1d2738;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

body[data-route="ai/strategy"] .strategy-task-table td {
  height: 64px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(116, 132, 160, 0.14);
  background: #081025;
  white-space: nowrap;
}

body[data-route="ai/strategy"] .strategy-task-table tbody tr:nth-child(even) td {
  background: #1a2333;
}

body[data-route="ai/strategy"] .strategy-task-table td strong,
body[data-route="ai/strategy"] .strategy-task-table td small {
  display: block;
}

body[data-route="ai/strategy"] .strategy-task-table td small {
  margin-top: 4px;
  color: #8996aa;
}

body[data-route="ai/strategy"] .strategy-status {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 4px;
  font-weight: 600;
}

body[data-route="ai/strategy"] .strategy-status.enabled {
  color: #4ade80;
  background: rgba(22, 163, 74, 0.22);
}

body[data-route="ai/strategy"] .strategy-status.disabled {
  color: #fca5a5;
  background: rgba(220, 38, 38, 0.18);
}

body[data-route="ai/strategy"] .strategy-row-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

body[data-route="ai/strategy"] .strategy-row-actions button {
  all: unset;
  color: #2f7cff;
  cursor: pointer;
}

body[data-route="ai/strategy"] .strategy-row-actions button.danger {
  color: #ff4d4f;
}

body[data-route="ai/strategy"] .strategy-switch {
  position: relative;
  width: 42px;
  height: 22px;
  cursor: pointer;
}

body[data-route="ai/strategy"] .strategy-switch input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

body[data-route="ai/strategy"] .strategy-switch span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #334155;
  pointer-events: none;
}

body[data-route="ai/strategy"] .strategy-switch span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e5eefc;
  transition: left 0.15s ease;
}

body[data-route="ai/strategy"] .strategy-switch input:checked + span {
  background: #216bff;
}

body[data-route="ai/strategy"] .strategy-switch input:checked + span::after {
  left: 23px;
}

body[data-route="ai/strategy"] .strategy-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
  color: #a8b4c7;
  font-size: 13px;
}

body[data-route="ai/strategy"] .strategy-pagination input {
  width: 46px;
  text-align: center;
}

body[data-route="ai/strategy"] .strategy-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: rgba(2, 6, 18, 0.72);
}

body[data-route="ai/strategy"] .strategy-modal-backdrop[hidden] {
  display: none;
}

body[data-route="ai/strategy"] .strategy-task-modal,
body[data-route="ai/strategy"] .strategy-log-modal {
  width: min(900px, calc(100vw - 32px));
  max-height: calc(100vh - 58px);
  overflow: hidden;
  border-radius: 8px;
  background: #1d2738;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.38);
}

body[data-route="ai/strategy"] .strategy-modal-head,
body[data-route="ai/strategy"] .strategy-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
}

body[data-route="ai/strategy"] .strategy-modal-head h3 {
  margin: 0;
  color: #f8fbff;
  font-size: 18px;
}

body[data-route="ai/strategy"] .strategy-close {
  all: unset;
  color: #c9d3e4;
  font-size: 22px;
  cursor: pointer;
}

body[data-route="ai/strategy"] .strategy-modal-body {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 22px;
  max-height: calc(100vh - 184px);
  overflow: auto;
  padding: 10px 20px 24px;
}

body[data-route="ai/strategy"] .strategy-room-title,
body[data-route="ai/strategy"] .strategy-section-title {
  margin-bottom: 12px;
  color: #eef5ff;
  font-weight: 700;
}

body[data-route="ai/strategy"] .strategy-location-tree {
  display: grid;
  gap: 6px;
  color: #cad4e4;
  font-size: 13px;
}

body[data-route="ai/strategy"] .strategy-tree-node,
body[data-route="ai/strategy"] .strategy-tree-room {
  display: grid;
  grid-template-columns: 20px 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 26px;
}

body[data-route="ai/strategy"] .strategy-tree-node button {
  all: unset;
  color: #cbd5e1;
  cursor: pointer;
}

body[data-route="ai/strategy"] .strategy-tree-children {
  margin-left: 18px;
}

body[data-route="ai/strategy"] .strategy-tree-branch.collapsed > .strategy-tree-children,
body[data-route="ai/strategy"] .strategy-tree-building.collapsed > .strategy-tree-children,
body[data-route="ai/strategy"] .strategy-tree-floor.collapsed > .strategy-tree-children {
  display: none;
}

body[data-route="ai/strategy"] .strategy-tree-room {
  grid-template-columns: 12px 18px minmax(0, 1fr) auto;
  cursor: pointer;
}

body[data-route="ai/strategy"] .strategy-tree-node b,
body[data-route="ai/strategy"] .strategy-tree-room b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-route="ai/strategy"] .strategy-tree-node small,
body[data-route="ai/strategy"] .strategy-tree-room small {
  color: #7f8da3;
}

body[data-route="ai/strategy"] .strategy-form-column {
  display: grid;
  gap: 14px;
}

body[data-route="ai/strategy"] .strategy-form-field {
  display: grid;
  gap: 7px;
  color: #d6deeb;
  font-size: 13px;
}

body[data-route="ai/strategy"] .strategy-form-field.required > span::before {
  content: "*";
  margin-right: 3px;
  color: #ff4d4f;
}

body[data-route="ai/strategy"] .strategy-form-field em {
  min-height: 16px;
  color: #ff4d4f;
  font-style: normal;
}

body[data-route="ai/strategy"] .strategy-form-field .invalid {
  border-color: #ff4d4f;
}

body[data-route="ai/strategy"] .strategy-policy-options,
body[data-route="ai/strategy"] .strategy-week-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body[data-route="ai/strategy"] .strategy-policy-options label,
body[data-route="ai/strategy"] .strategy-week-grid label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(117, 132, 158, 0.38);
  border-radius: 4px;
  background: #111a2c;
}

body[data-route="ai/strategy"] .strategy-condition-panel,
body[data-route="ai/strategy"] .strategy-action-config {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 12px;
  padding-top: 4px;
}

body[data-route="ai/strategy"] .strategy-condition-panel .strategy-section-title,
body[data-route="ai/strategy"] .strategy-action-config .strategy-section-title,
body[data-route="ai/strategy"] .strategy-condition-panel p {
  grid-column: 1 / -1;
}

body[data-route="ai/strategy"] .strategy-condition-panel label,
body[data-route="ai/strategy"] .strategy-action-config label {
  display: grid;
  gap: 7px;
  color: #d6deeb;
  font-size: 13px;
}

body[data-route="ai/strategy"] .strategy-condition-panel p {
  margin: 0;
  color: #8c98ad;
  font-size: 12px;
}

body[data-route="ai/strategy"] .strategy-log-modal {
  width: min(600px, calc(100vw - 32px));
}

body[data-route="ai/strategy"] .strategy-log-timeline {
  min-height: 240px;
  max-height: 420px;
  overflow: auto;
  padding: 12px 42px 24px;
}

body[data-route="ai/strategy"] .strategy-log-item {
  position: relative;
  padding: 0 0 22px 24px;
  border-left: 2px solid rgba(77, 111, 166, 0.42);
}

body[data-route="ai/strategy"] .strategy-log-item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2f7cff;
}

body[data-route="ai/strategy"] .strategy-log-item time,
body[data-route="ai/strategy"] .strategy-log-item p {
  display: block;
  margin: 0 0 6px;
  color: #dce6f5;
}

body[data-route="ai/strategy"] .strategy-log-item time {
  color: #9aa7bb;
}

body[data-route="ai/strategy"] .strategy-page-message {
  min-height: 20px;
  margin-top: 10px;
  color: #93c5fd;
}

@media (max-width: 767px) {
  body[data-route="ai/strategy"] .strategy-filter-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body[data-route="ai/strategy"] .strategy-task-console {
    padding: 14px 12px 70px;
  }

  body[data-route="ai/strategy"] .strategy-filter-strip,
  body[data-route="ai/strategy"] .strategy-modal-body,
  body[data-route="ai/strategy"] .strategy-condition-panel,
  body[data-route="ai/strategy"] .strategy-action-config {
    grid-template-columns: 1fr;
  }

  body[data-route="ai/strategy"] .strategy-pagination {
    flex-wrap: wrap;
  }
}
body[data-route="ai/anomaly"] .strategy-task-console {
  min-height: calc(100vh - 110px);
  padding: 20px 22px 72px;
  color: #d8e2f2;
  background: #070d1c;
}

body[data-route="ai/anomaly"] .energy-task-console {
  align-content: start;
}

body[data-route="ai/anomaly"] .strategy-console-head,
body[data-route="ai/anomaly"] .strategy-modal-head,
body[data-route="ai/anomaly"] .strategy-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body[data-route="ai/anomaly"] .strategy-console-head {
  margin-bottom: 18px;
}

body[data-route="ai/anomaly"] .strategy-console-head h2,
body[data-route="ai/anomaly"] .strategy-modal-head h3 {
  margin: 0;
  color: #f8fbff;
}

body[data-route="ai/anomaly"] .strategy-console-head small,
body[data-route="ai/anomaly"] .strategy-filter-field span,
body[data-route="ai/anomaly"] .strategy-form-field span,
body[data-route="ai/anomaly"] .strategy-room-title,
body[data-route="ai/anomaly"] .strategy-section-title {
  color: #c4ccda;
}

body[data-route="ai/anomaly"] .energy-filter-strip {
  display: grid;
  grid-template-columns: minmax(170px, 1.2fr) repeat(3, minmax(145px, 1fr)) auto auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 16px;
}

body[data-route="ai/anomaly"] .energy-filter-strip [data-energy-create],
body[data-route="ai/anomaly"] .energy-filter-strip [data-energy-sync] {
  justify-self: start;
}

body[data-route="ai/anomaly"] .energy-filter-strip [data-energy-create] {
  grid-column: 1;
}

body[data-route="ai/anomaly"] .energy-filter-strip [data-energy-sync] {
  grid-column: 2;
}

body[data-route="ai/anomaly"] .strategy-filter-field,
body[data-route="ai/anomaly"] .strategy-form-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

body[data-route="ai/anomaly"] .energy-task-table {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
  color: #cfd8e7;
}

body[data-route="ai/anomaly"] .strategy-task-table-wrap {
  overflow: auto;
  border-top: 1px solid rgba(116, 132, 160, 0.2);
}

body[data-route="ai/anomaly"] .energy-task-table th {
  height: 42px;
  padding: 0 10px;
  color: #d7deea;
  background: #1d2738;
  text-align: left;
}

body[data-route="ai/anomaly"] .energy-task-table td {
  height: 64px;
  padding: 0 10px;
  border-bottom: 1px solid rgba(116, 132, 160, 0.14);
  background: #081025;
}

body[data-route="ai/anomaly"] .energy-task-table tbody tr:nth-child(even) td {
  background: #1a2333;
}

body[data-route="ai/anomaly"] .energy-task-table td strong,
body[data-route="ai/anomaly"] .energy-task-table td small {
  display: block;
}

body[data-route="ai/anomaly"] .energy-task-table td small {
  margin-top: 4px;
  color: #8996aa;
}

body[data-route="ai/anomaly"] .strategy-row-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
}

body[data-route="ai/anomaly"] .strategy-row-actions button,
body[data-route="ai/anomaly"] .energy-exclude-table button {
  border: 0;
  color: #2f7cff;
  background: transparent;
  cursor: pointer;
}

body[data-route="ai/anomaly"] .strategy-row-actions .danger,
body[data-route="ai/anomaly"] .energy-exclude-table .danger {
  color: #ff4d5f;
}

body[data-route="ai/anomaly"] .strategy-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12px;
  color: #91f1c1;
  background: rgba(41, 196, 125, 0.12);
}

body[data-route="ai/anomaly"] .strategy-status.disabled {
  color: #ffc66d;
  background: rgba(255, 198, 109, 0.14);
}

body[data-route="ai/anomaly"] .strategy-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  color: #aeb8ca;
}

body[data-route="ai/anomaly"] .strategy-pagination .inp {
  width: 64px;
}

body[data-route="ai/anomaly"] .energy-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.48);
}

body[data-route="ai/anomaly"] .energy-modal-backdrop[hidden] {
  display: none;
}

body[data-route="ai/anomaly"] .energy-task-modal {
  width: min(930px, calc(100vw - 32px));
  max-height: calc(100vh - 58px);
  overflow: hidden;
  border: 1px solid rgba(116, 132, 160, 0.24);
  border-radius: 10px;
  background: #1b2638;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.34);
}

body[data-route="ai/anomaly"] .strategy-modal-head,
body[data-route="ai/anomaly"] .strategy-modal-foot {
  padding: 18px 22px;
  border-bottom: 1px solid rgba(116, 132, 160, 0.18);
}

body[data-route="ai/anomaly"] .strategy-modal-foot {
  border-top: 1px solid rgba(116, 132, 160, 0.18);
  border-bottom: 0;
}

body[data-route="ai/anomaly"] .strategy-modal-body {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 22px;
  max-height: calc(100vh - 184px);
  overflow: auto;
  padding: 18px 22px;
  scrollbar-gutter: stable;
}

body[data-route="ai/anomaly"] .strategy-location-tree {
  display: grid;
  gap: 5px;
  max-height: calc(100vh - 246px);
  overflow: auto;
  padding-right: 4px;
}

body[data-route="ai/anomaly"] .strategy-tree-node,
body[data-route="ai/anomaly"] .strategy-tree-room {
  display: grid;
  grid-template-columns: 18px 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 27px;
  color: #d8e2f2;
}

body[data-route="ai/anomaly"] .strategy-tree-room {
  grid-template-columns: 18px 18px minmax(0, 1fr) minmax(48px, auto);
  padding-left: 20px;
}

body[data-route="ai/anomaly"] .strategy-tree-node button {
  border: 0;
  color: #cbd5e6;
  background: transparent;
  cursor: pointer;
}

body[data-route="ai/anomaly"] [data-energy-tree-branch].collapsed > .strategy-tree-children {
  display: none;
}

body[data-route="ai/anomaly"] .strategy-form-column {
  display: grid;
  gap: 14px;
}

body[data-route="ai/anomaly"] .energy-valid-range,
body[data-route="ai/anomaly"] .energy-time-grid,
body[data-route="ai/anomaly"] .energy-action-options,
body[data-route="ai/anomaly"] .energy-exclude-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body[data-route="ai/anomaly"] .energy-action-options {
  grid-template-columns: repeat(2, max-content);
}

body[data-route="ai/anomaly"] .energy-time-selects {
  display: grid;
  grid-template-columns: minmax(70px, 1fr) auto minmax(70px, 1fr) auto;
  align-items: center;
  gap: 8px;
}

body[data-route="ai/anomaly"] .strategy-week-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-route="ai/anomaly"] .strategy-week-grid label,
body[data-route="ai/anomaly"] .energy-action-options label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(116, 132, 160, 0.34);
  border-radius: 6px;
  color: #d8e2f2;
  background: #121a2a;
}

body[data-route="ai/anomaly"] textarea.inp {
  min-height: 58px;
  resize: vertical;
}

body[data-route="ai/anomaly"] .energy-exclude-panel {
  display: grid;
  gap: 10px;
}

body[data-route="ai/anomaly"] .energy-exclude-table {
  width: 100%;
  border-collapse: collapse;
  color: #cfd8e7;
}

body[data-route="ai/anomaly"] .energy-exclude-table th,
body[data-route="ai/anomaly"] .energy-exclude-table td {
  padding: 10px;
  border-bottom: 1px solid rgba(116, 132, 160, 0.16);
  background: #202b3d;
  text-align: left;
}

@media (max-width: 767px) {
  body[data-route="ai/anomaly"] .energy-filter-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  body[data-route="ai/anomaly"] .strategy-task-console {
    padding: 14px 12px 70px;
  }

  body[data-route="ai/anomaly"] .energy-filter-strip,
  body[data-route="ai/anomaly"] .strategy-modal-body,
  body[data-route="ai/anomaly"] .energy-valid-range,
  body[data-route="ai/anomaly"] .energy-time-grid,
  body[data-route="ai/anomaly"] .energy-exclude-actions {
    grid-template-columns: 1fr;
  }
}

.subaccount-page,
body[data-route="customers"] .subaccount-page {
  display: grid;
  gap: 18px;
  align-content: start;
}

.subaccount-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(160px, 220px) minmax(180px, 240px) max-content max-content 1fr;
  gap: 10px;
  align-items: end;
}

.subaccount-toolbar label,
.subaccount-modal label,
.subaccount-remark {
  display: grid;
  gap: 6px;
  color: var(--text-muted);
  font-size: 12px;
}

.subaccount-toolbar .subaccount-add {
  justify-self: end;
}

.subaccount-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.subaccount-summary > div {
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  background: var(--surface-panel);
  padding: 12px 14px;
  display: grid;
  gap: 4px;
}

.subaccount-summary small,
.subaccount-summary span {
  color: var(--text-muted);
  font-size: 12px;
}

.subaccount-summary b {
  color: var(--text-main);
  font-size: 20px;
}

.subaccount-table-wrap {
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  overflow: auto;
  background: var(--surface-panel);
}

.subaccount-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
  table-layout: fixed;
}

.subaccount-table th,
.subaccount-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-muted-soft);
  color: var(--text-main);
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.subaccount-table th {
  background: var(--surface-panel-strong);
  color: var(--text-muted);
  font-weight: 600;
}

.subaccount-table tbody tr:nth-child(even) {
  background: var(--surface-panel-deep);
}

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

.subaccount-table th:last-child,
.subaccount-table td.subaccount-actions {
  width: 264px;
  white-space: normal;
  overflow: visible;
}

.subaccount-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
}

.subaccount-actions .linkbtn,
.subaccount-modal-head button {
  border: 0;
  background: transparent;
  color: var(--accent-primary);
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.subaccount-actions .linkbtn.danger {
  color: var(--danger);
}

.subaccount-empty {
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  background: var(--surface-panel);
  padding: 28px;
}

.subaccount-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.5);
}

.subaccount-modal {
  width: min(620px, calc(100vw - 36px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  background: var(--surface-elevated);
  box-shadow: var(--shadow-strong);
  padding: 22px;
}

.subaccount-modal.compact {
  width: min(430px, calc(100vw - 36px));
}

.subaccount-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.subaccount-modal-head h2 {
  margin: 0;
  color: var(--text-main);
  font-size: 18px;
  font-weight: 700;
}

.subaccount-modal-head button {
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
}

.subaccount-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
}

.subaccount-modal .required::before {
  content: "*";
  color: var(--danger);
  margin-right: 4px;
}

.subaccount-permissions {
  border: 0;
  padding: 16px 0 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.subaccount-permissions legend {
  color: var(--text-muted);
  font-size: 12px;
  padding: 0 0 8px;
}

.subaccount-permissions label {
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border-muted-soft);
  border-radius: var(--radius);
  padding: 7px 10px;
  color: var(--text-main);
  background: var(--surface-panel-deep);
}

.subaccount-remark {
  margin-top: 16px;
}

.subaccount-remark textarea {
  min-height: 72px;
  resize: vertical;
}

.subaccount-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

@media (max-width: 767px) {
  .subaccount-toolbar,
  .subaccount-summary,
  .subaccount-form-grid {
    grid-template-columns: 1fr;
  }

  .subaccount-toolbar .subaccount-add {
    justify-self: stretch;
  }
}

.gateway-management-page {
  display: block;
  color: var(--text);
  font-size: 13px;
}

.gateway-tabs {
  display: flex;
  gap: 22px;
  height: 42px;
  align-items: end;
  border-bottom: 1px solid rgba(94, 132, 190, 0.24);
  margin-bottom: 8px;
}

.gateway-tabs button {
  height: 42px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 0 0 8px;
  font-weight: 700;
}

.gateway-tabs button.active {
  color: #2f8bff;
  border-bottom-color: #2f8bff;
}

.gateway-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}

.gateway-filter-bar .inp {
  width: 150px;
  height: 34px;
  min-height: 34px;
  font-size: 12px;
}

.gateway-filter-bar .push-right {
  margin-left: auto;
}

.host-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 10px;
}

.gateway-host-card {
  min-height: 246px;
  border: 1px solid rgba(115, 139, 181, 0.24);
  border-radius: 8px;
  background: rgba(27, 39, 61, 0.92);
  padding: 14px;
}

.host-card-head,
.host-actions,
.gateway-pagination,
.modal-actions {
  display: flex;
  align-items: center;
}

.host-card-head {
  justify-content: space-between;
  margin-bottom: 10px;
}

.host-card-head b {
  font-size: 18px;
}

.icon-btn {
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: var(--muted);
}

.gateway-host-card dl {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 6px 10px;
  margin: 0;
}

.gateway-host-card dt {
  color: var(--muted);
}

.gateway-host-card dd {
  min-width: 0;
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

.gateway-host-card dd.ok,
.thermostat-table .status.ok {
  color: #e5edf7;
}

.gateway-host-card dd.bad,
.thermostat-table .status.bad {
  color: #ff4d57;
  font-weight: 700;
}

.host-actions {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.thermostat-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(115, 139, 181, 0.18);
}

.thermostat-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1320px;
  background: rgba(9, 17, 34, 0.78);
}

.thermostat-table th,
.thermostat-table td {
  height: 40px;
  border-bottom: 1px solid rgba(115, 139, 181, 0.12);
  padding: 0 10px;
  text-align: center;
  white-space: nowrap;
}

.thermostat-table th {
  background: rgba(32, 45, 68, 0.9);
  color: #d7e2f2;
  font-weight: 700;
}

.thermostat-table td {
  color: #cbd6e4;
}

.thermostat-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.thermostat-actions button {
  border: 0;
  background: transparent;
  color: #2f8bff;
  padding: 0;
}

.gateway-pagination {
  justify-content: center;
  gap: 10px;
  height: 56px;
  color: var(--muted);
}

.gateway-pagination .inp {
  width: 82px;
  height: 30px;
  min-height: 30px;
}

.gateway-pagination button {
  width: 32px;
  height: 30px;
  border: 1px solid rgba(115, 139, 181, 0.24);
  background: rgba(39, 54, 82, 0.72);
  color: #cbd6e4;
}

.gateway-pagination button.active {
  background: #2f6df6;
  color: #fff;
}

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

.gateway-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.62);
}

.gateway-modal .modal-box {
  position: relative;
  width: min(600px, calc(100vw - 36px));
  max-height: calc(100vh - 70px);
  overflow: auto;
  border-radius: 8px;
  background: #1f2b40;
  padding: 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
}

.gateway-modal .modal-box.small {
  width: min(560px, calc(100vw - 36px));
}

.gateway-modal .modal-box.detail {
  width: min(520px, calc(100vw - 36px));
}

.gateway-modal .x {
  position: absolute;
  right: 18px;
  top: 16px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 22px;
}

.gateway-modal h3 {
  margin: 0 0 24px;
  font-size: 20px;
}

.gateway-modal label {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}

.gateway-modal label span {
  text-align: right;
}

.gateway-modal textarea.inp {
  height: 106px;
  resize: vertical;
}

.modal-tip {
  margin: -4px 0 8px 126px;
  color: #ff4d57;
  font-weight: 700;
}

.gateway-management-page .hardware-unavailable-banner {
  margin: 0 0 12px;
  padding: 8px 10px;
  border: 1px solid #f3d38a;
  border-radius: 8px;
  color: #854d0e;
  background: #fffbeb;
  font-weight: 600;
  line-height: 1.45;
}

.modal-actions {
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}


.environment-device-page {
  min-height: calc(100vh - 96px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 0;
  color: var(--text);
  background: transparent;
}

.environment-device-page .gateway-tabs {
  margin: 0;
  padding: 0 20px;
  background: rgba(21, 31, 49, 0.72);
}

.environment-device-actions {
  display: flex;
  gap: 8px;
  align-self: center;
  margin-left: auto;
}

.environment-device-actions .btn {
  min-width: 62px;
  height: 30px;
  padding: 0 12px;
}

.environment-device-panel {
  min-height: calc(100vh - 194px);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.environment-device-table-wrap {
  min-height: 0;
  overflow: auto;
  border-top: 1px solid rgba(115, 139, 181, 0.14);
}

.environment-device-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
  background: rgba(7, 13, 28, 0.74);
}

.environment-device-table th,
.environment-device-table td {
  height: 42px;
  border-bottom: 1px solid rgba(115, 139, 181, 0.12);
  padding: 0 14px;
  color: #cbd6e4;
  text-align: left;
  white-space: nowrap;
}

.environment-device-table th {
  background: rgba(24, 36, 56, 0.94);
  color: #d7e2f2;
  font-weight: 700;
}

.environment-device-empty {
  min-height: calc(100vh - 250px);
  display: grid;
  place-items: center;
}

.environment-device-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 22px;
  border-radius: 4px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 700;
}

.environment-device-status.ok {
  color: #dff8ed;
  background: rgba(25, 184, 117, 0.18);
}

.environment-device-status.bad {
  color: #ffb8bd;
  background: rgba(255, 77, 87, 0.14);
}

.environment-device-modal .modal-box.small {
  width: min(552px, calc(100vw - 36px));
  min-height: 384px;
  padding: 20px 20px 18px;
}

.environment-device-modal label {
  grid-template-columns: 92px minmax(0, 1fr) 0;
  margin: 14px 0;
}

.environment-device-modal label span i {
  color: #ff4d57;
  font-style: normal;
}

.environment-device-modal textarea.inp {
  height: 100px;
}.detail-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 16px;
  min-height: 36px;
  align-items: center;
}

.detail-row span {
  color: var(--muted);
}

.detail-row b {
  text-align: right;
/* UI-2026.07.14.01 · AI energy task workbench, inner page only. */
}

body[data-route="ai/anomaly"] .energy-task-console {
  min-height: calc(100vh - 110px);
  padding: 24px 28px 72px;
  color: #173153;
  background: #f4f8fc;
}
body[data-route="ai/anomaly"] .energy-page-head {
  margin-bottom: 18px;
}
body[data-route="ai/anomaly"] .energy-page-head h2 {
  margin: 6px 0 5px;
  color: #173153;
  letter-spacing: -0.02em;
}
body[data-route="ai/anomaly"] .energy-page-head p {
  margin: 0;
  color: #7890aa;
  font-size: 13px;
}
body[data-route="ai/anomaly"] .energy-page-head small,
body[data-route="ai/anomaly"] .strategy-filter-field span,
body[data-route="ai/anomaly"] .strategy-form-field span,
body[data-route="ai/anomaly"] .strategy-room-title,
body[data-route="ai/anomaly"] .strategy-section-title {
  color: #6d829c;
}
body[data-route="ai/anomaly"] .energy-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
body[data-route="ai/anomaly"] .energy-summary-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  min-height: 78px;
  padding: 15px 17px;
  border: 1px solid #dce8f5;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(35, 84, 132, 0.05);
}
body[data-route="ai/anomaly"] .energy-summary-card span,
body[data-route="ai/anomaly"] .energy-summary-card small {
  color: #7890aa;
  font-size: 12px;
}
body[data-route="ai/anomaly"] .energy-summary-card strong {
  grid-row: span 2;
  align-self: center;
  color: #1e4e86;
  font-size: 28px;
  line-height: 1;
}
body[data-route="ai/anomaly"] .energy-summary-card small {
  color: #9aaabd;
}
body[data-route="ai/anomaly"] .energy-summary-card.tone-green strong { color: #128565; }
body[data-route="ai/anomaly"] .energy-summary-card.tone-amber strong { color: #bd7a22; }
body[data-route="ai/anomaly"] .energy-summary-card.tone-red strong { color: #c24d5c; }
body[data-route="ai/anomaly"] .energy-summary-card.tone-purple strong { color: #6757b4; }
body[data-route="ai/anomaly"] .energy-command-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  padding: 16px 18px;
  border: 1px solid #dce8f5;
  border-radius: 12px 12px 0 0;
  background: #fff;
}
body[data-route="ai/anomaly"] .energy-command-bar strong {
  display: block;
  color: #173153;
  font-size: 16px;
}
body[data-route="ai/anomaly"] .energy-command-bar span {
  display: block;
  margin-top: 4px;
  color: #8a9db4;
  font-size: 12px;
}
body[data-route="ai/anomaly"] .energy-command-actions,
body[data-route="ai/anomaly"] .energy-filter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
body[data-route="ai/anomaly"] .energy-filter-strip {
  display: grid;
  grid-template-columns: minmax(180px, 1.25fr) repeat(3, minmax(140px, 1fr)) auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px 16px 16px;
  border: 1px solid #dce8f5;
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: #f9fbfe;
}
body[data-route="ai/anomaly"] .energy-filter-strip .strategy-filter-field,
body[data-route="ai/anomaly"] .strategy-form-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}
body[data-route="ai/anomaly"] .energy-filter-strip .inp,
body[data-route="ai/anomaly"] .energy-task-modal .inp {
  min-height: 40px;
  border: 1px solid #d7e3f0;
  border-radius: 8px;
  color: #284565;
  background: #fff;
  box-shadow: none;
}
body[data-route="ai/anomaly"] .energy-task-table {
  width: 100%;
  min-width: 960px;
  border-collapse: separate;
  border-spacing: 0;
  color: #284565;
}
body[data-route="ai/anomaly"] .strategy-task-table-wrap {
  overflow: auto;
  border: 1px solid #dce8f5;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(35, 84, 132, 0.045);
}
body[data-route="ai/anomaly"] .energy-task-table th {
  height: 44px;
  padding: 0 12px;
  border-bottom: 1px solid #e4edf7;
  color: #6d829c;
  background: #f6f9fd;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}
body[data-route="ai/anomaly"] .energy-task-table td {
  height: 66px;
  padding: 0 12px;
  border-bottom: 1px solid #edf2f7;
  background: #fff;
}
body[data-route="ai/anomaly"] .energy-task-table tbody tr:hover td {
  background: #f7fbff;
}
body[data-route="ai/anomaly"] .energy-task-table td strong,
body[data-route="ai/anomaly"] .energy-task-table td small {
  display: block;
}
body[data-route="ai/anomaly"] .energy-task-table td strong { color: #21466e; }
body[data-route="ai/anomaly"] .energy-task-table td small { margin-top: 4px; color: #91a2b5; }
body[data-route="ai/anomaly"] .strategy-row-actions button,
body[data-route="ai/anomaly"] .energy-exclude-table button {
  border: 0;
  color: #246ed1;
  background: transparent;
  cursor: pointer;
}
body[data-route="ai/anomaly"] .strategy-row-actions .danger,
body[data-route="ai/anomaly"] .energy-exclude-table .danger { color: #d04c5b; }
body[data-route="ai/anomaly"] .strategy-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  color: #147957;
  background: #e8f8f1;
  font-size: 12px;
}
body[data-route="ai/anomaly"] .strategy-status.pending { color: #99621a; background: #fff3dd; }
body[data-route="ai/anomaly"] .strategy-status.disabled { color: #b44854; background: #ffebee; }
body[data-route="ai/anomaly"] .strategy-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  color: #8497ac;
}
body[data-route="ai/anomaly"] .strategy-pagination .inp { width: 74px; }
body[data-route="ai/anomaly"] .energy-modal-backdrop {
  position: fixed;
  inset: var(--energy-drawer-top, 69px) 0 0;
  z-index: 40;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  background: rgba(20, 44, 76, 0.32);
  backdrop-filter: blur(2px);
}
body[data-route="ai/anomaly"] .energy-modal-backdrop[hidden] { display: none; }
body[data-route="ai/anomaly"] .energy-modal-backdrop > .strategy-modal-panel {
  display: flex;
  width: min(560px, calc(100vw - 18px));
  height: 100%;
}
body[data-route="ai/anomaly"] .energy-task-modal {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: 100%;
  max-height: calc(100vh - var(--energy-drawer-top, 69px));
  overflow: hidden;
  border: 1px solid #dce8f5;
  border-right: 0;
  border-radius: 16px 0 0 16px;
  background: #fff;
  box-shadow: -18px 0 48px rgba(26, 67, 111, 0.16);
}
body[data-route="ai/anomaly"] .energy-drawer-head {
  padding: 22px 24px 16px;
  border-bottom: 1px solid #e5edf6;
}
body[data-route="ai/anomaly"] .energy-drawer-head small { color: #6c89aa; font-size: 12px; }
body[data-route="ai/anomaly"] .energy-drawer-head h3 { margin: 5px 0 0; color: #183a60; font-size: 20px; }
body[data-route="ai/anomaly"] .strategy-close { color: #6f87a1; }
body[data-route="ai/anomaly"] .energy-stepper {
  display: grid;
  grid-template-columns: max-content minmax(18px, 1fr) max-content minmax(18px, 1fr) max-content;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  border-bottom: 1px solid #e9f0f7;
  background: #fbfdff;
}
body[data-route="ai/anomaly"] .energy-stepper > div {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #92a5ba;
  font-size: 12px;
  white-space: nowrap;
}
body[data-route="ai/anomaly"] .energy-stepper b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #7990a9;
  background: #eaf1f8;
  font-size: 12px;
}
body[data-route="ai/anomaly"] .energy-stepper .active { color: #246ed1; font-weight: 600; }
body[data-route="ai/anomaly"] .energy-stepper .active b { color: #fff; background: #2b7de0; box-shadow: 0 4px 10px rgba(43, 125, 224, 0.25); }
body[data-route="ai/anomaly"] .energy-stepper i { height: 1px; background: #d9e5f1; }
body[data-route="ai/anomaly"] .strategy-modal-body {
  display: grid;
  grid-template-columns: 198px minmax(0, 1fr);
  gap: 18px;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  padding: 18px 24px;
  background: #fff;
}
body[data-route="ai/anomaly"] .strategy-room-column {
  min-width: 0;
  min-height: 0;
  padding: 12px;
  overflow: auto;
  border: 1px solid #e1ebf5;
  border-radius: 10px;
  background: #f7faff;
}
body[data-route="ai/anomaly"] .energy-drawer-intro { display: grid; gap: 4px; margin-bottom: 12px; }
body[data-route="ai/anomaly"] .energy-drawer-intro strong { color: #284d75; font-size: 13px; }
body[data-route="ai/anomaly"] .energy-drawer-intro span { color: #8da0b5; font-size: 11px; line-height: 1.5; }
body[data-route="ai/anomaly"] .strategy-location-tree { max-height: none; padding-right: 2px; }
body[data-route="ai/anomaly"] .strategy-tree-node,
body[data-route="ai/anomaly"] .strategy-tree-room { color: #42617f; }
body[data-route="ai/anomaly"] .strategy-tree-node button { color: #7f97b0; }
body[data-route="ai/anomaly"] .strategy-tree-room small,
body[data-route="ai/anomaly"] .strategy-tree-node small { color: #91a3b6; }
body[data-route="ai/anomaly"] .strategy-form-column { min-width: 0; min-height: 0; overflow: auto; padding-right: 3px; }
body[data-route="ai/anomaly"] .energy-form-section { display: grid; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid #edf2f7; }
body[data-route="ai/anomaly"] .energy-form-section + .energy-form-section { padding-top: 18px; }
body[data-route="ai/anomaly"] .energy-form-section-head { display: grid; gap: 4px; }
body[data-route="ai/anomaly"] .energy-form-section-head strong { color: #21466e; font-size: 14px; }
body[data-route="ai/anomaly"] .energy-form-section-head span { color: #91a2b5; font-size: 12px; }
body[data-route="ai/anomaly"] .energy-valid-range,
body[data-route="ai/anomaly"] .energy-time-grid,
body[data-route="ai/anomaly"] .energy-action-options,
body[data-route="ai/anomaly"] .energy-exclude-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
body[data-route="ai/anomaly"] .energy-action-options { grid-template-columns: repeat(2, max-content); }
body[data-route="ai/anomaly"] .energy-time-selects { display: grid; grid-template-columns: minmax(58px, 1fr) auto minmax(58px, 1fr) auto; align-items: center; gap: 7px; }
body[data-route="ai/anomaly"] .energy-action-options label,
body[data-route="ai/anomaly"] .strategy-week-grid label { border-color: #d7e3f0; color: #3b5c7e; background: #f8fbff; }
body[data-route="ai/anomaly"] .strategy-week-grid { gap: 7px; }
body[data-route="ai/anomaly"] .strategy-week-grid label { min-height: 34px; }
body[data-route="ai/anomaly"] .energy-task-modal textarea.inp { min-height: 82px; resize: vertical; }
body[data-route="ai/anomaly"] .energy-exclude-panel { display: grid; gap: 10px; padding-top: 4px; }
body[data-route="ai/anomaly"] .energy-exclude-table { width: 100%; border-collapse: collapse; color: #4e6883; }
body[data-route="ai/anomaly"] .energy-exclude-table th,
body[data-route="ai/anomaly"] .energy-exclude-table td { padding: 9px 8px; border-bottom: 1px solid #e5edf5; background: #fff; text-align: left; }
body[data-route="ai/anomaly"] .strategy-modal-foot { min-height: 70px; padding: 14px 24px; border-top: 1px solid #e5edf6; border-bottom: 0; background: #fbfdff; }
body[data-route="ai/anomaly"] .strategy-modal-foot [data-energy-modal-message] { min-width: 0; margin-right: auto; color: #71869d; font-size: 12px; }
body[data-route="ai/anomaly"] .strategy-modal-foot [data-energy-modal-message].error { color: #c24d5c; }
body[data-route="ai/anomaly"] .energy-task-modal input[type="checkbox"],
body[data-route="ai/anomaly"] .energy-task-modal input[type="radio"] { accent-color: #2877d6; }
@media (max-width: 1100px) {
  body[data-route="ai/anomaly"] .energy-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-route="ai/anomaly"] .energy-filter-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body[data-route="ai/anomaly"] .energy-task-console { padding: 16px 12px 64px; }
  body[data-route="ai/anomaly"] .energy-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-route="ai/anomaly"] .energy-command-bar { align-items: flex-start; flex-direction: column; }
  body[data-route="ai/anomaly"] .energy-filter-strip { grid-template-columns: 1fr; }
  body[data-route="ai/anomaly"] .energy-filter-actions { justify-content: flex-start; }
  body[data-route="ai/anomaly"] .energy-modal-backdrop > .strategy-modal-panel { width: 100%; }
  body[data-route="ai/anomaly"] .energy-task-modal { border-right: 0; border-radius: 0; }
  body[data-route="ai/anomaly"] .strategy-modal-body { grid-template-columns: 1fr; overflow: auto; }
  body[data-route="ai/anomaly"] .strategy-room-column { max-height: 230px; }
  body[data-route="ai/anomaly"] .strategy-form-column { overflow: visible; }
  body[data-route="ai/anomaly"] .energy-valid-range,
  body[data-route="ai/anomaly"] .energy-time-grid,
  body[data-route="ai/anomaly"] .energy-exclude-actions { grid-template-columns: 1fr; }
  body[data-route="ai/anomaly"] .energy-stepper { padding: 14px 16px; }
  body[data-route="ai/anomaly"] .energy-stepper > div { gap: 5px; }
  body[data-route="ai/anomaly"] .energy-stepper span { display: none; }
  body[data-route="ai/anomaly"] .energy-drawer-head,
  body[data-route="ai/anomaly"] .strategy-modal-body,
  body[data-route="ai/anomaly"] .strategy-modal-foot { padding-left: 16px; padding-right: 16px; }
}
body[data-route="ai/anomaly"] .energy-task-status { display: inline-flex; align-items: center; gap: 6px; color: #16805e; font-size: 12px; white-space: nowrap; }
body[data-route="ai/anomaly"] .energy-task-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
body[data-route="ai/anomaly"] .energy-task-status.status-paused { color: #bf7a21; }
body[data-route="ai/anomaly"] .energy-task-status.status-completed { color: #2d73d2; }
body[data-route="ai/anomaly"] .energy-task-status.status-expired { color: #8997a8; }
body[data-route="ai/anomaly"] .energy-room-toolbar { display: grid; gap: 7px; margin-bottom: 12px; }
body[data-route="ai/anomaly"] .energy-room-toolbar .inp { min-height: 34px; padding: 0 9px; font-size: 12px; }
body[data-route="ai/anomaly"] .energy-room-toolbar span { color: #2d73d2; font-size: 11px; }
body[data-route="ai/anomaly"] .strategy-tree-room[hidden] { display: none; }
  overflow-wrap: anywhere;
}

@media (max-width: 767px) {
  .host-card-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }
}

@media (max-width: 760px) {
  .host-card-grid {
    grid-template-columns: 1fr;
  }

  .gateway-modal label {
    grid-template-columns: 1fr;
  }

  .gateway-modal label span,
  .detail-row b {
    text-align: left;
  }

  .modal-tip {
    margin-left: 0;
  }
}

/* Room binding workbench rebuilt from the three-step binding reference. */
.room-binding-workbench {
  gap: 10px;
  color: var(--text-bar);
}

.room-workbench-steps {
  display: grid;
  grid-template-columns: minmax(420px, 1.04fr) minmax(470px, 1.04fr) minmax(190px, 0.32fr);
  gap: 10px;
  height: 410px;
  min-height: 410px;
  margin-bottom: 10px;
}

.room-workbench-card,
.room-bound-panel {
  min-width: 0;
  border: 1px solid rgba(70, 140, 235, 0.22);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(25, 38, 61, 0.96), rgba(18, 30, 50, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.room-workbench-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  padding: 14px;
  height: 100%;
  max-height: 410px;
  overflow: hidden;
}

.room-step-confirm {
  grid-template-rows: auto minmax(0, 1fr);
}

.room-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  margin-bottom: 10px;
}

.room-step-head h3 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 20px;
  line-height: 1.2;
}

.room-step-head h3 b {
  color: #fff;
  font-size: 30px;
  line-height: 1;
}

.room-step-head h3 span,
.room-step-head h3 em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-step-head h3 em {
  color: var(--muted);
  font-style: normal;
}

.room-step-tools {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

.room-step-tools .btn,
.room-bound-toolbar .btn,
.room-building-toolbar .btn,
.room-building-modal .savebar .btn,
.room-row-actions .btn {
  min-height: 28px;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
}

.room-step-tools .btn.on,
.room-bound-pager .btn.on {
  color: #dbeafe;
  background: rgba(37, 99, 235, 0.42);
}

.room-mini-note,
.room-building-summary,
.room-scroll-table small,
.room-bound-pager {
  color: var(--muted);
  font-size: 11px;
}

.room-mini-note {
  margin: -5px 0 8px;
}

.room-scroll-table {
  min-height: 0;
  overflow: auto;
  border-top: 1px solid rgba(70, 140, 235, 0.14);
  scrollbar-color: rgba(87, 111, 151, 0.75) transparent;
}

.room-choice-table,
.ac-choice-table,
.room-bound-table,
.room-building-table {
  min-width: 100%;
  table-layout: fixed;
}

.room-choice-table th,
.room-choice-table td,
.ac-choice-table th,
.ac-choice-table td,
.room-bound-table th,
.room-bound-table td,
.room-building-table th,
.room-building-table td {
  padding: 8px 9px;
  border-bottom-color: rgba(70, 140, 235, 0.13);
  white-space: nowrap;
}

.room-choice-table th:nth-child(1),
.room-choice-table td:nth-child(1) { width: 36px; text-align: center; }
.room-choice-table th:nth-child(2),
.room-choice-table td:nth-child(2) { width: 34px; text-align: center; }
.room-choice-table th:nth-child(4),
.room-choice-table td:nth-child(4) { width: 110px; text-align: center; }
.room-choice-table th:nth-child(5),
.room-choice-table td:nth-child(5) { width: 188px; }

.room-choice-table b,
.ac-choice-table b {
  display: block;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
}

.room-choice-table small,
.ac-choice-table small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.room-child-row td {
  background: rgba(8, 15, 29, 0.32);
  color: var(--muted);
  font-size: 11px;
}

.room-tree-toggle,
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(70, 140, 235, 0.3);
  border-radius: 4px;
  color: #9fc6ff;
  background: rgba(8, 16, 32, 0.5);
  line-height: 1;
}

.icon-btn.blue { color: #2f8bff; border-color: #1d5ed8; }
.icon-btn.red { color: #ff4d3d; border-color: #c7342d; }

.room-op-cell,
.room-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.room-building-summary {
  display: flex;
  gap: 6px;
  overflow: auto hidden;
  padding-top: 8px;
}

.room-building-summary span {
  flex: 0 0 auto;
  border: 1px solid rgba(70, 140, 235, 0.18);
  border-radius: 999px;
  padding: 2px 8px;
  background: rgba(8, 16, 32, 0.34);
}

.room-device-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.room-device-filters .inp,
.room-bound-toolbar .inp,
.room-building-table .inp,
.room-bound-table .inp.compact {
  min-width: 0;
  height: 30px;
  border-color: rgba(70, 140, 235, 0.22);
  border-radius: 4px;
  background: rgba(8, 16, 32, 0.58);
}

.room-ac-more {
  position: relative;
}

.room-ac-more summary {
  list-style: none;
  cursor: pointer;
}

.room-ac-more summary::-webkit-details-marker {
  display: none;
}

.room-ac-more-menu {
  position: absolute;
  z-index: 4;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  min-width: 118px;
  border: 1px solid rgba(70, 140, 235, 0.22);
  border-radius: 6px;
  padding: 6px;
  background: #1b263b;
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.35);
}

.room-ac-more-menu button {
  border: 0;
  border-radius: 4px;
  padding: 7px 9px;
  color: var(--text-bar);
  background: transparent;
  text-align: left;
}

.room-ac-more-menu button:hover {
  background: rgba(47, 139, 255, 0.16);
}

.ac-table-wrap {
  min-height: 270px;
}

.ac-choice-table th:nth-child(1),
.ac-choice-table td:nth-child(1) { width: 40px; text-align: center; }
.ac-choice-table th:nth-child(3),
.ac-choice-table td:nth-child(3),
.ac-choice-table th:nth-child(4),
.ac-choice-table td:nth-child(4),
.ac-choice-table th:nth-child(5),
.ac-choice-table td:nth-child(5),
.ac-choice-table th:nth-child(6),
.ac-choice-table td:nth-child(6),
.ac-choice-table th:nth-child(7),
.ac-choice-table td:nth-child(7) { width: 84px; text-align: center; }

.room-confirm-flow {
  display: grid;
  grid-template-rows: auto 1fr auto 1fr auto;
  gap: 10px;
  align-content: stretch;
  height: 100%;
}

.room-step-confirm .flowpick {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: 4px;
  font-weight: 600;
}

.room-arrow {
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.56);
  font-size: 42px;
  font-weight: 900;
}

.room-step-confirm .bindbtn {
  height: 64px;
  border-radius: 6px;
  background: #224ea6;
  font-size: 18px;
}

.room-bound-panel {
  padding: 14px;
}

.room-bound-toolbar {
  display: flex;
  align-items: end;
  gap: 10px;
  margin-bottom: 12px;
  overflow: auto hidden;
}

.room-bound-toolbar label {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr);
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  color: var(--text-bar);
  font-size: 12px;
}

.room-bound-toolbar .danger,
.room-row-actions .danger,
.room-building-toolbar .danger,
.room-building-table .danger {
  border-color: rgba(255, 77, 61, 0.7);
  color: #ff4d3d;
  background: rgba(127, 29, 29, 0.18);
}

.room-bound-table-wrap {
  max-height: 415px;
  overflow: auto;
}

.room-bound-table {
  min-width: max(100%, 74rem);
}

.room-bound-table th:nth-child(1),
.room-bound-table td:nth-child(1) { width: 44px; text-align: center; }
.room-bound-table th:nth-child(5),
.room-bound-table td:nth-child(5) { width: 150px; }
.room-bound-table th:nth-child(9),
.room-bound-table td:nth-child(9) { width: 124px; }

.room-bound-table a {
  display: inline-flex;
  margin-left: 6px;
  border: 1px solid #1d5ed8;
  border-radius: 4px;
  padding: 1px 6px;
  color: #2f8bff;
  text-decoration: none;
}

.room-bound-table .inp.compact {
  width: 100%;
}

.room-bound-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.room-building-dialog {
  position: fixed;
  inset: 0;
  z-index: 60;
}

.room-building-mask {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.66);
}

.room-building-modal {
  position: absolute;
  top: 15vh;
  left: 50%;
  width: min(920px, calc(100vw - 48px));
  max-height: 72vh;
  transform: translateX(-50%);
  overflow: auto;
  border: 1px solid rgba(70, 140, 235, 0.24);
  border-radius: 8px;
  padding: 18px;
  background: #1b263b;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.45);
}

.room-building-head,
.room-building-toolbar,
.room-building-modal .savebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}

.room-building-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
}

.room-building-toolbar {
  justify-content: flex-end;
}

.room-building-toolbar b {
  margin-right: auto;
}

.room-building-table {
  min-width: 860px;
}

.room-zone-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.room-zone-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
}

.room-zone-form .span-2 {
  grid-column: 1 / -1;
}

.room-zone-form textarea {
  resize: vertical;
}

.room-building-modal .savebar {
  justify-content: flex-end;
  margin: 16px 0 0;
}

.room-building-dialog[hidden] {
  display: none;
}

@media (max-width: 767px) {
  .room-workbench-steps {
    grid-template-columns: 1fr;
  }

  .room-workbench-card {
    min-height: 360px;
  }

  .room-step-confirm {
    min-height: 300px;
  }
}

@media (max-width: 760px) {
  .room-step-head,
  .room-bound-toolbar,
  .room-building-head,
  .room-building-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .room-step-tools,
  .room-bound-toolbar {
    flex-wrap: wrap;
  }

  .room-device-filters {
    grid-template-columns: 1fr;
  }

  .room-zone-form {
    grid-template-columns: 1fr;
  }

  .room-zone-form .span-2 {
    grid-column: auto;
  }

  .room-bound-toolbar label {
    grid-template-columns: 1fr;
    width: 100%;
  }
}
/* Prepaid tenant management workbench */
body[data-route="prepaid-tenants"] #viewHost .prepaid-tenant-workbench {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: calc(100vh - 118px);
  padding: 0 8px 14px;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-management-toolbar {
  display: grid;
  grid-template-columns: minmax(170px, 1.1fr) minmax(190px, 1.1fr) minmax(150px, 0.8fr) minmax(260px, 1.2fr) auto auto auto auto auto minmax(90px, auto);
  gap: 10px;
  align-items: end;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-management-toolbar label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #c8d5eb;
  font-size: 12px;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-management-toolbar .inp,
body[data-route="prepaid-tenants"] #viewHost .tenant-dialog .inp,
body[data-route="prepaid-tenants"] #viewHost .tenant-pagination .inp {
  height: 34px;
  border: 1px solid rgba(90, 116, 156, 0.48);
  border-radius: 4px;
  background: rgba(6, 15, 31, 0.72);
  color: #dce8ff;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-balance-range {
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-balance-range > span,
body[data-route="prepaid-tenants"] #viewHost .tenant-balance-range > label {
  display: none;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-balance-range::before {
  content: "余额范围";
  grid-column: 1 / -1;
  color: #c8d5eb;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-toolbar-total {
  color: #8fa6c8;
  font-size: 12px;
  white-space: nowrap;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-table-panel {
  min-height: 390px;
  border: 1px solid rgba(78, 100, 134, 0.38);
  border-radius: 4px;
  background: rgba(16, 27, 47, 0.74);
  overflow-x: auto;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-table {
  width: 100%;
  min-width: max(100%, 74rem);
  border-collapse: collapse;
  font-size: 12px;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-table th,
body[data-route="prepaid-tenants"] #viewHost .tenant-table td {
  height: 40px;
  padding: 0 10px;
  border-bottom: 1px solid rgba(74, 94, 126, 0.28);
  color: #cdd8eb;
  text-align: left;
  white-space: nowrap;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-table th {
  background: rgba(37, 50, 73, 0.95);
  color: #dce7f8;
  font-weight: 700;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-table tr.lk:nth-child(even) td {
  background: rgba(30, 41, 59, 0.76);
}

body[data-route="prepaid-tenants"] #viewHost .tenant-table tr.lk:nth-child(odd) td {
  background: rgba(5, 12, 27, 0.78);
}

body[data-route="prepaid-tenants"] #viewHost .tenant-table tr.lk:hover td {
  background: rgba(34, 55, 90, 0.84);
}

body[data-route="prepaid-tenants"] #viewHost .tenant-table th:first-child,
body[data-route="prepaid-tenants"] #viewHost .tenant-table td:first-child {
  width: 34px;
  text-align: center;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-table th:last-child,
body[data-route="prepaid-tenants"] #viewHost .tenant-table td:last-child {
  width: 330px;
}

body[data-route="prepaid-tenants"] #viewHost .tenantops {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
}

body[data-route="prepaid-tenants"] #viewHost .tenantops button,
body[data-route="prepaid-tenants"] #viewHost .tenant-alert-link {
  border: 0;
  padding: 0;
  background: transparent;
  color: #2785ff;
  font: inherit;
  cursor: pointer;
}

body[data-route="prepaid-tenants"] #viewHost .tenantops button.danger {
  color: #ff4b55;
}

body[data-route="prepaid-tenants"] #viewHost .tenantalert {
  min-height: 46px;
  border: 1px solid rgba(255, 177, 61, 0.28);
  border-radius: 4px;
  padding: 0 14px;
  background: #fff5d9;
  color: #9b6a00;
}

body[data-route="prepaid-tenants"] #viewHost .tenantalert b {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #ffbd1d;
  color: white;
}

body[data-route="prepaid-tenants"] #viewHost .tenantalert small {
  color: #7c5d14;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-pagination {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  color: #aebbd1;
  font-size: 12px;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-pagination .tenant-page-input {
  width: 48px;
  text-align: center;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.58);
}

body[data-route="prepaid-tenants"] #viewHost .tenant-modal-backdrop[hidden],
body[data-route="prepaid-tenants"] #viewHost .tenant-room-drawer[hidden] {
  display: none;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-dialog {
  width: min(560px, calc(100vw - 36px));
  border: 1px solid rgba(73, 93, 125, 0.66);
  border-radius: 8px;
  padding: 20px;
  background: #1e293b;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
  color: #dce7f8;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-transactions-dialog {
  width: min(980px, calc(100vw - 48px));
}

body[data-route="prepaid-tenants"] #viewHost .tenant-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-dialog-head h3 {
  margin: 0;
  font-size: 18px;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-dialog-head button {
  border: 0;
  background: transparent;
  color: #dce7f8;
  font-size: 22px;
  cursor: pointer;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-dialog label {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
  color: #dce7f8;
  font-size: 13px;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-dialog label i {
  color: #ff4b55;
  font-style: normal;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-dialog-actions,
body[data-route="prepaid-tenants"] #viewHost .tenant-room-drawer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-date-range {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-detail-grid {
  display: grid;
  grid-template-columns: 130px 1fr 130px 1fr;
  gap: 16px 18px;
  margin: 0;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-detail-grid dt {
  color: #b7c5dc;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-detail-grid dd {
  margin: 0;
  color: #f5f8ff;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-transaction-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-transaction-table th,
body[data-route="prepaid-tenants"] #viewHost .tenant-transaction-table td {
  height: 38px;
  padding: 0 10px;
  border-bottom: 1px solid rgba(76, 96, 128, 0.32);
  color: #dce7f8;
  text-align: left;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-transaction-table th {
  background: rgba(35, 49, 72, 0.92);
}

body[data-route="prepaid-tenants"] #viewHost .tenant-room-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 82;
  width: min(390px, 88vw);
  display: flex;
  flex-direction: column;
  padding: 22px;
  border-left: 1px solid rgba(90, 112, 146, 0.56);
  background: #1e293b;
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.36);
  color: #dce7f8;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-room-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-room-drawer-head h3 {
  margin: 0;
  font-size: 18px;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-room-drawer-head button {
  border: 0;
  background: transparent;
  color: #dce7f8;
  font-size: 24px;
  cursor: pointer;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-room-drawer-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 12px;
  color: #9fb0cb;
  font-size: 12px;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-room-tree {
  display: grid;
  gap: 9px;
  overflow-y: auto;
  padding-right: 4px;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-room-tree-row {
  display: grid;
  grid-template-columns: 16px 18px 1fr;
  gap: 8px;
  align-items: center;
  border-radius: 4px;
  padding: 5px 2px;
  color: #dce7f8;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-room-tree-row small {
  grid-column: 3;
  color: #92a6c6;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-room-tree-row.active {
  background: rgba(43, 111, 255, 0.16);
}

@media (max-width: 767px) {
  body[data-route="prepaid-tenants"] #viewHost .tenant-management-toolbar {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }
}

@media (max-width: 767px) {
  body[data-route="prepaid-tenants"] #viewHost .tenant-management-toolbar,
  body[data-route="prepaid-tenants"] #viewHost .tenant-dialog label,
  body[data-route="prepaid-tenants"] #viewHost .tenant-detail-grid {
    grid-template-columns: 1fr;
  }
}

body[data-route="prepaid-tenants"] #viewHost .tenant-balance-range::before {
  display: none;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-balance-range > em {
  grid-column: 1 / -1;
  color: #c8d5eb;
  font-style: normal;
}

body[data-route="prepaid-tenants"] #viewHost .tenant-balance-range > .tenant-range-sep {
  display: inline;
  align-self: center;
  color: #8fa6c8;
}

.project-meters-page [hidden] {
  display: none !important;
}

.project-meters-page .meter-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  margin: 0 0 14px;
}

.project-meters-page .meter-toolbar label {
  color: #c4ccda;
  font-size: 13px;
  white-space: nowrap;
}

.project-meters-page .meter-select,
.project-meters-page .meter-page-input,
.project-meters-page .meter-modal .inp,
.project-meters-page .meter-binding-filters .meter-select {
  box-sizing: border-box;
  height: 36px;
  border: 1px solid #33425d;
  border-radius: 6px;
  padding: 0 12px;
  color: #dce6f8;
  background: #0c172b;
  font: 13px/1.4 "Segoe UI", "Microsoft YaHei", sans-serif;
  outline: 0;
}

.project-meters-page .meter-toolbar .meter-select:first-of-type {
  width: 300px;
}

.project-meters-page .meter-toolbar .meter-select:nth-of-type(2) {
  width: 220px;
}

.project-meters-page .btn {
  min-height: 34px;
  border: 1px solid #2f55a2;
  border-radius: 5px;
  padding: 7px 14px;
  color: #dbe8ff;
  background: #253455;
  font-size: 12px;
  line-height: 1;
}

.project-meters-page .btn.pri {
  border-color: #1f6dff;
  background: #1765f5;
  color: #fff;
}

.project-meters-page .btn.danger {
  border-color: #ff443a;
  background: #ff3b30;
  color: #fff;
}

.project-meters-page .btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.project-meters-page .meteralert {
  display: flex;
  align-items: center;
  min-height: 38px;
  border: 1px solid #f1dba6;
  border-radius: 5px;
  margin: 0 0 10px;
  padding: 0 18px;
  color: #d99500;
  background: #fff7df;
  font-size: 12px;
}

.project-meters-page .meter-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(290px, 1fr));
  gap: 12px;
  align-items: start;
}

.project-meters-page .meter-management-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid #27364e;
  border-radius: 12px;
  padding: 24px 18px 16px;
  background: #1a2537;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.project-meters-page .meter-management-card h3 {
  margin: -4px 0 12px 28px;
  color: #eef5ff;
  font-size: 22px;
  line-height: 1.15;
}

.project-meters-page .meter-card-top {
  position: absolute;
  inset: 16px 16px auto 16px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.project-meters-page .meter-card-top input,
.project-meters-page .meter-card-top button {
  pointer-events: auto;
}

.project-meters-page input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #1f6dff;
}

.project-meters-page .meter-card-open {
  border: 0;
  color: #b7c1d4;
  background: transparent;
  font-size: 21px;
  line-height: 1;
}

.project-meters-page .meter-info-list {
  display: grid;
  grid-template-columns: 122px minmax(0, 1fr);
  gap: 4px 10px;
  margin: 26px 0 0;
  color: #cad3e4;
  font-size: 12px;
}

.project-meters-page .meter-management-card h3 + .meter-info-list {
  margin-top: 0;
}

.project-meters-page .meter-info-list dt {
  color: #aeb9ca;
}

.project-meters-page .meter-info-list dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  color: #d7dfec;
  text-align: right;
}

/* Confirmed node-management health-matrix layout. The application shell remains untouched. */
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-management-page {
  min-height: 0;
  padding: 12px 10px 18px;
  color: var(--text);
  background: transparent;
}

body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-workspace-heading,
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-list-heading,
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-workspace-heading {
  padding: 0 2px 9px;
}

body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-heading-copy h2,
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-list-heading h3,
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-section-heading h3 {
  margin: 0;
  color: #142a4b;
  font-weight: 750;
}

body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-heading-copy h2 { font-size: 22px; line-height: 30px; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost :is(.node-heading-copy p, .node-list-heading p, .node-section-heading p) { margin: 3px 0 0; color: #6e7f99; font-size: 13px; line-height: 20px; }

body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-status-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 13px;
  color: #667a98;
  font-size: 13px;
  line-height: 24px;
}

body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-status-strip b { margin-left: 3px; color: #2362bf; font-weight: 750; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-status-strip .is-warn b { color: #dc7a1f; }

body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-host-toolbar {
  min-height: 52px;
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px solid #e4ebf5;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(44, 78, 128, 0.04);
  color: #526986;
}

body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-host-toolbar label { color: #526986; font-weight: 600; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-host-toolbar .inp {
  height: 36px;
  border-color: #cbd9ee;
  border-radius: 7px;
  color: #223b61;
  background: #fff;
}
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-host-toolbar .node-reset-button { border-color: #d5dfed; background: #f7f9fc; color: #4a617f; }

body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-management-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 360px);
  align-items: start;
  gap: 12px;
}
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-primary-column { min-width: 0; display: grid; gap: 12px; }

body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost :is(.node-health-panel, .node-list-panel, .node-inspector) {
  min-width: 0;
  border: 1px solid #e2eaf5;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(44, 78, 128, 0.055);
}
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-health-panel { padding: 14px; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-section-heading > span,
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-list-heading > span { color: #6c7f9a; font-size: 12px; line-height: 22px; white-space: nowrap; }

body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-health-matrix {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-health-card {
  position: relative;
  min-height: 76px;
  padding: 14px 14px 12px 18px;
  overflow: hidden;
  border: 1px solid #e6edf7;
  border-radius: 10px;
  background: #fbfdff;
}
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-health-card::before {
  position: absolute;
  top: 18px;
  left: 0;
  width: 3px;
  height: 38px;
  border-radius: 0 3px 3px 0;
  background: #397bdb;
  content: "";
}
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-health-card span { display: block; color: #7587a1; font-size: 12px; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-health-card strong { display: block; margin-top: 7px; color: #16335c; font-size: 22px; line-height: 24px; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-health-card.ok::before { background: #23ad74; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-health-card.warn::before { background: #e6a333; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-health-card.off::before { background: #ed5e65; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-health-card.rate::before { background: #5d79ef; }

body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-list-panel { padding: 14px; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-card-stage { min-height: 0; margin-top: 12px; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .gateway-node-card {
  min-height: 164px;
  padding: 52px 14px 14px;
  border-color: #dce7f4;
  border-radius: 10px;
  color: #294564;
  background: #fff;
  box-shadow: none;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .gateway-node-card:hover { border-color: #a7c8fc; box-shadow: 0 8px 18px rgba(42, 102, 190, 0.08); transform: translateY(-1px); }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .gateway-node-card.is-selected { border-color: #2d74f2; box-shadow: 0 0 0 2px rgba(45, 116, 242, 0.12); }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .gateway-node-card.off { border-color: #f4d8db; background: #fffafb; }

body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-card-title {
  top: 14px;
  right: 12px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: none;
  color: #17345d;
  font-size: 15px;
  line-height: 22px;
}
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-card-title > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-select-control { flex: 0 0 auto; display: inline-flex; align-items: center; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-select-control input { width: 15px; height: 15px; margin: 0; accent-color: #2873f0; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-status-badge { display: inline-flex; align-items: center; gap: 5px; min-width: 0; margin-left: auto; color: #16885a; font-size: 11px; font-style: normal; font-weight: 650; white-space: nowrap; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-status-badge i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-status-badge.warn { color: #d48a1c; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-status-badge.off { color: #dc535b; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-edit-icon { top: 42px; right: 12px; color: #8094b0; font-size: 16px; }

body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-info-list { gap: 3px; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-info-row { grid-template-columns: 62px minmax(0, 1fr); gap: 7px; font-size: 12px; line-height: 17px; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-info-row:nth-child(-n + 4) { display: none; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-info-row span { color: #8293aa; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-info-row b { color: #526986; font-weight: 550; text-align: left; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-card-actions { right: 13px; bottom: 10px; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .nodes-page .node-card-actions .node-restart-button { padding: 2px 0; border: 0; color: #2471e9; background: transparent; font-size: 12px; font-weight: 650; }

body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-selection-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid #dce7f5;
  border-radius: 8px;
  color: #61748f;
  background: #f8fbff;
  font-size: 12px;
}
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-selection-bar label { display: inline-flex; align-items: center; gap: 4px; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-selection-bar input { accent-color: #2873f0; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-batch-restart-button { min-height: 30px; margin-left: auto; border-color: #f0b6ba; color: #d9535b; background: #fff; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-pagination { justify-content: flex-end; margin-top: 0; padding: 13px 0 0; color: #6c7f99; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-pagination .inp { border-color: #d7e1ef; color: #3f5777; background: #fff; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost :is(.node-page-button, .node-page-arrow) { border-color: #d7e1ef; color: #58708e; background: #fff; }

body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-inspector { position: sticky; top: 12px; min-height: 540px; overflow: hidden; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-inspector-detail { position: relative; padding: 22px 22px 18px; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-inspector-close { position: absolute; top: 13px; right: 14px; width: 28px; height: 28px; border: 0; border-radius: 6px; color: #6d809b; background: #f5f8fc; font-size: 20px; line-height: 25px; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-inspector-heading { padding: 0 32px 16px 0; border-bottom: 1px solid #e8eef6; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-inspector-heading p { margin: 0 0 7px; color: #6c7f99; font-size: 13px; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-inspector-heading h3 { margin: 0; overflow: hidden; color: #17345d; font-size: 18px; line-height: 25px; text-overflow: ellipsis; white-space: nowrap; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-inspector-heading .node-status-badge { margin: 10px 0 0; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-detail-list { margin: 0; padding: 7px 0; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-detail-list > div { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid #f0f4f9; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-detail-list dt { color: #7a8ca4; font-size: 12px; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-detail-list dd { min-width: 0; margin: 0; overflow: hidden; color: #334d70; font-size: 12px; font-weight: 600; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-inspector-actions { padding-top: 10px; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-inspector-actions .node-restart-button { width: 100%; min-height: 39px; border-color: #f06a70; color: #db4d55; background: #fff; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-inspector-actions p { margin: 9px 0 0; color: #8797ad; font-size: 11px; line-height: 18px; text-align: center; }
body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-inspector-empty { padding: 30px; color: #7a8ca4; font-size: 13px; }

@media (max-width: 1279px) {
  body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-management-layout { grid-template-columns: minmax(0, 1fr); }
  body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-inspector { position: static; min-height: 0; }
  body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-health-matrix { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-management-page { padding: 8px 0 14px; }
  body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost :is(.node-workspace-heading, .node-list-heading, .node-section-heading) { flex-direction: column; gap: 5px; }
  body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-host-toolbar { align-items: stretch; gap: 7px; }
  body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-host-toolbar .inp { flex: 1 1 100%; width: 100%; }
  body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-health-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-health-card:last-child { grid-column: span 2; }
  body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-card-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-selection-bar { flex-wrap: wrap; }
  body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-batch-restart-button { margin-left: 0; }
  body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-pagination { flex-wrap: wrap; justify-content: flex-start; }
}

.project-meters-page .meter-info-list dd.danger {
  color: #ff2020;
  font-weight: 700;
}

.project-meters-page .meter-card-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #27364e;
}

.project-meters-page .meter-card-actions .btn {
  min-height: 30px;
  padding: 6px 11px;
  white-space: nowrap;
}

.project-meters-page .meter-pagination {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  color: #aeb8ca;
  pointer-events: none;
}

.project-meters-page .meter-pagination > * {
  pointer-events: auto;
}

.project-meters-page .meter-pagination .meter-select {
  width: 102px;
}

.project-meters-page .meter-page-input {
  width: 48px;
  text-align: center;
}

.project-meters-page .meter-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.58);
}

.project-meters-page .meter-modal-backdrop.fullscreen {
  place-items: stretch;
  padding: 0;
  background: #1b2536;
}

.project-meters-page .meter-modal,
.project-meters-page .meter-binding-modal {
  box-sizing: border-box;
  color: #dce4f2;
  background: #1b2536;
}

.project-meters-page .meter-modal {
  width: min(604px, calc(100vw - 32px));
  border-radius: 12px;
  padding: 20px 20px 16px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.38);
}

.project-meters-page .meter-modal header,
.project-meters-page .meter-binding-modal header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.project-meters-page .meter-modal h2,
.project-meters-page .meter-binding-modal h2 {
  margin: 0;
  color: #f2f6ff;
  font-size: 18px;
}

.project-meters-page .meter-modal header button,
.project-meters-page .meter-binding-modal header button {
  border: 0;
  color: #c5cedd;
  background: transparent;
  font-size: 24px;
}

.project-meters-page .meter-form-grid {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 16px 12px;
  align-items: center;
}

.project-meters-page .meter-form-grid label {
  display: contents;
  color: #e2e8f5;
  font-size: 14px;
}

.project-meters-page .meter-form-grid label.required::before {
  content: "*";
  color: #ff5d5d;
}

.project-meters-page .meter-form-grid label::before {
  content: "";
  justify-self: end;
}

.project-meters-page .meter-form-grid label.required {
  color: #e2e8f5;
}

.project-meters-page .meter-form-grid label > .inp,
.project-meters-page .meter-form-grid label > select,
.project-meters-page .meter-form-grid label > input,
.project-meters-page .meter-form-grid label > textarea {
  grid-column: 2;
  width: 100%;
}

.project-meters-page .meter-form-grid textarea.inp {
  height: 108px;
  padding: 11px 12px;
  resize: vertical;
}

.project-meters-page .meter-bulk-field {
  grid-column: 1 / -1;
}

.project-meters-page .meter-editor-tip {
  margin: 12px 0 0 130px;
  color: #ff2020;
  font-size: 13px;
}

.project-meters-page .meter-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.project-meters-page .meter-binding-modal {
  width: 100%;
  min-height: 100vh;
  padding: 20px 24px;
}

.project-meters-page .meter-binding-modal header {
  justify-content: center;
  position: relative;
}

.project-meters-page .meter-binding-modal header button {
  position: absolute;
  right: 0;
  top: -2px;
}

.project-meters-page .meter-binding-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 106px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.project-meters-page .meter-binding-workbench h3 {
  margin: 0 0 14px;
  color: #eef4ff;
  font-size: 14px;
  font-weight: 500;
}

.project-meters-page .meter-binding-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 1fr)) 74px;
  gap: 68px;
  margin-bottom: 20px;
}

.project-meters-page [data-meter-modal="system-binding"] .meter-binding-filters {
  grid-template-columns: 280px 1fr;
  gap: 16px;
  align-items: center;
}

.project-meters-page .meter-current-count {
  justify-self: end;
  color: #dfe7f5;
}

.project-meters-page .meter-binding-table {
  width: 100%;
  border-collapse: collapse;
  color: #d3dcec;
  font-size: 13px;
}

.project-meters-page .meter-binding-table th,
.project-meters-page .meter-binding-table td {
  height: 40px;
  border-bottom: 1px solid #2d3a51;
  padding: 0 10px;
  text-align: center;
}

.project-meters-page .meter-binding-table th {
  color: #cbd6e8;
  background: #202c40;
  font-weight: 600;
}

.project-meters-page .meter-binding-table tbody tr:nth-child(odd) {
  background: #091125;
}

.project-meters-page .meter-binding-table tbody tr:nth-child(even) {
  background: #1b2536;
}

.project-meters-page .meter-transfer-actions {
  display: grid;
  gap: 100px;
  justify-items: center;
  align-content: start;
  padding-top: 174px;
}

.project-meters-page .meter-binding-empty {
  display: grid;
  min-height: 240px;
  place-items: center;
  color: #d0d8e6;
}

@media (max-width: 767px) {
  .project-meters-page .meter-card-grid {
    grid-template-columns: repeat(3, minmax(280px, 1fr));
  }
}

@media (max-width: 767px) {
  .project-meters-page .meter-card-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }

  .project-meters-page .meter-binding-workbench {
    grid-template-columns: 1fr;
  }

  .project-meters-page .meter-transfer-actions {
    grid-template-columns: repeat(2, auto);
    gap: 12px;
    justify-content: center;
    padding-top: 0;
  }
}

@media (max-width: 720px) {
  .project-meters-page .meter-toolbar,
  .project-meters-page .meter-card-actions,
  .project-meters-page .meter-binding-filters {
    display: grid;
    grid-template-columns: 1fr;
  }

  .project-meters-page .meter-toolbar .meter-select,
  .project-meters-page .meter-toolbar .meter-select:first-of-type,
  .project-meters-page .meter-toolbar .meter-select:nth-of-type(2) {
    width: 100%;
  }

  .project-meters-page .meter-card-grid {
    grid-template-columns: 1fr;
  }

  .project-meters-page .meter-form-grid {
    grid-template-columns: 1fr;
  }

  .project-meters-page .meter-form-grid label > .inp,
  .project-meters-page .meter-form-grid label > select,
  .project-meters-page .meter-form-grid label > input,
  .project-meters-page .meter-form-grid label > textarea {
    grid-column: 1;
  }

  .project-meters-page .meter-editor-tip {
    margin-left: 0;
  }
}
.project-meters-page .meter-form-grid label {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.project-meters-page .meter-form-grid label::before,
.project-meters-page .meter-form-grid label.required::before {
  content: none;
}

.project-meters-page .meter-form-grid label.required {
  color: #e2e8f5;
}

.project-meters-page .meter-form-grid label.required::first-letter {
  color: #ff5d5d;
}

.project-meters-page .meter-form-grid label > .inp,
.project-meters-page .meter-form-grid label > select,
.project-meters-page .meter-form-grid label > input,
.project-meters-page .meter-form-grid label > textarea {
  grid-column: auto;
  width: 100%;
}

/* billing-query-board visual refresh */
body[data-route="billing"] #viewHost .billing-query-board .feelayout {
  grid-template-columns: 306px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

body:is([data-route="billing"], [data-route="daily-usage"]) #viewHost .billing-building-tree {
  min-height: calc(100vh - 104px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px 20px 18px;
  background: var(--surface-panel-strong);
  box-shadow: none;
}

body:is([data-route="billing"], [data-route="daily-usage"]) #viewHost .billing-building-tree .control-tree-title {
  align-items: center;
  margin-bottom: 12px;
  padding-left: 2px;
}

body:is([data-route="billing"], [data-route="daily-usage"]) #viewHost .billing-building-tree .control-tree-title h3 {
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 500;
}

body:is([data-route="billing"], [data-route="daily-usage"]) #viewHost .billing-building-tree .control-tree-title h3::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 16px;
  margin-right: 8px;
  border-radius: 3px;
  vertical-align: -3px;
  background: var(--accent-cyan);
}

body:is([data-route="billing"], [data-route="daily-usage"]) #viewHost .billing-building-tree .control-tree-title span {
  color: var(--muted);
  font-size: 11px;
}

body:is([data-route="billing"], [data-route="daily-usage"]) #viewHost .billing-building-tree .control-tree-toolbar {
  margin-bottom: 10px;
}

body:is([data-route="billing"], [data-route="daily-usage"]) #viewHost .billing-building-tree .control-search {
  display: block;
  width: 100%;
  height: 32px;
  border-color: var(--line);
  background: var(--surface-input);
}

body:is([data-route="billing"], [data-route="daily-usage"]) #viewHost .billing-control-tree {
  display: grid;
  gap: 3px;
  max-height: calc(100vh - 188px);
  overflow: auto;
  padding-right: 2px;
}

body:is([data-route="billing"], [data-route="daily-usage"]) #viewHost .billing-building-tree .control-tree-node {
  min-height: 28px;
  cursor: pointer;
}

body:is([data-route="billing"], [data-route="daily-usage"]) #viewHost .billing-building-tree .control-tree-primary {
  grid-template-columns: 14px 14px minmax(0, 1fr);
  gap: 7px;
}

body:is([data-route="billing"], [data-route="daily-usage"]) #viewHost .billing-building-tree .control-tree-check {
  width: 14px;
  height: 14px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, 0.7);
  border-radius: 3px;
  padding: 0;
  color: #fff;
  background: #f8fafc;
  cursor: pointer;
  box-shadow: none;
}

body:is([data-route="billing"], [data-route="daily-usage"]) #viewHost .billing-building-tree .control-tree-check[aria-checked="true"] {
  border-color: var(--accent-blue);
  background: var(--accent-blue);
}

body:is([data-route="billing"], [data-route="daily-usage"]) #viewHost .billing-building-tree .control-tree-check-mark {
  opacity: 0;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  transform: scale(0.82);
}

body:is([data-route="billing"], [data-route="daily-usage"]) #viewHost .billing-building-tree .control-tree-check[aria-checked="true"] .control-tree-check-mark {
  opacity: 1;
  transform: scale(1);
}

body:is([data-route="billing"], [data-route="daily-usage"]) #viewHost .billing-building-tree .control-tree-node.on,
body:is([data-route="billing"], [data-route="daily-usage"]) #viewHost .billing-building-tree .control-tree-node:hover {
  color: var(--text);
  background: var(--overlay-blue-faint);
}

body:is([data-route="billing"], [data-route="daily-usage"]) #viewHost .billing-building-tree .control-tree-name-input {
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 500;
}

body:is([data-route="billing"], [data-route="daily-usage"]) #viewHost .billing-building-tree .control-tree-node.on .control-tree-name-input {
  color: var(--text);
}

body:is([data-route="billing"], [data-route="daily-usage"]) #viewHost .billing-building-tree .control-tree-secondary {
  padding-left: 35px;
}

body[data-route="billing"] #viewHost .billing-results-shell {
  min-width: 0;
}

body[data-route="billing"] #viewHost .billing-query-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  min-height: 36px;
  margin: 0 0 14px;
}

body[data-route="billing"] #viewHost .billing-query-toolbar label,
body[data-route="billing"] #viewHost .billing-date-sep {
  color: var(--text-soft);
  font-size: 12px;
  white-space: nowrap;
}

body[data-route="billing"] #viewHost .billing-query-toolbar .inp {
  width: 224px;
  min-width: 0;
  height: 34px;
  border-color: var(--line);
  background: var(--surface-input);
}

body[data-route="billing"] #viewHost .billing-query-toolbar .btn {
  min-width: 72px;
  height: 34px;
  border-radius: 4px;
  padding: 0 14px;
  font-size: 12px;
}

body[data-route="billing"] #viewHost .billing-query-toolbar .btn.primary {
  background: var(--accent-blue);
}

body[data-route="billing"] #viewHost .billing-results-shell .billing-table-card {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

body[data-route="billing"] #viewHost .billing-tenant-table {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}

body[data-route="billing"] #viewHost .billing-tenant-table th,
body[data-route="billing"] #viewHost .billing-tenant-table td {
  height: 36px;
  border: 0;
  padding: 0 12px;
  vertical-align: middle;
}

body[data-route="billing"] #viewHost .billing-tenant-table th {
  height: 42px;
  color: var(--text-bar);
  background: var(--surface-action);
  font-weight: 600;
}

body[data-route="billing"] #viewHost .billing-tenant-table td {
  color: var(--text-soft);
}

body[data-route="billing"] #viewHost .billing-tenant-table tbody tr:nth-child(even) td {
  background: var(--surface-panel-muted);
}

body[data-route="billing"] #viewHost .billing-tenant-table tbody tr:nth-child(odd) td {
  background: transparent;
}

body[data-route="billing"] #viewHost .billing-tenant-table tr.lk:hover td,
body[data-route="billing"] #viewHost .billing-tenant-table tr.lk.on td {
  background: var(--overlay-blue-strong);
}

body[data-route="billing"] #viewHost .billing-tenant-table th:first-child,
body[data-route="billing"] #viewHost .billing-tenant-table td:first-child {
  width: 13%;
  padding-left: 20px;
}

body[data-route="billing"] #viewHost .billing-tenant-table th:nth-child(2),
body[data-route="billing"] #viewHost .billing-tenant-table td:nth-child(2) {
  width: 24%;
}

body[data-route="billing"] #viewHost .billing-tenant-table th:nth-child(3),
body[data-route="billing"] #viewHost .billing-tenant-table td:nth-child(3) {
  width: 28%;
}

body[data-route="billing"] #viewHost .billing-tenant-table th:nth-child(4),
body[data-route="billing"] #viewHost .billing-tenant-table td:nth-child(4),
body[data-route="billing"] #viewHost .billing-tenant-table th:nth-child(5),
body[data-route="billing"] #viewHost .billing-tenant-table td:nth-child(5) {
  width: 17.5%;
  text-align: center;
}

body[data-route="billing"] #viewHost .billing-table-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: calc(100vh - 638px);
  min-height: 34px;
  color: var(--text-soft);
  font-size: 12px;
}

body[data-route="billing"] #viewHost .billing-table-pagination .inp {
  width: 102px;
  height: 30px;
}

body[data-route="billing"] #viewHost .billing-table-pagination .billing-page-input {
  width: 46px;
  text-align: center;
}

body[data-route="billing"] #viewHost .billing-table-pagination .btn {
  min-width: 32px;
  height: 30px;
  border-radius: 4px;
  padding: 0 9px;
}

body[data-route="billing"] #viewHost .billing-table-pagination .billing-page-ellipsis {
  min-width: 28px;
  text-align: center;
}

body[data-route="billing"] #viewHost .billing-table-pagination small {
  color: var(--muted);
}

@media (max-width: 767px) {
  body[data-route="billing"] #viewHost .billing-query-board .feelayout {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  body:is([data-route="billing"], [data-route="daily-usage"]) #viewHost .billing-building-tree {
    min-height: 260px;
  }

  body[data-route="billing"] #viewHost .billing-query-toolbar {
    flex-wrap: wrap;
  }

  body[data-route="billing"] #viewHost .billing-query-toolbar .inp {
    width: min(100%, 220px);
  }

  body[data-route="billing"] #viewHost .billing-table-pagination {
    flex-wrap: wrap;
    margin-top: 18px;
  }
}


/* Daily usage ledger page: competitor-style tree + allocation table. */
body[data-route="daily-usage"] #viewHost .daily-ledger-layout {
  grid-template-columns: 300px minmax(0, 1fr);
  min-height: calc(100vh - 132px);
}

body[data-route="daily-usage"] #viewHost .daily-ledger-main {
  align-content: start;
  gap: 14px;
}

body[data-route="daily-usage"] #viewHost .daily-building-tree {
  min-height: calc(100vh - 128px);
  max-height: calc(100vh - 92px);
  overflow: hidden;
}

body[data-route="daily-usage"] #viewHost .daily-control-tree {
  max-height: calc(100vh - 220px);
}

body[data-route="daily-usage"] #viewHost .control-tree-children[hidden] {
  display: none;
}

body[data-route="daily-usage"] #viewHost .daily-tree-level-floor {
  padding-left: 14px;
}

body[data-route="daily-usage"] #viewHost .daily-tree-level-room {
  padding-left: 28px;
}

body[data-route="daily-usage"] #viewHost .daily-tree-empty {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-height: 30px;
  padding: 6px 8px;
  color: var(--muted);
}

body[data-route="daily-usage"] #viewHost .daily-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 0;
}

body[data-route="daily-usage"] #viewHost .daily-filters .field {
  min-height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
}

body[data-route="daily-usage"] #viewHost .daily-filters .wide {
  width: 260px;
}

body[data-route="daily-usage"] #viewHost .daily-ledger-table {
  min-height: 486px;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  background: rgba(24, 35, 54, 0.92);
}

body[data-route="daily-usage"] #viewHost .daily-ledger-table .pt {
  padding: 13px 14px 0;
}

body[data-route="daily-usage"] #viewHost .daily-ledger-table .empty {
  margin: 0;
  min-height: 72px;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

body[data-route="daily-usage"] #viewHost .use-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

body[data-route="daily-usage"] #viewHost .use-table th,
body[data-route="daily-usage"] #viewHost .use-table td {
  height: 42px;
  padding: 0 12px;
  border: 0;
  border-bottom: 1px solid rgba(70, 140, 235, 0.14);
  background: transparent;
  color: #cfe0ff;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-route="daily-usage"] #viewHost .use-table th {
  color: #dbe7ff;
  background: rgba(35, 49, 72, 0.92);
  font-weight: 700;
}

body[data-route="daily-usage"] #viewHost .use-table td:nth-child(1),
body[data-route="daily-usage"] #viewHost .use-table th:nth-child(1) {
  width: 72px;
}

body[data-route="daily-usage"] #viewHost .use-table td:nth-child(5),
body[data-route="daily-usage"] #viewHost .use-table th:nth-child(5),
body[data-route="daily-usage"] #viewHost .use-table td:nth-child(6),
body[data-route="daily-usage"] #viewHost .use-table th:nth-child(6) {
  width: 120px;
}

body[data-route="daily-usage"] #viewHost .use-table td:nth-child(7),
body[data-route="daily-usage"] #viewHost .use-table th:nth-child(7) {
  width: 150px;
}

body[data-route="daily-usage"] #viewHost .use-table tr.lk.on td,
body[data-route="daily-usage"] #viewHost .use-table tr.lk:hover td {
  background: rgba(47, 139, 255, 0.12);
}

body[data-route="daily-usage"] #viewHost .usekwh,
body[data-route="daily-usage"] #viewHost .usemoney {
  color: #7df2c8;
  font-weight: 700;
}

body[data-route="daily-usage"] #viewHost .daily-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  color: #cfe0ff;
  font-size: 12px;
}

body[data-route="daily-usage"] #viewHost .daily-pager .inp {
  width: 48px;
  height: 28px;
  min-height: 28px;
  text-align: center;
}

body[data-route="daily-usage"] #viewHost .daily-pager b {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 28px;
  border-radius: 3px;
  color: #fff;
  background: #1d63e6;
}

@media (max-width: 767px) {
  body[data-route="daily-usage"] #viewHost .daily-ledger-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-route="daily-usage"] #viewHost .daily-building-tree {
    min-height: 360px;
    max-height: none;
  }
}

body[data-route="meter-readings"] #viewHost .readbody {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}

body[data-route="meter-readings"] #viewHost .readtable {
  grid-column: 1 / -1;
  width: 100%;
  overflow: auto;
}

body[data-route="meter-readings"] #viewHost .read-table {
  width: 100%;
  table-layout: fixed;
}

body[data-route="meter-readings"] .read-detail-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 32px;
  background: rgba(2, 8, 23, 0.68);
}

body[data-route="meter-readings"] .read-detail-modal[hidden] {
  display: none;
}

body[data-route="meter-readings"] .read-detail-dialog {
  position: relative;
  width: min(760px, 92vw);
  max-height: 88vh;
  overflow: auto;
  border: 1px solid rgba(45, 212, 191, 0.32);
  border-radius: 12px;
  background: #071426;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  padding: 24px;
}

body[data-route="meter-readings"] .read-detail-close {
  cursor: pointer;
}

body[data-route="meter-readings"] .read-detail-dialog header {
  margin: 0 40px 18px 0;
}

body[data-route="meter-readings"] .read-detail-dialog header small,
body[data-route="meter-readings"] .read-detail-grid small,
body[data-route="meter-readings"] .read-detail-summary small {
  color: #93a4bd;
}

body[data-route="meter-readings"] .read-detail-dialog h3 {
  margin: 6px 0;
  font-size: 24px;
  color: #67f5d4;
}

body[data-route="meter-readings"] .read-detail-dialog p {
  margin: 0;
  color: #cbd5e1;
}

body[data-route="meter-readings"] .read-detail-summary,
body[data-route="meter-readings"] .read-detail-grid {
  display: grid;
  gap: 12px;
}

body[data-route="meter-readings"] .read-detail-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 14px;
}

body[data-route="meter-readings"] .read-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-route="meter-readings"] .read-detail-summary > div,
body[data-route="meter-readings"] .read-detail-grid > div,
body[data-route="meter-readings"] .read-detail-note {
  border: 1px solid rgba(30, 64, 175, 0.32);
  border-radius: 8px;
  background: rgba(8, 19, 37, 0.78);
  padding: 12px;
}

body[data-route="meter-readings"] .read-detail-summary b,
body[data-route="meter-readings"] .read-detail-grid b {
  display: block;
  margin-top: 5px;
  color: #f8fafc;
}

body[data-route="meter-readings"] .read-detail-note {
  margin-top: 14px;
  display: grid;
  gap: 6px;
  color: #cbd5e1;
}

@media (max-width: 760px) {
  body[data-route="meter-readings"] .read-detail-summary,
  body[data-route="meter-readings"] .read-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* Runtime records ledger layout aligned to the electricity runtime query reference. */
body[data-route="runtime-records"] #viewHost .runtime-ledger-layout {
  display: grid !important;
  grid-template-columns: 310px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: stretch;
  min-height: calc(100vh - 118px);
}

body[data-route="runtime-records"] #viewHost .runtime-main {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  gap: 12px !important;
  min-width: 0;
}

body[data-route="runtime-records"] #viewHost .runtime-tree {
  min-height: calc(100vh - 132px);
  overflow: hidden;
}

body[data-route="runtime-records"] #viewHost .runtime-filters {
  display: flex !important;
  gap: 10px !important;
  align-items: end;
  flex-wrap: wrap;
  margin: 0 !important;
}

body[data-route="runtime-records"] #viewHost .runtime-filters .field {
  min-width: 176px;
}

body[data-route="runtime-records"] #viewHost .runtime-filters .field:first-child {
  min-width: 260px;
}

body[data-route="runtime-records"] #viewHost .runtime-filters label {
  white-space: nowrap;
}

body[data-route="runtime-records"] #viewHost .runtime-filters .btn {
  height: 34px;
  min-height: 34px;
}

body[data-route="runtime-records"] #viewHost .runbody {
  display: block !important;
  min-width: 0;
}

body[data-route="runtime-records"] #viewHost .runtable {
  min-height: 104px;
  padding: 0 !important;
  overflow-x: auto !important;
}

body[data-route="runtime-records"] #viewHost .run-table {
  width: 100%;
  min-width: 1080px;
  table-layout: fixed !important;
}

body[data-route="runtime-records"] #viewHost .run-table th,
body[data-route="runtime-records"] #viewHost .run-table td {
  height: 40px;
  padding: 0 14px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-route="runtime-records"] #viewHost .run-table th:nth-child(1),
body[data-route="runtime-records"] #viewHost .run-table td:nth-child(1) { width: 60px !important; }
body[data-route="runtime-records"] #viewHost .run-table th:nth-child(2),
body[data-route="runtime-records"] #viewHost .run-table td:nth-child(2) { width: 130px !important; }
body[data-route="runtime-records"] #viewHost .run-table th:nth-child(3),
body[data-route="runtime-records"] #viewHost .run-table td:nth-child(3) { width: 160px !important; }
body[data-route="runtime-records"] #viewHost .run-table th:nth-child(4),
body[data-route="runtime-records"] #viewHost .run-table td:nth-child(4) { width: 110px !important; }
body[data-route="runtime-records"] #viewHost .run-table th:nth-child(5),
body[data-route="runtime-records"] #viewHost .run-table td:nth-child(5) { width: 150px !important; }
body[data-route="runtime-records"] #viewHost .run-table th:nth-child(6),
body[data-route="runtime-records"] #viewHost .run-table td:nth-child(6) { width: 100px !important; }
body[data-route="runtime-records"] #viewHost .run-table th:nth-child(7),
body[data-route="runtime-records"] #viewHost .run-table td:nth-child(7) { width: 170px !important; }
body[data-route="runtime-records"] #viewHost .run-table th:nth-child(8),
body[data-route="runtime-records"] #viewHost .run-table td:nth-child(8) { width: 170px !important; }
body[data-route="runtime-records"] #viewHost .run-table th:nth-child(9),
body[data-route="runtime-records"] #viewHost .run-table td:nth-child(9) { width: 130px !important; }

body[data-route="runtime-records"] #viewHost .run-empty-row td {
  height: 62px;
  color: var(--mut);
  text-align: center;
}

/* Runtime records reuses the ac-control building-name tree surface. */
body[data-route="runtime-records"] #viewHost .runtime-control-tree {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 132px);
  overflow: hidden;
}

body[data-route="runtime-records"] #viewHost .runtime-control-tree .control-tree-toolbar {
  margin-top: 10px;
}

body[data-route="runtime-records"] #viewHost .runtime-control-tree .control-search {
  display: block;
  width: 100%;
  height: 32px;
  margin: 0 0 8px;
}

body[data-route="runtime-records"] #viewHost .runtime-tree-current {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
}

body[data-route="runtime-records"] #viewHost .runtime-control-tree .control-building-tree {
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

body[data-route="runtime-records"] #viewHost .runtime-control-tree .control-tree-primary {
  grid-template-columns: 14px 14px minmax(0, 1fr);
  gap: 7px;
}

body[data-route="runtime-records"] #viewHost .runtime-control-tree .control-tree-check {
  width: 14px;
  height: 14px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, 0.7);
  border-radius: 3px;
  padding: 0;
  color: #fff;
  background: #f8fafc;
  cursor: pointer;
  box-shadow: none;
}

body[data-route="runtime-records"] #viewHost .runtime-control-tree .control-tree-check[aria-checked="true"] {
  border-color: var(--accent-blue);
  background: var(--accent-blue);
}

body[data-route="runtime-records"] #viewHost .runtime-control-tree .control-tree-check-mark {
  opacity: 0;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  transform: scale(0.82);
}

body[data-route="runtime-records"] #viewHost .runtime-control-tree .control-tree-check[aria-checked="true"] .control-tree-check-mark {
  opacity: 1;
  transform: scale(1);
}
body[data-route="runtime-records"] #viewHost .runtime-control-tree .control-tree-node {
  min-height: 28px;
  cursor: pointer;
}

body[data-route="runtime-records"] #viewHost .runtime-control-tree .control-tree-node.on,
body[data-route="runtime-records"] #viewHost .runtime-control-tree .control-tree-node:hover {
  color: var(--text);
  background: var(--overlay-blue-faint);
}

body[data-route="runtime-records"] #viewHost .runtime-control-tree .control-tree-node.on .control-tree-name-input {
  color: var(--text);
}

body[data-route="runtime-records"] #viewHost .runtime-control-tree .control-tree-secondary {
  padding-left: 35px;
}

body[data-route="runtime-records"] #viewHost .runtime-tree-empty {
  display: grid;
  gap: 4px;
  padding: 12px 4px;
  color: var(--muted);
  font-size: 12px;
}

.confirmed-ops .ops-daily-temperature-card {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.confirmed-ops .ops-daily-temperature-toolbar,
.confirmed-ops .ops-daily-temperature-legend,
.confirmed-ops .ops-daily-temperature-selects {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.confirmed-ops .ops-daily-temperature-toolbar {
  justify-content: space-between;
}

.confirmed-ops .ops-daily-temperature-legend {
  flex-wrap: wrap;
  color: var(--text-soft);
  font-size: 11px;
}

.confirmed-ops .ops-daily-temperature-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.confirmed-ops .ops-daily-temperature-legend i {
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: var(--weak);
}

.confirmed-ops .ops-daily-temperature-legend i.outdoor {
  background: var(--heat);
}

.confirmed-ops .ops-daily-temperature-legend i.indoor {
  background: var(--cool);
}

.confirmed-ops .ops-daily-temperature-legend i.desired {
  background: var(--fan);
  background-image: linear-gradient(90deg, var(--fan) 0 55%, transparent 55% 100%);
}

.confirmed-ops .ops-daily-temperature-select {
  height: 28px;
  max-width: 108px;
  border: 1px solid var(--border-muted);
  border-radius: 6px;
  padding: 0 22px 0 8px;
  background: var(--surface-panel-deep);
  color: var(--text-soft);
  font-size: 11px;
}

.confirmed-ops .ops-daily-temperature-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
}

.confirmed-ops .ops-daily-temperature-chart {
  min-width: 0;
  min-height: 166px;
}

.confirmed-ops .ops-temp-grid line {
  stroke: var(--border-muted-faint);
  stroke-dasharray: 4 4;
}

.confirmed-ops .ops-temp-comfort-band {
  fill: rgba(47, 127, 230, 0.07);
}

.confirmed-ops .ops-temp-axis-y text,
.confirmed-ops .ops-temp-axis-x text {
  fill: var(--text-muted);
  font-size: 10px;
}

.confirmed-ops .ops-temp-line.outdoor {
  stroke: var(--heat);
  stroke-width: 1.8;
  opacity: 0.82;
}

.confirmed-ops .ops-temp-line.indoor {
  stroke: var(--cool);
  stroke-width: 2.8;
}

.confirmed-ops .ops-temp-line.desired {
  stroke: var(--fan);
  stroke-width: 2;
  stroke-dasharray: 7 6;
}

.confirmed-ops .ops-temp-point {
  stroke: var(--surface-panel);
  stroke-width: 1.5;
}

.confirmed-ops .ops-temp-point.outdoor { fill: var(--heat); }
.confirmed-ops .ops-temp-point.indoor { fill: var(--cool); }
.confirmed-ops .ops-temp-point.desired { fill: var(--fan); }

.confirmed-ops .ops-temp-sample-point {
  stroke: var(--surface-panel);
  stroke-width: 1.15;
}

.confirmed-ops .ops-temp-sample-point.indoor { fill: var(--cool); }

.confirmed-ops .ops-temp-sample-point.outdoor {
  fill: var(--heat);
  opacity: 0.88;
}

.confirmed-ops .ops-temp-history-note {
  fill: var(--text-muted);
  font-size: 10px;
}

.confirmed-ops .ops-daily-temperature-metrics {
  display: grid;
  gap: 8px;
  align-content: center;
}

.confirmed-ops .ops-daily-temperature-metric {
  display: grid;
  gap: 3px;
  min-width: 0;
  border-left: 1px solid var(--border-muted);
  padding-left: 9px;
}

.confirmed-ops .ops-daily-temperature-metric span {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.confirmed-ops .ops-daily-temperature-metric strong {
  color: var(--text);
  font-size: 19px;
  line-height: 1.05;
}

.confirmed-ops .ops-daily-temperature-metric.active {
  border-left-color: rgba(39, 224, 255, 0.72);
}

.confirmed-ops .ops-daily-temperature-metric.outdoor strong {
  color: var(--heat);
}

.confirmed-ops .ops-daily-temperature-metric.indoor strong {
  color: var(--cool);
}

.confirmed-ops .ops-daily-temperature-metric.desired strong {
  color: var(--fan);
}

.confirmed-ops .ops-temp-empty {
  fill: var(--text-muted);
  font-size: 12px;
}

@media (max-width: 767px) {
  .confirmed-ops .ops-daily-temperature-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .confirmed-ops .ops-daily-temperature-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .confirmed-ops .ops-daily-temperature-metric {
    border-left: 0;
    border-top: 1px solid var(--border-muted);
    padding: 6px 0 0;
  }
}

.confirmed-ops .ops-meter-status-panel {
  min-height: 190px;
}

.confirmed-ops .ops-meter-status-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px;
  gap: 14px;
  align-items: stretch;
  min-width: 0;
}

.confirmed-ops .ops-meter-status-main {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 12px;
  min-width: 0;
}

.confirmed-ops .ops-meter-status-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 13px;
}

.confirmed-ops .ops-meter-status-head i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--warn);
}

.confirmed-ops .ops-meter-status-head i.normal {
  background: var(--fan);
}

.confirmed-ops .ops-meter-status-head i.bad {
  background: var(--heat);
}

.confirmed-ops .ops-meter-status-number {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 8px;
  color: var(--text-muted);
  font-size: 12px;
}

.confirmed-ops .ops-meter-status-number b {
  overflow: hidden;
  color: var(--text-soft);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.confirmed-ops .ops-meter-status-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  border-top: 1px solid var(--border-muted);
  padding-top: 12px;
}

.confirmed-ops .ops-meter-status-values div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.confirmed-ops .ops-meter-status-values div + div {
  border-left: 1px solid var(--border-muted);
  padding-left: 18px;
}

.confirmed-ops .ops-meter-status-values span {
  color: var(--text-muted);
  font-size: 12px;
}

.confirmed-ops .ops-meter-status-values strong {
  color: var(--text);
  font-size: 20px;
  line-height: 1;
}

.confirmed-ops .ops-meter-status-values small {
  margin-left: 4px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
}

.confirmed-ops .ops-meter-status-side {
  display: grid;
  justify-items: end;
  align-content: space-between;
  min-width: 0;
}

.confirmed-ops .ops-meter-visual {
  position: relative;
  width: 70px;
  height: 84px;
  border: 1px solid var(--border-muted);
  border-radius: 12px;
  background: linear-gradient(160deg, var(--surface-panel), var(--surface-panel-deep));
  box-shadow: inset -6px 0 0 var(--border-muted-faint);
}

.confirmed-ops .ops-meter-screen {
  position: absolute;
  top: 14px;
  left: 12px;
  width: 42px;
  height: 18px;
  border-radius: 3px;
  background: var(--weak);
}

.confirmed-ops .ops-meter-wave {
  position: absolute;
  top: 46px;
  left: 15px;
  width: 42px;
  height: 18px;
  background: linear-gradient(135deg, transparent 42%, var(--fan) 43% 48%, transparent 49%), linear-gradient(45deg, transparent 45%, var(--fan) 46% 52%, transparent 53%);
}

.confirmed-ops .ops-meter-bars {
  position: absolute;
  right: 13px;
  bottom: 8px;
  display: inline-flex;
  gap: 8px;
  align-items: end;
}

.confirmed-ops .ops-meter-bars i {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: var(--fan);
}

.confirmed-ops .ops-meter-bars i:nth-child(2) {
  background: var(--warn);
}

.confirmed-ops .ops-meter-bars i:nth-child(3) {
  background: var(--cool);
}

.confirmed-ops .ops-meter-record-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cool);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .confirmed-ops .ops-meter-status-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .confirmed-ops .ops-meter-status-side {
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: start;
  }
}
/* Reserve viewport space for the fixed business dock on operations without changing locked routes. */
body[data-shell="business"][data-route="operations"] {
  --business-dock-reserved-space: 156px;
  overflow: hidden;
}

body[data-shell="business"][data-route="operations"] .platform-shell {
  height: 100vh;
  overflow: hidden;
}

body[data-shell="business"][data-route="operations"] .main {
  height: calc(100vh - var(--business-dock-reserved-space));
  min-height: 0;
  overflow-y: auto;
  /* 满宽:去掉两侧留白,顶栏铺满,内容留白改到子级 */
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 24px;
  scroll-padding-bottom: 24px;
  /* 与整体浅蓝白协调的细滚动条(替代黑白系统滚动条) */
  scrollbar-width: thin;
  scrollbar-color: rgba(47, 120, 214, 0.55) transparent;
}

body[data-shell="business"][data-route="operations"] .main::-webkit-scrollbar {
  width: 10px;
}

body[data-shell="business"][data-route="operations"] .main::-webkit-scrollbar-track {
  margin: 6px 0;
  background: transparent;
}

body[data-shell="business"][data-route="operations"] .main::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: linear-gradient(180deg, #7fb0f5, #3d82ea);
  background-clip: padding-box;
}

body[data-shell="business"][data-route="operations"] .main::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #5f9bf0, #2f6bde);
  background-clip: padding-box;
}

/* 顶栏铺满至左右边缘,内部再给内边距 */
body[data-shell="business"][data-route="operations"] .topbar {
  padding-left: 22px;
  padding-right: 22px;
}

body[data-shell="business"][data-route="operations"] .view-host {
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 24px;
}

body[data-shell="business"][data-route="operations"] .view-host :is(button, a, summary, input, select, textarea) {
  scroll-margin-bottom: 24px;
}

@media (min-width: 1600px) and (max-height: 1050px) {
  body[data-shell="business"][data-route="operations"] {
    --business-dock-reserved-space: 96px;
  }

  body[data-shell="business"][data-route="operations"] .business-dock {
    bottom: 8px;
  }

  body[data-shell="business"][data-route="operations"] .business-dock-rail {
    grid-template-columns: repeat(5, 88px);
    column-gap: 10px;
    padding: 6px 14px 5px;
    border-radius: 20px;
  }

  body[data-shell="business"][data-route="operations"] .business-dock-primary {
    width: 88px;
    min-height: 58px;
    grid-template-rows: 40px auto;
    gap: 3px;
    font-size: 13px;
  }

  body[data-shell="business"][data-route="operations"] .business-dock-primary .dock-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  body[data-shell="business"][data-route="operations"] .business-dock-primary .dock-icon svg {
    width: 22px;
    height: 22px;
  }

  body[data-shell="business"][data-route="operations"] .business-dock-item.active::after,
  body[data-shell="business"][data-route="operations"] .business-dock-item.open::after {
    width: 6px;
    height: 6px;
    margin-top: 2px;
  }

  body[data-shell="business"][data-route="operations"] .business-dock-submenu {
    bottom: 82px;
  }
}

@media (max-width: 760px) {
  body[data-shell="business"][data-route="operations"] {
    --business-dock-reserved-space: 128px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   运营驾驶舱浅色主题(仅 operations 路由;结构不变,只换配色/字重)
   方法论:页面平面≈纯白中性色,卡片纯白+发丝描边;文字统一深墨阶,
   语义色只出现在图标/色点/色条上,永不上文字;数据图形用蓝系列。
   ═══════════════════════════════════════════════════════════════════ */

/* 设备与运行状态值:统一到空调状态卡语义色(在线/运行/网关=绿·锁定=琥珀·故障=红·定时/电表=蓝) */
body[data-route="operations"] .confirmed-ops.ops-sample .ops-device-run-item b { color: #0f1f38; font-weight: 700; }
body[data-route="operations"] .confirmed-ops.ops-sample .ops-device-run-item.tone-g b { color: var(--ac-run); }
body[data-route="operations"] .confirmed-ops.ops-sample .ops-device-run-item.tone-w b { color: #d97706; }
body[data-route="operations"] .confirmed-ops.ops-sample .ops-device-run-item.tone-b b { color: var(--ac-offline); }
body[data-route="operations"] .confirmed-ops.ops-sample .ops-device-run-item.tone-blue b { color: var(--ac-load); }
/* 模式分布圆点:与圆环/空调状态卡同一套模式色 */
body[data-route="operations"] .confirmed-ops.ops-sample .ops-runtime-legend-row i.cool { background: var(--ac-cool); }
body[data-route="operations"] .confirmed-ops.ops-sample .ops-runtime-legend-row i.dehum { background: var(--ac-dry); }
body[data-route="operations"] .confirmed-ops.ops-sample .ops-runtime-legend-row i.heat { background: var(--ac-heat); }
body[data-route="operations"] .confirmed-ops.ops-sample .ops-runtime-legend-row i.fan { background: var(--ac-fan); }
body[data-route="operations"] .confirmed-ops.ops-sample .ops-runtime-legend-row i.auto { background: var(--ac-auto); }
body[data-route="operations"] .confirmed-ops.ops-sample .ops-runtime-legend-row i.off { background: var(--ac-off); }
body[data-route="operations"] .confirmed-ops.ops-sample .ops-trend-summary-item span { color: #64748c; }
body[data-route="operations"] .confirmed-ops.ops-sample .ops-trend-summary-item strong { color: #0f1f38; font-weight: 700; }
body[data-route="operations"] .confirmed-ops.ops-sample .ops-trend-summary-item strong small { color: #64748c; }

/* ── 标题:中等字重 ── */
body[data-route="operations"] .confirmed-ops .ops-card-title a {
  font-size: 14px;
  font-weight: 600;
}

/* ── 标签 chip:中性浅底 ── */
body[data-route="operations"] .ops-sample .tag { color: #5a6b85; background: #f2f5f9; }
body[data-route="operations"] .ops-sample .tag.g { color: #0b7a4b; background: rgba(12, 163, 12, 0.09); }
body[data-route="operations"] .ops-sample .tag.w { color: #a86603; background: rgba(217, 126, 6, 0.1); }
body[data-route="operations"] .ops-sample .tag.b { color: #c0392f; background: rgba(208, 59, 59, 0.09); }

/* ── 设备与运行圆环:蓝 + 淡蓝(空段/底环同色系浅阶),中心深墨字 ── */
body[data-route="operations"] .ops-tou-donut > circle:first-of-type { stroke: #e3edfa; }
body[data-route="operations"] .ops-tou-donut circle:last-of-type { stroke: #cde2fb; }
body[data-route="operations"] .ops-tou-donut text:first-of-type { fill: #0f1f38; }
body[data-route="operations"] .ops-tou-donut text:last-of-type { fill: #64748c; }

/* ── 项目天气:白卡深字 ── */
body[data-route="operations"] .confirmed-ops.ops-sample .ops-weather-now-main strong { color: #0f1f38; }
body[data-route="operations"] .confirmed-ops.ops-sample .ops-weather-now-main span { color: #46536b; }
body[data-route="operations"] .confirmed-ops.ops-sample .ops-weather-now-main small { color: #64748c; }
body[data-route="operations"] .confirmed-ops.ops-sample .ops-weather-meta dt { color: #64748c; }
body[data-route="operations"] .confirmed-ops.ops-sample .ops-weather-meta dd { color: #0f1f38; }
body[data-route="operations"] .confirmed-ops.ops-sample .ops-weather-day {
  background: #ffffff;
  border: 1px solid rgba(15, 31, 56, 0.06);
}
body[data-route="operations"] .confirmed-ops.ops-sample .ops-weather-day-label { color: #26364f; font-weight: 600; }
body[data-route="operations"] .confirmed-ops.ops-sample .ops-weather-date { color: #64748c; }
body[data-route="operations"] .confirmed-ops.ops-sample .ops-weather-day span,
body[data-route="operations"] .confirmed-ops.ops-sample .ops-weather-day em { color: #46536b; }

/* ── 能耗趋势:白底控件,柱体纯蓝,标签深字 ── */
body[data-route="operations"] .confirmed-ops.ops-sample .ops-trend-mode { background: #f2f6fa; border-color: rgba(15, 31, 56, 0.1); }
body[data-route="operations"] .confirmed-ops.ops-sample .ops-trend-mode button[aria-pressed="true"] {
  background: linear-gradient(135deg, #1e63e9, #2a8cf0);
  box-shadow: 0 4px 12px rgba(30, 99, 233, 0.28);
}
body[data-route="operations"] .confirmed-ops.ops-sample .ops-trend-summary { background: #ffffff; border-color: rgba(15, 31, 56, 0.1); }
body[data-route="operations"] .confirmed-ops.ops-sample .ops-trend-summary-item { border-bottom-color: rgba(15, 31, 56, 0.08); }
body[data-route="operations"] .confirmed-ops.ops-sample .ops-trend-controls select,
body[data-route="operations"] .confirmed-ops.ops-sample .ops-trend-controls input {
  color: #0f1f38;
  background: #ffffff;
  border-color: rgba(15, 31, 56, 0.14);
}
body[data-route="operations"] .confirmed-ops .trend-svg g[fill^="url"] { fill: #3987e5; }
body[data-route="operations"] .confirmed-ops .trend-svg .trend-value-label { fill: #26364f; }
body[data-route="operations"] .confirmed-ops .trend-svg .trend-date-label { fill: #64748c; }

/* ── 空态框 ── */
body[data-route="operations"] .confirmed-ops .empty-state {
  color: #64748c;
  background: #fafcfe;
  border-color: rgba(15, 31, 56, 0.14);
}

/* ═══ 空调运行状态通栏:语义色系统(浅蓝白基调,可复用到内页) ═══
   语义 token(模式/状态)。内页复用时沿用同名 token 与 mode- / is- 类结构即可。
   调色:制冷=蓝 制热=橙 除湿=青 送风=绿 自动=紫 · 运行=绿 关机=灰 离线=红 */
body[data-route="operations"] .ops-sample {
  --ac-cool: #2f7fe6;    --ac-cool-wash: rgba(47, 127, 230, 0.1);
  --ac-heat: #e8620f;    --ac-heat-wash: rgba(232, 98, 15, 0.1);
  --ac-dry: #0e93b8;     --ac-dry-wash: rgba(14, 147, 184, 0.1);
  --ac-fan: #16a34a;     --ac-fan-wash: rgba(22, 163, 74, 0.1);
  --ac-auto: #7c58e6;    --ac-auto-wash: rgba(124, 88, 230, 0.1);
  --ac-run: #16a34a;
  --ac-off: #64748c;     --ac-off-wash: rgba(100, 116, 140, 0.1);
  --ac-offline: #d03b3b; --ac-offline-wash: rgba(208, 59, 59, 0.1);
  --ac-load: #1e63e9;
}
body[data-route="operations"] .ops-sample .ops-ac-status-summary { background: #ffffff; border-color: rgba(15, 31, 56, 0.1); }

/* 每台卡:白底 + 左侧状态色条(默认关机灰,运行按模式,离线红) */
body[data-route="operations"] .ops-sample .ops-ac-unit {
  background: #ffffff;
  border-color: rgba(15, 31, 56, 0.1);
  border-left: 3px solid var(--ac-off);
}
body[data-route="operations"] .ops-sample .ops-ac-unit.is-on.mode-cool { border-left-color: var(--ac-cool); }
body[data-route="operations"] .ops-sample .ops-ac-unit.is-on.mode-dry { border-left-color: var(--ac-dry); }
body[data-route="operations"] .ops-sample .ops-ac-unit.is-on.mode-heat { border-left-color: var(--ac-heat); }
body[data-route="operations"] .ops-sample .ops-ac-unit.is-on.mode-fan { border-left-color: var(--ac-fan); }
body[data-route="operations"] .ops-sample .ops-ac-unit.is-on.mode-auto { border-left-color: var(--ac-auto); }
body[data-route="operations"] .ops-sample .ops-ac-unit.is-off { border-left-color: var(--ac-off); opacity: 0.94; }
body[data-route="operations"] .ops-sample .ops-ac-unit.is-offline { border-left-color: var(--ac-offline); opacity: 0.78; }

/* badge:按模式/状态上色(色字 + 淡底 + 描边) */
body[data-route="operations"] .ops-sample .ops-ac-unit-badge {
  color: var(--ac-off); border-color: rgba(100, 116, 140, 0.3); background: var(--ac-off-wash); font-weight: 800;
}
body[data-route="operations"] .ops-sample .ops-ac-unit.is-on.mode-cool .ops-ac-unit-badge { color: var(--ac-cool); border-color: rgba(47, 127, 230, 0.32); background: var(--ac-cool-wash); }
body[data-route="operations"] .ops-sample .ops-ac-unit.is-on.mode-dry .ops-ac-unit-badge { color: var(--ac-dry); border-color: rgba(14, 147, 184, 0.32); background: var(--ac-dry-wash); }
body[data-route="operations"] .ops-sample .ops-ac-unit.is-on.mode-heat .ops-ac-unit-badge { color: var(--ac-heat); border-color: rgba(232, 98, 15, 0.32); background: var(--ac-heat-wash); }
body[data-route="operations"] .ops-sample .ops-ac-unit.is-on.mode-fan .ops-ac-unit-badge { color: var(--ac-fan); border-color: rgba(22, 163, 74, 0.32); background: var(--ac-fan-wash); }
body[data-route="operations"] .ops-sample .ops-ac-unit.is-on.mode-auto .ops-ac-unit-badge { color: var(--ac-auto); border-color: rgba(124, 88, 230, 0.32); background: var(--ac-auto-wash); }
body[data-route="operations"] .ops-sample .ops-ac-unit.is-offline .ops-ac-unit-badge { color: var(--ac-offline); border-color: rgba(208, 59, 59, 0.32); background: var(--ac-offline-wash); }

/* 温度:设定=绿 室温=蓝(与日使用详情图例一致) */
body[data-route="operations"] .ops-sample .ops-ac-unit-set { color: var(--ac-fan); font-weight: 800; }
body[data-route="operations"] .ops-sample .ops-ac-unit-set small { color: #64748c; font-weight: 600; }
body[data-route="operations"] .ops-sample .ops-ac-unit-room { color: #46536b; }
body[data-route="operations"] .ops-sample .ops-ac-unit-room b { color: var(--ac-cool); }
body[data-route="operations"] .ops-sample .ops-ac-unit-fan em { color: #64748c; }

/* 汇总左栏:运行=绿 · 设定=绿 室内=蓝 负荷=蓝 · 故障>0 红 · 模式数按模式色 */
body[data-route="operations"] .ops-sample .ops-ac-summary-row > span { color: #46536b; }
body[data-route="operations"] .ops-sample .ops-ac-summary-row > b { color: #0f1f38; }
body[data-route="operations"] .ops-sample .ops-ac-summary-row.ac-tone-run > b strong.good { color: var(--ac-run); }
body[data-route="operations"] .ops-sample .ops-ac-summary-row.ac-tone-set > b { color: var(--ac-fan); }
body[data-route="operations"] .ops-sample .ops-ac-summary-row.ac-tone-room > b { color: var(--ac-cool); }
body[data-route="operations"] .ops-sample .ops-ac-summary-row.ac-tone-load > b { color: var(--ac-load); }
body[data-route="operations"] .ops-sample .ops-ac-summary-row.ac-tone-fault > b { color: var(--ac-offline); }
body[data-route="operations"] .ops-sample .ops-ac-summary-modes { color: #46536b; }
body[data-route="operations"] .ops-sample .ops-ac-summary-mode.tone-cool b { color: var(--ac-cool); }
body[data-route="operations"] .ops-sample .ops-ac-summary-mode.tone-dehum b { color: var(--ac-dry); }
body[data-route="operations"] .ops-sample .ops-ac-summary-mode.tone-heat b { color: var(--ac-heat); }
body[data-route="operations"] .ops-sample .ops-ac-summary-mode.tone-fan b { color: var(--ac-fan); }
body[data-route="operations"] .ops-sample .ops-ac-summary-mode.tone-auto b { color: var(--ac-auto); }
body[data-route="operations"] .ops-sample .ops-ac-summary-mode.tone-off b { color: var(--ac-off); }

/* ── KPI 卡:图标与标题同排,放大图标并把脚注稳定贴底 ── */
body[data-route="operations"] .confirmed-ops.ops-sample .kpi.ops-kpi-card {
  display: flex;
  min-height: 112px;
  flex-direction: column;
  padding: 12px;
}
body[data-route="operations"] .ops-sample .ops-kpi-head {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}
body[data-route="operations"] .ops-sample .ops-kpi-head .l {
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
}
body[data-route="operations"] .ops-sample .ops-kpi-icon {
  width: 36px;
  height: 36px;
  display: inline-grid;
  flex: 0 0 36px;
  place-items: center;
  border-radius: 10px;
}
body[data-route="operations"] .ops-sample .ops-kpi-icon svg { width: 20px; height: 20px; }
body[data-route="operations"] .confirmed-ops.ops-sample .ops-kpi-foot,
body[data-route="operations"] .confirmed-ops.ops-sample .ops-kpi-card .ops-kpi-wave {
  margin-top: auto;
  padding-top: 5px;
}
body[data-route="operations"] .confirmed-ops.ops-sample .ops-kpi-card .ops-kpi-wave .ops-load-waveform {
  height: 22px;
}
body[data-route="operations"] .ops-sample .ops-kpi-icon.i-load { color: #1e63e9; background: rgba(30, 99, 233, 0.1); }
body[data-route="operations"] .ops-sample .ops-kpi-icon.i-fault { color: #d03b3b; background: rgba(208, 59, 59, 0.1); }
body[data-route="operations"] .ops-sample .ops-kpi-icon.i-today { color: #0e93b8; background: rgba(14, 147, 184, 0.1); }
body[data-route="operations"] .ops-sample .ops-kpi-icon.i-month { color: #2f7fe6; background: rgba(47, 127, 230, 0.1); }
body[data-route="operations"] .ops-sample .ops-kpi-icon.i-bill { color: #d97706; background: rgba(217, 119, 6, 0.1); }
body[data-route="operations"] .ops-sample .ops-kpi-icon.i-ai { color: #16a34a; background: rgba(22, 163, 74, 0.1); }

/* ── 底部 dock:白底外框 ── */
body[data-route="operations"] .business-dock-rail {
  border-color: rgba(15, 31, 56, 0.08);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 36px rgba(15, 31, 56, 0.14);
}

/* ── 排版层级:标题粗、数值大而重、辅助字小而清(纠正上一版整体过轻) ── */
body[data-route="operations"] .confirmed-ops .ops-card-title a {
  font-size: 15px;
  font-weight: 700;
}
body[data-route="operations"] .ops-sample .kpi .l {
  color: #4a5670;
  font-weight: 500;
}
body[data-route="operations"] .ops-sample .kpi .v,
body[data-route="operations"] .confirmed-ops.ops-sample .kpi.ops-kpi-card .v {
  font-size: 24px;
  font-weight: 800;
}
body[data-route="operations"] .confirmed-ops.ops-sample .ops-device-run-item b {
  font-size: 20px;
  font-weight: 800;
}
body[data-route="operations"] .confirmed-ops.ops-sample .ops-device-run-label em {
  color: #3d4a63;
  font-weight: 500;
}
body[data-route="operations"] .confirmed-ops.ops-sample .ops-runtime-legend-row span {
  color: #3d4a63;
}
body[data-route="operations"] .confirmed-ops.ops-sample .ops-runtime-legend-row b {
  color: #0f1f38;
  font-weight: 700;
}
body[data-route="operations"] .confirmed-ops.ops-sample .ops-weather-now-main strong {
  font-size: 30px;
  font-weight: 800;
}
body[data-route="operations"] .confirmed-ops.ops-sample .ops-trend-summary-item strong {
  font-weight: 800;
}
body[data-route="operations"] .ops-sample .ops-ac-unit-set {
  font-weight: 800;
}
body[data-route="operations"] .ops-sample .ops-ac-summary-row > b {
  font-weight: 800;
}
body[data-route="operations"] .confirmed-ops.ops-sample .ops-meter-status-values strong {
  color: #0f1f38;
  font-weight: 800;
}

/* ── 顶栏右侧:白字加大加清 ── */
body[data-shell="business"][data-route="operations"] .ghost-button,
body[data-shell="business"][data-route="operations"] .topbar select {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-weight: 600;
}
body[data-shell="business"][data-route="operations"] #projectEditor .ghost-button {
  color: #24405f;
  border-color: #b9cbe2;
  background: #ffffff;
  font-weight: 700;
}
body[data-shell="business"][data-route="operations"] #projectEditor .ghost-button:hover {
  background: #f5f9ff;
}
body[data-shell="business"][data-route="operations"] #projectEditor .ghost-button.primary,
body[data-shell="business"][data-route="operations"] #projectEditor [data-project-save] {
  color: #ffffff;
  border-color: #2f7fe6;
  background: linear-gradient(180deg, #3d8bff, #246fde);
  box-shadow: 0 8px 18px rgba(47, 127, 230, 0.22);
}
body[data-shell="business"][data-route="operations"] .version-pill,
body[data-shell="business"][data-route="operations"] .user-pill {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  font-size: 12px;
  font-weight: 600;
}

/* ── 天气图标:蓝白系(去黑底手绘配色) ── */
body[data-route="operations"] .confirmed-ops.ops-sample .weather-icon i,
body[data-route="operations"] .confirmed-ops.ops-sample .ops-weather-current-icon .weather-icon i {
  color: #6ba6e8;
  background: #eaf3ff;
  border-color: rgba(30, 99, 233, 0.16);
  box-shadow: none;
}
body[data-route="operations"] .confirmed-ops.ops-sample .weather-icon-sun i,
body[data-route="operations"] .confirmed-ops.ops-sample .weather-icon-cloud-sun i { color: #f59e0b; }
body[data-route="operations"] .confirmed-ops.ops-sample .weather-icon-rain i,
body[data-route="operations"] .confirmed-ops.ops-sample .weather-icon-lightning i { color: #2f8bff; }
body[data-route="operations"] .confirmed-ops.ops-sample .weather-icon-snow i,
body[data-route="operations"] .confirmed-ops.ops-sample .weather-icon-fog i { color: #6ba6e8; }

/* ── 天气图标:SVG 化,去字符字形与底圈 ── */
body[data-route="operations"] .confirmed-ops.ops-sample .weather-icon i::before { content: none; }
body[data-route="operations"] .confirmed-ops.ops-sample .weather-icon i,
body[data-route="operations"] .confirmed-ops.ops-sample .ops-weather-current-icon .weather-icon i {
  background: transparent;
  border: 0;
  box-shadow: none;
}
body[data-route="operations"] .confirmed-ops.ops-sample .weather-icon i svg {
  width: 26px;
  height: 28px;
  display: block;
}
body[data-route="operations"] .confirmed-ops.ops-sample .ops-weather-current-icon .weather-icon i svg {
  width: 54px;
  height: 58px;
}
body[data-route="operations"] .confirmed-ops.ops-sample .ops-home-left .ops-weather-day .weather-icon i {
  width: 26px;
  height: 28px;
}
body[data-route="operations"] .confirmed-ops.ops-sample .ops-home-left .ops-weather-day .weather-icon i svg {
  width: 26px;
  height: 28px;
}

/* ── 天气排版松绑:湿度/更新与七天小卡不再拥挤 ── */
body[data-route="operations"] .confirmed-ops.ops-sample .ops-home-left .ops-weather-current {
  grid-template-columns: 62px minmax(0, 1fr) minmax(112px, max-content);
  gap: 12px;
  padding-bottom: 12px;
}
body[data-route="operations"] .confirmed-ops.ops-sample .ops-home-left .ops-weather-meta {
  min-width: 112px;
  gap: 8px;
}
body[data-route="operations"] .confirmed-ops.ops-sample .ops-home-left .ops-weather-meta div {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
}
body[data-route="operations"] .confirmed-ops.ops-sample .ops-weather-meta dt { font-size: 12px; }
body[data-route="operations"] .confirmed-ops.ops-sample .ops-weather-meta dd { font-size: 12px; letter-spacing: 0.2px; }
body[data-route="operations"] .confirmed-ops.ops-sample .ops-home-left .ops-weather-week-cards { gap: 6px; }
body[data-route="operations"] .confirmed-ops.ops-sample .ops-home-left .ops-weather-day {
  padding: 7px 0 5px;
  gap: 3px;
}
body[data-route="operations"] .confirmed-ops.ops-sample .ops-home-left .ops-weather-day-label { font-size: 12px; }
body[data-route="operations"] .confirmed-ops.ops-sample .ops-home-left .ops-weather-date,
body[data-route="operations"] .confirmed-ops.ops-sample .ops-home-left .ops-weather-day span,
body[data-route="operations"] .confirmed-ops.ops-sample .ops-home-left .ops-weather-day em {
  font-size: 10.5px;
  line-height: 1.45;
}

/* ═══════════════════════════════════════════════════════════════════
   UI-2026.07.10.11 · 21 business screens light conversion
   Shared surfaces use the extracted semantic tokens. Operations is excluded
   from this conversion; platform routes are isolated by data-shell.
   ═══════════════════════════════════════════════════════════════════ */
body[data-shell="business"][data-skin="light"]:not([data-route="operations"]) #viewHost {
  --text-main: var(--text);
  --text-muted: var(--muted);
  --accent-primary: var(--accent);
  --surface-elevated: var(--panel);
  --shadow-strong: var(--shadow);
  min-width: 0;
  max-width: 100%;
  color: var(--text);
}

body[data-shell="business"][data-skin="light"]:not([data-route="operations"]) #viewHost > section,
body[data-shell="business"][data-skin="light"]:not([data-route="operations"]) #viewHost :is(
  .control-center-page,
  .billing-page,
  .tariffs-page,
  .meter-readings-page,
  .daily-usage-page,
  .runtime-records-page,
  .prepaid-tenants-page,
  .schedule-page,
  .environment-page,
  .control-groups-page,
  .faults-page,
  .events-page,
  .project-meters-page,
  .gateway-channels-page,
  .nodes-page,
  .controllers-page,
  .room-bindings-page,
  .customers-page,
  .smart-box-page,
  .ai-anomaly-page,
  .ai-strategy-page
) {
  min-width: 0;
  max-width: 100%;
  color: var(--text);
}

body[data-shell="business"][data-skin="light"]:not([data-route="operations"]) #viewHost :is(
  .panel,
  .dcard,
  .control-tree-panel,
  .control-main-panel,
  .control-right-panel,
  .control-card,
  .control-panel-section,
  .billing-building-tree,
  .billing-results-shell,
  .billing-table-card,
  .tariff-simple-card,
  .daily-building-tree,
  .daily-ledger-main,
  .runtime-tree,
  .runtime-main,
  .tenant-table-panel,
  .schedule-table-card,
  .environment-monitor-card,
  .environment-monitor-board,
  .group-management-main,
  .group-command-rail,
  .building-group-card,
  .fault-table-shell,
  .events-tree-panel,
  .event-records-panel,
  .event-table-card,
  .meter-management-card,
  .environment-device-panel,
  .gateway-node-card,
  .gateway-host-card,
  .room-workbench-card,
  .room-bound-panel,
  .subaccount-table-wrap,
  .smartbox-panel,
  .strategy-task-console
) {
  border-color: var(--line);
  color: var(--text);
  background: var(--panel);
  background-image: none;
  box-shadow: var(--shadow);
}

body[data-shell="business"][data-skin="light"]:not([data-route="operations"]) #viewHost .panel::before {
  display: none;
}

body[data-shell="business"][data-skin="light"]:not([data-route="operations"]) #viewHost :is(
  .modal-box,
  .tenant-dialog,
  .tenant-room-drawer,
  .strategy-task-modal,
  .schedule-task-modal,
  .room-building-modal,
  .meter-modal,
  .meter-binding-modal,
  .read-detail-dialog,
  .subaccount-modal,
  .group-editor-panel,
  .fault-modal-panel
) {
  border-color: var(--line);
  color: var(--text);
  background: var(--panel);
  box-shadow: var(--shadow-modal);
}

body[data-shell="business"][data-skin="light"]:not([data-route="operations"]) #viewHost :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  .inp,
  .input
) {
  border-color: var(--line);
  color: var(--text);
  background: var(--panel);
  box-shadow: none;
}

body[data-shell="business"][data-skin="light"]:not([data-route="operations"]) #viewHost :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  .inp,
  .input
):focus {
  border-color: var(--line-strong);
  outline: 0;
  box-shadow: 0 0 0 3px var(--overlay-blue);
}

body[data-shell="business"][data-skin="light"]:not([data-route="operations"]) #viewHost .btn:not(.pri):not(.primary):not(.danger):not(.green):not(.active):not(.on):not(.selected) {
  border-color: var(--line);
  color: var(--text);
  background: var(--soft);
  box-shadow: none;
}

body[data-shell="business"][data-skin="light"]:not([data-route="operations"]) #viewHost :is(.btn.pri, .btn.primary, .btn.green) {
  border-color: transparent;
  color: var(--ink-inverse);
  background: var(--primary-gradient);
  box-shadow: 0 6px 16px var(--overlay-blue);
}

body[data-shell="business"][data-skin="light"]:not([data-route="operations"]) #viewHost .btn.danger {
  border-color: var(--border-danger-subtle);
  color: var(--badge-red-text);
  background: var(--wash-red);
}

body[data-shell="business"][data-skin="light"]:not([data-route="operations"]) #viewHost :is(h1, h2, h3, h4) {
  color: var(--text);
}

body[data-shell="business"][data-skin="light"]:not([data-route="operations"]) #viewHost :is(.tag, .status) {
  border-color: var(--line);
  color: var(--muted);
  background: var(--soft);
}

body[data-shell="business"][data-skin="light"]:not([data-route="operations"]) #viewHost :is(.tag.g, .status.ok) {
  color: var(--badge-green-text);
  background: var(--wash-teal);
}

body[data-shell="business"][data-skin="light"]:not([data-route="operations"]) #viewHost :is(.tag.w, .status.warn) {
  color: var(--badge-amber-text);
  background: var(--wash-amber);
}

body[data-shell="business"][data-skin="light"]:not([data-route="operations"]) #viewHost :is(.tag.b, .status.bad) {
  color: var(--badge-red-text);
  background: var(--wash-red);
}

body[data-shell="business"][data-skin="light"]:not([data-route="operations"]) #viewHost :is(
  table,
  .fault-record-table,
  .event-table,
  .environment-monitor-table,
  .environment-device-table,
  .thermostat-table,
  .tenant-table,
  .meter-binding-table,
  .subaccount-table,
  .strategy-task-table,
  .energy-task-table
) {
  border-color: var(--line);
  color: var(--text);
  background: var(--panel);
}

body[data-shell="business"][data-skin="light"]:not([data-route="operations"]) #viewHost table :is(th, td) {
  border-color: var(--line);
}

body[data-shell="business"][data-skin="light"]:not([data-route="operations"]) #viewHost table th {
  color: var(--muted);
  background: var(--soft);
}

body[data-shell="business"][data-skin="light"]:not([data-route="operations"]) #viewHost table td {
  color: var(--text);
  background: transparent;
}

/* Explicit non-card surfaces from the current route DOMs. */
body[data-shell="business"][data-skin="light"]:is(
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="prepaid-tenants"]
) #viewHost :is(
  .feestat,
  .readstat,
  .tenantalert
) {
  border-color: var(--line);
  color: var(--text);
  background: var(--panel);
  background-image: none;
  box-shadow: var(--shadow);
}

body[data-shell="business"][data-skin="light"]:is(
  [data-route="billing"],
  [data-route="meter-readings"]
) #viewHost :is(.feestat, .readstat) :is(b, strong) {
  color: var(--text);
}

body[data-shell="business"][data-skin="light"][data-route="billing"] #viewHost :is(.feestat strong, .fee-table .money) {
  color: var(--amber);
}

body[data-shell="business"][data-skin="light"][data-route="billing"] #viewHost .feestat b.warn,
body[data-shell="business"][data-skin="light"][data-route="meter-readings"] #viewHost .readstat b.warn {
  color: var(--amber);
}

body[data-shell="business"][data-skin="light"][data-route="billing"] #viewHost .fee-table .zero {
  color: var(--muted);
}

body[data-shell="business"][data-skin="light"][data-route="meter-readings"] #viewHost .readok {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
  color: var(--badge-green-text);
  background: var(--wash-teal);
}

body[data-shell="business"][data-skin="light"][data-route="meter-readings"] #viewHost .readwait {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
  color: var(--badge-amber-text);
  background: var(--wash-amber);
}

body[data-shell="business"][data-skin="light"][data-route="daily-usage"] #viewHost .daily-filters label,
body[data-shell="business"][data-skin="light"][data-route="daily-usage"] #viewHost .daily-pager {
  color: var(--muted);
}

body[data-shell="business"][data-skin="light"][data-route="daily-usage"] #viewHost :is(.usekwh, .usemoney) {
  color: var(--badge-green-text);
}

body[data-shell="business"][data-skin="light"][data-route="runtime-records"] #viewHost .runzero {
  color: var(--muted);
}

body[data-shell="business"][data-skin="light"][data-route="prepaid-tenants"] #viewHost .tenant-management-toolbar :is(label, em),
body[data-shell="business"][data-skin="light"][data-route="prepaid-tenants"] #viewHost .tenant-balance-range::before {
  color: var(--text-soft);
}

body[data-shell="business"][data-skin="light"][data-route="prepaid-tenants"] #viewHost .tenantalert {
  border-color: var(--line);
  color: var(--badge-amber-text);
  background: var(--wash-amber);
}

body[data-shell="business"][data-skin="light"][data-route="prepaid-tenants"] #viewHost .tenantalert b {
  color: var(--text);
  background: var(--amber);
}

body[data-shell="business"][data-skin="light"][data-route="prepaid-tenants"] #viewHost .tenant-alert-link {
  color: var(--accent);
}

body[data-shell="business"][data-skin="light"][data-route="prepaid-tenants"] #viewHost .tenantmoney {
  color: var(--badge-green-text);
}

body[data-shell="business"][data-skin="light"][data-route="prepaid-tenants"] #viewHost .tenantlow {
  color: var(--badge-amber-text);
}

body[data-shell="business"][data-skin="light"][data-route="prepaid-tenants"] #viewHost .tenantzero {
  color: var(--badge-red-text);
}

body[data-shell="business"][data-skin="light"][data-route="prepaid-tenants"] #viewHost :is(.tenant-pagination, .tenant-toolbar-total) {
  color: var(--muted);
}

body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-filter-field > span {
  color: var(--text-soft);
}

body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-range em {
  color: var(--muted);
}

body[data-shell="business"][data-skin="light"][data-route="environment"] #viewHost .environment-monitor-pager {
  color: var(--muted);
}

body[data-shell="business"][data-skin="light"][data-route="environment"] #viewHost :is(
  .environment-page-size,
  .environment-page-button,
  .environment-monitor-pager input
) {
  border-color: var(--line);
  color: var(--text-soft);
  background: var(--panel);
}

body[data-shell="business"][data-skin="light"][data-route="environment"] #viewHost .environment-page-button.active {
  border-color: var(--accent);
  color: var(--ink-inverse);
  background: var(--accent);
}

body[data-shell="business"][data-skin="light"][data-route="command-events"] #viewHost .eventop.on {
  color: var(--badge-green-text);
}

body[data-shell="business"][data-skin="light"][data-route="command-events"] #viewHost .eventop.off {
  color: var(--muted);
}

body[data-shell="business"][data-skin="light"][data-route="command-events"] #viewHost .eventop.warn {
  color: var(--badge-amber-text);
}

body[data-shell="business"][data-skin="light"][data-route="command-events"] #viewHost .event-page-size {
  border-color: var(--line);
  color: var(--text-soft);
  background: var(--panel);
}

body[data-shell="business"][data-skin="light"][data-route="meters"] #viewHost .meter-toolbar label {
  color: var(--text-soft);
}

body[data-shell="business"][data-skin="light"][data-route="meters"] #viewHost .meter-pagination {
  color: var(--muted);
}

body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-host-toolbar label {
  color: var(--text-soft);
}

body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-pagination {
  color: var(--muted);
}

body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost :is(.node-page-button, .node-page-arrow) {
  border-color: var(--line);
  color: var(--text-soft);
  background: var(--panel);
}

body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .node-page-button.active {
  border-color: var(--accent);
  color: var(--ink-inverse);
  background: var(--accent);
}

body[data-shell="business"][data-skin="light"][data-route="room-bindings"] #viewHost .room-step-head h3 b {
  color: var(--accent);
}

body[data-shell="business"][data-skin="light"][data-route="room-bindings"] #viewHost .room-arrow {
  color: var(--muted);
}

body[data-shell="business"][data-skin="light"][data-route="tariffs"] #viewHost :is(
  .tariffstat,
  .tariffhero
) {
  border-color: var(--line);
  color: var(--text);
  background: var(--panel);
  background-image: none;
  box-shadow: var(--shadow);
}

body[data-shell="business"][data-skin="light"][data-route="tariffs"] #viewHost .tariffstat strong {
  color: var(--amber);
}

body[data-shell="business"][data-skin="light"][data-route="tariffs"] #viewHost .tariff-current-rate {
  border-color: var(--line);
  color: var(--text);
  background: var(--surface-panel-muted);
}

body[data-shell="business"][data-skin="light"][data-route="tariffs"] #viewHost .tariff-current-rate :is(strong, em) {
  color: var(--amber);
}

body[data-shell="platform"][data-route="platform/smart-box-onboarding"] #viewHost :is(
  .smartbox-function-row,
  .smartbox-stage-trail
) {
  border-color: var(--line);
  color: var(--text);
  background: var(--panel);
  background-image: none;
  box-shadow: var(--shadow);
}

body[data-shell="platform"][data-route="platform/smart-box-onboarding"] #viewHost :is(
  .smartbox-function-row,
  .smartbox-stage-trail
) :is(b, strong, span) {
  color: var(--text);
}

body[data-shell="platform"][data-route="platform/smart-box-onboarding"] #viewHost .smartbox-result-table tbody tr {
  color: var(--text);
  background: var(--panel);
}

body[data-shell="platform"][data-route="platform/smart-box-onboarding"] #viewHost .smartbox-result-table tbody td {
  border-color: var(--line);
}

body[data-shell="platform"][data-route="platform/smart-box-onboarding"] #viewHost .smartbox-result-table :is(b, strong) {
  color: var(--text);
}

body[data-shell="platform"][data-route="platform/smart-box-onboarding"] #viewHost .smartbox-result-table small {
  color: var(--muted);
}

body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .competitor-schedule-table strong {
  color: var(--text);
}

body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .competitor-schedule-table small {
  color: var(--muted);
}

body[data-shell="business"][data-skin="light"]:not([data-route="operations"]) #viewHost :is(
  .route-entry-panel,
  .empty-state,
  .permission-state,
  .group-selected-empty,
  .subaccount-empty,
  .environment-device-empty,
  .meter-binding-empty
) {
  border-color: var(--line);
  color: var(--muted);
  background: var(--surface-panel-muted);
  box-shadow: none;
}

body[data-shell="business"][data-skin="light"]:not([data-route="operations"]) #viewHost :is(
  .fault-room-cascade-menu,
  .fault-room-cascade-col small,
  .fault-room-cascade-option,
  .fault-room-cascade-clear,
  .fault-code-summary,
  .fault-code-description,
  .fault-detail-modal-grid > div,
  .fault-detail-facts,
  .room-ac-more-menu,
  .room-building-summary span,
  .gateway-host-card,
  .environment-device-page .gateway-tabs,
  .tenant-room-tree-row,
  .energy-exclude-table th,
  .energy-exclude-table td
) {
  border-color: var(--line);
  color: var(--text);
  background: var(--panel);
  box-shadow: none;
}

body[data-shell="business"][data-skin="light"]:not([data-route="operations"]) #viewHost :is(
  .room-child-row td,
  .room-tree-toggle,
  .icon-btn,
  .gateway-pagination button,
  .tenant-room-tree-row.active
) {
  border-color: var(--line);
  color: var(--text-soft);
  background: var(--soft);
}

body[data-shell="business"][data-skin="light"]:not([data-route="operations"]) #viewHost :is(
  .fault-table-shell,
  .event-table-card,
  .environment-monitor-board,
  .environment-device-table-wrap,
  .thermostat-table-wrap,
  .subaccount-table-wrap,
  .tenant-table-panel,
  .billing-table-card,
  .readtable,
  .runtable,
  .daily-ledger-table,
  .schedule-table-card,
  .smartbox-table-wrap,
  .room-scroll-table
) {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  border-color: var(--line);
  background: var(--panel);
  overflow-x: auto;
  contain: inline-size;
  overscroll-behavior-inline: contain;
}

body[data-shell="business"][data-skin="light"]:not([data-route="operations"]) #viewHost :is(.strategy-task-console, .schedule-console) {
  background: transparent;
}

body[data-shell="business"][data-skin="light"][data-route="ai/anomaly"] #viewHost .strategy-task-console,
body[data-shell="business"][data-skin="light"][data-route="ai/strategy"] #viewHost .strategy-task-console {
  background:
    radial-gradient(circle at 82% 4%, var(--wash-purple), transparent 32%),
    linear-gradient(180deg, var(--surface-panel-muted), transparent 240px);
}

/* Flagship ac-control: semantic color stays on bars, icons and badges. */
body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .control-card {
  border-left: 7px solid var(--ac-off);
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .control-card.pwr-on.m-cool { border-left-color: var(--ac-cool); }
body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .control-card.pwr-on.m-heat { border-left-color: var(--ac-heat); }
body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .control-card.pwr-on.m-dehum { border-left-color: var(--ac-dry); }
body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .control-card.pwr-on.m-fan { border-left-color: var(--ac-fan); }
body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .control-card.pwr-on.m-auto { border-left-color: var(--ac-auto); }
body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .control-card[data-control-card].offline { border-left-color: var(--ac-offline); }
body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .control-card[data-control-card].pwr-unknown { border-left-color: var(--ac-off); }

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .control-card.selected {
  border-color: var(--line-strong);
  border-left-color: var(--accent);
  box-shadow: 0 0 0 2px var(--overlay-blue), var(--shadow);
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .control-card :is(.temp, .rt, .top2 > span:first-child) {
  color: var(--text);
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .control-card .pchip {
  border-color: var(--line);
  color: var(--badge-green-text);
  background: var(--wash-teal);
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .control-card.pwr-off .pchip {
  color: var(--muted);
  background: var(--soft);
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .control-filter-status {
  border: 0;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .control-filter-status.error {
  color: var(--danger);
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .control-temp-current {
  color: var(--text);
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .panel-lock-temp strong {
  color: var(--text);
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost :is(.control-mode-tile, .ctile) {
  border-color: var(--line);
  color: var(--text-soft);
  background: var(--soft);
  background-image: none;
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost :is(.control-mode-tile.active, .ctile.on) {
  border-color: var(--line-strong);
  color: var(--ink-inverse);
  background: var(--primary-gradient);
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .control-power-tile.active {
  border-color: var(--line-strong);
  color: var(--badge-green-text);
  background: var(--wash-teal);
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost :is(.control-tree-node, .control-tree-device, .control-panel-section) {
  border-color: var(--line);
  color: var(--text);
  background: var(--surface-panel-muted);
}

body[data-shell="business"][data-skin="light"][data-route="billing"] #viewHost :is(.feetreeitem.on, .billing-tenant-table tr.on td) {
  border-color: var(--line-strong);
  background: var(--wash-blue);
}

body[data-shell="business"][data-skin="light"][data-route="control-groups"] #viewHost .building-group-card.selected {
  border-color: var(--line-strong);
  background: linear-gradient(160deg, var(--wash-blue), var(--panel));
  box-shadow: 0 0 0 2px var(--overlay-blue), var(--shadow);
}

body[data-shell="business"][data-skin="light"][data-route="control-groups"] #viewHost :is(
  .control-temp-current,
  .panel-lock-temp strong
) {
  color: var(--text);
}

body[data-shell="business"][data-skin="light"][data-route="environment"] #viewHost .environment-monitor-card.primary {
  border-color: var(--accent-blue);
  color: var(--ink-inverse);
  background: var(--primary-gradient);
  box-shadow: 0 10px 24px var(--overlay-blue);
}

body[data-shell="business"][data-skin="light"][data-route="environment"] #viewHost :is(.environment-page, .environment-monitor-shell, .environment-monitor-main) {
  color: var(--text);
  background: var(--bg);
}

body[data-shell="business"][data-skin="light"][data-route="environment"] #viewHost :is(.environment-monitor-tabs, .environment-monitor-board) {
  border-color: var(--line);
  color: var(--text);
  background: var(--panel);
}

body[data-shell="business"][data-skin="light"][data-route="environment"] #viewHost .environment-monitor-tab {
  color: var(--muted);
  background: transparent;
}

body[data-shell="business"][data-skin="light"][data-route="environment"] #viewHost .environment-monitor-tab.active {
  color: var(--accent);
}

body[data-shell="business"][data-skin="light"][data-route="environment"] #viewHost .environment-monitor-card.primary :is(small, b) {
  color: var(--ink-inverse);
}

body[data-shell="business"][data-skin="light"][data-route="environment"] #viewHost .environment-monitor-card:not(.primary) small {
  color: var(--muted);
}

body[data-shell="business"][data-skin="light"][data-route="environment"] #viewHost .environment-monitor-card:not(.primary) b {
  color: var(--text);
}

body[data-shell="business"][data-skin="light"][data-route="environment"] #viewHost .environment-monitor-card.danger {
  border-color: var(--border-danger-subtle);
  background: var(--wash-red);
}

body[data-shell="business"][data-skin="light"][data-route="environment"] #viewHost .environment-monitor-card.danger b,
body[data-shell="business"][data-skin="light"][data-route="environment"] #viewHost .environment-status.warn {
  color: var(--danger);
}

body[data-shell="business"][data-skin="light"][data-route="environment"] #viewHost .environment-status:not(.warn) {
  color: var(--badge-green-text);
}

body[data-shell="business"][data-skin="light"][data-route="environment"] #viewHost .environment-monitor-refresh {
  color: var(--ink-inverse);
  background: var(--primary-gradient);
}

body[data-shell="business"][data-skin="light"]:is([data-route="ai/anomaly"], [data-route="ai/strategy"]) #viewHost .strategy-status {
  border: 1px solid transparent;
  color: var(--badge-green-text);
  background: var(--wash-teal);
}

body[data-shell="business"][data-skin="light"]:is([data-route="ai/anomaly"], [data-route="ai/strategy"]) #viewHost .strategy-status.disabled {
  border-color: var(--border-danger-subtle);
  color: var(--badge-red-text);
  background: var(--wash-red);
}

body[data-shell="business"][data-skin="light"][data-route="gateway-channels"] #viewHost .environment-device-status.ok {
  color: var(--badge-green-text);
  background: var(--wash-teal);
}

body[data-shell="business"][data-skin="light"][data-route="gateway-channels"] #viewHost .environment-device-status.bad {
  color: var(--badge-red-text);
  background: var(--wash-red);
}

body[data-shell="business"][data-skin="light"][data-route="controllers"] #viewHost :is(.gateway-host-card dd.ok, .thermostat-table .status.ok) {
  color: var(--badge-green-text);
}

body[data-shell="business"][data-skin="light"][data-route="controllers"] #viewHost :is(.gateway-host-card dd.bad, .thermostat-table .status.bad),
body[data-shell="business"][data-skin="light"][data-route="meters"] #viewHost .meter-info-list dd.danger {
  color: var(--badge-red-text);
}

body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost .gateway-node-card {
  border-color: var(--line);
  color: var(--text);
  background: var(--panel);
  box-shadow: var(--shadow);
}

body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost :is(.node-card-title, .node-info-list b, .node-info-list span) {
  color: var(--text);
}

body[data-shell="business"][data-skin="light"][data-route="nodes"] #viewHost :is(.node-info-list label, .node-edit-icon) {
  color: var(--muted);
}

body[data-shell="business"][data-skin="light"][data-route="meters"] #viewHost .meter-management-card {
  border-color: var(--line);
  color: var(--text);
  background: var(--panel);
  box-shadow: var(--shadow);
}

body[data-shell="business"][data-skin="light"][data-route="meters"] #viewHost :is(.meter-management-card h3, .meter-info-list dd) {
  color: var(--text);
}

body[data-shell="business"][data-skin="light"][data-route="meters"] #viewHost :is(.meter-info-list dt, .meter-card-open) {
  color: var(--muted);
}

body[data-shell="business"][data-skin="light"][data-route="meters"] #viewHost .meter-card-actions {
  border-color: var(--line);
}

body[data-shell="business"][data-skin="light"][data-route="prepaid-tenants"] #viewHost .tenant-table-panel {
  border-color: var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

body[data-shell="business"][data-skin="light"][data-route="prepaid-tenants"] #viewHost .tenant-table :is(th, td) {
  border-color: var(--line);
  color: var(--text);
}

body[data-shell="business"][data-skin="light"][data-route="prepaid-tenants"] #viewHost .tenant-table th {
  color: var(--muted);
  background: var(--soft);
}

body[data-shell="business"][data-skin="light"][data-route="prepaid-tenants"] #viewHost .tenant-table tr.lk:nth-child(odd) td {
  background: var(--panel);
}

body[data-shell="business"][data-skin="light"][data-route="prepaid-tenants"] #viewHost .tenant-table tr.lk:nth-child(even) td {
  background: var(--surface-panel-muted);
}

body[data-shell="business"][data-skin="light"][data-route="prepaid-tenants"] #viewHost .tenant-table tr.lk:hover td {
  background: var(--wash-blue);
}

body[data-shell="business"][data-skin="light"][data-route="runtime-records"] #viewHost .runtime-filters .field {
  border-color: var(--line);
  color: var(--text);
  background: var(--panel);
}

body[data-shell="business"][data-skin="light"][data-route="runtime-records"] #viewHost .runtime-filters label {
  color: var(--muted);
}

body[data-responsive="real"][data-shell="business"] #viewHost tr[role="button"] > :is(th, td) {
  height: 44px;
}

body[data-shell="business"][data-skin="light"] #viewHost :is(.modal-backdrop, [class$="-backdrop"], [class*="-backdrop "]) {
  background: var(--modal-backdrop);
}

body[data-shell="business"][data-skin="light"][data-route="meters"] #viewHost .meter-modal-backdrop.fullscreen {
  background: var(--bg);
}

/* Real tablet content layer: 768–1279px, paired with the shell gate. */
@media (min-width: 768px) and (max-width: 1279px) {
  body[data-responsive="real"][data-shell="business"] #viewHost {
    min-width: 0;
    max-width: 100%;
    overflow-x: visible;
  }

  body[data-responsive="real"][data-shell="business"] #viewHost :is(
    button,
    summary,
    [role="button"],
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea
  ) {
    min-width: 44px;
    min-height: 44px;
  }

  body[data-responsive="real"][data-shell="business"] #viewHost :is(
    .icon-btn,
    .node-edit-icon,
    .meter-card-open,
    .room-tree-toggle,
    .control-tree-toggle
  ) {
    min-width: 44px;
    min-height: 44px;
  }

  body[data-responsive="real"][data-shell="business"] #viewHost :is(
    .control-tree-node,
    .control-tree-device,
    .billing-control-tree [role="button"],
    .daily-control-tree [role="button"],
    .runtime-control-tree [role="button"]
  ) {
    min-width: 44px;
    min-height: 44px;
  }

  body[data-responsive="real"][data-route="ac-control"] #viewHost .control-layout-grid {
    grid-template-columns: minmax(210px, 236px) minmax(0, 1fr) !important;
    gap: 12px;
  }

  body[data-responsive="real"][data-route="ac-control"] #viewHost .control-right-panel {
    grid-column: 1 / -1;
    min-width: 0;
    width: auto;
    position: static;
  }

  body[data-responsive="real"][data-route="ac-control"] #viewHost .control-card-grid {
    grid-template-columns: repeat(2, minmax(210px, 1fr)) !important;
  }

  body[data-responsive="real"][data-route="ac-control"] #viewHost :is(.control-filter-row, .control-footer) {
    flex-wrap: wrap;
  }

  body[data-responsive="real"]:is([data-route="billing"], [data-route="daily-usage"], [data-route="runtime-records"]) #viewHost :is(
    .billing-query-board .feelayout,
    .daily-ledger-layout,
    .runtime-ledger-layout
  ) {
    grid-template-columns: minmax(210px, 238px) minmax(0, 1fr) !important;
    gap: 16px;
  }

  body[data-responsive="real"]:is([data-route="billing"], [data-route="daily-usage"], [data-route="runtime-records"]) #viewHost :is(
    .billing-building-tree,
    .daily-building-tree,
    .runtime-tree
  ) {
    min-width: 0;
    width: auto;
  }

  body[data-responsive="real"]:is([data-route="billing"], [data-route="meter-readings"], [data-route="daily-usage"], [data-route="runtime-records"], [data-route="prepaid-tenants"]) #viewHost :is(
    .billing-query-toolbar,
    .meter-reading-filters,
    .daily-filters,
    .runtime-filters,
    .tenant-management-toolbar
  ) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 10px;
  }

  body[data-responsive="real"][data-route="tariffs"] #viewHost :is(.tariff-simple-fields, .tariff-actions-simple) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-responsive="real"][data-route="schedules"] #viewHost .schedule-filter-strip,
  body[data-responsive="real"][data-route="ai/anomaly"] #viewHost .energy-filter-strip,
  body[data-responsive="real"][data-route="ai/strategy"] #viewHost .strategy-filter-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-responsive="real"][data-route="schedules"] #viewHost .schedule-task-modal,
  body[data-responsive="real"]:is([data-route="ai/anomaly"], [data-route="ai/strategy"]) #viewHost .strategy-task-modal {
    width: min(960px, calc(100vw - 32px));
  }

  body[data-responsive="real"][data-route="schedules"] #viewHost .schedule-modal-body,
  body[data-responsive="real"]:is([data-route="ai/anomaly"], [data-route="ai/strategy"]) #viewHost .strategy-modal-body {
    grid-template-columns: minmax(200px, 230px) minmax(0, 1fr);
  }

  body[data-responsive="real"][data-route="environment"] #viewHost .environment-monitor-kpis,
  body[data-responsive="real"][data-route="customers"] #viewHost .subaccount-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-responsive="real"][data-route="control-groups"] #viewHost .group-management-layout,
  body[data-responsive="real"][data-route="control-groups"] #viewHost .group-editor-body {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-responsive="real"][data-route="control-groups"] #viewHost .building-group-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-responsive="real"][data-route="faults"] #viewHost .fault-filter-row {
    align-items: end;
    flex-wrap: wrap;
  }

  body[data-responsive="real"][data-route="faults"] #viewHost .fault-room-cascade-menu {
    width: min(620px, calc(100vw - 48px));
    min-width: 0;
  }

  body[data-responsive="real"][data-route="command-events"] #viewHost .events-competitor-layout {
    grid-template-columns: minmax(180px, 210px) minmax(0, 1fr);
    gap: 16px;
  }

  body[data-responsive="real"][data-route="command-events"] #viewHost .events-tools {
    flex-wrap: wrap;
  }

  body[data-responsive="real"]:is([data-route="meters"], [data-route="nodes"], [data-route="controllers"]) #viewHost :is(
    .meter-card-grid,
    .node-card-grid,
    .host-card-grid
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-responsive="real"][data-route="meters"] #viewHost .meter-binding-workbench {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  body[data-responsive="real"][data-route="meters"] #viewHost .meter-transfer-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    gap: 12px;
    padding-top: 0;
  }

  body[data-responsive="real"][data-route="room-bindings"] #viewHost .room-workbench-steps {
    height: auto;
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-responsive="real"][data-route="room-bindings"] #viewHost .room-workbench-card {
    height: auto;
    min-height: 390px;
    max-height: none;
  }

  body[data-responsive="real"][data-route="room-bindings"] #viewHost .room-step-confirm {
    grid-column: 1 / -1;
  }

  body[data-responsive="real"][data-route="customers"] #viewHost .subaccount-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-responsive="real"][data-route="customers"] #viewHost .subaccount-toolbar .subaccount-add {
    justify-self: stretch;
  }

  body[data-responsive="real"]:is([data-route="gateway-channels"], [data-route="platform/smart-box-onboarding"], [data-route="nodes"], [data-route="controllers"], [data-route="meters"]) #viewHost :is(
    .environment-device-actions,
    .smartbox-function-row,
    .node-host-toolbar,
    .gateway-filter-bar,
    .meter-toolbar,
    .gateway-pagination,
    .meter-pagination
  ) {
    flex-wrap: wrap;
  }
}

/* Phone closure: existing route rules stay in force; these final selectors
   remove legacy fixed columns and keep scrolling inside the owning card. */
@media (max-width: 767px) {
  body[data-responsive="real"][data-shell="business"] #viewHost {
    min-width: 0;
    max-width: 100%;
    overflow-x: visible;
  }

  body[data-responsive="real"][data-shell="business"] #viewHost :is(
    button,
    summary,
    [role="button"],
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea
  ) {
    min-width: 44px;
    min-height: 44px;
  }

  body[data-responsive="real"][data-shell="business"] #viewHost :is(
    .icon-btn,
    .node-edit-icon,
    .meter-card-open,
    .room-tree-toggle,
    .control-tree-toggle
  ) {
    min-width: 44px;
    min-height: 44px;
  }

  body[data-responsive="real"][data-route="ac-control"] #viewHost .control-capability-editor .lock-check {
    min-height: 44px;
  }

  body[data-responsive="real"][data-shell="business"] #viewHost :is(
    .control-tree-node,
    .control-tree-device,
    .billing-control-tree [role="button"],
    .daily-control-tree [role="button"],
    .runtime-control-tree [role="button"]
  ) {
    min-width: 44px;
    min-height: 44px;
  }

  body[data-responsive="real"][data-route="ac-control"] #viewHost .control-layout-grid,
  body[data-responsive="real"]:is([data-route="billing"], [data-route="daily-usage"], [data-route="runtime-records"]) #viewHost :is(.billing-query-board .feelayout, .daily-ledger-layout, .runtime-ledger-layout),
  body[data-responsive="real"][data-route="command-events"] #viewHost .events-competitor-layout,
  body[data-responsive="real"][data-route="control-groups"] #viewHost :is(.group-management-layout, .group-editor-body),
  body[data-responsive="real"][data-route="meters"] #viewHost .meter-binding-workbench,
  body[data-responsive="real"][data-route="room-bindings"] #viewHost .room-workbench-steps,
  body[data-responsive="real"][data-route="schedules"] #viewHost .schedule-modal-body,
  body[data-responsive="real"]:is([data-route="ai/anomaly"], [data-route="ai/strategy"]) #viewHost .strategy-modal-body {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-responsive="real"][data-route="room-bindings"] #viewHost .room-workbench-steps {
    height: auto;
    min-height: 0;
  }

  body[data-responsive="real"][data-route="ac-control"] #viewHost .control-card-grid,
  body[data-responsive="real"][data-route="control-groups"] #viewHost .building-group-grid,
  body[data-responsive="real"]:is([data-route="meters"], [data-route="nodes"], [data-route="controllers"]) #viewHost :is(.meter-card-grid, .node-card-grid, .host-card-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-responsive="real"][data-route="ac-control"] #viewHost .control-right-panel {
    grid-column: auto;
    position: static;
    width: auto;
    min-width: 0;
  }

  body[data-responsive="real"]:is([data-route="billing"], [data-route="meter-readings"], [data-route="daily-usage"], [data-route="runtime-records"], [data-route="prepaid-tenants"]) #viewHost :is(
    .billing-query-toolbar,
    .meter-reading-filters,
    .daily-filters,
    .runtime-filters,
    .tenant-management-toolbar
  ),
  body[data-responsive="real"][data-route="tariffs"] #viewHost :is(.tariff-simple-fields, .tariff-actions-simple),
  body[data-responsive="real"][data-route="schedules"] #viewHost .schedule-filter-strip,
  body[data-responsive="real"][data-route="customers"] #viewHost :is(.subaccount-toolbar, .subaccount-summary, .subaccount-form-grid),
  body[data-responsive="real"]:is([data-route="ai/anomaly"], [data-route="ai/strategy"]) #viewHost :is(.energy-filter-strip, .strategy-filter-strip, .energy-valid-range, .energy-time-grid, .energy-exclude-actions) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-responsive="real"][data-route="environment"] #viewHost .environment-monitor-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-responsive="real"][data-route="meter-readings"] #viewHost :is(
    .meter-readings-page,
    .readfilters,
    .readstats,
    .readbody,
    .readtable
  ) {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  body[data-responsive="real"][data-route="meter-readings"] #viewHost .readstats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-responsive="real"][data-route="meter-readings"] #viewHost .readfilters .field {
    min-width: 0;
    max-width: 100%;
    flex: 1 1 100%;
  }

  body[data-responsive="real"][data-route="meter-readings"] #viewHost .readfilters :is(.inp, .wide) {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  body[data-responsive="real"][data-route="schedules"] #viewHost .schedule-pagination {
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  body[data-responsive="real"][data-route="gateway-channels"] #viewHost :is(
    .gateway-channels-page,
    .environment-device-tabs,
    .environment-device-panel,
    .environment-device-table-wrap,
    .gateway-pagination,
    .ledger-message
  ) {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  body[data-responsive="real"][data-route="gateway-channels"] #viewHost .environment-device-tabs {
    contain: inline-size;
  }

  body[data-responsive="real"][data-route="gateway-channels"] #viewHost .gateway-pagination {
    flex-wrap: wrap;
    gap: 8px;
  }

  body[data-responsive="real"][data-route="faults"] #viewHost .fault-room-cascade-menu {
    position: fixed;
    inset: 12px;
    width: auto;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    overflow: auto;
  }

  body[data-responsive="real"]:is([data-route="schedules"], [data-route="ai/anomaly"], [data-route="ai/strategy"]) #viewHost :is(.schedule-task-modal, .strategy-task-modal),
  body[data-responsive="real"]:is([data-route="customers"], [data-route="controllers"], [data-route="gateway-channels"], [data-route="meters"], [data-route="prepaid-tenants"], [data-route="room-bindings"]) #viewHost :is(
    .subaccount-modal,
    .gateway-modal .modal-box,
    .environment-device-modal .modal-box,
    .meter-modal,
    .meter-binding-modal,
    .tenant-dialog,
    .room-building-modal
  ) {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  body[data-responsive="real"][data-route="customers"] #viewHost .subaccount-modal-backdrop {
    padding: 0;
  }

  body[data-responsive="real"][data-route="platform/smart-box-onboarding"] #viewHost .smartbox-stage-trail,
  body[data-responsive="real"]:is([data-route="environment"], [data-route="gateway-channels"], [data-route="controllers"]) #viewHost :is(.environment-monitor-tabs, .environment-device-tabs, .gateway-tabs) {
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    overscroll-behavior-inline: contain;
  }

  body[data-responsive="real"][data-route="room-bindings"] #viewHost .room-workbench-card {
    height: auto;
    min-height: 360px;
    max-height: none;
  }

  body[data-responsive="real"][data-route="meter-readings"] #viewHost .readtable {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  body[data-responsive="real"][data-route="meter-readings"] #viewHost .read-table {
    width: max-content;
    min-width: 900px;
    table-layout: auto;
  }

  body[data-responsive="real"][data-route="faults"] #viewHost .fault-filter-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  body[data-responsive="real"][data-route="faults"] #viewHost :is(.fault-room-selects, .fault-filter-field, .fault-date-field) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
    min-width: 0;
  }

  body[data-responsive="real"][data-route="faults"] #viewHost .filters.faults-tools :is(.inp, select.inp, .btn) {
    width: 100%;
    min-width: 0;
  }

  body[data-responsive="real"][data-route="faults"] #viewHost .fault-date-field em {
    text-align: center;
  }

  body[data-responsive="real"][data-route="faults"] #viewHost .fault-table-shell {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }
}

body[data-shell="business"][data-skin="light"][data-route="meter-readings"] #viewHost .readfilters .field {
  border-color: var(--line);
  color: var(--text);
  background: var(--soft);
}

body[data-shell="business"][data-skin="light"][data-route="meter-readings"] #viewHost .readfilters label {
  color: var(--text-soft);
}

@media (min-width: 1280px) {
  body[data-shell="business"][data-route="ac-control"] #viewHost .control-tree-panel,
  body[data-shell="business"][data-route="ac-control"] #viewHost .control-right-panel {
    max-height: calc(100vh - 145px);
  }
}

/* AC control option 2: a breathable three-column device board. */
body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .control-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 10px;
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .dcard.control-card {
  height: 158px;
  min-height: 158px;
  border: 1px solid #dbe6f5;
  border-left: 7px solid var(--ac-off);
  border-radius: 12px;
  padding: 14px 14px 12px 16px;
  color: var(--text);
  background: #fff;
  box-shadow: 0 5px 16px rgba(43, 80, 132, 0.07);
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .dcard.control-card:hover {
  border-top-color: #b8cff1;
  border-right-color: #b8cff1;
  border-bottom-color: #b8cff1;
  box-shadow: 0 9px 22px rgba(43, 80, 132, 0.12);
  transform: translateY(-1px);
}

/* 收起右栏后释放宽度给卡片网格(锁定交互:列数必须多于三列固定档)。 */
body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .control-layout-grid.is-right-panel-collapsed .control-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Only a checked card owns the selection ring. The focused device merely feeds
   the detail panel, so clearing its checkbox must restore the neutral card edge.
   Keep the wider left edge in the device mode colour even while selected. */
body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .control-card[data-control-card].selection-selected {
  border-top-color: var(--green);
  border-right-color: var(--green);
  border-bottom-color: var(--green);
  box-shadow:
    inset 0 0 0 2px var(--green),
    0 0 0 1px var(--overlay-blue-strong),
    0 0 22px var(--overlay-blue);
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .dcard .acc {
  display: none;
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .dcard .device-select-ghost {
  position: absolute;
  left: 14px;
  top: 15px;
  z-index: 2;
  width: 17px;
  height: 17px;
  margin: 0;
  overflow: visible;
  opacity: 1;
  pointer-events: auto;
  accent-color: var(--green);
  cursor: pointer;
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .dcard .top2 {
  min-width: 0;
  min-height: 22px;
  align-items: center;
  gap: 8px;
  padding-left: 26px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .dcard .top2 > span:first-child {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .dcard .pchip {
  flex: 0 0 auto;
  border: 0;
  padding: 2px 0 2px 6px;
  color: #129653;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .dcard.pwr-off .pchip,
body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .dcard.offline .pchip {
  color: var(--muted);
  background: transparent;
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .control-card-body {
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .control-device-thumb {
  width: 58px;
  height: 42px;
  display: block;
  object-fit: cover;
  border-radius: 6px;
  mix-blend-mode: multiply;
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .control-card-metrics {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .control-card-metric {
  min-width: 0;
  display: grid;
  overflow: hidden;
  gap: 3px;
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .control-card-metric + .control-card-metric {
  border-left: 1px solid #e4edf8;
  padding-left: 6px;
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .control-card-metric small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .dcard .temp,
body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .dcard .set-temp {
  margin: 0;
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #10264a;
  font-size: 21px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .dcard :is(.temp, .set-temp) em {
  margin-left: 1px;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .dcard .pw {
  position: static;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  justify-self: end;
  border: 1px solid #d8e5f5;
  border-radius: 9px;
  color: var(--muted);
  background: #f7faff;
  box-shadow: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-shadow: none;
  transform: none;
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .dcard .card-power-toggle.on {
  border-color: #bfe8d0;
  color: var(--green);
  background: #effaf4;
  text-shadow: none;
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .dcard .ft {
  min-height: 27px;
  align-items: center;
  margin-top: auto;
  border-top: 1px solid #edf2f8;
  padding-top: 8px;
  color: #435878;
  font-size: 11px;
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .dcard .ft .control-card-capacity {
  flex: 0 0 auto;
  font-weight: 600;
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .dcard .ft span:first-child {
  color: #1266d6;
  font-weight: 700;
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .dcard.pwr-on.m-heat .ft span:first-child {
  color: #d97706;
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .dcard.pwr-on.m-dehum .ft span:first-child {
  color: #0284c7;
}

body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .dcard.pwr-off,
body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .dcard.offline {
  opacity: 1;
  color: var(--muted);
  background: #fbfcfe;
}

@media (min-width: 1280px) {
  body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .control-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  body[data-responsive="real"][data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .control-card-grid {
    grid-template-columns: repeat(2, minmax(210px, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  body[data-responsive="real"][data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .control-card-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .control-card-body {
    grid-template-columns: 72px minmax(0, 1fr) 44px;
  }

  body[data-shell="business"][data-skin="light"][data-route="ac-control"] #viewHost .dcard .pw {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}

body[data-shell="business"][data-skin="light"][data-route="controllers"] #viewHost .host-actions button.btn:disabled {
  border-color: #d6dee9 !important;
  color: #607188 !important;
  background: #f3f6f9 !important;
  background-image: none !important;
  opacity: 1;
}

body[data-route="ac-control"] #viewHost .floor-control-cockpit {
  position: relative;
  display: grid;
  gap: 14px;
  min-width: 0;
  overflow: hidden;
}

body[data-route="ac-control"] #viewHost .layout-switch [data-layout-mode="floor"].active,
body[data-route="ac-control"] #viewHost .layout-switch [data-layout-mode="floor"][aria-pressed="true"] {
  border-color: transparent;
  color: var(--ink-inverse);
  background: var(--primary-gradient);
}

body[data-route="ac-control"] #viewHost .floor-cockpit-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

body[data-route="ac-control"] #viewHost .floor-cockpit-toolbar :is(.floor-tabs, .floor-actions) {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

body[data-route="ac-control"] #viewHost .floor-cockpit-toolbar .floor-tabs {
  overflow-x: auto;
}

body[data-route="ac-control"] #viewHost .floor-status-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

body[data-route="ac-control"] #viewHost .floor-status-item {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid #dfe7f2;
  border-radius: 10px;
  background: #f9fbfd;
}

body[data-route="ac-control"] #viewHost .floor-status-item span {
  display: block;
  color: #6b7f9b;
  font-size: 12px;
}

body[data-route="ac-control"] #viewHost .floor-status-item strong {
  display: block;
  margin-top: 3px;
  color: #17335c;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

body[data-route="ac-control"] #viewHost .floor-cockpit-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 14px;
  min-width: 0;
}

body[data-route="ac-control"] #viewHost .floor-scene-workspace,
body[data-route="ac-control"] #viewHost .floor-plan-main {
  min-width: 0;
}

body[data-route="ac-control"] #viewHost .floor-control-inspector {
  min-width: 0;
  overflow: auto;
  border-left: 1px solid #dfe7f2;
  padding-left: 14px;
}

body[data-route="ac-control"] #viewHost .floor-control-inspector .floor-side-section {
  margin: 0;
}

body[data-route="ac-control"] #viewHost [data-floor-device-list] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  max-height: min(46vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body[data-route="ac-control"] #viewHost .floor-inspector-device {
  width: 100%;
  display: grid;
  gap: 3px;
  border: 1px solid #dce5f0;
  border-radius: 8px;
  padding: 9px 10px;
  color: #27415f;
  background: #fff;
  text-align: left;
}

body[data-route="ac-control"] #viewHost .floor-inspector-device small {
  color: #6b7f9b;
}

body[data-route="ac-control"] #viewHost .floor-inspector-device.active {
  border-color: #1e63e9;
  background: rgba(30, 99, 233, .08);
}

body[data-route="ac-control"] #viewHost .floor-inspector-device:focus-visible {
  outline: 3px solid rgba(30, 99, 233, .28);
  outline-offset: 2px;
}

body[data-route="ac-control"] #viewHost .floor-layout-settings {
  position: absolute;
  z-index: 60;
  inset: 0;
  display: grid;
  align-content: start;
  gap: 18px;
  overflow: auto;
  padding: 20px;
  color: #17335c;
  background: #fff;
}

body[data-route="ac-control"] #viewHost .floor-layout-settings > header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid #dfe7f2;
  padding-bottom: 14px;
}

body[data-route="ac-control"] #viewHost .floor-layout-settings :is(h2, p) {
  margin: 0;
}

body[data-route="ac-control"] #viewHost .floor-layout-settings p {
  margin-top: 5px;
  color: #6b7f9b;
}

body[data-route="ac-control"] #viewHost .floor-settings-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

body[data-route="ac-control"] #viewHost .floor-command-state.error {
  color: var(--floor-offline);
}

body[data-route="ac-control"] #viewHost .floor-control-cockpit :focus-visible {
  outline: 3px solid rgba(30, 99, 233, .32);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  body[data-route="ac-control"] #viewHost .floor-control-cockpit .floor-device-marker.online.bound,
  body[data-route="ac-control"] #viewHost .floor-control-cockpit .floor-command-progress::before {
    animation: none;
  }
}

@media (max-width: 760px) {
  body[data-route="ac-control"] #viewHost .floor-cockpit-toolbar,
  body[data-route="ac-control"] #viewHost .floor-layout-settings > header {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-route="ac-control"] #viewHost .floor-cockpit-toolbar .floor-actions {
    overflow-x: auto;
  }

  body[data-route="ac-control"] #viewHost .floor-cockpit-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-route="ac-control"] #viewHost .floor-status-summary,
  body[data-route="ac-control"] #viewHost .floor-settings-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-route="ac-control"] #viewHost .floor-control-inspector {
    border-top: 1px solid #dfe7f2;
    border-left: 0;
    padding-top: 14px;
    padding-left: 0;
  }

  body[data-route="ac-control"] #viewHost .floor-scene-canvas {
    min-height: 420px;
  }
}
/* Issue #569: local-light visual floor plan experience. */
.visual-layout-shell {
  --floor-blue: #1e63e9;
  --floor-cool: #2f7fe6;
  --floor-heat: #e8620f;
  --floor-dry: #0e93b8;
  --floor-fan: #16a34a;
  --floor-auto: #7c58e6;
  --floor-off: #64748c;
  --floor-offline: #d03b3b;
  color: #17335c;
  background: #fff;
}

.visual-layout-shell .floor-toolbar {
  gap: 12px;
}

.visual-layout-shell .floor-toolbar h2,
.visual-layout-shell .floor-toolbar p {
  margin: 0;
}

.visual-layout-shell .floor-toolbar p {
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
}

.visual-layout-shell .btn {
  color: #27415f;
  border-color: #d8e2ef;
  background: #fff;
}

.visual-layout-shell .btn.active,
.visual-layout-shell .btn.pri {
  color: #fff;
  border-color: var(--floor-blue);
  background: var(--floor-blue);
}

.floor-view-switch {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid #d8e2ef;
  border-radius: 11px;
  background: #f4f7fb;
}

.floor-view-switch .btn {
  border: 0;
  box-shadow: none;
}

.floor-room-count {
  color: #5d7292;
  font-size: 12px;
}

.floor-scene-stage,
.visual-layout-shell .floor-plan-stage,
.room-editor-canvas {
  position: relative;
  overflow: hidden;
  border: 1px solid #d9e3ef;
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(30, 99, 233, .05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(30, 99, 233, .05) 1px, transparent 1px),
    linear-gradient(145deg, #f7f9fb, #eef4fb);
  background-size: 40px 40px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.floor-scene-heading {
  min-height: 44px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 9px 14px;
  color: #17335c;
  border-bottom: 1px solid #dfe7f2;
  background: rgba(255, 255, 255, .9);
}

.floor-scene-heading small {
  color: #6b7f9b;
}

.floor-scene-canvas {
  position: relative;
  width: 100%;
  min-height: 560px;
  touch-action: none;
}

.floor-scene-selection-box {
  position: absolute;
  z-index: 30;
  border: 1px solid #1e63e9;
  background: rgba(30, 99, 233, .12);
  pointer-events: none;
}

.floor-scene-tooltip {
  position: absolute;
  z-index: 40;
  max-width: min(320px, calc(100% - 24px));
  padding: 8px 10px;
  color: #17335c;
  border: 1px solid #cbd9ea;
  border-radius: 8px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 8px 24px rgba(23, 51, 92, .16);
  font-size: 12px;
  pointer-events: none;
}

.floor-command-progress {
  position: absolute;
  z-index: 35;
  left: 50%;
  bottom: 18px;
  padding: 9px 14px 9px 34px;
  color: #17335c;
  border: 1px solid #c7d8ee;
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 10px 28px rgba(23, 51, 92, .16);
  transform: translateX(-50%);
}

.floor-command-progress::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border: 2px solid #b8c9de;
  border-top-color: #1e63e9;
  border-radius: 50%;
  animation: floor-command-spin .8s linear infinite;
}

@keyframes floor-command-spin { to { transform: rotate(360deg); } }

.floor-scene-canvas canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.visual-layout-shell .floor-plan-stage {
  padding: 12px;
}

.visual-layout-shell .floor-plan-canvas {
  background: #f7f9fb;
}

.floor-display-unavailable {
  min-height: 360px;
  display: grid;
  place-content: center;
  justify-items: start;
  gap: 10px;
  padding: 32px;
  color: #27415f;
  border: 1px dashed #c8d7e9;
  border-radius: 14px;
  background: #f8fafc;
}

.floor-display-unavailable strong {
  font-size: 18px;
}

.floor-display-unavailable p {
  max-width: 560px;
  margin: 0;
  color: #6b7f9b;
}

.floor-room-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.floor-room-layer:not(.editor) .floor-room-shape {
  pointer-events: auto;
  cursor: pointer;
}

.floor-room-shape polygon {
  fill: rgba(255, 255, 255, .48);
  stroke: rgba(110, 140, 180, .7);
  stroke-width: .32;
}

.floor-room-shape:hover polygon,
.floor-room-shape.selected polygon {
  fill: rgba(30, 99, 233, .14);
  stroke: var(--floor-blue);
  stroke-width: .55;
}

.floor-room-shape.offline polygon {
  stroke: var(--floor-offline);
  stroke-dasharray: 1.5 1;
}

.floor-room-shape text {
  fill: #27415f;
  font-size: 2.25px;
  font-weight: 750;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .96);
  stroke-width: .65px;
  pointer-events: none;
}

.floor-room-layer.editor {
  pointer-events: auto;
}

.floor-room-layer.editor circle,
.room-draft-layer circle {
  fill: #fff;
  stroke: var(--floor-blue);
  stroke-width: .5;
  vector-effect: non-scaling-stroke;
  cursor: grab;
}

.floor-device-marker {
  z-index: 3;
  color: #fff;
  border-color: #fff;
  background: var(--floor-off);
  box-shadow: 0 5px 16px rgba(23, 51, 92, .22), 0 0 0 5px rgba(100, 116, 139, .12);
}

.floor-device-marker.mode-cool { background: var(--floor-cool); }
.floor-device-marker.mode-heat { background: var(--floor-heat); }
.floor-device-marker.mode-dry { background: var(--floor-dry); }
.floor-device-marker.mode-fan { background: var(--floor-fan); }
.floor-device-marker.mode-auto { background: var(--floor-auto); }

.floor-device-marker.online.bound {
  animation: floor-device-breathe 2.8s ease-in-out infinite;
}

.floor-device-marker.offline {
  color: #fff;
  border-style: dashed;
  background: var(--floor-offline);
  box-shadow: 0 0 0 5px rgba(208, 59, 59, .14);
}

.floor-device-marker.active {
  outline-color: var(--floor-blue);
  box-shadow: 0 0 0 7px rgba(30, 99, 233, .18), 0 8px 20px rgba(30, 99, 233, .28);
}

@keyframes floor-device-breathe {
  0%, 100% { box-shadow: 0 5px 16px rgba(23, 51, 92, .18), 0 0 0 4px rgba(22, 163, 74, .08); }
  50% { box-shadow: 0 7px 20px rgba(23, 51, 92, .22), 0 0 0 8px rgba(22, 163, 74, .15); }
}

.visual-layout-shell .floor-side-section {
  color: #27415f;
  border-color: #dfe7f2;
  background: #f9fbfd;
}

.visual-layout-shell .floor-side-section p,
.visual-layout-shell .floor-plan-hint,
.visual-layout-shell .floor-plan-row small {
  color: #6b7f9b;
}

.visual-layout-shell .floor-plan-row,
.floor-unplaced-device {
  color: #27415f;
  border-color: #dce5f0;
  background: #fff;
}

.floor-unplaced-tray h3 {
  display: flex;
  justify-content: space-between;
}

.floor-unplaced-device {
  width: 100%;
  display: grid;
  gap: 3px;
  margin-top: 7px;
  padding: 9px 10px;
  border: 1px solid;
  border-radius: 9px;
  text-align: left;
}

.floor-unplaced-device small {
  color: #6b7f9b;
}

.floor-plan-fallback[hidden],
.floor-scene-canvas[hidden] {
  display: none;
}

.floor-plan-hint.error {
  color: var(--floor-offline);
}

.room-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 16px;
}

.room-trace-editor {
  min-width: 0;
}

.room-editor-main {
  min-width: 0;
}

.room-opacity {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  color: #5d7292;
  font-size: 12px;
}

.room-opacity input {
  width: 160px;
}

.room-editor-canvas {
  position: relative;
  min-height: 580px;
  aspect-ratio: 16 / 9;
  touch-action: none;
}

.room-editor-canvas > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.room-draft-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.room-draft-layer polyline {
  fill: rgba(30, 99, 233, .08);
  stroke: var(--floor-blue);
  stroke-width: .45;
}

.room-editor-empty {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  color: #56708f;
  pointer-events: none;
}

.room-editor-list {
  max-height: 650px;
  overflow: auto;
}

.room-editor-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 9px;
}

.room-editor-row.active {
  border-color: rgba(30, 99, 233, .45);
  background: rgba(30, 99, 233, .08);
}

.room-editor-row input {
  min-width: 0;
  padding: 7px 8px;
  color: #17335c;
  border: 1px solid #d9e3ef;
  border-radius: 7px;
  background: #fff;
}

@media (max-width: 1000px) {
  .visual-layout-shell .floor-plan-grid,
  .room-editor-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .visual-layout-shell .floor-device-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .room-editor-list {
    max-height: 260px;
  }

  .room-editor-canvas {
    width: 100%;
    min-height: 0;
  }
}

@media (max-width: 767px) {
  .visual-layout-shell {
    padding: 10px;
  }

  .visual-layout-shell .floor-toolbar,
  .floor-scene-heading {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .visual-layout-shell .floor-plan-grid,
  .visual-layout-shell .floor-plan-main,
  .visual-layout-shell .floor-plan-fallback,
  .visual-layout-shell .floor-scene-stage {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .visual-layout-shell .floor-actions,
  .visual-layout-shell .floor-tabs {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 3px;
  }

  .visual-layout-shell .floor-actions > *,
  .visual-layout-shell .floor-tabs > * {
    flex: 0 0 auto;
  }

  .floor-view-switch {
    position: sticky;
    left: 0;
  }

  .visual-layout-shell .floor-device-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .visual-layout-shell .floor-plan-stage,
  .floor-scene-canvas {
    min-height: 420px;
  }

  .visual-layout-shell .floor-plan-canvas {
    width: 100%;
    min-width: 0;
    aspect-ratio: 4 / 3;
  }

  .room-editor-canvas {
    width: 100%;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}

/* UI-2026.07.14.02: light-shell contrast, billing selector and responsive action closure. */
body[data-shell="business"]:is(
  [data-route="tariffs"],
  [data-route="billing"],
  [data-route="meter-readings"],
  [data-route="runtime-records"],
  [data-route="daily-usage"],
  [data-route="prepaid-tenants"]
) .topbar-actions > .project-switcher {
  display: none !important;
}

body[data-shell="business"][data-skin="light"] #viewHost :is(
  .schedule-modal-panel,
  .schedule-task-modal,
  .strategy-task-modal,
  .strategy-log-modal,
  .event-modal-dialog,
  .tenant-dialog,
  .tenant-room-drawer,
  .meter-modal,
  .meter-binding-modal,
  .read-detail-dialog,
  .modal-box,
  .subaccount-modal,
  .group-editor-panel,
  .fault-modal-panel
) {
  border-color: var(--line);
  color: var(--text);
  background: var(--panel);
  box-shadow: var(--shadow-modal);
}

body[data-shell="business"][data-skin="light"] #viewHost :is(
  .schedule-modal-field,
  .schedule-tree-title,
  .schedule-section-title,
  .schedule-week-panel > span,
  .schedule-tree-line,
  .strategy-room-title,
  .strategy-section-title,
  .strategy-location-tree,
  .strategy-form-field,
  .strategy-condition-panel label,
  .strategy-action-config label,
  .meter-form-grid label,
  .tenant-dialog label,
  .tenant-detail-grid dt,
  .event-modal-head :is(small, p),
  .event-modal-loading,
  .eventdetail small,
  .eventhero small,
  .read-detail-dialog :is(p, small)
) {
  color: var(--text-soft);
}

body[data-shell="business"][data-skin="light"] #viewHost :is(
  .schedule-tree-line small,
  .strategy-tree-node small,
  .strategy-tree-room small,
  .strategy-condition-panel p,
  .read-detail-summary small,
  .read-detail-grid small
) {
  color: var(--muted);
}

body[data-shell="business"][data-skin="light"] #viewHost :is(
  .schedule-weekline b,
  .schedule-action-row .btn,
  .schedule-week-presets .btn,
  .strategy-policy-options label,
  .strategy-week-grid label,
  .energy-action-options label
) {
  border-color: var(--line);
  color: var(--text);
  background: var(--soft);
  white-space: nowrap;
  word-break: keep-all;
}

body[data-shell="business"][data-skin="light"] #viewHost :is(
  .schedule-weekline b.on,
  .schedule-action-row .btn.on,
  .strategy-policy-options label:has(input:checked),
  .strategy-week-grid label:has(input:checked),
  .energy-action-options label:has(input:checked)
) {
  border-color: var(--accent);
  color: var(--ink-inverse);
  background: var(--primary-gradient);
}

body[data-shell="business"][data-skin="light"] #viewHost :is(
  .eventdetail > div,
  .read-detail-summary > div,
  .read-detail-grid > div,
  .read-detail-note,
  .smartbox-column-card,
  .smartbox-discovery-row,
  .smartbox-meter-row
) {
  border-color: var(--line);
  color: var(--text);
  background: var(--soft);
}

body[data-shell="business"][data-skin="light"] #viewHost .eventhero {
  border-color: var(--line);
  color: var(--text);
  background: var(--soft);
}

body[data-shell="business"][data-skin="light"] #viewHost .eventhero.on {
  border-color: var(--border-accent-strong);
  background: var(--wash-teal);
}

body[data-shell="business"][data-skin="light"] #viewHost .eventhero.warn {
  border-color: var(--border-danger-subtle);
  background: var(--wash-amber);
}

body[data-shell="business"][data-skin="light"] #viewHost .eventhero b {
  color: var(--text);
}

body[data-shell="business"][data-skin="light"] #viewHost :is(
  .event-modal-close,
  .read-detail-close,
  .meter-modal header button,
  .meter-binding-modal header button,
  .tenant-dialog-head button
) {
  border-color: var(--line);
  color: var(--muted);
  background: var(--soft);
}

body[data-shell="business"][data-skin="light"] #viewHost .read-detail-dialog h3,
body[data-shell="business"][data-skin="light"] #viewHost :is(.read-detail-summary b, .read-detail-grid b) {
  color: var(--text);
}

body[data-shell="business"][data-skin="light"] #viewHost :is(
  .smartbox-column-card b,
  .smartbox-column-card span,
  .smartbox-discovery-row :is(span, b),
  .smartbox-meter-row label
) {
  color: var(--text);
}

body[data-shell="business"][data-skin="light"] #viewHost :is(
  .smartbox-column-card small,
  .smartbox-discovery-row small
) {
  color: var(--muted);
}

body[data-shell="business"][data-skin="light"][data-route="prepaid-tenants"] #viewHost .tenant-management-toolbar > button {
  min-width: max-content;
  padding-inline: 14px;
  white-space: nowrap;
  word-break: keep-all;
}

body[data-responsive="real"][data-shell="business"] #viewHost :is(
  .schedule-action-row .btn,
  .schedule-weekline b,
  .strategy-policy-options label,
  .strategy-week-grid label,
  .energy-action-options label,
  .tenant-management-toolbar > button
) {
  white-space: nowrap;
  word-break: keep-all;
}

/* UI-2026.07.14.03: finish the two light-shell contrast surfaces left by .02. */
body[data-shell="business"][data-skin="light"] #viewHost .smart-box-page :is(.smartbox-hero, .smartbox-panel:not(.smartbox-result-panel)) {
  border-color: var(--line);
  background: var(--panel);
  box-shadow: var(--shadow-card);
}

body[data-shell="business"][data-skin="light"] #viewHost .smart-box-page :is(.smartbox-review > div, .smartbox-links > a) {
  border-color: var(--line);
  color: #111827;
  background: var(--soft);
}

body[data-shell="business"][data-skin="light"] #viewHost .smart-box-page :is(.smartbox-review b, .smartbox-note) {
  color: #111827;
}

body[data-shell="business"][data-skin="light"] #viewHost .smart-box-page .smartbox-review small {
  color: #374151;
}

body[data-shell="business"][data-skin="light"] #viewHost .schedule-modal-panel,
body[data-shell="business"][data-skin="light"] #viewHost .schedule-target-column,
body[data-shell="business"][data-skin="light"] #viewHost .schedule-room-tree {
  background: #ffffff;
}

body[data-shell="business"][data-skin="light"] #viewHost .schedule-target-column {
  border-right: 1px solid var(--line);
  padding-right: 18px;
}

body[data-shell="business"][data-skin="light"] #viewHost :is(.schedule-modal-field, .schedule-tree-title, .schedule-tree-line, .schedule-tree-line.on, .schedule-tree-line.device) {
  color: #111827;
}

body[data-shell="business"][data-skin="light"] #viewHost .schedule-tree-line {
  font-weight: 500;
}

body[data-shell="business"][data-skin="light"] #viewHost .schedule-tree-line small {
  color: #374151;
  font-weight: 500;
}

body[data-shell="business"][data-skin="light"] #viewHost .schedule-tree-toggle {
  color: #475569;
}

body[data-shell="business"][data-skin="light"] #viewHost .schedule-tree-toggle:hover {
  color: #111827;
}

/* Group rail collapse handle: make the control feel attached to the panel edge. */
body[data-route="control-groups"] .group-rail-collapse-toggle {
  z-index: 3;
  top: 24px;
  left: -18px;
  width: 38px;
  min-width: 38px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border: 1px solid #c7d9ef;
  border-radius: 16px;
  color: #31547d;
  background: linear-gradient(145deg, #ffffff 0%, #edf5ff 100%);
  box-shadow: 0 10px 24px rgba(47, 82, 132, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

body[data-route="control-groups"] .group-rail-collapse-toggle::before {
  content: "";
  position: absolute;
  top: 10px;
  right: -1px;
  width: 3px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, #55b6e8, #2b78e8);
}

body[data-route="control-groups"] .group-rail-collapse-toggle span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid rgba(133, 166, 207, 0.38);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 2px 6px rgba(59, 91, 137, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

body[data-route="control-groups"] .group-rail-collapse-toggle:hover,
body[data-route="control-groups"] .group-rail-collapse-toggle:focus-visible {
  border-color: #7db3ed;
  color: #1266d6;
  background: linear-gradient(145deg, #ffffff 0%, #e3f0ff 100%);
  box-shadow: 0 12px 26px rgba(32, 100, 197, 0.2), 0 0 0 3px rgba(70, 145, 234, 0.13);
  outline: none;
  transform: translateX(2px);
}

body[data-route="control-groups"] .group-rail-collapse-toggle:active {
  transform: translateX(1px) scale(0.98);
}

body[data-route="control-groups"] .group-command-rail.is-collapsed .group-rail-collapse-toggle {
  top: 10px;
  left: 5px;
}

/* Keep the three-pane control workspace inside compact desktop viewports. */
@media (min-width: 1280px) and (max-width: 1399px) {
  body[data-route="ac-control"] #viewHost .control-layout-grid {
    grid-template-columns: minmax(196px, 216px) minmax(0, 1fr) minmax(280px, 304px);
    gap: 10px;
  }
}

/* The shared business button skin loads after views.css; keep this handle route-specific. */
body[data-route="control-groups"] .group-command-rail .group-rail-collapse-toggle {
  border-radius: 16px;
  color: #31547d;
  background: linear-gradient(145deg, #ffffff 0%, #edf5ff 100%);
  box-shadow: 0 10px 24px rgba(47, 82, 132, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

body[data-route="control-groups"] .group-command-rail .group-rail-collapse-toggle:hover,
body[data-route="control-groups"] .group-command-rail .group-rail-collapse-toggle:focus-visible {
  border-color: #7db3ed;
  color: #1266d6;
  background: linear-gradient(145deg, #ffffff 0%, #e3f0ff 100%);
  box-shadow: 0 12px 26px rgba(32, 100, 197, 0.2), 0 0 0 3px rgba(70, 145, 234, 0.13) !important;
}


/* UI-2026.07.15.01: scoped room-binding workbench. */
.room-binding-compact {
  --room-ink: #10264a;
  --room-muted: #71829b;
  --room-line: #e2eaf4;
  --room-soft: #f7faff;
  --room-blue: #1769e8;
  --room-green: #17a56a;
  position: relative;
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 12px;
  color: var(--room-ink);
  background: #fff;
}

.room-binding-compact .room-binding-context {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 18px;
  border: 1px solid var(--room-line);
  border-radius: 10px;
  background: #fff;
}

.room-binding-compact .room-binding-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--room-muted);
  font-size: 11px;
  letter-spacing: .03em;
}

.room-binding-compact .room-binding-context h1 {
  margin: 0;
  color: var(--room-ink);
  font-size: 20px;
  font-weight: 750;
  line-height: 1.2;
}

.room-binding-compact .room-binding-context p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 5px 0 0;
  color: var(--room-muted);
  font-size: 12px;
}

.room-binding-compact .room-binding-context p strong {
  color: var(--room-ink);
  font-size: 14px;
}

.room-binding-compact .room-status-dot,
.room-binding-compact .room-device-status i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--room-green);
}

.room-binding-compact .room-context-note,
.room-binding-compact .room-hidden-device-note {
  color: #96a4b8;
}

.room-binding-compact .room-binding-context-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.room-binding-compact .room-binding-body {
  display: grid;
  min-height: 560px;
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr) 232px;
  gap: 10px;
}

.room-binding-compact .room-selection-drawer,
.room-binding-compact .room-device-surface,
.room-binding-compact .room-actions-drawer {
  min-width: 0;
  border: 1px solid var(--room-line);
  border-radius: 10px;
  background: #fff;
}

.room-binding-compact .room-selection-drawer,
.room-binding-compact .room-actions-drawer {
  overflow: auto;
}

.room-binding-compact .room-selection-drawer {
  padding-bottom: 10px;
  transition: width .18s ease, opacity .18s ease;
}

.room-binding-compact .room-selection-drawer.is-collapsed {
  width: 42px;
  overflow: hidden;
}

.room-binding-compact .room-selection-drawer.is-collapsed .room-search-field,
.room-binding-compact .room-selection-drawer.is-collapsed .room-tree,
.room-binding-compact .room-selection-drawer.is-collapsed .room-create-button {
  display: none;
}

.room-binding-compact .room-drawer-head {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  border-bottom: 1px solid var(--room-line);
}

.room-binding-compact .room-drawer-head h2 {
  margin: 0;
  color: var(--room-ink);
  font-size: 14px;
  font-weight: 750;
}

.room-binding-compact .room-drawer-head .icon-btn {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  padding: 0;
  border: 0;
  color: #6d7e96;
  background: transparent;
  font-size: 17px;
  cursor: pointer;
}

.room-binding-compact .room-search-field,
.room-binding-compact .room-device-search {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid var(--room-line);
  border-radius: 7px;
  background: #fff;
}

.room-binding-compact .room-search-field {
  margin: 10px;
}

.room-binding-compact .room-search-field span,
.room-binding-compact .room-device-search span {
  color: #9aabc0;
  font-size: 16px;
}

.room-binding-compact .room-search-field input,
.room-binding-compact .room-device-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--room-ink);
  background: transparent;
  font-size: 12px;
}

.room-binding-compact .room-tree {
  display: grid;
  gap: 3px;
  padding: 0 8px;
}

.room-binding-compact .room-tree-row {
  display: grid;
  grid-template-columns: 12px 22px minmax(0, 1fr) auto 22px 22px;
  gap: 4px;
  min-height: 48px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 7px;
  color: #3e5472;
  cursor: pointer;
}

.room-binding-compact .room-tree-row:hover,
.room-binding-compact .room-tree-row.on {
  color: var(--room-blue);
  background: #edf4ff;
}

.room-binding-compact .room-tree-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.room-binding-compact .room-tree-chevron {
  color: #7d8ea6;
  font-size: 16px;
}

.room-binding-compact .room-tree-icon,
.room-binding-compact .room-device-mark {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid #d8e6f7;
  border-radius: 5px;
  color: var(--room-blue);
  background: #f3f8ff;
  font-size: 11px;
  font-weight: 750;
}

.room-binding-compact .room-tree-copy {
  min-width: 0;
}

.room-binding-compact .room-tree-copy b,
.room-binding-compact .room-tree-copy small {
  display: block;
  overflow-wrap: anywhere;
  line-height: 1.35;
  white-space: normal;
}

.room-binding-compact .room-tree-copy b {
  font-size: 12px;
  font-weight: 700;
}

.room-binding-compact .room-tree-copy small {
  margin-top: 2px;
  color: #9aa9bc;
  font-size: 10px;
}

.room-binding-compact .room-tree-count {
  min-width: 17px;
  color: #9aa9bc;
  font-size: 11px;
  text-align: right;
}

.room-binding-compact .room-tree-zone-action {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #5d7594;
  background: transparent;
  cursor: pointer;
}

.room-binding-compact .room-tree-zone-action:hover,
.room-binding-compact .room-tree-row.on .room-tree-zone-action {
  border-color: #cfe0f5;
  color: var(--room-blue);
  background: #fff;
}

.room-binding-compact .room-tree-zone-action.danger:hover {
  border-color: #f4cccc;
  color: #c23b3b;
  background: #fff7f7;
}

.room-binding-compact .room-create-button {
  width: calc(100% - 20px);
  margin: 10px;
  color: var(--room-blue);
  border-color: #cfe0f5;
  background: #f7faff;
}

.room-binding-compact .room-device-surface {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 18px;
}

.room-binding-compact .room-device-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.room-binding-compact .room-device-toolbar h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 750;
}

.room-binding-compact .room-device-toolbar p {
  max-width: 540px;
  margin: 5px 0 0;
  color: var(--room-muted);
  font-size: 11px;
}

.room-binding-compact .room-count-badge {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  margin-left: 4px;
  padding: 0 5px;
  place-items: center;
  border-radius: 99px;
  color: var(--room-blue);
  background: #eaf2ff;
  font-size: 11px;
  vertical-align: 2px;
}

.room-binding-compact .room-device-search {
  width: 220px;
}

.room-binding-compact .room-device-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-content: start;
}

.room-binding-compact .room-device-tile {
  position: relative;
  display: grid;
  min-height: 136px;
  grid-template-rows: auto auto 1fr;
  gap: 8px;
  padding: 16px 12px 12px;
  border: 1px solid #e2eaf4;
  border-radius: 9px;
  background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.room-binding-compact .room-device-tile:hover,
.room-binding-compact .room-device-tile.is-selected {
  border-color: #a9c8f4;
  background: #f7faff;
  box-shadow: 0 4px 14px rgba(26, 91, 165, .08);
}

.room-binding-compact .room-device-tile.is-bound {
  background: #fbfdff;
}

.room-binding-compact .room-device-tile[data-room-device-open] {
  cursor: pointer;
}

.room-binding-compact .room-device-tile[data-room-device-open]:focus-visible {
  outline: 3px solid rgba(38, 118, 226, .32);
  outline-offset: 2px;
}

.room-binding-compact .room-device-tile-main {
  display: grid;
  grid-template-columns: 16px 24px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  cursor: pointer;
}

.room-binding-compact .room-device-tile-main input {
  width: 14px;
  height: 14px;
  accent-color: var(--room-blue);
}

.room-binding-compact .room-device-copy {
  min-width: 0;
}

.room-binding-compact .room-device-copy b,
.room-binding-compact .room-device-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-binding-compact .room-device-copy b {
  color: var(--room-ink);
  font-size: 12px;
  font-weight: 750;
}

.room-binding-compact .room-device-copy small {
  margin-top: 3px;
  color: #91a1b6;
  font-size: 10px;
}

.room-binding-compact .room-device-detail-button {
  width: fit-content;
  padding: 0;
  border: 0;
  color: var(--room-blue);
  background: transparent;
  font-size: 11px;
  cursor: pointer;
}

.room-binding-compact .room-device-tile-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.room-binding-compact .room-device-bind-button {
  padding: 0;
  border: 0;
  color: var(--room-green);
  background: transparent;
  font-size: 11px;
  cursor: pointer;
}

.room-binding-compact .room-device-status,
.room-binding-compact .room-device-binding {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 5px;
  color: #60728c;
  font-size: 11px;
}

.room-binding-compact .room-device-status.offline i {
  background: #9da8b7;
}

.room-binding-compact .room-device-binding {
  position: absolute;
  right: 10px;
  bottom: 11px;
  padding: 3px 6px;
  border-radius: 4px;
  color: #7889a1;
  background: #f3f6fa;
  font-size: 10px;
}

.room-binding-compact .room-device-binding.bound {
  color: #2778db;
  background: #edf4ff;
}

.room-binding-compact .room-filter-empty {
  grid-column: 1 / -1;
  padding: 22px;
  color: var(--room-muted);
  border: 1px dashed #d7e2ef;
  border-radius: 8px;
  text-align: center;
}

.room-binding-compact .room-hidden-device-note {
  margin: 12px 0 0;
  font-size: 11px;
}

.room-binding-compact .room-actions-drawer {
  transition: width .18s ease, opacity .18s ease;
}

.room-binding-compact .room-actions-drawer.is-collapsed {
  display: none;
}

.room-binding-compact .room-action-group {
  display: grid;
  gap: 2px;
  padding: 12px 10px;
  border-bottom: 1px solid var(--room-line);
}

.room-binding-compact .room-action-group > span {
  margin-bottom: 5px;
  color: #9aa9bc;
  font-size: 10px;
}

.room-binding-compact .room-action-group button {
  display: flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  padding: 0 6px;
  border: 0;
  border-radius: 5px;
  color: #415673;
  background: transparent;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}

.room-binding-compact .room-action-group button:hover {
  color: var(--room-blue);
  background: #f3f7fd;
}

.room-binding-compact .room-action-group button[disabled],
.room-binding-compact .room-action-group button[data-ledger-disabled] {
  color: #7587a0;
}

.room-binding-compact .room-action-group i {
  width: 16px;
  color: #7890ad;
  font-size: 15px;
  font-style: normal;
  text-align: center;
}

.room-binding-compact .room-binding-bottom-bar {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px 8px 18px;
  border: 1px solid var(--room-line);
  border-radius: 10px;
  background: #fff;
}

.room-binding-compact .room-binding-bottom-bar strong {
  color: var(--room-ink);
  font-size: 13px;
}

.room-binding-compact .room-clear-selection {
  margin-left: 16px;
  padding: 0;
  border: 0;
  color: var(--room-blue);
  background: transparent;
  font-size: 11px;
  cursor: pointer;
}

.room-binding-compact .room-primary-bind {
  min-width: 126px;
}

.room-binding-compact .room-ledger-disclosure {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--room-line);
}

.room-binding-compact .room-ledger-disclosure summary {
  color: #566b86;
  font-size: 12px;
  cursor: pointer;
}

.room-binding-compact .room-ledger-disclosure summary span {
  margin-left: 6px;
  color: #99a8bb;
}

.room-binding-compact .room-ledger-inline {
  margin-top: 12px;
}

.room-binding-compact .room-ledger-drawer {
  position: absolute;
  z-index: 20;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(720px, calc(100% - 20px));
  overflow: auto;
  padding: 0 0 14px;
  border: 1px solid #d7e3f2;
  border-radius: 10px;
  background: #fff;
  box-shadow: -12px 14px 36px rgba(32, 76, 130, .16);
}

.room-binding-compact .room-floor-drawer {
  position: absolute;
  z-index: 20;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(820px, calc(100% - 20px));
  overflow: auto;
  border: 1px solid #d7e3f2;
  border-radius: 10px;
  background: #fff;
  box-shadow: -12px 14px 36px rgba(32, 76, 130, .16);
}

.room-binding-compact .room-floor-drawer-body {
  padding: 14px;
}

.room-binding-compact .room-ledger-drawer-head {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 18px;
  border-bottom: 1px solid var(--room-line);
}

.room-binding-compact .room-ledger-drawer-head h2 {
  margin: 0;
  font-size: 18px;
}

.room-binding-compact .room-ledger-drawer-head p {
  margin: 4px 0 0;
  color: var(--room-muted);
  font-size: 11px;
}

.room-binding-compact .room-ledger-drawer-body {
  padding: 14px;
}

.room-binding-compact .room-drawer-mask {
  position: absolute;
  z-index: 19;
  inset: 0;
  background: rgba(16, 38, 74, .12);
}

.room-binding-compact .room-ledger-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
  margin-bottom: 12px;
}

.room-binding-compact .room-ledger-toolbar label {
  display: grid;
  gap: 4px;
  color: var(--room-muted);
  font-size: 10px;
}

.room-binding-compact .room-ledger-toolbar .inp {
  min-width: 150px;
}

.room-binding-compact .room-ledger-table-wrap {
  overflow: auto;
  border: 1px solid var(--room-line);
  border-radius: 8px;
}

.room-binding-compact .room-ledger-table {
  min-width: 640px;
}

.room-binding-compact .room-ledger-table td small {
  display: block;
  margin-top: 2px;
  color: #98a8bb;
  font-size: 10px;
}

.room-binding-compact .room-ledger-status {
  color: #7e8da4;
  font-size: 11px;
}

.room-binding-compact .room-ledger-status.confirmed {
  color: var(--room-green);
}

.room-binding-compact .room-ledger-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.room-binding-compact .room-device-detail-panel {
  position: absolute;
  z-index: 22;
  top: 76px;
  right: 254px;
  width: 280px;
  overflow: hidden;
  border: 1px solid #d7e3f2;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(32, 76, 130, .16);
}

.room-binding-compact .room-device-detail-content {
  padding: 18px;
}

.room-binding-compact .room-device-detail-content h3 {
  margin: 10px 0 16px;
  font-size: 16px;
}

.room-binding-compact .room-device-detail-content dl {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 9px 12px;
  margin: 0 0 18px;
  font-size: 12px;
}

.room-binding-compact .room-device-detail-content dt {
  color: var(--room-muted);
}

.room-binding-compact .room-device-detail-content dd {
  margin: 0;
  color: var(--room-ink);
}

@media (max-width: 1200px) {
  .room-binding-compact .room-binding-body {
    grid-template-columns: minmax(248px, 280px) minmax(0, 1fr) 210px;
  }
  .room-binding-compact .room-device-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .room-binding-compact .room-binding-body {
    grid-template-columns: minmax(240px, 270px) minmax(0, 1fr);
  }
  .room-binding-compact .room-actions-drawer {
    position: absolute;
    z-index: 12;
    top: 0;
    right: 0;
    bottom: 0;
    width: 232px;
    box-shadow: -8px 12px 28px rgba(32, 76, 130, .14);
  }
  .room-binding-compact .room-device-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 681px) and (max-width: 820px) {
  .room-binding-compact .room-device-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .room-binding-compact .room-binding-context {
    align-items: flex-start;
    flex-direction: column;
  }
  .room-binding-compact .room-binding-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .room-binding-compact .room-selection-drawer {
    max-height: 220px;
  }
  .room-binding-compact .room-device-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .room-binding-compact .room-device-search {
    width: 160px;
  }
  .room-binding-compact .room-device-detail-panel {
    top: 12px;
    right: 12px;
    width: calc(100% - 24px);
  }
}

/* Keep the compact workbench usable below the three-pane breakpoint. */
@media (max-width: 900px) {
  .room-binding-compact .room-actions-drawer { display: none; }
  .room-binding-compact .room-actions-drawer.is-open { display: block; }
}
/* UI-2026.07.15.07 schedule timeline workspace: scoped to the selected route. */
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-console { display: block; min-width: 0; color: var(--text); }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-workbench-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; align-items: end; margin-bottom: 18px; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-workbench-head > div:first-child { min-width: 0; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-workbench-head h1 { margin: 2px 0 6px; color: var(--text-heading); font-size: 25px; line-height: 1.2; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-workbench-head p { margin: 0; color: var(--muted); font-size: 13px; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-eyebrow { color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-command-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-page-message { grid-column: 1 / -1; min-height: 18px; color: var(--muted); font-size: 12px; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-workbench-filter { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 0 0 14px; background: var(--surface-panel); box-shadow: var(--shadow); }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-workbench-filter .schedule-filter-field { display: grid; grid-template-columns: 44px minmax(160px, 220px); gap: 8px; align-items: center; color: var(--muted); font-size: 12px; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-workbench-filter .schedule-filter-field.wide { grid-template-columns: 58px minmax(260px, 310px); }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-workbench-filter .schedule-range { grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); gap: 6px; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-more-filters { position: relative; margin-left: auto; color: var(--accent); font-size: 12px; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-more-filters summary { cursor: pointer; list-style: none; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-more-filter-grid { position: absolute; z-index: 8; right: 0; display: grid; gap: 10px; width: max-content; border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-top: 9px; background: var(--surface-panel); box-shadow: var(--shadow); }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-timeline-board { min-width: 0; border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--surface-panel); box-shadow: var(--shadow); }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-board-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; min-height: 28px; color: var(--muted); font-size: 12px; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-board-tools label { color: var(--text); font-weight: 700; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-board-hint { margin-left: auto; color: var(--accent); font-weight: 700; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-week-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; border-bottom: 1px solid var(--line); margin: 14px 0 0; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-week-strip div { display: grid; gap: 2px; justify-items: center; padding: 10px 4px; color: var(--muted); }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-week-strip b, body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-week-strip small { font: inherit; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-week-strip .is-today { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); font-weight: 800; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-time-axis { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; padding: 12px 0 6px 224px; color: var(--weak); font-size: 11px; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-time-axis span { text-align: center; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-time-grid { display: grid; gap: 8px; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-timeline-row { display: grid; grid-template-columns: minmax(210px, 0.88fr) minmax(390px, 1.7fr) minmax(148px, 0.55fr) auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--surface-panel-muted); }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-timeline-row[hidden] { display: none; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-row-title { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; min-width: 0; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-row-title input { accent-color: var(--accent); }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-row-title strong { display: block; overflow: hidden; color: var(--text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-row-title small { display: block; overflow: hidden; margin-top: 3px; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-row-track { position: relative; height: 38px; overflow: hidden; border-radius: 8px; background: repeating-linear-gradient(90deg, var(--border-muted-faint) 0 1px, transparent 1px 16.666%); }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-row-slot { position: absolute; top: 7px; min-width: 108px; max-width: calc(100% - 8px); height: 24px; overflow: hidden; border: 1px solid var(--border-blue-strong); border-radius: 6px; padding: 3px 8px; color: var(--accent); background: var(--overlay-blue); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-row-slot b { margin-right: 6px; font-weight: 800; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-row-slot.on { color: var(--accent); }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-row-slot.off { color: var(--weak); border-color: var(--border-muted); background: var(--surface-action); }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-row-slot.lock { color: var(--amber); border-color: var(--border-muted); background: var(--overlay-amber); }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-row-meta { display: grid; gap: 2px; min-width: 0; color: var(--muted); font-size: 11px; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-row-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-row-meta small { overflow: hidden; color: var(--weak); text-overflow: ellipsis; white-space: nowrap; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; white-space: normal; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-actions button { border: 0; padding: 3px; color: var(--accent); background: transparent; font: inherit; font-size: 12px; cursor: pointer; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-actions button:last-child { color: var(--danger); }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-empty-board { display: grid; min-height: 360px; place-items: center; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-empty-copy { display: grid; max-width: 360px; justify-items: center; gap: 10px; color: var(--muted); text-align: center; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-empty-copy strong { color: var(--text); font-size: 18px; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-empty-copy span { font-size: 13px; line-height: 1.7; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-pagination { justify-content: flex-end; gap: 8px; margin-top: 14px; color: var(--muted); }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-modal-backdrop { align-items: stretch; justify-content: flex-end; background: var(--modal-backdrop); }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-modal-panel { width: min(520px, 100vw); height: 100vh; border-radius: 0; background: var(--surface-panel); box-shadow: var(--shadow-modal); }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-task-drawer { display: flex; flex-direction: column; min-width: 0; height: 100%; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-drawer-head { height: auto; padding: 22px 24px 16px; border-bottom: 1px solid var(--line); }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-drawer-head h2 { color: var(--text); font-size: 19px; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-close { color: var(--muted); font-size: 13px; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-drawer-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-drawer-steps button { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; align-items: center; border: 0; padding: 0; color: var(--weak); background: transparent; font: inherit; font-size: 11px; text-align: left; cursor: pointer; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-drawer-steps button.on { color: var(--accent); font-weight: 800; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-drawer-steps span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-drawer-body { display: block; padding: 22px 24px; background: var(--surface-panel); }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-drawer-step[hidden] { display: none; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-drawer-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-target-column { min-width: 0; border-bottom: 1px solid var(--line); padding-bottom: 18px; background: transparent; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-form-column { gap: 18px; min-width: 0; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-drawer-body :is(.schedule-form-section, .schedule-field-grid, .schedule-week-panel) { width: 100%; min-width: 0; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-drawer-body .schedule-time-pick { grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-drawer-body .schedule-weekline { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-drawer-body .schedule-weekline b { min-width: 0; padding: 0 4px; font-size: 12px; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost :is(.schedule-modal-field, .schedule-tree-title, .schedule-tree-line, .schedule-tree-line.on, .schedule-tree-line.device) { color: var(--text); font-size: 13px; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-tree-title { margin: 18px 0 8px; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-tree-line { min-height: 29px; color: var(--text-soft); font-size: 12px; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-tree-line.on { color: var(--accent); }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-drawer-caption { display: grid; gap: 5px; padding-bottom: 16px; color: var(--text); }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-drawer-caption span { color: var(--muted); font-size: 12px; }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-drawer-foot { gap: 8px; padding: 14px 24px; border-top: 1px solid var(--line); background: var(--surface-panel); }
body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-drawer-foot > span { margin-right: auto; color: var(--muted); font-size: 12px; }
@media (max-width: 1279px) {
  body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-timeline-row { grid-template-columns: minmax(190px, 0.8fr) minmax(320px, 1.4fr) 128px; }
  body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-actions { grid-column: 2 / -1; justify-content: flex-start; }
}
@media (max-width: 960px) {
  body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-modal-panel { width: min(560px, 100vw); }
  body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-drawer-section { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-workbench-head { grid-template-columns: 1fr; align-items: start; }
  body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-command-row { width: 100%; }
  body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-workbench-filter { display: grid; grid-template-columns: 1fr; align-items: stretch; }
  body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-more-filters { margin-left: 0; }
  body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-more-filter-grid { position: static; width: 100%; }
  body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-time-axis { padding-left: 0; }
  body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-timeline-row { grid-template-columns: 1fr; gap: 9px; }
  body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-actions { grid-column: auto; justify-content: flex-start; }
  body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-modal-panel { width: 100vw; }
  body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-drawer-head { padding: 18px 16px 14px; }
  body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-drawer-steps { gap: 5px; }
  body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-drawer-steps span { font-size: 10px; }
  body[data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-drawer-body { padding: 18px 16px; }
}
/* UI-2026.07.15.08: group-control task ledger, scoped to the route only. */
body[data-route="control-groups"] #viewHost .group-management-page {
  gap: 0;
  padding: 0 0 18px;
}

body[data-route="control-groups"] #viewHost .group-management-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 2px 0 14px;
}

body[data-route="control-groups"] #viewHost .group-management-heading p,
body[data-route="control-groups"] #viewHost .group-management-heading span,
body[data-route="control-groups"] #viewHost .group-management-heading small {
  color: var(--muted);
  font-size: 12px;
}

body[data-route="control-groups"] #viewHost .group-management-heading p {
  margin: 0 0 5px;
}

body[data-route="control-groups"] #viewHost .group-management-heading h1 {
  margin: 0;
  color: var(--text);
  font-size: 23px;
  line-height: 1.2;
}

body[data-route="control-groups"] #viewHost .group-management-heading span {
  display: block;
  margin-top: 7px;
}

body[data-route="control-groups"] #viewHost .group-management-heading small {
  flex: 0 0 auto;
  padding-bottom: 3px;
}

body[data-route="control-groups"] #viewHost .group-management-toolbar {
  gap: 10px;
  margin-bottom: 12px;
}

body[data-route="control-groups"] #viewHost .group-management-toolbar .inp {
  width: 252px;
  height: 38px;
}

body[data-route="control-groups"] #viewHost .group-management-toolbar .btn {
  min-width: 76px;
  height: 38px;
}

body[data-route="control-groups"] #viewHost .group-management-layout {
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: 14px;
  min-height: 0;
  position: relative;
}

body[data-route="control-groups"] #viewHost .group-management-layout.is-group-rail-collapsed { grid-template-columns: minmax(0, 1fr); }

body[data-route="control-groups"] #viewHost .group-management-main {
  min-height: 0;
}

body[data-route="control-groups"] #viewHost .group-ledger {
  display: block;
  max-width: none;
  overflow: hidden;
  border: 1px solid var(--border-muted);
  border-radius: 12px;
  background: var(--surface-panel);
  box-shadow: var(--shadow);
}

body[data-route="control-groups"] #viewHost .group-ledger-columns,
body[data-route="control-groups"] #viewHost .group-ledger-row {
  display: grid;
  grid-template-columns: 24px minmax(126px, 1.5fr) minmax(56px, .62fr) minmax(70px, .72fr) minmax(88px, 1fr) minmax(60px, .64fr) minmax(62px, .64fr) minmax(52px, .54fr) minmax(62px, .64fr) minmax(66px, .72fr) minmax(76px, .9fr) minmax(98px, .98fr);
  align-items: center;
  gap: 8px;
}

body[data-route="control-groups"] #viewHost .group-ledger-columns {
  min-height: 40px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border-muted);
  color: var(--muted);
  background: var(--surface-subtle);
  font-size: 11px;
  font-weight: 700;
}

body[data-route="control-groups"] #viewHost .group-ledger-item {
  min-height: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--border-muted);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

body[data-route="control-groups"] #viewHost .group-ledger-item:last-child {
  border-bottom: 0;
}

body[data-route="control-groups"] #viewHost .group-ledger-item.selected {
  border-color: var(--border-muted);
  background: var(--wash-blue);
  box-shadow: none;
}

body[data-route="control-groups"] #viewHost .group-ledger-row {
  min-height: 56px;
  padding: 8px 12px;
  color: var(--text-soft);
  font-size: 12px;
}

body[data-route="control-groups"] #viewHost .group-ledger-row > div:first-of-type {
  min-width: 0;
}

body[data-route="control-groups"] #viewHost .group-ledger-row b,
body[data-route="control-groups"] #viewHost .group-ledger-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-route="control-groups"] #viewHost .group-ledger-row b {
  color: var(--text);
  font-size: 13px;
}

body[data-route="control-groups"] #viewHost .group-ledger-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

body[data-route="control-groups"] #viewHost .group-ledger-toggle,
body[data-route="control-groups"] #viewHost .link-button {
  border: 0;
  color: var(--accent-blue);
  background: transparent;
  cursor: pointer;
  font: inherit;
}

body[data-route="control-groups"] #viewHost .group-ledger-toggle {
  width: 22px;
  height: 26px;
  padding: 0;
  color: var(--muted);
  font-size: 20px;
}

body[data-route="control-groups"] #viewHost .group-ledger-online,
body[data-route="control-groups"] #viewHost .group-ledger-state {
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
}

body[data-route="control-groups"] #viewHost .group-ledger-online.offline {
  color: var(--amber);
}

body[data-route="control-groups"] #viewHost .building-group-card-actions {
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
}

body[data-route="control-groups"] #viewHost .group-ledger-detail {
  display: grid;
  grid-template-columns: 166px 238px minmax(0, 1fr);
  gap: 12px;
  margin: 0 12px 12px;
  padding: 12px;
  border: 1px solid var(--border-blue-strong);
  border-radius: 10px;
  background: var(--surface-panel-deep);
}

body[data-route="control-groups"] #viewHost .group-ledger-detail h3 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 12px;
}

body[data-route="control-groups"] #viewHost .group-ledger-task dl {
  display: grid;
  gap: 7px;
  margin: 0;
}

body[data-route="control-groups"] #viewHost .group-ledger-task dl > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  line-height: 1.35;
}

body[data-route="control-groups"] #viewHost .group-ledger-task dt { color: #526d8d; font-weight: 700; }
body[data-route="control-groups"] #viewHost .group-ledger-task dd { margin: 0; color: #183a61; font-weight: 700; text-align: right; }

body[data-route="control-groups"] #viewHost .group-ledger-quick {
  min-width: 0;
  padding: 0 12px;
  border-right: 1px solid var(--border-muted);
  border-left: 1px solid var(--border-muted);
  background: linear-gradient(180deg, rgba(239, 247, 255, 0.82), rgba(255, 255, 255, 0.68));
}

body[data-route="control-groups"] #viewHost .group-ledger-power,
body[data-route="control-groups"] #viewHost .group-ledger-temp,
body[data-route="control-groups"] #viewHost .group-ledger-mode,
body[data-route="control-groups"] #viewHost .group-ledger-fan {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

body[data-route="control-groups"] #viewHost .group-ledger-power { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body[data-route="control-groups"] #viewHost .group-ledger-temp { grid-template-columns: minmax(0, 1fr) 28px 48px 28px; align-items: center; }
body[data-route="control-groups"] #viewHost .group-ledger-temp span { color: #526d8d; font-size: 12px; font-weight: 700; }
body[data-route="control-groups"] #viewHost .group-ledger-temp b { color: #183a61; text-align: center; font-size: 13px; }
body[data-route="control-groups"] #viewHost .group-ledger-mode { grid-template-columns: repeat(5, minmax(0, 1fr)); }
body[data-route="control-groups"] #viewHost .group-ledger-fan { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body[data-route="control-groups"] #viewHost .group-ledger-quick .ctile,
body[data-route="control-groups"] #viewHost .group-ledger-quick .btn { min-height: 32px; padding: 5px 6px; border-color: #b9d1ee; background: #fff; color: #284d76; font-size: 12px; font-weight: 700; text-shadow: none; }
body[data-route="control-groups"] #viewHost .group-ledger-quick .btn.pri { color: #fff; }
body[data-route="control-groups"] #viewHost .group-ledger-quick .ctile.on { border-color: #75adeb; color: #1266d6; }

body[data-route="control-groups"] #viewHost .group-ledger-members { min-width: 0; overflow: hidden; }
body[data-route="control-groups"] #viewHost .group-ledger-members h3 small { color: var(--muted); font-size: 11px; font-weight: 400; }
body[data-route="control-groups"] #viewHost .group-ledger-members table { width: 100%; border-collapse: collapse; font-size: 10.5px; }
body[data-route="control-groups"] #viewHost .group-ledger-members th,
body[data-route="control-groups"] #viewHost .group-ledger-members td { padding: 6px 5px; border-bottom: 1px solid var(--border-muted); text-align: left; white-space: nowrap; }
body[data-route="control-groups"] #viewHost .group-ledger-members th { color: var(--muted); font-weight: 600; }
body[data-route="control-groups"] #viewHost .group-ledger-members .link-button { margin-top: 8px; font-size: 11px; }

body[data-route="control-groups"] #viewHost .group-management-pager { max-width: none; margin: 0; padding: 14px 0 4px; justify-content: flex-start; }


body[data-route="control-groups"] #viewHost .group-ledger-history { margin-top: 12px; padding: 12px; border: 1px solid var(--border-muted); border-radius: 10px; background: var(--surface-panel); }
body[data-route="control-groups"] #viewHost .group-ledger-history > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body[data-route="control-groups"] #viewHost .group-ledger-history h2 { margin: 0; color: var(--text); font-size: 12px; }
body[data-route="control-groups"] #viewHost .group-ledger-history h2 small { color: var(--muted); font-size: 11px; font-weight: 400; }
body[data-route="control-groups"] #viewHost .group-ledger-history a { color: var(--accent-blue); font-size: 11px; text-decoration: none; }
body[data-route="control-groups"] #viewHost .group-ledger-history p { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px 14px; margin: 10px 0 0; }
body[data-route="control-groups"] #viewHost .group-ledger-history p span { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 6px; min-width: 0; color: var(--muted); font-size: 10px; }
body[data-route="control-groups"] #viewHost .group-ledger-history time { color: var(--accent-blue); }
body[data-route="control-groups"] #viewHost .group-ledger-history b { overflow: hidden; color: var(--text-soft); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
body[data-route="control-groups"] #viewHost .group-ledger-history i { color: var(--text-soft); font-style: normal; }
body[data-route="control-groups"] #viewHost .group-ledger-history em { color: var(--green); font-style: normal; font-weight: 700; }
body[data-route="control-groups"] #viewHost .group-ledger-history em:not(.confirmed) { color: var(--amber); }
body[data-route="control-groups"] #viewHost .group-command-rail {
  overflow: hidden;
  border: 1px solid var(--border-muted);
  border-radius: 12px;
  background: var(--surface-panel);
  box-shadow: var(--shadow);
}

body[data-route="control-groups"] #viewHost .group-rail-header { display: flex; justify-content: flex-end; padding: 10px 10px 0; }
body[data-route="control-groups"] #viewHost .group-command-rail .group-rail-collapse-toggle {
  position: static;
  display: inline-flex;
  width: auto;
  min-width: 0;
  height: 30px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 9px;
  border: 1px solid #c1d8f2;
  border-radius: 8px;
  color: #31547d;
  background: #f7fbff;
  box-shadow: none !important;
}
body[data-route="control-groups"] #viewHost .group-command-rail .group-rail-collapse-toggle::before { display: none; }
body[data-route="control-groups"] #viewHost .group-command-rail .group-rail-collapse-toggle::after { content: "收起"; font-size: 11px; font-weight: 700; }
body[data-route="control-groups"] #viewHost .group-command-rail .group-rail-collapse-toggle span { display: inline; width: auto; height: auto; border: 0; border-radius: 0; background: transparent; color: inherit; font-size: 17px; }
body[data-route="control-groups"] #viewHost .group-command-rail .group-rail-collapse-toggle:hover,
body[data-route="control-groups"] #viewHost .group-command-rail .group-rail-collapse-toggle:focus-visible { border-color: #7db3ed; color: #1266d6; background: #eaf4ff; box-shadow: 0 0 0 3px rgba(70, 145, 234, 0.13) !important; transform: none; }
/* A collapsed rail must vacate the layout entirely; only its reopen control remains. */
body[data-route="control-groups"] #viewHost .group-command-rail.is-collapsed {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 6;
  display: block;
  width: auto;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none;
}
body[data-route="control-groups"] #viewHost .group-command-rail.is-collapsed .group-rail-header { display: block; padding: 0; }
body[data-route="control-groups"] #viewHost .group-command-rail.is-collapsed .group-rail-collapse-toggle { width: auto; min-width: 82px; padding: 0 10px; border-radius: 8px; }
body[data-route="control-groups"] #viewHost .group-command-rail.is-collapsed .group-rail-collapse-toggle::after { display: inline; content: "展开控制"; }
body[data-route="control-groups"] #viewHost .group-command-rail.is-collapsed .group-rail-collapsed-label { display: none; }

body[data-route="control-groups"] #viewHost .group-command-rail .control-right-panel { border: 0; border-radius: 0; box-shadow: none; }
body[data-route="control-groups"] #viewHost .group-control-panel { border-bottom: 1px solid var(--border-muted) !important; }
body[data-route="control-groups"] #viewHost .group-command-context { margin: 2px 0 14px; }
body[data-route="control-groups"] #viewHost .group-control-panel .panel-title h2 { font-size: 17px; }
body[data-route="control-groups"] #viewHost .group-lock-panel { background: var(--surface-panel-deep); }

@media (max-width: 1260px) {
  body[data-route="control-groups"] #viewHost .group-management-layout { grid-template-columns: minmax(0, 1fr); }
  body[data-route="control-groups"] #viewHost .group-command-rail { min-height: 0; }
}

@media (max-width: 860px) {
  body[data-route="control-groups"] #viewHost .group-ledger-columns { display: none; }
  body[data-route="control-groups"] #viewHost .group-ledger-row { grid-template-columns: 22px minmax(130px, 1fr) repeat(3, minmax(54px, auto)); gap: 6px; }
  body[data-route="control-groups"] #viewHost .group-ledger-row > span:nth-of-type(3),
  body[data-route="control-groups"] #viewHost .group-ledger-row > span:nth-of-type(6),
  body[data-route="control-groups"] #viewHost .group-ledger-row > span:nth-of-type(9) { display: none; }
  body[data-route="control-groups"] #viewHost .building-group-card-actions { grid-column: 2 / -1; justify-content: flex-start; }
  body[data-route="control-groups"] #viewHost .group-ledger-detail { grid-template-columns: minmax(0, 1fr); }
  body[data-route="control-groups"] #viewHost .group-ledger-quick { padding: 12px 0; border-top: 1px solid var(--border-muted); border-right: 0; border-bottom: 1px solid var(--border-muted); border-left: 0; }
}

@media (max-width: 620px) {
  body[data-route="control-groups"] #viewHost .group-management-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
  body[data-route="control-groups"] #viewHost .group-management-heading h1 { font-size: 20px; }
  body[data-route="control-groups"] #viewHost .group-management-toolbar { flex-wrap: wrap; }
  body[data-route="control-groups"] #viewHost .group-management-toolbar .inp { width: min(100%, 260px); flex: 1 1 170px; }
  body[data-route="control-groups"] #viewHost .group-management-count { width: 100%; margin-left: 0; }
  body[data-route="control-groups"] #viewHost .group-ledger-row { grid-template-columns: 22px minmax(118px, 1fr) repeat(2, minmax(48px, auto)); }
  body[data-route="control-groups"] #viewHost .group-ledger-row > span:nth-of-type(5),
  body[data-route="control-groups"] #viewHost .group-ledger-row > span:nth-of-type(7) { display: none; }
  body[data-route="control-groups"] #viewHost .group-ledger-members th:nth-child(3),
  body[data-route="control-groups"] #viewHost .group-ledger-members td:nth-child(3),
  body[data-route="control-groups"] #viewHost .group-ledger-members th:nth-child(4),
  body[data-route="control-groups"] #viewHost .group-ledger-members td:nth-child(4),
  body[data-route="control-groups"] #viewHost .group-ledger-members th:nth-child(5),
  body[data-route="control-groups"] #viewHost .group-ledger-members td:nth-child(5),
  body[data-route="control-groups"] #viewHost .group-ledger-members th:nth-child(8),
  body[data-route="control-groups"] #viewHost .group-ledger-members td:nth-child(8) { display: none; }
  body[data-route="control-groups"] #viewHost .group-ledger-history p { grid-template-columns: 1fr; }
}

/* UI-2026.07.15.09: command event chronology ledger. */
body[data-route="command-events"] .events-timeline-page {
  display: grid;
  gap: 14px;
  min-width: 0;
}

body[data-route="command-events"] .events-page-heading h2,
body[data-route="command-events"] .events-page-heading p {
  margin: 0;
}

body[data-route="command-events"] .events-page-heading h2 {
  color: var(--text-heading);
  font-size: 20px;
  letter-spacing: 0.01em;
}

body[data-route="command-events"] .events-page-heading p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
}

body[data-route="command-events"] .events-review-shell {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

body[data-route="command-events"] .events-review-shell .events-tools {
  min-height: 0;
  margin: 0;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

body[data-route="command-events"] .events-timeline-layout {
  grid-template-columns: 212px minmax(0, 1fr);
  gap: 0;
  min-height: min(720px, var(--events-workspace-height, calc(100vh - 172px)));
}

body[data-route="command-events"] .events-tree-panel {
  border-right: 1px solid var(--line);
  background: var(--soft);
}

body[data-route="command-events"] .events-tree-panel .control-tree-panel {
  min-height: 100%;
  border: 0;
  border-radius: 0;
  padding: 16px 14px;
  background: transparent;
  box-shadow: none;
}

body[data-route="command-events"] .events-tree-panel .control-building-tree {
  max-height: calc(min(720px, var(--events-workspace-height, 720px)) - 94px);
}

body[data-route="command-events"] .event-records-panel {
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  padding: 0 18px 12px;
  background: var(--panel);
}

body[data-route="command-events"] .event-chronology {
  display: grid;
  gap: 11px;
  padding: 16px 0 14px;
  border-bottom: 1px solid var(--line);
}

body[data-route="command-events"] .event-chronology-head,
body[data-route="command-events"] .event-time-lane,
body[data-route="command-events"] .event-time-lane-label {
  display: flex;
  align-items: center;
}

body[data-route="command-events"] .event-chronology-head {
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
}

body[data-route="command-events"] .event-chronology-head > div {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

body[data-route="command-events"] .event-chronology-head strong,
body[data-route="command-events"] .event-chronology-head b {
  color: var(--text);
  font-size: 13px;
}

body[data-route="command-events"] .event-chronology-head b {
  margin: 0 4px;
  color: var(--accent);
  font-size: 18px;
}

body[data-route="command-events"] .event-time-scale {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  color: var(--muted);
  font-size: 11px;
}

body[data-route="command-events"] .event-time-scale span:last-child {
  text-align: right;
}

body[data-route="command-events"] .event-time-lanes {
  display: grid;
  gap: 8px;
}

body[data-route="command-events"] .event-time-lane {
  gap: 12px;
  min-height: 20px;
}

body[data-route="command-events"] .event-time-lane-label {
  flex: 0 0 92px;
  gap: 6px;
  color: var(--text-soft);
  font-size: 12px;
}

body[data-route="command-events"] .event-time-lane-label i {
  display: inline-block;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
}

body[data-route="command-events"] .event-time-lane.off .event-time-lane-label i {
  background: var(--accent-blue);
}

body[data-route="command-events"] .event-time-lane.other .event-time-lane-label i {
  background: var(--danger);
}

body[data-route="command-events"] .event-time-lane-label span {
  color: var(--muted);
}

body[data-route="command-events"] .event-time-lane-track {
  position: relative;
  flex: 1 1 auto;
  height: 20px;
  border-top: 1px solid var(--line);
}

body[data-route="command-events"] .event-timeline-marker {
  position: absolute;
  top: -6px;
  left: var(--event-position);
  width: 7px;
  height: 14px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--accent);
  background: currentColor;
  cursor: pointer;
  transform: translateX(-50%);
}

body[data-route="command-events"] .event-timeline-marker.off {
  color: var(--accent-blue);
}

body[data-route="command-events"] .event-timeline-marker.warn {
  color: var(--danger);
}

body[data-route="command-events"] .event-timeline-marker span {
  position: absolute;
  top: -21px;
  left: 50%;
  display: none;
  padding: 2px 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text);
  background: var(--panel);
  font-size: 10px;
  white-space: nowrap;
  transform: translateX(-50%);
}

body[data-route="command-events"] .event-timeline-marker:hover span,
body[data-route="command-events"] .event-timeline-marker:focus-visible span {
  display: block;
}

body[data-route="command-events"] .event-chronology-empty {
  padding: 16px 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

body[data-route="command-events"] .event-table-card {
  align-self: stretch;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-route="command-events"] .event-table {
  min-width: 960px;
}

body[data-route="command-events"] .event-table th,
body[data-route="command-events"] .event-table td {
  height: 42px;
  padding: 7px 10px;
  border-bottom-color: var(--line);
}

body[data-route="command-events"] .event-table th {
  color: var(--muted);
  background: var(--soft);
  font-weight: 700;
}

body[data-route="command-events"] .event-table tbody tr:not([hidden]):hover td {
  background: var(--wash-blue);
}

body[data-route="command-events"] .event-table [data-event-detail] {
  border: 0;
  padding: 0;
  color: var(--accent);
  background: transparent;
  box-shadow: none;
  font-weight: 700;
}

body[data-route="command-events"] .event-table [data-event-detail].active,
body[data-route="command-events"] .event-table [data-event-detail]:hover {
  border: 0;
  color: var(--accent-blue);
}

body[data-route="command-events"] .event-pager {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

body[data-route="command-events"] .event-page-size {
  border-color: var(--line);
  color: var(--text-soft);
  background: var(--soft);
}

body[data-route="command-events"] .event-modal-backdrop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
  align-items: stretch;
  padding: 0;
  background: color-mix(in srgb, var(--text) 12%, transparent);
}

body[data-route="command-events"] .event-modal-backdrop[hidden] {
  display: none;
}

body[data-route="command-events"] .event-detail-drawer {
  grid-column: 2;
  width: 100%;
  max-width: none;
  max-height: none;
  height: 100%;
  padding: 22px 18px 18px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  color: var(--text);
  background: var(--panel);
  box-shadow: var(--shadow-modal);
}

body[data-route="command-events"] .event-modal-head {
  padding-right: 36px;
}

body[data-route="command-events"] .event-modal-head h3 {
  color: var(--text-heading);
  font-size: 18px;
}

body[data-route="command-events"] .eventhero {
  margin-bottom: 16px;
  border-color: var(--line);
  border-radius: 9px;
  padding: 12px;
  background: var(--wash-blue);
}

body[data-route="command-events"] .eventhero.on {
  border-color: var(--line-strong);
  background: var(--wash-teal);
}

body[data-route="command-events"] .eventhero.warn {
  border-color: var(--danger);
  background: var(--wash-red);
}

body[data-route="command-events"] .eventhero b {
  color: var(--text);
  font-size: 16px;
}

body[data-route="command-events"] .eventdetail {
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

body[data-route="command-events"] .eventdetail div {
  min-height: 58px;
  padding: 9px 10px;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--panel);
}

body[data-route="command-events"] .eventdetail div:nth-child(2n) {
  border-right: 0;
}

body[data-route="command-events"] .eventdetail div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

body[data-route="command-events"] .eventdetail small {
  color: var(--muted);
}

body[data-route="command-events"] .eventdetail b {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 12px;
}

body[data-route="command-events"] .event-params code {
  border-color: var(--line);
  color: var(--text-soft);
  background: var(--soft);
}

body[data-route="command-events"] .event-actions {
  position: sticky;
  bottom: -18px;
  margin: 16px -18px -18px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

@media (max-width: 1279px) {
  body[data-route="command-events"] .events-timeline-layout {
    grid-template-columns: 188px minmax(0, 1fr);
  }
  body[data-route="command-events"] .event-time-lane-label {
    flex-basis: 78px;
  }
  body[data-route="command-events"] .event-modal-backdrop {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 390px);
  }
}

@media (max-width: 767px) {
  body[data-route="command-events"] .events-review-shell .events-tools {
    align-items: stretch;
    padding: 12px;
  }
  body[data-route="command-events"] .events-review-shell .events-tools label,
  body[data-route="command-events"] .events-review-shell .events-tools .inp,
  body[data-route="command-events"] .events-review-shell .events-tools .event-date-range .inp {
    width: 100%;
  }
  body[data-route="command-events"] .events-review-shell .events-tools .event-date-range {
    grid-template-columns: 1fr;
  }
  body[data-route="command-events"] .events-review-shell .events-tools .event-date-range em {
    display: none;
  }
  body[data-route="command-events"] .events-timeline-layout {
    grid-template-columns: 1fr;
  }
  body[data-route="command-events"] .events-tree-panel {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  body[data-route="command-events"] .events-tree-panel .control-building-tree {
    max-height: 230px;
  }
  body[data-route="command-events"] .event-records-panel {
    padding: 0 12px 12px;
  }
  body[data-route="command-events"] .event-time-scale,
  body[data-route="command-events"] .event-time-lane-track {
    min-width: 400px;
  }
  body[data-route="command-events"] .event-chronology {
    overflow: auto;
  }
  body[data-route="command-events"] .event-modal-backdrop {
    grid-template-columns: 1fr;
  }
  body[data-route="command-events"] .event-detail-drawer {
    grid-column: 1;
    width: min(100%, 440px);
    justify-self: end;
  }
}

@media (max-width: 767px) {
  body[data-route="command-events"] .events-tree-panel .control-tree-panel {
    min-height: 0 !important;
  }
  body[data-route="command-events"] .events-tree-panel .control-building-tree {
    max-height: 220px !important;
    overflow: auto;
  }
  body[data-route="command-events"] .event-timeline-marker {
    width: 4px;
    min-width: 4px;
  }
}
/* UI-2026.07.15.11 smart gateway zone workspace. */
.gateway-management-page{--gateway-line:#dfe8f2;--gateway-blue:#2379e9;--gateway-ink:#17335a}.gateway-workspace-heading{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin:0 0 16px}.gateway-workspace-heading h2{margin:0 0 4px;color:var(--gateway-ink);font-size:22px}.gateway-workspace-heading p,.gateway-zone-panel-head p,.gateway-zone-context p{margin:0;color:#70839c;font-size:13px}.gateway-heading-actions{display:flex;gap:8px;flex-wrap:wrap}.gateway-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:16px}.gateway-metric{position:relative;min-height:90px;padding:13px 16px;border:1px solid var(--gateway-line);border-radius:10px;background:#fff;overflow:hidden}.gateway-metric:after{content:"";position:absolute;inset:0 0 0 auto;width:4px;background:#89b8f4}.gateway-metric.good:after{background:#18a66b}.gateway-metric.bad:after{background:#e35a5a}.gateway-metric.warn:after{background:#e8a124}.gateway-metric.blue:after{background:#6f68ea}.gateway-metric span,.gateway-metric small{display:block;color:#71859f;font-size:12px}.gateway-metric strong{display:block;margin:5px 0 1px;color:var(--gateway-ink);font-size:27px;line-height:1.1}.gateway-workspace{display:grid;grid-template-columns:minmax(220px,260px) minmax(0,1fr);gap:14px;align-items:start}.gateway-zone-panel,.gateway-workspace-main{border:1px solid var(--gateway-line);border-radius:10px;background:#fff;overflow:hidden}.gateway-zone-panel-head{padding:16px;border-bottom:1px solid #e9eff6}.gateway-zone-panel-head h3{margin:0 0 5px;color:var(--gateway-ink);font-size:15px}.gateway-zone-list{padding:9px}.gateway-zone-card{width:100%;margin:0 0 7px;padding:12px;text-align:left;border:1px solid #dfe9f4;border-radius:8px;background:#fbfdff;color:#3e5876;cursor:pointer}.gateway-zone-card:last-child{margin-bottom:0}.gateway-zone-card:hover,.gateway-zone-card:focus-visible{border-color:#79aeef;outline:none}.gateway-zone-card.active{border-color:var(--gateway-blue);background:#f1f8ff;box-shadow:inset 3px 0 var(--gateway-blue)}.gateway-zone-card span,.gateway-zone-card b,.gateway-zone-card small{display:block}.gateway-zone-card span{font-weight:700}.gateway-zone-card b{margin:4px 0;color:#5d7692;font-size:12px;font-weight:500}.gateway-zone-card small{color:#8092a8;font-size:11px}.gateway-zone-card i{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:#e35a5a}.gateway-zone-card i.ok{background:#18a66b}.gateway-zone-context{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:14px 16px;border-bottom:1px solid #e7eef6;background:#fbfdff}.gateway-zone-context span{display:block;color:#7a8da5;font-size:12px}.gateway-zone-context strong{color:var(--gateway-ink);font-size:16px}.gateway-workspace-main .gateway-tabs{padding:0 16px}.gateway-workspace-main .gateway-filter-bar{margin:14px;border:1px solid #e1eaf4;border-radius:9px;background:#fbfdff}.gateway-workspace-main .hardware-unavailable-banner{margin:0 14px 14px}.gateway-workspace-main .host-card-grid{padding:0 14px}.gateway-workspace-main .thermostat-table-wrap{margin:0 14px}.gateway-workspace-main .gateway-pagination{margin:0 14px}.gateway-drawer[hidden]{display:none}.gateway-drawer{position:fixed;z-index:60;top:var(--gateway-drawer-top,120px);right:0;bottom:0;width:min(520px,calc(100vw - 220px));margin:0;padding:0;border:0;background:#fff;box-shadow:-18px 0 36px rgba(21,56,98,.18);overflow:auto}.gateway-drawer .modal-box,.gateway-drawer .modal-box.small{width:100%;max-width:none;min-height:100%;margin:0;padding:24px;border:0;border-radius:0;box-shadow:none}.gateway-drawer .modal-box h3{margin-top:0}.gateway-drawer .modal-actions{position:sticky;bottom:-24px;margin:24px -24px -24px;padding:14px 24px;background:#fff;border-top:1px solid #e5edf5}.gateway-drawer .x{top:18px;right:18px}@media (max-width:1100px){.gateway-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.gateway-workspace{grid-template-columns:1fr}.gateway-zone-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:9px}.gateway-zone-panel-head{grid-column:1/-1;padding:7px;border:0}.gateway-zone-list{display:contents}.gateway-zone-card{margin:0}.gateway-drawer{width:min(520px,calc(100vw - 72px))}}@media (max-width:720px){.gateway-workspace-heading,.gateway-zone-context{display:block}.gateway-heading-actions{margin-top:12px}.gateway-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.gateway-summary .gateway-metric:last-child{grid-column:span 2}.gateway-zone-panel{grid-template-columns:1fr}.gateway-zone-context p{margin-top:5px}.gateway-drawer{width:100%;top:var(--gateway-drawer-top,112px)}.gateway-drawer .modal-box,.gateway-drawer .modal-box.small{padding:18px}.gateway-drawer .modal-actions{bottom:-18px;margin:18px -18px -18px;padding:13px 18px}}

/* UI-2026.07.16.02 · Meter reading records selected-layout reconstruction. */

body[data-route="meter-readings"] #viewHost .meter-readings-page {
  gap: 18px;
  min-width: 0;
}

body[data-route="meter-readings"] #viewHost .meter-readings-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: 4px 2px 2px;
}

body[data-route="meter-readings"] #viewHost .meter-readings-breadcrumb {
  margin: 0 0 7px;
  color: var(--muted);
  font-size: 12px;
}

body[data-route="meter-readings"] #viewHost .meter-readings-page-header h2 {
  margin: 0;
  color: var(--text);
  font-size: 25px;
  line-height: 1.18;
}

body[data-route="meter-readings"] #viewHost .meter-readings-description {
  max-width: 720px;
  margin: 8px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.65;
}

body[data-route="meter-readings"] #viewHost .readstats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

body[data-route="meter-readings"] #viewHost .readstat {
  min-height: 86px;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-panel);
  box-shadow: var(--shadow);
}

body[data-route="meter-readings"] #viewHost .readstat small {
  color: var(--text-soft);
  font-size: 12px;
}

body[data-route="meter-readings"] #viewHost .readstat :is(b, strong) {
  margin-top: 9px;
  color: var(--text);
  font-size: 24px;
  line-height: 1;
}

body[data-route="meter-readings"] #viewHost .readstat strong {
  color: var(--badge-green-text);
}

body[data-route="meter-readings"] #viewHost .readstat span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
}

body[data-route="meter-readings"] #viewHost .meter-reading-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-panel);
  box-shadow: var(--shadow);
}

body[data-route="meter-readings"] #viewHost .meter-reading-filter-fields {
  display: grid;
  grid-template-columns: repeat(6, minmax(126px, 1fr));
  align-items: end;
  gap: 12px;
  min-width: 0;
}

body[data-route="meter-readings"] #viewHost .meter-reading-filters .field {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body[data-route="meter-readings"] #viewHost .meter-reading-filters .field label {
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.2;
}

body[data-route="meter-readings"] #viewHost .meter-reading-filters .field :is(.inp, .wide) {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border-color: var(--line);
  background: var(--surface-panel-deep);
}

body[data-route="meter-readings"] #viewHost .meter-reading-address-field > div {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

body[data-route="meter-readings"] #viewHost .meter-reading-address-field select {
  flex: 1 1 auto;
}

body[data-route="meter-readings"] #viewHost .meter-reading-address-field .btn {
  flex: 0 0 auto;
  min-height: 38px;
}

body[data-route="meter-readings"] #viewHost .meter-reading-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

body[data-route="meter-readings"] #viewHost .meter-reading-filter-actions .btn {
  min-height: 36px;
  padding-inline: 15px;
}

body[data-route="meter-readings"] #viewHost .readbody {
  display: block;
  width: 100%;
}

body[data-route="meter-readings"] #viewHost .readtable {
  width: 100%;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-panel);
  box-shadow: var(--shadow);
}

body[data-route="meter-readings"] #viewHost .read-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: auto;
}

body[data-route="meter-readings"] #viewHost .read-table th,
body[data-route="meter-readings"] #viewHost .read-table td {
  height: 56px;
  padding: 0 13px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--text-soft);
  background: var(--surface-panel);
  font-size: 12px;
  text-align: left;
}

body[data-route="meter-readings"] #viewHost .read-table th {
  height: 42px;
  color: var(--muted);
  background: var(--surface-panel-muted);
  font-weight: 800;
}

body[data-route="meter-readings"] #viewHost .read-table tr:last-child td {
  border-bottom: 0;
}

body[data-route="meter-readings"] #viewHost .read-table tr.lk:hover td,
body[data-route="meter-readings"] #viewHost .read-table tr.lk.on td {
  border-color: var(--line);
  background: var(--surface-panel-muted);
}

body[data-route="meter-readings"] #viewHost .read-table :is(th, td):nth-child(1) { width: 52px; }
body[data-route="meter-readings"] #viewHost .read-table :is(th, td):nth-child(5),
body[data-route="meter-readings"] #viewHost .read-table :is(th, td):nth-child(6) { width: 102px; }
body[data-route="meter-readings"] #viewHost .read-table :is(th, td):nth-child(7) { width: 108px; }
body[data-route="meter-readings"] #viewHost .read-table :is(th, td):nth-child(8) { width: 112px; }
body[data-route="meter-readings"] #viewHost .read-table :is(th, td):nth-child(9) { width: 118px; }
body[data-route="meter-readings"] #viewHost .read-table :is(th, td):nth-child(10) { width: 74px; }

body[data-route="meter-readings"] #viewHost .readok,
body[data-route="meter-readings"] #viewHost .readwait {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid var(--line);
  background: var(--surface-panel-deep);
  font-size: 11px;
  line-height: 1;
}

body[data-route="meter-readings"] #viewHost .readok {
  color: var(--badge-green-text);
  background: var(--badge-green-bg);
}

body[data-route="meter-readings"] #viewHost .ledger-message {
  min-height: 18px;
  color: var(--text-soft);
  font-size: 12px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  body[data-responsive="real"][data-route="meter-readings"] #viewHost .meter-reading-filters {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-route="meter-readings"] #viewHost .meter-reading-filter-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  body[data-route="meter-readings"] #viewHost .meter-readings-page {
    gap: 14px;
  }

  body[data-route="meter-readings"] #viewHost .meter-readings-page-header h2 {
    font-size: 22px;
  }

  body[data-route="meter-readings"] #viewHost .meter-readings-description {
    font-size: 12px;
  }

  body[data-route="meter-readings"] #viewHost .readstats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  body[data-route="meter-readings"] #viewHost .readstat:last-child {
    grid-column: 1 / -1;
  }

  body[data-route="meter-readings"] #viewHost .readstat {
    min-height: 78px;
    padding: 13px;
  }

  body[data-route="meter-readings"] #viewHost .meter-reading-filters {
    gap: 12px;
    padding: 13px;
  }

  body[data-route="meter-readings"] #viewHost .meter-reading-filter-fields {
    grid-template-columns: minmax(0, 1fr);
    gap: 11px;
  }

  body[data-route="meter-readings"] #viewHost .meter-reading-filter-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-route="meter-readings"] #viewHost .meter-reading-filter-actions .btn {
    width: 100%;
    padding-inline: 6px;
  }

  body[data-route="meter-readings"] #viewHost .readtable {
    overscroll-behavior-inline: contain;
  }
}

/* Runtime records selected layout: keeps the business shell intact and restructures only the content area. */
body[data-route="runtime-records"] #viewHost .runtime-records-page {
  display: grid;
  gap: 14px;
  min-width: 0;
}

body[data-route="runtime-records"] #viewHost .runtime-page-heading {
  display: flex;
  align-items: flex-end;
  min-height: 66px;
  padding: 2px 2px 0;
}

body[data-route="runtime-records"] #viewHost .runtime-page-kicker {
  margin: 0 0 5px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

body[data-route="runtime-records"] #viewHost .runtime-page-heading h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.2;
}

body[data-route="runtime-records"] #viewHost .runtime-page-heading p:not(.runtime-page-kicker) {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
}

body[data-route="runtime-records"] #viewHost .runtime-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

body[data-route="runtime-records"] #viewHost .runtime-summary-card {
  display: grid;
  gap: 7px;
  min-height: 124px;
  padding: 18px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-panel);
  box-shadow: var(--shadow-sm);
}

body[data-route="runtime-records"] #viewHost .runtime-summary-card-today { border-top-color: var(--accent-blue); }
body[data-route="runtime-records"] #viewHost .runtime-summary-card-recorded { border-top-color: var(--accent); }
body[data-route="runtime-records"] #viewHost .runtime-summary-card-pending { border-top-color: var(--accent-blue); }
body[data-route="runtime-records"] #viewHost .runtime-summary-card-zero { border-top-color: var(--muted); }
body[data-route="runtime-records"] #viewHost .runtime-summary-card-review { border-top-color: var(--danger); }

body[data-route="runtime-records"] #viewHost .runtime-summary-label,
body[data-route="runtime-records"] #viewHost .runtime-summary-note {
  color: var(--muted);
  font-size: 12px;
}

body[data-route="runtime-records"] #viewHost .runtime-summary-value {
  color: var(--text);
  font-size: clamp(25px, 2vw, 33px);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

body[data-route="runtime-records"] #viewHost .runtime-summary-value small {
  margin-left: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

body[data-route="runtime-records"] #viewHost .runtime-date-strip {
  display: grid;
  grid-template-columns: minmax(190px, 246px) minmax(0, 1fr);
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-panel);
  box-shadow: var(--shadow-sm);
}

body[data-route="runtime-records"] #viewHost .runtime-date-range {
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 78px;
  padding: 14px 18px;
  border-right: 1px solid var(--line);
}

body[data-route="runtime-records"] #viewHost .runtime-date-range span,
body[data-route="runtime-records"] #viewHost .runtime-date-cell time,
body[data-route="runtime-records"] #viewHost .runtime-date-cell span {
  color: var(--muted);
  font-size: 12px;
}

body[data-route="runtime-records"] #viewHost .runtime-date-range strong {
  color: var(--text);
  font-size: 14px;
}

body[data-route="runtime-records"] #viewHost .runtime-date-list {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-width: 0;
}

body[data-route="runtime-records"] #viewHost .runtime-date-cell {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 78px;
  padding: 10px 12px;
  border-left: 1px solid var(--line);
}

body[data-route="runtime-records"] #viewHost .runtime-date-cell:first-child { border-left: 0; }

body[data-route="runtime-records"] #viewHost .runtime-date-cell strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-route="runtime-records"] #viewHost .runtime-date-cell.is-current {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-panel));
  box-shadow: inset 0 0 0 1px var(--accent);
}

body[data-route="runtime-records"] #viewHost .runtime-ledger-layout {
  grid-template-columns: minmax(238px, 260px) minmax(0, 1fr) !important;
  align-items: stretch;
  gap: 12px !important;
}

body[data-route="runtime-records"] #viewHost .runtime-main {
  display: grid;
  min-width: 0;
  gap: 12px;
}

body[data-route="runtime-records"] #viewHost .runtime-control-tree {
  min-width: 0;
  min-height: 100%;
  padding: 14px !important;
  border: 1px solid var(--line);
  background: var(--surface-panel);
  box-shadow: var(--shadow-sm);
}

body[data-route="runtime-records"] #viewHost .runtime-filter-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-panel);
  box-shadow: var(--shadow-sm);
}

body[data-route="runtime-records"] #viewHost .runtime-filters.runtime-filter-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px !important;
}

body[data-route="runtime-records"] #viewHost .runtime-filters.runtime-filter-grid .field {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  min-height: 38px;
  padding: 0 !important;
  border: 0;
}

body[data-route="runtime-records"] #viewHost .runtime-filters.runtime-filter-grid label {
  color: var(--text-soft);
  font-size: 13px;
  white-space: nowrap;
}

body[data-route="runtime-records"] #viewHost .runtime-filters.runtime-filter-grid .inp,
body[data-route="runtime-records"] #viewHost .runtime-filters.runtime-filter-grid .wide {
  width: 100% !important;
  min-width: 0;
}

body[data-route="runtime-records"] #viewHost .runtime-filter-actions,
body[data-route="runtime-records"] #viewHost .runtime-filter-actions-primary,
body[data-route="runtime-records"] #viewHost .runtime-filter-actions-secondary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-route="runtime-records"] #viewHost .runtime-filter-actions {
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

body[data-route="runtime-records"] #viewHost .runtime-filter-actions .btn {
  min-width: 78px;
}

body[data-route="runtime-records"] #viewHost .runtable {
  min-width: 0;
  padding: 0 !important;
  overflow-x: auto !important;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-panel);
  box-shadow: var(--shadow-sm);
}

body[data-route="runtime-records"] #viewHost .run-table {
  min-width: 960px;
  table-layout: auto !important;
}

body[data-route="runtime-records"] #viewHost .run-table th,
body[data-route="runtime-records"] #viewHost .run-table td {
  width: auto !important;
  height: 40px;
  padding: 0 12px !important;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 13px;
  text-align: center;
  white-space: nowrap;
}

body[data-route="runtime-records"] #viewHost .run-table th {
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 700;
  background: var(--surface-panel-muted);
}

body[data-route="runtime-records"] #viewHost .run-table tbody tr:last-child td { border-bottom: 0; }

body[data-route="runtime-records"] #viewHost .run-table tr.lk:hover td,
body[data-route="runtime-records"] #viewHost .run-table tr.lk.on td {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-panel));
}

body[data-route="runtime-records"] #viewHost .run-table td:nth-child(9) .tag {
  display: inline-flex;
  width: auto;
  min-width: 54px;
  justify-content: center;
}

@media (max-width: 1279px) {
  body[data-route="runtime-records"] #viewHost .runtime-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-route="runtime-records"] #viewHost .runtime-date-strip {
    grid-template-columns: 1fr;
  }

  body[data-route="runtime-records"] #viewHost .runtime-date-range {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 1023px) {
  body[data-route="runtime-records"] #viewHost .runtime-ledger-layout {
    grid-template-columns: minmax(210px, 236px) minmax(0, 1fr) !important;
  }

  body[data-route="runtime-records"] #viewHost .runtime-filters.runtime-filter-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  body[data-route="runtime-records"] #viewHost .runtime-page-heading {
    min-height: 0;
  }

  body[data-route="runtime-records"] #viewHost .runtime-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-route="runtime-records"] #viewHost .runtime-summary-card {
    min-height: 108px;
    padding: 14px;
  }

  body[data-route="runtime-records"] #viewHost .runtime-ledger-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-route="runtime-records"] #viewHost .runtime-control-tree {
    min-height: 260px;
  }

  body[data-route="runtime-records"] #viewHost .runtime-date-list {
    grid-template-columns: repeat(7, minmax(118px, 1fr));
    overflow-x: auto;
  }

  body[data-route="runtime-records"] #viewHost .runtime-filter-actions {
    align-items: stretch;
  }

  body[data-route="runtime-records"] #viewHost .runtime-filter-actions-primary,
  body[data-route="runtime-records"] #viewHost .runtime-filter-actions-secondary {
    width: 100%;
  }
}

@media (max-width: 480px) {
  body[data-route="runtime-records"] #viewHost .runtime-summary-grid {
    grid-template-columns: 1fr;
  }

  body[data-route="runtime-records"] #viewHost .runtime-filters.runtime-filter-grid .field {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  body[data-route="runtime-records"] #viewHost .runtime-filter-actions .btn {
    flex: 1 1 92px;
  }
}

@media (min-width: 1280px) and (max-width: 1599px) {
  body[data-responsive="real"][data-route="prepaid-tenants"] #viewHost .tenant-management-toolbar {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

body[data-shell="business"][data-skin="light"][data-route="room-bindings"] #viewHost .room-binding-compact :is(
  .room-tree-copy small,
  .room-tree-count
) {
  color: #607188;
  font-weight: 500;
}

@media (max-width: 767px) {
  body[data-responsive="real"][data-route="daily-usage"] #viewHost .daily-filters .field:nth-child(1) {
    width: 100%;
    max-width: 100%;
  }

  body[data-responsive="real"][data-route="daily-usage"] #viewHost .daily-filters .field:nth-child(1) .wide {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }

  body[data-responsive="real"][data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-workbench-filter :is(
    .schedule-filter-field,
    .schedule-filter-field.wide
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    min-width: 0;
  }

  body[data-responsive="real"][data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-workbench-filter .schedule-range {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0;
  }

  body[data-responsive="real"][data-shell="business"][data-skin="light"][data-route="schedules"] #viewHost .schedule-workbench-filter .schedule-range .inp {
    width: 100%;
    min-width: 0;
  }

  body[data-responsive="real"][data-route="environment"] #viewHost .environment-monitor-main {
    padding-bottom: 108px;
  }

  body[data-responsive="real"][data-route="environment"] #viewHost .environment-monitor-pager {
    box-sizing: border-box;
    flex-wrap: wrap;
    gap: 6px 8px;
    width: 100%;
    max-width: 100%;
    padding-inline: 8px;
  }

  body[data-responsive="real"][data-route="environment"] #viewHost .environment-monitor-pager label {
    max-width: 100%;
  }

}
/* UI-2026.07.16.06 prepaid tenant archive */
body[data-route="prepaid-tenants"] #viewHost .tenant-archive-page { gap:18px; padding:0 12px 20px; }
body[data-route="prepaid-tenants"] #viewHost .tenant-archive-heading { display:flex; justify-content:space-between; gap:18px; align-items:start; padding:4px 2px 0; }
body[data-route="prepaid-tenants"] #viewHost .tenant-archive-heading p { margin:0 0 6px; color:var(--blue); font-size:12px; } body[data-route="prepaid-tenants"] #viewHost .tenant-archive-heading h2 { margin:0; color:var(--text); font-size:23px; } body[data-route="prepaid-tenants"] #viewHost .tenant-archive-heading span { display:block; margin-top:8px; color:var(--muted); font-size:13px; } body[data-route="prepaid-tenants"] #viewHost .tenant-archive-heading b { color:var(--blue); font-size:13px; }
body[data-route="prepaid-tenants"] #viewHost .tenant-summary-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; } body[data-route="prepaid-tenants"] #viewHost .tenant-summary-card { min-width:0; padding:16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface-panel); } body[data-route="prepaid-tenants"] #viewHost .tenant-summary-card span, body[data-route="prepaid-tenants"] #viewHost .tenant-summary-card small { display:block; color:var(--muted); font-size:12px; } body[data-route="prepaid-tenants"] #viewHost .tenant-summary-card strong { display:block; margin:10px 0 7px; color:var(--text); font-size:27px; }
body[data-route="prepaid-tenants"] #viewHost .tenant-archive-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(270px,.32fr); gap:16px; align-items:start; } body[data-route="prepaid-tenants"] #viewHost .tenant-archive-main { display:grid; gap:12px; min-width:0; } body[data-route="prepaid-tenants"] #viewHost .tenant-account-insight { min-width:0; padding:18px; border-left:1px solid var(--line); background:var(--surface-panel); } body[data-route="prepaid-tenants"] #viewHost .tenant-insight-head p { margin:0; color:var(--blue); font-size:12px; } body[data-route="prepaid-tenants"] #viewHost .tenant-insight-head h3 { margin:8px 0 4px; color:var(--text); font-size:16px; } body[data-route="prepaid-tenants"] #viewHost .tenant-insight-head span, body[data-route="prepaid-tenants"] #viewHost .tenant-account-insight dt, body[data-route="prepaid-tenants"] #viewHost .tenant-account-insight li span { color:var(--muted); font-size:12px; } body[data-route="prepaid-tenants"] #viewHost .tenant-account-insight dl { display:grid; gap:12px; margin:20px 0; } body[data-route="prepaid-tenants"] #viewHost .tenant-account-insight dl div { display:flex; justify-content:space-between; gap:12px; } body[data-route="prepaid-tenants"] #viewHost .tenant-account-insight dd { margin:0; color:var(--text); font-size:13px; font-weight:600; text-align:right; } body[data-route="prepaid-tenants"] #viewHost .tenant-insight-transactions { border-top:1px solid var(--line); padding-top:14px; } body[data-route="prepaid-tenants"] #viewHost .tenant-insight-transactions ol { display:grid; gap:12px; margin:12px 0 0; padding:0; list-style:none; } body[data-route="prepaid-tenants"] #viewHost .tenant-insight-transactions li { display:grid; gap:3px; } body[data-route="prepaid-tenants"] #viewHost .tenant-insight-transactions li b { color:var(--text); font-size:13px; } body[data-route="prepaid-tenants"] #viewHost .tenant-insight-transactions li em { color:var(--green); font-size:12px; font-style:normal; }
body[data-route="prepaid-tenants"] #viewHost .tenant-management-toolbar { grid-template-columns:repeat(4,minmax(0,1fr)) auto; padding:14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface-panel); } body[data-route="prepaid-tenants"] #viewHost .tenant-archive-controls { display:grid; gap:10px; } body[data-route="prepaid-tenants"] #viewHost .tenant-archive-actions, body[data-route="prepaid-tenants"] #viewHost .tenant-archive-secondary-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; } body[data-route="prepaid-tenants"] #viewHost .tenant-archive-secondary-actions button { border:0; color:var(--blue); background:transparent; cursor:pointer; } body[data-route="prepaid-tenants"] #viewHost .tenant-archive-secondary-actions .tenant-toolbar-total { margin-left:auto; }
body[data-route="prepaid-tenants"] #viewHost .tenant-drawer-backdrop { top:var(--chrome-height,64px); z-index:80; display:block; background:color-mix(in srgb,var(--text) 20%,transparent); } body[data-route="prepaid-tenants"] #viewHost .tenant-account-drawer { width:min(420px,100%); height:calc(100vh - var(--chrome-height,64px)); margin-left:auto; overflow:auto; border:0; border-radius:0; background:var(--surface-panel); color:var(--text); } body[data-route="prepaid-tenants"] #viewHost .tenant-drawer-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:0 0 18px; padding:0; list-style:none; } body[data-route="prepaid-tenants"] #viewHost .tenant-drawer-steps li { display:grid; gap:5px; color:var(--muted); font-size:12px; } body[data-route="prepaid-tenants"] #viewHost .tenant-drawer-steps b { display:grid; width:24px; height:24px; place-items:center; border-radius:50%; color:var(--blue); background:var(--overlay-blue); } body[data-route="prepaid-tenants"] #viewHost .tenant-drawer-section { margin-top:20px; padding-top:14px; border-top:1px solid var(--line); } body[data-route="prepaid-tenants"] #viewHost .tenant-drawer-section h4 { margin:0 0 5px; color:var(--text); } body[data-route="prepaid-tenants"] #viewHost .tenant-drawer-section p { margin:0 0 14px; color:var(--muted); font-size:12px; }
@media (max-width:1279px) { body[data-route="prepaid-tenants"] #viewHost .tenant-summary-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } body[data-route="prepaid-tenants"] #viewHost .tenant-archive-layout { grid-template-columns:1fr; } body[data-route="prepaid-tenants"] #viewHost .tenant-account-insight { border:1px solid var(--line); border-radius:var(--radius); } }
@media (max-width:767px) { body[data-route="prepaid-tenants"] #viewHost .tenant-summary-grid, body[data-route="prepaid-tenants"] #viewHost .tenant-management-toolbar { grid-template-columns:1fr; } body[data-route="prepaid-tenants"] #viewHost .tenant-archive-heading { display:block; } body[data-route="prepaid-tenants"] #viewHost .tenant-archive-heading b { display:block; margin-top:10px; } body[data-route="prepaid-tenants"] #viewHost .tenant-archive-secondary-actions .tenant-toolbar-total { margin-left:0; width:100%; } body[data-route="prepaid-tenants"] #viewHost .tenant-account-drawer { width:100%; } }


/* UI-2026.07.16.06 prepaid tenant archive drawer interaction guard. */
body[data-route="prepaid-tenants"] #viewHost .tenant-drawer-backdrop[hidden] { display:none; }
body[data-route="prepaid-tenants"] #viewHost .tenant-drawer-backdrop { position:fixed; inset:var(--tenant-drawer-top,69px) 0 0 0; top:var(--tenant-drawer-top,69px); z-index:80; display:grid; justify-items:end; background:color-mix(in srgb,var(--text) 20%,transparent); }
body[data-route="prepaid-tenants"] #viewHost .tenant-account-drawer { box-sizing:border-box; width:min(340px,100%); height:calc(100dvh - var(--tenant-drawer-top,69px)); max-height:calc(100dvh - var(--tenant-drawer-top,69px)); margin:0; padding:20px; overflow:auto; border:0; border-radius:0; background:var(--surface-panel); color:var(--text); box-shadow:-16px 0 36px color-mix(in srgb,var(--text) 18%,transparent); }
body[data-route="prepaid-tenants"] #viewHost .tenant-drawer-steps { gap:8px; padding-bottom:14px; border-bottom:1px solid var(--line); }
body[data-route="prepaid-tenants"] #viewHost .tenant-drawer-steps li { min-width:0; }
body[data-route="prepaid-tenants"] #viewHost .tenant-drawer-steps button { display:grid; gap:5px; width:100%; padding:0; border:0; background:transparent; color:var(--muted); text-align:left; cursor:pointer; }
body[data-route="prepaid-tenants"] #viewHost .tenant-drawer-steps button b { color:var(--blue); background:var(--overlay-blue); }
body[data-route="prepaid-tenants"] #viewHost .tenant-drawer-steps button.active { color:var(--text); font-weight:700; }
body[data-route="prepaid-tenants"] #viewHost .tenant-drawer-steps button.active b { color:var(--surface-panel); background:var(--blue); }
body[data-route="prepaid-tenants"] #viewHost .tenant-drawer-section[hidden] { display:none; }
body[data-route="prepaid-tenants"] #viewHost .tenant-drawer-section { display:grid; gap:12px; }
body[data-route="prepaid-tenants"] #viewHost .tenant-drawer-section label { display:grid; gap:6px; color:var(--muted); font-size:12px; }
body[data-route="prepaid-tenants"] #viewHost .tenant-zone-feedback { display:flex; justify-content:space-between; gap:12px; margin:0; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--overlay-blue); color:var(--muted); }
body[data-route="prepaid-tenants"] #viewHost .tenant-zone-feedback strong { color:var(--blue); font-size:12px; }
body[data-route="prepaid-tenants"] #viewHost .tenant-zone-feedback span { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body[data-route="prepaid-tenants"] #viewHost .tenant-zone-tree { display:grid; gap:7px; max-height:320px; padding:4px; overflow:auto; border:1px solid var(--line); border-radius:9px; background:color-mix(in srgb,var(--surface-panel) 92%,var(--overlay-blue)); }
body[data-route="prepaid-tenants"] #viewHost .tenant-zone-tree-item { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:10px; border:1px solid transparent; border-radius:7px; background:transparent; color:var(--text); text-align:left; cursor:pointer; }
body[data-route="prepaid-tenants"] #viewHost .tenant-zone-tree-item:hover, body[data-route="prepaid-tenants"] #viewHost .tenant-zone-tree-item:focus-visible { border-color:var(--blue); outline:none; }
body[data-route="prepaid-tenants"] #viewHost .tenant-zone-tree-item.active { border-color:var(--blue); background:var(--overlay-blue); }
body[data-route="prepaid-tenants"] #viewHost .tenant-zone-tree-item span { display:grid; gap:3px; min-width:0; }
body[data-route="prepaid-tenants"] #viewHost .tenant-zone-tree-item b { font-size:12px; }
body[data-route="prepaid-tenants"] #viewHost .tenant-zone-tree-item small { color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body[data-route="prepaid-tenants"] #viewHost .tenant-zone-tree-item i { width:16px; height:16px; flex:0 0 16px; border:1px solid var(--line); border-radius:4px; background:var(--surface-panel); }
body[data-route="prepaid-tenants"] #viewHost .tenant-zone-tree-item.active i { border-color:var(--blue); background:var(--blue); box-shadow:inset 0 0 0 3px var(--surface-panel); }
body[data-route="prepaid-tenants"] #viewHost .tenant-zone-native-select { padding-top:4px; border-top:1px solid var(--line); }
body[data-route="prepaid-tenants"] #viewHost .tenant-drawer-review dl { display:grid; gap:10px; margin:0; padding:12px; border:1px solid var(--line); border-radius:9px; background:var(--overlay-blue); }
body[data-route="prepaid-tenants"] #viewHost .tenant-drawer-review dl div { display:flex; justify-content:space-between; gap:12px; }
body[data-route="prepaid-tenants"] #viewHost .tenant-drawer-review dt { color:var(--muted); font-size:12px; }
body[data-route="prepaid-tenants"] #viewHost .tenant-drawer-review dd { max-width:60%; margin:0; color:var(--text); font-size:12px; font-weight:700; overflow:hidden; text-align:right; text-overflow:ellipsis; white-space:nowrap; }
body[data-route="prepaid-tenants"] #viewHost .tenant-dialog-actions { position:sticky; bottom:-20px; margin:8px -20px -20px; padding:14px 20px; border-top:1px solid var(--line); background:var(--surface-panel); }
body[data-route="prepaid-tenants"] #viewHost .tenant-table-panel { overflow:auto; }
@media (max-width:767px) {
  body[data-route="prepaid-tenants"] #viewHost .tenant-drawer-backdrop { justify-items:stretch; }
  body[data-route="prepaid-tenants"] #viewHost .tenant-account-drawer { width:100%; padding:16px; }
  body[data-route="prepaid-tenants"] #viewHost .tenant-zone-native-select { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  body[data-route="prepaid-tenants"] #viewHost .tenant-drawer-section { padding-bottom:66px; }
  body[data-route="prepaid-tenants"] #viewHost .tenant-dialog-actions { position:fixed; right:0; bottom:0; left:0; z-index:4; margin:0; padding:12px 16px; box-shadow:0 -8px 20px color-mix(in srgb,var(--text) 12%,transparent); }
  body[data-route="prepaid-tenants"] #viewHost .tenant-zone-tree { max-height:125px; }
}


@media (min-width:1280px) {
  body[data-route="prepaid-tenants"] #viewHost .tenant-archive-page.tenant-drawer-open .tenant-archive-heading,
  body[data-route="prepaid-tenants"] #viewHost .tenant-archive-page.tenant-drawer-open .tenant-summary-grid,
  body[data-route="prepaid-tenants"] #viewHost .tenant-archive-page.tenant-drawer-open .tenant-archive-layout { margin-right:340px; }
}

/* UI-2026.07.16.02 · Meter reading records selected-layout reconstruction. */

body[data-route="meter-readings"] #viewHost .meter-readings-page {
  gap: 18px;
  min-width: 0;
}

body[data-route="meter-readings"] #viewHost .meter-readings-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: 4px 2px 2px;
}

body[data-route="meter-readings"] #viewHost .meter-readings-breadcrumb {
  margin: 0 0 7px;
  color: var(--muted);
  font-size: 12px;
}

body[data-route="meter-readings"] #viewHost .meter-readings-page-header h2 {
  margin: 0;
  color: var(--text);
  font-size: 25px;
  line-height: 1.18;
}

body[data-route="meter-readings"] #viewHost .meter-readings-description {
  max-width: 720px;
  margin: 8px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.65;
}

body[data-route="meter-readings"] #viewHost .readstats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

body[data-route="meter-readings"] #viewHost .readstat {
  min-height: 86px;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-panel);
  box-shadow: var(--shadow);
}

body[data-route="meter-readings"] #viewHost .readstat small {
  color: var(--text-soft);
  font-size: 12px;
}

body[data-route="meter-readings"] #viewHost .readstat :is(b, strong) {
  margin-top: 9px;
  color: var(--text);
  font-size: 24px;
  line-height: 1;
}

body[data-route="meter-readings"] #viewHost .readstat strong {
  color: var(--badge-green-text);
}

body[data-route="meter-readings"] #viewHost .readstat span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
}

body[data-route="meter-readings"] #viewHost .meter-reading-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-panel);
  box-shadow: var(--shadow);
}

body[data-route="meter-readings"] #viewHost .meter-reading-filter-fields {
  display: grid;
  grid-template-columns: repeat(6, minmax(126px, 1fr));
  align-items: end;
  gap: 12px;
  min-width: 0;
}

body[data-route="meter-readings"] #viewHost .meter-reading-filters .field {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body[data-route="meter-readings"] #viewHost .meter-reading-filters .field label {
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.2;
}

body[data-route="meter-readings"] #viewHost .meter-reading-filters .field :is(.inp, .wide) {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border-color: var(--line);
  background: var(--surface-panel-deep);
}

body[data-route="meter-readings"] #viewHost .meter-reading-address-field > div {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

body[data-route="meter-readings"] #viewHost .meter-reading-address-field select {
  flex: 1 1 auto;
}

body[data-route="meter-readings"] #viewHost .meter-reading-address-field .btn {
  flex: 0 0 auto;
  min-height: 38px;
}

body[data-route="meter-readings"] #viewHost .meter-reading-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

body[data-route="meter-readings"] #viewHost .meter-reading-filter-actions .btn {
  min-height: 36px;
  padding-inline: 15px;
}

body[data-route="meter-readings"] #viewHost .readbody {
  display: block;
  width: 100%;
}

body[data-route="meter-readings"] #viewHost .readtable {
  width: 100%;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-panel);
  box-shadow: var(--shadow);
}

body[data-route="meter-readings"] #viewHost .read-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: auto;
}

body[data-route="meter-readings"] #viewHost .read-table th,
body[data-route="meter-readings"] #viewHost .read-table td {
  height: 56px;
  padding: 0 13px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--text-soft);
  background: var(--surface-panel);
  font-size: 12px;
  text-align: left;
}

body[data-route="meter-readings"] #viewHost .read-table th {
  height: 42px;
  color: var(--muted);
  background: var(--surface-panel-muted);
  font-weight: 800;
}

body[data-route="meter-readings"] #viewHost .read-table tr:last-child td {
  border-bottom: 0;
}

body[data-route="meter-readings"] #viewHost .read-table tr.lk:hover td,
body[data-route="meter-readings"] #viewHost .read-table tr.lk.on td {
  border-color: var(--line);
  background: var(--surface-panel-muted);
}

body[data-route="meter-readings"] #viewHost .read-table :is(th, td):nth-child(1) { width: 52px; }
body[data-route="meter-readings"] #viewHost .read-table :is(th, td):nth-child(5),
body[data-route="meter-readings"] #viewHost .read-table :is(th, td):nth-child(6) { width: 102px; }
body[data-route="meter-readings"] #viewHost .read-table :is(th, td):nth-child(7) { width: 108px; }
body[data-route="meter-readings"] #viewHost .read-table :is(th, td):nth-child(8) { width: 112px; }
body[data-route="meter-readings"] #viewHost .read-table :is(th, td):nth-child(9) { width: 118px; }
body[data-route="meter-readings"] #viewHost .read-table :is(th, td):nth-child(10) { width: 74px; }

body[data-route="meter-readings"] #viewHost .readok,
body[data-route="meter-readings"] #viewHost .readwait {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid var(--line);
  background: var(--surface-panel-deep);
  font-size: 11px;
  line-height: 1;
}

body[data-route="meter-readings"] #viewHost .readok {
  color: var(--badge-green-text);
  background: var(--badge-green-bg);
}

body[data-route="meter-readings"] #viewHost .ledger-message {
  min-height: 18px;
  color: var(--text-soft);
  font-size: 12px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  body[data-responsive="real"][data-route="meter-readings"] #viewHost .meter-reading-filters {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-route="meter-readings"] #viewHost .meter-reading-filter-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  body[data-route="meter-readings"] #viewHost .meter-readings-page {
    gap: 14px;
  }

  body[data-route="meter-readings"] #viewHost .meter-readings-page-header h2 {
    font-size: 22px;
  }

  body[data-route="meter-readings"] #viewHost .meter-readings-description {
    font-size: 12px;
  }

  body[data-route="meter-readings"] #viewHost .readstats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  body[data-route="meter-readings"] #viewHost .readstat:last-child {
    grid-column: 1 / -1;
  }

  body[data-route="meter-readings"] #viewHost .readstat {
    min-height: 78px;
    padding: 13px;
  }

  body[data-route="meter-readings"] #viewHost .meter-reading-filters {
    gap: 12px;
    padding: 13px;
  }

  body[data-route="meter-readings"] #viewHost .meter-reading-filter-fields {
    grid-template-columns: minmax(0, 1fr);
    gap: 11px;
  }

  body[data-route="meter-readings"] #viewHost .meter-reading-filter-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-route="meter-readings"] #viewHost .meter-reading-filter-actions .btn {
    width: 100%;
    padding-inline: 6px;
  }

  body[data-route="meter-readings"] #viewHost .readtable {
    overscroll-behavior-inline: contain;
  }
}

/* UI-2026.07.16.07: selected billing zone-ledger inner workspace. */
body[data-route="billing"] #viewHost .billing-query-board{display:grid;gap:14px;min-width:0}
body[data-route="billing"] #viewHost .billing-zone-ledger-heading{display:flex;align-items:end;justify-content:space-between;gap:18px}
body[data-route="billing"] #viewHost .billing-zone-ledger-heading small,body[data-route="billing"] #viewHost .billing-zone-ledger-heading p,body[data-route="billing"] #viewHost .billing-zone-ledger-context span,body[data-route="billing"] #viewHost .billing-zone-ledger-context small{color:var(--muted)}
body[data-route="billing"] #viewHost .billing-zone-ledger-heading h2,body[data-route="billing"] #viewHost .billing-zone-ledger-heading p{margin:0}
body[data-route="billing"] #viewHost .billing-zone-ledger-heading h2{margin-top:3px;color:var(--text-heading);font-size:22px}
body[data-route="billing"] #viewHost .billing-zone-ledger-heading p{margin-top:5px;font-size:13px}
body[data-route="billing"] #viewHost .billing-zone-ledger-heading>span{padding:6px 10px;border:1px solid var(--line);border-radius:999px;color:var(--accent-blue);background:var(--overlay-blue-faint);font-size:12px;font-weight:700;white-space:nowrap}
body[data-route="billing"] #viewHost .billing-zone-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
body[data-route="billing"] #viewHost .billing-zone-summary-card{position:relative;min-height:92px;overflow:hidden;padding:13px 15px;border:1px solid var(--line);border-radius:11px;background:var(--surface-panel);box-shadow:var(--shadow)}
body[data-route="billing"] #viewHost .billing-zone-summary-card:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--accent-blue)}
body[data-route="billing"] #viewHost .billing-zone-summary-card.card-3:before{background:var(--green)}body[data-route="billing"] #viewHost .billing-zone-summary-card.card-4:before{background:var(--amber)}body[data-route="billing"] #viewHost .billing-zone-summary-card.card-5:before{background:var(--danger)}
body[data-route="billing"] #viewHost .billing-zone-summary-card span,body[data-route="billing"] #viewHost .billing-zone-summary-card small{display:block;color:var(--muted);font-size:12px}body[data-route="billing"] #viewHost .billing-zone-summary-card strong{display:block;margin:6px 0 3px;color:var(--text-heading);font-size:24px;line-height:1}
body[data-route="billing"] #viewHost .billing-zone-ledger-layout{display:grid;grid-template-columns:minmax(220px,260px) minmax(0,1fr);align-items:start;gap:14px}
body[data-route="billing"] #viewHost .billing-zone-ledger-tree .billing-building-tree{min-height:min(680px,calc(100vh - 252px));border-radius:11px}
body[data-route="billing"] #viewHost .billing-zone-ledger-main{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:11px;background:var(--surface-panel);box-shadow:var(--shadow)}
body[data-route="billing"] #viewHost .billing-zone-ledger-context{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 10px;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--surface-panel-deep)}
body[data-route="billing"] #viewHost .billing-zone-ledger-context strong{color:var(--text-heading);font-size:14px}body[data-route="billing"] #viewHost .billing-zone-ledger-context small{grid-column:1/-1;font-size:12px}
body[data-route="billing"] #viewHost .billing-zone-ledger-main .billing-query-toolbar{margin:0;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--surface-panel)}
body[data-route="billing"] #viewHost .billing-zone-ledger-main .billing-table-card{border:0;border-radius:0;box-shadow:none}
@media (max-width:1279px){body[data-route="billing"] #viewHost .billing-zone-summary{grid-template-columns:repeat(3,minmax(0,1fr))}body[data-route="billing"] #viewHost .billing-zone-ledger-layout{grid-template-columns:minmax(198px,228px) minmax(0,1fr)}}
@media (max-width:767px){body[data-route="billing"] #viewHost .billing-zone-ledger-heading{align-items:start;flex-direction:column;gap:7px}body[data-route="billing"] #viewHost .billing-zone-ledger-heading h2{font-size:20px}body[data-route="billing"] #viewHost .billing-zone-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}body[data-route="billing"] #viewHost .billing-zone-summary-card:last-child{grid-column:span 2}body[data-route="billing"] #viewHost .billing-zone-ledger-layout{grid-template-columns:minmax(0,1fr)}body[data-route="billing"] #viewHost .billing-zone-ledger-tree .billing-building-tree{min-height:0}body[data-route="billing"] #viewHost .billing-zone-ledger-tree .billing-control-tree{max-height:220px;overflow:auto}body[data-route="billing"] #viewHost .billing-zone-ledger-main .billing-query-toolbar{align-items:stretch}body[data-route="billing"] #viewHost .billing-zone-ledger-main .billing-query-toolbar .inp{width:100%}body[data-route="billing"] #viewHost .billing-zone-ledger-main .billing-query-toolbar .btn{flex:1 1 90px}}

/* UI-2026.08.29.01: canonical Feiyi read facts, with registration and online kept separate. */
#viewHost .feiyi-overview{display:grid;gap:14px;margin-top:14px;padding:16px;border:1px solid color-mix(in srgb,var(--accent-blue) 28%,var(--line));border-left:4px solid var(--accent-blue);border-radius:12px;background:var(--surface-panel-deep)}
#viewHost .feiyi-overview-heading{display:flex;align-items:center;justify-content:space-between;gap:14px}#viewHost .feiyi-overview-heading small{color:var(--accent-blue);font:700 10px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase}#viewHost .feiyi-overview-heading h3{margin:3px 0 0;color:var(--text-heading);font-size:19px}
#viewHost .feiyi-truth-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}#viewHost .feiyi-truth-grid>div{min-width:0;padding:11px 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface-panel)}#viewHost .feiyi-truth-grid small,#viewHost .feiyi-truth-grid span{display:block;color:var(--muted);font-size:11px}#viewHost .feiyi-truth-grid b{display:block;margin:5px 0 3px;color:var(--text-heading);font-size:14px}
#viewHost .feiyi-overview-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#viewHost .feiyi-overview-columns>section,#viewHost .feiyi-topology,#viewHost .feiyi-capabilities,#viewHost .feiyi-bound-facts{min-width:0;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-panel)}#viewHost .feiyi-overview h4,#viewHost .feiyi-bound-facts h3{margin:0 0 9px;color:var(--text-heading);font-size:13px}
#viewHost .feiyi-overview dl{display:grid;gap:6px;margin:0}#viewHost .feiyi-overview dl>div{display:grid;grid-template-columns:minmax(92px,.55fr) minmax(0,1fr);gap:10px;padding-bottom:6px;border-bottom:1px solid var(--line)}#viewHost .feiyi-overview dt{color:var(--muted);font-size:11px}#viewHost .feiyi-overview dd{min-width:0;margin:0;overflow-wrap:anywhere;color:var(--text-heading);font:600 12px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace}
#viewHost .feiyi-topology-table,#viewHost .feiyi-capabilities{display:grid;gap:6px}#viewHost .feiyi-topology-row,#viewHost .feiyi-capability-row{display:grid;grid-template-columns:minmax(72px,.7fr) repeat(4,minmax(72px,1fr)) minmax(64px,.6fr);align-items:center;gap:8px;padding:8px 9px;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:11px}#viewHost .feiyi-topology-row b,#viewHost .feiyi-capability-row b{color:var(--text-heading)}#viewHost .feiyi-topology-row em,#viewHost .feiyi-capability-row em{color:var(--accent-blue);font-style:normal;font-weight:700}
#viewHost .feiyi-device-fact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-column:1/-1;gap:1px;width:100%;margin:7px 0 0;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:var(--line)}#viewHost .feiyi-device-fact>div{min-width:0;padding:7px 8px;background:var(--surface-panel)}#viewHost .feiyi-device-fact dt{color:var(--muted);font-size:10px}#viewHost .feiyi-device-fact dd{margin:3px 0 0;overflow-wrap:anywhere;color:var(--text-heading);font-size:11px;font-weight:700;white-space:normal}#viewHost .feiyi-bound-facts{display:grid;gap:8px;margin-top:12px}
@media (max-width:1023px){#viewHost .feiyi-truth-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#viewHost .feiyi-topology-row,#viewHost .feiyi-capability-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){#viewHost .feiyi-overview{padding:12px}#viewHost .feiyi-overview-columns{grid-template-columns:minmax(0,1fr)}#viewHost .feiyi-device-fact{grid-template-columns:repeat(2,minmax(0,1fr))}#viewHost .feiyi-topology-row,#viewHost .feiyi-capability-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}#viewHost .feiyi-overview-heading{align-items:flex-start;flex-direction:column}}

/* UI-2026.08.31.01: truthful AC control feedback and readable lock policy controls. */
body[data-route="ac-control"] #viewHost .control-panel-section-lock .panel-title.compact {
  height: auto;
  min-height: 29px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 8px;
  align-items: center;
}

body[data-route="ac-control"] #viewHost .control-panel-section-lock .panel-title.compact > h3 {
  grid-column: 1;
  grid-row: 1;
}

body[data-route="ac-control"] #viewHost .control-panel-section-lock .panel-title.compact > .title-actions {
  grid-column: 2;
  grid-row: 1;
  flex-wrap: nowrap;
  gap: 6px;
}

body[data-route="ac-control"] #viewHost .control-panel-section-lock .panel-title.compact > .control-policy-status {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: start;
}

body[data-route="ac-control"] #viewHost .control-policy-status {
  max-width: 100%;
  margin-right: 0;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-panel-deep);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.35;
  white-space: normal;
}

body[data-route="ac-control"] #viewHost .control-policy-status.active {
  border-color: color-mix(in srgb, var(--green) 42%, var(--line));
  color: var(--green);
  background: color-mix(in srgb, var(--green) 10%, var(--surface-panel));
}

body[data-route="ac-control"] #viewHost .control-policy-status.pending {
  border-color: color-mix(in srgb, var(--accent-blue) 46%, var(--line));
  color: var(--accent-blue);
  background: color-mix(in srgb, var(--accent-blue) 10%, var(--surface-panel));
}

body[data-route="ac-control"] #viewHost .control-policy-status.unconfirmed {
  border-color: color-mix(in srgb, var(--amber) 48%, var(--line));
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 10%, var(--surface-panel));
}

body[data-route="ac-control"] #viewHost .control-policy-status.failed {
  border-color: color-mix(in srgb, var(--danger) 52%, var(--line));
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 9%, var(--surface-panel));
}

body[data-route="ac-control"] #viewHost .control-policy-status.ack-success {
  border-color: color-mix(in srgb, var(--green) 52%, var(--line));
  color: var(--green);
  background: color-mix(in srgb, var(--green) 10%, var(--surface-panel));
}

body[data-route="ac-control"] #viewHost .control-panel-section-lock .panel-lock-mode-line {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 5px;
}

body[data-route="ac-control"] #viewHost .control-panel-section-lock .panel-lock-mode-line > span {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.35;
}

body[data-route="ac-control"] #viewHost .control-panel-section-lock .panel-lock-mode-options {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
  gap: 5px;
}

body[data-route="ac-control"] #viewHost .control-panel-section-lock .panel-lock-mode-options label {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px;
  overflow: visible;
  white-space: nowrap;
  cursor: pointer;
}

body[data-route="ac-control"] #viewHost .control-panel-section-lock .panel-lock-mode-options label:has(input:focus-visible),
body[data-route="ac-control"] #viewHost .control-panel-section-lock .lock-enable-cell:has(input:focus-visible) {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

body[data-route="ac-control"] #viewHost .panel-lock-temp[data-lock-temp-empty="true"] :is(.lock-temp-step, .lock-temp-range-wrap) {
  opacity: 0.42;
}

body[data-route="ac-control"] #viewHost .panel-lock-temp[data-lock-temp-empty="true"] strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

body[data-route="ac-control"] #viewHost :is(.btn, .control-power-tile).is-pending,
body[data-route="ac-control"] #viewHost .ctile.on.is-pending {
  border-color: var(--accent-blue);
  color: var(--ink-inverse);
  background: var(--primary-gradient);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-blue) 18%, transparent);
}

body[data-route="ac-control"] #viewHost :is(.control-power-tile, .ctile).is-unconfirmed {
  border-color: color-mix(in srgb, var(--amber) 62%, var(--line-strong));
  color: var(--text);
  background: color-mix(in srgb, var(--amber) 10%, var(--surface-panel));
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--amber) 72%, transparent);
}

body[data-route="ac-control"] #viewHost :is(.control-power-tile, .ctile).is-failed {
  border-color: color-mix(in srgb, var(--danger) 66%, var(--line-strong));
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 9%, var(--surface-panel));
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--danger) 70%, transparent);
}

body[data-route="ac-control"] #viewHost :is(.control-power-tile, .ctile).is-reported-match,
body[data-route="ac-control"] #viewHost :is(.control-power-tile, .ctile).is-ack-success {
  border-color: color-mix(in srgb, var(--green) 62%, var(--line-strong));
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--green) 78%, transparent);
}

body[data-route="ac-control"] #viewHost .control-command-state {
  display: block;
  min-width: 1px;
  min-height: 10px;
  margin-top: 2px;
  font-size: 9px;
  font-weight: 700;
  line-height: 10px;
  white-space: nowrap;
}

body[data-route="ac-control"] #viewHost .control-command-state.is-empty {
  visibility: hidden;
}

body[data-route="ac-control"] #viewHost .control-command-assistive {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

body[data-route="ac-control"] #viewHost .control-temp-current {
  display: grid;
  justify-items: end;
  line-height: 1;
}

body[data-route="ac-control"] #viewHost .control-temp-current .control-command-state {
  margin-top: 0;
  font-size: 8px;
  line-height: 9px;
}

body[data-route="ac-control"] #viewHost .control-temp-current.is-pending {
  padding: 4px 6px;
  border-radius: 8px;
  color: var(--accent-blue);
  background: color-mix(in srgb, var(--accent-blue) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-blue) 28%, transparent);
}

body[data-route="ac-control"] #viewHost .control-temp-current:is(.is-unconfirmed, .is-failed, .is-ack-success, .is-reported-match) {
  padding: 4px 6px;
  border-radius: 8px;
}

body[data-route="ac-control"] #viewHost .control-temp-current.is-unconfirmed {
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 34%, transparent);
}

body[data-route="ac-control"] #viewHost .control-temp-current.is-failed {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 34%, transparent);
}

body[data-route="ac-control"] #viewHost .control-command-unconfirmed { color: var(--amber); }
body[data-route="ac-control"] #viewHost .control-command-failed { color: var(--danger); }
body[data-route="ac-control"] #viewHost .control-command-success { color: var(--green); }

body[data-route="ac-control"] #viewHost [data-command-feedback] {
  box-sizing: border-box;
  height: 32px;
  min-height: 32px;
  margin: 0;
  overflow: hidden;
  line-height: 16px;
}

body[data-route="ac-control"] #viewHost [data-command-feedback][aria-hidden="true"] {
  visibility: hidden;
}

body[data-route="ac-control"] #viewHost :is([data-control-message], [data-command-feedback])[data-tone="warning"],
body[data-route="ac-control"] #viewHost [data-command-feedback][data-tone="partial"] {
  color: var(--amber);
}

body[data-route="ac-control"] #viewHost :is([data-control-message], [data-command-feedback])[data-tone="success"] {
  color: var(--green);
}

body[data-route="ac-control"] #viewHost :is([data-control-message], [data-command-feedback])[data-tone="error"] {
  color: var(--danger);
}