/* ═══════════════════════════════════════════════════════
   Music Player Widget — IranFit
   ═══════════════════════════════════════════════════════ */

.music-player-section {
    background: linear-gradient(135deg, var(--card) 0%, var(--card2) 100%);
    border: 1px solid var(--lime);
    position: relative;
    overflow: hidden;
}
.music-player-section::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 120px; height: 120px;
    background: rgba(var(--accent-rgb),0.06);
    border-radius: 50%;
}

.music-player {
    text-align: center;
    padding: 10px 0;
}

.music-now-playing {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding: 0 8px;
}

.music-disc {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--lime) 0%, var(--lime-dim) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(var(--accent-rgb),0.3);
    transition: transform 0.3s;
}

.disc-spin {
    animation: spin 3s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.music-track-info {
    text-align: right;
    flex: 1;
    min-width: 0;
}
.music-track-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.music-track-artist {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

.music-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 12px;
    direction: ltr;
}

.music-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--card2);
    color: var(--text);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.music-btn:hover {
    border-color: var(--lime);
    background: var(--card3);
}

.music-btn-play {
    width: 56px;
    height: 56px;
    font-size: 22px;
    background: var(--lime);
    color: var(--on-accent);
    border: none;
    box-shadow: 0 4px 16px rgba(var(--accent-rgb),0.3);
}
.music-btn-play:hover {
    background: var(--lime-dim);
    transform: scale(1.05);
}

.music-progress-bar {
    height: 4px;
    background: var(--card3);
    border-radius: 2px;
    margin: 0 8px;
    overflow: hidden;
    cursor: pointer;
}
.music-progress-fill {
    height: 100%;
    background: var(--lime);
    border-radius: 2px;
    transition: width 0.3s linear;
}

.music-time {
    display: flex;
    justify-content: space-between;
    padding: 4px 8px 0;
    font-size: 11px;
    color: var(--muted);
}

/* ── Playlist ──────────────────────────────────────── */
.music-playlist {
    margin-top: 12px;
    border-top: 1px solid var(--line);
    padding-top: 8px;
    max-height: 160px;
    overflow-y: auto;
}
.music-playlist-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
    text-align: right;
}
.music-playlist-item:hover {
    background: var(--card2);
}
.playlist-active {
    background: rgba(var(--accent-rgb),0.1);
    color: var(--lime);
}
.playlist-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--card3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.playlist-active .playlist-num {
    background: var(--lime);
    color: var(--on-accent);
}
.playlist-title {
    flex: 1;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.playlist-artist {
    font-size: 11px;
    color: var(--muted);
    flex-shrink: 0;
}

/* ── Upload Preview & Progress ─────────────────────── */
.upload-preview {
    background: var(--card2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin: 10px 0;
    font-size: 13px;
    color: var(--text);
}

.upload-progress {
    height: 6px;
    background: var(--card3);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 10px;
}
.upload-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--lime) 0%, var(--lime-dim) 100%);
    border-radius: 3px;
    transition: width 0.2s;
}

/* ── Track List (admin) ────────────────────────────── */
.track-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.track-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}
.track-row:last-child { border-bottom: none; }
.track-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--card3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    flex-shrink: 0;
}
.track-info {
    flex: 1;
    min-width: 0;
}
.track-info strong {
    display: block;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.track-info small {
    font-size: 11px;
    color: var(--muted);
}
.track-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Toast ─────────────────────────────────────────── */
.toast-error {
    background: #ef4444;
    color: white;
}

/* Dashboard player refinements */
.dsh-music {
    background: linear-gradient(145deg, var(--card) 0%, color-mix(in srgb, var(--card2) 76%, var(--lime) 4%) 100%);
    border-color: color-mix(in srgb, var(--lime) 28%, var(--line));
    box-shadow: 0 14px 34px rgba(0, 0, 0, .12);
}
.dsh-music .music-disc {
    overflow: hidden;
    background: linear-gradient(145deg, #27332a, #101713);
    color: var(--lime);
    font-size: 23px;
    border: 1px solid rgba(var(--accent-rgb), .3);
}
.dsh-music .music-disc img { width: 100%; height: 100%; object-fit: cover; }
.dsh-music .music-disc span { line-height: 1; }
.dsh-music-mini .music-btn-play { width: 40px; height: 40px; font-size: 16px; flex-shrink: 0; }
.dsh-music-expand { transition: transform .2s, border-color .2s, background .2s; }
.dsh-music-expand:hover { border-color: var(--lime); background: var(--card3); }
.dsh-music .music-seek-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 8px;
    direction: ltr;
    margin: 3px 2px 0;
    color: var(--muted);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}
.dsh-music .music-seek {
    width: 100%;
    height: 18px;
    margin: 0;
    appearance: none;
    background: transparent;
    cursor: pointer;
    accent-color: var(--lime);
}
.dsh-music .music-seek::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 99px;
    background: linear-gradient(to right, var(--lime) 0 var(--music-progress), var(--card3) var(--music-progress) 100%);
}
.dsh-music .music-seek::-moz-range-track { height: 4px; border-radius: 99px; background: var(--card3); }
.dsh-music .music-seek::-moz-range-progress { height: 4px; border-radius: 99px; background: var(--lime); }
.dsh-music .music-seek::-webkit-slider-thumb {
    appearance: none;
    width: 12px; height: 12px;
    margin-top: -4px;
    border: 2px solid var(--card);
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 1px 5px rgba(0,0,0,.35);
}
.dsh-music .music-seek::-moz-range-thumb {
    width: 9px; height: 9px;
    border: 2px solid var(--card);
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 1px 5px rgba(0,0,0,.35);
}
.dsh-music .music-seek:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 8px; }
.dsh-music .music-playlist { border-top-color: color-mix(in srgb, var(--line) 75%, transparent); }
.dsh-music .music-playlist-item { min-height: 42px; }
.dsh-music .playlist-active { box-shadow: inset -2px 0 var(--lime); }
@media (prefers-reduced-motion: reduce) {
    .dsh-music .music-disc, .dsh-music-expand { animation: none; transition: none; }
}

