#toast-container {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    bottom: auto !important;
    z-index: 9999999 !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.toast{
    min-width:260px;
    padding:16px 20px;
    border-radius:18px;
    color:white;
    backdrop-filter:blur(16px);
    background:rgba(20,20,30,0.88);
    border:1px solid rgba(255,255,255,0.08);
    animation:toastIn .35s ease;
    box-shadow:0 10px 30px rgba(0,0,0,0.35);
}

.toast.success{
    border-left:4px solid #9333ff;
}

.toast.error{
    border-left:4px solid #ff4d6d;
}

@keyframes toastIn{
    from{
        opacity:0;
        transform:translateX(40px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

@font-face{
    font-family:'Poppins';
    src:url('assets/fonts/Poppins-Regular.ttf');
    font-weight:400;
}

@font-face{
    font-family:'Poppins';
    src:url('assets/fonts/Poppins-Medium.ttf');
    font-weight:500;
}

@font-face{
    font-family:'Poppins';
    src:url('assets/fonts/Poppins-SemiBold.ttf');
    font-weight:600;
}

@font-face{
    font-family:'Poppins';
    src:url('assets/fonts/Poppins-Bold.ttf');
    font-weight:700;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
    -webkit-tap-highlight-color:transparent;
}

html{
    scroll-behavior:smooth;
}

body{
    background:
    radial-gradient(circle at top left,#1a082e 0%,#07070d 30%),
    radial-gradient(circle at bottom right,#12051f 0%,#07070d 40%),
    #07070d;
    color:white;
    overflow-x:hidden;
    min-height:100vh;
    position:relative;
    animation:pageEnter .45s ease;
}

@keyframes pageEnter{
    from{
        opacity:0;
        transform:translateY(12px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.page-transition{
    opacity:0;
    transform:translateY(10px);
    transition:.3s ease;
}

body::before{
    content:'';
    position:fixed;
    inset:0;
    background:
    linear-gradient(rgba(255,255,255,0.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.02) 1px,transparent 1px);
    background-size:40px 40px;
    opacity:0.25;
    pointer-events:none;
    z-index:-5;
}

.background-glow{
    position:fixed;
    width:700px;
    height:700px;
    background:radial-gradient(circle,#7b2cff55 0%,transparent 70%);
    top:-200px;
    left:-150px;
    filter:blur(80px);
    z-index:-1;
    transition: transform .12s linear, opacity .12s linear;
    will-change: transform, opacity;
}

.aurora{
    position:fixed;
    border-radius:50%;
    filter:blur(120px);
    opacity:0.35;
    z-index:-4;
    animation:auroraMove 16s infinite alternate ease-in-out;
}

.aurora1{
    width:500px;
    height:500px;
    background:#9333ff;
    top:-100px;
    right:-120px;
}

.aurora2{
    width:450px;
    height:450px;
    background:#4f46e5;
    bottom:-100px;
    left:-100px;
    animation-duration:20s;
}

@keyframes auroraMove{
    0%{
        transform:translate(0,0) scale(1);
    }
    100%{
        transform:translate(50px,-40px) scale(1.2);
    }
}

.main-container{
    width:100%;
    padding:30px 60px 140px;
}

.topbar{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:50px;
    position:sticky;
    top:20px;
    z-index:999;
    padding:18px 24px;
    background:rgba(12,12,20,0.55);
    border:1px solid rgba(255,255,255,0.08);
    backdrop-filter:blur(22px);
    border-radius:28px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
}

.logo{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:30px;
    font-weight:700;
    color:#b98cff;
    letter-spacing:1px;
}

.logo i{
    color:#9333ff;
    filter:drop-shadow(0 0 12px #9333ff);
}

.search-box{
    flex:1;
    max-width:500px;
    height:55px;
    position:relative;
    overflow:hidden;
    background:rgba(255,255,255,0.045);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:18px;
    backdrop-filter:blur(14px);
    display:flex;
    align-items:center;
    padding:0 20px;
    transition:0.3s;
}

.search-box:hover{
    border-color:#9333ff;
    box-shadow:0 0 20px #9333ff44;
}

.search-box i{
    color:#a855f7;
    margin-right:12px;
}

.search-box input{
    width:100%;
    background:none;
    border:none;
    outline:none;
    color:white;
    font-size:15px;
}

.search-box input::placeholder{
    color:#999;
}

.top-actions{
    display:flex;
    align-items:center;
    gap:15px;
}

.upload-area{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    padding:18px;
    border-radius:24px;
    border:1px dashed rgba(147,51,255,0.4);
    background:rgba(255,255,255,0.03);
    transition:0.3s;
}

.upload-area.dragover{
    transform:scale(1.02);
    border-color:#9333ff;
    box-shadow:0 0 35px rgba(147,51,255,0.25);
    background:rgba(147,51,255,0.08);
}

.upload-area p{
    color:#9e9eb3;
    font-size:13px;
}

.upload-btn,
.playlist-btn,
.explore-btn{
    border:none;
    outline:none;
    cursor:pointer;
    width:190px;
    height:52px;
    border-radius:16px;
    background:linear-gradient(135deg,#9333ff,#6d28d9);
    color:white;
    font-weight:600;
    transition:0.3s;
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    box-shadow:0 10px 25px rgba(147,51,255,0.25);
}

.upload-btn:hover,
.playlist-btn:hover,
.explore-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 30px #9333ff55;
}

.upload-btn input{
    display:none;
}

.upload-progress-wrapper{
    width:100%;
    height:8px;
    border-radius:30px;
    overflow:hidden;
    background:rgba(255,255,255,0.06);
}

.upload-progress-bar{
    width:0%;
    height:100%;
    border-radius:30px;
    background:linear-gradient(90deg,#9333ff,#6d28d9);
    transition:0.2s;
    box-shadow:0 0 18px rgba(147,51,255,0.4);
}

.hero-section{
    width:100%;
    min-height:500px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    margin-bottom:80px;
}

.hero-left{
    flex:1;
}

.hero-left h1{
    font-size:72px;
    line-height:1.1;
    margin-bottom:20px;
    background:linear-gradient(to right,#ffffff,#b98cff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.hero-left p{
    color:#aaa;
    font-size:18px;
    line-height:1.8;
    max-width:600px;
    margin-bottom:30px;
}

.hero-right{
    flex:1;
    position:relative;
    height:400px;
}

.floating-card{
    position:absolute;
    overflow:hidden;
    border-radius:30px;
    backdrop-filter:blur(20px);
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 10px 40px rgba(0,0,0,0.4);
}

.floating-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:inherit;
}

.card1{
    width:280px;
    height:280px;
    top:20px;
    left:50px;
    animation:float 5s ease-in-out infinite;
}

.card2{
    width:180px;
    height:180px;
    bottom:20px;
    left:0;
    animation:float 6s ease-in-out infinite;
}

.card3{
    width:220px;
    height:220px;
    right:40px;
    top:80px;
    animation:float 7s ease-in-out infinite;
}

@keyframes float{
    0%{ transform:translateY(0px); }
    50%{ transform:translateY(-20px); }
    100%{ transform:translateY(0px); }
}

.section-title{
    margin-bottom:30px;
}

.section-title h2{
    font-size:32px;
}

.music-list{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:25px;
}

.music-card{
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:25px;
    overflow:hidden;
    backdrop-filter:blur(14px);
    transition:0.3s;
    cursor:pointer;
}

.music-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 40px rgba(147,51,255,0.25);
    border-color:#9333ff;
}

.card-image-wrap { 
    position:relative; 
}

.music-card img{
    width:100%;
    height:230px;
    object-fit:cover;
}

.music-card-content{
    padding:20px;
}

.music-card-content h3{
    font-size:20px;
    margin-bottom:8px;
}

.music-card-content p{
    color:#999;
}

.card-actions {
    position:absolute; top:12px; right:12px; display:flex; flex-direction:column; gap:10px; opacity:0; transform:translateY(10px); transition:.25s; z-index: 10; 
}

.music-card:hover .card-actions { 
    opacity:1; transform:translateY(0); 
}

.like-btn, .download-btn, .delete-btn { 
    width:40px; height:40px; border:none; outline:none; border-radius:14px; background:rgba(10,10,20,.75); backdrop-filter:blur(10px); color:white; display:flex; align-items:center; justify-content:center; cursor:pointer; text-decoration:none; transition:.25s; border:1px solid rgba(255,255,255,.08); 
}

.like-btn:hover, .download-btn:hover { 
    transform:scale(1.08); background:#9333ff; box-shadow:0 0 20px rgba(147,51,255,.35); 
}

.delete-btn:hover { 
    transform:scale(1.08); background:#ff4d6d; box-shadow:0 0 20px rgba(255,77,109,.35); 
}

.like-btn.liked { 
    background:#ff2e63; box-shadow:0 0 20px rgba(255,46,99,.35); 
}

.mini-player{
    position:fixed;
    bottom:20px;
    left:20px;
    right:20px;
    height:auto;
    min-height:95px;
    background:rgba(15,15,25,0.7);
    border:1px solid rgba(255,255,255,0.08);
    backdrop-filter:blur(20px);
    border-radius:25px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 30px;
    z-index:999;
    box-shadow:0 10px 40px rgba(0,0,0,0.4);
    flex-wrap:wrap;
}

.player-left{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:280px;
}

.player-left img{
    width:60px;
    height:60px;
    border-radius:15px;
    object-fit:cover;
}

.song-info h4{
    font-size:16px;
}

.song-info p{
    font-size:13px;
    color:#999;
}

.player-center{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.controls{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    margin-bottom:5px;
}

.controls button{
    width:42px;
    height:42px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,0.08);
    color:white;
    cursor:pointer;
    transition:0.3s;
    display:flex;
    align-items:center;
    justify-content:center;
}

.controls button:hover{
    background:#9333ff;
    transform:scale(1.1);
}

.play-btn{
    width:50px !important;
    height:50px !important;
    background:linear-gradient(135deg,#9333ff,#6d28d9) !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
}

.progress-container{
    width:100%;
    display:flex;
    align-items:center;
    gap:15px;
}

.player-right {
    width: 280px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
}

.progress-container input{
    width:100%;
    height:6px;
    -webkit-appearance:none;
    appearance:none;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    overflow:hidden;
    cursor:pointer;
    transition:background .08s linear;
}

.progress-container input::-webkit-slider-runnable-track{
    height:6px;
    border-radius:999px;
    background:transparent;
}

.progress-container input::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:14px;
    height:14px;
    border-radius:50%;
    background:#fff;
    border:3px solid #9333ff;
    margin-top:-4px;
    box-shadow:0 0 12px rgba(147,51,255,.45);
}

.volume-container {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    max-width: 180px;
}

.volume-container i {
    font-size: 14px;
    color: #fff;
    opacity: 0.8;
}

#volume-bar {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    outline: none;
    cursor: pointer;
}

#volume-bar::-webkit-slider-runnable-track{
    height:6px;
    border-radius:999px;
    background:transparent;
}

#volume-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: #fff;
    border: 3px solid #9333ff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(147, 51, 255, 0.45);
    margin-top: -4px;
}

.playlist-builder{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    margin-bottom:60px;
}

.playlist-form,
.playlist-song-selector{
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    backdrop-filter:blur(14px);
    border-radius:30px;
    padding:30px;
}

.playlist-form h1{
    font-size:40px;
    margin-bottom:15px;
}

.playlist-form p{
    color:#999;
    margin-bottom:30px;
}

.playlist-form input{
    width:100%;
    height:55px;
    margin-bottom:20px;
    border:none;
    outline:none;
    background:rgba(255,255,255,0.06);
    border-radius:16px;
    padding:0 20px;
    color:white;
    font-size:15px;
}

#create-playlist-btn{
    width:100%;
    height:55px;
    border:none;
    border-radius:16px;
    background:linear-gradient(135deg,#9333ff,#6d28d9);
    color:white;
    font-weight:600;
    cursor:pointer;
    transition:0.3s;
}

#create-playlist-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 30px #9333ff55;
}

#playlist-song-list{
    display:flex;
    flex-direction:column;
    gap:15px;
    margin-top:20px;
    max-height:500px;
    overflow-y:auto;
}

.song-select-item{
    display:flex;
    align-items:center;
    gap:15px;
    padding:15px;
    border-radius:18px;
    background:rgba(255,255,255,0.04);
}

.song-select-item img{
    width:60px;
    height:60px;
    object-fit:cover;
    border-radius:15px;
}

.song-select-item label{
    flex:1;
}

.created-playlists{
    margin-top:50px;
}

.playlist-link{
    text-decoration:none;
    color:white;
    display:block;
}

.playlist-hero{
    display:flex;
    align-items:center;
    gap:30px;
    margin-bottom:50px;
}

.playlist-hero img{
    width:220px;
    height:220px;
    object-fit:cover;
    border-radius:30px;
    box-shadow:0 15px 40px rgba(147,51,255,0.3);
}

.playlist-hero h1{
    font-size:55px;
    margin-bottom:10px;
}

.playlist-hero p{
    color:#aaa;
}

.playlist-search-box{
    width:100%;
    height:55px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 18px;
    border-radius:18px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    margin:20px 0;
}

.playlist-search-box input{
    flex:1;
    background:none;
    border:none;
    outline:none;
    color:white;
    font-size:15px;
}

.playlist-search-box i{
    color:#9333ff;
}

button, a, .music-card, input{ transition: background .25s, border .25s, transform .25s, box-shadow .25s, opacity .25s; }

#recently-played .section-title{ width:100%; display:flex; justify-content:center; margin-bottom:32px; }
#recently-played .section-title h2{ display:flex; align-items:center; justify-content:center; padding:14px 28px; border-radius:22px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); backdrop-filter:blur(18px); box-shadow: 0 10px 30px rgba(0,0,0,.25); font-size:28px; font-weight:700; background-image: linear-gradient( to right, #ffffff, #caa7ff ); -webkit-background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:.5px; }
.recent-grid{ width:100%; display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,220px)); justify-content:center; gap:24px; }
.recent-card{ position:relative; overflow:hidden; border-radius:28px; background: linear-gradient( 180deg, rgba(255,255,255,.06), rgba(255,255,255,.03) ); border: 1px solid rgba(255,255,255,.08); backdrop-filter:blur(18px); cursor:pointer; transition: transform .35s, box-shadow .35s, border .35s; }
.recent-card::before{ content:''; position:absolute; inset:0; background: linear-gradient( 180deg, transparent, rgba(0,0,0,.45) ); z-index:1; }
.recent-card:hover{ transform: translateY(-10px) scale(1.02); border-color:#9333ff; box-shadow: 0 20px 45px rgba(147,51,255,.22); }
.recent-card img{ width:100%; height:220px; object-fit:cover; transition:transform .5s; }
.recent-card:hover img{ transform:scale(1.06); }
.recent-card h4{ position:absolute; left:18px; bottom:42px; z-index:2; font-size:17px; font-weight:600; width:80%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.recent-card p{ position:absolute; left:18px; bottom:18px; z-index:2; color:#cfcfe7; font-size:13px; width:80%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.recent-overlay{ position:absolute; top:14px; right:14px; width:42px; height:42px; border-radius:16px; background: rgba(12,12,20,.72); border: 1px solid rgba(255,255,255,.08); backdrop-filter:blur(12px); display:flex; align-items:center; justify-content:center; z-index:3; color:white; box-shadow: 0 10px 25px rgba(0,0,0,.25); }

.ambient-bg{
    position:fixed; inset:0; z-index:-10;
    background: radial-gradient(circle at 20% 20%,#9333ff22,transparent 30%), radial-gradient(circle at 80% 30%,#b346e522,transparent 30%), radial-gradient(circle at 50% 80%,#e72eff22,transparent 30%);
    filter:blur(80px);
    animation:ambientMove 18s infinite alternate ease-in-out;
}

@keyframes ambientMove{
    0%{ transform:scale(1) translateY(0); }
    100%{ transform:scale(1.2) translateY(-30px); }
}

#loop-btn.active{ background:#9333ff; box-shadow:0 0 30px rgba(147,51,255,.45); }

.side-btn{ width:42px; height:42px; border:none; border-radius:50%; background:rgba(255,255,255,.08); color:white; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.25s; margin-left:12px; margin:0; padding:0; flex-shrink:0; }
.side-btn i{ font-size:15px; }
.side-btn:hover{ background:#9333ff; transform:scale(1.08); }
.side-btn.active{ background:#9333ff; }

body.cinema-mode{ background: radial-gradient(circle at center,#12051f 0%,#000 70%); transition:.4s; }
body.cinema-mode .topbar{ opacity:.12; transition:.35s; }
body.cinema-mode .main-container{ opacity:.28; filter:blur(2px); transition:.35s; }
body.cinema-mode .mini-player{ background:rgba(10,10,18,.92); border:1px solid rgba(147,51,255,.35); box-shadow: 0 0 80px rgba(147,51,255,.35); transform:scale(1.015); transition:.35s; }
body.cinema-mode #player-cover{ box-shadow: 0 0 35px rgba(147,51,255,.45); }

.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: linear-gradient(145deg, #1a0b2e, #0d001a);
    border: 1px solid rgba(168, 85, 247, 0.3);
    box-shadow: 0 10px 30px rgba(168, 85, 247, 0.2);
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    width: 90%;
    max-width: 350px;
    transform: translateY(20px);
    transition: 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.modal-content h3 {
    color: #fff;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.modal-content p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

#admin-password-input {
    width: 100%;
    padding: 12px 15px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    margin-bottom: 20px;
    outline: none;
    transition: 0.3s;
    font-family: inherit;
}

#admin-password-input:focus {
    border-color: #a855f7;
    background: rgba(168, 85, 247, 0.1);
}

.modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.modal-buttons button {
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s;
    flex: 1;
}

#modal-cancel-btn {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

#modal-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

#modal-confirm-btn {
    background: #a855f7;
    color: white;
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4);
}

#modal-confirm-btn:hover {
    background: #9333ea;
    box-shadow: 0 4px 20px rgba(168, 85, 247, 0.6);
}

/* =========================================================
   🔥 SUPER SEXY & CLEAN MOBILE UI (Max-width: 768px) 🔥
========================================================= */
@media screen and (max-width: 768px) {
    /* 1. بدنه سایت تا محتوا نره زیر پلیر و دکمه‌ها */
    body { padding-bottom: 220px !important; }
    .main-container { padding: 15px 15px 120px !important; }

    /* 2. هدر و سرچ باکس */
    .topbar { flex-direction: column; padding: 15px; border-radius: 20px; gap: 15px; top: 10px; }
    .logo { font-size: 24px; justify-content: center; }
    .search-box { width: 100% !important; max-width: 100%; height: 48px; border-radius: 16px; padding: 0 15px; }
    
    /* 3. دکمه‌های بالا که میرن پایین صفحه چسبیده به پلیر */
    .top-actions { 
        position: fixed; 
        bottom: 120px; 
        left: 0; 
        width: 100%; 
        display: flex; 
        flex-direction: row; 
        justify-content: space-evenly; 
        padding: 0 15px; 
        z-index: 998; 
        gap: 12px;
        background: transparent;
    }
    .upload-btn, .playlist-btn, .explore-btn { 
        width: 100% !important; 
        height: 48px; 
        font-size: 14px; 
        border-radius: 16px; 
        margin: 0;
        box-shadow: 0 8px 25px rgba(0,0,0,0.5);
    }

    /* 4. هیرو سکشن و مخفی کردن عکس‌های اضافه */
    .hero-section { flex-direction: column; text-align: center; gap: 20px; margin-bottom: 30px; min-height: auto; }
    .hero-left h1 { font-size: 38px; line-height: 1.2; }
    .hero-left p { font-size: 14px; }
    .hero-right, .floating-card, .card1, .card2, .card3 { display: none !important; }

    /* 5. لیست موزیک‌ها (استایل ردیفی خفن و تنگ) */
    .music-list { grid-template-columns: 1fr; gap: 12px; }
    .music-card { 
        display: flex; 
        flex-direction: row; 
        align-items: center; 
        height: 80px; 
        padding: 10px; 
        border-radius: 18px; 
        background: rgba(255,255,255,0.06); 
    }
    .card-image-wrap { width: 60px !important; height: 60px !important; flex-shrink: 0; position: relative; }
    .music-card img { width: 60px !important; height: 60px !important; border-radius: 12px; object-fit: cover; }
    .music-card-content { 
        padding: 0 15px; 
        flex: 1; 
        display: flex; 
        flex-direction: column; 
        justify-content: center; 
        overflow: hidden; 
    }
    .music-card-content h3 { font-size: 14px; margin: 0 0 4px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
    .music-card-content p { font-size: 11px; margin: 0; color: rgba(255,255,255,0.6); }

    /* دکمه‌های لایک و دانلود تو ردیف موزیک */
    .card-actions { 
        position: static; 
        opacity: 1; 
        transform: none; 
        flex-direction: row; 
        gap: 8px; 
        margin-left: auto; 
        display: flex; 
    }
    .like-btn, .download-btn, .delete-btn { width: 34px; height: 34px; border-radius: 12px; font-size: 13px; }

    /* 6. پلیر موبایل */
    .mini-player { 
        left: 10px; 
        right: 10px; 
        bottom: 10px; 
        height: auto; 
        min-height: unset; 
        padding: 12px 15px; 
        border-radius: 20px; 
        flex-direction: column; 
        gap: 12px; 
        background: rgba(15,15,25,0.92); 
        backdrop-filter: blur(25px); 
    }
    .player-left { width: 100%; min-width: auto; justify-content: flex-start; gap: 12px; }
    .player-left img { width: 45px; height: 45px; border-radius: 12px; }
    .song-info h4 { font-size: 14px; }
    .song-info p { font-size: 11px; }
    .player-center { width: 100%; }
    .controls { gap: 15px; margin-bottom: 6px; }
    .controls button { width: 36px; height: 36px; font-size: 14px; }
    .play-btn { width: 46px !important; height: 46px !important; }
    .player-right { display: none; } /* ولوم روی موبایل نیازی نیست */

    /* 7. موزیک‌های اخیر */
    #recently-played { margin-top: 40px; margin-bottom: 40px; }
    #recently-played .section-title h2 { font-size: 22px; width: 100%; text-align: center; }
    .recent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .recent-card { border-radius: 20px; }
    .recent-card img { height: 130px; }
    .recent-card h4 { font-size: 12px; left: 12px; bottom: 34px; }
    .recent-card p { font-size: 10px; left: 12px; bottom: 14px; }
    .recent-overlay { width: 32px; height: 32px; border-radius: 10px; top: 10px; right: 10px; font-size: 12px; }

    /* 8. پلی‌لیست بیلدِر */
    .playlist-builder { grid-template-columns: 1fr; gap: 20px; }
    .playlist-form, .playlist-song-selector { padding: 20px; border-radius: 20px; }
    .playlist-form h1 { font-size: 28px; }
    .playlist-hero { flex-direction: column; text-align: center; gap: 20px; }
    .playlist-hero img { width: 160px; height: 160px; }
    .playlist-hero h1 { font-size: 32px; }
    .song-select-item { padding: 10px; border-radius: 14px; gap: 10px; }
    .song-select-item img { width: 45px; height: 45px; }

    /* 9. نوتیفیکیشن‌ها */
    #toast-container { top: 10px !important; right: 10px !important; left: 10px !important; }
    .toast { width: 100%; min-width: unset; font-size: 13px; padding: 12px 15px; border-radius: 14px; }
}