* { all: unset; }

.volume-overlay {
  background: rgba(15, 15, 20, 0.92);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 16px;
  backdrop-filter: blur(20px);
  color: #e0e0e0;
  font-family: "JetBrains Mono", monospace;
}

.header {
  margin-bottom: 4px;
  .header-icon { font-size: 18px; color: #33ccff; }
  .header-title { font-size: 14px; font-weight: bold; color: #fff; }
}

.divider {
  background: rgba(255,255,255,0.07);
  min-height: 1px;
  margin: 4px 0;
}

.sink-row {
  padding: 4px 0;
  .app-name { font-size: 12px; color: #aaa; min-width: 120px; }
  .app-vol  { font-size: 12px; color: #33ccff; margin-left: auto; }
  .app-icon { font-size: 14px; color: #666; }
}

.vol-slider {
  min-height: 20px;
  trough { background: rgba(255,255,255,0.1); border-radius: 4px; min-height: 4px; }
  highlight { background: linear-gradient(90deg, #33ccff, #00ff99); border-radius: 4px; }
  slider { background: #fff; border-radius: 50%; min-width: 12px; min-height: 12px; }
}

.mute-btn {
  margin-top: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 8px;
  font-size: 13px;
  color: #aaa;
  &:hover { background: rgba(255,255,255,0.12); }
  &.muted { color: #ff5555; background: rgba(255,85,85,0.1); }
}