:root { --swmp3-accent: #0ea5e9; }
/* full bar (only when Minimal Mode is OFF) */
.swmp3-bar {
  position: fixed; left: 0; right: 0;
  display: flex; gap: 12px; align-items: center;
  background: #0b1220; color: #fff;
  padding: 10px 14px; z-index: 99999;
  box-shadow: 0 -6px 18px rgba(0,0,0,.25);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.swmp3-top { top: 0; } .swmp3-bottom { bottom: 0; }
.swmp3-btn { width: 34px; height: 34px; border-radius: 999px; border: 0; background: var(--swmp3-accent); color: #0b1220; cursor: pointer; position: relative; }
.swmp3-btn:after { content: ''; position: absolute; inset: 0; background: #0b1220; mask-repeat: no-repeat; mask-position: center; mask-size: 16px 16px; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:16px 16px; }
.is-playing .swmp3-play:after { -webkit-mask-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>'); mask-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>'); }
.swmp3-play:after { -webkit-mask-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"/></svg>'); mask-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"/></svg>'); }
.swmp3-track { flex:1; min-width:0; }
.swmp3-title { font-size:12px; opacity:.8; margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.swmp3-progress { width:100%; height:6px; background:rgba(255,255,255,.18); border-radius:999px; cursor:pointer;}
.swmp3-fill { height:100%; width:0%; background:var(--swmp3-accent); border-radius:999px;}
.swmp3-right { display:flex; gap:10px; align-items:center;}
.swmp3-volume { width:120px; accent-color: var(--swmp3-accent); }
.is-muted .swmp3-mute:after { -webkit-mask-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16.5 12l3.5 3.5-1.5 1.5L15 13.5l-3.5 3.5-1.5-1.5L13.5 12 10 8.5l1.5-1.5L15 10.5l3.5-3.5 1.5 1.5L16.5 12z"/><path d="M5 9v6h4l5 5V4L9 9H5z"/></svg>'); mask-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16.5 12l3.5 3.5-1.5 1.5L15 13.5l-3.5 3.5-1.5-1.5L13.5 12 10 8.5l1.5-1.5L15 10.5l3.5-3.5 1.5 1.5L16.5 12z"/><path d="M5 9v6h4l5 5V4L9 9H5z"/></svg>');}
.swmp3-mute:after { -webkit-mask-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 9v6h4l5 5V4L9 9H5z"/></svg>'); mask-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 9v6h4l5 5V4L9 9H5z"/></svg>');}
@media (max-width:580px){ .swmp3-volume{ width:80px;} }

/* Minimal button (mute only, top-right) */
.swmp3-min {
  position: fixed; top: 12px; right: 12px;
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--swmp3-accent); color: #0b1220; border: 0; cursor: pointer; z-index: 100000;
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
}
.swmp3-min:after {
  content: ''; position: absolute; inset: 0;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 9v6h4l5 5V4L9 9H5z"/></svg>') center/18px 18px no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 9v6h4l5 5V4L9 9H5z"/></svg>') center/18px 18px no-repeat;
  background: #0b1220;
}
.swmp3-min.is-muted:after {
  -webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16.5 12l3.5 3.5-1.5 1.5L15 13.5l-3.5 3.5-1.5-1.5L13.5 12 10 8.5l1.5-1.5L15 10.5l3.5-3.5 1.5 1.5L16.5 12z"/><path d="M5 9v6h4l5 5V4L9 9H5z"/></svg>') center/18px 18px no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16.5 12l3.5 3.5-1.5 1.5L15 13.5l-3.5 3.5-1.5-1.5L13.5 12 10 8.5l1.5-1.5L15 10.5l3.5-3.5 1.5 1.5L16.5 12z"/><path d="M5 9v6h4l5 5V4L9 9H5z"/></svg>') center/18px 18px no-repeat;
}