.header-tools { position: relative; }
#sound-button.sound-active { background: #e9eddf; border-color: #cdd8bc; color: #63804e; }
.sound-panel {
  position: absolute;
  top: calc(100% + 17px);
  right: 0;
  z-index: 20;
  width: 310px;
  max-width: calc(100vw - 32px);
  padding: 22px;
  border: 1px solid #dce1cf;
  border-radius: 18px;
  background: #fffdf4;
  box-shadow: 0 18px 60px #3d4d3426, 0 3px 10px #3d4d3408;
}
.sound-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sound-heading h2 { margin: 0; font: 500 23px var(--serif); letter-spacing: -.7px; }
.sound-heading button { width: 28px; height: 28px; font-size: 23px; color: #8a947b; }
.sound-panel > p { font-size: 11px; color: #8b937e; line-height: 1.8; margin: 9px 0 20px; }
.sound-channel { padding: 16px 0; border-top: 1px solid #ececdf; }
.sound-toggle { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 13px; font-weight: 600; position: relative; }
.sound-toggle > span:first-child { margin-right: auto; }
.sound-toggle input { position: absolute; right: 0; width: 36px; height: 24px; opacity: 0; cursor: pointer; }
.sound-switch { width: 36px; height: 22px; border-radius: 20px; background: #d7dcca; position: relative; pointer-events: none; transition: background .15s; }
.sound-switch:after { content: ''; position: absolute; width: 16px; height: 16px; top: 3px; left: 3px; border-radius: 50%; background: #fffdf4; box-shadow: 0 1px 2px #5c6b4429; transition: transform .15s; }
.sound-toggle input:checked + .sound-switch { background: #809761; }
.sound-toggle input:checked + .sound-switch:after { transform: translateX(14px); }
.sound-toggle input:focus-visible + .sound-switch { outline: 2px solid var(--orange); outline-offset: 4px; }
.sound-toggle input:disabled + .sound-switch { opacity: .4; }
.sound-volume { display: flex; align-items: center; gap: 15px; margin-top: 16px; }
.sound-volume input { accent-color: #899e70; flex: 1; min-width: 0; height: 20px; margin: 0; cursor: pointer; }
.sound-volume input:disabled { opacity: .4; }
.sound-volume output { font: 10px var(--mono); color: #8b947c; width: 35px; text-align: right; }
.sound-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #ececdf; padding-top: 16px; }
.sound-actions .text-button { font-size: 11px; margin: 0; padding: 3px 0; }
.sound-panel .sound-status { font-size: 10px; color: #8a8b70; background: #f2f1e5; border-radius: 8px; padding: 8px 10px; margin: 16px 0 0; }
@media (prefers-reduced-motion: reduce) { .sound-switch, .sound-switch:after { transition: none; } }
@media (max-width: 520px) {
  .sound-panel { padding: 20px; top: calc(100% + 14px); }
  .sound-heading h2 { font-size: 21px; }
}