/* =========================================================
   AMAZING MUSIC THEME ENGINE V7
   Final cascade layer. Load AFTER app.css and page styles may
   still use var(--*) automatically.
   ========================================================= */

:root{
  --bg:#070915;
  --bg-soft:#0d1020;
  --panel:#111526;
  --panel2:#181d31;
  --panel3:#202740;
  --text:#f7f8ff;
  --muted:#aeb7d1;
  --border:rgba(158,170,215,.16);
  --accent:#7c5cff;
  --accent2:#22d3ee;
  --input-bg:#0d1120;
  --input-text:#f7f8ff;
  --nav-bg:rgba(7,9,21,.94);
  --footer-bg:#0b0e1b;
  --shadow:0 18px 55px rgba(0,0,0,.16);
  --soft-shadow:0 10px 30px rgba(0,0,0,.10);
  --radius:22px;
}

html.theme-dark-neon, body.theme-dark-neon{
  --bg:#070915;
  --bg-soft:#0d1020;
  --panel:#111526;
  --panel2:#181d31;
  --panel3:#202740;
  --text:#f7f8ff;
  --muted:#aeb7d1;
  --border:rgba(158,170,215,.16);
  --accent:#7c5cff;
  --accent2:#22d3ee;
  --input-bg:#0d1120;
  --input-text:#f7f8ff;
  --nav-bg:rgba(7,9,21,.94);
  --footer-bg:#0b0e1b;
}

html.theme-dark-carbon, body.theme-dark-carbon{
  --bg:#0b0c0e;
  --bg-soft:#101215;
  --panel:#15181c;
  --panel2:#1d2126;
  --panel3:#252b31;
  --text:#f7f7f5;
  --muted:#a9adb2;
  --border:rgba(255,255,255,.11);
  --accent:#ff6b35;
  --accent2:#ffb020;
  --input-bg:#0f1114;
  --input-text:#f7f7f5;
  --nav-bg:rgba(11,12,14,.95);
  --footer-bg:#101215;
}

html.theme-dark-purple, body.theme-dark-purple{
  --bg:#0d0715;
  --bg-soft:#160d21;
  --panel:#1a1028;
  --panel2:#261738;
  --panel3:#342048;
  --text:#fff7ff;
  --muted:#c5aacd;
  --border:rgba(235,190,255,.14);
  --accent:#c026d3;
  --accent2:#8b5cf6;
  --input-bg:#12091c;
  --input-text:#fff7ff;
  --nav-bg:rgba(13,7,21,.95);
  --footer-bg:#130b1d;
}

html.theme-midnight, body.theme-midnight{
  --bg:#08111d;
  --bg-soft:#0d1927;
  --panel:#102034;
  --panel2:#172a40;
  --panel3:#20354d;
  --text:#f2f8ff;
  --muted:#9db0c7;
  --border:rgba(151,190,226,.15);
  --accent:#3b82f6;
  --accent2:#14b8a6;
  --input-bg:#0c1725;
  --input-text:#f2f8ff;
  --nav-bg:rgba(8,17,29,.95);
  --footer-bg:#0b1725;
}

html.theme-slate, body.theme-slate{
  --bg:#11151b;
  --bg-soft:#171c24;
  --panel:#1c232d;
  --panel2:#252e3a;
  --panel3:#303b49;
  --text:#f5f7fa;
  --muted:#a9b4c2;
  --border:rgba(196,210,229,.13);
  --accent:#64748b;
  --accent2:#38bdf8;
  --input-bg:#151a21;
  --input-text:#f5f7fa;
  --nav-bg:rgba(17,21,27,.95);
  --footer-bg:#171c24;
}

html.theme-emerald, body.theme-emerald{
  --bg:#071410;
  --bg-soft:#0b1d17;
  --panel:#0e251d;
  --panel2:#153128;
  --panel3:#1b4033;
  --text:#f1fff9;
  --muted:#9dc8b6;
  --border:rgba(119,218,175,.15);
  --accent:#10b981;
  --accent2:#22d3ee;
  --input-bg:#091b15;
  --input-text:#f1fff9;
  --nav-bg:rgba(7,20,16,.95);
  --footer-bg:#0a1b15;
}

