/* ==========================================================
   XIT MUSIC v2.0
   Professional Stylesheet
   Part 1 - Foundation
========================================================== */

/* ==========================================================
   RESET
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    overflow-x:hidden;
}

/* ==========================================================
   ROOT VARIABLES
========================================================== */

:root{

    /* Brand */

    --primary:#E50914;
    --primary-hover:#ff2c39;

    --gold:#F5C542;

    /* Backgrounds */

    --background:#0B0B0B;

    --surface:#181818;

    --surface-2:#222222;

    --surface-hover:#292929;

    /* Text */

    --text:#FFFFFF;

    --text-light:#B8B8B8;

    --text-faded:#888888;

    /* Borders */

    --border:#303030;

    /* Radius */

    --radius-small:10px;

    --radius:18px;

    --radius-large:26px;

    /* Shadows */

    --shadow-small:
    0 8px 20px rgba(0,0,0,.25);

    --shadow:
    0 12px 35px rgba(0,0,0,.35);

    --shadow-large:
    0 20px 60px rgba(0,0,0,.55);

    /* Animation */

    --transition:.30s ease;

}

/* ==========================================================
   BODY
========================================================== */

body{

    font-family:Arial, Helvetica, sans-serif;

    color:#ffffff;

    background:

        radial-gradient(circle at top right,
        rgba(225,29,72,.12),
        transparent 35%),

        radial-gradient(circle at bottom left,
        rgba(255,255,255,.04),
        transparent 28%),

        linear-gradient(
        180deg,
        #0a0a0a,
        #101010,
        #080808);

    min-height:100vh;

    overflow-x:hidden;

}

/* ==========================================================
   GLOBAL
========================================================== */

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

    color:inherit;

    transition:var(--transition);

}

button{

    font-family:inherit;

}

input,
textarea,
button{

    outline:none;

}

/* ==========================================================
   CONTAINER
========================================================== */

.section{

    width:100%;

    padding:90px 8%;

}

/* ==========================================================
   HEADINGS
========================================================== */

h1{

    font-size:3.5rem;

    font-weight:800;

    line-height:1.15;

}

h2{

    font-size:2.2rem;

    font-weight:700;

}

h3{

    font-size:1.2rem;

    font-weight:600;

}

p{

    color:var(--text-light);

}

/* ==========================================================
   LOGO
========================================================== */
.site-logo{

    height:72px;

    width:auto;

    display:block;

    object-fit:contain;

    transition:var(--transition);

}

.site-logo:hover{

    transform:scale(1.05);

}

/* ==========================================================
   HEADER
========================================================== */

header{

    position:sticky;

    top:0;

    z-index:9999;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 8%;

    background:

    rgba(10,10,10,.92);

    backdrop-filter:blur(16px);

    border-bottom:

    1px solid var(--border);

}

/* ==========================================================
   NAVIGATION
========================================================== */

nav{

    display:flex;

    gap:28px;

}

nav a{

    position:relative;

    color:var(--text);

    font-weight:600;

    letter-spacing:.3px;

}

nav a:hover{

    color:var(--gold);

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:3px;

    border-radius:20px;

    background:var(--primary);

    transition:var(--transition);

}

nav a:hover::after{

    width:100%;

}

/* ==========================================================
   HERO
========================================================== */

.hero{

    min-height:85vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:80px 20px;

}

.hero h1{

    max-width:900px;

    margin-bottom:18px;

}

.hero p{

    max-width:720px;

    margin-bottom:40px;

    font-size:1.1rem;

}

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

.search-box{

    width: 70%;

    max-width:760px;

    display:flex;

    gap:14px;

}

.search-box input{

    flex:1;

    height:62px;

    padding:0 22px;

    border:none;

    border-radius:60px;

    background:var(--surface);

    color:var(--text);

    font-size:1rem;

    transition:var(--transition);

}

.search-box input::placeholder{

    color:var(--text-faded);

}

.search-box input:focus{

    box-shadow:

    0 0 0 3px

    rgba(229,9,20,.25);

}

.search-box button{

    height:62px;

    padding:0 32px;

    border:none;

    border-radius:60px;

    background:linear-gradient(

    135deg,

    var(--primary),

    #ff3643

    );

    color:white;

    font-weight:700;

    cursor:pointer;

    transition:var(--transition);

}

.search-box button:hover{

    transform:translateY(-2px);

    box-shadow:

    0 12px 25px

    rgba(229,9,20,.35);

}

/* ==========================================================
   XIT MUSIC v2.0
   PART 2
   BUTTONS • SECTIONS • SONGS • CARDS
========================================================== */

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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 32px;

    border:none;

    border-radius:50px;

    background:linear-gradient(
    135deg,
    var(--primary),
    #ff3040
    );

    color:#fff;

    font-weight:700;

    cursor:pointer;

    transition:var(--transition);

    box-shadow:var(--shadow-small);

}

.btn:hover{

    transform:translateY(-3px);

    box-shadow:
    0 15px 35px
    rgba(229,9,20,.35);

}

button{

    transition:var(--transition);

}

.hero-buttons .btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:
        0 20px 45px rgba(225,29,72,.45);

}

.hero-buttons .btn-secondary:hover{

    background:rgba(255,255,255,.10);

    border-color:#e11d48;

    transform:translateY(-4px);

}
.btn-primary:active{

    transform:scale(.97);

}

.hero-stat h2{

    font-size:36px;

    font-weight:800;

    color:#fff;

}

.hero-stat span{

    display:block;

    margin-top:6px;

    color:#9b9b9b;

    font-size:14px;

}

.hero-buttons .btn-secondary{

    padding:18px 38px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.12);

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(10px);

    color:#fff;

    transition:.3s;

}

.btn-secondary:hover{

    background:rgba(255,255,255,.12);

    border-color:#e11d48;

}
/* ==========================================================
   HOMEPAGE SECTION TITLES
========================================================== */

.section-title{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:28px;

}

.section-title h2{

    font-size:1.9rem;

    font-weight:700;

    color:#fff;

    position:relative;

    padding-left:16px;

    line-height:1.2;

}

.section-title h2::before{

    content:"";

    position:absolute;

    left:0;

    top:50%;

    transform:translateY(-50%);

    width:5px;

    height:30px;

    background:#e11d48;

    border-radius:20px;

}
.section-title::after{

    content:"";

    display:block;

    width:70px;

    height:4px;

    margin-top:12px;

    border-radius:50px;

    background:#e11d48;

}



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

.grid{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(250px,1fr));

    gap:28px;

}

/* ==========================================================
   GENERAL CARD
========================================================== */

.card{

    background:linear-gradient(

    180deg,

    #1d1d1d,

    #141414

    );

    border:1px solid var(--border);

    border-radius:22px;

    padding:24px;

    transition:.35s;

    overflow:hidden;

    box-shadow:var(--shadow-small);

}

.card:hover{

    transform:translateY(-8px);

    border-color:var(--gold);

    box-shadow:var(--shadow);

}

.card h3{

    color:white;

    margin-top:12px;

    margin-bottom:10px;

}

.card p{

    color:var(--text-light);

}

/* ==========================================================
   HOMEPAGE SONG CARDS
========================================================== */

.songs{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));

    gap:24px;

}

.song-card{

    background:#1b1b1b;

    border:1px solid #2a2a2a;

    border-radius:18px;

    overflow:hidden;

    transition:.3s ease;

    display:flex;

    flex-direction:column;

    height:100%;

}

.song-card:hover{

    transform:translateY(-6px);

    border-color:#e11d48;

    box-shadow:0 18px 35px rgba(0,0,0,.35);

}

.song-card>a{

    display:block;

}

/* Square Cover */

.song-card img{

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

    display:block;

}

/* Content */

.song-card-content{

    padding:18px;

    display:flex;

    flex-direction:column;

    flex:1;

}

/* Song Title */

.song-card-content h3{

    font-size:1.1rem;

    line-height:1.4;

    margin-bottom:8px;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}

.song-card-content h3 a{

    color:#fff;

    text-decoration:none;

}

.song-card-content h3 a:hover{

    color:#e11d48;

}

/* Artist */

.song-card-content p{

    margin-bottom:10px;

}

.song-card-content p a{

    color:#bbbbbb;

    text-decoration:none;

    font-size:.95rem;

}

.song-card-content p a:hover{

    color:#e11d48;

}

/* Genre */

.song-card-content small{

    color:#777;

    font-size:.85rem;

    margin-bottom:18px;

}

/* Footer */

.song-card-footer{

    margin-top:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:8px;

    flex-wrap:wrap;

    font-size:.82rem;

}

/* Badges */

.badge{

    padding:4px 10px;

    border-radius:20px;

    font-size:.72rem;

    font-weight:600;

}

.badge.trending{

    background:#ff3b30;

    color:#fff;

}

.badge.featured{

    background:#f5b301;

    color:#111;

}

/* ==========================================================
   FEATURED SONG
========================================================== */

#featuredHero{

    background:

    linear-gradient(

    145deg,

    #191919,

    #101010

    );

    border:1px solid var(--border);

    border-radius:28px;

    padding:60px;

    text-align:center;

    box-shadow:var(--shadow);

}

#featuredHero h1{

    font-size:3rem;

    margin-bottom:15px;

}

#featuredHero p{

    margin-bottom:30px;

}

/* ==========================================================
   FEATURED ARTIST
========================================================== */

#featuredArtistContainer .card{

    text-align:center;

}

#featuredArtistContainer img{

    width:100%;

    height:340px;

    object-fit:cover;

    border-radius:18px;

}

