/* Shared material for all windows and popups; page CSS owns layout and artwork. */
:root {
  --glass-fill: #22222885;
  --glass-light-fill: #22222859;
  --glass-chrome-fill: transparent;
  --glass-highlight: linear-gradient(145deg, #ffffff12, #ffffff03 48%, #ffffff08);
  --glass-edge: #ffffff26;
  --glass-shadow: 0 12px 36px #00000024, inset 0 1px 0 #ffffff10;
  --glass-blur: blur(28px) saturate(1.2);
  --glass-radius: 16px;
  --glass-inset: #ffffff08;
  --glass-hover: #ffffff12;
  --glass-backdrop: #10101640;
}
body { -webkit-font-smoothing: antialiased; }
/* State selectors also cover mobile and the expanded player. Fill alpha never fades text. */
body:not(.player-open) .rail,
body:not(.player-open) .topbar::before,
body:not(.player-open) .search,
body:not(.player-open) .mini-player,
.playlist-import,
.playlist-options-menu,
.track-menu,
.card-more,
.player-open .queue-panel,
.player-open .queue-open .queue-panel,
.player-popover,
.volume-bubble,
.volume-bubble.is-adjusting,
.mini-volume-slider .volume-bubble,
.cover-play,
.playlist-track-select,
.playlist-track-remove,
dialog,
#connection-dialog,
#account-dialog,
.toast,
.login-card {
  background: var(--glass-highlight), var(--glass-fill);
  border: 1px solid var(--glass-edge);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.playlist-import,
.player-open .queue-panel,
.player-open .queue-open .queue-panel {
  background: var(--glass-highlight), var(--glass-light-fill);
}
/* Let ambient colors show through navigation and playback without a dark tint.
   Follow the opaque fill when reduced transparency or a blur fallback is active. */
body:not(.player-open) .rail,
body:not(.player-open) .mini-player { background-color: var(--glass-chrome-fill); }
/* Navigation meets the viewport; circular controls retain their shape. */
body:not(.player-open) .rail,
body:not(.player-open) .topbar::before { border-radius: 0; }
body:not(.player-open) .topbar::before { border: 0; box-shadow: none; }
body:not(.player-open) .search { border-radius: 999px; padding-inline: 12px; }
.cover-play, .card-more, .playlist-track-remove { border-radius: 50%; }
.volume-bubble, .mini-volume-slider .volume-bubble { border-radius: 8px; }
.rail nav .icon-button, .playlist-heading, .playlist-song,
.playlist-manage, .play-all { border-radius: 12px; }
.rail nav .active {
  background: linear-gradient(120deg, #ff880026, #ff88000e);
  box-shadow: inset 0 1px 0 #ffffff0d, inset 0 0 0 1px #ff88001c;
}
.rail nav .icon-button:hover:not(.active) { background: var(--glass-hover); }
/* Nested fields use the same inset treatment inside each material surface. */
dialog input:not([type="checkbox"]):not([type="range"]),
#playlist-name,
#connection-dialog :is(#server-selection, #server-channel-settings) select,
.playlist-import input,
.session-identity {
  background: var(--glass-inset);
  border: 1px solid var(--glass-edge);
  border-radius: 12px;
  color: var(--text);
}
body:not(.player-open) .search:focus-within,
dialog input:focus-visible,
#playlist-name:focus-visible,
#connection-dialog :is(#server-selection, #server-channel-settings) select:focus-visible,
.playlist-import input:focus-visible {
  border-color: #ff880080;
  outline: 2px solid #ff880040;
  outline-offset: 2px;
}
/* The browser-rendered server/channel picker shares the popup material. */
@supports (appearance: base-select) {
  #connection-dialog :is(#server-selection, #server-channel-settings) select::picker(select) {
    background: var(--glass-highlight), var(--glass-fill);
    border: 1px solid var(--glass-edge);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
  }
}
/* Connection actions follow the same primary/close styles as every dialog. */
dialog .play-all, #connection-dialog .play-all {
  background: var(--accent-fill);
  border: 1px solid transparent;
  color: var(--accent-contrast);
}
dialog .play-all:hover, #connection-dialog .play-all:hover {
  background: var(--accent-hover);
  border-color: transparent;
}
dialog .icon-button, #connection-dialog .icon-button {
  background: var(--glass-inset);
  border: 1px solid var(--glass-edge);
  border-radius: 12px;
}
dialog .icon-button:hover, #connection-dialog .icon-button:hover,
.playlist-options-menu > button:hover,
.player-popover > button:hover, .player-popover > button:focus-visible,
.playlist-choice:hover, .playlist-choice:focus-visible { background: var(--glass-hover); }
.player-popover > button, .playlist-options-menu > button,
.playlist-choice { border-radius: 12px; }
.playlist-options-menu > .playlist-manage {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.playlist-options-menu > .playlist-manage:hover,
.playlist-options-menu > .playlist-manage:focus-visible { background: var(--glass-hover); }
dialog .playlist-manage {
  background: var(--glass-inset);
  border-color: var(--glass-edge);
}
dialog .playlist-manage:hover { background: var(--glass-hover); }
dialog > h2 { font-size: 19px; margin: 0; letter-spacing: -0.6px; }
.feature-cover, .cover-button, .playlist-tile-art, .playlist-hero-cover {
  border-radius: 12px;
  box-shadow: 0 6px 18px #0000001f;
}
.feature-cover::before, .cover-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px #ffffff14, inset 0 1px 0 #ffffff12;
  pointer-events: none;
}
.cover-play { color: #fff; }
.mini-player .icon-button, .mini-player .play-button.small,
.player-open .large-controls .icon-button,
.player-open .large-controls .play-button { border-radius: 50%; }
.mini-player .icon-button:hover, .mini-player .play-button.small:hover,
.player-open .large-controls .icon-button:hover { background: var(--glass-hover); }
/* Clip both cover layers once so the dark backing cannot show at the corners. */
.mini-player .current-track .mini-cover-frame { border-radius: 9px; box-shadow: 0 2px 8px #0003; }
.mini-player .current-track img { border-radius: 0; box-shadow: none; }
.queue-tabs .selected { border-radius: 999px; }
.player-open .queue-tabs .selected {
  background: var(--glass-hover);
  box-shadow: inset 0 1px 0 #ffffff10;
}
dialog::backdrop, .sidebar-open .sidebar-scrim {
  background: var(--glass-backdrop);
  backdrop-filter: blur(6px);
}
body:has(.welcome)::before {
  background: radial-gradient(ellipse at 72% 42%, #ff880018, transparent 60%),
    radial-gradient(ellipse at 20% 80%, #a99bc410, transparent 60%);
}
/* Token fallbacks stay consistent across the entire inventory. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-light-fill: var(--glass-fill); }
  :root { --glass-fill: #29292e; --glass-chrome-fill: var(--glass-fill); --glass-highlight: none; --glass-blur: none; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-light-fill: var(--glass-fill); }
  :root { --glass-fill: #29292e; --glass-chrome-fill: var(--glass-fill); --glass-highlight: none; --glass-blur: none; --glass-inset: #303035; }
  .app-ambient-layer { display: none; }
  dialog::backdrop, .sidebar-open .sidebar-scrim { backdrop-filter: none; }
}