/* Music FM — Premium Album Page
   Drop-in replacement for: assets/css/album-page-pro.css
*/

*{box-sizing:border-box}

:root{
    --mf-blue:#147cff;
    --mf-blue-deep:#005bea;
    --mf-ink:#07111f;
    --mf-muted:#64748b;
    --mf-soft:#f6f9ff;
    --mf-line:rgba(226,232,240,.82);
    --mf-glass:rgba(255,255,255,.74);
    --mf-glass-strong:rgba(255,255,255,.88);
    --mf-shadow:0 30px 100px rgba(15,23,42,.13);
    --mf-shadow-soft:0 18px 55px rgba(15,23,42,.10);
    --mf-radius:34px;
}

html{scroll-behavior:smooth}

button,a,input{font-family:inherit}

/* Integrated mode: do not override the global Music FM body/header/footer. */
.mf-album-page{
    position:relative;
    isolation:isolate;
}
.mf-album-page:before{
    content:"";
    position:absolute;
    inset:-20px -26px auto -26px;
    height:420px;
    z-index:-2;
    border-radius:0 0 44px 44px;
    pointer-events:none;
    background:
        radial-gradient(circle at 82% 2%,rgba(20,124,255,.18),transparent 34%),
        radial-gradient(circle at 10% 20%,rgba(124,92,255,.12),transparent 28%),
        linear-gradient(180deg,rgba(247,250,255,.88),rgba(237,243,251,.36));
}
.mf-album-page:after{
    content:"";
    position:absolute;
    inset:-20px -26px auto -26px;
    height:520px;
    z-index:-1;
    opacity:.28;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(15,23,42,.045) 1px,transparent 1px),
        linear-gradient(90deg,rgba(15,23,42,.045) 1px,transparent 1px);
    background-size:44px 44px;
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent 78%);
}
button{-webkit-tap-highlight-color:transparent}
a{color:inherit}

.mf-album-page{
    position:relative;
    width:min(1200px,calc(100% - 28px));
    margin:34px auto 90px;
}

.mf-album-page:before{
    content:"";
    position:absolute;
    inset:-44px -22px auto;
    height:420px;
    border-radius:0 0 80px 80px;
    background:linear-gradient(135deg,rgba(20,124,255,.17),rgba(124,92,255,.10),rgba(255,255,255,.02));
    filter:blur(12px);
    z-index:-1;
    pointer-events:none;
}

.mf-album-hero{
    position:relative;
    display:grid;
    grid-template-columns:minmax(260px,360px) 1fr;
    gap:34px;
    align-items:end;
    padding:34px;
    border:1px solid rgba(255,255,255,.72);
    border-radius:44px;
    background:
        linear-gradient(135deg,rgba(255,255,255,.92),rgba(247,250,255,.74)),
        radial-gradient(circle at 5% 0%,rgba(20,124,255,.18),transparent 36%);
    box-shadow:var(--mf-shadow);
    overflow:hidden;
    isolation:isolate;
}

.mf-album-hero:before{
    content:"";
    position:absolute;
    inset:-30% -10% auto auto;
    width:520px;
    height:520px;
    border-radius:999px;
    background:radial-gradient(circle,rgba(20,124,255,.22),transparent 64%);
    filter:blur(16px);
    z-index:-1;
}

.mf-album-hero:after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.42) 46%,transparent 70%);
    transform:translateX(48%);
    opacity:.55;
    pointer-events:none;
}

.mf-album-cover-shell{
    position:relative;
    transform:translateZ(0);
}

.mf-album-cover-shell:before{
    content:"";
    position:absolute;
    inset:18px;
    border-radius:34px;
    background:linear-gradient(135deg,rgba(20,124,255,.36),rgba(124,92,255,.18));
    filter:blur(28px);
    transform:translateY(22px) scale(.98);
    z-index:-1;
}

.mf-album-cover{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:34px;
    display:block;
    background:#e5e7eb;
    box-shadow:0 34px 75px rgba(15,23,42,.28);
    border:1px solid rgba(255,255,255,.78);
    transition:transform .28s ease, box-shadow .28s ease;
}

.mf-album-cover-shell:hover .mf-album-cover{
    transform:translateY(-4px) scale(1.01);
    box-shadow:0 40px 88px rgba(15,23,42,.32);
}

.mf-album-badge{
    position:absolute;
    right:16px;
    top:16px;
    padding:9px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.86);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    font-weight:950;
    color:var(--mf-blue);
    box-shadow:0 14px 28px rgba(15,23,42,.14);
    border:1px solid rgba(255,255,255,.72);
}

.mf-album-info{position:relative;z-index:2;padding-bottom:4px}

