/*
Theme Name: ZedStream Theme
Theme URI: https://example.com/
Author: TN Innovations
Description: Updated ZedStream frontend theme with stable layout wrappers, responsive spacing, and Boomplay-style UI compatibility.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
Text Domain: zedstream-theme
*/

/* =========================
   GLOBAL LOCK / APP LAYOUT
========================= */

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: #0b0b0b;
    color: #fff;
    font-family: Arial, sans-serif;
    overflow-x: hidden;
}

.zed-track-card.is-locked {
    opacity: 0.7;
    position: relative;
}

.is-locked {
    opacity: 0.6;
}

.is-locked::after {
    content: "🔒 Premium";
    position: absolute;
    top: 8px;
    right: 8px;
    background: #ff6600;
    color: #fff;
    font-size: 10px;
    padding: 3px 6px;
    border-radius: 3px;
}

.zed-track-card.is-locked::after {
    content: "🔒 Preview";
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ff6600;
    color: #fff;
    padding: 3px 8px;
    font-size: 11px;
    border-radius: 4px;
}

/* =========================
   MOBILE
========================= */

body {
    min-height: 100vh;
}

.zed-card-cover-link,
.zed-track-card-link {
    color: inherit;
    text-decoration: none;
    display: block;
}

.zed-track-card-link:hover,
.zed-card-cover-link:hover {
    color: inherit;
}

body.zed-header-active {
    padding-top: 78px !important;
    padding-bottom: 110px !important;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button,
input,
textarea,
select {
    font: inherit;
    box-sizing: border-box;
}

input,
textarea,
select {
    outline: none;
}

.zed-site {
    width: 100%;
    min-height: 100vh;
}

.zed-main {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
}

.zed-page-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.page .zed-page-content,
.single .zed-page-content,
.blog .zed-page-content,
.archive .zed-page-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.page article,
.single article,
.blog article,
.archive article,
.page .zed-page-content > article,
.single .zed-page-content > article,
.blog .zed-page-content > article,
.archive .zed-page-content > article {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

.zed-page-content > *:first-child,
.zed-main > *:first-child {
    margin-top: 0;
}

.zed-page-content > *:last-child,
.zed-main > *:last-child {
    margin-bottom: 0;
}

.zed-artist-dashboard-page,
.zed-listener-dashboard,
.zed-admin-panel-page,
.zed-moderator-panel-page {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.zed-home,
.zed-discover,
.zed-artist-profile,
.zed-upload-box,
.zed-upload-studio {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* =========================
   STICKY TOP NAVIGATION
========================= */

#zed-header.zed-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 14px 24px;
    background: rgba(13, 13, 13, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid #222;
    z-index: 999999;
}

.zed-header-left,
.zed-header-center,
.zed-header-right {
    display: flex;
    align-items: center;
}

.zed-header-left {
    min-width: 0;
}

.zed-header-center {
    flex: 1;
    justify-content: center;
    min-width: 0;
}

.zed-header-right {
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.zed-logo {
    color: #ff7a00;
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap;
}

.zed-search {
    width: 320px;
    max-width: 100%;
    padding: 10px 14px;
    border: 1px solid #333;
    border-radius: 24px;
    background: #1a1a1a;
    color: #fff;
}

.zed-search::placeholder {
    color: #9a9a9a;
}

.zed-header-right a {
    color: #ccc;
    white-space: nowrap;
    font-size: 14px;
    transition: color 0.2s ease;
}

.zed-header-right a:hover {
    color: #ff7a00;
}

.zed-btn {
    background: #ff7a00;
    color: #fff !important;
    padding: 8px 14px;
    border-radius: 20px;
    border: none;
    display: inline-block;
}

.zed-btn:hover {
    background: #ff8f26;
}

/* =========================
   BUTTONS / ACTIONS
========================= */

.zed-buy-btn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #151515;
    color: #22c55e;
    border: 1px solid #2f2f2f;
}

.zed-buy-btn:hover {
    background: rgba(34,197,94,0.12);
    border-color: #22c55e;
    color: #4ade80;
}

.zed-download-btn {
    text-decoration: none;
}

.zed-card-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.zed-icon-btn,
.zed-download-btn,
.zed-card-mini-btn,
.zed-card-actions .zed-like-btn,
.zed-card-actions .zed-share-btn,
.zed-card-actions .zed-save-track-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #2f2f2f;
    background: #151515;
    color: #ff7a00;
    font-weight: 700;
    margin-top: 0;
}

.zed-icon-btn:hover,
.zed-download-btn:hover,
.zed-card-mini-btn:hover,
.zed-card-actions .zed-like-btn:hover,
.zed-card-actions .zed-share-btn:hover,
.zed-card-actions .zed-save-track-btn:hover {
    background: rgba(255,122,0,0.12);
    border-color: #ff7a00;
    color: #ff9a2f;
}

.zed-like-btn.is-liked {
    background: rgba(255,122,0,0.12);
    border-color: #ff7a00;
    color: #ff9a2f;
}

.zed-like-count {
    display: inline-block;
    color: #bdbdbd;
    font-size: 13px;
}

.zed-share-btn,
.zed-save-track-btn,
.zed-like-btn,
.zed-download-btn,
.zed-card-mini-btn {
    background: #151515;
    color: #ff7a00;
}

.zed-play-btn {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: #ff7a00;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(0,0,0,.3);
    transition: transform 0.15s ease, background 0.15s ease;
}

.zed-play-btn:hover {
    transform: scale(1.05);
    background: #ff8f26;
}

.zed-release-icon-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.zed-release-main-play {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
}

.zed-release-icon-actions .zed-icon-btn,
.zed-release-icon-actions .zed-download-btn,
.zed-release-icon-actions .zed-like-btn,
.zed-release-icon-actions .zed-share-btn,
.zed-release-icon-actions .zed-save-track-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
}

/* =========================
   ANALYTICS / ADMIN HELPERS
========================= */

.zed-analytics-chart-card {
    background: #111;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 18px;
    min-height: 340px;
    position: relative;
}

.zed-analytics-chart {
    width: 100% !important;
    height: 280px !important;
    display: block;
}

.zed-admin-tools-panel select {
    padding: 10px 12px;
    background: #1a1a1a;
    border: 1px solid #333;
    color: #fff;
    border-radius: 8px;
}

.zed-artist-stats-grid-analytics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.zed-chart-actions .zed-icon-btn[title="Trash"],
.zed-chart-actions .zed-icon-btn[title="Suspend"] {
    color: #ff6b6b;
}

.zed-chart-actions .zed-icon-btn[title="Restore"],
.zed-chart-actions .zed-icon-btn[title="Publish"] {
    color: #7ee2a9;
}

.zed-payout-details {
    position: relative;
}

.zed-payout-inline-form {
    margin-top: 10px;
    padding: 12px;
    background: #111;
    border: 1px solid #262626;
    border-radius: 12px;
    min-width: 260px;
}

.zed-payout-inline-form input,
.zed-payout-inline-form textarea {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px 12px;
    background: #1a1a1a;
    border: 1px solid #333;
    color: #fff;
    border-radius: 8px;
}

.zed-payout-inline-form textarea {
    min-height: 90px;
    resize: vertical;
}

/* =========================
   AVATAR / ACCOUNT UI
========================= */

.zed-account-avatar-preview {
    width: 160px;
    height: 160px;
    border-radius: 18px;
    overflow: hidden;
    background: #1a1a1a;
    border: 1px solid #2b2b2b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zed-account-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zed-helper-text {
    display: block;
    margin-top: 8px;
    color: #9d9d9d;
    font-size: 12px;
    line-height: 1.4;
}

.zed-remove-avatar-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: #d4d4d4;
    font-size: 14px;
}

.zed-remove-avatar-check input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: #ff7a00;
}