html.theme-light-clean, body.theme-light-clean{
  --bg:#f6f7fb;
  --bg-soft:#eef1f7;
  --panel:#ffffff;
  --panel2:#f0f2f7;
  --panel3:#e8ebf2;
  --text:#171923;
  --muted:#697386;
  --border:rgba(22,28,45,.12);
  --accent:#4f46e5;
  --accent2:#0ea5e9;
  --input-bg:#ffffff;
  --input-text:#171923;
  --nav-bg:rgba(255,255,255,.96);
  --footer-bg:#eef1f7;
}

html.theme-light-blue, body.theme-light-blue{
  --bg:#eef7ff;
  --bg-soft:#e5f2ff;
  --panel:#ffffff;
  --panel2:#e8f3ff;
  --panel3:#dcedff;
  --text:#10233f;
  --muted:#5e718a;
  --border:rgba(28,72,120,.13);
  --accent:#2563eb;
  --accent2:#06b6d4;
  --input-bg:#ffffff;
  --input-text:#10233f;
  --nav-bg:rgba(247,252,255,.96);
  --footer-bg:#e9f5ff;
}

html.theme-light-rose, body.theme-light-rose{
  --bg:#fff4f7;
  --bg-soft:#ffedf2;
  --panel:#ffffff;
  --panel2:#ffe8ef;
  --panel3:#ffdde7;
  --text:#34131e;
  --muted:#815866;
  --border:rgba(122,45,69,.14);
  --accent:#e11d48;
  --accent2:#f97316;
  --input-bg:#ffffff;
  --input-text:#34131e;
  --nav-bg:rgba(255,249,251,.97);
  --footer-bg:#fff0f4;
}

html.theme-light-gold, body.theme-light-gold{
  --bg:#fffaf0;
  --bg-soft:#fff5de;
  --panel:#ffffff;
  --panel2:#fff2cf;
  --panel3:#ffe9ae;
  --text:#332611;
  --muted:#7b6a4a;
  --border:rgba(130,95,30,.15);
  --accent:#b7791f;
  --accent2:#d97706;
  --input-bg:#ffffff;
  --input-text:#332611;
  --nav-bg:rgba(255,252,245,.97);
  --footer-bg:#fff4dc;
}

html.theme-light-mint, body.theme-light-mint{
  --bg:#effcf7;
  --bg-soft:#e3f8ef;
  --panel:#ffffff;
  --panel2:#e5f7ef;
  --panel3:#d6f0e5;
  --text:#15372c;
  --muted:#5e7e73;
  --border:rgba(40,116,91,.14);
  --accent:#059669;
  --accent2:#14b8a6;
  --input-bg:#ffffff;
  --input-text:#15372c;
  --nav-bg:rgba(248,255,252,.97);
  --footer-bg:#e8f8f1;
}

html.theme-light-lavender, body.theme-light-lavender{
  --bg:#f7f3ff;
  --bg-soft:#efe8ff;
  --panel:#ffffff;
  --panel2:#f0eaff;
  --panel3:#e6dcff;
  --text:#2d2148;
  --muted:#75678d;
  --border:rgba(91,68,139,.14);
  --accent:#7c3aed;
  --accent2:#c026d3;
  --input-bg:#ffffff;
  --input-text:#2d2148;
  --nav-bg:rgba(252,250,255,.97);
  --footer-bg:#f1ebff;
}

html.theme-light-peach, body.theme-light-peach{
  --bg:#fff6f1;
  --bg-soft:#ffebe1;
  --panel:#ffffff;
  --panel2:#ffede5;
  --panel3:#ffe0d3;
  --text:#40231a;
  --muted:#88665b;
  --border:rgba(146,78,55,.14);
  --accent:#ea580c;
  --accent2:#f43f5e;
  --input-bg:#ffffff;
  --input-text:#40231a;
  --nav-bg:rgba(255,251,248,.97);
  --footer-bg:#fff0e8;
}

html.theme-light-aqua, body.theme-light-aqua{
  --bg:#effcfd;
  --bg-soft:#e1f7f9;
  --panel:#ffffff;
  --panel2:#e4f8fa;
  --panel3:#d5f0f3;
  --text:#12363a;
  --muted:#5b7c80;
  --border:rgba(31,111,120,.14);
  --accent:#0891b2;
  --accent2:#22c55e;
  --input-bg:#ffffff;
  --input-text:#12363a;
  --nav-bg:rgba(248,255,255,.97);
  --footer-bg:#e7f8fa;
}