.mf-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 15px;
    border-radius:999px;
    background:rgba(20,124,255,.10);
    color:var(--mf-blue);
    font-weight:950;
    border:1px solid rgba(20,124,255,.13);
    box-shadow:0 10px 24px rgba(20,124,255,.08);
}

.mf-kicker:before{content:"♪";font-weight:950}

.mf-album-info h1{
    margin:16px 0 5px;
    font-size:clamp(42px,5.2vw,72px);
    line-height:.94;
    font-weight:950;
    letter-spacing:-2px;
    color:#06101f;
    text-wrap:balance;
}

.mf-album-info h2{
    margin:0 0 15px;
    font-size:clamp(21px,2.2vw,28px);
    color:#334155;
    font-weight:900;
}

.mf-album-info p{
    max-width:760px;
    color:var(--mf-muted);
    font-size:17px;
    line-height:1.78;
    font-weight:750;
    margin:0;
}

.mf-album-meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:20px;
}

.mf-album-meta span{
    padding:10px 14px;
    border:1px solid var(--mf-line);
    border-radius:999px;
    background:rgba(255,255,255,.76);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    color:#475569;
    font-weight:900;
    box-shadow:0 10px 24px rgba(15,23,42,.045);
}

.mf-album-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:24px;
}

.mf-primary,.mf-secondary{
    border:0;
    text-decoration:none;
    border-radius:19px;
    padding:15px 24px;
    min-height:56px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-weight:950;
    cursor:pointer;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.mf-primary{
    background:linear-gradient(135deg,var(--mf-blue),var(--mf-blue-deep));
    color:#fff;
    box-shadow:0 20px 40px rgba(20,124,255,.27);
}

.mf-primary:hover{transform:translateY(-2px);box-shadow:0 26px 48px rgba(20,124,255,.34)}

.mf-secondary{
    background:rgba(7,17,31,.92);
    color:#fff;
    box-shadow:0 16px 34px rgba(7,17,31,.18);
}

.mf-secondary:hover{transform:translateY(-2px);background:#000;box-shadow:0 22px 44px rgba(7,17,31,.22)}

.mf-album-player-card,
.mf-tracks-card{
    margin-top:24px;
    border:1px solid rgba(255,255,255,.70);
    border-radius:36px;
    background:var(--mf-glass);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:var(--mf-shadow-soft);
    overflow:hidden;
}

.mf-album-player-card{
    padding:18px;
    background:
        linear-gradient(135deg,rgba(8,15,28,.96),rgba(15,30,52,.92)),
        radial-gradient(circle at 20% 0%,rgba(20,124,255,.35),transparent 32%);
    color:#fff;
}

.mf-now-playing{
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:center;
    padding:6px 4px 16px;
}

.mf-now-playing span{
    color:rgba(255,255,255,.62);
    font-weight:900;
}

.mf-now-playing strong{
    font-size:20px;
    font-weight:950;
    text-align:left;
}

.mf-player-controls{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    justify-content:center;
    margin:0 0 15px;
}

.mf-player-controls button,
.mf-album-actions button.mf-secondary{
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.09);
    color:#fff;
    border-radius:999px;
    padding:11px 17px;
    font-weight:900;
    cursor:pointer;
    transition:.18s ease;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.mf-player-controls button:hover,
.mf-album-actions button.mf-secondary:hover,
.mf-player-controls button.is-on{
    background:rgba(20,124,255,.26);
    border-color:rgba(20,124,255,.52);
    transform:translateY(-1px);
}

#albumPlayer,
#albumPlayer iframe{
    width:100%;
    aspect-ratio:16/9;
    border:0;
    border-radius:26px;
    overflow:hidden;
    background:#050510;
    box-shadow:0 26px 70px rgba(0,0,0,.34);
}

.mf-tracks-card{padding:24px}

.mf-tracks-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:16px;
}

.mf-tracks-head h2{
    margin:0;
    font-size:32px;
    font-weight:950;
    letter-spacing:-.6px;
}

.mf-tracks-head span{
    color:var(--mf-muted);
    font-weight:900;
    padding:8px 12px;
    border-radius:999px;
    background:#f1f6ff;
}

.mf-track-list{display:grid;gap:9px}

.mf-track-row{
    position:relative;
    width:100%;
    border:1px solid transparent;
    background:rgba(248,251,255,.92);
    border-radius:22px;
    padding:13px 15px;
    display:grid;
    grid-template-columns:46px 1fr auto 42px;
    gap:13px;
    align-items:center;
    text-align:right;
    cursor:pointer;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
    color:var(--mf-ink);
    overflow:hidden;
}

.mf-track-row:before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:4px;
    background:linear-gradient(180deg,var(--mf-blue),#7c5cff);
    opacity:0;
    transition:.18s ease;
}

