:root {
  --bg: #0e0e0e;
  --card-bg: #161616;
  --border: #2a2a2a;
  --purple: #6A2ED1;
  --text: #f1f1f1;
  --muted: #aaa;
  --heading-font: 'Newsreader', 'Georgia', serif;
  --body-font: 'Inter', sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--body-font); background:var(--bg); color:var(--text); line-height:1.6; }
.container { max-width:1300px; margin:0 auto; padding:0 30px; }
.sticky-nav { position:sticky; top:0; z-index:1000; background:#111; border-bottom:2px solid var(--border); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; padding:14px 30px; max-width:1300px; margin:0 auto; }
.logo-area { display:flex; align-items:center; gap:12px; font-weight:700; font-size:2rem; color:#fff; }
.interrobang-icon { font-size:2.4rem; font-weight:800; color:#fff; background:var(--purple); width:48px; height:48px; display:flex; align-items:center; justify-content:center; border:2px solid #fff; }
.logo-text { font-family:var(--heading-font); font-weight:700; color:#fff; text-shadow:2px 2px 0 var(--purple); font-size:2rem; }
.nav-links { display:flex; gap:2rem; align-items:center; font-weight:600; font-size:1rem; }
.nav-links a { color:#bbb; text-decoration:none; padding:6px 0; border-bottom:2px solid transparent; }
.nav-links a:hover, .nav-links a.active { color:#fff; border-bottom-color:var(--purple); }
.search-profile { display:flex; align-items:center; gap:15px; }
.profile-icon { background:var(--purple); width:42px; height:42px; display:flex; align-items:center; justify-content:center; font-weight:bold; color:white; border:2px solid #fff; }

.carousel-wrapper { margin-top:30px; margin-bottom:40px; overflow:hidden; background:#151515; border-top:2px solid var(--border); border-bottom:2px solid var(--border); padding:24px 0; }
.carousel-track { display:flex; width:max-content; animation:scrollLeft 45s linear infinite; }
.carousel-item { display:flex; flex-direction:column; flex-shrink:0; width:680px; height:460px; background:#1c1c1c; border:2px solid var(--border); margin-right:24px; text-decoration:none; color:white; transition:border-color 0.2s; overflow:hidden; }
.carousel-item:hover { border-color:var(--purple); }
.carousel-image { height:68%; background-size:cover; background-position:center; position:relative; background-color:#2a2a2a; }
.carousel-image-badge { position:absolute; top:20px; left:20px; background:rgba(0,0,0,0.8); color:var(--purple); font-family:var(--heading-font); font-weight:700; text-transform:uppercase; letter-spacing:2px; font-size:0.9rem; padding:8px 18px; border:2px solid var(--purple); }
.carousel-text { height:32%; padding:20px 24px; background:#161616; display:flex; flex-direction:column; justify-content:center; border-top:2px solid var(--border); }
.carousel-title { font-family:var(--heading-font); font-size:2rem; font-weight:700; margin-bottom:8px; }
.carousel-sub { color:#ccc; font-size:1.1rem; }
@keyframes scrollLeft { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }

.section-title { font-family:var(--heading-font); font-size:2.4rem; font-weight:700; margin:40px 0 20px; border-bottom:3px solid var(--purple); padding-bottom:12px; }

.cards-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:20px; }
.card { background:var(--card-bg); border:2px solid #2a2a2a; overflow:hidden; cursor:pointer; }
.card:hover { border-color:var(--purple); }
.card-img { height:130px; background:#202020; display:flex; align-items:center; justify-content:center; font-size:2.4rem; color:var(--purple); border-bottom:2px solid #2e2e2e; }
.card-content { padding:16px; }
.card-title { font-weight:700; font-size:1.1rem; }
.card-sub { font-size:0.85rem; color:var(--muted); margin-top:6px; }

.song-hero { display:flex; gap:30px; background:#161616; border:2px solid var(--border); padding:30px; margin:30px 0; align-items:center; flex-wrap:wrap; }
.song-cover { width:200px; height:200px; background:#2a2a2a; border:2px solid var(--purple); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.song-cover img { width:100%; height:100%; object-fit:cover; }
.song-hero-info { flex:1; display:flex; flex-direction:column; gap:12px; }
.song-hero-title { font-family:var(--heading-font); font-size:2.6rem; font-weight:700; line-height:1.2; }
.song-hero-artist { font-size:1.4rem; color:#ccc; }
.song-hero-artist a { color:var(--purple); text-decoration:none; font-weight:600; }
.song-hero-stats { display:flex; gap:30px; flex-wrap:wrap; margin-top:8px; color:var(--muted); }
.stat-item { display:flex; flex-direction:column; }
.stat-value { font-weight:700; color:#fff; font-size:1.2rem; }
.song-hero-overall { display:flex; flex-direction:column; align-items:center; background:#111; border:2px solid var(--purple); padding:16px 24px; margin-left:auto; text-align:center; }
.overall-number { font-size:3rem; font-weight:700; font-family:var(--heading-font); line-height:1; }

.artist-header { display:flex; gap:30px; background:#181818; border:2px solid #2a2a2a; padding:30px; margin:30px 0; flex-wrap:wrap; }
.artist-total-rating { display:flex; gap:40px; background:#111; border:2px solid #2e2e2e; padding:24px 30px; margin-top:20px; }
.total-score-main { display:flex; flex-direction:column; align-items:center; }
.total-score-number { font-size:5rem; font-weight:700; font-family:var(--heading-font); }
.total-score-label { font-size:1rem; text-transform:uppercase; letter-spacing:3px; color:var(--muted); }

.song-review-container { display:flex; gap:30px; background:#1c1c1c; border:2px solid #2a2a2a; padding:24px; margin-top:30px; }
.interroscore-vertical { flex:0 0 320px; background:#111; border:3px solid var(--purple); padding:28px; }
.score-vertical-item { margin-bottom:22px; }
.score-vertical-label { font-size:0.9rem; text-transform:uppercase; color:var(--muted); }
.score-vertical-value { font-size:3.2rem; font-weight:700; }
.song-annotations { flex:1; background:#1a1a1a; border:2px solid #2e2e2e; padding:24px; }

.score-bad { color:#e63946; }
.score-mid { color:#f4a261; }
.score-best { color:var(--purple); }

.blog-item { background:#161616; border:2px solid #2a2a2a; padding:22px; margin-bottom:20px; display:flex; gap:20px; }
.blog-category { background:var(--purple); color:white; padding:6px 14px; font-size:0.8rem; font-weight:700; text-transform:uppercase; }

.btn { background:var(--purple); color:white; border:2px solid white; padding:10px 24px; font-weight:bold; cursor:pointer; display:inline-block; text-decoration:none; }
.form-group { margin-bottom:15px; }
.form-group label { display:block; margin-bottom:5px; color:var(--muted); font-size:0.9rem; text-transform:uppercase; }
.form-group input, .form-group textarea, .form-group select { width:100%; background:#1e1e1e; border:2px solid #333; color:white; padding:10px; font-size:1rem; }
.hidden { display:none; }