.wm { --wm1: #0a2a7a; --wm2: #1a4ac8; background: var(--wm1); color: #fff; font: 12px Tahoma, sans-serif; height: 100%; display: flex; flex-direction: column; }
.wm-main { flex: 1; display: flex; min-height: 0; } .wm-side { width: 108px; background: linear-gradient(var(--wm2), var(--wm1)); display: flex; flex-direction: column; padding: 4px; gap: 2px; }
.wm-tab { background: transparent; border: 0; color: #cfe; text-align: left; padding: 6px; cursor: pointer; font: 12px Tahoma; border-left: 3px solid transparent; } .wm-tab.on { background: rgba(255,255,255,.18); color: #fff; font-weight: bold; border-left-color: #ffa21a; }
.wm-panel { flex: 1; background: #000; overflow: auto; margin: 4px; border: 2px inset #345; } .wm-cv { width: 100%; height: 100%; display: block; }
.wm-title { padding: 3px 10px; background: rgba(0,0,0,.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-ctl { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: linear-gradient(var(--wm2), var(--wm1)); }
.wm-btn { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #9ac; background: radial-gradient(#e8f0ff, #7a9ad8); color: #123; cursor: pointer; font-size: 13px; } .wm-play { width: 36px; height: 36px; }
.wm-seek { flex: 1; min-width: 120px; width: 100%; } .wm-vol { width: 70px; } .wm-time { min-width: 30px; font-family: monospace; }
.wm-lib { width: 100%; border-collapse: collapse; color: #cfe; } .wm-lib th { text-align: left; background: #123; padding: 3px 6px; } .wm-lib td { padding: 3px 6px; cursor: default; } .wm-lib tr.on td { background: #1a4ac8; color: #fff; }
.wm-card { padding: 14px; color: #cfe; } .wm-card h3 { margin: 0 0 8px; color: #fff; } .wm-hint { color: #89a; padding: 6px; }
.wm-bar { height: 12px; border: 1px solid #89a; margin: 8px 0; } .wm-bar i { display: block; height: 100%; width: 0; background: #2aff5a; }