.glass-panel,
.glass-bar {
  background: linear-gradient(135deg, var(--elev), var(--elev2));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
}

.glass-panel {
  border-radius: var(--radius-lg);
  backdrop-filter: blur(var(--blur-glass)) saturate(1.35);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.35);
}

.glass-bar {
  backdrop-filter: blur(var(--blur-strong)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--blur-strong)) saturate(1.2);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-panel,
  .glass-bar {
    background: var(--elev);
  }
}

.shell-gradient {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(96, 165, 250, 0.22), transparent 55%),
    radial-gradient(900px 500px at 88% 10%, rgba(167, 139, 250, 0.18), transparent 50%),
    radial-gradient(700px 420px at 50% 105%, rgba(52, 211, 153, 0.12), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

html[data-theme="dark"] .shell-gradient {
  background:
    radial-gradient(1100px 580px at 10% -8%, rgba(96, 165, 250, 0.18), transparent 55%),
    radial-gradient(820px 520px at 92% 12%, rgba(167, 139, 250, 0.14), transparent 52%),
    radial-gradient(680px 400px at 52% 102%, rgba(52, 211, 153, 0.08), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .shell-gradient {
    background:
      radial-gradient(1100px 580px at 10% -8%, rgba(96, 165, 250, 0.18), transparent 55%),
      radial-gradient(820px 520px at 92% 12%, rgba(167, 139, 250, 0.14), transparent 52%),
      radial-gradient(680px 400px at 52% 102%, rgba(52, 211, 153, 0.08), transparent 55%),
      linear-gradient(180deg, var(--bg0), var(--bg1));
  }
}