.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: 800;
}

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;
}

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

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

.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);
}

.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;
}

.ops-sample .kpis {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.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 > .ops-sample-row:nth-of-type(3) .panel {
  min-height: 268.5px;
}

.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.25;
}

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

.ops-sample > .ops-sample-row:nth-of-type(2) .panel {
  height: 305px;
}

.ops-sample > .ops-sample-row:nth-of-type(3) .panel {
  height: 268.5px;
}

.ops-sample > .ops-sample-row:nth-of-type(4) .panel {
  height: 238px;
}

.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-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-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);
}

.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: 4px;
  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: 10px;
}

.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-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-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;
}

.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 {
  color: var(--green);
}

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

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

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

.confirmed-ops .tone-blue,
.confirmed-ops .tone-blue strong {
  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;
}

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

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

@media (max-width: 720px) {
  .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;
  }
}

.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: 1600px) {
  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;
}

.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;
}

.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;
  overflow-x: auto;
}

.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;
}

body[data-route="ac-control"] .main {
  height: 942px;
  min-height: 942px;
  overflow: hidden;
}

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

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

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,
body[data-shell="business"] .control-zone-root input {
  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:checked,
body[data-shell="business"] .control-zone-root input: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;
}

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: 8px 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);
}

.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;
}

body[data-shell="business"] .control-batch-actions {
  display: none;
}

.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;
}

.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-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;
}

.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 {
  overflow: visible;
}

body[data-route="ac-control"] .control-tree-panel::after,
body[data-route="ac-control"] .control-right-panel::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: calc(100% - 8px);
  height: 28.875px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 0 0 11px 11px;
  background: linear-gradient(180deg, rgba(10, 20, 40, 0.5), rgba(10, 20, 40, 0.5));
  pointer-events: 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-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,
body[data-route="ac-control"] .control-zone-root input,
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:checked,
body[data-route="ac-control"] .control-zone-root input: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;
}

.control-card-grid {
  gap: 14px;
  margin-top: 4.5px;
}

.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%);
}

.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;
}

