:root {
  --card-radius: 8px;
  --glass-blur: 12px;
  --glass-opacity: 82%;
  --glass-shadow-alpha: .12;
}

[data-surface] {
  overflow: clip;
  border-radius: var(--card-radius);
  transition: border-radius .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.icon-button,
.theme-toggle,
.periods,
.segmented,
.swatch,
.reset,
.switch span {
  border-radius: var(--card-radius);
  transition: border-radius .18s ease, background-color .18s ease;
}

.periods,
.segmented,
.swatch,
.reset {
  overflow: clip;
}

.switch span::after {
  border-radius: var(--card-radius);
}

html[data-glass="true"] [data-surface] {
  border-color: color-mix(in srgb, var(--line) 72%, var(--text) 12%);
  background-color: color-mix(in srgb, var(--panel) var(--glass-opacity), transparent);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, var(--glass-shadow-alpha)),
    inset 0 1px 0 color-mix(in srgb, var(--text) 10%, transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
}

html[data-glass="true"] .position-chart,
html[data-glass="true"] .pressure-body,
html[data-glass="true"] .level-icon {
  background-color: color-mix(in srgb, var(--panel-2) 76%, transparent);
}

html[data-glass="true"] .group-title,
html[data-glass="true"] .control-row,
html[data-glass="true"] .preview-chart {
  background-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  [data-surface],
  .icon-button,
  .theme-toggle,
  .periods,
  .segmented,
  .swatch,
  .reset,
  .switch span { transition: none; }
}