.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.music-controls { display: flex; align-items: center; gap: 2px; position: relative; }
.music-toggle { position: relative; font-size: 23px; color: #b49763; }
.music-toggle[aria-pressed="true"] { background: #f5e7b8; border-color: #ddc780; color: #8a682e; }
.music-toggle i { position: absolute; right: 0; bottom: 1px; width: 7px; height: 7px; border-radius: 50%; background: #819964; border: 1px solid var(--paper); opacity: 0; }
.music-toggle[aria-pressed="true"] i { opacity: 1; }
.music-settings summary { cursor: pointer; list-style: none; width: 22px; height: 35px; display: grid; place-items: center; color: #ab9470; border-radius: 7px; }
.music-settings summary::-webkit-details-marker { display: none; }
.music-settings summary:hover { background: #f1e9d4; }
.music-settings summary:focus-visible, #music-volume:focus-visible { outline: 3px solid #5f9067; outline-offset: 3px; }
.music-panel { position: absolute; z-index: 40; right: 0; top: 46px; width: 240px; background: #fffdf5; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 10px 30px #64502520; padding: 19px; }
.music-panel strong { font-size: 14px; }
.music-panel strong span { margin-left: 7px; font-size: 9px; font-weight: 400; color: #9aab76; background: #f0f3e2; padding: 3px 6px; border-radius: 5px; }
.music-panel p { margin: 6px 0 20px; font-size: 10px; color: var(--muted); }
.music-panel label { display: flex; align-items: center; justify-content: space-between; font-size: 11px; }
.music-panel output { color: #a38c55; font-variant-numeric: tabular-nums; }
#music-volume { width: 100%; margin: 10px 0; accent-color: #cba347; cursor: pointer; }
.music-panel small { display: block; font-size: 10px; color: var(--muted); line-height: 1.6; }
@media (max-width: 920px) { .header-actions { gap: 6px; } .topbar { gap: 10px; } }
@media (max-width: 760px) {
  .topbar .brand { flex: 1 1 0; min-width: 0; gap: 7px; }
  .topbar .brand > span { font-size: 20px; letter-spacing: 1px; white-space: nowrap; }
  .topbar .brand small { font-size: 6px; letter-spacing: .7px; }
  .topbar .brand img { width: 38px; height: 42px; }
  .music-panel { right: -40px; }
}
@media (max-width: 340px) { .topbar .brand > span { font-size: 18px; } .topbar .brand img { width: 32px; height: 36px; } }