.zed-avatar-crop-modal {
    position: fixed;
    inset: 0;
    z-index: 1000001;
}

.zed-avatar-crop-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
}

.zed-avatar-crop-box {
    position: relative;
    width: min(92vw, 460px);
    margin: 6vh auto 0;
    background: #111;
    border: 1px solid #2b2b2b;
    border-radius: 18px;
    padding: 20px;
    z-index: 2;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

.zed-avatar-crop-box h3 {
    margin: 0 0 16px;
    color: #fff;
    font-size: 22px;
}

.zed-avatar-crop-stage {
    display: flex;
    justify-content: center;
    background: #111;
    border-radius: 14px;
    padding: 12px;
}

#zed-avatar-crop-canvas {
    width: 320px;
    height: 320px;
    max-width: 100%;
    cursor: grab;
    border-radius: 12px;
    background: #000;
}

#zed-avatar-crop-canvas:active {
    cursor: grabbing;
}

.zed-avatar-zoom-control {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.zed-avatar-zoom-control input {
    width: 100%;
}

.zed-avatar-preview-circle {
    width: 120px;
    height: 120px;
    margin: 20px auto;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #ff7a00;
    background: #1a1a1a;
}

.zed-avatar-preview-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zed-avatar-crop-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.zed-admin-panel-page .zed-search-form,
.zed-admin-artist-drilldown .zed-search-form {
    margin-bottom: 0;
}

.zed-admin-artist-drilldown .zed-artist-profile-hero {
    margin-bottom: 0;
}

.zed-dashboard-quick-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.zed-dashboard-highlight-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 34px;
}

.zed-dashboard-highlight-content .zed-card-actions {
    margin-top: 14px;
}

/* =========================
   ARTIST GRID
========================= */

.zed-grid,
.zed-artist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 24px;
}

.zed-artist-card {
    display: block;
    background: #151515;
    padding: 15px;
    border-radius: 12px;
    text-align: center;
    transition: transform 0.3s ease, border-color 0.3s ease;
    border: 1px solid #1f1f1f;
}

.zed-artist-card:hover {
    transform: translateY(-5px);
    border-color: #2f2f2f;
}

