:root{
  --bg:#080808;
  --bg2:#111111;
  --bg3:#1a1a1a;
  --gold:#c9a84c;
  --gold2:#e8c56d;
  --red:#d4001a;
  --text:#f0ede4;
  --muted:#888880;
  --border:#2a2a2a;
  --radius:10px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,sans-serif;min-height:100vh;line-height:1.6}

/* SCROLLBAR */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px}

/* NAV */
nav{background:rgba(8,8,8,0.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:64px;position:sticky;top:0;z-index:100}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-logo{width:36px;height:36px;background:linear-gradient(135deg,var(--red),var(--gold));border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1rem;color:#fff}
.nav-title{font-size:1.1rem;font-weight:700;color:var(--gold);letter-spacing:.05em}
.nav-links{display:flex;align-items:center;gap:24px}
.nav-links a{color:var(--muted);text-decoration:none;font-size:.88rem;transition:color .2s}
.nav-links a:hover{color:var(--gold)}
.nav-search{display:flex;align-items:center;gap:8px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:6px 12px;position:relative}
.nav-search input{background:none;border:none;color:var(--text);font-size:.85rem;width:180px;outline:none}
.nav-search input::placeholder{color:var(--muted)}
#search-dropdown{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--bg2);border:1px solid var(--border);border-radius:10px;overflow:hidden;display:none;z-index:200;min-width:320px}
.search-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background .15s}
.search-item:hover{background:var(--bg3)}
.search-item img{width:36px;height:36px;object-fit:cover;border-radius:6px;background:var(--bg3);flex-shrink:0}
.search-item-info{flex:1;min-width:0}
.search-item-title{font-size:.82rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-item-sub{font-size:.72rem;color:var(--muted)}

/* HERO */
.hero{background:linear-gradient(135deg,#0a0000 0%,#1a0800 40%,#0a0a0a 100%);border-bottom:1px solid var(--border);padding:80px 24px;text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 50% 0%,rgba(201,168,76,.12) 0%,transparent 70%)}
.hero-flag{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:20px}
.hero-flag span{font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.flag-line{width:40px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.flag-line.r{background:linear-gradient(90deg,var(--gold),transparent)}
.hero h1{font-size:clamp(2.5rem,6vw,5rem);font-weight:900;line-height:1;margin-bottom:16px;background:linear-gradient(135deg,var(--gold2),var(--gold),#a07830);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-sub{font-size:1.1rem;color:var(--muted);max-width:600px;margin:0 auto 40px}
.hero-stats{display:flex;justify-content:center;gap:48px;flex-wrap:wrap}
.stat{text-align:center}
.stat-num{font-size:2.2rem;font-weight:900;color:var(--gold);line-height:1}
.stat-label{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}

/* SECTIONS */
.section{padding:48px 24px;max-width:1200px;margin:0 auto}
.section-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.section-title{font-size:1.2rem;font-weight:700;color:var(--text);display:flex;align-items:center;gap:10px}
.section-title::before{content:'';width:4px;height:20px;background:var(--gold);border-radius:2px;display:inline-block}
.section-link{color:var(--gold);font-size:.82rem;text-decoration:none;opacity:.8}
.section-link:hover{opacity:1}

/* ALBUM GRID */
.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
.album-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;text-decoration:none;transition:transform .2s,border-color .2s;display:block}
.album-card:hover{transform:translateY(-4px);border-color:var(--gold)}
.album-cover{width:100%;aspect-ratio:1;object-fit:cover;background:var(--bg3);display:block}
.album-cover-placeholder{width:100%;aspect-ratio:1;background:linear-gradient(135deg,var(--bg3),var(--bg2));display:flex;align-items:center;justify-content:center;font-size:2.5rem}
.album-info{padding:10px 12px}
.album-title{font-size:.8rem;font-weight:600;color:var(--text);line-height:1.3;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.album-artist{font-size:.72rem;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.album-year{font-size:.68rem;color:var(--muted);margin-top:2px}

/* ARTIST GRID */
.artist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.artist-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:16px;text-decoration:none;display:flex;align-items:center;gap:12px;transition:border-color .2s,background .2s}
.artist-card:hover{border-color:var(--gold);background:var(--bg3)}
.artist-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--red),var(--gold));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;color:#fff;flex-shrink:0}
.artist-name{font-size:.85rem;font-weight:600;color:var(--text);line-height:1.2}
.artist-count{font-size:.72rem;color:var(--muted);margin-top:2px}

/* LETTER BAR */
.letter-bar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:28px}
.letter-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:6px;font-size:.82rem;font-weight:700;text-decoration:none;border:1px solid var(--border);color:var(--muted);transition:all .2s}
.letter-btn:hover,.letter-btn.active{background:var(--gold);color:#000;border-color:var(--gold)}

/* TRACKLIST */
.tracklist{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.track-row{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--border);transition:background .15s}
.track-row:last-child{border-bottom:none}
.track-row:hover{background:var(--bg3)}
.track-num{color:var(--muted);font-size:.78rem;min-width:24px;text-align:right}
.track-title{flex:1;font-size:.88rem;color:var(--text)}

/* ALBUM HERO */
.album-hero{display:flex;gap:32px;align-items:flex-start;padding:48px 24px;max-width:1200px;margin:0 auto;flex-wrap:wrap}
.album-cover-large{width:240px;height:240px;object-fit:cover;border-radius:12px;flex-shrink:0;background:var(--bg3);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.album-cover-large-placeholder{width:240px;height:240px;border-radius:12px;background:linear-gradient(135deg,var(--bg3),var(--bg2));display:flex;align-items:center;justify-content:center;font-size:5rem;flex-shrink:0}
.album-meta h1{font-size:clamp(1.5rem,4vw,2.5rem);font-weight:900;color:var(--text);margin-bottom:8px}
.album-meta .artist-link{color:var(--gold);font-size:1.1rem;text-decoration:none;font-weight:600}
.album-meta .artist-link:hover{color:var(--gold2)}
.album-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.badge{background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:4px 12px;font-size:.75rem;color:var(--muted)}
.badge.gold{border-color:var(--gold);color:var(--gold)}

/* YEAR TIMELINE */
.year-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.year-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:16px;text-align:center;text-decoration:none;transition:all .2s}
.year-card:hover{border-color:var(--gold);background:var(--bg3);transform:translateY(-2px)}
.year-num{font-size:1.4rem;font-weight:900;color:var(--gold)}
.year-count{font-size:.72rem;color:var(--muted);margin-top:4px}

/* ABOUT */
.about-content{max-width:800px;margin:0 auto;padding:48px 24px}
.about-content h1{font-size:2.5rem;font-weight:900;color:var(--gold);margin-bottom:8px}
.about-content h2{font-size:1.3rem;font-weight:700;color:var(--gold);margin:32px 0 12px;padding-left:12px;border-left:3px solid var(--red)}
.about-content p{color:var(--muted);line-height:1.8;margin-bottom:16px;font-size:.95rem}
.about-content .highlight{color:var(--text)}

/* FOOTER */
footer{background:var(--bg2);border-top:1px solid var(--border);padding:32px 24px;text-align:center;margin-top:80px}
footer p{color:var(--muted);font-size:.8rem}
footer strong{color:var(--gold)}

/* RESPONSIVE */
@media(max-width:600px){
  .nav-links{display:none}
  .hero{padding:48px 16px}
  .album-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
  .album-hero{flex-direction:column}
  .album-cover-large,.album-cover-large-placeholder{width:100%;height:auto;aspect-ratio:1}
}

@keyframes floatPulse{0%,100%{transform:translateX(0);box-shadow:-4px 4px 20px rgba(201,168,76,.3)}50%{transform:translateX(-4px);box-shadow:-8px 4px 28px rgba(201,168,76,.5)}}

.track-row{display:flex;align-items:center;gap:10px}
.preview-btn{margin-left:auto;background:#1a1a1a;border:1px solid #2a2a2a;color:#c9a84c;width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:.75rem;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
.preview-btn:hover{border-color:#c9a84c;background:#1a0800}
.preview-btn.playing{background:#c9a84c;color:#000;animation:pulse 1s infinite}
.preview-btn.loading{opacity:.5;cursor:wait}