/* memAmp: the Classic skin. */

.memamp .window-body { padding: 0; }
.memamp input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; margin: 0; padding: 0; height: 10px; cursor: pointer; touch-action: none; }
.memamp input[type=range]:focus { outline: none; }
.ma-glyph { display: block; }

/* ---- Classic ------------------------------------------------------------ */
.ma-classic { width: 275px; font: 8px/1.2 Tahoma, Verdana, sans-serif; color: #00e000; user-select: none; -webkit-user-select: none; }
.ma-main {
  height: 116px; padding: 0 6px 6px; display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(#3c3c4c, #1e1e28); border: 1px solid; border-color: #707080 #08080c #08080c #707080;
}
.ma-titlebar { display: flex; align-items: center; gap: 3px; height: 14px; margin: 0 -6px; padding: 0 3px; background: linear-gradient(#2c2c3c, #16161e); touch-action: none; cursor: default; }
.ma-stripes { flex: 1; height: 6px; background: repeating-linear-gradient(#c8a020 0 1px, transparent 1px 2px); }
.ma-name { color: #e8d070; font: bold 8px Tahoma, sans-serif; letter-spacing: 1px; }
.ma-tb {
  width: 9px; height: 9px; padding: 0; display: grid; place-items: center; cursor: pointer;
  font: bold 8px/7px Arial, sans-serif; color: #e8d070; background: #4a4a5a; border: 1px solid; border-color: #9a9aaa #111 #111 #9a9aaa;
}
.ma-tb .ma-glyph { width: 7px; height: 7px; fill: #e8d070; }
.ma-top { display: flex; gap: 5px; touch-action: none; }
.ma-lcd {
  width: 93px; height: 42px; flex: none; padding: 2px 3px; display: flex; flex-direction: column; justify-content: space-between;
  background: #000; border: 1px solid; border-color: #111 #5a5a6a #5a5a6a #111;
}
.ma-lcd-row { display: flex; align-items: center; gap: 5px; }
.ma-state { width: 8px; height: 9px; flex: none; }
.ma-state.playing { background: #00e000; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.ma-state.paused { background: linear-gradient(90deg, #e0a000 0 35%, transparent 35% 65%, #e0a000 65%); }
.ma-state.stopped { background: #406040; }
.ma-time { font: bold 17px/1 "Courier New", monospace; color: #00e000; text-shadow: 0 0 3px #00a000; letter-spacing: -1px; white-space: pre; cursor: pointer; }
.ma-viz { width: 76px; height: 16px; image-rendering: pixelated; cursor: pointer; }
.ma-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ma-marquee-box { height: 13px; padding: 1px 3px; overflow: hidden; background: #000; border: 1px solid; border-color: #111 #5a5a6a #5a5a6a #111; }
.ma-marquee { font: 8px/10px "Courier New", monospace; color: #00e000; white-space: pre; }
.ma-meta { display: flex; align-items: center; gap: 2px; color: #9a9ab0; font-size: 7px; }
.ma-kbps, .ma-khz { min-width: 17px; padding: 0 2px; background: #000; color: #00e000; font: 8px/10px "Courier New", monospace; text-align: right; white-space: pre; }
.ma-unit { margin-right: 4px; }
.ma-light { color: #2c3a2c; text-transform: uppercase; font-size: 7px; margin-left: 3px; }
.ma-light.on { color: #00e000; }
.ma-sliders { display: flex; align-items: center; gap: 5px; margin-top: 1px; }
.ma-vol { width: 68px; }
.ma-bal { width: 38px; }
.ma-classic input[type=range]::-webkit-slider-runnable-track { height: 5px; background: linear-gradient(90deg, #1c6c1c, #b0c000, #c02000); border: 1px solid #111; }
.ma-classic input[type=range]::-moz-range-track { height: 5px; background: linear-gradient(90deg, #1c6c1c, #b0c000, #c02000); border: 1px solid #111; }
.ma-classic input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 9px; margin-top: -3px; background: linear-gradient(#f0e0a0, #a08020); border: 1px solid #221a00; }
.ma-classic input[type=range]::-moz-range-thumb { width: 12px; height: 9px; background: linear-gradient(#f0e0a0, #a08020); border: 1px solid #221a00; border-radius: 0; }
.ma-classic .ma-seek { width: 100%; }
.ma-classic input.ma-seek::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(90deg, #3a5a9a var(--fill, 0%), #10101a var(--fill, 0%)); border: 1px solid #000; }
.ma-classic input.ma-seek::-moz-range-track { height: 6px; background: linear-gradient(90deg, #3a5a9a var(--fill, 0%), #10101a var(--fill, 0%)); border: 1px solid #000; }
.ma-classic input.ma-seek::-webkit-slider-thumb { width: 26px; height: 9px; margin-top: -2px; }
.ma-classic input.ma-seek::-moz-range-thumb { width: 26px; height: 9px; }
.ma-toggle {
  padding: 1px 3px; cursor: pointer; font: bold 6px/7px Tahoma, sans-serif; color: #607060;
  background: #262632; border: 1px solid; border-color: #6a6a7a #0a0a10 #0a0a10 #6a6a7a;
}
.ma-toggle.on { color: #00e000; }
.ma-transport { display: flex; gap: 1px; align-items: center; }
.ma-btn {
  width: 23px; height: 18px; padding: 0; display: grid; place-items: center; cursor: pointer;
  background: linear-gradient(#60606e, #33333d); border: 1px solid; border-color: #a0a0ae #0a0a10 #0a0a10 #a0a0ae;
}
.ma-btn:active, .ma-toggle:active, .ma-tb:active { border-color: #0a0a10 #a0a0ae #a0a0ae #0a0a10; }
.ma-btn .ma-glyph { width: 9px; height: 9px; fill: #e0e0e8; }
.ma-eject { width: 22px; margin-right: 6px; }
.ma-transport .ma-toggle { margin-left: 2px; }
.ma-badge { margin-left: auto; font: bold italic 12px Georgia, serif; color: #e8d070; }

.ma-classic .ma-playlist {
  height: 174px; display: flex; flex-direction: column; background: #000;
  border: 1px solid; border-color: #707080 #08080c #08080c #707080;
}
.ma-classic.no-pl .ma-playlist { display: none; }
.ma-pl-head { display: flex; gap: 4px; align-items: center; padding: 2px 4px; background: linear-gradient(#2c2c3c, #16161e); color: #e8d070; font: bold 7px Tahoma, sans-serif; }
.ma-album { flex: 1; min-width: 0; height: 12px; font: 8px Tahoma, sans-serif; color: #00e000; background: #000; border: 1px solid #444; }
.ma-x { margin-left: auto; padding: 0 4px; font: bold 10px/10px Arial, sans-serif; color: inherit; background: none; border: 0; cursor: pointer; }
.ma-list { flex: 1; overflow: auto; font: 8px/11px Arial, Helvetica, sans-serif; scrollbar-width: thin; scrollbar-color: #4a4a5a #111; }
.ma-list:focus { outline: none; }
.ma-row { display: flex; gap: 3px; width: 100%; padding: 0 3px; text-align: left; font: inherit; color: #00e000; background: none; border: 0; cursor: default; }
.ma-row.sel { background: #0000c6; }
.ma-row.current { color: #fff; }
.ma-t { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ma-n { min-width: 12px; text-align: right; }
.ma-empty { margin: 0; padding: 6px; color: #00a000; }
.ma-pl-foot { padding: 1px 4px; color: #00e000; font: 7px Tahoma, sans-serif; background: #16161e; }