@media (max-width: 1280px) {
  .control-layout-grid {
    grid-template-columns: 168px 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: 820px) {
  .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.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-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: 1280px) {
  .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: 820px) {
  .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: 760px;
  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: 1280px) {
  .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: 820px) {
  .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(3, 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;
}

.environment-page {
  display: grid;
  gap: 12px;
}

.environment-tools {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.environment-tools .inp {
  flex: 1 1 260px;
}

.environment-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.environment-stat {
  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 {
  float: right;
  margin-top: 7px;
}

.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;
}

.environment-hero-grid div {
  border: 1px solid var(--border-muted-faint);
  border-radius: 8px;
  padding: 8px;
  background: rgba(8, 16, 32, 0.58);
}

.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-alert small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.environment-table-card {
  max-width: 100%;
  height: 271px;
  margin-bottom: 11px;
  overflow: hidden;
}

.sensortable-body {
  height: 208px;
  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: 8px 6px;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

.environment-table th:nth-child(1),
.environment-table td:nth-child(1) {
  width: 126px;
}

.environment-table th:nth-child(2),
.environment-table td:nth-child(2) {
  width: 70px;
}

.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: 66px;
}

.environment-table th:nth-child(9),
.environment-table td:nth-child(9) {
  width: 74px;
}

.environment-table th:nth-child(10),
.environment-table td:nth-child(10) {
  width: 138px;
}

.environment-table .row-action {
  min-height: 26px;
  height: 26px;
  margin: 0 2px 0 0;
  padding: 0 6px;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

.environment-table-card .environment-table th:last-child,
.environment-table-card .environment-table td:last-child {
  background: var(--panel);
}

.environment-table-card .environment-table th:last-child {
  z-index: 2;
}

.environment-table-card .environment-table td:last-child {
  z-index: 1;
}

.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;
}

.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: 1280px) {
  .environment-body {
    grid-template-columns: 1fr;
  }

  .environment-rail {
    position: static;
  }
}

@media (max-width: 820px) {
  .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: 1120px;
}

.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-work-order,
.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-work-order small,
.fault-steps small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.fault-detail-grid b,
.fault-work-order strong {
  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;
}

.fault-work-orders {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.fault-work-order {
  display: grid;
  gap: 8px;
}

.fault-work-order button {
  justify-self: start;
}

body[data-route="faults"] .faults-page {
  gap: 12px;
  height: 995px;
  overflow: hidden;
}

body[data-route="faults"] .filters.faults-tools {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 9px;
}

body[data-route="faults"] .filters.faults-tools .inp {
  flex: 1 1 0;
  min-width: 0;
}

body[data-route="faults"] .filters.faults-tools .btn {
  flex: 0 0 auto;
}

body[data-route="faults"] .faultstats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  height: 63px;
  margin-bottom: 2px;
  overflow: hidden;
}

body[data-route="faults"] .faultstat {
  min-width: 0;
  height: 63px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 7px 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 {
  display: block;
  margin-top: 1px;
  overflow: hidden;
  color: var(--text);
  font-size: 22px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-route="faults"] .faultstat span {
  float: right;
  margin-top: 3px;
  color: var(--mut);
  font-size: 11px;
}

body[data-route="faults"] .faultgrid {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr) 360px;
  gap: 12px;
  align-items: start;
}

body[data-route="faults"] .faults-main {
  display: block;
  min-width: 0;
}

body[data-route="faults"] .faults-detail {
  display: block;
  height: 859px;
  overflow: hidden;
}

body[data-route="faults"] .faultqueue {
  display: grid;
  gap: 8px;
  min-height: 340px;
  overflow: hidden;
}

body[data-route="faults"] .faults-queue {
  height: 400px;
  overflow: hidden;
}

body[data-route="faults"] .fitem {
  min-width: 0;
  width: 100%;
  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;
  min-width: 0;
}

body[data-route="faults"] .fitem .topline b {
  min-width: 0;
  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 {
  max-height: 444px;
  overflow: hidden;
}

body[data-route="faults"] .faults-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
}

body[data-route="faults"] .faults-table th,
body[data-route="faults"] .faults-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
  color: #dce8ff;
  font-size: 12px;
  vertical-align: middle;
}

body[data-route="faults"] .faults-table th {
  color: var(--mut);
  font-size: 10px;
  background: transparent;
}

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 th:nth-child(4),
body[data-route="faults"] .faults-table td:nth-child(2),
body[data-route="faults"] .faults-table td:nth-child(3),
body[data-route="faults"] .faults-table td:nth-child(4) {
  width: 34px;
}

body[data-route="faults"] .faults-table th:nth-child(1),
body[data-route="faults"] .faults-table td:nth-child(1) {
  width: 30px;
}

body[data-route="faults"] .faults-table th:nth-child(11),
body[data-route="faults"] .faults-table td:nth-child(11) {
  width: 92px;
}

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"] .detail-actions {
  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: 13px;
  margin-bottom: 12px;
  color: #eaf3ff;
  background: radial-gradient(circle at 88% 18%, rgba(255, 90, 106, 0.18), 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;
  min-height: 568px;
  overflow: hidden;
}

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: block;
  min-width: 0;
  overflow: hidden;
  color: #eaf3ff;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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: 1280px) {
  .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: 820px) {
  .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-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;
}

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);
}

.confirmed-platform-ops .ops-gateway-table th,
.confirmed-platform-ops .ops-gateway-table td {
  white-space: nowrap;
}

.confirmed-platform-ops .ops-gateway-table th {
  height: 40px;
  padding: 0 10px;
}

.confirmed-platform-ops .ops-gateway-table td {
  height: 46px;
  border-bottom-color: rgba(78, 132, 202, 0.13);
  padding: 0 10px;
}

.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;
  justify-content: flex-end;
}

.confirmed-platform-tenants .tenant-toolbar .input {
  flex: 0 0 270px;
}