.mf-track-row:hover,
.mf-track-row.is-active{
    background:#fff;
    border-color:rgba(20,124,255,.22);
    box-shadow:0 16px 38px rgba(15,23,42,.08);
    transform:translateY(-2px);
}

.mf-track-row:hover:before,
.mf-track-row.is-active:before{opacity:1}

.mf-track-row.is-active .mf-track-number{
    background:linear-gradient(135deg,var(--mf-blue),var(--mf-blue-deep));
    color:#fff;
    box-shadow:0 12px 22px rgba(20,124,255,.24);
}

.mf-track-row.is-active .mf-track-play{
    background:linear-gradient(135deg,var(--mf-blue),var(--mf-blue-deep));
    box-shadow:0 12px 24px rgba(20,124,255,.22);
}

.mf-track-row:disabled{opacity:.52;cursor:not-allowed;transform:none;box-shadow:none}

.mf-track-number{
    width:40px;
    height:40px;
    border-radius:15px;
    display:grid;
    place-items:center;
    background:#eaf3ff;
    color:var(--mf-blue);
    font-weight:950;
    transition:.18s ease;
}

.mf-track-main{min-width:0}

.mf-track-main strong,
.mf-track-main em{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.mf-track-main strong{font-size:17px;font-weight:950;letter-spacing:-.15px}
.mf-track-main em{font-style:normal;color:var(--mf-muted);font-weight:850;margin-top:2px}
.mf-track-duration{color:var(--mf-muted);font-weight:900}

.mf-track-play{
    width:40px;
    height:40px;
    border-radius:999px;
    display:grid;
    place-items:center;
    background:#07111f;
    color:#fff;
    font-size:13px;
    transition:.18s ease;
}

.mf-track-row:hover .mf-track-play{transform:scale(1.05)}

.mf-empty{
    padding:22px;
    color:var(--mf-muted);
    font-weight:900;
    background:#f8fbff;
    border-radius:22px;
}

@media(max-width:920px){
    .mf-album-page{width:min(100% - 22px,1200px);margin-top:22px}
    .mf-album-hero{grid-template-columns:1fr;align-items:start;padding:24px;border-radius:36px}
    .mf-album-cover{max-width:350px;margin-inline:auto}
    .mf-album-info{text-align:center}
    .mf-album-info p{margin-inline:auto}
    .mf-album-meta,.mf-album-actions{justify-content:center}
    .mf-track-row{grid-template-columns:42px 1fr 42px}
    .mf-track-duration{display:none}
    .mf-now-playing{align-items:flex-start;flex-direction:column}
    .mf-now-playing strong{text-align:right}
}

@media(max-width:620px){
    body:after{display:none}
    .mf-album-page{width:min(100% - 16px,1200px);margin:12px auto 70px}
    .mf-album-page:before{height:310px;inset:-20px -10px auto}
    .mf-album-hero{padding:16px;border-radius:30px;gap:18px}
    .mf-album-cover{max-width:none;border-radius:25px}
    .mf-album-badge{right:12px;top:12px;font-size:13px;padding:7px 12px}
    .mf-kicker{font-size:13px;padding:8px 12px}
    .mf-album-info h1{font-size:36px;letter-spacing:-1px;margin-top:13px}
    .mf-album-info h2{font-size:20px}
    .mf-album-info p{font-size:15px;line-height:1.65}
    .mf-album-meta{gap:8px}.mf-album-meta span{font-size:13px;padding:8px 10px}
    .mf-album-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:9px}
    .mf-primary,.mf-secondary{width:100%;min-height:50px;border-radius:16px;padding:12px 14px}
    .mf-album-player-card,.mf-tracks-card{margin-top:16px;border-radius:28px}
    .mf-album-player-card{padding:12px}
    .mf-player-controls{gap:8px;justify-content:stretch}
    .mf-player-controls button{flex:1 1 calc(50% - 8px);padding:10px 9px;font-size:13px}
    #albumPlayer,#albumPlayer iframe{border-radius:20px}
    .mf-tracks-card{padding:14px}
    .mf-tracks-head h2{font-size:25px}
    .mf-tracks-head span{font-size:13px}
    .mf-track-row{border-radius:18px;padding:10px;gap:9px;grid-template-columns:38px 1fr 38px}
    .mf-track-number,.mf-track-play{width:36px;height:36px;border-radius:13px}
    .mf-track-main strong{font-size:15.5px}
    .mf-track-main em{font-size:13px}
}

@media(prefers-reduced-motion:reduce){
    *,*:before,*:after{transition:none!important;scroll-behavior:auto!important}
}