#featuredArtistContainer h3{

    color:var(--gold);

}

/* ==========================================================
   FEATURED BADGE
========================================================== */

.featured-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 18px;

    border-radius:40px;

    background:var(--gold);

    color:black;

    font-weight:700;

    font-size:.8rem;

    margin-bottom:18px;

}

/* ==========================================================
   HOVER GLOW
========================================================== */

.song:hover h3,

.card:hover h3{

    color:var(--gold);

}


/* ==========================================================
   XIT MUSIC v2.0
   PART 3
   SONG PAGE • ARTIST PAGE • LYRICS
========================================================== */

/* ==========================================================
   SONG HEADER
========================================================== */

.song-header{

    display:grid;

    grid-template-columns:320px 1fr;

    gap:45px;

    align-items:start;

}

.song-cover{

    background:#1b1b1b;

    border:1px solid #2a2a2a;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 15px 35px rgba(0,0,0,.35);

}

.song-cover img{

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

    display:block;

    transition:transform .4s ease;

}

.song-cover:hover img{

    transform:scale(1.04);

}
/* ==========================================================
   SONG INFO
========================================================== */
.song-info h1{

    font-size:2.5rem;

    line-height:1.2;

    margin-bottom:12px;

}

.song-info h2{

    margin-bottom:28px;

}

.song-info h2 a{

    color:#e11d48;

    text-decoration:none;

    font-size:1.3rem;

    font-weight:600;

}

.song-info h2 a:hover{

    color:#ff4775;

}

/* ==========================================================
   SONG META
========================================================== */

.songs .song-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    width:100%;
}

.song-meta p{

    background:#1b1b1b;

    border:1px solid #252525;

    border-radius:12px;

    padding:15px;

    margin:0;

}

.song-meta strong{

    display:block;

    color:#888;

    font-size:.85rem;

    margin-bottom:5px;

    text-transform:uppercase;

    letter-spacing:.5px;

}

.song-meta span{

    font-size:1.05rem;

    font-weight:600;

    color:#fff;

}


/* ==========================================================
   YOUTUBE SONG VIDEO
========================================================== */
.youtube-section[hidden]{
    display:none;
}

.youtube-video-wrap{
    width:100%;
    max-width:1100px;
    margin:0 auto;
    aspect-ratio:16 / 9;
    overflow:hidden;
    border-radius:20px;
    background:#0b0b0b;
    border:1px solid #2a2a2a;
    box-shadow:0 18px 50px rgba(0,0,0,.28);
}

.youtube-video-wrap iframe{
    display:block;
    width:100%;
    height:100%;
    border:0;
}

/* ==========================================================
   LYRICS
========================================================== */

.lyrics-box{

    background:#1b1b1b;

    border:1px solid #2a2a2a;

    border-radius:18px;

    padding:35px;

    line-height:2;

    white-space:pre-line;

    font-size:1.05rem;

}
/* ==========================================================
   LYRICS ACTIONS
========================================================== */
.lyrics-actions{

    display:flex;

    gap:16px;

    flex-wrap:wrap;

}

.lyrics-actions button{

    padding:14px 24px;

    border:none;

    border-radius:10px;

    background:#e11d48;

    color:#fff;

    font-size:15px;

    cursor:pointer;

    transition:.3s;

}

.lyrics-actions button:hover{

    transform:translateY(-2px);

    background:#ff2f62;

}

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

.artist-profile{

    display:grid;

    grid-template-columns:280px 1fr;

    gap:45px;

    align-items:start;

}

.artist-profile img{

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

    border-radius:50%;

    border:5px solid #e11d48;

    background:#1b1b1b;

    box-shadow:0 20px 45px rgba(0,0,0,.35);

    transition:.4s;

}

.artist-profile img:hover{

    transform:scale(1.03);

}

.artist-details h1{

    font-size:2.8rem;

    margin-bottom:12px;

}

.artist-details p{

    margin-bottom:15px;

    color:#cfcfcf;

    line-height:1.8;

}

.artist-details a{

    color:#e11d48;

    text-decoration:none;

}

.artist-details a:hover{

    color:#ff4775;

}
/* ==========================================================
   ARTIST PREVIEW
========================================================== */

.artist-preview{

    display:flex;

    align-items:center;

    gap:25px;

}

.artist-preview img{

    width:110px;

    height:110px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid var(--gold);

}

.artist-preview a{

    color:var(--gold);

    font-weight:700;

}

.artist-preview a:hover{

    color:var(--primary);

}

/* ==========================================================
   SOCIAL LINKS
========================================================== */

.social-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:20px;

    color:var(--gold);

    font-weight:700;

}

.social-link:hover{

    color:var(--primary);

}

/* ==========================================================
   TRENDING
========================================================== */

.trend-rank{

    position:absolute;

    top:15px;

    left:15px;

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--primary);

    color:white;

    border-radius:50%;

    font-weight:800;

    box-shadow:var(--shadow-small);

}

.song-country{

    color:var(--text-light);

    padding:0 18px;

    margin-bottom:5px;

}

.song-views{

    color:var(--gold);

    font-weight:600;

    padding:0 18px 18px;

}

/* ==========================================================
   XIT MUSIC v2.0
   PART 4A
   RESPONSIVE FOUNDATION
========================================================== */

/* ==========================================================
   MENU BUTTON
========================================================== */

.menu-toggle{

    display:none;

    width:52px;

    height:52px;

    border:none;

    border-radius:14px;

    background:var(--surface);

    color:var(--text);

    font-size:1.5rem;

    cursor:pointer;

    transition:var(--transition);

}

.menu-toggle:hover{

    background:var(--primary);

    color:#fff;

}

/* ==========================================================
   LARGE TABLETS
========================================================== */

@media (max-width:1200px){

.section{

    padding:80px 6%;

}

.hero h1{

    font-size:3rem;

}

.song-header{

    grid-template-columns:300px 1fr;

}

.artist-profile{

    grid-template-columns:220px 1fr;

}

.artist-profile img{

    width:220px;

    height:220px;

}

}

/* ==========================================================
   TABLETS
========================================================== */

@media (max-width:992px){

header{

    padding:18px 5%;

}

.section{

    padding:70px 5%;

}

.hero{

    min-height:70vh;

}

.hero h1{

    font-size:2.6rem;

}

.hero p{

    font-size:1rem;

}

.song-header{

    grid-template-columns:1fr;

}

.song-cover{

    max-width:420px;

    margin:auto;

}

.artist-profile{

    grid-template-columns:1fr;

    text-align:center;

}

.artist-profile img{

    margin:auto;

}

.song-meta{

    grid-template-columns:

    repeat(auto-fit,minmax(180px,1fr));

}

}

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

@media (max-width:768px){

.menu-toggle{

    display:flex;

    align-items:center;

    justify-content:center;

}

header{

    position:sticky;

    flex-wrap:wrap;

    gap:20px;

}

nav{

    width:100%;

    display:none;

    flex-direction:column;

    background:var(--surface);

    border-radius:18px;

    padding:20px;

    border:1px solid var(--border);

    animation:fadeDown .3s ease;

}

nav.active{

    display:flex;

}

nav a{

    padding:14px 0;

    border-bottom:1px solid rgba(255,255,255,.05);

}

nav a:last-child{

    border:none;

}

/* Hero */

.hero::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(225,29,72,.25),

            transparent 70%

        );

    top:-180px;

    right:-120px;

    pointer-events:none;

}

.hero{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:700px;

    padding:90px 8%;

    overflow:hidden;

    background: linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,.65));

}

.hero h1{

    font-size:64px;

    font-weight:800;

    line-height:1.1;

    letter-spacing:-2px;

    margin-bottom:20px;

}

.hero p{

    font-size:19px;

    color:#b5b5b5;

    line-height:1.8;

    max-width:620px;

    margin-bottom:35px;

}

/* Search */

.search-box{

    flex-direction:column;

}

.search-box input{

    width:100%;

}

.search-box button{

    width:100%;

}

/* Sections */

.section{

    padding:60px 20px;

}

.section-title h2{

    font-size:1.8rem;

}

/* Song Grid */

.songs{

    grid-template-columns:1fr;

}

/* Cards */

.grid{

    grid-template-columns:1fr;

}

.song-cover{

    height:240px;

}

}

/* ==========================================================
   SMALL PHONES
========================================================== */

@media (max-width:480px){

.site-logo{

    height:46px;

}

.hero h1{

    font-size:1.8rem;

}

.hero p{

    font-size:.95rem;

}

.song-info h1{

    font-size:2rem;

}

.artist-details h1{

    font-size:2rem;

}

.song-meta{

    grid-template-columns:1fr;

}

.lyrics-box{

    padding:25px;

    font-size:1rem;

}

.lyrics-actions{

    flex-direction:column;

}

.lyrics-actions button{

    width:100%;

}

}

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

img{

    max-width:100%;

    height:auto;

}

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

table{

    width:100%;

    display:block;

    overflow-x:auto;

}

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

iframe{

    max-width:100%;

}

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

video{

    max-width:100%;

}

/* ==========================================================
   ANIMATION
========================================================== */

@keyframes fadeDown{

from{

    opacity:0;

    transform:translateY(-15px);

}

to{

    opacity:1;

    transform:translateY(0);

}

}

/* ==========================================================
   XIT MUSIC v2.0
   PART 4B
   CONTENT SECTIONS
========================================================== */

/* ==========================================================
   FEATURED SONG
========================================================== */

