.nav-preferences { display: flex; align-items: center; gap: .25rem; padding: .25rem .75rem; margin-left: auto; flex-shrink: 0; }
.preference-menu { position: relative; }
.preference-menu summary { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; border-radius: 6px; list-style: none; color: var(--text-primary, #363636); }
.preference-menu summary::-webkit-details-marker { display: none; }
.preference-menu summary:focus-visible, .preference-options button:focus-visible { outline: 2px solid var(--link-color, #3273dc); outline-offset: 2px; }
.preference-menu summary:hover, .preference-options button:hover { background: var(--surface-bg, #f5f5f5); }
.preference-menu .preference-options { position: absolute; right: 0; top: 100%; z-index: 31000; width: max-content; min-width: 155px; margin: 0; padding: .25rem; border: 1px solid var(--border-color, #dbdbdb); border-radius: 6px; background: var(--panel-bg, #fff); box-shadow: 0 4px 12px #0002; }
.preference-options button { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 44px; padding: .5rem .75rem; border: 0; background: transparent; color: var(--text-primary, #363636); font: inherit; white-space: nowrap; cursor: pointer; text-align: left; }
.preference-options [aria-current="true"] { font-weight: 700; }
.preference-menu img { flex: 0 0 26px; object-fit: contain; }
.nav-preferences .account-link { width: 44px; height: 44px; padding: 0; border-color: transparent; background: transparent !important; color: var(--text-primary, #363636) !important; }
.account-link .account-icon { display: inline-block; }
.nav-music { position: relative; }
#nav-music-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--text-primary, #363636); cursor: pointer;
}
#nav-music-toggle:hover, #nav-music-toggle[data-playing="true"] { background: var(--surface-bg, #f5f5f5); }
#nav-music-toggle[data-playing="true"] { color: var(--link-color, #3273dc); }
#nav-music-toggle:focus-visible { outline: 2px solid var(--link-color, #3273dc); outline-offset: 2px; }
#nav-music-toggle:disabled { opacity: .4; cursor: default; }
#nav-music-panel { width: 19rem; min-width: 0; max-width: calc(100vw - 1rem); padding: .75rem; }
.nav-music-controls { display: flex; gap: .5rem; margin-bottom: .75rem; }
#nav-music-panel button { justify-content: center; padding: .5rem; }
#nav-music-panel button:disabled { opacity: .4; cursor: default; }
#nav-music-panel label { display: block; margin-bottom: .25rem; }
#nav-music-select { width: 100%; min-height: 44px; font: inherit; border: 1px solid var(--border-color, #dbdbdb); border-radius: 4px; background: var(--input-bg, #fff); color: var(--text-primary, #363636); }
#nav-music-select:focus-visible { outline: 2px solid var(--link-color, #3273dc); outline-offset: 2px; }
.nav-music-volume { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 .5rem; margin-top: .75rem; }
.nav-music-volume label { grid-column: 1 / -1; font-size: .8rem; }
#nav-music-volume { width: 100%; min-width: 0; min-height: 44px; accent-color: var(--link-color, #3273dc); cursor: pointer; }
#nav-music-volume:focus-visible { outline: 2px solid var(--link-color, #3273dc); outline-offset: 2px; }
#nav-music-volume-value { min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; }
#nav-music-error:not([hidden]) { display: block; padding-top: .75rem; color: var(--text-primary, #363636); }
@media screen and (max-width: 1023px) {
  nav.navbar { display: flex; flex-wrap: wrap; align-items: center; }
  nav.navbar > .navbar-brand { flex: 0 0 auto; min-width: 0; flex-wrap: nowrap; align-items: center; }
  nav.navbar .navbar-burger { margin-left: 0; width: 44px; height: 44px; }
  nav.navbar > .navbar-menu { order: 3; flex: 0 0 100%; }
}