.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;
}

.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;
}

.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;
  gap: 10px;
  margin-bottom: 14px;
}

.confirmed-platform-tenants .tenant-tabs .tab {
  min-width: 82px;
  padding: 0 14px;
}

.confirmed-platform-tenants .tenant-ledger-table {
  width: calc(100% + 21.5px);
  table-layout: fixed;
  font-size: 13px;
}

.confirmed-platform-tenants .tenant-ledger-table th {
  height: 40px;
  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: 48px;
}

.confirmed-platform-tenants .tenant-ledger-table th:nth-child(1) { width: 17.34%; }
.confirmed-platform-tenants .tenant-ledger-table th:nth-child(2) { width: 9.13%; }
.confirmed-platform-tenants .tenant-ledger-table th:nth-child(3) { width: 16.3%; }
.confirmed-platform-tenants .tenant-ledger-table th:nth-child(4) { width: 11.07%; }
.confirmed-platform-tenants .tenant-ledger-table th:nth-child(5) { width: 4.2%; }
.confirmed-platform-tenants .tenant-ledger-table th:nth-child(6) { width: 14.15%; }
.confirmed-platform-tenants .tenant-ledger-table th:nth-child(7) { width: 8.07%; }
.confirmed-platform-tenants .tenant-ledger-table th:nth-child(8) { width: 12.62%; }
.confirmed-platform-tenants .tenant-ledger-table th:nth-child(9) { width: 7.12%; }

.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: grid;
  gap: 8px;
}

.confirmed-platform-tenants .tenant-ledger-table .row-action {
  min-width: 58px;
}

.confirmed-platform-tenants > .grid {
  gap: 18px;
}

.confirmed-platform-plans > .grid {
  gap: 18px;
}

.confirmed-platform-plans .onboard-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 16px;
}

.confirmed-platform-plans .summary-cell {
  height: 96px;
  min-height: 74px;
  box-sizing: border-box;
  padding: 12px;
}

.confirmed-platform-plans .summary-cell label {
  display: block;
  margin-bottom: 7px;
}

.confirmed-platform-plans .summary-cell strong {
  font-size: 20px;
  line-height: 1.1;
}

.confirmed-platform-plans .summary-cell span {
  margin-top: 7px;
  color: var(--weak);
}

.confirmed-platform-plans .tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.confirmed-platform-plans .tab {
  min-height: 36px;
  display: inline-flex;
  padding: 0 14px;
  font-size: 13px;
}

.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: 41px;
  margin-top: 10px;
  font-size: 34px;
}

.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;
}

.confirmed-platform-plans .plan li {
  border-bottom: 1px dashed rgba(84, 137, 210, 0.18);
  padding: 8px 0;
}

.plan .btn {
  width: 100%;
}

.confirmed-platform-plans .plan .btn {
  height: 38px;
  min-height: 38px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 650;
}

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;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 650;
}

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: 13px 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;
  padding: 14px;
}

.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;
}

.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: 2px;
}

.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: -19px;
}

body[data-route="customers"] .customer-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) max-content max-content max-content;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

body[data-route="customers"] .customer-filters .inp {
  height: 35px;
  min-height: 35px;
  padding: 7px 10px;
}

body[data-route="customers"] .customer-filters .btn {
  height: 35px;
  min-height: 35px;
  padding: 7px 12px;
}

body[data-route="customers"] .customer-add {
  margin-left: auto;
}

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: 14px;
}

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 {
  color: var(--muted);
  font-size: 10px;
}

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: 0;
  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: 0;
  border-radius: 0;
  color: var(--muted);
  background: transparent;
  font-size: 10px;
  font-weight: 600;
}

body[data-route="customers"] .acctrow.on {
  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 small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

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;
}

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"] .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 {
  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 {
  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;
}

body[data-route="customers"] .acctfield b {
  display: block;
  margin-top: 4px;
  color: #eaf3ff;
  font-size: 12px;
}

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;
}

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;
}

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;
}

