:root {
  --dashboard-ui-scale: 1;
  --dashboard-ui-width: 100vw;
  --dashboard-ui-height: 100vh;
}

html[data-ui-scale-mode="zoom"] #app-shell {
  width: var(--dashboard-ui-width);
  height: var(--dashboard-ui-height);
  zoom: var(--dashboard-ui-scale);
}

html[data-ui-scale-mode="zoom"] #sidebar {
  height: var(--dashboard-ui-height);
}

html[data-ui-scale-mode="zoom"] .stm-global-alert,
html[data-ui-scale-mode="zoom"] .hydro-global-alert,
html[data-ui-scale-mode="zoom"] .toast {
  zoom: var(--dashboard-ui-scale);
}

html[data-ui-scale-mode="transform"] #app-shell {
  width: var(--dashboard-ui-width);
  height: var(--dashboard-ui-height);
  transform: scale(var(--dashboard-ui-scale));
  transform-origin: top left;
}

html[data-ui-scale-mode="transform"] #sidebar {
  height: var(--dashboard-ui-height);
}

.ui-scale-card h3 {
  margin: 5px 0 0;
  font-size: 16px;
}

.ui-scale-card > p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.ui-scale-controls {
  display: grid;
  grid-template-columns: 58px minmax(110px, 1fr) 58px;
  gap: 10px;
  align-items: stretch;
  margin-top: 14px;
}

.ui-scale-step,
.ui-scale-action {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.045);
  color: var(--text);
  font-weight: 750;
  cursor: pointer;
}

.ui-scale-step {
  min-height: 54px;
  font-size: 18px;
}

.ui-scale-step:disabled,
.ui-scale-action:disabled {
  cursor: default;
  opacity: 0.42;
}

.ui-scale-reading {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 54px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  text-align: center;
}

.ui-scale-reading strong {
  font-size: 23px;
  letter-spacing: -0.03em;
}

.ui-scale-reading span {
  color: var(--muted);
  font-size: 9px;
}

.ui-scale-range {
  width: 100%;
  margin: 13px 0 3px;
  accent-color: var(--accent);
}

.ui-scale-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.ui-scale-action {
  min-height: 36px;
  padding: 7px 11px;
  font-size: 10px;
}

.ui-scale-action.primary {
  border-color: rgba(139,198,255,0.28);
  background: rgba(139,198,255,0.12);
  color: #dceeff;
}

.ui-scale-message {
  min-height: 16px;
  margin: 8px 0 0 !important;
  font-size: 9px !important;
}

.ui-scale-message.is-ok { color: var(--good); }
.ui-scale-message.is-error { color: #ffb6ad; }

@media (max-width: 1050px) {
  .ui-scale-controls {
    grid-template-columns: 52px minmax(96px, 1fr) 52px;
    gap: 7px;
  }

  .ui-scale-step { min-height: 48px; }
}