/* Dashboard music player: compact by default, full controls on demand. */
.mobile-shell .dsh-music {
    position: relative;
    padding: 15px 16px 13px;
    border: 1px solid color-mix(in srgb, var(--lime) 22%, var(--line));
    border-radius: 20px;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(var(--accent-rgb), .11), transparent 48%),
        linear-gradient(145deg, var(--card), color-mix(in srgb, var(--card2) 72%, var(--card) 28%));
    box-shadow: 0 16px 36px rgba(0, 0, 0, .14), inset 0 1px rgba(255,255,255,.035);
}
.dsh-music-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 11px;
}
.dsh-music-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text2);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
}
.dsh-music-status {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--muted);
}
.dsh-music-status.is-playing {
    background: var(--lime);
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .12), 0 0 12px rgba(var(--accent-rgb), .7);
}
.dsh-music-feedback {
    max-width: 52%;
    overflow: hidden;
    color: var(--muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dsh-music .dsh-music-mini { gap: 12px; }
.mobile-shell .dsh-music .music-disc {
    position: relative;
    width: 52px;
    height: 52px;
    overflow: hidden;
    border: 1px solid rgba(var(--accent-rgb), .35);
    background: radial-gradient(circle at center, #253029 0 15%, #101713 16% 100%);
    color: var(--lime);
    font-size: 22px;
    box-shadow: 0 7px 18px rgba(0,0,0,.25), 0 0 0 4px rgba(var(--accent-rgb), .045);
}
.mobile-shell .dsh-music .music-disc::after {
    position: absolute;
    width: 8px;
    height: 8px;
    border: 2px solid #1a211c;
    border-radius: 50%;
    background: var(--lime);
    content: "";
}
.mobile-shell .dsh-music .music-disc img { position: relative; z-index: 1; }
.mobile-shell .dsh-music .music-disc img + span { display: none; }
.dsh-music-meta strong { color: var(--text); font-size: 14px; }
.dsh-music-meta small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.dsh-music-meta small span { padding: 0 3px; color: var(--lime); }
.mobile-shell .dsh-music .music-btn-play {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(var(--accent-rgb), .42);
    border-radius: 15px;
    background: var(--lime);
    box-shadow: 0 6px 16px rgba(var(--accent-rgb), .2);
    font-size: 16px;
}
.mobile-shell .dsh-music .music-btn-play:hover { transform: translateY(-1px); }
.dsh-music .dsh-music-expand {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    color: var(--muted);
}
.dsh-music-expand span { display: block; font-size: 21px; line-height: 1; transition: transform .2s ease; }
.dsh-music-expand span.is-expanded { transform: rotate(180deg); }
.dsh-music .music-seek-row {
    grid-template-columns: 36px minmax(0,1fr) 36px;
    gap: 10px;
    margin: 10px 1px 0;
    color: var(--muted);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}
.dsh-music .music-seek { height: 20px; }
.dsh-music .music-seek::-webkit-slider-runnable-track { height: 4px; }
.dsh-music .music-seek::-webkit-slider-thumb { width: 13px; height: 13px; margin-top: -4.5px; }
.dsh-music-tools {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) 38px;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
}
.dsh-music .music-controls { gap: 20px; margin: 0; }
.dsh-music .music-controls .music-btn:not(.music-btn-play) {
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    color: var(--text2);
    font-size: 17px;
}
.dsh-music .music-controls .music-btn:not(.music-btn-play):hover { color: var(--lime); background: var(--card3); }
.dsh-music .dsh-music-mode {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    font-size: 18px;
    transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.dsh-music .dsh-music-mode:hover,
.dsh-music .dsh-music-mode.is-active {
    border-color: rgba(var(--accent-rgb), .2);
    background: rgba(var(--accent-rgb), .09);
    color: var(--lime);
}
.dsh-music-volume {
    display: grid;
    grid-template-columns: 22px minmax(0,1fr) auto;
    align-items: center;
    gap: 9px;
    margin-top: 12px;
    color: var(--muted);
    font-size: 12px;
}
.dsh-music-volume input {
    width: 100%;
    height: 18px;
    margin: 0;
    appearance: none;
    background: transparent;
    cursor: pointer;
    accent-color: var(--lime);
}
.dsh-music-volume input::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 99px;
    background: linear-gradient(to right, var(--lime) 0 var(--volume-progress), var(--card3) var(--volume-progress) 100%);
}
.dsh-music-volume input::-moz-range-track { height: 4px; border-radius: 99px; background: var(--card3); }
.dsh-music-volume input::-moz-range-progress { height: 4px; border-radius: 99px; background: var(--lime); }
.dsh-music-volume input::-webkit-slider-thumb {
    width: 12px; height: 12px; margin-top: -4px;
    appearance: none; border: 2px solid var(--card); border-radius: 50%;
    background: var(--lime); box-shadow: 0 1px 5px rgba(0,0,0,.35);
}
.dsh-music-volume input::-moz-range-thumb {
    width: 9px; height: 9px; border: 2px solid var(--card); border-radius: 50%;
    background: var(--lime); box-shadow: 0 1px 5px rgba(0,0,0,.35);
}
.dsh-music-volume small { color: var(--muted); font-size: 9px; white-space: nowrap; }
.dsh-music .music-playlist {
    max-height: 190px;
    margin-top: 12px;
    padding: 7px 0 0;
    border-top: 1px solid var(--line);
}
.dsh-music .music-playlist-item {
    min-height: 46px;
    gap: 9px;
    padding: 7px 8px;
    border: 1px solid transparent;
    text-align: right;
}
.dsh-music .music-playlist-item:hover { background: color-mix(in srgb, var(--card2) 78%, transparent); }
.dsh-music .music-playlist-item.playlist-active {
    border-color: rgba(var(--accent-rgb), .13);
    background: rgba(var(--accent-rgb), .07);
    color: var(--text);
}
.dsh-music .playlist-num { width: 26px; height: 26px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dsh-music .playlist-active .playlist-num { color: var(--on-accent); }
.dsh-music .playlist-title { font-size: 12px; }
.dsh-music .playlist-artist { max-width: 28%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsh-music .playlist-duration { min-width: 34px; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; direction: ltr; text-align: left; }
.dsh-music button:focus-visible,
.dsh-music input:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
@media (max-width: 420px) {
    .mobile-shell .dsh-music { padding: 13px 12px 11px; }
    .dsh-music-volume { grid-template-columns: 20px minmax(0,1fr); }
    .dsh-music-volume small { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
    .dsh-music *, .dsh-music *::before, .dsh-music *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Audio-reactive equalizer and ambient light stage. */
.music-visualizer-panel {
    position: relative;
    height: 126px;
    margin: 13px 0 2px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(var(--accent-rgb), .2);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(8, 15, 16, .94), rgba(12, 19, 17, .98)),
        var(--card2);
    box-shadow: inset 0 1px rgba(255,255,255,.04), 0 7px 22px rgba(0,0,0,.14);
}
.music-visualizer-panel::before,
.music-visualizer-panel::after {
    position: absolute;
    z-index: 1;
    width: 55%;
    height: 90%;
    border-radius: 50%;
    content: "";
    filter: blur(26px);
    opacity: .08;
    pointer-events: none;
}
.music-visualizer-panel::before {
    top: -48%;
    left: -8%;
    background: radial-gradient(ellipse, #c6f34a 0%, rgba(198,243,74,0) 72%);
}
.music-visualizer-panel::after {
    right: -6%;
    bottom: -56%;
    background: radial-gradient(ellipse, #39d9c1 0%, rgba(57,217,193,0) 72%);
}
.music-visualizer-panel.is-playing::before {
    opacity: var(--visualizer-glow, .65);
    animation: music-light-dance 2.8s ease-in-out infinite alternate;
}
.music-visualizer-panel.is-playing::after {
    opacity: var(--visualizer-glow-soft, .52);
    animation: music-light-dance 3.6s ease-in-out -1.1s infinite alternate-reverse;
}
.music-visualizer-panel canvas {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}
.music-visualizer-caption {
    position: absolute;
    z-index: 3;
    inset: 10px 12px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: rgba(238, 246, 229, .82);
    font-size: 10px;
    font-weight: 700;
    pointer-events: none;
}
.music-visualizer-caption > span { display: inline-flex; align-items: center; gap: 7px; }
.music-visualizer-caption small { color: rgba(213, 226, 211, .48); font-size: 9px; font-weight: 500; }
.music-visualizer-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #b8e95c;
    box-shadow: 0 0 9px rgba(184,233,92,.52);
}
.music-visualizer-panel.is-playing .music-visualizer-dot { animation: visualizer-dot-pulse 1s ease-in-out infinite alternate; }
@keyframes music-light-dance {
    from { transform: translate3d(-5%, 5%, 0) scale(.82); }
    to { transform: translate3d(18%, -8%, 0) scale(1.18); }
}
@keyframes visualizer-dot-pulse {
    from { opacity: .55; box-shadow: 0 0 4px rgba(184,233,92,.36); }
    to { opacity: 1; box-shadow: 0 0 12px rgba(184,233,92,.95); }
}
@media (max-width: 420px) {
    .music-visualizer-panel { height: 112px; }
}
@media (prefers-reduced-motion: reduce) {
    .music-visualizer-panel.is-playing::before,
    .music-visualizer-panel.is-playing::after,
    .music-visualizer-panel.is-playing .music-visualizer-dot { animation: none; }
}

.music-visualizer-controls {
    display: grid;
    grid-template-columns: minmax(112px, 1.1fr) minmax(82px, .9fr) minmax(82px, .9fr);
    align-items: end;
    gap: 9px;
    margin: 9px 0 2px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--card2) 82%, transparent);
}
.music-visualizer-controls label {
    display: grid;
    min-width: 0;
    gap: 7px;
    margin: 0;
    color: var(--muted);
    font-size: 10px;
}
.music-visualizer-controls label > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    white-space: nowrap;
}
.music-visualizer-controls b { color: var(--text2); font-size: 9px; font-variant-numeric: tabular-nums; }
.music-visualizer-controls select {
    width: 100%;
    min-width: 0;
    height: 31px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--card);
    color: var(--text);
    font: inherit;
    font-size: 10px;
}
.music-visualizer-controls input[type="range"] {
    width: 100%;
    height: 20px;
    margin: 0;
    accent-color: var(--lime);
    cursor: pointer;
}
@media (max-width: 420px) {
    .music-visualizer-controls { grid-template-columns: 1fr 1fr; gap: 9px 12px; }
    .music-visualizer-controls .visualizer-style-control { grid-column: 1 / -1; }
}

.music-eq-panel {
    margin: 12px 0 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: color-mix(in srgb, var(--card2) 82%, transparent);
}
.music-eq-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.music-eq-heading > div { display: grid; gap: 3px; }
.music-eq-heading strong { color: var(--text); font-size: 11px; }
.music-eq-heading small { color: var(--muted); font-size: 9px; }
.music-eq-heading select {
    min-width: 94px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--card);
    color: var(--text);
    font: inherit;
    font-size: 10px;
}
.music-eq-bands {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
}
.music-eq-band {
    display: grid;
    min-width: 0;
    gap: 7px;
    margin: 0;
    color: var(--muted);
    font-size: 10px;
}
.music-eq-band > span { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.music-eq-band small { color: var(--lime); font-size: 9px; font-variant-numeric: tabular-nums; direction: ltr; }
.music-eq-band input[type="range"] { width: 100%; height: 18px; margin: 0; accent-color: var(--lime); cursor: pointer; }
.music-eq-panel :focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
@media (max-width: 360px) {
    .music-eq-panel { padding: 10px 8px; }
    .music-eq-bands { gap: 7px; }
}
.music-persistent-audio { display: none !important; }
.music-floating-player[hidden] { display: none !important; }
.music-floating-player {
    position: fixed;
    z-index: 1200;
    top: max(8px, env(safe-area-inset-top));
    left: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 11px;
    max-width: 620px;
    margin-inline: auto;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    color: var(--text);
    background: color-mix(in srgb, var(--card) 94%, transparent);
    box-shadow: 0 12px 34px rgba(0,0,0,.28);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.music-floating-indicator { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; color: var(--lime); background: var(--card3); font-size: 20px; }
.music-floating-meta { min-width: 0; flex: 1; display: grid; gap: 3px; }
.music-floating-meta strong, .music-floating-meta small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-floating-meta strong { font-size: 12px; }
.music-floating-meta small { color: var(--muted); font-size: 10px; }
.music-floating-toggle { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--on-accent); background: var(--lime); font-size: 16px; cursor: pointer; }
body.has-floating-music .page { padding-top: 68px; }