#featuredHero{

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
    135deg,
    #1d1d1d,
    #111111
    );

    border:1px solid var(--border);

    border-radius:28px;

    padding:60px;

    box-shadow:var(--shadow-large);

}

#featuredHero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    90deg,
    rgba(229,9,20,.08),
    rgba(245,197,66,.05)
    );

    pointer-events:none;

}

#featuredHero .hero-content{

    position:relative;

    z-index:2;

}

#featuredHero h1{

    margin-bottom:18px;

}

#featuredHero p{

    font-size:1.1rem;

    margin-bottom:30px;

}

/* ==========================================================
   FEATURED ARTIST
========================================================== */

#featuredArtistContainer{

    display:flex;

    justify-content:center;

}

#featuredArtistContainer .card{

    width:100%;

    max-width:420px;

}

#featuredArtistContainer img{

    width:100%;

    height:360px;

    object-fit:cover;

    border-radius:20px;

}

#featuredArtistContainer h3{

    margin-top:20px;

    color:var(--gold);

}

#featuredArtistContainer p{

    margin-top:8px;

}

/* ==========================================================
   TRENDING SONGS
========================================================== */

#trendingSongs{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(270px,1fr));

    gap:28px;

}

.trend-rank{

    position:absolute;

    top:18px;

    left:18px;

    width:44px;

    height:44px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--gold);

    color:#000;

    font-weight:800;

    font-size:1rem;

    box-shadow:var(--shadow-small);

}

/* ==========================================================
   COUNTRY
========================================================== */

.song-country{

    padding:0 20px;

    margin-top:4px;

    color:var(--text-light);

    font-size:.9rem;

}

/* ==========================================================
   VIEWS
========================================================== */

.song-views{

    padding:8px 20px 20px;

    color:var(--gold);

    font-weight:700;

}

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

.search-empty{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:24px;

    padding:60px;

    text-align:center;

}

.search-empty h3{

    color:var(--gold);

    font-size:2rem;

    margin-bottom:15px;

}

.search-empty p{

    max-width:500px;

    margin:auto;

}

/* ==========================================================
   RELATED SONGS
========================================================== */

#relatedSongs{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:28px;

}

/* ==========================================================
   MORE FROM ARTIST
========================================================== */

#artistMoreSongs{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:28px;

}

/* ==========================================================
   RELATED ARTISTS
========================================================== */

#relatedArtists{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(240px,1fr));

    gap:28px;

}

/* ==========================================================
   FEATURED BADGE
========================================================== */

.featured-badge{

    position:absolute;

    top:18px;

    right:18px;

    padding:8px 18px;

    border-radius:40px;

    background:linear-gradient(
    90deg,
    var(--gold),
    #ffd95f
    );

    color:#000;

    font-weight:700;

    font-size:.8rem;

}

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

.chart-position{

    width:50px;

    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--primary);

    color:white;

    font-weight:700;

    margin-bottom:15px;

}

/* ==========================================================
   SECTION DIVIDER
========================================================== */

.section-divider{

    width:100%;

    height:1px;

    margin:70px 0;

    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(245,197,66,.35),
    transparent
    );

}

/* ==========================================================
   EMPTY STATES
========================================================== */

.no-results,
.empty-state{

    padding:70px 20px;

    text-align:center;

    border:1px dashed #333;

    border-radius:20px;

    color:#888;

}

.empty-state h3{

    margin-bottom:12px;

    color:white;

}

.no-results p,
.empty-state p{

    color:var(--text-light);

}

/* ==========================================================
   XIT MUSIC v2.0
   PART 4C
   FOOTER • ANIMATIONS • UTILITIES • FINAL POLISH
========================================================== */

/* ==========================================================
   FOOTER
========================================================== */

footer{

    margin-top:100px;

    padding:70px 8% 35px;

    background:linear-gradient(
    180deg,
    #121212,
    #090909
    );

    border-top:1px solid var(--border);

    text-align:center;

}

footer p{

    color:var(--text-light);

    font-size:.95rem;

    letter-spacing:.4px;

}

footer a{

    color:var(--gold);

    font-weight:600;

}

footer a:hover{

    color:var(--primary);

}

/* ==========================================================
   CUSTOM SCROLLBAR
========================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
    180deg,
    var(--primary),
    var(--gold)
    );

    border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary);

}

/* ==========================================================
   SELECTION
========================================================== */

::selection{

    background:var(--gold);

    color:#000;

}

/* ==========================================================
   LINKS
========================================================== */

a{

    transition:all .30s ease;

}

a:hover{

    text-decoration:none;

}

/* ==========================================================
   SMOOTH IMAGE EFFECTS
========================================================== */

img{

    transition:
    transform .35s ease,
    opacity .35s ease;

}

img:hover{

    opacity:.98;

}

/* ==========================================================
   HOVER LIFT
========================================================== */

.lift{

    transition:.35s ease;

}

.lift:hover{

    transform:translateY(-8px);

}

/* ==========================================================
   GLOW EFFECT
========================================================== */

.glow{

    transition:.35s ease;

}

.glow:hover{

    box-shadow:

    0 0 25px rgba(229,9,20,.35);

}

/* ==========================================================
   FADE ANIMATION
========================================================== */

.fade-in{

    animation:fadeIn .6s ease;

}

@keyframes fadeIn{

0%{

opacity:0;

transform:translateY(25px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

/* ==========================================================
   FLOAT ANIMATION
========================================================== */

.float{

    animation:float 4s ease-in-out infinite;

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}

/* ==========================================================
   PULSE
========================================================== */

.pulse{

    animation:pulse 2.5s infinite;

}

@keyframes pulse{

0%{

box-shadow:0 0 0 0 rgba(229,9,20,.5);

}

70%{

box-shadow:0 0 0 18px rgba(229,9,20,0);

}

100%{

box-shadow:0 0 0 0 rgba(229,9,20,0);

}

}

/* ==========================================================
   SKELETON LOADING
========================================================== */

.skeleton{

    position:relative;

    overflow:hidden;

    background:#222;

}

.skeleton::after{

    content:"";

    position:absolute;

    inset:0;

    transform:translateX(-100%);

    background:linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.08),

    transparent

    );

    animation:skeletonLoading 1.2s infinite;

}

@keyframes skeletonLoading{

100%{

transform:translateX(100%);

}

}

/* ==========================================================
   UTILITIES
========================================================== */

.text-center{

    text-align:center;

}

.text-gold{

    color:var(--gold);

}

.text-primary{

    color:var(--primary);

}

.text-light{

    color:var(--text-light);

}

.mt-1{

    margin-top:10px;

}

.mt-2{

    margin-top:20px;

}

.mt-3{

    margin-top:30px;

}

.mt-4{

    margin-top:40px;

}

.mb-1{

    margin-bottom:10px;

}

.mb-2{

    margin-bottom:20px;

}

.mb-3{

    margin-bottom:30px;

}

.mb-4{

    margin-bottom:40px;

}

.hidden{

    display:none !important;

}

.round{

    border-radius:50%;

}

.shadow{

    box-shadow:var(--shadow);

}

/* ==========================================================
   INPUTS
========================================================== */

input,
textarea{

    transition:.3s ease;

}

input:focus,
textarea:focus{

    border-color:var(--gold);

}

/* ==========================================================
   BUTTON ACTIVE
========================================================== */

button:active,
.btn:active{

    transform:scale(.97);

}

.hero-buttons .btn-primary{

    padding:18px 38px;

    border-radius:999px;

    font-size:16px;

    font-weight:700;

    background:linear-gradient(
        135deg,
        #ff2d63,
        #d90452
    );

    box-shadow:
        0 15px 35px rgba(225,29,72,.35);

    transition:.3s;

}

.btn-primary:active{

    transform:scale(.97);

}

/* ==========================================================
   FINAL POLISH
========================================================== */

.song,
.card,
.btn,
.search-box input,
.search-box button,
.lyrics-box,
.song-meta p{

    transition:all .30s ease;

}

.song:hover{

    border-color:var(--gold);

}

.card:hover{

    border-color:var(--gold);

}

.section{

    position:relative;

}

body{

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}


.footer-company{

    margin-top:10px;

    font-size:.9rem;

    color:var(--gold);

    letter-spacing:1px;

    font-weight:600;

    text-transform:uppercase;

}
/* ==========================================================
   XIT MUSIC
   STYLE.CSS COMPLETE
========================================================== */


/* =========================
TRENDING SONGS
========================= */

.trend-rank{

display:inline-block;

padding:6px 12px;

background:linear-gradient(
135deg,
#FFD700,
#ffb400
);

color:#111;

font-weight:bold;

border-radius:20px;

margin-bottom:12px;

font-size:14px;

}

.song-views{

margin-top:10px;

color:#FFD700;

font-size:14px;

font-weight:600;

}

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

#chartSongs .song{

position:relative;

}

#chartSongs .trend-rank{

position:absolute;

top:15px;

left:15px;

background:#FFD700;

color:#111;

padding:8px 12px;

border-radius:20px;

font-weight:bold;

font-size:15px;

}

#chartSongs .song:hover{

transform:translateY(-8px);

}

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

.chart-search{

max-width:600px;

margin:30px auto;

}

.chart-search input{

width:100%;

padding:16px 20px;

background:#181818;

border:2px solid #333;

border-radius:12px;

color:#fff;

font-size:16px;

transition:.3s;

}

.chart-search input:focus{

outline:none;

border-color:#FFD700;

box-shadow:0 0 15px rgba(255,215,0,.25);

}