.zed-artist-card img {
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

.zed-artist-card h3 {
    margin: 10px 0 8px;
    color: #fff;
}

.zed-artist-card span {
    color: #ff7a00;
    font-size: 14px;
}

/* =========================
   ARTIST PROFILE
========================= */

.zed-artist-profile {
    max-width: 900px;
    margin: 0 auto;
}

.zed-artist-profile h1 {
    font-size: 40px;
    margin-bottom: 20px;
}

.zed-artist-hero {
    min-height: 300px;
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}

.zed-artist-overlay {
    background: rgba(0, 0, 0, 0.6);
    min-height: 300px;
    padding: 40px;
    color: #fff;
}

.zed-artist-overlay h1 {
    font-size: 42px;
    margin-bottom: 10px;
}

.zed-artist-tracks {
    padding: 40px 0;
}

.zed-artist-follow-meta {
    margin: 12px 0 16px;
}

.zed-follower-count {
    display: inline-block;
    color: #cfcfcf;
    font-size: 14px;
}

.zed-follow-btn {
    margin-top: 12px;
    background: #ff7a00;
    border: none;
    color: #fff;
    padding: 10px 18px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
}

.zed-follow-btn:hover {
    background: #ff8f26;
}

.zed-artist-profile-page {
    width: 100%;
}

.zed-artist-profile-hero {
    background: linear-gradient(135deg, #111 0%, #1a1a1a 55%, #2a1605 100%);
    border: 1px solid #1f1f1f;
    border-radius: 22px;
    padding: 34px;
    margin-bottom: 34px;
}

.zed-artist-profile-hero-inner {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 28px;
    align-items: center;
}

.zed-artist-profile-avatar img {
    width: 220px;
    height: 220px;
    object-fit: cover;
    border-radius: 18px;
    background: #1a1a1a;
}

.zed-artist-profile-meta h1 {
    margin: 0 0 14px;
    font-size: 44px;
    line-height: 1.05;
    color: #fff;
}

.zed-artist-profile-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 16px;
    color: #d4d4d4;
    font-size: 14px;
}

.zed-artist-profile-bio {
    margin: 0 0 18px;
    color: #c8c8c8;
    line-height: 1.7;
    max-width: 760px;
}

.zed-artist-profile-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.zed-artist-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 0 0 24px;
}

.zed-stat-card {
    background: #111;
    border: 1px solid #1f1f1f;
    border-radius: 16px;
    padding: 22px 18px;
    text-align: center;
}

.zed-stat-card strong {
    display: block;
    font-size: 30px;
    color: #fff;
    margin-bottom: 8px;
}

.zed-stat-card span {
    color: #bcbcbc;
    font-size: 14px;
}

/* =========================
   TRACK LIST / CARDS
========================= */

.zed-track-card {
    background: #151515;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    border: 1px solid #1f1f1f;
}

.zed-track-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.zed-card {
    background: #111;
    border: 1px solid #1d1d1d;
    border-radius: 18px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.zed-card:hover {
    transform: translateY(-4px);
    border-color: #2f2f2f;
    box-shadow: 0 12px 28px rgba(0,0,0,.25);
}

.zed-card-cover-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #191919;
}

.zed-card-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.zed-card-body {
    padding: 16px;
}

.zed-card-body h3 {
    margin: 0 0 8px;
    font-size: 18px;
    color: #fff;
    line-height: 1.35;
}

.zed-card-body p {
    margin: 0 0 6px;
    color: #c7c7c7;
    font-size: 14px;
}

.zed-card-body small {
    color: #9d9d9d;
    font-size: 13px;
}

/* =========================
   STREAM OVERLAY
========================= */

.zed-stream-box {
    background: #111;
    padding: 40px;
    text-align: center;
    border-radius: 10px;
    animation: fadeIn 0.4s ease;
}

.zed-stream-box h2 {
    color: white;
    margin-bottom: 20px;
}

.zed-stream-box button {
    background: #ff7a00;
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 6px;
}