/* Music FM integrated album page additions */
.mf-album-breadcrumb{
    width:min(1180px,calc(100% - 28px));
    margin:18px auto -14px;
    display:flex;
    align-items:center;
    gap:9px;
    color:#64748b;
    font-weight:900;
    font-size:14px;
}
.mf-album-breadcrumb a{
    color:var(--mf-blue,#147cff);
    text-decoration:none;
}
.mf-album-breadcrumb span{opacity:.75}
.mf-album-page.mf-album-integrated{
    margin-top:28px;
}
.mf-album-page .mf-secondary[href="albums.php"]{
    background:rgba(7,17,31,.92);
}
@media(max-width:700px){
    .mf-album-breadcrumb{
        width:min(100% - 18px,1180px);
        margin-top:8px;
        font-size:13px;
        overflow:auto;
        white-space:nowrap;
    }
    .mf-album-page.mf-album-integrated{margin-top:18px}
}


/* =========================================================
   Music FM Album Actions — like / playlist / share
   ========================================================= */
.mf-track-row{
    grid-template-columns:44px minmax(0,1fr) auto auto 42px;
}
.mf-track-row.is-disabled{
    opacity:.55;
    cursor:not-allowed;
}
.mf-track-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    opacity:.72;
    transform:translateX(-4px);
    transition:.22s ease;
}
.mf-track-row:hover .mf-track-actions,
.mf-track-row.is-active .mf-track-actions,
.mf-track-row:focus-within .mf-track-actions{
    opacity:1;
    transform:translateX(0);
}
.mf-track-action{
    width:38px;
    height:38px;
    border:1px solid rgba(15,23,42,.08);
    border-radius:14px;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.82);
    color:#64748b;
    cursor:pointer;
    box-shadow:0 10px 22px rgba(15,23,42,.06);
    transition:transform .18s ease, color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.mf-track-action:hover{
    transform:translateY(-2px) scale(1.03);
    color:var(--mf-blue,#147cff);
    background:#fff;
    border-color:rgba(20,124,255,.28);
    box-shadow:0 14px 32px rgba(20,124,255,.14);
}
.mf-track-action:disabled{
    opacity:.6;
    cursor:wait;
    transform:none;
}
.mf-track-action.is-liked,
.mf-track-action.is-saved,
.mf-track-action.is-done{
    color:#fff;
    background:linear-gradient(135deg,var(--mf-blue,#147cff),var(--mf-blue-deep,#005bea));
    border-color:rgba(20,124,255,.34);
    box-shadow:0 14px 34px rgba(20,124,255,.22);
}
.mf-like-action.is-liked{
    background:linear-gradient(135deg,#ff3d6e,#e11d48);
    border-color:rgba(255,61,110,.36);
    box-shadow:0 14px 34px rgba(255,61,110,.22);
}
.mf-playlist-action.is-saved{
    background:linear-gradient(135deg,#10b981,#059669);
    border-color:rgba(16,185,129,.34);
    box-shadow:0 14px 34px rgba(16,185,129,.20);
}
.mf-track-row::before{
    content:"";
    position:absolute;
    right:0;
    top:14px;
    bottom:14px;
    width:4px;
    border-radius:999px;
    background:linear-gradient(180deg,var(--mf-blue,#147cff),#4dd7ff);
    opacity:0;
    transform:scaleY(.45);
    transition:.22s ease;
}
.mf-track-row:hover::before,
.mf-track-row.is-active::before{
    opacity:1;
    transform:scaleY(1);
}
.mf-album-toast{
    position:fixed;
    right:22px;
    bottom:24px;
    z-index:999999;
    min-width:220px;
    max-width:min(360px,calc(100vw - 32px));
    padding:14px 18px;
    border-radius:18px;
    color:#fff;
    font-weight:900;
    background:linear-gradient(135deg,#0f172a,#147cff);
    box-shadow:0 24px 70px rgba(15,23,42,.24);
    opacity:0;
    pointer-events:none;
    transform:translateY(16px) scale(.96);
    transition:.22s ease;
}
.mf-album-toast.show{
    opacity:1;
    transform:translateY(0) scale(1);
}
.mf-album-toast.error{
    background:linear-gradient(135deg,#991b1b,#ef4444);
}

@media(max-width:920px){
    .mf-track-row{grid-template-columns:42px minmax(0,1fr) auto 42px}
    .mf-track-actions{grid-column:2 / 4;justify-content:flex-start;opacity:1;transform:none;margin-top:4px}
    .mf-track-play{grid-column:4;grid-row:1}
}
@media(max-width:620px){
    .mf-track-row{grid-template-columns:38px minmax(0,1fr) 38px}
    .mf-track-actions{grid-column:1 / -1;justify-content:space-between;background:rgba(248,251,255,.72);border:1px solid rgba(226,232,240,.75);border-radius:16px;padding:8px;margin-top:2px}
    .mf-track-action{width:100%;height:40px;border-radius:13px}
    .mf-album-toast{right:12px;bottom:14px}
}