/* ======================================================
   CONTACT PAGE
====================================================== */

.contact-box{

    max-width:800px;

    margin:0 auto;

}

.contact-box form{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.contact-box input,

.contact-box textarea{

    width:100%;

    background:#111;

    border:1px solid #222;

    border-radius:10px;

    padding:16px;

    color:#fff;

    font-size:15px;

    outline:none;

    transition:.3s;

}

.contact-box input:focus,

.contact-box textarea:focus{

    border-color:#e50914;

    box-shadow:0 0 10px rgba(229,9,20,.25);

}

.contact-box textarea{

    resize:vertical;

    min-height:180px;

}

.contact-box .btn{

    background:#e50914;

    color:#fff;

    border:none;

    padding:15px;

    border-radius:10px;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.contact-box .btn:hover{

    background:#ff1e2d;

}

.contact-info{

    max-width:800px;

    margin:60px auto 0;

    background:#111;

    border:1px solid #222;

    border-radius:15px;

    padding:30px;

    text-align:center;

}

.contact-info h2{

    color:#fff;

    margin-bottom:20px;

}

.contact-info p{

    color:#bbb;

    margin:12px 0;

    line-height:1.8;

}

@media(max-width:768px){

.contact-box,

.contact-info{

    width:100%;

}

}



/* ======================================================
   TERMS PAGE
====================================================== */

.legal-content{

    max-width:900px;

    margin:0 auto;

    background:#111;

    border:1px solid #222;

    border-radius:12px;

    padding:22px 28px;

}

.legal-content h2{

    color:#fff;

    font-size:17px;

    margin:16px 0 8px;

    font-weight:700;

}

.legal-content p{

    color:#bdbdbd;

    font-size:13px;

    line-height:1.55;

    margin:0 0 10px;

}

.legal-content ul{

    margin:8px 0 12px 20px;

    padding:0;

}

.legal-content li{

    color:#bdbdbd;

    font-size:13px;

    line-height:1.55;

    margin-bottom:6px;

}



/* ==========================
   FOOTER
========================== */

.site-footer{

    margin-top:80px;

    padding:40px 20px;

    background:#080808;

    border-top:1px solid #1d1d1d;

    text-align:center;

}

.footer-copy{

    color:#ffffff;

    font-size:15px;

    font-weight:600;

    margin-bottom:8px;

    letter-spacing:.5px;

}

.footer-company{

    color:#e50914;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

.footer-links{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:22px;

    margin-bottom:20px;

}

.footer-links a{

    color:#bdbdbd;

    text-decoration:none;

    font-size:14px;

    transition:.3s;

}

.footer-links a:hover{

    color:#e50914;

}

.footer-company{

    color:#e50914;

    font-weight:700;

    letter-spacing:1px;

    margin-top:8px;

}








/* ==========================
LATEST ARTIST IMAGE
========================== */

.artist-cover{

    width:100%;

    height:320px;

    object-fit:contain;

    object-position:center top;

    background:#111;

    padding:8px;

    border-radius:12px;

}

.social-link{
    font-size:24px;
    color:#fff;
    text-decoration:none;
    transition:0.3s;
}

.social-link:hover{
    color:#E1306C; /* Instagram pink */
}


.contact-status{

    margin-top:15px;

    text-align:center;

    font-weight:600;

    min-height:22px;

}

.contact-status.success{

    color:#16a34a;

}

.contact-status.error{

    color:#dc2626;

}

::selection{

    background:#e11d48;

    color:#fff;

}

html{

    scroll-behavior:smooth;

}



.featured-card{

    position:relative;

    display:flex;

    align-items:center;

    gap:35px;

    padding:35px;

    border-radius:28px;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        #1c1c1c,
        #111
    );

    border:1px solid rgba(255,255,255,.06);

    box-shadow:
        0 25px 60px rgba(0,0,0,.35);

}

.featured-card img{

    width:260px;

    height:260px;

    object-fit:cover;

    border-radius:22px;

    transition:.4s;

}

.featured-card:hover img{

    transform:scale(1.05);

}

.featured-title{

    font-size:42px;

    font-weight:800;

    line-height:1.15;

    margin-bottom:18px;

}

.featured-artist{

    font-size:18px;

    color:#b8b8b8;

    margin-bottom:25px;

}



/* ==========================================================
   FEATURED ARTISTS
========================================================== */

#featuredArtists{

    display:grid;

    grid-template-columns:repeat(auto-fit,280px);

    justify-content:center;

    gap:24px;

    max: width 800px;

    margin:0 auto;

    padding:10px 0;

}

#featuredArtists .artist-card{

    width:280px;

    margin:auto;

    background:#1b1b1b;

    border:1px solid #2a2a2a;

    border-radius:18px;

    overflow:hidden;

    transition:.3s ease;

    display:flex;

    flex-direction:column;

}

#featuredArtists .artist-card:hover{

    transform:translateY(-6px);

    border-color:#e11d48;

    box-shadow:0 18px 35px rgba(0,0,0,.35);

}

#featuredArtists .artist-card img{

    width:100%;

    height:240px;

    object-fit:cover;

    display:block;

}

#featuredArtists .artist-card-content{

    padding:18px;

    display:flex;

    flex-direction:column;

    flex:1;

}

#featuredArtists .artist-card-content h3{

    margin-bottom:8px;

    font-size:1.1rem;

}

#featuredArtists .artist-card-content h3 a{

    color:#fff;

    text-decoration:none;

}

#featuredArtists .artist-card-content h3 a:hover{

    color:#e11d48;

}

#featuredArtists .artist-card-content p{

    color:#bdbdbd;

    margin-bottom:8px;

}

#featuredArtists .artist-card-content small{

    color:#777;

    margin-bottom:16px;

}

#featuredArtists .artist-card-footer{

    margin-top:auto;

    display:flex;

    gap:8px;

    flex-wrap:wrap;

}

/* ==========================================================
   LATEST ARTISTS
========================================================== */

#latestArtists{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));

    gap:24px;

}

#latestArtists .artist-card{

    background:#1b1b1b;

    border:1px solid #2a2a2a;

    border-radius:18px;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    height:100%;

    transition:.3s ease;

}

#latestArtists .artist-card:hover{

    transform:translateY(-6px);

    border-color:#e11d48;

    box-shadow:0 18px 35px rgba(0,0,0,.35);

}

#latestArtists .artist-card img{

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

    display:block;

}

#latestArtists .artist-card-content{

    padding:18px;

    display:flex;

    flex-direction:column;

    flex:1;

}

#latestArtists .artist-card-content h3{

    font-size:1.1rem;

    margin-bottom:8px;

}

#latestArtists .artist-card-content h3 a{

    color:#fff;

    text-decoration:none;

}

#latestArtists .artist-card-content h3 a:hover{

    color:#e11d48;

}

#latestArtists .artist-card-content p{

    color:#bdbdbd;

    margin-bottom:8px;

}

#latestArtists .artist-card-content small{

    color:#777;

    margin-bottom:16px;

}

#latestArtists .artist-card-footer{

    margin-top:auto;

    display:flex;

    gap:8px;

    flex-wrap:wrap;

}




.artist-biography{

    background:#1b1b1b;

    border:1px solid #2a2a2a;

    border-radius:18px;

    padding:35px;

    line-height:2;

    color:#ddd;

}

.rank{

    width:50px;

    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#e11d48;

    color:white;

    font-size:20px;

    font-weight:bold;

}


/* ==========================================================
   GLOBAL ANIMATION
========================================================== */

*{

    transition:

    background-color .25s ease,

    color .25s ease,

    border-color .25s ease,

    transform .25s ease,

    box-shadow .25s ease;

}

.skeleton{

    height:280px;

    border-radius:18px;

    background:

    linear-gradient(

    90deg,

    #222 25%,

    #2c2c2c 50%,

    #222 75%

    );

    background-size:200% 100%;

    animation:skeleton 1.3s infinite;

}

@keyframes skeleton{

    0%{

        background-position:200% 0;

    }

    100%{

        background-position:-200% 0;

    }

}

.back-top{

    position:fixed;

    right:25px;

    bottom:25px;

    width:50px;

    height:50px;

    border-radius:50%;

    background:#e11d48;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    box-shadow:0 15px 30px rgba(0,0,0,.3);

}

.song-card{

    animation:cardFade .45s ease;

}

.artist-card{

    animation:cardFade .45s ease;

}

@keyframes cardFade{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

.song-card:hover{

    box-shadow:

    0 20px 35px rgba(0,0,0,.4),

    0 0 0 1px rgba(225,29,72,.35);

}

.artist-card:hover{

    box-shadow:

    0 20px 35px rgba(0,0,0,.4),

    0 0 0 1px rgba(225,29,72,.35);

}

/* ==========================================================
   PREMIUM MICRO-INTERACTIONS & ANIMATIONS
========================================================== */

/* Smooth Global Animation */

*{

    transition:
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .25s ease,
    box-shadow .25s ease;

}

/* ==========================================================
   CARD ANIMATIONS
========================================================== */

.song-card,
.artist-card{

    overflow:hidden;

    animation:cardFade .45s ease;

}

.song-card:hover,
.artist-card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 20px 35px rgba(0,0,0,.40),
    0 0 0 1px rgba(225,29,72,.35);

}

.song-card img,
.artist-card img{

    transition:transform .45s ease;

}

.song-card:hover img,
.artist-card:hover img{

    transform:scale(1.06);

}

