/* Navigation materials are a progressive enhancement. Data surfaces stay solid.
   Avoid masks on parent elements: they also fade their readable children. */
:root { color-scheme: light; }
.glass, .topbar {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-filter, blur(var(--glass-blur)) saturate(var(--glass-sat)));
  backdrop-filter: var(--glass-filter, blur(var(--glass-blur)) saturate(var(--glass-sat)));
  border: 1px solid var(--glass-edge);
  box-shadow: 0 3px 5px rgba(43,51,58,.025), 0 10px 30px rgba(43,51,58,.07), inset 0 1px 0 var(--glass-border);
}
.main {
  background: radial-gradient(ellipse 650px 240px at 12% 0%, var(--c-aura), transparent 85%),
    radial-gradient(ellipse 500px 360px at 100% 30%, var(--c-aura-soft), transparent 85%), var(--c-bg);
}
/* The header overlays this scrolling region, so it now has a real backdrop. */
.main::before { content: none; }
.brand, .sidebar { background: var(--c-panel-2); }
.account-menu__panel, .auth-panel {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-filter-strong, blur(calc(var(--glass-blur) + 4px)) saturate(var(--glass-sat)));
  backdrop-filter: var(--glass-filter-strong, blur(calc(var(--glass-blur) + 4px)) saturate(var(--glass-sat)));
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-border);
}
.auth-panel {
  -webkit-backdrop-filter: var(--glass-filter-stronger, blur(calc(var(--glass-blur) + 6px)) saturate(var(--glass-sat)));
  backdrop-filter: var(--glass-filter-stronger, blur(calc(var(--glass-blur) + 6px)) saturate(var(--glass-sat)));
}
body.simple-mode .topbar, body.simple-mode .account-menu__panel,
body.simple-mode .auth-panel, body.simple-mode .glass {
  background: var(--c-panel); -webkit-backdrop-filter: none; backdrop-filter: none;
  border-color: var(--c-line); box-shadow: var(--shadow-sm);
}
body.simple-mode .main { background: var(--c-bg); }
@media (prefers-reduced-transparency: reduce) {
  body:not([data-glass-override="glass"]) .topbar,
  body:not([data-glass-override="glass"]) .account-menu__panel,
  body:not([data-glass-override="glass"]) .auth-panel,
  body:not([data-glass-override="glass"]) .glass {
    background: var(--c-panel); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar, .account-menu__panel, .auth-panel, .glass { background: var(--c-panel); }
}
@media (forced-colors: active) {
  .topbar, .account-menu__panel, .auth-panel, .glass {
    background: Canvas; color: CanvasText; border: 1px solid CanvasText;
    -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  }
  .main { background: Canvas; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important;
    animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}