:root{ --bg:#222; --chrome:#2b2b2b; --hi:#00ffa3; --accent:#ffbf00; --text:#e6e6e6; }
*{ box-sizing: border-box; }
body.wa-skin{ background:var(--bg); color:var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin:0; }
.wa-titlebar{ display:flex; justify-content:space-between; align-items:center; padding:10px; background:linear-gradient(#3a3a3a,#1e1e1e); border-bottom:2px solid #000; }
.wa-title{ font-weight:700; letter-spacing:1px; }
.wa-status{ color:var(--hi); font-size:0.9rem; }
.wa-main{ max-width:640px; margin:0 auto; padding:12px; }
.wa-display{ display:flex; gap:12px; background:var(--chrome); border:1px solid #000; padding:10px; border-radius:6px; box-shadow: inset 0 0 8px #000; }
.wa-cover{ width:84px; height:84px; object-fit:cover; border:1px solid #000; }
.wa-artist{ color:var(--hi); font-weight:600; }
.wa-track{ color:var(--accent); }
.wa-controls{ display:grid; grid-template-columns: repeat(5,auto) 1fr auto; gap:8px; align-items:center; margin:12px 0; }
.wa-btn{ background:#111; color:#ddd; border:1px solid #000; padding:8px 10px; border-radius:4px; box-shadow: 0 1px 0 #444; }
.wa-btn:active{ box-shadow:none; transform: translateY(1px); }
.wa-seek{ width:100%; accent-color: var(--accent); }
.wa-vol{ width:100px; accent-color: var(--hi); }
.wa-playlist{ list-style:none; padding:0; margin:0; max-height:50vh; overflow:auto; background:var(--chrome); border:1px solid #000; border-radius:6px; }
.wa-playlist li{ padding:8px 10px; border-bottom:1px solid #111; font-family: ui-monospace, Menlo, Monaco, Consolas, 'Courier New', monospace; }
.wa-playlist li:hover{ background:#1a1a1a; cursor:pointer; }

/* Search */
.wa-search-wrap{ position:relative; min-width:260px; flex:1; }
.wa-search{ width:100%; padding:8px 10px; border:1px solid #000; border-radius:4px; background:#111; color:#eee; }
.wa-search-drop{
  position:absolute; top:110%; left:0; right:0; background:#2b2b2b; border:1px solid #000;
  border-radius:6px; max-height:50vh; overflow:auto; z-index:1000; box-shadow:0 6px 18px rgba(0,0,0,0.5);
}
.wa-sgroup{ padding:6px 10px; font-size:0.8rem; color:#00ffa3; border-top:1px solid #111; }
.wa-sitem{ display:flex; gap:8px; align-items:center; padding:8px 10px; border-top:1px solid #111; }
.wa-sitem:hover{ background:#1a1a1a; cursor:pointer; }
.wa-scover{ width:28px; height:28px; object-fit:cover; border:1px solid #000; border-radius:2px; }
.wa-sempty{ padding:10px; color:#bbb; }