/* Shared color tokens follow both themes; language never changes the type stack. */
.status-bar { min-height: 58px; padding-bottom: max(.35rem, env(safe-area-inset-bottom)); justify-content: space-between; gap: .5rem; }
.status-readouts { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; min-width: 0; }
.music-control { display: flex; align-items: center; flex-shrink: 0; position: relative; gap: .15rem; }
.music-control button { color: var(--fg-dim); background: transparent; border: 1px solid transparent; cursor: pointer; border-radius: var(--r-pill); font-family: var(--ndot); }
.music-control button:hover { color: var(--red); border-color: var(--line); }
.music-control button:focus-visible, .music-panel input:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.music-toggle { display: flex; align-items: center; min-height: 44px; padding: 0 .4rem 0 0; gap: .2rem; }
#musicDots { display: block; width: 44px; height: 44px; }
.music-caption { font-family: var(--ndot); font-size: .76rem; white-space: nowrap; min-width: 3.5em; text-align: left; }
.music-control[data-state="playing"] .music-caption { color: var(--red); }
.music-details { min-width: 36px; min-height: 44px; font-size: 1.1rem; letter-spacing: .1em; }
.music-panel { position: absolute; bottom: calc(100% + .75rem); left: 0; width: min(300px, calc(100vw - 2rem)); padding: 1rem; border: 1px solid var(--line); border-radius: 18px; background: var(--bg); color: var(--fg); box-shadow: 0 8px 32px #0002; font-family: var(--mono); letter-spacing: .03em; font-size: .8rem; transition: background-color 1.4s ease, color 1.4s ease, border-color 1.4s ease; }
.music-panel[hidden] { display: none; }
.music-panel-head { display: flex; justify-content: space-between; align-items: center; }
.music-panel-head .doto { font-size: 1rem; }
#musicClose { width: 44px; height: 44px; font-size: 1.3rem; }
.music-state { color: var(--red); margin: .2rem 0 .8rem; min-height: 1.7em; }
.music-panel label { display: flex; justify-content: space-between; align-items: center; color: var(--fg-dim); }
.music-panel input { display: block; width: 100%; height: 32px; margin: 0; accent-color: var(--red); cursor: pointer; }
.music-panel input:disabled { opacity: .4; cursor: default; }
.music-time { display: flex; justify-content: space-between; color: var(--fg-dim); margin-bottom: .7rem; font-variant-numeric: tabular-nums; }
.music-note { color: var(--fg-dim); font-size: .65rem; line-height: 1.7; margin-top: .7rem; }
footer { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
@media(max-width: 600px) {
    .status-bar { padding-inline: .5rem; }
    .status-readouts { gap: .3rem; font-size: .55rem; letter-spacing: .01em; }
    .status-readouts .sb-sys, .status-readouts .sb-sep:first-of-type { display: none; }
    .music-caption { font-size: .7rem; min-width: 3em; }
    .music-toggle { padding-right: .15rem; }
    .music-details { min-width: 32px; }
}
@media(prefers-reduced-motion: reduce) { .music-panel { transition: none; } }