.zed-stream-box button:hover {
    background: #ff8f26;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* =========================
   UPLOAD UI
========================= */

.zed-upload-box,
.zed-upload-studio,
.zed-upload-form-wrap {
    background: #111;
    padding: 30px;
    border-radius: 16px;
    max-width: 900px;
    margin: 0 auto;
    color: white;
    border: 1px solid #1f1f1f;
    box-shadow: 0 10px 30px rgba(0,0,0,.22);
}

.zed-upload-box h2,
.zed-upload-studio h2,
.zed-upload-form-wrap h2 {
    margin: 0 0 20px;
    font-size: 28px;
    color: #fff;
}

.zed-upload-form-wrap p {
    color: #cfcfcf;
}

.zed-drop-area {
    border: 2px dashed #ff7a00;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
    cursor: pointer;
    border-radius: 12px;
    background: rgba(255,122,0,.04);
}

.zed-upload-box input,
.zed-upload-box textarea,
.zed-upload-box select,
.zed-upload-studio input,
.zed-upload-studio textarea,
.zed-upload-studio select,
.zed-upload-form-wrap input,
.zed-upload-form-wrap textarea,
.zed-upload-form-wrap select {
    width: 100%;
    margin-bottom: 15px;
    padding: 12px 14px;
    background: #1c1c1c;
    border: 1px solid #333;
    color: white;
    border-radius: 10px;
}

.zed-upload-box textarea,
.zed-upload-studio textarea,
.zed-upload-form-wrap textarea {
    min-height: 120px;
    resize: vertical;
}

.zed-upload-box input:focus,
.zed-upload-box textarea:focus,
.zed-upload-box select:focus,
.zed-upload-studio input:focus,
.zed-upload-studio textarea:focus,
.zed-upload-studio select:focus,
.zed-upload-form-wrap input:focus,
.zed-upload-form-wrap textarea:focus,
.zed-upload-form-wrap select:focus {
    border-color: #ff7a00;
    box-shadow: 0 0 0 2px rgba(255,122,0,.12);
}

.zed-upload-box button,
.zed-upload-studio button,
.zed-upload-form-wrap button {
    padding: 12px 16px;
    background: #ff7a00;
    border: none;
    color: white;
    font-weight: bold;
    cursor: pointer;
    border-radius: 10px;
}

.zed-upload-box button:hover,
.zed-upload-studio button:hover,
.zed-upload-form-wrap button:hover {
    background: #ff8f26;
}

.zed-upload-submit {
    width: 100%;
    margin-top: 12px;
}

.zed-success {
    background: rgba(29,185,84,.15);
    border: 1px solid rgba(29,185,84,.35);
    color: #7ee2a9;
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: 10px;
}

.zed-error {
    background: rgba(255,90,90,.12);
    border: 1px solid rgba(255,90,90,.30);
    color: #ff9c9c;
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: 10px;
}

.zed-upload-type {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.zed-upload-type label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #171717;
    border: 1px solid #2a2a2a;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.zed-upload-type label:hover {
    border-color: #ff7a00;
    background: #1c1c1c;
}

.zed-upload-type input[type="radio"] {
    width: auto;
    margin: 0;
    accent-color: #ff7a00;
}

.zed-upload-type span {
    font-weight: 600;
    color: #fff;
}

.zed-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.zed-form-grid .zed-field-full {
    grid-column: 1 / -1;
}

.zed-field label {
    display: block;
    margin: 0 0 8px;
    color: #d6d6d6;
    font-size: 14px;
    font-weight: 600;
}

.zed-field small {
    display: block;
    margin-top: -6px;
    margin-bottom: 10px;
    color: #9d9d9d;
    font-size: 12px;
}

.zed-release-section {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid #222;
}

.zed-release-section h3 {
    margin: 0 0 16px;
    font-size: 20px;
    color: #ff9a2f;
}

.zed-release-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.zed-track-repeater {
    margin-top: 24px;
}

.zed-track-repeater-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.zed-track-repeater-head h3 {
    margin: 0;
    font-size: 22px;
    color: #fff;
}

.zed-add-track {
    width: auto !important;
    min-width: 170px;
    border-radius: 999px;
}

.zed-track-slot {
    background: #161616;
    border: 1px solid #262626;
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 16px;
}

.zed-track-slot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.zed-track-slot-title {
    margin: 0;
    font-size: 16px;
    color: #fff;
}

.zed-remove-track {
    width: auto !important;
    padding: 8px 14px !important;
    background: #232323 !important;
    border: 1px solid #363636 !important;
    color: #ddd !important;
    border-radius: 999px !important;
}

.zed-remove-track:hover {
    background: #2a2a2a !important;
    color: #fff !important;
}

.zed-track-slot-grid {
    display: grid;
    grid-template-columns: 120px 1fr 1fr;
    gap: 14px;
    align-items: end;
}

.zed-track-slot-grid .zed-field-full {
    grid-column: 1 / -1;
}

.zed-file-field input[type="file"] {
    padding: 10px;
    background: #1a1a1a;
    border: 1px dashed #3a3a3a;
    border-radius: 10px;
}

.zed-file-field input[type="file"]::file-selector-button {
    background: #ff7a00;
    border: none;
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    margin-right: 10px;
    cursor: pointer;
}

.zed-muted {
    color: #9a9a9a;
}

.zed-upload-mode {
    display: none;
}

.zed-upload-mode.is-active {
    display: block;
}

/* =========================
   NOTIFICATIONS
========================= */

.zed-note {
    padding: 10px;
    border-bottom: 1px solid #222;
}

.zed-note.unread {
    background: #1a1a1a;
    font-weight: bold;
}

.zed-bell,
.zed-bell-wrapper {
    position: relative;
}

#zed-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: #ff7a00;
    color: white;
    font-size: 11px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 20px;
    min-width: 18px;
    text-align: center;
}

.zed-bell-btn {
    background: none;
    border: none;
    color: #aaa;
    font-size: 18px;
    cursor: pointer;
}

