.glass-dock-player,
.glass-dock-player * {
   box-sizing: border-box;
}
.glass-dock-player {
   --gdp-text: #ffffff;
   --gdp-muted: rgba(255,255,255,.68);
   --gdp-faint: rgba(255,255,255,.42);
   --gdp-glass: rgba(17, 20, 29, .62);
   --gdp-glass-strong: rgba(17, 20, 29, .82);
   --gdp-stroke: rgba(255,255,255,.16);
   --gdp-accent: #f9c74f;
   --gdp-accent-2: #f8961e;
   --gdp-art-size: 84px;
   --gdp-cover-size: 58px;
   --gdp-art-size-compact: 66px;
   --gdp-cover-size-compact: 46px;
   color: var(--gdp-text);
   position: fixed;
   top: 0;
   left: 0;
   width: 0;
   height: 0;
   min-height: 0;
   overflow: visible;
   pointer-events: none;
   z-index: 50;
   font: 600 15px/1.4 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.glass-dock-player[data-theme="sunset"] { --gdp-accent: #ff5f7e; --gdp-accent-2: #bf5af2; }
.glass-dock-player[data-theme="mono"] { --gdp-accent: #e5e7eb; --gdp-accent-2: #94a3b8; }
.glass-dock-player[data-theme="neon"] { --gdp-accent: #80ed99; --gdp-accent-2: #56ccf2; }
.glass-dock-player[data-theme="cobalt"] { --gdp-accent: #5b8cff; --gdp-accent-2: #22d3ee; }
.glass-dock-player[data-theme="apple"] {
   --gdp-text: #1d1d1f;
   --gdp-muted: rgba(60,60,67,.72);
   --gdp-faint: rgba(60,60,67,.48);
   --gdp-glass: rgba(242,242,247,.90);
   --gdp-glass-strong: rgba(255,255,255,.96);
   --gdp-stroke: rgba(60,60,67,.18);
   --gdp-accent: #0a84ff;
   --gdp-accent-2: #64d2ff;
}
.glass-dock-player[data-theme="iris"] { --gdp-accent: #a78bfa; --gdp-accent-2: #6366f1; }
.gdp-page {
   min-height: 100%;
   padding: 72px 24px 220px;
   background:
      radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--gdp-accent) 25%, transparent), transparent 28rem),
      radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--gdp-accent-2) 22%, transparent), transparent 26rem),
      radial-gradient(circle at 50% 86%, rgba(191, 90, 242, .18), transparent 30rem),
      linear-gradient(135deg, #0a0d14 0%, #111827 50%, #171420 100%);
}
.gdp-page::before {
   content: "";
   position: absolute;
   inset: 0;
   pointer-events: none;
   background-image:
      linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
   background-size: 42px 42px;
   mask-image: linear-gradient(to bottom, black, transparent 80%);
}
.gdp-hero {
   position: relative;
   z-index: 1;
   max-width: 1080px;
   margin: 0 auto;
}
.gdp-badge {
   display: inline-flex;
   gap: 8px;
   align-items: center;
   padding: 8px 12px;
   border: 1px solid var(--gdp-stroke);
   border-radius: 999px;
   background: rgba(255,255,255,.06);
   backdrop-filter: blur(14px);
   color: var(--gdp-muted);
   font-size: .88em;
   margin-bottom: 20px;
}
.gdp-heading {
   max-width: 860px;
   margin: 0 0 18px;
   font-size: clamp(40px, 7vw, 96px);
   line-height: .92;
   letter-spacing: 0;
}
.gdp-subtitle {
   max-width: 680px;
   margin: 0;
   color: var(--gdp-muted);
   font-size: clamp(16px, 2vw, 19px);
   line-height: 1.7;
}
.gdp-ambient-glow {
   position: fixed;
   z-index: 10;
   left: 50%;
   bottom: -120px;
   width: min(880px, 92vw);
   height: 360px;
   border-radius: 50%;
   transform: translateX(-50%);
   background: radial-gradient(
      circle,
      color-mix(in srgb, var(--gdp-accent) 42%, transparent),
      color-mix(in srgb, var(--gdp-accent-2) 20%, transparent) 42%,
      transparent 72%
   );
   filter: blur(44px);
   opacity: .75;
   pointer-events: none;
   transition: background .5s ease, opacity .35s ease;
}
.gdp-shell {
   position: fixed;
   z-index: 50;
   left: 50%;
   bottom: 26px;
   width: min(1060px, calc(100vw - 32px));
   transform: translateX(-50%);
   color: var(--gdp-text);
   pointer-events: auto;
}
.gdp-drawer {
   max-height: 0;
   overflow: hidden;
   margin: 0 auto 12px;
   border: 1px solid transparent;
   border-radius: 30px;
   opacity: 0;
   transform: translateY(18px) scale(.985);
   transition: max-height .45s cubic-bezier(.2,.8,.2,1), opacity .28s ease, transform .35s ease, border .25s ease;
}
.gdp-shell.drawer-open .gdp-drawer {
   max-height: 430px;
   opacity: 1;
   transform: translateY(0) scale(1);
   border-color: var(--gdp-stroke);
}
.gdp-drawer-inner {
   padding: 16px;
   border-radius: 30px;
   background: var(--gdp-glass-strong);
   backdrop-filter: blur(28px) saturate(145%);
   box-shadow: 0 30px 100px rgba(0,0,0,.45);
}
.gdp-drawer-header {
   display: grid;
   grid-template-columns: 1fr auto auto;
   gap: 10px;
   align-items: center;
   margin-bottom: 14px;
}
.gdp-drawer-title {
   margin: 0;
   font-size: 1em;
   letter-spacing: 0;
}
.gdp-search,
.gdp-category {
   min-height: 40px;
   border: 1px solid var(--gdp-stroke);
   border-radius: 999px;
   background: rgba(255,255,255,.08);
   color: var(--gdp-text);
   outline: none;
   padding: 0 14px;
}
.gdp-category option { color: #111827; }
.gdp-track-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px;
   max-height: 326px;
   overflow: auto;
   padding-right: 4px;
   scrollbar-width: thin;
}
.gdp-drawer-cards .gdp-track-grid {
   grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gdp-track-card {
   display: grid;
   grid-template-columns: 58px 1fr auto;
   gap: 12px;
   align-items: center;
   min-width: 0;
   padding: 10px;
   border: 1px solid rgba(255,255,255,.09);
   border-radius: 22px;
   background: rgba(255,255,255,.055);
   color: inherit;
   cursor: pointer;
   text-align: left;
}
.gdp-drawer-cards .gdp-track-card {
   grid-template-columns: 1fr;
   align-content: start;
}
.gdp-track-card:hover,
.gdp-track-card.active {
   border-color: color-mix(in srgb, var(--gdp-accent) 58%, transparent);
   background: color-mix(in srgb, var(--gdp-accent) 12%, rgba(255,255,255,.055));
}
.gdp-track-card img {
   width: 58px;
   height: 58px;
   object-fit: cover;
   border-radius: 17px;
}
.gdp-drawer-cards .gdp-track-card img {
   width: 100%;
   height: auto;
   aspect-ratio: 1.2;
   border-radius: 18px;
}
.gdp-track-info { min-width: 0; }
.gdp-track-title,
.gdp-track-artist,
.gdp-track-tag {
   display: block;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.gdp-track-title { color: var(--gdp-text); font-weight: 750; }
.gdp-track-artist,
.gdp-track-tag { color: var(--gdp-muted); font-size: .82em; }
.gdp-mini-wave {
   width: 56px;
   height: 28px;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 3px;
   opacity: .76;
}
.gdp-mini-wave i {
   display: block;
   width: 3px;
   border-radius: 999px;
   background: linear-gradient(var(--gdp-accent), var(--gdp-accent-2));
}
.gdp-mini-wave i:nth-child(1) { height: 14px; }
.gdp-mini-wave i:nth-child(2) { height: 22px; }
.gdp-mini-wave i:nth-child(3) { height: 9px; }
.gdp-mini-wave i:nth-child(4) { height: 26px; }
.gdp-mini-wave i:nth-child(5) { height: 17px; }
.gdp-mini-wave i:nth-child(6) { height: 11px; }
.gdp-drawer-cards .gdp-mini-wave {
   display: none;
}
.gdp-dock {
   display: grid;
   grid-template-columns: minmax(230px, 360px) 1fr minmax(190px, 260px);
   gap: 18px;
   align-items: center;
   min-height: 112px;
   padding: 16px;
   border: 1px solid var(--gdp-stroke);
   border-radius: 34px;
   background: var(--gdp-glass);
   backdrop-filter: blur(30px) saturate(160%);
   box-shadow: 0 30px 100px rgba(0,0,0,.45);
}
.gdp-now-playing {
   display: grid;
   grid-template-columns: var(--gdp-art-size) minmax(0,1fr);
   gap: 14px;
   align-items: center;
   min-width: 0;
}
.gdp-art-stage {
   position: relative;
   width: var(--gdp-art-size);
   height: var(--gdp-art-size);
   border-radius: 50%;
   background: conic-gradient(from 90deg, #161922, #2c2f39, #11141d, #353946, #161922);
   box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 16px 32px rgba(0,0,0,.34);
   display: grid;
   place-items: center;
   flex: 0 0 auto;
}
.gdp-vinyl {
   position: absolute;
   inset: 0;
   border-radius: 50%;
   background:
      radial-gradient(circle, transparent 0 11%, rgba(255,255,255,.22) 11.5% 12.5%, transparent 13%),
      repeating-radial-gradient(circle, rgba(255,255,255,.08) 0 1px, transparent 1px 7px),
      conic-gradient(from 180deg, rgba(255,255,255,.08), transparent, rgba(255,255,255,.05), transparent);
   animation: gdp-spin 5s linear infinite paused;
}
.glass-dock-player.is-playing .gdp-vinyl { animation-play-state: running; }
@keyframes gdp-spin { to { transform: rotate(360deg); } }
.gdp-cover {
   position: relative;
   z-index: 2;
   width: var(--gdp-cover-size);
   height: var(--gdp-cover-size);
   border-radius: 50%;
   object-fit: cover;
   border: 3px solid rgba(255,255,255,.2);
}
.glass-dock-player.rotate-cover .gdp-cover {
   animation: gdp-spin 5s linear infinite paused;
}
.glass-dock-player.rotate-cover.is-playing .gdp-cover {
   animation-play-state: running;
}
.gdp-track-meta { min-width: 0; }
.gdp-eyebrow {
   color: var(--gdp-accent);
   font-size: .72em;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 0;
   margin-bottom: 5px;
}
.gdp-title {
   margin: 0 0 4px;
   font-size: 1.02em;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.gdp-artist {
   margin: 0;
   color: var(--gdp-muted);
   font-size: .88em;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.gdp-equalizer {
   display: inline-flex;
   gap: 3px;
   height: 18px;
   align-items: flex-end;
   margin-left: 8px;
   vertical-align: -2px;
}
.gdp-equalizer span {
   width: 3px;
   height: 30%;
   border-radius: 999px;
   background: linear-gradient(var(--gdp-accent), var(--gdp-accent-2));
   animation: gdp-equalize 1s ease-in-out infinite paused;
}
.glass-dock-player.is-playing .gdp-equalizer span { animation-play-state: running; }
.gdp-equalizer span:nth-child(1) { animation-delay: -.12s; }
.gdp-equalizer span:nth-child(2) { animation-delay: -.45s; }
.gdp-equalizer span:nth-child(3) { animation-delay: -.22s; }
.gdp-equalizer span:nth-child(4) { animation-delay: -.68s; }
@keyframes gdp-equalize {
   0%,100% { height: 25%; opacity: .55; }
   45% { height: 100%; opacity: 1; }
   70% { height: 52%; opacity: .75; }
}
.gdp-center { display: grid; gap: 12px; min-width: 0; }
.gdp-control-row { display: flex; align-items: center; justify-content: center; gap: 9px; }
.gdp-icon-btn {
   border: 1px solid rgba(255,255,255,.13);
   background: rgba(255,255,255,.07);
   color: var(--gdp-text);
   border-radius: 999px;
   width: 40px;
   height: 40px;
   display: inline-grid;
   place-items: center;
   cursor: pointer;
   user-select: none;
}
.gdp-icon-btn:hover,
.gdp-icon-btn.active {
   background: color-mix(in srgb, var(--gdp-accent) 16%, transparent);
   border-color: color-mix(in srgb, var(--gdp-accent) 48%, transparent);
}
.gdp-play {
   width: 58px;
   height: 58px;
   border: none;
   color: #17130a;
   font-size: 1.18em;
   background: linear-gradient(135deg, var(--gdp-accent), var(--gdp-accent-2));
   box-shadow: 0 14px 34px color-mix(in srgb, var(--gdp-accent-2) 34%, transparent);
}
.gdp-progress-wrap {
   display: grid;
   grid-template-columns: 44px 1fr 44px;
   gap: 10px;
   align-items: center;
   color: var(--gdp-faint);
   font-size: .78em;
   font-variant-numeric: tabular-nums;
}
.glass-dock-player input[type="range"] {
   appearance: none;
   width: 100%;
   height: 7px;
   border-radius: 999px;
   background: linear-gradient(90deg, var(--gdp-accent) var(--range-progress, 0%), rgba(255,255,255,.16) var(--range-progress, 0%));
   outline: none;
   cursor: pointer;
}
.glass-dock-player input[type="range"]::-webkit-slider-thumb {
   appearance: none;
   width: 17px;
   height: 17px;
   border-radius: 50%;
   background: #fff;
   border: 3px solid var(--gdp-accent-2);
   box-shadow: 0 4px 14px rgba(0,0,0,.28);
}
.glass-dock-player input[type="range"]::-moz-range-thumb {
   width: 17px;
   height: 17px;
   border-radius: 50%;
   background: #fff;
   border: 3px solid var(--gdp-accent-2);
   box-shadow: 0 4px 14px rgba(0,0,0,.28);
}
.gdp-right { display: grid; gap: 12px; }
.gdp-volume-line { display: grid; grid-template-columns: 40px 1fr; gap: 9px; align-items: center; }
.gdp-mode-line { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gdp-pill-btn {
   height: 40px;
   border: 1px solid rgba(255,255,255,.13);
   border-radius: 999px;
   background: rgba(255,255,255,.07);
   color: var(--gdp-text);
   font-weight: 800;
   cursor: pointer;
}
.gdp-pill-btn:hover,
.gdp-pill-btn.active {
   background: color-mix(in srgb, var(--gdp-accent) 16%, transparent);
   border-color: color-mix(in srgb, var(--gdp-accent) 48%, transparent);
}
.gdp-empty {
   grid-column: 1 / -1;
   padding: 20px;
   color: var(--gdp-muted);
   text-align: center;
   border: 1px dashed var(--gdp-stroke);
   border-radius: 22px;
}
.glass-dock-player.is-mini {
   min-height: 0;
   height: 0;
   overflow: visible;
}
.glass-dock-player.is-mini .gdp-page,
.glass-dock-player.is-mini .gdp-ambient-glow {
   display: none;
}
.gdp-shell.mini {
   width: var(--gdp-art-size);
   height: var(--gdp-art-size);
}
.gdp-shell.mini .gdp-drawer { display: none; }
.gdp-shell.mini .gdp-dock {
   display: block;
   width: var(--gdp-art-size);
   height: var(--gdp-art-size);
   min-height: 0;
   padding: 0;
   border: 0;
   border-radius: 50%;
   background: transparent;
   backdrop-filter: none;
   box-shadow: none;
}
.gdp-shell.mini .gdp-center,
.gdp-shell.mini .gdp-right,
.gdp-shell.mini .gdp-track-meta { display: none; }
.gdp-shell.mini .gdp-now-playing {
   display: block;
   width: var(--gdp-art-size);
   height: var(--gdp-art-size);
}
.gdp-shell.mini .gdp-art-stage {
   width: var(--gdp-art-size);
   height: var(--gdp-art-size);
   cursor: pointer;
   aspect-ratio: 1 / 1;
}
.gdp-shell.mini .gdp-cover {
   width: var(--gdp-cover-size);
   height: var(--gdp-cover-size);
}
.glass-dock-player.is-compact .gdp-page { padding-top: 34px; padding-bottom: 160px; }
.glass-dock-player.is-compact .gdp-heading { font-size: clamp(32px, 5vw, 64px); }
.glass-dock-player.is-compact .gdp-dock { min-height: 88px; grid-template-columns: minmax(180px, 300px) 1fr minmax(160px, 220px); }
.glass-dock-player.is-compact .gdp-now-playing { grid-template-columns: var(--gdp-art-size-compact) minmax(0,1fr); }
.glass-dock-player.is-compact .gdp-art-stage { width: var(--gdp-art-size-compact); height: var(--gdp-art-size-compact); }
.glass-dock-player.is-compact .gdp-cover { width: var(--gdp-cover-size-compact); height: var(--gdp-cover-size-compact); }
@media (max-width: 900px) {
   .gdp-page { padding-bottom: 255px; }
   .gdp-dock { grid-template-columns: 1fr; gap: 14px; }
   .gdp-right { grid-template-columns: 1fr 1fr; align-items: center; }
   .gdp-track-grid { grid-template-columns: 1fr; }
   .gdp-drawer-cards .gdp-track-grid { grid-template-columns: 1fr 1fr; }
   .gdp-drawer-header { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
   .gdp-page { padding: 32px 14px 280px; }
   .gdp-shell { bottom: 14px; width: calc(100vw - 20px); }
   .gdp-shell.mini { width: var(--gdp-art-size); height: var(--gdp-art-size); }
   .gdp-dock { border-radius: 28px; padding: 12px; }
   .gdp-now-playing { grid-template-columns: min(var(--gdp-art-size), 70px) minmax(0,1fr); }
   .gdp-art-stage { width: min(var(--gdp-art-size), 70px); height: min(var(--gdp-art-size), 70px); }
   .gdp-cover { width: min(var(--gdp-cover-size), 48px); height: min(var(--gdp-cover-size), 48px); }
   .gdp-control-row { gap: 6px; }
   .gdp-icon-btn { width: 36px; height: 36px; }
   .gdp-play { width: 50px; height: 50px; }
   .gdp-right { grid-template-columns: 1fr; }
   .gdp-track-card { grid-template-columns: 52px 1fr; }
   .gdp-drawer-cards .gdp-track-card { grid-template-columns: 1fr; }
   .gdp-track-card img { width: 52px; height: 52px; }
   .gdp-mini-wave { display: none; }
}