.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;
  min-height: 345px;
  margin-bottom: 3px;
}

.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: 800;
  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 .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;
}

.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: 900;
}

.node-filters .inp {
  flex: 0 0 148px;
  width: auto;
  height: 35px;
  min-height: 35px;
  padding: 7px 10px;
  font-size: 12px;
}

.node-filters select.inp {
  flex-basis: 168px;
}

.node-filters .btn {
  height: 35px;
  min-height: 35px;
}

.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: var(--text);
  font-size: 22px;
}

.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;
}

.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%), #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;
}

.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 .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;
}

.tariffs-page,
.tariffbody,
.tariffside,
.tariffstats,
.tariffcards,
.tariffbars,
.tariffscope {
  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,
.tariffscope small,
.tariffpreview small,
.tariffbar span {
  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;
}

.tariffbody {
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: start;
}

.tariffhero,
.tariffpanel,
.tariffpreview {
  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;
}

.tariffpanel + .tariffpanel {
  margin-top: 12px;
}

.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;
}

.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;
}

.tariffmode {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 12px;
}

.tariffmode span {
  border: 1px solid var(--border-muted-soft);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--text-soft);
  background: var(--surface-panel-deep);
  font-size: 12px;
  font-weight: 800;
}

.tariffmode span.on {
  border-color: var(--border-accent-strong);
  color: var(--badge-green-text);
  background: var(--surface-panel);
}

.tariffmode small {
  margin-left: 6px;
  color: var(--muted);
}

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

.tariffcard,
.tariffscope div {
  border: 1px solid var(--border-muted-soft);
  border-radius: 10px;
  padding: 10px;
  color: var(--text-soft);
  background: var(--surface-panel-deep);
  font-size: 12px;
}

.tariffcard b,
.tariffscope b {
  display: block;
  color: var(--text);
  font-size: 16px;
  margin-top: 6px;
}

.tariffcard small,
.tariffscope small {
  display: block;
  margin-top: 3px;
  font-size: 10px;
}

.tariff-table-grid {
  display: grid;
  gap: 7px;
}

.tariff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  line-height: 1.25;
}

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

.tariff-table th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.tariff-table tr.lk {
  cursor: pointer;
}

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

.tariff-table td {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tarifftable td:nth-child(3) {
  font-variant-numeric: tabular-nums;
}

.tariffs-page .tarifftable .btn.mini {
  min-height: 0;
  border: 0;
  padding: 0;
  color: var(--text-soft);
  background: transparent;
  box-shadow: none;
  font-size: 12px;
  font-weight: 600;
}

.tariffs-page .tag {
  min-height: 20px;
  border-radius: 20px;
  padding: 0 8px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 700;
}

.tariffs-page .tariff-table .tag {
  min-width: 28px;
}

.tariff-row {
  display: grid;
  grid-template-columns: 76px minmax(150px, 1fr) 88px 72px 74px;
  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;
}

.tariff-row.head {
  color: var(--muted);
  background: var(--surface-panel-muted);
  font-weight: 900;
}

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

.tariffprice {
  color: var(--badge-green-text);
  font-weight: 900;
}

.tariffpreview {
  border-color: var(--border-accent-strong);
  padding: 13px;
  background: radial-gradient(circle at 88% 18%, rgba(47, 139, 255, 0.2), transparent 45%), rgba(8, 16, 32, 0.62);
}

.tariffpreview b {
  display: block;
  color: var(--badge-blue-text);
  font-size: 22px;
}

.tariffpreview .sum {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.tariffpreview .sum div {
  border-radius: 8px;
  padding: 7px;
  background: rgba(8, 16, 32, 0.58);
}

.tariffpreview .sum b {
  margin: 0;
  color: var(--text);
}

.tariffbars {
  gap: 9px;
}

.tariffbar {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 64px;
  gap: 8px;
  align-items: center;
  color: var(--text-soft);
  font-size: 12px;
}

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

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

.tariffbar.warn .rail i {
  background: linear-gradient(90deg, var(--warning), var(--cyan));
}

.tariffbar.g .rail i {
  background: linear-gradient(90deg, var(--accent), var(--cyan));
}

.tariffbar.b .rail i {
  background: linear-gradient(90deg, var(--danger), var(--warning));
}

.tariffbar b {
  color: var(--text);
  text-align: right;
}

.tariffscope div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  gap: 8px;
  align-items: center;
  border-radius: 9px;
  padding: 7px 9px;
  line-height: 1.25;
}

.tariffscope b {
  text-align: right;
  font-size: 20px;
  margin-top: 0;
}

.tariffflow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr);
  gap: 0;
  align-items: center;
  margin: 12px 0;
  color: var(--text-soft);
  font-size: 11px;
  text-align: center;
}