/* ==========================================================
   NAVIGATION
========================================================== */

nav a{

    position:relative;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:#e11d48;

    transition:.3s;

}

nav a:hover::after{

    width:100%;

}

/* ==========================================================
   LOGO
========================================================== */

.site-logo{

    transition:.35s;

}

.site-logo:hover{

    transform:scale(1.05);

}

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

button{

    position:relative;

    overflow:hidden;

}

button:hover{

    letter-spacing:.3px;

}

/* ==========================================================
   SECTION ANIMATION
========================================================== */

.section{

    opacity:0;

    animation:sectionFade .6s forwards;

}

@keyframes sectionFade{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   CARD ANIMATION
========================================================== */

@keyframes cardFade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   LOADING SKELETON
========================================================== */

.skeleton{

    height:280px;

    border-radius:18px;

    background:

    linear-gradient(
    90deg,
    #222 25%,
    #2c2c2c 50%,
    #222 75%
    );

    background-size:200% 100%;

    animation:skeletonLoading 1.3s infinite;

}

@keyframes skeletonLoading{

    0%{

        background-position:200% 0;

    }

    100%{

        background-position:-200% 0;

    }

}

/* ==========================================================
   SCROLL TO TOP BUTTON
========================================================== */

.back-top{

    position:fixed;

    right:25px;

    bottom:25px;

    width:52px;

    height:52px;

    border-radius:50%;

    background:#e11d48;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    box-shadow:0 15px 30px rgba(0,0,0,.30);

    z-index:999;

}

.back-top:hover{

    transform:translateY(-4px);

}

/* ==========================================================
   FOCUS STATES
========================================================== */

button:focus,
input:focus,
textarea:focus,
select:focus,
a:focus{

    outline:2px solid #e11d48;

    outline-offset:3px;

}

/* ==========================================================
   IMAGE HOVER
========================================================== */

.song-cover img,
.artist-profile img{

    transition:transform .45s ease;

}

.song-cover:hover img,
.artist-profile:hover img{

    transform:scale(1.03);

}

/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#151515;

}

::-webkit-scrollbar-thumb{

    background:#444;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#e11d48;

}

/* ==========================================================
   FINAL PRODUCTION POLISH
========================================================== */

/* Better text rendering */

html{

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}

body{

    text-rendering:optimizeLegibility;

}

/* Better spacing */

.section{

    padding:70px 8%;

}

@media(max-width:768px){

.section{

    padding:45px 20px;

}

}

/* Maximum content width */

.section,
.hero,
header,
footer{

    width:100%;

}

.section>*,
.hero>*{

    max-width:1400px;

    margin-left:auto;

    margin-right:auto;

}

/* Better headings */

h1{

    font-size:clamp(2rem,4vw,3.4rem);

    line-height:1.2;

}

h2{

    font-size:clamp(1.5rem,3vw,2.2rem);

}

h3{

    line-height:1.4;

}

/* Better paragraph spacing */

p{

    line-height:1.8;

}

/* Better image loading */

img{

    display:block;

    max-width:100%;

    height:auto;

}

/* Better card spacing */

.song-card-content,
.artist-card-content{

    padding:18px;

}

/* Card title */

.song-card h3,
.artist-card h3{

    font-size:18px;

    margin-bottom:8px;

}

/* Card subtitles */

.song-card p,
.artist-card p{

    color:#bbbbbb;

}

/* Footer */

footer{

    margin-top:60px;

}

.footer-links{

    row-gap:12px;

}

/* Better selection */

::selection{

    background:#e11d48;

    color:#fff;

}

/* Smooth anchor scrolling */

html{

    scroll-padding-top:90px;

}

/* Prevent layout shifts */

.song-card img,
.artist-card img,
.song-cover img{

    background:#181818;

}

/* Better mobile tap targets */

button,
a{

    min-height:44px;

}

/* Prevent overflow */

body{

    overflow-x:hidden;

}

/* Tables */

table{

    width:100%;

    border-collapse:collapse;

}

table td,
table th{

    padding:12px;

}

/* Responsive typography */

@media(max-width:768px){

h1{

    font-size:2rem;

}

h2{

    font-size:1.5rem;

}

h3{

    font-size:1.1rem;

}

}

/* Reduced motion support */

@media(prefers-reduced-motion:reduce){

*{

    animation:none!important;

    transition:none!important;

    scroll-behavior:auto!important;

}

}

/* ==========================================================
   TOP ARTIST CARD
========================================================== */

#topArtists{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));

    gap:24px;

}

#topArtists .artist-card{

    background:#1b1b1b;

    border:1px solid #2a2a2a;

    border-radius:18px;

    overflow:hidden;

    transition:.3s ease;

    display:flex;

    flex-direction:column;

    height:100%;

}

#topArtists .artist-card:hover{

    transform:translateY(-6px);

    border-color:#e11d48;

    box-shadow:0 18px 35px rgba(0,0,0,.35);

}

#topArtists .artist-card img{

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

    display:block;

}

#topArtists .artist-card-content{

    padding:18px;

    display:flex;

    flex-direction:column;

    flex:1;

}

#topArtists .artist-card-content h3{

    margin-bottom:8px;

    font-size:1.1rem;

}

#topArtists .artist-card-content h3 a{

    color:#fff;

    text-decoration:none;

}

#topArtists .artist-card-content h3 a:hover{

    color:#e11d48;

}

#topArtists .artist-card-content p{

    color:#bdbdbd;

    margin-bottom:8px;

}

#topArtists .artist-card-content small{

    color:#777;

    margin-bottom:16px;

}

#topArtists .artist-card-footer{

    margin-top:auto;

    display:flex;

    gap:8px;

    flex-wrap:wrap;

}

/* ==========================================================
   RELATED ARTIST CARD
========================================================== */

#relatedArtists{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));

    gap:24px;

}

#relatedArtists .artist-card{

    background:#1b1b1b;

    border:1px solid #2a2a2a;

    border-radius:18px;

    overflow:hidden;

    transition:.3s ease;

    display:flex;

    flex-direction:column;

    height:100%;

}

#relatedArtists .artist-card:hover{

    transform:translateY(-6px);

    border-color:#e11d48;

    box-shadow:0 18px 35px rgba(0,0,0,.35);

}

#relatedArtists .artist-card img{

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

    display:block;

}

#relatedArtists .artist-card-content{

    padding:18px;

    display:flex;

    flex-direction:column;

    flex:1;

}

#relatedArtists .artist-card-content h3{

    margin-bottom:8px;

    font-size:1.1rem;

}

#relatedArtists .artist-card-content h3 a{

    color:#fff;

    text-decoration:none;

}

#relatedArtists .artist-card-content h3 a:hover{

    color:#e11d48;

}

#relatedArtists .artist-card-content p{

    color:#bdbdbd;

    margin-bottom:8px;

}

#relatedArtists .artist-card-content small{

    color:#777;

    margin-bottom:16px;

}

#relatedArtists .artist-card-footer{

    margin-top:auto;

    display:flex;

    gap:8px;

    flex-wrap:wrap;

}

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

.artist-search{

    max-width:700px;

    margin:0 auto;

    display:flex;

    gap:12px;

}

.artist-search input{

    flex:1;

    padding:14px 18px;

    background:#1b1b1b;

    color:#fff;

    border:1px solid #2a2a2a;

    border-radius:12px;

    font-size:16px;

    outline:none;

    transition:.3s;

}

.artist-search input:focus{

    border-color:#e11d48;

    box-shadow:0 0 0 3px rgba(225,29,72,.15);

}

.artist-search button{

    padding:14px 24px;

    border:none;

    border-radius:12px;

    background:#e11d48;

    color:#fff;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.artist-search button:hover{

    background:#c2183f;

}

@media(max-width:768px){

    .artist-search{

        flex-direction:column;

    }

    .artist-search button{

        width:100%;

    }

}


/* ==========================================================
   SEARCH SONGS & ARTISTS
========================================================== */

#searchResults,
#artistSearchResults{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));

    gap:24px;

}

/* SONG CARDS */

#searchResults .song{

    background:#1b1b1b;

    border:1px solid #2a2a2a;

    border-radius:18px;

    overflow:hidden;

    transition:.3s ease;

    display:flex;

    flex-direction:column;

    height:100%;

}

#searchResults .song:hover{

    transform:translateY(-6px);

    border-color:#e11d48;

    box-shadow:0 18px 35px rgba(0,0,0,.35);

}

#searchResults .song img{

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

    display:block;

}

#searchResults .song-content{

    padding:18px;

    display:flex;

    flex-direction:column;

    flex:1;

}

#searchResults .song-content h3{

    margin-bottom:8px;

}

#searchResults .song-content h3 a{

    color:#fff;

    text-decoration:none;

}

#searchResults .song-content h3 a:hover{

    color:#e11d48;

}

#searchResults .song-content p{

    color:#bdbdbd;

    margin-bottom:8px;

}

#searchResults .song-footer{

    margin-top:auto;

}

/* ARTIST CARDS */

#artistSearchResults .artist-card{

    background:#1b1b1b;

    border:1px solid #2a2a2a;

    border-radius:18px;

    overflow:hidden;

    transition:.3s ease;

    display:flex;

    flex-direction:column;

    height:100%;

}

#artistSearchResults .artist-card:hover{

    transform:translateY(-6px);

    border-color:#e11d48;

    box-shadow:0 18px 35px rgba(0,0,0,.35);

}

#artistSearchResults .artist-card img{

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

    display:block;

}

