/* ALIZDEV SOUND — music page, built on the studio design system (studio.css). Red accent from the logo. */

:root { --mu-red: #fa0000; --mu-red-dark: #c40000; --mu-red-soft: #ffeaea; }

.mu-btn-red { background: linear-gradient(135deg, #ff3b3b, var(--mu-red)); color: #fff !important; box-shadow: 0 14px 26px -12px rgba(250, 0, 0, .8); }
.mu-btn-red:hover { background: linear-gradient(135deg, #ff4a4a, #d40000); transform: translateY(-1px); }
.st-orb.mu-red { background: radial-gradient(circle at 32% 28%, #ffd0d0 0%, #ff4a4a 45%, #b00000 100%); }

/* ---------- Hero ---------- */
.mu-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 5vw, 64px); align-items: center; position: relative; z-index: 2; min-height: 440px; }
.mu-brand { width: 190px; margin: 4px 0 18px; padding: 12px 18px 9px; border-radius: 20px; }
.mu-brand-sub { font-size: 11px; letter-spacing: 1.1em; padding-inline-start: 1.1em; margin-top: 5px; }
.mu-title { font-family: var(--st-font-display); font-weight: 800; font-size: clamp(1.7rem, 3.6vw, 2.8rem); line-height: 1.2; letter-spacing: .01em; }
html[lang="fa"] .mu-title { line-height: 1.45; }
.mu-lead { margin-top: 14px; color: var(--st-muted); max-width: 34rem; }
.mu-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }

.mu-hero-art { position: relative; display: flex; justify-content: center; }
.mu-record {
    position: relative; width: min(100%, 330px); aspect-ratio: 1; border-radius: 50%; padding: 14px;
    background: conic-gradient(from 20deg, #ffffff, #cfd6dd, #ffffff, #b9c1c9, #ffffff);
    box-shadow: 0 50px 60px -36px rgba(30, 44, 58, .6), inset 0 0 0 2px rgba(255, 255, 255, .8);
}
.mu-record::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 1px dashed rgba(250, 0, 0, .45); }
.mu-record img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; animation: mu-spin 26s linear infinite; animation-play-state: paused; }
body.mu-playing .mu-record img { animation-play-state: running; }
@keyframes mu-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mu-record img { animation: none; } }

.mu-now {
    position: absolute; inset-inline-start: 0; bottom: 6%; display: flex; align-items: center; gap: 12px;
    padding: 10px 18px 10px 14px; padding-inline: 14px 18px; border-radius: 999px;
    background: #fff; box-shadow: 0 22px 36px -22px rgba(38, 60, 85, .6);
}
.mu-now small { display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--st-muted); line-height: 1.3; }
.mu-now strong { font-size: .9rem; }
.mu-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--mu-red); box-shadow: 0 0 0 0 rgba(250, 0, 0, .6); animation: mu-pulse 1.8s infinite; }
@keyframes mu-pulse { 70% { box-shadow: 0 0 0 12px rgba(250, 0, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(250, 0, 0, 0); } }

/* ---------- Tracks ---------- */
.mu-tracks { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.mu-track { padding: 14px; gap: 14px; flex-direction: column; }
.mu-track.is-playing { border-color: rgba(250, 0, 0, .45); box-shadow: 0 26px 40px -30px rgba(250, 0, 0, .55); }

.mu-cover-wrap { position: relative; aspect-ratio: 1; border-radius: 20px; overflow: hidden; background: #dfe6ed; }
.mu-cover { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.mu-track:hover .mu-cover { transform: scale(1.04); }
.mu-cover-play {
    position: absolute; inset-inline-end: 14px; bottom: 18px; width: 52px; height: 52px; border-radius: 50%; border: 0;
    background: linear-gradient(135deg, #ff3b3b, var(--mu-red)); color: #fff; font-size: 1rem; cursor: pointer;
    box-shadow: 0 14px 24px -10px rgba(250, 0, 0, .85); transition: transform .15s;
}
.mu-cover-play:hover { transform: scale(1.08); }
.mu-progress { position: absolute; inset-inline: 0; bottom: 0; height: 5px; background: rgba(255, 255, 255, .45); }
.mu-progress span { display: block; height: 100%; width: 0; background: var(--mu-red); }

.mu-track-main { display: flex; flex-direction: column; gap: 12px; padding: 0 6px 6px; flex: 1; }
.mu-track-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.mu-track-number { color: var(--mu-red); }
.mu-track-title { font-family: var(--st-font-display); font-weight: 700; font-size: 1.1rem; margin: 0; }
.mu-track-subtitle { color: var(--st-muted); font-size: .9rem; min-height: 1.2em; }
.mu-track-tag { flex: none; padding: 4px 12px; border-radius: 999px; background: var(--mu-red-soft); color: var(--mu-red-dark); font-size: .75rem; font-weight: 600; }
.mu-track-meta { margin-top: auto; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--st-line); padding-top: 12px; }
.mu-track-credit { font-size: .8rem; color: var(--st-muted); }
.mu-track-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.mu-about-title { font-family: var(--st-font-display); font-weight: 800; font-size: 1.8rem; margin: 4px 0 12px; letter-spacing: .04em; }

/* ---------- Player bar ---------- */
body.player-active .st-footer { padding-bottom: 120px; }
.mu-player {
    position: fixed; inset-inline: 0; bottom: 14px; margin-inline: auto; z-index: 70;
    width: min(1040px, calc(100% - 24px));
    display: grid; grid-template-columns: minmax(170px, 1fr) auto minmax(180px, 1.4fr) auto auto; align-items: center; gap: 18px;
    padding: 12px 18px; border-radius: 28px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px);
    border: 1px solid #fff; box-shadow: 0 30px 60px -26px rgba(20, 28, 40, .6);
    transform: translateY(160%); opacity: 0; transition: transform .35s ease, opacity .35s ease; pointer-events: none;
}
.mu-player.show { transform: none; opacity: 1; pointer-events: auto; }
.mu-player-track { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mu-player-track img { width: 48px; height: 48px; border-radius: 14px; object-fit: cover; flex: none; }
.mu-player-text { display: grid; min-width: 0; }
.mu-player-text strong { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-player-text span { font-size: .8rem; color: var(--st-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-player-controls { display: flex; align-items: center; gap: 8px; direction: ltr; }
.mu-player button { border: 0; background: transparent; color: var(--st-ink); display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; }
.mu-player button:hover { background: var(--mu-red-soft); color: var(--mu-red); }
.mu-player .mu-playpause { width: 46px; height: 46px; background: linear-gradient(135deg, #ff3b3b, var(--mu-red)); color: #fff; box-shadow: 0 12px 22px -10px rgba(250, 0, 0, .85); }
.mu-player .mu-playpause:hover { background: linear-gradient(135deg, #ff4a4a, #d40000); color: #fff; }
.mu-player-seek, .mu-player-volume { display: flex; align-items: center; gap: 10px; font-size: .78rem; color: var(--st-muted); }
.mu-player-seek time { min-width: 36px; text-align: center; }
.mu-range { flex: 1; min-width: 0; accent-color: var(--mu-red); height: 4px; }
.mu-player-volume .mu-range { width: 90px; flex: none; }

.mu-toast {
    position: fixed; inset-inline: 0; margin-inline: auto; bottom: 110px; width: max-content; max-width: calc(100% - 32px); z-index: 90;
    padding: 10px 20px; border-radius: 999px; background: #1d2226; color: #fff; font-size: .9rem; opacity: 0; transform: translateY(10px);
    transition: opacity .25s, transform .25s; pointer-events: none;
}
.mu-toast.show { opacity: 1; transform: none; }

@media (max-width: 991px) {
    .mu-hero-grid { grid-template-columns: 1fr; min-height: 0; }
    .mu-hero-art { order: -1; }
    .mu-record { width: min(70%, 280px); }
    .mu-now { inset-inline-start: 6%; }
    .mu-player { grid-template-columns: 1fr auto; gap: 10px 14px; }
    .mu-player-seek { grid-column: 1 / -1; order: 5; }
    .mu-player-volume { display: none; }
    .mu-player .mu-player-close { position: absolute; top: -14px; inset-inline-end: 14px; width: 30px; height: 30px; background: #fff; box-shadow: 0 8px 16px -8px rgba(20, 28, 40, .5); }
    .mu-player-controls { grid-row: 1; }
}
@media (max-width: 575px) {
    .mu-tracks { grid-template-columns: 1fr; }
    .mu-brand { width: 160px; }
}