/*
 * me89x Music: an old-school song page in the forum's dreamy palette, with a skinnable
 * hi-fi player. The player's colours come from --p-* custom properties set per skin on
 * .mx-player[data-skin]; the page keeps its own purple palette like the forum does.
 */

.music-shell {
  --mx-ink: #43296b;
  --mx-muted: #6c5690;
  --mx-link: #6a2fa8;
  --mx-hot: #c2185b;
  --mx-line: #c3afe8;
  --mx-paper: #fffaff;

  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  color: var(--mx-ink);
  font: 12px/1.55 Verdana, Tahoma, "Segoe UI", sans-serif;
  background: repeating-linear-gradient(90deg, #e8defb 0 18px, #f4edff 18px 36px);
}

.music-shell[hidden] { display: none; }
:where(.music-shell) button { font: inherit; color: inherit; }

.mx-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px 12px 12px;
  border-inline: 1px solid var(--mx-line);
  background: #fffaffd9;
}

/* ---------- Header ---------- */

.mx-header { padding: 8px 0 4px; text-align: center; }

.mx-logo {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: #fff;
  font: italic bold 36px/1.1 Georgia, "Times New Roman", serif;
  -webkit-text-stroke: 1px #7b4fc4;
  text-shadow: 0 0 8px #f7a8d8, 2px 2px 0 #b98be8;
}

.mx-tagline { margin: 2px 0 0; color: var(--mx-hot); font: italic 12px Georgia, serif; }

.mx-ticker {
  overflow: hidden;
  margin: 6px 0;
  padding: 2px 0;
  border-block: 1px dashed var(--mx-line);
  color: var(--mx-link);
  font-size: 11px;
  font-weight: bold;
  white-space: nowrap;
}

.mx-ticker span { display: inline-block; padding-left: 100%; animation: mx-ticker 24s linear infinite; }

@keyframes mx-ticker { to { transform: translateX(-100%); } }
@keyframes mx-bob { 50% { transform: translateY(-5px) rotate(-3deg); } }
@keyframes mx-float { 0% { opacity: 0; transform: translateY(6px); } 50% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }

.mx-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px; margin-bottom: 8px; }
.mx-tabs button { border: 0; background: none; padding: 0; color: var(--mx-link); font-weight: bold; cursor: pointer; }
.mx-tabs button:hover, .mx-tabs button.active { color: var(--mx-hot); }

/* ---------- Columns and boxes ---------- */