html.theme-light-sky, body.theme-light-sky{
  --bg:#f1f8ff;
  --bg-soft:#e6f2ff;
  --panel:#ffffff;
  --panel2:#eaf4ff;
  --panel3:#dcecff;
  --text:#122d4d;
  --muted:#60758d;
  --border:rgba(36,91,153,.14);
  --accent:#0284c7;
  --accent2:#6366f1;
  --input-bg:#ffffff;
  --input-text:#122d4d;
  --nav-bg:rgba(249,253,255,.97);
  --footer-bg:#eaf5ff;
}

html.theme-light-ivory, body.theme-light-ivory{
  --bg:#fffdf7;
  --bg-soft:#f9f4e8;
  --panel:#ffffff;
  --panel2:#f8f1df;
  --panel3:#f1e7cf;
  --text:#332d22;
  --muted:#776e5d;
  --border:rgba(107,91,58,.15);
  --accent:#8b5e34;
  --accent2:#c58b36;
  --input-bg:#ffffff;
  --input-text:#332d22;
  --nav-bg:rgba(255,254,250,.97);
  --footer-bg:#faf4e6;
}


/* ---------- document / scrollbar ---------- */
html,body{
    background:var(--bg) !important;
    color:var(--text) !important;
    accent-color:var(--accent);
    transition:background-color .28s ease,color .28s ease;
}
body{
    background:
        radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent2) 8%,transparent),transparent 32%),
        radial-gradient(circle at 0% 45%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 30%),
        var(--bg) !important;
}
html{
    scrollbar-color:var(--accent) var(--bg-soft);
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg-soft) !important}
::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,var(--accent),var(--accent2)) !important;
    border:2px solid var(--bg-soft) !important;
    border-radius:999px;
}
::selection{background:color-mix(in srgb,var(--accent) 28%,transparent);color:var(--text)}

/* ---------- global text ---------- */
body,
body p,
body li,
body td,
body th,
body label,
body strong,
body b,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6{
    color:var(--text);
}
.muted,
small.muted,
.meta,
.home-meta,
.video-meta,
.user-video-meta,
.footer p,
.footer small,
.settings-subtitle{
    color:var(--muted) !important;
}
.eyebrow,
.home-kicker,
.home-section .eyebrow,
.video-eyebrow,
.video-manager-eyebrow,
.track-eyebrow,
.track-section-label,
.profile-section-label,
.cl-eye,
.ad-eye{
    color:var(--accent) !important;
    -webkit-text-fill-color:var(--accent) !important;
}

/* ---------- header / nav ---------- */
.topbar{
    background:var(--nav-bg) !important;
    border-color:var(--border) !important;
    color:var(--text) !important;
    box-shadow:0 8px 28px color-mix(in srgb,var(--text) 6%,transparent) !important;
    backdrop-filter:blur(20px);
}
.brand,
.brand b,
.nav a,
.top-actions,
.top-actions a{
    color:var(--text) !important;
}
.brand small{color:var(--muted) !important}
.brand-mark,
.avatar-mini{
    background:linear-gradient(135deg,var(--accent),var(--accent2)) !important;
    color:#fff !important;
    box-shadow:0 10px 28px color-mix(in srgb,var(--accent) 24%,transparent) !important;
}
.site-logo{
    border-color:color-mix(in srgb,var(--accent) 30%,var(--border)) !important;
    background:color-mix(in srgb,var(--panel) 90%,transparent) !important;
}
.nav a:hover,
.nav a.active{
    color:var(--accent) !important;
}
.header-search-form,
.search-drawer,
.autocomplete-wrap,
.suggest-box{
    background:var(--panel) !important;
    border-color:var(--border) !important;
    color:var(--text) !important;
}
.header-search-form input,
.header-search-form button,
.lang-select,
.icon-btn{
    color:var(--text) !important;
    background:var(--panel2) !important;
    border-color:var(--border) !important;
}