.zed-notification-dropdown {
    display: none;
    position: absolute;
    top: 35px;
    right: 0;
    width: 300px;
    max-height: 400px;
    overflow-y: auto;
    background: #111;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.6);
    padding: 10px;
    z-index: 9999;
    border: 1px solid #222;
}

.zed-notification-dropdown.active {
    display: block;
}

.zed-note-item {
    padding: 10px;
    border-bottom: 1px solid #222;
}

.zed-note-item.unread {
    background: #1a1a1a;
    font-weight: bold;
}

/* =========================
   HOMEPAGE
========================= */

.zed-home {
    max-width: 1400px;
    margin: 0 auto;
    padding: 12px 24px 130px;
    color: #fff;
}

.zed-hero {
    background: linear-gradient(135deg, #111 0%, #1c1c1c 55%, #2a1605 100%);
    border-radius: 20px;
    padding: 70px 48px;
    margin: 20px 0 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.zed-hero-content {
    max-width: 760px;
}

.zed-hero .zed-badge,
.zed-discover-hero .zed-badge {
    display: inline-block;
    position: static;
    background: rgba(255,122,0,.15);
    color: #ff7a00;
    border: 1px solid rgba(255,122,0,.35);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    margin-bottom: 18px;
}

.zed-hero h1 {
    font-size: 54px;
    line-height: 1.05;
    margin: 0 0 18px;
    color: #fff;
}

.zed-hero p {
    font-size: 18px;
    line-height: 1.7;
    color: #d4d4d4;
    margin: 0 0 26px;
}

.zed-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.zed-btn-primary,
.zed-btn-secondary {
    display: inline-block;
    padding: 13px 22px;
    border-radius: 12px;
    font-weight: 600;
    transition: 0.2s ease;
}

.zed-btn-primary {
    background: #ff7a00;
    color: #fff;
}

.zed-btn-primary:hover {
    background: #ff8d26;
    color: #fff;
}

.zed-btn-secondary {
    background: #1a1a1a;
    color: #fff;
    border: 1px solid #2b2b2b;
}

.zed-btn-secondary:hover {
    background: #242424;
    color: #fff;
}

.zed-section {
    margin-bottom: 46px;
}

.zed-section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.zed-section-head h2 {
    margin: 0;
    font-size: 34px;
    color: #ff9a2f;
}

.zed-section-head span {
    color: #9b9b9b;
    font-size: 14px;
}

.zed-home-chart-blocks {
    width: 100%;
}

.zed-home-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.zed-home-highlight-card {
    background: #111;
    border: 1px solid #1f1f1f;
    border-radius: 18px;
    padding: 20px;
}

.zed-home-highlight-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.zed-home-highlight-link:hover {
    color: inherit;
}

.zed-home-highlight-cover {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 14px;
    background: #1a1a1a;
    margin-bottom: 16px;
}

.zed-home-highlight-card h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 22px;
}

.zed-home-highlight-card p {
    margin: 0;
    color: #bdbdbd;
    line-height: 1.6;
}

.zed-cta-box {
    background: linear-gradient(135deg, #151515 0%, #211100 100%);
    border: 1px solid #2b1a0a;
    border-radius: 20px;
    padding: 36px;
    text-align: center;
}

.zed-cta-box h2 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 32px;
}

.zed-cta-box p {
    margin: 0 0 18px;
    color: #cfcfcf;
}

/* =========================
   DISCOVER PAGE
========================= */

.zed-discover {
    max-width: 1400px;
    margin: 0 auto;
    padding: 12px 24px 130px;
    color: #fff;
}

.zed-discover-hero {
    background: linear-gradient(135deg, #121212 0%, #1b1b1b 60%, #1d0f02 100%);
    border-radius: 20px;
    padding: 56px 42px;
    margin: 20px 0 36px;
    box-shadow: 0 10px 30px rgba(0,0,0,.22);
}

.zed-discover-hero-content {
    max-width: 720px;
}

.zed-discover-hero h1 {
    margin: 0 0 14px;
    font-size: 48px;
    color: #fff;
}

.zed-discover-hero p {
    margin: 0;
    color: #d2d2d2;
    font-size: 17px;
    line-height: 1.7;
}

/* =========================
   RELEASE / TRACK PAGE
========================= */

.zed-track-page,
.zed-release-page {
    width: 100%;
}

.zed-release-hero {
    background: linear-gradient(135deg, #111 0%, #1a1a1a 55%, #241303 100%);
    border: 1px solid #1f1f1f;
    border-radius: 22px;
    padding: 32px;
    margin-bottom: 34px;
}

.zed-release-hero-inner {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 30px;
    align-items: center;
}

.zed-release-cover img {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 18px;
    background: #1a1a1a;
}

.zed-playlist-cover-wrap,
.zed-playlist-cover-large {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1b1b1b 0%, #2b1707 100%);
    color: #ff9a2f;
    font-weight: 700;
    letter-spacing: .5px;
}

.zed-playlist-cover-fallback {
    width: 100%;
    height: 100%;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zed-playlist-cover-large {
    min-height: 300px;
    border-radius: 18px;
}

.zed-release-meta h1 {
    margin: 0 0 12px;
    font-size: 44px;
    line-height: 1.05;
    color: #fff;
}

.zed-release-artist-line {
    margin: 0 0 14px;
    color: #d7d7d7;
    font-size: 18px;
}

.zed-release-info {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 18px;
    color: #a9a9a9;
    font-size: 14px;
}

.zed-release-description {
    color: #cfcfcf;
    line-height: 1.7;
    margin-bottom: 18px;
}

.zed-release-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.zed-release-play-all {
    width: auto !important;
}

.zed-release-actions a.zed-share-btn {
    display: inline-flex;
    text-decoration: none;
}

.zed-release-tracklist {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.zed-release-track-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    background: #111;
    border: 1px solid #1e1e1e;
    border-radius: 16px;
    padding: 14px 16px;
}

.zed-release-track-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}

.zed-release-track-number {
    width: 26px;
    color: #9a9a9a;
    font-size: 14px;
    text-align: center;
    flex-shrink: 0;
}

.zed-release-track-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 10px;
    background: #1a1a1a;
    flex-shrink: 0;
}

.zed-release-track-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.zed-release-track-meta strong {
    color: #fff;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zed-release-track-meta span {
    color: #b9b9b9;
    font-size: 14px;
    line-height: 1.4;
}

.zed-release-track-right {
    flex-shrink: 0;
}

.zed-release-card-link,
.zed-release-card-anchor {
    display: block;
    color: inherit;
}

.zed-release-card-link:hover,
.zed-release-card-anchor:hover {
    color: inherit;
}

/* =========================
   SEARCH
========================= */

.zed-search-page {
    width: 100%;
}

.zed-search-hero {
    background: linear-gradient(135deg, #111 0%, #1a1a1a 55%, #201104 100%);
    border: 1px solid #1f1f1f;
    border-radius: 22px;
    padding: 30px 28px;
    margin-bottom: 28px;
}

.zed-search-hero-content {
    max-width: 760px;
}

.zed-search-hero h1 {
    margin: 0 0 10px;
    font-size: 42px;
    line-height: 1.05;
    color: #fff;
}

.zed-search-hero p {
    margin: 0;
    color: #cfcfcf;
    line-height: 1.7;
}

.zed-search-form {
    background: #111;
    border: 1px solid #1f1f1f;
    border-radius: 18px;
    padding: 20px;
    margin-bottom: 30px;
}

.zed-search-form-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 14px;
    align-items: end;
}

.zed-search-form .zed-field {
    margin: 0;
}

.zed-search-form label {
    display: block;
    margin: 0 0 8px;
    color: #d2d2d2;
    font-size: 14px;
    font-weight: 600;
}

.zed-search-form input,
.zed-search-form select {
    width: 100%;
    padding: 12px 14px;
    background: #1a1a1a;
    border: 1px solid #333;
    color: #fff;
    border-radius: 10px;
}

.zed-search-form input:focus,
.zed-search-form select:focus {
    border-color: #ff7a00;
    box-shadow: 0 0 0 2px rgba(255,122,0,.12);
}

.zed-search-submit-wrap .zed-btn-primary {
    width: auto;
    min-width: 140px;
}

/* =========================
   PLAYLISTS
========================= */

.zed-playlist-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

/* =========================
   PLAYLIST MODAL
========================= */

.zed-save-track-btn {
    margin-top: 0;
}

#zed-playlist-modal {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: none;
}

#zed-playlist-modal.active {
    display: block;
}

