/* --- SINGLE ISLAND STYLES --- */
html,body{
    background: var(--single-bg) !important;
    color:#fff;
    font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
    scroll-behavior:smooth
}
.topbar{background:rgba(10,10,15,.7)}
.topbar-inner{max-width:1200px;margin:auto;padding:10px 16px;display:flex;align-items:center;gap:14px}

/* FIXED: Force correct brand gradient - Purple → Magenta → Gold */
.brand .mark{
    width:34px;
    height:34px;
    border-radius:10px;
    background: linear-gradient(135deg, rgba(108,43,217,.95), rgba(225,29,72,.95) 40%, rgba(251,191,36,.95)) !important;
    box-shadow:0 0 0 2px rgba(255,255,255,.08) inset
}

.brand h1{font-size:16px;letter-spacing:.4px;margin:0;font-weight:700}
.quicknav{margin-left:auto;display:flex;gap:8px;overflow:auto;padding-bottom:2px}
.quicknav a{opacity:.9; border:1px solid rgba(255,255,255,.12); font-size:13px; line-height:1; white-space:nowrap; padding: 8px 12px;}
.quicknav a.active{border-color:var(--single-gold);box-shadow:0 0 0 3px var(--single-ring);opacity:1}
.hero{position:relative;min-height:62vh;display:grid;place-items:center;border-bottom:1px solid rgba(255,255,255,.06); padding: 0;}
.hero .bg{position:absolute;inset:0;overflow:hidden}
.hero video{width:100%;height:100%;object-fit:cover;filter:grayscale(.1) contrast(1.05) brightness(.75)}
.hero .overlay{position:absolute;inset:0;background:radial-gradient(1200px 600px at 20% 20%, rgba(111,45,189,.35), transparent 60%), linear-gradient(180deg, rgba(10,10,15,.65), rgba(10,10,15,.95))}
.hero .content{position:relative;z-index:1;max-width:1100px;margin:auto;padding:60px 16px;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(0,0,0,.35);font-size:12px;color:var(--single-muted)}
.title{font-size:clamp(28px,6vw,60px);margin:16px 0 8px;font-weight:900;letter-spacing:.3px}
.subtitle{font-size:clamp(14px,2.2vw,18px);color:#e6e6f0;opacity:.95;max-width:850px;margin:0 auto}
.hero-cta{margin-top:20px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);font-weight:600}
.btn--gold{background:linear-gradient(180deg,#ffd463,#f5b700);color:#1a1200;border:none}
.wrap{max-width:1200px;margin:auto;padding:36px 16px}
.section{padding:18px 0 40px;border-bottom:1px solid rgba(255,255,255,.06)}
.section:last-child{border-bottom:0}
.section-header{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}
.section h2{margin:0;font-size:clamp(20px,3.5vw,30px)}
.section p.lead{color:#d7d9df;opacity:.95;margin:6px 0 0}
.tag{font-size:12px;padding:6px 10px;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:#e9e9f3}
.overview{display:grid;grid-template-columns:1.2fr .8fr;gap:22px}
.ov-card{background:var(--single-card);border:1px solid rgba(255,255,255,.06);border-radius:var(--single-radius);padding:18px;box-shadow:var(--single-shadow)}
.ov-card h3{margin:0 0 8px;font-size:18px}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
.fact{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:10px}
.fact .k{font-size:12px;color:var(--single-muted)}
.fact .v{font-weight:700}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)} .overview{grid-template-columns:1fr}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}
.card{background:var(--single-card);border:1px solid rgba(255,255,255,.06);border-radius:var(--single-radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--single-shadow)}
.thumb{position:relative;aspect-ratio:16/9;background:#0b0d12}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .badge{position:absolute;left:10px;top:10px;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12);font-size:12px}
.content{padding:14px 14px 16px;display:flex;flex-direction:column;gap:10px; flex-grow: 1;}
.meta{display:flex;gap:10px;flex-wrap:wrap;color:var(--single-muted);font-size:12px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12)}
.actions{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}
.music{display:grid;grid-template-columns:1fr .9fr;gap:18px}
@media (max-width:900px){.music{grid-template-columns:1fr}}
.player{background:var(--single-card);border:1px solid rgba(255,255,255,.06);border-radius:var(--single-radius-lg);padding:18px}
.player .now{display:flex;gap:14px}
.player .cover{width:90px;height:90px;border-radius:14px;overflow:hidden;background:#0b0d12}
.player .title{font-weight:800;font-size:18px;margin:0}
.player .artist{color:var(--single-muted);font-size:13px;margin-top:2px}
.controls{display:flex;align-items:center;gap:10px;margin-top:12px}
.controls button{padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;cursor:pointer}
.playlist{background:var(--single-card);border:1px solid rgba(255,255,255,.06);border-radius:var(--single-radius);padding:10px;max-height:380px;overflow:auto}
.track{display:flex;gap:10px;align-items:center;padding:10px;border-radius:12px;cursor:pointer}
.track:hover{background:rgba(255,255,255,.04)}
.track.active{outline:2px solid var(--single-gold);background:rgba(245,183,0,.06)}
.track .tmeta{font-size:12px;color:var(--single-muted)}
.row{display:flex;gap:10px;flex-wrap:wrap}
.spacer{height:18px}
.center{text-align:center}
.muted{color:var(--single-muted)}
.badge-gold{background:rgba(245,183,0,.12);border-color:rgba(245,183,0,.45)}
.to-top{position:fixed;right:14px;bottom:14px;z-index:40;display:none}
.to-top.show{display:block}