/* ---------- shell / dashboard ---------- */
.shell,
.dashboard,
.dashboard>section{
    color:var(--text);
}
.dashboard{
    background:transparent !important;
}
.dashboard > aside,
.dashboard nav,
.dashboard .side-nav,
.admin-nav,
.user-nav{
    background:var(--panel) !important;
    border-color:var(--border) !important;
    color:var(--text) !important;
}
.dashboard a{color:var(--text)}
.dashboard a:hover{color:var(--accent)}

/* ---------- universal panels/cards ---------- */
.card,
.form-card,
.home-card,
.home-section,
.home-hero,
.home-rights,
.hero,
.hero-card,
.profile-hero,
.profile-card,
.settings-card,
.video-card,
.video-manager-hero,
.video-editor,
.user-video-card,
.music-card,
.artist-card,
.creator-card,
.classified-card,
.cl-card,
.cl-editor,
.cl-history,
.track-hero,
.track-description,
.related-card,
.queue-player-card,
.queue-side,
.ad-hero,
.ad-card,
.ad-related-card,
.footer-pro,
.footer{
    border-color:var(--border) !important;
    color:var(--text) !important;
}
.card,
.form-card,
.home-card,
.video-card,
.user-video-card,
.music-card,
.artist-card,
.creator-card,
.classified-card,
.cl-card,
.related-card,
.queue-player-card,
.queue-side,
.ad-card,
.ad-related-card{
    background:
        linear-gradient(145deg,var(--panel),var(--panel2)) !important;
    box-shadow:var(--soft-shadow) !important;
}
.home-section,
.home-hero,
.home-rights,
.hero,
.hero-card,
.profile-hero,
.profile-card,
.settings-card,
.video-manager-hero,
.video-editor,
.cl-editor,
.cl-history,
.track-hero,
.track-description,
.ad-hero{
    background:
        radial-gradient(circle at 95% 5%,color-mix(in srgb,var(--accent2) 8%,transparent),transparent 28%),
        radial-gradient(circle at 5% 95%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 30%),
        linear-gradient(145deg,var(--panel),var(--panel2)) !important;
    box-shadow:var(--shadow) !important;
}

/* all card text */
.card h1,.card h2,.card h3,
.form-card h1,.form-card h2,.form-card h3,
.home-card h3,.home-section h1,.home-section h2,.home-section h3,
.video-card h3,.user-video-card h3,
.music-card h3,.artist-card h3,.creator-card h3,
.classified-card h3,.cl-card h3,
.track-hero h1,.track-description h2,.related-card h3,
.ad-hero h1,.ad-card h2,.ad-card h3,
.footer h3,.footer b{
    color:var(--text) !important;
}

/* ---------- inputs ---------- */
input,
select,
textarea,
.field input,
.field select,
.field textarea,
.video-filter input,
.video-filter select,
.cl-search input,
.share-row input{
    background:var(--input-bg) !important;
    color:var(--input-text) !important;
    border-color:var(--border) !important;
    caret-color:var(--accent);
}
input::placeholder,
textarea::placeholder{
    color:color-mix(in srgb,var(--muted) 78%,transparent) !important;
}
input:focus,
select:focus,
textarea:focus{
    outline:none !important;
    border-color:color-mix(in srgb,var(--accent) 58%,var(--border)) !important;
    box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 10%,transparent) !important;
}

/* ---------- buttons ---------- */
.btn.primary,
button.primary,
.save-all-btn,
.sticky-save-btn,
.queue-fab,
.ad-action.primary,
.track-action.active,
.qbtn.primary,
.qbtn.active{
    background:linear-gradient(135deg,var(--accent),var(--accent2)) !important;
    color:#fff !important;
    border-color:transparent !important;
    box-shadow:0 10px 28px color-mix(in srgb,var(--accent) 22%,transparent) !important;
}
.btn.ghost,
.btn:not(.primary):not(.danger),
.ad-action:not(.primary),
.track-action,
.qbtn:not(.primary):not(.active){
    background:var(--panel2) !important;
    color:var(--text) !important;
    border-color:var(--border) !important;
}
.btn:hover,
.ad-action:hover,
.track-action:hover,
.qbtn:hover{
    border-color:color-mix(in srgb,var(--accent) 46%,var(--border)) !important;
    transform:translateY(-1px);
}