.zed-playlist-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.72);
}

.zed-playlist-modal-box {
    position: relative;
    width: min(92vw, 460px);
    margin: 10vh auto 0;
    background: #111;
    border: 1px solid #262626;
    border-radius: 18px;
    padding: 22px;
    z-index: 2;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
}

.zed-playlist-modal-box h3 {
    margin: 0 0 16px;
    color: #fff;
    font-size: 24px;
}

.zed-playlist-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: auto !important;
    background: transparent !important;
    color: #fff !important;
    border: none !important;
    font-size: 18px;
    cursor: pointer;
    padding: 6px 10px !important;
}

#zed-playlist-modal-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.zed-playlist-option {
    width: 100%;
    text-align: left;
    background: #181818 !important;
    border: 1px solid #2b2b2b !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    color: #fff !important;
}

.zed-playlist-option small {
    color: #bcbcbc;
    font-size: 12px;
}

.zed-playlist-option.is-saved {
    border-color: #ff7a00 !important;
}

.zed-playlist-modal-actions {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
}

/* =========================
   AUTH
========================= */

.zed-auth-wrap {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

.zed-auth-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.zed-auth-card {
    background: #111;
    border: 1px solid #1f1f1f;
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 10px 30px rgba(0,0,0,.22);
}

.zed-auth-card h2 {
    margin: 0 0 20px;
    color: #fff;
    font-size: 28px;
}

.zed-auth-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.zed-auth-form label {
    color: #d4d4d4;
    font-size: 14px;
    font-weight: 600;
}

.zed-auth-form input,
.zed-auth-form select {
    width: 100%;
    padding: 12px 14px;
    background: #1a1a1a;
    border: 1px solid #333;
    color: #fff;
    border-radius: 10px;
}

.zed-auth-form input:focus,
.zed-auth-form select:focus {
    border-color: #ff7a00;
    box-shadow: 0 0 0 2px rgba(255,122,0,.12);
}

.zed-auth-form button {
    margin-top: 8px;
    background: #ff7a00;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 16px;
    font-weight: 700;
    cursor: pointer;
}

.zed-auth-form button:hover {
    background: #ff8f26;
}

/* =========================
   ACCOUNT SETTINGS
========================= */

.zed-account-settings-wrap {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.zed-account-settings-card {
    background: #111;
    border: 1px solid #1f1f1f;
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 10px 30px rgba(0,0,0,.22);
}

.zed-account-settings-card h2 {
    margin: 0 0 22px;
    color: #fff;
    font-size: 30px;
}

.zed-account-settings-form .zed-field label {
    display: block;
    margin: 0 0 8px;
    color: #d4d4d4;
    font-size: 14px;
    font-weight: 600;
}

.zed-account-settings-form input,
.zed-account-settings-form textarea,
.zed-account-settings-form select {
    width: 100%;
    padding: 12px 14px;
    background: #1a1a1a;
    border: 1px solid #333;
    color: #fff;
    border-radius: 10px;
}

.zed-account-settings-form textarea {
    min-height: 130px;
    resize: vertical;
}

.zed-account-settings-form input:focus,
.zed-account-settings-form textarea:focus,
.zed-account-settings-form select:focus {
    border-color: #ff7a00;
    box-shadow: 0 0 0 2px rgba(255,122,0,.12);
}

.zed-account-settings-form input[readonly] {
    opacity: .8;
    cursor: not-allowed;
}

/* =========================
   CHARTS
========================= */

.zed-charts-page {
    width: 100%;
}

.zed-charts-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 24px;
}

.zed-charts-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: #151515;
    border: 1px solid #2b2b2b;
    color: #d8d8d8;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.zed-charts-filter:hover,
.zed-charts-filter.is-active {
    background: rgba(255,122,0,0.12);
    border-color: #ff7a00;
    color: #ff9a2f;
}

.zed-chart-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.zed-chart-row {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto auto;
    gap: 14px;
    align-items: center;
    background: #111;
    border: 1px solid #1f1f1f;
    border-radius: 16px;
    padding: 14px 16px;
}

.zed-chart-rank {
    font-size: 22px;
    font-weight: 700;
    color: #ff9a2f;
    text-align: center;
}

.zed-chart-main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.zed-chart-cover {
    width: 58px;
    height: 58px;
    object-fit: cover;
    border-radius: 10px;
    background: #1a1a1a;
    flex-shrink: 0;
}

.zed-chart-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.zed-chart-meta strong {
    color: #fff;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zed-chart-meta span {
    color: #b9b9b9;
    font-size: 14px;
    line-height: 1.4;
}

.zed-chart-stats {
    color: #bdbdbd;
    font-size: 14px;
    white-space: nowrap;
}

.zed-chart-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.zed-chart-link-row {
    color: inherit;
    text-decoration: none;
}

.zed-chart-link-row:hover {
    color: inherit;
    border-color: #2f2f2f;
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
}

.zed-chart-actions .zed-icon-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
}