.tariffflow div {
  min-width: 0;
  border: 1px solid var(--border-muted-soft);
  border-radius: 9px;
  min-height: 48px;
  padding: 8px 4px;
  color: var(--text-soft);
  background: var(--surface-panel-deep);
  line-height: 1.2;
  text-align: center;
}

.tariffflow b {
  display: block;
  color: var(--text);
  margin-bottom: 3px;
  font-size: 12px;
}

.tariffflow i {
  color: var(--accent);
  font-style: normal;
  font-weight: 900;
}

.tariffsr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.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 {
  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-size: 12px;
}

.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 td {
  max-width: 156px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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="meter-readings"] .brand-row.compact,
body[data-route="billing"] .brand-row.compact,
body[data-route="prepaid-tenants"] .brand-row.compact,
body[data-route="meter-readings"] .side-nav > .nav-group:nth-child(1),
body[data-route="billing"] .side-nav > .nav-group:nth-child(1),
body[data-route="prepaid-tenants"] .side-nav > .nav-group:nth-child(1),
body[data-route="meter-readings"] .side-nav > .nav-group:nth-child(2),
body[data-route="billing"] .side-nav > .nav-group:nth-child(2),
body[data-route="prepaid-tenants"] .side-nav > .nav-group:nth-child(2),
body[data-route="meter-readings"] .side-nav > .nav-group:nth-child(3) .nav-group-title,
body[data-route="billing"] .side-nav > .nav-group:nth-child(3) .nav-group-title,
body[data-route="prepaid-tenants"] .side-nav > .nav-group:nth-child(3) .nav-group-title,
body[data-route="meter-readings"] .side-nav > .nav-group:nth-child(3) button[data-route="ac-control"],
body[data-route="billing"] .side-nav > .nav-group:nth-child(3) button[data-route="ac-control"],
body[data-route="prepaid-tenants"] .side-nav > .nav-group:nth-child(3) button[data-route="ac-control"] {
  display: none;
}

body[data-route="meter-readings"] .sidebar,
body[data-route="billing"] .sidebar,
body[data-route="prepaid-tenants"] .sidebar {
  padding-top: 8px;
}

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;
}

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: 16px;
}

body[data-route="billing"] .fee-table th,
body[data-route="billing"] .fee-table td {
  padding: 6px 7px;
}

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-soft);
  font-size: 12px;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

body[data-route="meter-readings"] .read-table th {
  height: 38px;
}

body[data-route="meter-readings"] .read-table td {
  height: 53px;
  line-height: 1.35;
}

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"] .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: 740px;
}

.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;
}

.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 {
  min-height: 740px;
}

.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;
}

.prepaid-tenants-page,
.tenantstats,
.tenantbody,
.tenantside,
.tenantrows {
  display: grid;
  gap: 12px;
}

.prepaid-filters {
  grid-template-columns: repeat(3, minmax(150px, 1fr)) minmax(260px, 1.2fr) repeat(5, max-content);
}

.prepaid-filters .field {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 10px;
  background: var(--surface-panel);
}

.prepaid-filters .inp {
  min-height: 30px;
  border-color: var(--border-muted-soft);
  background: var(--surface-panel-deep);
}

