/* One shared glass treatment for the existing layouts. Opaque by default. */
body {
  --glass-panel: #101e2d;
  --glass-bar: #0b1825;
  --glass-edge: rgba(195, 224, 255, .23);
  --glass-light: inset 0 1px 0 rgba(255, 255, 255, .12);
  --glass-blur: 20px;
}
body[data-presentation='overview'] .sidebar,
body[data-presentation='overview'] .mobile-navigation {
  background: var(--glass-bar);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-light), 0 8px 30px #0002;
}
.genre-menu,
body[data-presentation='overview'] #mobile-menu,
body .player-panel {
  background: linear-gradient(135deg, rgba(128, 191, 238, .12), transparent 55%), var(--glass-panel);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-light), 0 24px 72px #0007;
  color: #f3f7fb;
  border-radius: 22px;
}
.genre-menu::backdrop { background: rgba(2, 8, 16, .56); }
.genre-menu-head { padding-bottom: 14px; border-bottom: 1px solid var(--glass-edge); }
.genre-menu h2 { letter-spacing: -.025em; }
.genre-menu p { color: #c1d1e1; }
.genre-menu .genre-chip {
  background: linear-gradient(135deg, rgba(199, 229, 255, .09), rgba(94, 158, 209, .03));
  border-color: rgba(196, 224, 250, .22);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 #ffffff0a;
  color: #f3f7fb;
}
.genre-count {
  color: #c1d8ec;
  background: #07132166;
  border-radius: 20px;
  padding: 3px 8px;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.genre-menu .genre-chip[aria-pressed='true'] {
  background: linear-gradient(135deg, #135c81, #10374e);
  border-color: #66d7ff;
  box-shadow: var(--glass-light), 0 0 0 1px #27baff55;
}
.genre-menu-head button, .genre-menu-footer button,
body[data-presentation='overview'] #mobile-menu .dialog-head button {
  background: #d1e9ff0b;
  border-color: var(--glass-edge);
  border-radius: 12px;
  min-height: 44px;
  color: #f3f7fb;
}
body[data-presentation='overview'] #mobile-menu .menu-group { border-color: var(--glass-edge); }
body[data-presentation='overview'] #mobile-menu .menu-group h3 { color: #aac8de; }
body[data-presentation='overview'] #mobile-menu .menu-group button { border-radius: 10px; padding-left: 8px; }
body[data-presentation='overview'] .overview-source-choice {
  background: linear-gradient(135deg, #d4ecff0b, #091927c9);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-light);
  border-radius: 12px;
}
@media (hover: hover) {
  .genre-menu .genre-chip:hover { background: #6cb5ec26; border-color: #9edbff88; }
  body[data-presentation='overview'] #mobile-menu .menu-group button:hover { background: #86bff41a; color: white; }
}
/* Blur only a few navigation/overlay surfaces, never hundreds of content cards. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body { --glass-panel: rgba(12, 25, 39, .84); --glass-bar: rgba(7, 18, 29, .83); }
  .genre-menu,
  body[data-presentation='overview'] #mobile-menu,
  body .player-panel,
  body[data-presentation='overview'] .sidebar,
  body[data-presentation='overview'] .mobile-navigation {
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(125%);
    backdrop-filter: blur(var(--glass-blur)) saturate(125%);
  }
}
@media (max-width: 960px) {
  body { --glass-blur: 12px; }
  body[data-presentation='overview'] #mobile-menu,
  body .player-panel { border-radius: 24px 24px 0 0; }
}
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  body { --glass-panel: #101e2d; --glass-bar: #0b1825; }
  .genre-menu,
  body[data-presentation='overview'] #mobile-menu,
  body .player-panel,
  body[data-presentation='overview'] .sidebar,
  body[data-presentation='overview'] .mobile-navigation {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-image: none;
    box-shadow: none;
  }
}