/* Windows Media Player 9 — full mode ("Windows XP" colour scheme), skin mode, full screen. */
.app-wmplayer {
  --wmp-deep: #0B1F57;
  --wmp-navy: #14307A;
  --wmp-blue: #2B58C4;
  --wmp-sky: #7FA6EC;
  --wmp-silver-1: #F4F7FD;
  --wmp-silver-2: #C9D6EE;
  --wmp-silver-3: #8FA5D2;
  --wmp-text: #EAF1FF;
  --wmp-dim: #9FB4E0;
  --wmp-hi: #FFC940;
}
.app-wmplayer .window-body { background: var(--wmp-deep); }
.app-wmplayer .wmp-host { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ---------------- full mode frame ---------------- */
.app-wmplayer .wmp {
  flex: 1; min-height: 0; display: flex; flex-direction: column; container-type: inline-size; container-name: wmp;
  background: linear-gradient(to bottom, #3D69D0 0, #2350B8 34px, #173E9C 60%, #10307F 100%);
  color: var(--wmp-text); padding: 0 4px 4px; gap: 3px;
}
.app-wmplayer .wmp[hidden], .app-wmplayer .wmp-skin[hidden] { display: none; }
.app-wmplayer .wmp-top {
  height: 30px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 4px 0 2px;
  border-bottom: 1px solid rgba(0,0,40,.35); box-shadow: 0 1px 0 rgba(255,255,255,.18);
}
.app-wmplayer .wmp-feat-title { font: bold 13px var(--font-title); color: #fff; text-shadow: 1px 1px 1px rgba(0,0,40,.6); white-space: nowrap; min-width: 128px; }
.app-wmplayer .wmp-marquee {
  flex: 1; min-width: 0; height: 20px; overflow: hidden; position: relative; border-radius: 10px; padding: 0 10px;
  background: linear-gradient(to bottom, #09194A, #16317A); box-shadow: inset 0 1px 2px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.2);
}
.app-wmplayer .wmp-marquee-text, .app-wmplayer .sk-title span { display: inline-block; white-space: nowrap; line-height: 20px; color: #D6E4FF; }
.app-wmplayer .wmp-marquee.scroll .wmp-marquee-text, .app-wmplayer .sk-title.scroll span { animation: wmp-marquee 14s linear infinite; padding-left: 100%; }
@keyframes wmp-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* round glassy buttons */
.app-wmplayer .wmp-btn {
  border: 0; padding: 0; margin: 0; display: inline-grid; place-items: center; color: #17357E; cursor: var(--cur-arrow);
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 50% 30%, #FFFFFF 0%, #E6EEFC 35%, #AFC3EA 75%, #8AA3D8 100%);
  box-shadow: inset 0 0 0 1px rgba(20,50,130,.55), 0 1px 1px rgba(0,0,30,.45);
  touch-action: manipulation;
}
.app-wmplayer .wmp-btn:hover { background: radial-gradient(circle at 50% 30%, #FFFFFF 0%, #FFF4D2 35%, #FFD36B 80%, #E3A92D 100%); }
.app-wmplayer .wmp-btn:active { background: radial-gradient(circle at 50% 70%, #FFFFFF 0%, #C8D7F4 45%, #7E97CE 100%); }
.app-wmplayer .wmp-btn:focus-visible { outline: 1px dotted #fff; outline-offset: 1px; }
.app-wmplayer .wmp-menubtn { width: 16px; height: 16px; }
.app-wmplayer .wmp-topbtn { width: 22px; height: 22px; }
.app-wmplayer .wmp-toggle.on { color: #fff; background: radial-gradient(circle at 50% 30%, #BFE7FF 0%, #4A9BF0 45%, #1B58C8 100%); }

/* ---------------- main row: feature taskbar + stage ---------------- */
.app-wmplayer .wmp-main { flex: 1; min-height: 0; display: flex; gap: 4px; }
.app-wmplayer .wmp-taskwrap { flex: none; display: flex; }
.app-wmplayer .wmp-tasks {
  width: 104px; display: flex; flex-direction: column; gap: 2px; padding: 6px 0; overflow-y: auto; overflow-x: hidden;
  background: linear-gradient(to right, #0E2A74, #1B3F9A 85%, #2A56BC); border-radius: 8px 0 0 8px;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.15);
}
.app-wmplayer .wmp-task {
  border: 0; background: transparent; color: #DCE7FF; text-align: left; font: 11px var(--font-ui); line-height: 13px;
  padding: 6px 8px 6px 12px; min-height: 36px; border-radius: 0 12px 12px 0; margin-right: 4px; cursor: var(--cur-arrow);
}
.app-wmplayer .wmp-task:hover { color: #fff; background: linear-gradient(to right, rgba(255,255,255,.05), rgba(255,255,255,.22)); text-decoration: underline; }
.app-wmplayer .wmp-task.active {
  color: #10307F; font-weight: bold;
  background: linear-gradient(to bottom, #FFFFFF, #DDE7FA 50%, #B8CCF0); box-shadow: 1px 1px 2px rgba(0,0,40,.5);
}
.app-wmplayer .wmp-task-select { display: none; }
.app-wmplayer .wmp-stage {
  flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 8px; background: #000; box-shadow: inset 0 0 0 1px #061238, 0 1px 0 rgba(255,255,255,.2);
}

/* ---------------- Now Playing ---------------- */
.app-wmplayer .wmp-np { flex: 1; min-height: 0; display: flex; }
.app-wmplayer .wmp-vizbox { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-wmplayer .wmp-canvaswrap { flex: 1; min-height: 0; position: relative; background: #000; }
.app-wmplayer .wmp-viz { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.app-wmplayer .wmp-vizbar {
  height: 24px; flex: none; display: flex; align-items: center; gap: 4px; padding: 0 6px;
  background: linear-gradient(to bottom, #1E3C8E, #0D2263); border-top: 1px solid #3A64C8;
}
.app-wmplayer .wmp-arrow { width: 16px; height: 16px; }
.app-wmplayer .wmp-vizname { margin-left: 4px; color: #CFE0FF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-wmplayer .wmp-plist {
  width: 196px; flex: none; display: flex; flex-direction: column; min-height: 0;
  background: linear-gradient(to bottom, #102A70, #0A1C4F); border-left: 1px solid #3A64C8;
}
.app-wmplayer .wmp-plist.hidden { display: none; }
.app-wmplayer .wmp-plhead { padding: 4px; border-bottom: 1px solid rgba(255,255,255,.12); }
.app-wmplayer .wmp-plselect { width: 100%; }
.app-wmplayer .wmp-plist-items { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 0; outline: none; touch-action: pan-y; }
.app-wmplayer .wmp-plrow { display: flex; gap: 6px; padding: 3px 6px; color: #D6E2FF; cursor: var(--cur-arrow); }
.app-wmplayer .wmp-plrow:hover { background: rgba(255,255,255,.08); }
.app-wmplayer .wmp-plrow.sel { background: #2F5BC6; color: #fff; }
.app-wmplayer .wmp-plrow.playing { color: var(--wmp-hi); font-weight: bold; }
.app-wmplayer .wmp-pltitle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-wmplayer .wmp-pldur { flex: none; opacity: .85; }
.app-wmplayer .wmp-plempty { padding: 10px 8px; color: var(--wmp-dim); line-height: 15px; }
.app-wmplayer .wmp-pltotal { flex: none; padding: 4px 6px; border-top: 1px solid rgba(255,255,255,.12); color: var(--wmp-dim); text-align: right; min-height: 21px; }

/* ---------------- transport ---------------- */
.app-wmplayer .wmp-transport {
  flex: none; padding: 5px 8px 6px; border-radius: 0 0 10px 10px;
  background: linear-gradient(to bottom, #F5F8FE 0%, #DCE5F7 45%, #BCCBEA 100%);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,30,.5); color: #0E2A6E;
}
.app-wmplayer .wmp-ctrls { display: flex; align-items: center; gap: 8px; margin-top: 4px; min-width: 0; }
.app-wmplayer .wmp-cluster { display: flex; align-items: center; gap: 3px; flex: none; }
.app-wmplayer .wmp-play {
  width: 40px; height: 40px; color: #fff;
  background: radial-gradient(circle at 50% 28%, #D9ECFF 0%, #6FA8F4 30%, #1E5BD3 70%, #0D3697 100%);
  box-shadow: inset 0 0 0 1px #0B2C80, 0 0 0 3px #E9EFFB, 0 0 0 4px #8FA5D2, 0 2px 3px 3px rgba(0,0,40,.3);
  margin: 2px 6px 2px 4px;
}
.app-wmplayer .wmp-play:hover { background: radial-gradient(circle at 50% 28%, #FFF7D6 0%, #FFCD5A 40%, #E08A0A 100%); color: #5A2A00; }
.app-wmplayer .wmp-small { width: 24px; height: 24px; }
.app-wmplayer .wmp-readout { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 8px; height: 22px; border-radius: 11px;
  background: linear-gradient(to bottom, #0A1B4E, #183580); color: #CFE0FF; box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.app-wmplayer .wmp-status { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-wmplayer .wmp-time { flex: none; font-variant-numeric: tabular-nums; color: #fff; }

/* sliders */
.app-wmplayer .wmp-slider { position: relative; height: 14px; cursor: var(--cur-arrow); outline: none; touch-action: none; }
.app-wmplayer .wmp-rail {
  position: absolute; left: 0; right: 0; top: 5px; height: 4px; border-radius: 2px; overflow: hidden;
  background: #6F86BC; box-shadow: inset 0 1px 1px rgba(0,0,30,.6);
}
.app-wmplayer .wmp-fill { height: 100%; width: 0; background: linear-gradient(to bottom, #9EE0FF, #2C8BEA); }
.app-wmplayer .wmp-thumb {
  position: absolute; top: 1px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, #C7D6F2 55%, #6D86C4); box-shadow: 0 0 0 1px #28488F, 0 1px 2px rgba(0,0,0,.4);
}
.app-wmplayer .wmp-slider:focus-visible .wmp-thumb { box-shadow: 0 0 0 1px #28488F, 0 0 0 3px #FFC940; }
.app-wmplayer .wmp-slider.disabled .wmp-thumb { visibility: hidden; }
.app-wmplayer .wmp-seek { margin: 0 2px; }
.app-wmplayer .wmp-vol { width: 70px; }

/* ---------------- feature panes ---------------- */
.app-wmplayer .wmp-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #F4F7FD; color: #000; }
.app-wmplayer .wmp-pane-head {
  flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 5px 8px; min-height: 32px;
  background: linear-gradient(to bottom, #E7EEFB, #C3D3F1); border-bottom: 1px solid #8FA5D2;
}
.app-wmplayer .wmp-pane-title { font: bold 13px var(--font-title); color: #14307A; margin-right: auto; }
.app-wmplayer .wmp-pane-tools { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.app-wmplayer .wmp-pill {
  height: 21px; padding: 0 10px; border-radius: 11px; border: 1px solid #5A78B8; color: #0E2A6E; font: 11px var(--font-ui);
  background: linear-gradient(to bottom, #fff, #DCE6F8 55%, #BCCDEE); cursor: var(--cur-arrow);
}
.app-wmplayer .wmp-pill:hover:not(:disabled) { border-color: #D89B1C; background: linear-gradient(to bottom, #fff, #FFF0C8 55%, #FFD577); }
.app-wmplayer .wmp-pill:disabled { color: #9AA7C2; border-color: #B7C3DC; }
.app-wmplayer .wmp-dim { color: #6A7894; }
.app-wmplayer .wmp-pad { padding: 10px; }
.app-wmplayer .wmp-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; text-align: center; color: #334; line-height: 15px; }
.app-wmplayer .wmp-empty b { font-size: 13px; color: #14307A; }

.app-wmplayer .wmp-offline { flex: 1; overflow-y: auto; padding: 16px 20px; line-height: 16px; background: #fff; touch-action: pan-y; }
.app-wmplayer .wmp-offline.busy { cursor: var(--cur-busy); opacity: .6; }
.app-wmplayer .wmp-off-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.app-wmplayer .wmp-off-head h2 { margin: 0; font: bold 14px var(--font-title); color: #14307A; }
.app-wmplayer .wmp-offline ul { padding-left: 18px; }
.app-wmplayer .wmp-offline li { margin-bottom: 6px; }
.app-wmplayer .wmp-off-btns { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.app-wmplayer .wmp-off-stamp { margin-top: 12px; color: #6A7894; }

.app-wmplayer .wmp-grid { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fff; }
.app-wmplayer .wmp-grid-head { display: grid; grid-template-columns: 22px 2fr 60px 1fr 1fr 1fr; background: linear-gradient(#fff, #E8ECF4); border-bottom: 1px solid #C5CCDA; }
.app-wmplayer .wmp-grid-head span { padding: 3px 5px; border-right: 1px solid #D5DAE4; white-space: nowrap; overflow: hidden; }
.app-wmplayer .wmp-drive { width: 130px; }

.app-wmplayer .wmp-burn { flex: 1; min-height: 0; display: flex; gap: 6px; padding: 6px; }
.app-wmplayer .wmp-burn-col { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid #8FA5D2; }
.app-wmplayer .wmp-burn-head { display: flex; flex-direction: column; gap: 3px; padding: 5px; background: #E7EEFB; border-bottom: 1px solid #C3D3F1; }
.app-wmplayer .wmp-burn-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 6px; display: flex; flex-direction: column; gap: 3px; touch-action: pan-y; }

.app-wmplayer .wmp-lib { flex: 1; min-height: 0; display: flex; background: #fff; }
.app-wmplayer .wmp-tree { width: 170px; flex: none; overflow: auto; border-right: 1px solid #8FA5D2; padding: 3px 0; background: #F7F9FE; touch-action: pan-y; }
.app-wmplayer .wmp-tree-row { display: flex; align-items: center; gap: 4px; padding: 2px 4px; white-space: nowrap; cursor: var(--cur-arrow); }
.app-wmplayer .wmp-tree-row:hover { text-decoration: underline; color: #0E3FA8; }
.app-wmplayer .wmp-tree-row.sel { background: #316AC5; color: #fff; }
.app-wmplayer .wmp-table { flex: 1; min-width: 0; overflow: auto; touch-action: pan-x pan-y; }
.app-wmplayer .wmp-trow { display: grid; grid-template-columns: minmax(120px, 2fr) minmax(90px, 1.3fr) minmax(90px, 1.3fr) 50px minmax(60px, .8fr); cursor: var(--cur-arrow); }
.app-wmplayer .wmp-trow span { padding: 2px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-wmplayer .wmp-trow.head { position: sticky; top: 0; background: linear-gradient(#fff, #E8ECF4); border-bottom: 1px solid #C5CCDA; z-index: 1; }
.app-wmplayer .wmp-trow.head span { border-right: 1px solid #D5DAE4; }
.app-wmplayer .wmp-trow:not(.head):nth-child(odd) { background: #F3F6FC; }
.app-wmplayer .wmp-trow.sel:not(.head) { background: #316AC5; color: #fff; }
.app-wmplayer .wmp-search { width: 130px; }

.app-wmplayer .wmp-skins { flex: 1; min-height: 0; display: flex; gap: 8px; padding: 8px; }
.app-wmplayer .wmp-skin-list { width: 150px; flex: none; overflow-y: auto; }
.app-wmplayer .wmp-skin-row { padding: 3px 6px; cursor: var(--cur-arrow); }
.app-wmplayer .wmp-skin-row.sel { background: #316AC5; color: #fff; }
.app-wmplayer .wmp-skin-side { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.app-wmplayer .wmp-skin-preview { flex: 1; width: 100%; min-height: 120px; display: grid; place-items: center; background: #E6ECF8; border: 1px solid #8FA5D2; }
.app-wmplayer .wmp-skin-info { text-align: center; line-height: 16px; }
.app-wmplayer .wmp-mini-skin { width: 140px; height: 100px; position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 6px; padding-bottom: 12px; }
.app-wmplayer .wmp-mini-skin i { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #C9D6EE 60%, #6D86C4); box-shadow: 0 0 0 1px rgba(0,0,40,.4); }
.app-wmplayer .wmp-mini-skin i:nth-child(2) { width: 24px; height: 24px; }

/* dialogs content */
.app-wmplayer-dlg .wmp-urldlg { display: flex; flex-direction: column; gap: 10px; }
.app-wmplayer-dlg .wmp-urlrow { display: flex; gap: 10px; align-items: flex-start; line-height: 15px; }
.app-wmplayer-dlg .wmp-urlfield { display: flex; align-items: center; gap: 8px; }
.app-wmplayer-dlg .wmp-about { display: flex; flex-direction: column; gap: 8px; line-height: 15px; max-width: 400px; }
.app-wmplayer-dlg .wmp-about p { margin: 0; }
.app-wmplayer-dlg .wmp-about-logo { display: flex; gap: 12px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid #ACA899; }
.app-wmplayer-dlg .wmp-about-name { font: bold 14px var(--font-title); color: #14307A; }
.app-wmplayer-dlg .wmp-about-ver { margin-top: 3px; }
.app-wmplayer-dlg .wmp-about .wmp-dim, .app-wmplayer-dlg .wmp-search-dlg .wmp-dim, .app-wmplayer-dlg .wmp-opts .wmp-dim { color: #6A6A6A; }
.app-wmplayer-dlg .wmp-tech { display: flex; flex-direction: column; gap: 4px; line-height: 15px; }
.app-wmplayer-dlg .wmp-props { display: flex; flex-direction: column; gap: 6px; padding: 8px 4px; }
.app-wmplayer-dlg .wmp-prophead { display: flex; gap: 10px; align-items: center; }
.app-wmplayer-dlg .wmp-proprow { display: grid; grid-template-columns: 90px 1fr; gap: 6px; }
.app-wmplayer-dlg .wmp-proprow span:last-child { word-break: break-all; }
.app-wmplayer-dlg .wmp-opts { display: flex; flex-direction: column; gap: 6px; padding: 8px 4px; }
.app-wmplayer-dlg .wmp-opts fieldset { display: flex; flex-direction: column; gap: 3px; }
.app-wmplayer-dlg .wmp-optrow { display: flex; }
.app-wmplayer-dlg .wmp-pluglist { height: 120px; overflow-y: auto; padding: 2px 4px; display: flex; flex-direction: column; gap: 2px; }
.app-wmplayer-dlg .wmp-search-dlg { display: flex; flex-direction: column; gap: 6px; width: 320px; max-width: 100%; }
.app-wmplayer-dlg .wmp-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------- skin mode (same window, chrome hidden) ---------------- */
.window.app-wmplayer.wmp-skinmode { background: transparent; box-shadow: none; padding: 0; border-radius: 0; }
.window.app-wmplayer.wmp-skinmode > .titlebar,
.window.app-wmplayer.wmp-skinmode .menubar,
.window.app-wmplayer.wmp-skinmode > .rz { display: none; }
.window.app-wmplayer.wmp-skinmode .window-client,
.window.app-wmplayer.wmp-skinmode .window-body { background: transparent; }
.app-wmplayer .wmp-skin { flex: 1; min-height: 0; display: grid; place-items: center; }
.app-wmplayer .sk-body {
  --sk-a: #5E8FF0; --sk-b: #1B45B4; --sk-c: #0B2466; --sk-screen: #000; --sk-text: #DCE8FF;
  width: 280px; height: 240px; position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 14px 22px 12px; color: var(--sk-text); cursor: var(--cur-move);
  border-radius: 46% 54% 42% 58% / 38% 40% 60% 62%;
  background: radial-gradient(ellipse at 35% 20%, rgba(255,255,255,.55), transparent 40%), linear-gradient(160deg, var(--sk-a), var(--sk-b) 55%, var(--sk-c));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), inset 0 -8px 18px rgba(0,0,40,.45), 0 6px 16px rgba(0,0,0,.45);
}
.app-wmplayer .sk-top { width: 84%; display: flex; align-items: center; gap: 4px; }
.app-wmplayer .sk-title { flex: 1; min-width: 0; height: 18px; overflow: hidden; border-radius: 9px; padding: 0 8px; background: rgba(0,0,30,.45); font-size: 10px; }
.app-wmplayer .sk-title span { line-height: 18px; color: var(--sk-text); }
.app-wmplayer .sk-mini { width: 16px; height: 16px; }
.app-wmplayer .sk-x:hover { background: radial-gradient(circle at 50% 30%, #fff, #FF9C7A 45%, #D5381A); color: #fff; }
.app-wmplayer .sk-screen { position: relative; width: 170px; height: 86px; border-radius: 40px / 30px; overflow: hidden; background: var(--sk-screen);
  box-shadow: inset 0 0 0 2px rgba(0,0,30,.6), 0 1px 0 rgba(255,255,255,.4); }
.app-wmplayer .sk-viz { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.app-wmplayer .sk-time { position: absolute; right: 16px; bottom: 6px; font-size: 10px; color: #fff; text-shadow: 0 0 3px #000; font-variant-numeric: tabular-nums; }
.app-wmplayer .sk-seek { width: 190px; }
.app-wmplayer .sk-ctrls { display: flex; align-items: center; gap: 6px; }
.app-wmplayer .sk-b { width: 24px; height: 24px; }
.app-wmplayer .sk-play { width: 36px; height: 36px; color: #fff; background: radial-gradient(circle at 50% 28%, #E6F2FF, #6FA8F4 35%, #1E5BD3 75%, #0D3697); }
.app-wmplayer .sk-bottom { display: flex; align-items: center; gap: 8px; }
.app-wmplayer .sk-vol { width: 90px; }
/* skin variants */
.app-wmplayer .wmp-skin[data-skin="atomic"] .sk-body { --sk-a: #D8F76A; --sk-b: #6DB21E; --sk-c: #2C5A07; --sk-text: #F4FFE0; border-radius: 120px 120px 60px 60px / 90px 90px 60px 60px; }
.app-wmplayer .wmp-skin[data-skin="goo"] .sk-body { --sk-a: #D59BFF; --sk-b: #7B2FD1; --sk-c: #34096A; border-radius: 62% 38% 55% 45% / 45% 60% 40% 55%; }
.app-wmplayer .wmp-skin[data-skin="revert"] .sk-body { --sk-a: #FFFFFF; --sk-b: #B8C0CC; --sk-c: #6B7584; --sk-text: #1E2735; border-radius: 22px; }
.app-wmplayer .wmp-skin[data-skin="revert"] .sk-title { background: rgba(255,255,255,.55); }
.app-wmplayer .wmp-skin[data-skin="heart"] .sk-body { --sk-a: #FF9DB6; --sk-b: #E0245E; --sk-c: #7A0B30; border-radius: 50% 50% 50% 50% / 40% 40% 70% 70%; }
.app-wmplayer .wmp-mini-skin[data-skin] { border-radius: 46% 54% 42% 58% / 38% 40% 60% 62%; background: linear-gradient(160deg, #5E8FF0, #1B45B4 55%, #0B2466); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 3px 8px rgba(0,0,0,.35); }
.app-wmplayer .wmp-mini-skin[data-skin="atomic"] { border-radius: 60px 60px 30px 30px / 50px 50px 30px 30px; background: linear-gradient(160deg, #D8F76A, #6DB21E 55%, #2C5A07); }
.app-wmplayer .wmp-mini-skin[data-skin="goo"] { border-radius: 62% 38% 55% 45% / 45% 60% 40% 55%; background: linear-gradient(160deg, #D59BFF, #7B2FD1 55%, #34096A); }
.app-wmplayer .wmp-mini-skin[data-skin="revert"] { border-radius: 14px; background: linear-gradient(160deg, #fff, #B8C0CC 55%, #6B7584); }
.app-wmplayer .wmp-mini-skin[data-skin="heart"] { border-radius: 50% 50% 50% 50% / 40% 40% 70% 70%; background: linear-gradient(160deg, #FF9DB6, #E0245E 55%, #7A0B30); }

/* ---------------- full screen overlay ---------------- */
.app-wmplayer.wmp-fs { position: fixed; inset: 0; z-index: 100000; background: #000; }
.app-wmplayer.wmp-fs .wmp-fs-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.app-wmplayer.wmp-fs .wmp-fs-bar {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: 20px; background: linear-gradient(to bottom, rgba(40,80,180,.9), rgba(10,30,90,.9)); box-shadow: 0 2px 10px rgba(0,0,0,.6);
  transition: opacity .4s; max-width: calc(100% - 16px); flex-wrap: wrap; justify-content: center;
}
.app-wmplayer.wmp-fs.idle { cursor: none; }
.app-wmplayer.wmp-fs.idle .wmp-fs-bar { opacity: 0; }
.app-wmplayer.wmp-fs .wmp-fs-time { color: #fff; padding: 0 6px; font-variant-numeric: tabular-nums; min-width: 40px; }

/* ---------------- narrow / phone ---------------- */
@container wmp (max-width: 600px) {
  .app-wmplayer .wmp-main { flex-direction: column; gap: 3px; }
  .app-wmplayer .wmp-taskwrap { display: block; }
  .app-wmplayer .wmp-tasks { display: none; }
  .app-wmplayer .wmp-task-select { display: block; width: 100%; }
  .app-wmplayer .wmp-feat-title { min-width: 0; font-size: 12px; }
  .app-wmplayer .wmp-np { flex-direction: column; }
  .app-wmplayer .wmp-canvaswrap { min-height: 150px; }
  .app-wmplayer .wmp-plist { width: auto; height: 38%; min-height: 120px; border-left: 0; border-top: 1px solid #3A64C8; }
  .app-wmplayer .wmp-ctrls { flex-wrap: wrap; gap: 4px 6px; }
  .app-wmplayer .wmp-readout { order: 10; flex-basis: 100%; }
  .app-wmplayer .wmp-play { width: 36px; height: 36px; }
  .app-wmplayer .wmp-small { width: 28px; height: 28px; }
  .app-wmplayer .wmp-vol { width: 60px; }
  .app-wmplayer .wmp-lib { flex-direction: column; }
  .app-wmplayer .wmp-tree { width: auto; max-height: 110px; border-right: 0; border-bottom: 1px solid #8FA5D2; }
  .app-wmplayer .wmp-trow { grid-template-columns: minmax(110px, 2fr) minmax(80px, 1fr) 44px; }
  .app-wmplayer .wmp-trow .c-album, .app-wmplayer .wmp-trow .c-genre { display: none; }
  .app-wmplayer .wmp-burn, .app-wmplayer .wmp-skins { flex-direction: column; }
  .app-wmplayer .wmp-skin-list { width: auto; max-height: 100px; }
  .app-wmplayer .wmp-grid-head { grid-template-columns: 22px 2fr 60px 1fr; }
  .app-wmplayer .wmp-grid-head span:nth-child(n+5) { display: none; }
  .app-wmplayer .wmp-search { width: 100px; }
}