.range-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.range-field label {
  grid-column: 1 / -1;
}

.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: var(--surface-panel);
}

.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: 12px;
  background: var(--surface-panel);
}

.tenantstat small,
.tenantstat span,
.tenanthero small,
.tenantcard small,
.tenantrow small {
  color: var(--muted);
  font-size: 12px;
}

.tenantstat b,
.tenantstat strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 24px;
}

.tenantstat strong {
  color: var(--badge-green-text);
}

.tenantstat b.warn,
.tenantstat strong.warn {
  color: var(--warning);
}

.tenantstat span {
  display: block;
  margin-top: 4px;
}

.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: 18px;
  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: auto;
}

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;
}

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;
}

.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);
}

.tenanthero > b {
  display: block;
  margin: 4px 0 12px;
  color: var(--badge-green-text);
  font-size: 20px;
}

.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 .tenantcard b {
  margin-top: 4px;
  color: var(--badge-green-text);
  font-size: 20px;
}

.tenantrows {
  gap: 8px;
}

.tenantrow {
  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: 4px;
  color: var(--text);
}

.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: 13px;
  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;
}

.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 .build-list,
.events-page .event-main,
.events-page .eventlist,
.events-page .eventchain {
  gap: 0;
}

.events-page .builditem {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 7px;
  padding: 8px 6px;
  color: #cfe0ff;
  background: transparent;
  font-size: 12px;
}

.events-page .builditem.on {
  color: #fff;
  background: rgba(47, 139, 255, 0.14);
}

.events-page .builditem input {
  flex: 0 0 auto;
  accent-color: #2f8bff;
}

.events-page .builditem small {
  margin-left: auto;
}

.events-page .eventflow {
  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 {
  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 {
  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;
  box-shadow: 0 0 14px currentColor;
}

.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 {
  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-size: 12px;
}

.events-page .eventcard.on {
  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 .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 .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-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 {
  gap: 9px;
}

.events-page .eventdetail div {
  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 {
  color: var(--text);
  font-size: 12px;
}

.events-page .eventhero {
  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 {
  color: #86efac;
  font-size: 22px;
}

.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;
}

.ai-analysis-page,
.aipage {
  display: grid;
  gap: 12px;
}

body[data-route="ai/analysis"],
body[data-route="ai/anomaly"],
body[data-route="ai/strategy"],
body[data-route="ai/report"] {
  font: 13px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif;
}

body[data-route="ai/strategy"],
body[data-route="ai/report"] {
  --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: 28px;
}

body[data-route="ai/analysis"] .brand-row.compact,
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/analysis"] .brand-mark,
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;
}

.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/analysis"] .curvelegend {
  margin-top: 4px;
}

body[data-route="ai/analysis"] .legend {
  margin-top: 5px;
}

.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));
}

body[data-route="ai/analysis"] .aiinsight {
  height: 139px;
}

.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;
}

body[data-route="ai/analysis"] .modelrail {
  margin-top: 8px;
}

.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: 33px;
  min-height: 33px;
  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(--accent);
}

.sev.bad {
  background: var(--bad);
}

.sev.warn {
  background: 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-top: 14px;
}

.docgrid div {
  border: 1px solid #c8d3e4;
  border-radius: var(--radius-sm);
  padding: 8px;
  background: #fff;
}

.docgrid small {
  display: block;
  color: #60708a;
}

.docline,
.docblock {
  border-radius: var(--radius-sm);
  background: #c8d3e4;
}

.docline {
  height: 8px;
  margin: 8px 0;
}

.docline.short {
  width: 88%;
}

.docline.tiny {
  width: 72%;
}

.docblock {
  min-height: 92px;
  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"] .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: 1180px) {
  .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;
  }

  .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) {
  .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,
  .tariffcards,
  .tariff-row,
  .tariffbar,
  .tariffscope,
  .tariffflow,
  .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;
  }

  .tariffbody {
    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;
  }
}