#artistSearchResults .artist-card-content{

    padding:18px;

    display:flex;

    flex-direction:column;

    flex:1;

}

#artistSearchResults .artist-card-content h3{

    margin-bottom:8px;

}

#artistSearchResults .artist-card-content h3 a{

    color:#fff;

    text-decoration:none;

}

#artistSearchResults .artist-card-content h3 a:hover{

    color:#e11d48;

}

#artistSearchResults .artist-card-content p{

    color:#bdbdbd;

    margin-bottom:8px;

}

#artistSearchResults .artist-card-footer{

    margin-top:auto;

}

/* ==========================================================
   REPORT LYRICS PAGE
========================================================== */

.contact-box{

    max-width:700px;

    margin:0 auto;

}

#reportForm{

    display:flex;

    flex-direction:column;

    gap:18px;

}

#reportForm input,
#reportForm select,
#reportForm textarea{

    width:100%;

    padding:15px 18px;

    background:#1b1b1b;

    color:#fff;

    border:1px solid #2a2a2a;

    border-radius:12px;

    font-size:15px;

    transition:.3s;

    outline:none;

    font-family:inherit;

}

#reportForm input::placeholder,
#reportForm textarea::placeholder{

    color:#8b8b8b;

}

#reportForm input:focus,
#reportForm select:focus,
#reportForm textarea:focus{

    border-color:#e11d48;

    box-shadow:0 0 0 3px rgba(225,29,72,.15);

}

#reportForm textarea{

    resize:vertical;

    min-height:180px;

}

#submitReportBtn{

    width:100%;

    padding:16px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    transition:.3s;

}

#submitReportBtn:disabled{

    opacity:.7;

    cursor:not-allowed;

}

.legal-content{

    max-width:800px;

    margin:auto;

    background:#181818;

    border:1px solid #2a2a2a;

    border-radius:18px;

    padding:35px;

}

.legal-content h2{

    margin-bottom:15px;

}

.legal-content p{

    color:#bdbdbd;

    line-height:1.8;

}

.legal-content ul{

    margin-top:20px;

    padding-left:20px;

}

.legal-content li{

    margin-bottom:12px;

    color:#bdbdbd;

}


/* ==========================================================
   TOAST NOTIFICATION
========================================================== */

#toast{

    position:fixed;

    right:25px;

    bottom:25px;

    min-width:280px;

    max-width:360px;

    padding:16px 20px;

    border-radius:12px;

    color:#fff;

    font-size:15px;

    font-weight:500;

    box-shadow:0 15px 40px rgba(0,0,0,.35);

    opacity:0;

    visibility:hidden;

    transform:translateY(30px);

    transition:.35s ease;

    z-index:99999;

}

#toast.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

#toast.success{

    background:#16a34a;

}

#toast.error{

    background:#dc2626;

}


/* ==========================================================
   MOBILE
========================================================== */
@media(max-width:768px){

    .songs,
    #featuredSong,
    #trendingSongs,
    #recentSongs{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }

    .song-meta{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:8px;
        width:100%;
    }

   .songs .song-genre,
.songs .song-views{
        min-width:0;
        flex:1;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .song-genre{
        text-align:left;
    }

    .song-views{
        text-align:right;
    }

    .song-badges{
        display:flex;
        flex-wrap:wrap;
        gap:4px;
        width:100%;
    }

    .grid,
#latestArtists,
#featuredArtists,
#topArtists{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

#searchResults,
#artistSearchResults{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

}

@media(max-width:768px){

    section.hero{
       padding:28px 14px !important;
        margin:0 !important;
        min-height:0 !important;
        border-radius:10px !important;
    }

    section.hero h1{
        font-size:1.45rem !important;
        line-height:1.15;
        margin:0 0 6px !important;
    }

    section.hero p{
        font-size:12px !important;
        line-height:1.3;
        margin:0 auto 10px !important;
    }

    section.hero .search-box{
        max-width:100%;
        margin:0 auto !important;
        padding:0 !important;
        border-radius:6px !important;
    }

    section.hero .search-box input{
        padding:10px 12px !important;
        border-radius:6px !important;
    }

    section.hero .search-box button{
        padding:10px 13px !important;
        border-radius:6px !important;
    }

}/* ==========================================================
   SONG PAGE - MOBILE
========================================================== */

@media(max-width:768px){

    #songPage .song-header{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:20px;
    }

    /* ==========================
       SONG COVER
    ========================== */

    #songPage .song-cover{
        width:100%;
        max-width:280px;
        aspect-ratio:1 / 1;
        flex-shrink:0;

        background:#e50914;

        border:1px solid #ff3333;
        border-radius:18px;
        overflow:hidden;

        box-shadow:
            0 12px 35px rgba(229,9,20,.35);
    }

    #songPage .song-cover img{
        width:100%;
        height:100%;
        object-fit:contain;
        display:block;
        padding:8px;
        border-radius:18px;
    }

    /* ==========================
       SONG INFO
    ========================== */

    #songPage .song-info{
        width:100%;
        min-width:0;
        text-align:center;
    }

    #songPage .song-info h1{
        font-size:1.7rem;
        line-height:1.2;
        margin-bottom:8px;
    }

    #songPage .song-info h2{
        font-size:1.05rem;
        margin-bottom:18px;
    }

    /* ==========================
       SONG METADATA
    ========================== */

    #songPage .song-meta{
        width:100%;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px;
        text-align:left;
    }

    #songPage .song-meta p{
        margin:0;
        padding:10px;
        background:#111;
        border:1px solid #222;
        border-radius:8px;
        min-width:0;
    }

    #songPage .song-meta strong{
        display:block;
        font-size:11px;
        color:#999;
        margin-bottom:3px;
    }

    #songPage .song-meta span{
        display:block;
        font-size:13px;
        color:#fff;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

}


/* ==========================================================
   DESKTOP RESTORE
   MOBILE IS NOT TOUCHED
========================================================== */

@media (min-width:769px){

    /* ==========================
       GENERAL SECTIONS
    ========================== */

    .section{
        padding:90px 8%;
    }

    /* ==========================
       SONG PAGE
    ========================== */

    #songPage .song-header{
        display:grid;
        grid-template-columns:320px 1fr;
        gap:45px;
        align-items:start;
    }

    #songPage .song-cover{
        width:100%;
        max-width:none;
        height:auto;
        aspect-ratio:1 / 1;
        background:#1b1b1b;
        border:1px solid #2a2a2a;
        border-radius:18px;
        overflow:hidden;
    }

    #songPage .song-cover img{
        width:100%;
        height:auto;
        aspect-ratio:1 / 1;
        object-fit:cover;
        padding:0;
        border-radius:0;
    }

    #songPage .song-info{
        width:auto;
        text-align:left;
    }

    #songPage .song-info h1{
        font-size:2.5rem;
        line-height:1.2;
        margin-bottom:12px;
    }

    #songPage .song-info h2{
        margin-bottom:28px;
    }

    #songPage .song-meta{
        display:grid;
        grid-template-columns:repeat(2,minmax(170px,1fr));
        gap:18px;
        width:auto;
        text-align:left;
    }

    #songPage .song-meta p{
        background:#1b1b1b;
        border:1px solid #252525;
        border-radius:12px;
        padding:15px;
        margin:0;
    }

    #songPage .song-meta strong{
        display:block;
        color:#888;
        font-size:.85rem;
        margin-bottom:5px;
        text-transform:uppercase;
        letter-spacing:.5px;
    }

    #songPage .song-meta span{
        display:inline;
        font-size:1.05rem;
        font-weight:600;
        color:#fff;
        white-space:normal;
        overflow:visible;
        text-overflow:clip;
    }

    /* ==========================
       NORMAL SONG CARDS
    ========================== */

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

    /* ==========================
       ARTIST CARDS
    ========================== */

    .artists-grid{
        display:grid;
        grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
        gap:30px;
    }

    .featured-artists{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
        gap:30px;
    }

    /* ==========================
       FEATURED CARD
    ========================== */

    .featured-card{
        display:flex;
        align-items:center;
        gap:35px;
        padding:35px;
    }

    .featured-card img{
        width:260px;
        height:260px;
        object-fit:cover;
        flex-shrink:0;
    }

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

    #searchResults,
    #artistSearchResults{
        display:grid;
        grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
        gap:24px;
    }

    /* ==========================
       OTHER GRIDS
    ========================== */

    #relatedSongs,
    #artistMoreSongs{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
        gap:28px;
    }

    #latestArtists,
    #topArtists,
    #relatedArtists{
        display:grid;
        grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
        gap:24px;
    }

}

@media(max-width:768px){

    #artistMoreSongs{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }

}


@media(max-width:768px){

    #artistMoreSongs,
    #relatedSongs{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }

}

@media(max-width:768px){

    #relatedArtists{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }

}

@media(max-width:768px){

    #featuredArtists{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
        width:100%;
        max-width:100%;
        padding:0;
    }

    #featuredArtists .artist-card{
        width:100%;
        min-width:0;
        margin:0;
    }

    #featuredArtists .artist-card img{
        width:100%;
        height:180px;
        object-fit:cover;
    }

    #featuredArtists .artist-card-content{
        padding:12px;
    }

    #featuredArtists .artist-card-content h3{
        font-size:15px;
    }

}


@media(max-width:768px){

    .site-footer{
        margin-top:40px;
        padding:22px 15px;
    }

    .footer-links{
        gap:10px 16px;
        margin-bottom:12px;
    }

    .footer-links a{
        font-size:12px;
        min-height:auto;
    }

    .footer-copy{
        font-size:12px;
        margin-bottom:5px;
    }

    .footer-company{
        font-size:12px;
        margin-top:4px;
    }

}

