/* GLASS_UNIFIED_START */
/* Workbench */
/* Scope glass tokens to the workbench so login keeps its own palette. */
body.theme-dark .layout {
  --color-glass-base: rgb(3 11 24);
  --color-glass-start: rgb(10 58 90 / 88%);
  --color-glass-end: rgb(4 20 37 / 68%);
  --color-glass-violet: rgb(123 140 255);
  --color-glass-accent: rgb(51 242 255);
  --color-glass-ink: rgb(242 253 255);
  --color-glass-muted: rgb(194 219 234);
  --color-glass-surface: color-mix(in srgb, var(--color-glass-start) 92%, var(--color-glass-base));
  --color-glass-depth: color-mix(in srgb, var(--color-glass-end) 88%, var(--color-glass-violet));
  --color-glass-fill: linear-gradient(155deg, var(--color-glass-surface), var(--color-glass-depth));
  --color-glass-inset: color-mix(in srgb, var(--color-glass-accent) 5%, transparent);
  --color-glass-hover: color-mix(in srgb, var(--color-glass-accent) 12%, transparent);
  --color-glass-edge: color-mix(in srgb, var(--color-glass-accent) 38%, transparent);
  --color-glass-line: color-mix(in srgb, var(--color-glass-accent) 8%, transparent);
  --color-glass-glow: color-mix(in srgb, var(--color-glass-accent) 8%, transparent);
  --color-glass-shadow: color-mix(in srgb, var(--color-glass-end) 58%, transparent);
  --bg-panel: var(--color-glass-surface);
  --bg-card: var(--color-glass-inset);
  --bg-card-solid: var(--color-glass-inset);
  --bg-card-hover: var(--color-glass-hover);
  --border-glass: var(--color-glass-edge);
  --border-active: var(--color-glass-accent);
  --accent-primary: var(--color-glass-accent);
  --accent-glow: var(--color-glass-ink);
  --text-white: var(--color-glass-ink);
  --text-main: var(--color-glass-ink);
  --text-secondary: var(--color-glass-muted);
  --text-dim: var(--color-glass-muted);
  --color-surface-muted: var(--color-glass-inset);
  --color-accent-soft: var(--color-glass-hover);
  --color-focus: var(--color-glass-line);
  --color-scrollbar: var(--color-glass-edge);
  --shadow-glass: 0 8px 24px var(--color-glass-shadow), inset 0 1px var(--color-glass-line), 0 0 12px var(--color-glass-glow);
  --blur-glass: blur(8px);
  color: var(--text-main);
  background: var(--color-glass-base);
}
body.theme-dark .layout :is(.panel, .cp-panel, .cp-header, .kpi-item, .modal, .sidebar, .top-bar, .station-card, .ai-panel) {
  background: var(--color-glass-fill);
  border-color: var(--color-glass-edge);
  box-shadow: var(--shadow-glass);
}
body.theme-dark .layout :is(.modal, .sidebar, .top-bar, .ai-panel) {
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
}
body.theme-dark .layout :is(.panel, .cp-panel, .modal) :is(.panel, .cp-panel, .kpi-item) {
  background: var(--color-glass-inset);
  box-shadow: none;
  backdrop-filter: none;
}
/* The parent owns the glass fill; footers must not paint it a second time. */
body.theme-dark .layout .station-card .card-foot,
body.theme-dark .layout :is(.panel-footer, .modal-footer) {
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.theme-dark .layout :is(.panel-header, .ai-header) {
  background: var(--color-glass-inset);
  color: var(--text-white);
  border-color: var(--border-glass);
}
body.theme-dark .layout .kpi-row { background: transparent; }
body.theme-dark .layout :is(.btn, .form-input, .form-select, .form-textarea) { background: var(--color-glass-inset); }
body.theme-dark .layout .btn.btn-primary,
body.theme-dark .layout .btn-primary:hover:not(:disabled) {
  background: var(--accent-primary);
  color: var(--color-glass-base);
}
body.theme-dark .layout .btn:hover:not(:disabled) { background: var(--color-glass-hover); }
body.theme-dark .layout .btn-primary:hover:not(:disabled) { background: var(--accent-glow); }
body.theme-dark .layout .btn-danger:hover:not(:disabled) { background: var(--red-dim); }
body.theme-dark .layout option { background: var(--color-glass-base); color: var(--text-white); }
body.theme-dark .layout .station-card:hover { border-color: var(--border-active); }
body.theme-dark .layout .station-card.dragover { border-color: var(--accent-primary); box-shadow: inset 0 0 0 1px var(--accent-primary); }
body.theme-dark .layout .cp-panel.alert-panel { border-color: var(--red-dead); }
body.theme-dark .layout .empty-state { color: var(--text-secondary); background: var(--color-glass-inset); }
body.theme-dark .layout :is(.btn[aria-busy="true"], .empty-state[role="status"]) { cursor: progress; }
/* GLASS_UNIFIED_END */
/* GLASS_UNIFIED_START */
/* Host */
.twin-page.twin-page.twin-page {
  --color-glass-start: rgb(10 58 90 / 88%);
  --color-glass-end: rgb(4 20 37 / 68%);
  --color-glass-violet: rgb(123 140 255);
  --color-surface: color-mix(in srgb, var(--color-glass-start) 92%, var(--color-background));
  --color-glass-depth: color-mix(in srgb, var(--color-glass-end) 88%, var(--color-glass-violet));
  --color-glass-fill: linear-gradient(155deg, var(--color-surface), var(--color-glass-depth));
  --color-surface-raised: color-mix(in srgb, var(--color-accent) 5%, transparent);
  --color-surface-hover: color-mix(in srgb, var(--color-accent) 12%, transparent);
  --color-border: color-mix(in srgb, var(--color-accent) 38%, transparent);
  --color-border-strong: var(--color-accent);
  --color-text: rgb(242 253 255);
  --color-text-muted: rgb(194 219 234);
  --color-accent: rgb(51 242 255);
  --color-glass-line: color-mix(in srgb, var(--color-accent) 8%, transparent);
  --color-glass-shadow: color-mix(in srgb, var(--color-glass-end) 58%, transparent);
}
.twin-page.twin-page.twin-page :is(.floating-bar, .twin-toolbar, .zone-card, .summary-strip), .twin-page.twin-page.twin-page > .sync-error {
  background: var(--color-glass-fill);
  box-shadow: 0 8px 24px var(--color-glass-shadow), inset 0 1px var(--color-glass-line), 0 0 12px var(--color-glass-line);
}
.twin-page.twin-page.twin-page :is(.floating-bar, .twin-toolbar, .zone-card) {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.twin-page.twin-page.twin-page .summary-strip { backdrop-filter: none; }
.twin-page.twin-page.twin-page .zone-card footer {
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.twin-page.twin-page.twin-page :is(.mode-switch, .trend-chart, .station-list, .empty),
.twin-page.twin-page.twin-page :is(.form-field, .tailwater-form) :is(input, select, textarea) {
  background: var(--color-surface-raised);
}
.twin-page.twin-page.twin-page option { background: var(--color-background); color: var(--color-text); }
.twin-page.twin-page.twin-page :is(select, textarea):focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
/* GLASS_UNIFIED_END */