.zed-chart-actions form {
    display: inline-block;
    margin: 0;
}

.zed-chart-actions form button {
    background: #151515;
    color: #ff7a00;
    border: 1px solid #2f2f2f;
}

.zed-chart-actions form button:hover {
    background: rgba(255,122,0,0.12);
    border-color: #ff7a00;
    color: #ff9a2f;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1100px) {
    .zed-track-grid,
    .zed-artist-grid,
    .zed-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .zed-playlist-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .zed-hero h1 {
        font-size: 44px;
    }

    .zed-discover-hero h1 {
        font-size: 40px;
    }

    .zed-artist-stats-grid-analytics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    #zed-header.zed-header {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "logo actions"
            "search search";
        gap: 10px;
        padding: 12px 14px;
    }

    .zed-header-left {
        grid-area: logo;
    }

    .zed-header-right {
        grid-area: actions;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 10px;
    }

    .zed-header-center {
        grid-area: search;
        width: 100%;
        justify-content: stretch;
    }

    .zed-search {
        width: 100%;
        max-width: 100%;
    }

    body.zed-header-active {
        padding-top: 118px !important;
        padding-bottom: 96px !important;
    }

    .zed-main {
        padding: 18px 14px;
    }

    .zed-auth-grid {
        grid-template-columns: 1fr;
    }

    .zed-search-form-grid {
        grid-template-columns: 1fr 1fr;
    }

    .zed-search-submit-wrap {
        grid-column: 1 / -1;
    }

    .zed-search-submit-wrap .zed-btn-primary {
        width: 100%;
    }

    .zed-search-hero h1 {
        font-size: 32px;
    }

    .zed-release-hero {
        padding: 22px 18px;
        border-radius: 18px;
    }

    .zed-release-hero-inner {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .zed-release-cover img {
        max-width: 220px;
    }

    .zed-release-meta h1 {
        font-size: 32px;
    }

    .zed-artist-profile-hero {
        padding: 22px 18px;
        border-radius: 18px;
    }

    .zed-artist-profile-hero-inner {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .zed-artist-profile-avatar img {
        width: 140px;
        height: 140px;
    }

    .zed-artist-profile-meta h1 {
        font-size: 32px;
    }

    .zed-artist-stats-grid,
    .zed-artist-stats-grid-analytics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .zed-upload-box,
    .zed-upload-studio,
    .zed-upload-form-wrap {
        padding: 22px 16px;
        border-radius: 14px;
    }

    .zed-form-grid,
    .zed-release-meta,
    .zed-track-slot-grid,
    .zed-upload-type,
    .zed-dashboard-highlight-grid,
    .zed-home-chart-grid {
        grid-template-columns: 1fr;
    }

    .zed-track-slot {
        padding: 16px;
    }

    .zed-track-repeater-head {
        align-items: stretch;
    }

    .zed-add-track {
        width: 100% !important;
    }

    .zed-track-grid,
    .zed-artist-grid,
    .zed-grid,
    .zed-playlist-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .zed-home,
    .zed-discover {
        padding: 12px 14px 120px;
    }

    .zed-hero,
    .zed-discover-hero {
        padding: 28px 20px;
        margin: 12px 0 28px;
        border-radius: 18px;
    }

    .zed-hero h1,
    .zed-discover-hero h1 {
        font-size: 32px;
        line-height: 1.1;
    }

    .zed-hero p,
    .zed-discover-hero p {
        font-size: 16px;
        line-height: 1.6;
    }

    .zed-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .zed-btn-primary,
    .zed-btn-secondary {
        text-align: center;
    }

    .zed-card-body {
        padding: 12px;
    }

    .zed-card-body h3 {
        font-size: 16px;
    }

    .zed-card-body p,
    .zed-card-body small {
        font-size: 13px;
    }

    .zed-section {
        margin-bottom: 34px;
    }

    .zed-section-head h2 {
        font-size: 28px;
    }

    #zed-cover-large {
        width: 200px;
    }
}