/* ==========================================================
   XIT FINAL BRAND / YOUTUBE POLISH
   ========================================================== */
.xit-mma-red{color:#e50914;font-weight:800;}
.mma-xitmusic-logo{
    width:78px;
    height:auto;
    max-height:34px;
    object-fit:contain;
    object-position:left center;
}
.mma-xit-music-word{color:#fff;}

@media (min-width:769px){
    .youtube-video-wrap{
        max-width:760px;
        margin-left:auto;
        margin-right:auto;
    }
}

/* More engaging XITMUSIC background without changing layout */
body{
    background:
        radial-gradient(circle at 12% 8%, rgba(229,9,20,.10), transparent 28%),
        radial-gradient(circle at 88% 18%, rgba(255,0,70,.08), transparent 26%),
        linear-gradient(135deg,#080808 0%,#101010 52%,#070707 100%);
}

.hero{
    background-image:
      radial-gradient(circle at 20% 20%, rgba(229,9,20,.22), transparent 35%),
      radial-gradient(circle at 80% 35%, rgba(255,45,95,.12), transparent 32%),
      linear-gradient(135deg, rgba(8,8,8,.94), rgba(20,10,14,.92));
    background-size:cover;
    background-position:center;
}

.youtube-video-wrap iframe{
    width:100%;
    height:100%;
    display:block;
    border:0;
}

/* XITMUSIC enhanced background */
body{background:radial-gradient(circle at 10% 8%,rgba(229,9,20,.14),transparent 30%),radial-gradient(circle at 90% 16%,rgba(255,0,70,.10),transparent 28%),linear-gradient(135deg,#050505,#111,#070707);background-attachment:fixed}
.hero{background-image:radial-gradient(circle at 18% 22%,rgba(229,9,20,.24),transparent 34%),radial-gradient(circle at 82% 34%,rgba(255,45,95,.14),transparent 32%),linear-gradient(135deg,rgba(5,5,5,.93),rgba(24,8,13,.91));background-size:cover;background-position:center}
@media (min-width:769px){.youtube-video-wrap{max-width:680px!important;margin-left:auto;margin-right:auto}.youtube-video-wrap iframe{max-height:382px}}

/* XITMMA atmospheric background */
body{
  background:
    radial-gradient(ellipse at 15% 10%, rgba(229,9,20,.24) 0%, transparent 30%),
    radial-gradient(ellipse at 85% 15%, rgba(180,0,35,.20) 0%, transparent 28%),
    radial-gradient(ellipse at 50% 55%, rgba(255,255,255,.035) 0%, transparent 38%),
    radial-gradient(ellipse at 20% 90%, rgba(229,9,20,.12) 0%, transparent 32%),
    linear-gradient(125deg,#030303 0%,#0b0b0d 38%,#15090d 68%,#040404 100%);
  background-attachment: fixed;
  background-size: 140% 140%;
}
.mma-magazine-info{
  margin-top:14px;
  padding:12px 14px;
  border:1px solid rgba(229,9,20,.28);
  border-radius:10px;
  background:linear-gradient(135deg,rgba(229,9,20,.08),rgba(255,255,255,.025));
}
.mma-magazine-info strong{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#e50914}
.mma-magazine-info span{display:block;margin-top:4px;color:#ddd;font-size:.88rem}

/* card magazine spacing */
.mma-magazine-info{box-sizing:border-box;width:100%;margin-top:12px}

/* product-driven magazine card */
.mma-magazine-info{margin:12px 0 2px;padding:10px 12px;border:1px solid rgba(229,9,20,.3);border-radius:9px;background:rgba(229,9,20,.06)}
.mma-magazine-info strong{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#e50914}
.mma-magazine-info span{display:block;margin-top:4px;font-size:13px;color:#eee}

/* FIX: product-saved magazine edition */
.mma-magazine-info{
  display:block!important;
  width:100%;
  margin-top:10px;
  padding:9px 11px;
  box-sizing:border-box;
  border:1px solid rgba(229,9,20,.35);
  border-radius:8px;
  background:rgba(229,9,20,.07);
}
.mma-magazine-info strong{display:block!important;color:#e50914;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.mma-magazine-info span{display:block!important;color:#fff;font-size:12px;margin-top:3px}


/* ==========================================================
   INDEX MOBILE SEARCH — PREMIUM / ENTICING
   Mobile-only polish. Desktop layout remains unchanged.
========================================================== */

@media (max-width: 768px){

    #homePage section.hero .search-box{
        width:100% !important;
        max-width:680px !important;
        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        gap:8px !important;
        margin:16px auto 0 !important;
        padding:6px !important;
        box-sizing:border-box !important;
        border:1px solid rgba(255,255,255,.09) !important;
        border-radius:18px !important;
        background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(229,9,20,.09)) !important;
        box-shadow:0 12px 34px rgba(0,0,0,.34), 0 0 28px rgba(229,9,20,.08) !important;
        backdrop-filter:blur(10px);
        -webkit-backdrop-filter:blur(10px);
    }

    #homePage section.hero .search-box input{
        flex:1 1 auto !important;
        min-width:0 !important;
        width:auto !important;
        height:52px !important;
        padding:0 15px 0 44px !important;
        box-sizing:border-box !important;
        border:1px solid rgba(255,255,255,.08) !important;
        border-radius:13px !important;
        background-color:#111 !important;
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23e50914' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important;
        background-repeat:no-repeat !important;
        background-position:15px center !important;
        background-size:20px 20px !important;
        color:#fff !important;
        font-size:16px !important;
        font-weight:500 !important;
        line-height:1 !important;
        -webkit-appearance:none !important;
        appearance:none !important;
        box-shadow:inset 0 0 0 1px rgba(255,255,255,.015) !important;
        transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease !important;
    }

    #homePage section.hero .search-box input::placeholder{
        color:#aaa !important;
        opacity:1 !important;
        font-size:13px !important;
        letter-spacing:.1px;
    }

    #homePage section.hero .search-box input:focus{
        outline:none !important;
        border-color:rgba(229,9,20,.8) !important;
        background-color:#151515 !important;
        box-shadow:0 0 0 3px rgba(229,9,20,.14), inset 0 0 18px rgba(229,9,20,.04) !important;
    }

    #homePage section.hero .search-box button{
        flex:0 0 96px !important;
        width:96px !important;
        height:52px !important;
        padding:0 12px !important;
        border:1px solid rgba(255,255,255,.08) !important;
        border-radius:13px !important;
        font-size:13px !important;
        font-weight:700 !important;
        letter-spacing:.2px !important;
        line-height:1 !important;
        white-space:nowrap !important;
        -webkit-tap-highlight-color:transparent !important;
        box-shadow:0 8px 20px rgba(229,9,20,.18) !important;
        transition:transform .15s ease, box-shadow .2s ease, filter .2s ease !important;
    }

    #homePage section.hero .search-box button:active{
        transform:scale(.97) !important;
    }

    #homePage section.hero .search-box button:hover{
        filter:brightness(1.06);
    }

}

@media (max-width: 420px){

    #homePage section.hero .search-box{
        gap:6px !important;
        padding:5px !important;
        border-radius:16px !important;
    }

    #homePage section.hero .search-box input{
        height:50px !important;
        padding-left:40px !important;
        padding-right:12px !important;
        background-position:13px center !important;
        background-size:19px 19px !important;
    }

    #homePage section.hero .search-box input::placeholder{
        font-size:12px !important;
    }

    #homePage section.hero .search-box button{
        flex-basis:84px !important;
        width:84px !important;
        height:50px !important;
        padding:0 8px !important;
        font-size:12px !important;
    }

}

/* ==========================================================
   SEARCH PAGE MOBILE SEARCH — PREMIUM / ENTICING
   Matches the polished XIT home search without changing desktop.
========================================================== */
@media (max-width: 768px){

    #searchPage section.hero .search-box{
        width:100% !important;
        max-width:680px !important;
        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        gap:8px !important;
        margin:16px auto 0 !important;
        padding:6px !important;
        box-sizing:border-box !important;
        border:1px solid rgba(255,255,255,.09) !important;
        border-radius:18px !important;
        background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(229,9,20,.09)) !important;
        box-shadow:0 12px 34px rgba(0,0,0,.34),0 0 28px rgba(229,9,20,.08) !important;
        backdrop-filter:blur(10px);
        -webkit-backdrop-filter:blur(10px);
    }

    #searchPage section.hero .search-box input{
        flex:1 1 auto !important;
        min-width:0 !important;
        width:auto !important;
        height:52px !important;
        padding:0 15px 0 44px !important;
        box-sizing:border-box !important;
        border:1px solid rgba(255,255,255,.08) !important;
        border-radius:13px !important;
        background-color:#111 !important;
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23e50914' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important;
        background-repeat:no-repeat !important;
        background-position:15px center !important;
        background-size:20px 20px !important;
        color:#fff !important;
        font-size:16px !important;
        font-weight:500 !important;
        line-height:1 !important;
        -webkit-appearance:none !important;
        appearance:none !important;
        transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease !important;
    }

    #searchPage section.hero .search-box input::placeholder{
        color:#aaa !important;
        opacity:1 !important;
        font-size:13px !important;
    }

    #searchPage section.hero .search-box input:focus{
        outline:none !important;
        border-color:rgba(229,9,20,.8) !important;
        background-color:#151515 !important;
        box-shadow:0 0 0 3px rgba(229,9,20,.14),inset 0 0 18px rgba(229,9,20,.04) !important;
    }

    #searchPage section.hero .search-box button{
        flex:0 0 96px !important;
        width:96px !important;
        height:52px !important;
        padding:0 12px !important;
        border:1px solid rgba(255,255,255,.08) !important;
        border-radius:13px !important;
        font-size:13px !important;
        font-weight:700 !important;
        letter-spacing:.2px !important;
        white-space:nowrap !important;
        box-shadow:0 8px 20px rgba(229,9,20,.18) !important;
    }

}

