/* Bluewave — midnight, periwinkle, ice. Glass belongs to floating controls. */
:root {
  --bg: #080e1c;
  --text: #eef4ff;
  --muted: #95a6c2;
  --blue: #88baff;
  --line: rgb(172 204 255 / 10%);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
}
body { background: #060b15; color: var(--text); }
button, input { font-family: inherit; }
button { font-weight: 500; }
button:focus:not(:focus-visible) { outline: none; }
html[data-input="pointer"] button:focus-visible { outline: none !important; }
:focus-visible { outline: 2px solid #aacdff !important; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.app {
  background: radial-gradient(ellipse at 12% 0, #203c6745, transparent 44%),
    radial-gradient(ellipse at 98% 20%, #3f47a921, transparent 40%), var(--bg);
  box-shadow: none;
}
.glass {
  background: linear-gradient(145deg, #adcaff12, #5472b608 60%), #1020398c;
  border: 1px solid #c1d7ff21;
  box-shadow: inset 0 1px 0 #e2edff0d, 0 12px 40px #02071126;
  backdrop-filter: blur(26px) saturate(130%);
  -webkit-backdrop-filter: blur(26px) saturate(130%);
}
.content { padding-top: 14px; }
.topline { padding-bottom: 26px; }
.greeting p { font-size: 12px; font-weight: 400; margin-bottom: 7px; }
.greeting h1 { font-size: 31px; font-weight: 650; letter-spacing: -.045em; }
.section-head { margin-top: 30px; }
.section-head h2 { font-size: 20px; font-weight: 600; letter-spacing: -.035em; }
.section-head > button { font-weight: 400; color: #a3badd; }
.avatar-button { width: 40px; height: 40px; flex-basis: 40px; background: linear-gradient(145deg, #77bff5, #465eac); }
.chip { padding: 10px 16px; font-size: 13px; font-weight: 500; background: #c5d7fa09; border: 0; }
.chip.active { color: #eaf3ff; background: linear-gradient(125deg, #b7d9ff29, #6d8dec24); box-shadow: inset 0 1px 0 #d2e9ff29; }
.quick-card { border: 0; border-radius: 14px; background: #b1ccff09; }
.quick-card strong { font-size: 12px; font-weight: 500; }
.quick-art { border-radius: 12px; }
.liked-art { background: linear-gradient(135deg, #8eacf9, #354fa6 65%, #202b68); }
.offline-art { background: linear-gradient(130deg, #579bac, #214973); }
.add-art, .search-art { background: linear-gradient(145deg, #294564, #182640); }
.mix-art { border-radius: 13px; }
.mix-card strong { font-weight: 500; }
.mix-card small { font-size: 12px; }
.track-row { padding-top: 8px; padding-bottom: 8px; border-radius: 12px; }
.track-copy strong { font-weight: 500; letter-spacing: -.015em; }
.track-copy small { color: var(--muted); font-weight: 400; }
.track-row.playing { background: #8abbff0c; }
.track-row.playing .track-copy strong { color: #b3d3ff; }
.source-badge.offline { font-size: 9px; letter-spacing: .025em; font-weight: 500; color: #97bee6; }
.bottom-nav { background: #0b1427bf; border-top-color: #b1ceff0c; box-shadow: none; }
.bottom-nav button { font-size: 9px; font-weight: 400; gap: 5px; color: #8595af; }
.bottom-nav button.active { color: #c0d9ff; }
.bottom-nav button.active svg { filter: none; transform: none; }
.bottom-nav svg { width: 21px; height: 21px; stroke-width: 1.6; }
.mini-player {
  border-radius: 19px; height: 66px; padding: 8px;
  background: linear-gradient(115deg, #7fbdff20, #8a92eb0d), #101d32db;
  border-color: #c1d8ff24; box-shadow: inset 0 1px 0 #dbeaff0a, 0 8px 30px #0002;
}
.mini-player strong { font-weight: 550; }
.mini-player small { color: #a0b4d0; }
.mini-player img { border-radius: 12px; }
.mini-progress { background: #a3caff; height: 1px; opacity: .7; }
.profile-card { padding: 32px 22px; border-radius: 28px; }
.profile-card h2 { font-size: 24px; font-weight: 600; }
.profile-stats { border: 0; gap: 16px; }
.profile-stats b { font-weight: 500; }
.profile-avatar { background: linear-gradient(140deg, #68aaca, #4e69a9, #414777); font-weight: 500; }
.privacy b { font-weight: 500; }
.library-row strong { font-weight: 500; }
.library-row small { font-weight: 400; }
.playlist-view, .artist-view {
  background: radial-gradient(ellipse at 85% 10%, #42529a32, transparent 40%),
    linear-gradient(170deg, #192c4b, var(--bg) 550px);
}
.playlist-view > h1 { font-weight: 650; letter-spacing: -.04em; }
.playlist-cover { max-width: 260px; border-radius: 18px; box-shadow: 0 16px 36px #0003; }
.big-play { background: linear-gradient(145deg, #cae3ff, #9dbbff); color: #111f37; }
.glass-btn { background: #b8d2ff0d; }

/* Player: a quiet frame for the artwork, then one continuous timeline. */
.full-player {
  display: flex; gap: 0; padding: max(14px, env(safe-area-inset-top)) 26px max(18px, env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at -8% 0, #466f974a, transparent 58%),
    radial-gradient(ellipse at 105% 23%, #535ca447, transparent 58%),
    linear-gradient(155deg, #14243c, #101a31 56%, #09111f);
  overflow-x: hidden; overflow-y: auto; scrollbar-width: none;
}
.full-player::-webkit-scrollbar { display: none; }
.full-player header { min-height: 44px; }
.full-player header small { font-size: 8px; font-weight: 400; color: #91a6c4; letter-spacing: .17em; }
.full-player header b { margin-top: 3px; font-size: 12px; font-weight: 500; color: #d5e1f4; }
.full-player header button { border-radius: 50%; color: #d4e3f8; }
.full-player header button svg { width: 22px; height: 22px; stroke-width: 1.7; }
.player-art-wrap {
  flex: none; width: min(82%, 33dvh, 356px); max-height: none;
  margin: clamp(16px, 3.5dvh, 30px) auto clamp(22px, 4dvh, 36px);
}
.player-art-wrap img { border-radius: 17px; box-shadow: 0 22px 50px #03091b5e, 0 1px 0 #e5efff12; }
.player-copy { margin: 0; gap: 14px; }
.player-copy > span { gap: 5px; }
.player-copy strong { font-size: 25px; font-weight: 600; letter-spacing: -.04em; }
.player-copy small { font-size: 14px; font-weight: 400; color: #a6b7d0; }
.player-copy button { padding: 11px; width: 44px; height: 44px; border-radius: 50%; background: #a6c9ff07; }
.player-copy button svg { width: 23px; height: 23px; stroke-width: 1.6; }
.player-copy button.active { color: #a5cdff; }
.player-copy .source-badge { display: none !important; }
.timeline { margin: 25px -26px 3px; flex: none; }
.timeline .wave-time {
  display: flex; align-items: baseline; justify-content: center; gap: 9px;
  margin: 0 0 3px; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.wave-time #elapsed { color: #eef5ff; }
.wave-time #total { color: #7f93b3; }
.wave-time > span:nth-child(2) { color: #4f6487; font-size: 12px; font-weight: 400; }
.timeline .waveform {
  display: block; position: relative; height: 90px; margin: 4px 0 0;
  cursor: pointer; touch-action: none; user-select: none;
  -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  border-radius: 8px;
}
.waveform canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.waveform .wave-playhead {
  position: absolute; left: 0%; top: 4px; bottom: 8px; width: 2px;
  background: #ffffff;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.95);
  pointer-events: none; transition: opacity .15s; opacity: .95;
  border-radius: 1px; z-index: 2;
}
.waveform.is-scrubbing { cursor: grabbing; }
.waveform.is-scrubbing .wave-playhead { opacity: 1; transform: scaleY(1.05); }
.player-controls { padding: 0 5px; margin: 2px 0 15px; min-height: 70px; }
.player-controls button { width: 44px; min-height: 44px; color: #b4c5df; border-radius: 50%; }
.player-controls button svg { width: 24px; height: 24px; stroke-width: 1.6; }
.player-controls #prev, .player-controls #next { color: #e5eeff; }
.player-controls .player-play {
  width: 68px; height: 68px; color: #192a46;
  background: linear-gradient(145deg, #fff, #dbe9ff); box-shadow: inset 0 1px 1px #fff, 0 8px 22px #02091826;
}
.player-controls .player-play svg { width: 28px; height: 28px; }
.player-controls button.active { color: #8bc2ff; position: relative; }
.player-controls button.active::after { content: ''; position: absolute; bottom: 0; width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.player-bottom { border: 0; padding: 5px 1px 0; margin-top: auto; background: none; border-radius: 0; gap: 12px; }
.player-bottom button { min-width: 44px; min-height: 44px; font-size: 10px; font-weight: 400; gap: 7px; color: #849bbd; border-radius: 12px; }
.player-bottom svg { width: 18px; height: 18px; stroke-width: 1.5; }
.player-bottom .is-saved { color: #afd0f4; }

/* Bottom sheets: airy rows and one subtle rim, no nested panel borders. */
dialog.track-menu, dialog.upload-dialog {
  background: radial-gradient(ellipse at 5% 0, #8cc4ff17, transparent 65%),
    linear-gradient(135deg, #3c577333, #55618c12), #101d32eb;
  color: #e9f1ff; border: 1px solid #c5ddff24; border-radius: 28px;
  box-shadow: inset 0 1px 0 #e2efff0d, 0 20px 65px #01071255;
  backdrop-filter: blur(30px) saturate(125%); -webkit-backdrop-filter: blur(30px) saturate(125%);
}
dialog::backdrop { background: #02081857 !important; backdrop-filter: blur(3px) !important; -webkit-backdrop-filter: blur(3px); }
dialog.track-menu {
  width: min(calc(100% - 24px), 460px); padding: 0 14px 14px;
  margin: auto auto max(12px, env(safe-area-inset-bottom)); max-height: 82dvh;
  overscroll-behavior: contain; scrollbar-width: none;
}
dialog[open] { animation: sheet-appear .24s cubic-bezier(.2,.8,.25,1); }
@keyframes sheet-appear { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
dialog.sheet-dragging { animation: none; transition: none; }
.track-menu > .menu-handle {
  display: block; position: relative; width: 76px; height: 29px; min-height: 29px;
  margin: 0 auto 1px; padding: 0; border: 0; border-radius: 0; background: none;
  touch-action: none; cursor: grab;
}
.menu-handle::after { content: ''; position: absolute; width: 30px; height: 3px; border-radius: 5px; left: calc(50% - 15px); top: 12px; background: #bdd2ec40; }
.menu-track { border: 0; grid-template-columns: 46px minmax(0,1fr); gap: 12px; padding: 1px 9px 15px; margin-bottom: 6px; }
.menu-track img { width: 46px; height: 46px; border-radius: 10px; }
.menu-track strong { font-size: 15px; font-weight: 550; letter-spacing: -.02em; }
.menu-track small { font-size: 12px; font-weight: 400; color: #95a9c6; }
.track-menu h2 { font-size: 17px; font-weight: 550; letter-spacing: -.025em; padding: 2px 12px 10px; margin: 0 0 6px; }
.track-menu > button:not(.menu-handle) {
  border: 0; border-radius: 13px; min-height: 52px; padding: 13px 12px;
  font-size: 14px; font-weight: 400; line-height: 1.4; gap: 13px; text-align: left;
  transition: background .16s, transform .16s;
}
.track-menu > button:not(.menu-handle) svg { width: 21px; height: 21px; flex-shrink: 0; stroke-width: 1.6; color: #a8bdd9; }
.track-menu > button:active { background: #b5d0ff0a; }
.track-menu .danger, #menuRemoveFromPlaylist { color: #f296a2 !important; }
.track-menu .danger svg, #menuRemoveFromPlaylist svg { color: inherit !important; }
.upload-dialog form { padding: 24px; }
.dialog-head h2 { font-weight: 550; letter-spacing: -.035em; }
.upload-dialog p { font-weight: 400; color: #a1b2cc; }
.upload-dialog input { border: 0; background: #cedfff08; box-shadow: inset 0 1px 0 #b8d1ff09; border-radius: 14px; }
.primary { background: linear-gradient(125deg, #aacffd, #91acf0); color: #12243f; border-radius: 13px; font-weight: 550; }
.secondary { background: #c6d9ff08; font-weight: 400; }
.primary.danger { background: #b4546840; color: #ffc1ce !important; }
.toast { background: #e4eeff; color: #14243f; font-weight: 500; box-shadow: 0 8px 26px #0002; }
@media (hover:hover) {
  .track-menu > button:not(.menu-handle):hover, .player-controls button:not(.player-play):hover { background: #aacaff0a; }
}
@media (min-width:621px) {
  .full-player { width: 620px; padding-left: 48px; padding-right: 48px; }
  .timeline { margin-left: -48px; margin-right: -48px; }
  .player-art-wrap { width: min(68%, 35dvh, 360px); }
}
@media (max-height:740px) {
  .full-player { padding-top: 8px; padding-bottom: 10px; }
  .player-art-wrap { width: min(72%, 30dvh, 270px); margin: 12px auto 20px; }
  .player-copy strong { font-size: 23px; }
  .timeline { margin-top: 19px; }
  .timeline .waveform { height: 110px; }
  .player-controls { margin-bottom: 6px; min-height: 64px; }
  .player-controls .player-play { width: 62px; height: 62px; }
}
@media (max-width:360px) {
  .full-player { padding-left: 20px; padding-right: 20px; }
  .timeline { margin-left: -20px; margin-right: -20px; }
  .player-copy strong { font-size: 22px; }
  .player-bottom { gap: 5px; }
  .player-bottom button { font-size: 9px; }
  .track-menu > button:not(.menu-handle) { font-size: 13px; }
}
@media (prefers-reduced-motion:reduce) { dialog[open] { animation: none; } }
@media (prefers-reduced-transparency:reduce) {
  dialog.track-menu, dialog.upload-dialog, .glass, .mini-player { background: #17243a; backdrop-filter: none; -webkit-backdrop-filter: none; }
}