body {
    margin: 0;
    font-family: 'Vazirmatn', sans-serif;
    background: #121212; /* تم تاریک موزیک */
    color: #fff;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* گرید اصلی صفحه */
.main-container {
    display: grid;
    grid-template-columns: 220px 1fr 300px;
    height: calc(100vh - 90px); /* ارتفاع پلیر پایین */
}

/* هدر */
.top-header {
    background: #1a1a1a;
    padding: 15px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #333;
}

.search-box {
    width: 300px;
    padding: 10px;
    border-radius: 20px;
    border: none;
    background: #333;
    color: white;
}

/* سایدبار چپ */
.sidebar-left {
    background: #000;
    padding: 20px;
}
.sidebar-left ul { list-style: none; padding: 0; }
.sidebar-left li { padding: 10px; cursor: pointer; border-radius: 5px; }
.sidebar-left li:hover { background: #333; }
.sidebar-left li.active { background: #28a745; color: white; }

/* لیست آهنگ‌ها */
.content-area {
    background: #121212;
    padding: 20px;
    overflow-y: auto;
}

.track-list {
    margin-top: 20px;
}

.track-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #222;
    cursor: pointer;
    transition: background 0.2s;
}

.track-item:hover { background: #1a1a1a; }
.track-item.playing { background: #282828; color: #1db954; }

.track-thumb { width: 50px; height: 50px; border-radius: 4px; margin-left: 15px; }
.track-info { flex: 1; }
.track-title { font-weight: bold; display: block; }
.track-artist { font-size: 0.9rem; color: #aaa; }

/* سایدبار راست (Now Playing) */
.sidebar-right {
    background: #1a1a1a;
    padding: 20px;
    text-align: center;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
}

.np-artwork img { width: 100%; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }

.lyrics-container {
    margin-top: 20px;
    flex: 1;
    background: #000;
    border-radius: 10px;
    padding: 15px;
    overflow-y: auto;
    text-align: right;
    font-size: 1.1rem;
    line-height: 1.8;
}

/* پلیر پایین */
.sticky-player {
    height: 90px;
    background: #181818;
    border-top: 1px solid #282828;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    position: sticky;
    bottom: 0;
}

.player-controls-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40%;
}

.buttons button {
    background: none;
    border: none;
    color: #aaa;
    font-size: 16px;
    margin: 0 10px;
    cursor: pointer;
}

.buttons .play-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: #000;
    font-size: 18px;
}

.progress-container {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 10px;
}
.progress-container input[type=range] {
    flex: 1;
    margin: 0 10px;
    accent-color: #1db954;
}

.player-track-info {
    display: flex;
    align-items: center;
    width: 20%;
}
.player-track-info img {
    width: 56px;
    height: 56px;
    margin-left: 10px;
}

.player-controls-right {
    display: flex;
    align-items: center;
    width: 20%;
    justify-content: flex-end;
}