@media (max-width: 640px) {
    .zed-release-track-row {
        flex-direction: column;
        align-items: stretch;
    }

    .zed-release-track-right {
        width: 100%;
    }

    .zed-release-track-right .zed-play-btn {
        width: 100%;
        min-width: 0;
        height: 44px;
        border-radius: 12px;
        position: static;
    }

    .zed-search-form-grid {
        grid-template-columns: 1fr;
    }

    .zed-search-hero {
        padding: 22px 18px;
        border-radius: 18px;
    }
}

@media (max-width: 560px) {
    .zed-track-grid,
    .zed-artist-grid,
    .zed-grid,
    .zed-playlist-grid,
    .zed-artist-stats-grid,
    .zed-artist-stats-grid-analytics {
        grid-template-columns: 1fr;
    }

    .zed-logo {
        font-size: 18px;
    }

    .zed-header-right a {
        font-size: 13px;
    }

    .zed-btn {
        padding: 7px 12px;
    }

    .zed-mini {
        min-height: 68px;
        padding: 10px 12px;
    }

    .zed-controls button {
        font-size: 18px;
        margin: 6px;
    }

    .zed-full {
        padding: 18px 14px 110px;
    }

    .zed-time,
    #zed-progress {
        width: 100%;
    }

    .zed-main {
        padding: 14px 12px;
    }

    .zed-icon-btn,
    .zed-download-btn,
    .zed-card-mini-btn,
    .zed-card-actions .zed-like-btn,
    .zed-card-actions .zed-share-btn,
    .zed-card-actions .zed-save-track-btn {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        font-size: 14px;
    }

    .zed-play-btn,
    .zed-release-main-play {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }

    .zed-release-icon-actions .zed-icon-btn,
    .zed-release-icon-actions .zed-download-btn,
    .zed-release-icon-actions .zed-like-btn,
    .zed-release-icon-actions .zed-share-btn,
    .zed-release-icon-actions .zed-save-track-btn,
    .zed-chart-actions .zed-icon-btn {
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
        font-size: 14px;
    }

    .zed-analytics-chart-card {
        min-height: 260px;
        padding: 14px;
    }

    .zed-analytics-chart {
        height: 220px !important;
    }

    .zed-chart-row {
        padding: 12px;
    }

    .zed-chart-cover {
        width: 50px;
        height: 50px;
    }

    .zed-chart-rank {
        font-size: 18px;
    }
}

@media (max-width: 800px) {
    .zed-chart-row {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .zed-chart-stats,
    .zed-chart-actions {
        grid-column: 2;
    }

    .zed-chart-actions {
        justify-content: flex-start;
    }
}