/* ==========================================================================
   Windows Media Player 7–9  (2000–2003)
   Glossy blue-and-silver, generous rounding, the "bubbly" XP-era chrome.
   ========================================================================== */

html[data-theme="wmp"] {
  --radius: 9px;
  --bg: #0d2136;
  --chrome: #1f5590;
  --chrome-hi: #3d84cc;
  --chrome-lo: #0d2f56;
  --panel: #14324f;
  --ink: #f0f6fc;
  --ink-dim: #9dbede;
  --line: #07182b;
  --lcd-bg: #061423;
  --row-active-ink: #04121f;
  --row-hover: rgba(120,190,255,.14);
  --font-ui: "Trebuchet MS", "Tahoma", "DejaVu Sans", Verdana, sans-serif;
}

html[data-theme="wmp"] body {
  background-color: #07131f;           /* solid floor under the gradients */
  background-image:
    radial-gradient(1200px 620px at 50% -180px, #1d4d82 0%, transparent 72%),
    linear-gradient(#0f2740, #07131f);
  background-attachment: fixed;
}

html[data-theme="wmp"] .topbar {
  background: linear-gradient(#2f70b8, #14416f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}

html[data-theme="wmp"] .player {
  border-radius: 16px;
  background: linear-gradient(#2a68ad 0%, #17456f 46%, #102f4d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 10px 34px rgba(0,0,0,.6);
}

html[data-theme="wmp"] .player-titlebar {
  border-radius: 15px 15px 0 0;
  background: linear-gradient(rgba(255,255,255,.34), rgba(255,255,255,.04));
  color: #eaf4ff;
  border-bottom: 1px solid rgba(0,0,0,.35);
  text-shadow: 0 1px 1px rgba(0,0,0,.45);
}
html[data-theme="wmp"] .player-titlebar .pt-name::before { content: "Windows Media Player"; }
html[data-theme="wmp"] .pt-btns i {
  border-radius: 50%;
  border-color: rgba(0,0,0,.4);
  background: linear-gradient(#eaf4ff, #7fb2e0);
}

html[data-theme="wmp"] .lcd,
html[data-theme="wmp"] .viz,
html[data-theme="wmp"] .art-wrap {
  border-radius: 8px;
  border-color: rgba(0,0,0,.55);
  box-shadow: inset 0 2px 7px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.18);
}

/* glossy pill controls */
html[data-theme="wmp"] .tbtn,
html[data-theme="wmp"] .togbtn,
html[data-theme="wmp"] .btn,
html[data-theme="wmp"] .tb-select,
html[data-theme="wmp"] .search {
  border-radius: 999px;
  border-color: rgba(0,0,0,.42);
  background: linear-gradient(rgba(255,255,255,.52), rgba(255,255,255,.1) 48%, rgba(0,0,0,.16));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 3px rgba(0,0,0,.4);
  color: #f2f8ff;
}
html[data-theme="wmp"] .search,
html[data-theme="wmp"] .tb-select { border-radius: 7px; }
html[data-theme="wmp"] .tbtn:active,
html[data-theme="wmp"] .btn:active {
  background: linear-gradient(rgba(0,0,0,.3), rgba(255,255,255,.18));
  box-shadow: inset 0 2px 6px rgba(0,0,0,.55);
}

html[data-theme="wmp"] .tbtn-play {
  width: 54px; height: 40px;
  background: linear-gradient(var(--accent-hi), var(--accent) 50%, var(--accent-lo));
  color: #04121f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 10px color-mix(in srgb, var(--accent) 50%, transparent);
}

html[data-theme="wmp"] .seek::before {
  border-radius: 999px; border-color: rgba(0,0,0,.55);
  background: rgba(0,0,0,.45);
}
html[data-theme="wmp"] .seek-fill {
  border-radius: 999px;
  background: linear-gradient(var(--accent-hi), var(--accent));
}
html[data-theme="wmp"] .seek-buf { border-radius: 999px; }
html[data-theme="wmp"] .seek-knob {
  border-radius: 50%; width: 15px; height: 15px; margin-left: -7px;
  border-color: rgba(0,0,0,.5);
  background: radial-gradient(circle at 35% 30%, #fff, #a8cdf0 60%, #5f93c6);
}

html[data-theme="wmp"] .panel {
  border-radius: 12px;
  background: linear-gradient(rgba(255,255,255,.07), rgba(0,0,0,.18)), var(--panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 20px rgba(0,0,0,.45);
}
html[data-theme="wmp"] .panel-head {
  border-radius: 11px 11px 0 0;
  background: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.05));
  text-shadow: 0 1px 1px rgba(0,0,0,.4);
}
html[data-theme="wmp"] .statusbar {
  background: linear-gradient(rgba(255,255,255,.12), rgba(0,0,0,.2));
}
html[data-theme="wmp"] .addpop { border-radius: 12px; }
html[data-theme="wmp"] .addpop-head { border-radius: 11px 11px 0 0; }