@media (max-width:420px){
    #searchPage section.hero .search-box{
        gap:6px !important;
        padding:5px !important;
        border-radius:16px !important;
    }

    #searchPage section.hero .search-box input{
        height:50px !important;
        padding-left:40px !important;
        padding-right:12px !important;
        background-position:13px center !important;
        background-size:19px 19px !important;
    }

    #searchPage section.hero .search-box input::placeholder{
        font-size:12px !important;
    }

    #searchPage section.hero .search-box button{
        flex-basis:84px !important;
        width:84px !important;
        height:50px !important;
        padding:0 8px !important;
        font-size:12px !important;
    }
}

/* ==========================================================
   XIT — HIGH-END CINEMATIC BACKGROUND
   Premium black / deep-red atmospheric finish
========================================================== */
body{
    background:
        radial-gradient(900px 520px at 8% 0%, rgba(229,9,20,.16), transparent 62%),
        radial-gradient(760px 520px at 94% 12%, rgba(140,0,35,.13), transparent 62%),
        radial-gradient(820px 620px at 52% 48%, rgba(255,255,255,.025), transparent 68%),
        radial-gradient(700px 520px at 8% 96%, rgba(229,9,20,.09), transparent 65%),
        radial-gradient(700px 520px at 96% 90%, rgba(90,0,30,.10), transparent 65%),
        linear-gradient(125deg,#020203 0%,#070709 30%,#10070b 58%,#080607 78%,#010102 100%);
    background-attachment:fixed;
    background-size:auto,auto,auto,auto,auto,100% 100%;
    min-height:100vh;
}

/* Subtle luxury light field — deliberately restrained so content stays dominant. */
body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;
    background:
        linear-gradient(115deg, transparent 0%, rgba(255,255,255,.018) 38%, transparent 54%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.008) 0, rgba(255,255,255,.008) 1px, transparent 1px, transparent 72px);
    opacity:.7;
}

/* Premium depth for major content surfaces. */
.section{
    position:relative;
}

.hero{
    position:relative;
    isolation:isolate;
}

.hero::before{
    content:"";
    position:absolute;
    inset:8% 5%;
    z-index:-1;
    border-radius:40px;
    background:
        radial-gradient(circle at 50% 20%, rgba(229,9,20,.10), transparent 42%),
        linear-gradient(135deg, rgba(255,255,255,.018), transparent 45%, rgba(229,9,20,.035));
    filter:blur(2px);
    pointer-events:none;
}

@media(max-width:768px){
    body{
        background-attachment:scroll;
        background-size:auto,auto,auto,auto,auto,cover;
    }
    body::before{
        opacity:.45;
    }
}

/* ==========================================================
   XIT FINAL VISUAL PASS — September 2026
   ========================================================== */
/* Plain XIT background: CSS-only strokes, no background page/image dependency. */
body{
    background-color:#030303;
    background-image:
        radial-gradient(ellipse at 12% 18%, rgba(225,29,72,.10), transparent 28%),
        radial-gradient(ellipse at 88% 78%, rgba(225,29,72,.08), transparent 30%),
        linear-gradient(120deg, transparent 0 43%, rgba(225,29,72,.045) 43.2%, transparent 44.1%),
        linear-gradient(120deg, transparent 0 69%, rgba(255,255,255,.018) 69.2%, transparent 70%),
        linear-gradient(120deg, transparent 0 84%, rgba(225,29,72,.035) 84.2%, transparent 85%);
    background-attachment:fixed;
    position:relative;
}

/* Decorative strokes are painted directly with CSS so the site stays lightweight. */
body::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;
    opacity:.9;
    background:
        linear-gradient(132deg, transparent 0 7%, rgba(225,29,72,.72) 7.15%, rgba(225,29,72,.10) 7.55%, transparent 8.2%),
        linear-gradient(132deg, transparent 0 12%, rgba(225,29,72,.28) 12.1%, transparent 12.7%),
        linear-gradient(132deg, transparent 0 91%, rgba(225,29,72,.65) 91.15%, rgba(225,29,72,.08) 91.7%, transparent 92.4%),
        linear-gradient(132deg, transparent 0 96%, rgba(225,29,72,.25) 96.1%, transparent 96.7%);
    mix-blend-mode:screen;
}

.hero{
    background:transparent;
}

/* Desktop: bring Featured Songs closer to the search/hero area. */
@media (min-width: 901px){
    .hero{
        min-height:480px;
        padding:56px 8% 34px;
    }
    .section:first-of-type{
        padding-top:24px;
    }
}

/* Final background layer: lightweight stroke artwork, no dependency on external hero assets. */
@media (min-width: 901px){
  #homePage .hero{margin-bottom:0;}
  #homePage .section:first-of-type{margin-top:0; padding-top:20px;}
}

/* ==========================================================
   XIT FINAL COLOUR STROKES — CSS ONLY
   No background image/page dependency.
   Keeps the dark XIT identity while adding controlled colour.
========================================================== */
body{
    background-color:#050505;
    background-image:
        radial-gradient(ellipse 42% 30% at 8% 14%, rgba(255,30,70,.20), transparent 70%),
        radial-gradient(ellipse 38% 28% at 92% 18%, rgba(154,52,255,.16), transparent 72%),
        radial-gradient(ellipse 34% 26% at 12% 86%, rgba(255,128,0,.12), transparent 72%),
        radial-gradient(ellipse 40% 30% at 90% 82%, rgba(0,190,255,.10), transparent 72%),
        linear-gradient(145deg,#050505 0%,#0a080c 45%,#050607 100%);
    background-attachment:fixed;
}

body::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    opacity:.88;
    background:
        linear-gradient(132deg, transparent 0 5%, rgba(255,30,70,.70) 5.12%, rgba(255,30,70,.18) 5.55%, transparent 6.35%),
        linear-gradient(132deg, transparent 0 9%, rgba(255,112,0,.38) 9.10%, rgba(255,112,0,.06) 9.55%, transparent 10.2%),
        linear-gradient(132deg, transparent 0 16%, rgba(255,0,128,.25) 16.08%, transparent 16.65%),
        linear-gradient(132deg, transparent 0 47%, rgba(157,55,255,.22) 47.08%, transparent 47.55%),
        linear-gradient(132deg, transparent 0 73%, rgba(0,196,255,.18) 73.10%, transparent 73.62%),
        linear-gradient(132deg, transparent 0 89%, rgba(255,30,70,.65) 89.12%, rgba(255,30,70,.10) 89.72%, transparent 90.5%),
        linear-gradient(132deg, transparent 0 94%, rgba(255,136,0,.30) 94.10%, transparent 94.75%);
    mix-blend-mode:screen;
}

/* Fine coloured energy lines add depth without using an image. */
body::before{
    content:"";
    position:fixed;
    inset:-20%;
    z-index:-2;
    pointer-events:none;
    opacity:.42;
    background:
        repeating-linear-gradient(133deg,
            transparent 0 92px,
            rgba(255,35,80,.07) 93px,
            transparent 95px 150px),
        repeating-linear-gradient(132deg,
            transparent 0 138px,
            rgba(132,50,255,.045) 139px,
            transparent 141px 210px);
    transform:rotate(-2deg);
}

.hero{
    background:transparent !important;
}

@media (max-width:768px){
    body{background-attachment:scroll;}
    body::after{opacity:.58;}
    body::before{opacity:.24;}
}


/* ==========================================================
   XIT FINAL SPACING + PATH-SAFE HOMEPAGE
   Desktop: keep Featured Songs visually close to search.
   ========================================================== */
@media (min-width: 901px){
  #homePage .hero{
    min-height: 0 !important;
    padding-top: 56px !important;
    padding-bottom: 12px !important;
    margin-bottom: 0 !important;
  }

  #homePage .hero .search-box{
    margin-bottom: 0 !important;
  }

  #homePage .hero + .section{
    padding-top: 18px !important;
    margin-top: 0 !important;
  }
}

/* Plain CSS-only colourful XIT atmosphere; no background page/image dependency. */
#homePage{
  background-color:#050505;
  background-image:
    radial-gradient(circle at 8% 18%, rgba(229,9,20,.18), transparent 28%),
    radial-gradient(circle at 88% 30%, rgba(180,35,255,.13), transparent 26%),
    radial-gradient(circle at 50% 88%, rgba(255,90,30,.10), transparent 30%);
}
#homePage::before{
  content:"";
  position:fixed;
  inset:-20%;
  z-index:-1;
  pointer-events:none;
  opacity:.5;
  background:
    linear-gradient(122deg, transparent 22%, rgba(229,9,20,.13) 23%, transparent 24%),
    linear-gradient(148deg, transparent 56%, rgba(255,45,95,.10) 57%, transparent 58%),
    linear-gradient(72deg, transparent 72%, rgba(130,70,255,.09) 73%, transparent 74%);
  transform:rotate(-4deg);
}