.mx-columns { display: grid; grid-template-columns: 200px minmax(0, 1fr) 200px; gap: 10px; align-items: start; }
.mx-box { margin-bottom: 10px; padding: 7px 9px; border: 1px solid var(--mx-line); background: var(--mx-paper); }
.mx-box p { margin: 0 0 5px; }
.mx-heading { margin: 0 0 3px; color: var(--mx-link); font: bold 13px "Trebuchet MS", Verdana, sans-serif; text-align: center; }
.mx-left-heading { text-align: left; }
.mx-divider { color: #a98ad9; font-size: 10px; text-align: center; }
.mx-message { padding: 26px 12px; text-align: center; }
.mx-empty { padding: 16px 4px; color: var(--mx-muted); text-align: center; }
.mx-hint { color: var(--mx-muted); font-size: 10px; line-height: 1.5; }
.mx-warn { display: block; color: #b0204f; font-size: 10px; }
.mx-desc { color: var(--mx-muted); font-style: italic; }

.mx-menu { margin: 0; padding: 0; list-style: none; }
.mx-menu button { display: block; width: 100%; overflow: hidden; border: 0; background: none; padding: 2px 0; color: var(--mx-link); text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.mx-menu button:hover, .mx-menu button.active { color: var(--mx-hot); font-weight: bold; }
.mx-menu small { color: var(--mx-muted); font-weight: normal; }
.mx-roots .mx-root { padding: 2px 0; border-bottom: 1px dotted #e1d6f3; }
.mx-roots .mx-actions { display: flex; gap: 8px; }
.mx-roots .mx-import { display: block; margin: 1px 0 2px; color: var(--mx-muted, #6e6381); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }

.mx-btn {
  padding: 2px 10px;
  border: 1px solid #6a48b5;
  border-radius: 3px;
  background: linear-gradient(180deg, #a58ae6 0%, #8560d3 50%, #6f49c2 51%, #9a63c7 100%);
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
}

.mx-btn:disabled { opacity: .6; cursor: wait; }
.mx-block { display: block; width: 100%; margin-top: 5px; }
.mx-more { display: block; margin: 8px auto 2px; }
.music-shell .mx-link { border: 0; background: none; padding: 0; color: var(--mx-link); font-size: 10px; text-decoration: underline; cursor: pointer; }
.mx-list-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 6px; }
.mx-crumbs { margin-bottom: 6px; color: var(--mx-muted); font-size: 11px; }
.mx-crumbs button { border: 0; background: none; padding: 0; color: var(--mx-link); text-decoration: underline; cursor: pointer; }

.music-shell input:not([type=range]):not([type=checkbox]):not([type=file]),
.music-shell select,
.music-shell textarea {
  height: auto;
  padding: 3px 5px;
  border: 1px solid var(--mx-line);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  color: var(--mx-ink);
  font: 11px Verdana, Tahoma, sans-serif;
}

.music-shell label { display: block; gap: 2px; margin: 0; font-size: 10px; font-weight: bold; }
.music-shell label + label { margin-top: 0; }
.mx-check, .music-shell .mx-check { display: flex; align-items: center; gap: 5px; font-weight: normal; }
.music-shell .mx-check input { width: auto; }
.mx-search input { width: 100%; }

/* ---------- Upload ---------- */

.mx-upload summary { cursor: pointer; }
.mx-upload form { margin-top: 6px; }
.mx-upload label { margin-bottom: 5px; }
.mx-upload p { color: var(--mx-muted); font-size: 10px; }
.music-shell .mx-upload input, .music-shell .mx-upload select { display: block; width: 100%; margin-top: 1px; }
.music-shell .mx-upload input[type=file] { padding: 0; border: 0; background: none; font-size: 10px; }

/* ---------- Song rows ---------- */

.mx-songs { margin: 0; padding: 0; list-style: none; }

.mx-songs li {
  display: grid;
  grid-template-columns: 24px 30px minmax(0, 1fr) auto auto;
  gap: 6px;
  align-items: center;
  padding: 3px 2px;
  border-bottom: 1px dotted #e1d6f3;
}

.mx-songs li:last-child { border-bottom: 0; }
.mx-songs li.mx-current { background: #fbe6f3; }
.mx-songs li.mx-current .mx-song::before { content: "♫ "; color: var(--mx-hot); }
.mx-number { color: var(--mx-muted); font-weight: bold; text-align: right; }
.mx-thumb { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--mx-line); background: linear-gradient(135deg, #e3d8ff, #ffdcef); color: var(--mx-link); font-size: 13px; object-fit: cover; }
.mx-thumb-hd { font: bold 9px Tahoma, sans-serif; color: #fff; background: linear-gradient(135deg, #6a2fa8, #c2185b); }
.mx-song-main { min-width: 0; }
.mx-song { border: 0; background: none; padding: 0; color: var(--mx-link); font-weight: bold; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.mx-song span { color: var(--mx-hot); font-weight: normal; }
.mx-song:hover { text-decoration: underline; }
.mx-songs small { display: block; color: var(--mx-muted); font-size: 10px; }
.mx-duration { color: var(--mx-muted); font: 10px "Courier New", monospace; }
.mx-actions { display: inline-flex; gap: 6px; align-items: center; }
.mx-more-btn { font-size: 14px !important; text-decoration: none !important; line-height: 1; }

.mx-menu-pop {
  position: fixed;
  z-index: 60;
  min-width: 190px;
  padding: 4px;
  border: 1px solid var(--mx-line, #c3afe8);
  background: #fffaff;
  box-shadow: 0 8px 24px #3d284d33;
  font: 11px Verdana, Tahoma, sans-serif;
  color: #43296b;
}

.mx-menu-pop button, .mx-menu-pop a { display: block; width: 100%; border: 0; background: none; padding: 5px 8px; color: #6a2fa8; text-align: left; text-decoration: none; cursor: pointer; }
.mx-menu-pop button:hover, .mx-menu-pop a:hover { background: #f3e9ff; color: #c2185b; }
.mx-menu-pop .mx-menu-group { border-top: 1px dotted #c3afe8; margin-top: 3px; padding-top: 3px; }
.mx-menu-pop .mx-menu-group > span { display: block; padding: 2px 8px; color: #6c5690; font-size: 10px; }
.mx-menu-pop .mx-danger { color: #b0204f; }

/* ---------- Playlists ---------- */

.mx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.mx-card { display: block; width: 100%; height: 100%; padding: 7px 9px; border: 1px solid var(--mx-line); background: linear-gradient(180deg, #fff, #f3e9ff); color: var(--mx-ink); text-align: left; cursor: pointer; }
.mx-card:hover { border-color: var(--mx-hot); }
.mx-card b { display: block; color: var(--mx-link); }
.mx-card small, .mx-card em { display: block; color: var(--mx-muted); font-size: 10px; }
.mx-playlist-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 6px; margin-bottom: 6px; }
.mx-playlist-head small { color: var(--mx-muted); font-size: 10px; }
.mx-playlist-form label { margin-bottom: 5px; }
.music-shell .mx-playlist-form input:not([type=checkbox]) { width: 100%; }

/* ---------- Local library ---------- */

.mx-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.mx-folders button { display: block; width: 100%; overflow: hidden; border: 0; background: none; padding: 3px 0; color: var(--mx-link); text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.mx-folders button:hover { color: var(--mx-hot); }
.mx-folders small { color: var(--mx-muted); }
.mx-albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.mx-albums button { display: block; width: 100%; border: 0; background: none; padding: 0; color: var(--mx-ink); text-align: left; cursor: pointer; }
.mx-album-cover { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border: 1px solid var(--mx-line); background: linear-gradient(135deg, #e3d8ff, #ffdcef); color: var(--mx-link); font-size: 34px; object-fit: cover; }
.mx-albums b { display: block; overflow: hidden; margin-top: 3px; color: var(--mx-link); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.mx-albums small { display: block; overflow: hidden; color: var(--mx-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.mx-scan { margin-top: 6px; }
.mx-scan-bar { height: 8px; border: 1px solid var(--mx-line); background: #fff; }
.mx-scan-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8560d3, #c2185b); transition: width .2s; }
.mx-scan small { color: var(--mx-muted); font-size: 10px; }

/* ---------- Now playing (right column) ---------- */

.mx-now-cover { display: block; width: 100%; aspect-ratio: 1; margin-bottom: 6px; border: 1px solid var(--mx-line); object-fit: cover; }
.mx-now-title { font-weight: bold; color: var(--mx-link); overflow-wrap: anywhere; }
.mx-now-artist { color: var(--mx-hot); }
.mx-now-album, .mx-now-tech { color: var(--mx-muted); font-size: 10px; }

/* ---------- Welcome and stats ---------- */

.mx-welcome { font-size: 11px; }
.mx-sign { color: var(--mx-hot); font-style: italic; text-align: right; }
.mx-mascot { position: relative; height: 76px; margin: 6px 0; text-align: center; }
.mx-face { display: inline-grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1b8, #f6cf63); color: #8a5a10; font-size: 46px; line-height: 1; animation: mx-bob 3s ease-in-out infinite; }
.mx-mascot i { position: absolute; top: 8px; left: 18%; color: #b06ad6; font-style: normal; animation: mx-float 2.6s ease-out infinite; }
.mx-mascot i + i { left: auto; right: 18%; animation-delay: 1.3s; }
.mx-counter { padding: 0 3px; background: #000; color: #7dff8a; font: bold 12px "Courier New", monospace; letter-spacing: 1px; }

/* ---------- Player: skin variables ---------- */

.mx-player {
  --p-frame: linear-gradient(180deg, #e9eff9, #b9c7de);
  --p-border: #0a3fa8;
  --p-title: linear-gradient(180deg, #0a5be0 0%, #3d8cf5 8%, #0f62e6 30%, #0a50cf 70%, #0d3fae 100%);
  --p-title-ink: #fff;
  --p-title-shadow: 1px 1px 0 #0a2a78;
  --p-screen: radial-gradient(circle at 50% 30%, #1d1648, #05040f 70%);
  --p-screen-border: 2px inset #8fa3c4;
  --p-screen-ink: #9fe8ff;
  --p-screen-grid: rgba(255, 255, 255, .12);
  --p-btn: radial-gradient(circle at 35% 25%, #fff, #c4d2e8 55%, #8ea5c9);
  --p-btn-ink: #1b3a78;
  --p-btn-border: #5a739e;
  --p-main: radial-gradient(circle at 35% 25%, #e8ffd8, #6fd25a 55%, #2f9a38);
  --p-main-ink: #0b3d14;
  --p-main-border: #1f7a2f;
  --p-flat: linear-gradient(180deg, #fff, #cfdaec);
  --p-flat-on: #bcd4fb;
  --p-accent: #2f6fe0;
  --p-line: #a9b8d2;
  --p-status: #eef2f9;
  --p-status-ink: #1b2f5e;
  --p-panel: #f4f7fc;
  --p-panel-ink: #1b2f5e;
  --p-radius: 7px;
  --p-shadow: 2px 2px 5px #2a2a6a55;
  --p-font: Tahoma, Verdana, sans-serif;
  --p-viz-a: #7f5bff;
  --p-viz-b: #ff7ac6;
  --p-viz-c: #fff3a8;

  margin-bottom: 10px;
  padding: 0 3px 3px;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius) var(--p-radius) 3px 3px;
  background: var(--p-frame);
  box-shadow: var(--p-shadow);
  color: var(--p-status-ink);
  font-family: var(--p-font);
}

.mx-player[data-skin="ember"] {
  --p-frame: linear-gradient(180deg, #3a302b, #221b18);
  --p-border: #120d0b;
  --p-title: linear-gradient(180deg, #4a3b33, #2c221d);
  --p-title-ink: #ffb347;
  --p-title-shadow: 0 0 6px #ff8c0088;
  --p-screen: #140f0a;
  --p-screen-border: 2px solid #4a3b33;
  --p-screen-ink: #ffb347;
  --p-screen-grid: rgba(255, 179, 71, .15);
  --p-btn: linear-gradient(180deg, #5a4a40, #2e2420);
  --p-btn-ink: #ffcf8a;
  --p-btn-border: #1a1210;
  --p-main: linear-gradient(180deg, #ff9f2e, #c45e00);
  --p-main-ink: #2a1400;
  --p-main-border: #7a3c00;
  --p-flat: linear-gradient(180deg, #4a3b33, #2c221d);
  --p-flat-on: #7a4a10;
  --p-accent: #ffb347;
  --p-line: #4a3b33;
  --p-status: #1b1411;
  --p-status-ink: #ffb347;
  --p-panel: #2a211d;
  --p-panel-ink: #f3dcc0;
  --p-radius: 4px;
  --p-shadow: 0 6px 18px #00000066;
  --p-font: "Courier New", monospace;
  --p-viz-a: #a63a00;
  --p-viz-b: #ff8c1a;
  --p-viz-c: #ffe3a3;
}

.mx-player[data-skin="glass"] {
  --p-frame: linear-gradient(160deg, rgba(255, 255, 255, .85), rgba(205, 220, 250, .75));
  --p-border: #b8c8ea;
  --p-title: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(190, 212, 250, .8));
  --p-title-ink: #2b4a86;
  --p-title-shadow: 0 1px 0 #fff;
  --p-screen: linear-gradient(180deg, #243c6e, #0f1a36);
  --p-screen-border: 1px solid #ffffffaa;
  --p-screen-ink: #cfe3ff;
  --p-screen-grid: rgba(255, 255, 255, .12);
  --p-btn: linear-gradient(180deg, #fff, #dbe6fb);
  --p-btn-ink: #2b4a86;
  --p-btn-border: #ffffffcc;
  --p-main: linear-gradient(180deg, #8fd4ff, #2f8fe0);
  --p-main-ink: #fff;
  --p-main-border: #ffffffcc;
  --p-flat: rgba(255, 255, 255, .7);
  --p-flat-on: #bcd8ff;
  --p-accent: #2f8fe0;
  --p-line: #c9d8f4;
  --p-status: rgba(255, 255, 255, .6);
  --p-status-ink: #2b4a86;
  --p-panel: rgba(255, 255, 255, .55);
  --p-panel-ink: #2b4a86;
  --p-radius: 14px;
  --p-shadow: 0 10px 30px #2b4a8633, inset 0 1px 0 #fff;
  --p-font: "Segoe UI", Tahoma, sans-serif;
  --p-viz-a: #2f8fe0;
  --p-viz-b: #8fd4ff;
  --p-viz-c: #ffffff;
}

.mx-player[data-skin="neon"] {
  --p-frame: linear-gradient(180deg, #121426, #07080f);
  --p-border: #19e6ff66;
  --p-title: linear-gradient(90deg, #0b0d1a, #161a33);
  --p-title-ink: #19e6ff;
  --p-title-shadow: 0 0 8px #19e6ff;
  --p-screen: #05060c;
  --p-screen-border: 1px solid #19e6ff55;
  --p-screen-ink: #19e6ff;
  --p-screen-grid: rgba(25, 230, 255, .14);
  --p-btn: linear-gradient(180deg, #1c2140, #0d1022);
  --p-btn-ink: #19e6ff;
  --p-btn-border: #19e6ff66;
  --p-main: linear-gradient(180deg, #ff5fe0, #b3119a);
  --p-main-ink: #fff;
  --p-main-border: #ff2bd6;
  --p-flat: #0d1022;
  --p-flat-on: #3a1a4a;
  --p-accent: #ff2bd6;
  --p-line: #19e6ff33;
  --p-status: #05060c;
  --p-status-ink: #19e6ff;
  --p-panel: #0d1022;
  --p-panel-ink: #cfe8ff;
  --p-radius: 6px;
  --p-shadow: 0 0 18px #19e6ff33, 0 0 40px #ff2bd622;
  --p-font: "Segoe UI", Tahoma, sans-serif;
  --p-viz-a: #19e6ff;
  --p-viz-b: #ff2bd6;
  --p-viz-c: #ffffff;
}

.mx-player[data-skin="paper"] {
  --p-frame: #fbfaf6;
  --p-border: #cfc9bd;
  --p-title: #fbfaf6;
  --p-title-ink: #333;
  --p-title-shadow: none;
  --p-screen: #f1efe8;
  --p-screen-border: 1px solid #cfc9bd;
  --p-screen-ink: #333;
  --p-screen-grid: rgba(0, 0, 0, .08);
  --p-btn: #fff;
  --p-btn-ink: #333;
  --p-btn-border: #cfc9bd;
  --p-main: #333;
  --p-main-ink: #fff;
  --p-main-border: #333;
  --p-flat: #fff;
  --p-flat-on: #e6e2d8;
  --p-accent: #333;
  --p-line: #e0dbd0;
  --p-status: #fbfaf6;
  --p-status-ink: #666;
  --p-panel: #fff;
  --p-panel-ink: #333;
  --p-radius: 3px;
  --p-shadow: none;
  --p-font: Georgia, "Times New Roman", serif;
  --p-viz-a: #9a948a;
  --p-viz-b: #555;
  --p-viz-c: #222;
}

.mx-player[data-skin="wood"] {
  --p-frame: linear-gradient(180deg, #6b4425 0%, #4a2d17 50%, #3b2415 100%);
  --p-border: #2a1a0e;
  --p-title: linear-gradient(180deg, #e9e9e9, #b9b9b9 50%, #d7d7d7);
  --p-title-ink: #222;
  --p-title-shadow: 0 1px 0 #fff;
  --p-screen: radial-gradient(circle at 50% 20%, #1e2a1c, #0b100a 75%);
  --p-screen-border: 3px solid #c9c9c9;
  --p-screen-ink: #f2c879;
  --p-screen-grid: rgba(242, 200, 121, .18);
  --p-btn: linear-gradient(180deg, #f0f0f0, #b5b5b5);
  --p-btn-ink: #222;
  --p-btn-border: #7a7a7a;
  --p-main: linear-gradient(180deg, #f6f6f6, #c0c0c0);
  --p-main-ink: #222;
  --p-main-border: #666;
  --p-flat: linear-gradient(180deg, #e5e5e5, #bdbdbd);
  --p-flat-on: #f2c879;
  --p-accent: #f2c879;
  --p-line: #8a6a4a;
  --p-status: #d9d9d9;
  --p-status-ink: #222;
  --p-panel: #e4e4e4;
  --p-panel-ink: #222;
  --p-radius: 5px;
  --p-shadow: 0 8px 20px #00000066, inset 0 0 0 1px #8a5a35;
  --p-font: "Trebuchet MS", Verdana, sans-serif;
  --p-viz-a: #8a5a35;
  --p-viz-b: #f2c879;
  --p-viz-c: #fff3d6;
}

/* ---------- Player: parts ---------- */

.mx-player-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 -3px 3px;
  padding: 3px 5px 3px 7px;
  border-radius: calc(var(--p-radius) - 1px) calc(var(--p-radius) - 1px) 0 0;
  color: var(--p-title-ink);
  font: bold 11px var(--p-font);
  text-shadow: var(--p-title-shadow);
  background: var(--p-title);
}

.mx-player-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-player-tools { display: inline-flex; gap: 2px; }

.mx-tool {
  min-width: 24px;
  height: 17px;
  padding: 0 5px;
  border: 1px solid var(--p-btn-border);
  border-radius: 3px;
  background: var(--p-flat);
  color: var(--p-btn-ink);
  font: bold 10px var(--p-font);
  text-shadow: none;
  cursor: pointer;
}

.mx-tool[aria-pressed="true"] { background: var(--p-flat-on); box-shadow: inset 0 1px 2px #0003; }
.mx-window { display: inline-flex; gap: 2px; }
.mx-window i { display: grid; place-items: center; width: 16px; height: 15px; border: 1px solid #fff; border-radius: 3px; background: linear-gradient(135deg, #5a95f5, #2360d8); color: #fff; font: bold 10px/1 Tahoma, sans-serif; }
.mx-window i.close { background: linear-gradient(135deg, #f08a6a, #d6401e); }
.mx-player:not([data-skin="xp"]) .mx-window { display: none; }

.mx-screen {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border: var(--p-screen-border);
  background: var(--p-screen);
}

.mx-screen.has-cover, .mx-player.has-cover .mx-screen { grid-template-columns: 96px minmax(0, 1fr); }
.mx-cover { grid-row: 1 / 3; width: 96px; height: 96px; object-fit: cover; border-right: 1px solid var(--p-screen-grid); }
.mx-cover[hidden] { display: none; }
.mx-screen canvas { display: block; width: 100%; height: 96px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mx-readout { grid-column: 1 / -1; padding: 2px 6px; border-top: 1px solid var(--p-screen-grid); background: #0008; }
.mx-player[data-skin="paper"] .mx-readout, .mx-player[data-skin="glass"] .mx-readout { background: transparent; }
.mx-now { margin: 0; overflow: hidden; color: var(--p-screen-ink); font: 11px "Courier New", monospace; text-overflow: ellipsis; white-space: nowrap; }
.mx-tech { margin: 0; overflow: hidden; color: var(--p-screen-ink); opacity: .75; font: 9px var(--p-font); letter-spacing: .3px; text-overflow: ellipsis; white-space: nowrap; }

.mx-seekrow { display: flex; align-items: center; gap: 6px; margin: 4px 2px 2px; color: var(--p-status-ink); font: 10px "Courier New", monospace; }
.mx-seekrow span { min-width: 40px; text-align: center; }

.music-shell .mx-player input[type=range] {
  height: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  accent-color: var(--p-accent);
}

.music-shell .mx-seek { flex: 1; width: auto; min-width: 0; }
.mx-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin: 0 2px; }

.mx-round {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--p-btn-border);
  border-radius: 50%;
  background: var(--p-btn);
  color: var(--p-btn-ink);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

.mx-round:hover { filter: brightness(1.08); }
.mx-round:active { filter: brightness(.92); }
.mx-main { width: 38px; height: 38px; border-color: var(--p-main-border); background: var(--p-main); color: var(--p-main-ink); font-size: 14px; }
.mx-player[data-skin="paper"] .mx-round, .mx-player[data-skin="wood"] .mx-round { border-radius: 4px; }

.mx-toggle {
  min-width: 25px;
  height: 22px;
  padding: 0 5px;
  border: 1px solid var(--p-btn-border);
  border-radius: 3px;
  background: var(--p-flat);
  color: var(--p-btn-ink);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

.mx-toggle[aria-pressed="true"] { border-color: var(--p-accent); background: var(--p-flat-on); }
.mx-volume { display: inline-flex; flex: 1; align-items: center; gap: 3px; min-width: 110px; margin-left: auto; }
.music-shell .mx-volume input { flex: 1; width: auto; min-width: 0; }

.mx-player-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 1px 6px;
  border: 1px solid var(--p-line);
  color: var(--p-status-ink);
  font: 11px var(--p-font);
  background: var(--p-status);
}

.mx-player-status > span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-vu { display: inline-flex; flex-direction: column; gap: 2px; width: 70px; }
.mx-vu i { display: block; height: 4px; width: 0; background: linear-gradient(90deg, var(--p-viz-a), var(--p-viz-b) 70%, var(--p-viz-c)); transition: width 60ms linear; }

/* ---------- Player panels ---------- */

.mx-panels:empty { display: none; }
.mx-panel { margin: 4px 0 0; padding: 7px 8px; border: 1px solid var(--p-line); background: var(--p-panel); color: var(--p-panel-ink); font: 11px var(--p-font); }
.mx-panel .mx-btn { padding: 1px 8px; border-color: var(--p-btn-border); background: var(--p-flat); color: var(--p-btn-ink); font-weight: normal; }
.mx-panel label { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: normal; color: inherit; }
.music-shell .mx-panel select { padding: 1px 4px; border: 1px solid var(--p-line); background: var(--p-flat); color: var(--p-btn-ink); font: 11px var(--p-font); }
.mx-panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 4px; }
.mx-eq-curve { display: block; width: 100%; height: 60px; margin: 2px 0 4px; border: 1px solid var(--p-line); background: var(--p-screen); }
.mx-bands { display: flex; justify-content: space-between; gap: 2px; }
.mx-band { display: flex !important; flex-direction: column; align-items: center; gap: 1px; flex: 1; min-width: 0; }
.music-shell .mx-band input[type=range] { writing-mode: vertical-lr; direction: rtl; width: 20px; height: 100px; }
.mx-band b { font: 9px "Courier New", monospace; }
.mx-band span { font-size: 9px; opacity: .8; }
.mx-preamp { padding-right: 6px; margin-right: 4px; border-right: 1px dashed var(--p-line); }

.mx-fx-row, .mx-set-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 60px; align-items: center; gap: 8px; padding: 3px 0; border-bottom: 1px dotted var(--p-line); }
.mx-fx-row:last-of-type, .mx-set-row:last-of-type { border-bottom: 0; }
.mx-fx-row b { font: 10px "Courier New", monospace; text-align: right; }
.mx-set-row { grid-template-columns: 150px minmax(0, 1fr); }
.mx-set-row small { grid-column: 2; opacity: .75; font-size: 9px; }
.mx-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.music-shell .mx-fx-row input[type=range] { width: 100%; }

.mx-switch { position: relative; display: inline-block !important; width: 34px; height: 18px; }
.mx-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.mx-switch i { position: absolute; inset: 0; border: 1px solid var(--p-btn-border); border-radius: 9px; background: var(--p-flat); transition: background .15s; }
.mx-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--p-btn-ink); transition: transform .15s; }
.mx-switch input:checked + i { background: var(--p-flat-on); border-color: var(--p-accent); }
.mx-switch input:checked + i::after { transform: translateX(16px); background: var(--p-accent); }

.mx-queue-list { margin: 0 0 4px; padding: 0 0 0 18px; }
.mx-queue-list li { display: flex; justify-content: space-between; gap: 6px; padding: 1px 0; }
.mx-queue-list button { flex: 1; overflow: hidden; border: 0; background: none; padding: 0; color: inherit; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.mx-queue-list button span { opacity: .7; }
.mx-queue-list li.mx-current button { font-weight: bold; }
.mx-queue-list small { font: 10px "Courier New", monospace; opacity: .8; }
.mx-panel .mx-link { color: inherit; }

.mx-lyrics { max-height: 220px; overflow-y: auto; text-align: center; scrollbar-width: thin; }
.mx-lyric-lines { margin: 0; padding: 40px 0; list-style: none; }
.mx-lyric-lines li { padding: 3px 0; opacity: .55; transition: opacity .2s, transform .2s; }
.mx-lyric-lines li.active { opacity: 1; font-weight: bold; transform: scale(1.06); color: var(--p-accent); }
.mx-lyric-text { margin: 0; white-space: pre-wrap; font: inherit; text-align: left; }

/* ---------- Fake browser status bar ---------- */

.mx-statusbar { display: flex; align-items: center; gap: 8px; margin-top: 2px; padding: 1px 6px; border: 1px inset #d5cfe6; color: #444; font: 10px Tahoma, Verdana, sans-serif; background: #ece9d8; }
.mx-progress { display: inline-flex; flex: 1; gap: 1px; }
.mx-progress i { width: 7px; height: 9px; background: #37b64a; }

/* ---------- Mini player in the menu bar ---------- */

.music-mini { display: inline-flex; align-items: center; gap: 2px; max-width: 220px; margin-left: 10px; padding: 0 2px 0 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.music-mini[hidden] { display: none; }
.menu-bar > .music-mini > button { padding: 2px 3px; color: var(--purple); font-size: 10px; }
#musicMiniOpen { overflow: hidden; max-width: 170px; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Small screens ---------- */

@media (max-width: 900px) {
  .mx-columns { grid-template-columns: minmax(0, 1fr); }
  .mx-center { order: -1; }
  .mx-right { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .mx-right .mx-box { margin-bottom: 0; }
}

@media (max-width: 640px) {
  .menu-bar { overflow-x: auto; scrollbar-width: none; }
  .menu-bar > button { flex-shrink: 0; white-space: nowrap; }
  .music-mini { position: fixed; right: 8px; bottom: 30px; z-index: 30; margin: 0; box-shadow: 0 2px 8px #3f2d5240; }
  .mx-logo { font-size: 28px; }
  .mx-right { grid-template-columns: 1fr; }
  .mx-songs li { grid-template-columns: 20px 30px minmax(0, 1fr) auto; }
  .mx-songs .mx-duration { display: none; }
  .mx-fx-row { grid-template-columns: 1fr 50px; }
  .mx-fx-row > span { grid-column: 1 / -1; }
  .mx-set-row { grid-template-columns: 1fr; }
  .mx-set-row small { grid-column: 1; }
  .music-shell .mx-band input[type=range] { height: 80px; width: 16px; }
  .music-shell .mx-upload input, .music-shell .mx-upload select, .music-shell .mx-search input { font-size: 16px; }
  .mx-player-tools { gap: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  .mx-face, .mx-mascot i { animation: none; }
  .mx-ticker span { padding-left: 0; animation: none; }
  .mx-ticker { text-align: center; white-space: normal; }
}

/* ---------- Play on device (cast) ---------- */
.mx-cast-tool svg { vertical-align: -2px; }
.mx-player.is-casting .mx-cast-tool { color: var(--p-accent); text-shadow: 0 0 6px currentColor; }
.mx-cast { font: 11px var(--p-font); }
.mx-cast .mx-panel-head b { display: inline-flex; align-items: center; gap: 5px; }
.mx-cast-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 2px 0 6px; padding: 5px 8px; border: 1px solid var(--p-accent); border-radius: 4px; background: var(--p-flat-on); color: var(--p-panel-ink); font-weight: bold; }
.mx-cast-banner .mx-link { font-weight: normal; }
.mx-cast-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.mx-cast-pick { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; width: 100%; padding: 5px 8px; border: 1px solid var(--p-line); border-radius: 4px; background: var(--p-flat); color: var(--p-btn-ink); font: inherit; text-align: left; cursor: pointer; }
.mx-cast-pick:hover { border-color: var(--p-accent); }
.mx-cast-pick[aria-pressed="true"] { background: var(--p-flat-on); border-color: var(--p-accent); box-shadow: inset 0 0 0 1px var(--p-accent); }
.mx-cast-pick:disabled { opacity: .55; cursor: default; }
.mx-cast-pick .mx-cast-kind { grid-row: 1 / span 2; }
.mx-cast-pick .mx-cast-name { font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-cast-pick small { grid-column: 2; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.mx-cast-kind { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; padding: 1px 5px; border-radius: 3px; background: var(--p-accent); color: #fff; font-size: 9px; font-weight: bold; letter-spacing: .3px; text-transform: uppercase; }
.mx-cast-kind[data-kind="dlna"] { background: #2f8f6f; }
.mx-cast-kind[data-kind="cast"] { background: #3a7bd5; }
.mx-cast-kind[data-kind="airplay"] { background: #555; }
.mx-cast-kind[data-kind="local"], .mx-cast-kind[data-kind="native"] { background: var(--p-btn-border); font-size: 12px; }
.mx-cast-note { margin: 6px 0 0; padding: 4px 6px; border-left: 3px solid var(--p-accent); background: var(--p-flat); color: var(--p-panel-ink); }
.mx-cast-note[data-state="error"], .mx-cast-note[data-state="no_python"] { border-color: #c0392b; }
.mx-cast-setup { margin-top: 6px; }
.mx-cast-setup .mx-hint { margin: 4px 0 0; }
.mx-cast-log { max-height: 60px; margin: 4px 0; padding: 4px 6px; overflow: auto; background: #111; color: #9fe8ff; font: 10px/1.4 Consolas, monospace; white-space: pre-wrap; }
.mx-cast-hosts { display: flex; gap: 4px; margin-top: 6px; }
.mx-cast-hosts input { flex: 1; min-width: 0; padding: 2px 6px; border: 1px solid var(--p-line); background: var(--p-flat); color: var(--p-btn-ink); font: 11px var(--p-font); }
.mx-cast .mx-hint { margin-top: 6px; }
.mx-player.is-casting .mx-screen { background: var(--p-screen); }
@media (max-width: 640px) {
  .mx-cast-list { grid-template-columns: 1fr; }
}

/* ---------- YouTube links ---------- */
.mx-video-slot { display: none; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.mx-player.is-youtube .mx-video-slot { display: block; }
.mx-player.is-youtube .mx-screen canvas, .mx-player.is-youtube .mx-cover { display: none; }
.mx-player.is-youtube .mx-screen { grid-template-columns: minmax(0, 1fr); }
.mx-video-host { position: fixed; z-index: 40; background: #000; }
.mx-video-host[hidden] { display: none; }
.mx-video-frame, .mx-video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.mx-video-frame { position: relative; overflow: hidden; } /* the frame may be laid out at 1080p and scaled down (best quality) */
.mx-video-host.is-floating { right: 16px; bottom: 16px; width: min(320px, calc(100vw - 32px)); aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; box-shadow: 0 8px 24px #0008; }
.mx-video-bar { display: none; position: absolute; inset: auto 0 0 0; align-items: center; gap: 8px; padding: 4px 8px; background: linear-gradient(0deg, #000c, #0000); color: #fff; font: 11px Tahoma, Verdana, sans-serif; pointer-events: none; }
.mx-video-host.is-floating .mx-video-bar { display: flex; }
.mx-video-bar span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-video-bar button { pointer-events: auto; padding: 1px 8px; border: 1px solid #fff8; border-radius: 3px; background: #0008; color: #fff; font: inherit; cursor: pointer; }
.mx-thumb-yt { font-size: 11px; color: #fff; background: #e62117; }
.mx-yt-form { display: flex; gap: 4px; margin: 4px 0 6px; }
.mx-yt-form input { flex: 1; min-width: 0; padding: 3px 6px; border: 1px solid var(--mx-line); font: 12px Tahoma, Verdana, sans-serif; }
.mx-yt-form .mx-btn { padding: 2px 10px; }
.mx-yt-list { max-height: 260px; overflow: auto; }
.mx-yt-box .mx-hint { margin: 4px 0 0; }
.mx-panel .mx-yt-inline { margin: 6px 0 0; }
.mx-panel .mx-yt-inline input { border-color: var(--p-line); background: var(--p-flat); color: var(--p-btn-ink); font: 11px var(--p-font); }
.mx-cast-banner.mx-cast-live { border-style: dashed; }
.mx-cast-banner small { font-weight: normal; opacity: .8; }
.mx-yt-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 6px; align-items: center; padding: 3px 0; }
.mx-yt-list li .mx-song { font-size: 12px; white-space: normal; }
.mx-yt-list li small { display: block; font-size: 10px; opacity: .8; }
.mx-cast-note[data-state="stale"] { border-color: #d98a00; }
.mx-cast-note .mx-btn { margin-left: 6px; }
.mx-cast-sticky { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: -2px 0 6px; padding: 0 2px; }
.mx-cast-sticky small { flex-basis: 100%; opacity: .75; }
.mx-live-signal { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #9aa; box-shadow: inset 0 0 2px #0006; vertical-align: -1px; }
.mx-live-signal.is-on { background: #3ad26b; box-shadow: 0 0 6px #3ad26b; }
.mx-cast-source { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 6px 0 0; }