/* ---------- badges / pills / statuses ---------- */
.badge,
.pill,
.status,
.track-pill,
.ad-pill,
.queue-badge,
.media-state,
.home-badge{
    background:var(--panel2) !important;
    color:var(--text) !important;
    border-color:var(--border) !important;
}
.home-play,
.video-card-play,
.related-play{
    background:linear-gradient(135deg,var(--accent),var(--accent2)) !important;
    color:#fff !important;
}

/* ---------- tables ---------- */
.table-wrap,
.cl-table-wrap{
    border-color:var(--border) !important;
    background:var(--panel) !important;
}
.table,
.cl-table{
    background:var(--panel) !important;
    color:var(--text) !important;
}
.table th,
.cl-table th{
    background:var(--panel2) !important;
    color:var(--muted) !important;
    border-color:var(--border) !important;
}
.table td,
.cl-table td{
    background:transparent !important;
    color:var(--text) !important;
    border-color:var(--border) !important;
}

/* ---------- footer ---------- */
.footer,
.footer-pro{
    background:
        linear-gradient(180deg,var(--footer-bg),var(--bg-soft)) !important;
    border-color:var(--border) !important;
    color:var(--text) !important;
}
.footer a,
.footer-col a{
    color:var(--muted) !important;
}
.footer a:hover,
.footer-col a:hover{
    color:var(--accent) !important;
}
.copyright-strip{
    border-color:var(--border) !important;
    color:var(--muted) !important;
}

/* ---------- ambient ---------- */
.ambient{
    opacity:.22 !important;
    filter:blur(70px) !important;
}
.a1{background:var(--accent) !important}
.a2{background:var(--accent2) !important}

/* ---------- special home/theme safety ---------- */
.home-page,
.videos-page,
.music-page,
.artists-page,
.classified-page,
.track-page,
.ad-page{
    color:var(--text) !important;
}
.home-section-head a,
.home-more,
.section-head a{
    color:var(--muted) !important;
}
.home-section-head a:hover,
.home-more:hover,
.section-head a:hover{
    color:var(--accent) !important;
}

/* ---------- theme design profiles ---------- */
body.design-compact .card,
body.design-compact .form-card,
body.design-compact .home-section,
body.design-compact .profile-card{
    border-radius:14px !important;
}
body.design-round .card,
body.design-round .form-card,
body.design-round .home-section,
body.design-round .profile-card{
    border-radius:28px !important;
}
body.design-cinema .shell{
    width:min(1700px,100%) !important;
}
body.design-cinema .card{
    box-shadow:0 20px 60px color-mix(in srgb,var(--text) 10%,transparent) !important;
}

/* ---------- 10 light themes: guarantee browser-native widgets light ---------- */
html[class*="theme-light-"],
body[class*="theme-light-"]{
    color-scheme:light;
}
html[class*="theme-light-"] .topbar,
body[class*="theme-light-"] .topbar{
    box-shadow:0 8px 28px rgba(30,41,59,.08) !important;
}
html[class*="theme-light-"] .card,
body[class*="theme-light-"] .card,
html[class*="theme-light-"] .form-card,
body[class*="theme-light-"] .form-card{
    box-shadow:0 14px 40px rgba(30,41,59,.08) !important;
}

/* ---------- responsive header ---------- */
.header-search-desktop{
    flex:1;
    max-width:820px;
    min-width:220px;
    margin:0 18px;
}
.header-search-form{
    position:relative;
    display:flex;
    width:100%;
    min-height:48px;
    overflow:visible;
    border:1px solid var(--border);
    border-radius:999px;
}
.header-search-form input{
    flex:1;
    min-width:0;
    padding:0 18px;
    border:0 !important;
    border-radius:999px 0 0 999px;
}
.header-search-form button{
    width:62px;
    border:0 !important;
    border-left:1px solid var(--border) !important;
    border-radius:0 999px 999px 0;
    cursor:pointer;
}
.header-search-form .suggest-box{
    position:absolute;
    z-index:9999;
    left:0;
    right:0;
    top:calc(100% + 7px);
}
.mobile-search-btn{display:none}
@media(max-width:900px){
    .header-search-desktop{display:none}
    .mobile-search-btn{display:inline-grid}
}

/* ---------- reduce motion ---------- */
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
    }
}