/* =====================================================
   SóMp3Top — Stylesheet Principal
   PalcoMP3-style · Dark · Music Platform
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ─── Variáveis ──────────────────────────────────────── */
:root {
  --bg:          #0a0a0a;
  --bg2:         #111111;
  --bg3:         #191919;
  --card:        #1c1c1c;
  --card-hover:  #242424;
  --border:      #2a2a2a;
  --border2:     #333333;

  --accent:      #ff6600;
  --accent2:     #ff8533;
  --accent3:     #cc5200;
  --pink:        #ff4500;
  --pink2:       #ff6633;

  --gradient:        linear-gradient(135deg, #ff6600 0%, #ff4500 100%);
  --gradient-subtle: linear-gradient(135deg, rgba(255,102,0,.15) 0%, rgba(255,69,0,.1) 100%);
  --gradient-card:   linear-gradient(180deg, transparent 40%, rgba(10,10,10,.95) 100%);

  --txt:    #f5f5f5;
  --txt2:   #999999;
  --txt3:   #555555;

  --success: #22c55e;
  --danger:  #ef4444;
  --warn:    #f59e0b;
  --info:    #3b82f6;

  --radius:    12px;
  --radius-sm: 8px;
  --radius-xs: 5px;

  --shadow:        0 8px 32px rgba(0,0,0,.7);
  --shadow-sm:     0 2px 12px rgba(0,0,0,.5);
  --shadow-accent: 0 8px 32px rgba(255,102,0,.35);

  --transition: .18s cubic-bezier(.4,0,.2,1);
  --player-h:   80px;
}

/* ─── Reset ──────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:15px; }
body {
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--txt);
  min-height:100vh;
  padding-bottom:calc(var(--player-h) + 24px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a   { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
ul,ol { list-style:none; }
input,textarea,select,button { font-family:inherit; }

/* ─── Scrollbar ──────────────────────────────────────── */
::-webkit-scrollbar       { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--bg2); }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--accent); }

/* ══════════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════════ */
.navbar {
  position:sticky; top:0; z-index:200;
  background:rgba(10,10,10,.96);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--border);
  padding:0 24px;
  height:60px;
  display:flex; align-items:center; gap:18px;
}
.navbar-brand {
  font-size:1.3rem; font-weight:900;
  color:var(--accent);
  white-space:nowrap; flex-shrink:0; letter-spacing:-.02em;
  display:flex; align-items:center; gap:6px;
}
.navbar-brand i { font-size:1.1rem; }
.navbar-search {
  flex:1; max-width:420px; position:relative;
}
.navbar-search form { display:flex; }
.navbar-search input {
  width:100%;
  background:var(--bg3);
  border:1.5px solid var(--border);
  color:var(--txt);
  padding:8px 16px 8px 40px;
  border-radius:6px;
  font-size:.875rem; outline:none;
  transition:var(--transition);
}
.navbar-search input:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(255,102,0,.15);
  background:var(--card);
}
.navbar-search input::placeholder { color:var(--txt3); }
.navbar-search .search-icon {
  position:absolute; left:13px; top:50%;
  transform:translateY(-50%);
  color:var(--txt3); font-size:.8rem; pointer-events:none;
}
.navbar-search .search-submit {
  position:absolute; right:0; top:0; bottom:0;
  background:var(--accent); border:none;
  color:#fff; cursor:pointer;
  padding:0 16px; border-radius:0 6px 6px 0;
  font-size:.8rem; font-weight:700;
  transition:var(--transition);
}
.navbar-search .search-submit:hover { background:var(--accent2); }
.navbar-links {
  display:flex; align-items:center; gap:2px; margin-left:auto;
}
.navbar-links a {
  color:var(--txt2); padding:6px 12px;
  border-radius:6px;
  font-size:.82rem; font-weight:500;
  transition:var(--transition); white-space:nowrap;
}
.navbar-links a:hover,
.navbar-links a.active {
  color:var(--txt); background:rgba(255,255,255,.06);
}
.btn-login {
  border:1.5px solid var(--border2) !important;
  color:var(--txt) !important; border-radius:6px !important;
  padding:6px 16px !important; font-weight:600 !important;
  background:transparent !important; font-size:.82rem !important;
}
.btn-login:hover {
  border-color:var(--accent) !important;
  color:var(--accent) !important;
}
.btn-register {
  background:var(--accent) !important; color:#fff !important;
  border-radius:6px !important; padding:6px 16px !important;
  font-weight:700 !important; font-size:.82rem !important;
}
.btn-register:hover { background:var(--accent2) !important; }

/* User menu */
.user-menu { position:relative; }
.user-btn {
  display:flex; align-items:center; gap:8px;
  background:var(--bg3); border:1.5px solid var(--border);
  border-radius:6px; padding:5px 12px 5px 5px;
  cursor:pointer; color:var(--txt); font-size:.82rem; font-weight:500;
  transition:var(--transition);
}
.user-btn img {
  width:28px; height:28px; border-radius:50%; object-fit:cover;
  border:1.5px solid var(--border2);
}
.user-btn:hover { border-color:var(--accent); background:var(--card); }
.user-dropdown {
  display:none; position:absolute; right:0; top:calc(100% + 8px);
  background:var(--card); border:1px solid var(--border2);
  border-radius:var(--radius); padding:6px; min-width:180px;
  box-shadow:var(--shadow); z-index:300;
  animation:dropIn .15s ease;
}
.user-menu:hover .user-dropdown,
.user-menu:focus-within .user-dropdown { display:block; }
@keyframes dropIn {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}
.user-dropdown a {
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:var(--radius-sm);
  color:var(--txt2); font-size:.82rem; transition:var(--transition);
}
.user-dropdown a:hover { background:var(--bg3); color:var(--txt); }
.user-dropdown a i { width:16px; text-align:center; }
.user-dropdown .separator { border-top:1px solid var(--border); margin:5px 0; }

/* Mobile hamburger */
.nav-toggle {
  display:none; background:none; border:none;
  color:var(--txt); font-size:1.2rem; cursor:pointer; padding:4px;
}
.nav-mobile {
  display:none; position:fixed; inset:60px 0 0 0;
  background:var(--bg2); z-index:190; padding:16px;
  flex-direction:column; gap:4px;
  border-top:1px solid var(--border);
  overflow-y:auto;
}
.nav-mobile.open { display:flex; }
.nav-mobile a {
  padding:11px 14px; border-radius:var(--radius-sm);
  color:var(--txt2); font-weight:500; font-size:.95rem;
  transition:var(--transition);
}
.nav-mobile a:hover { background:var(--bg3); color:var(--txt); }

/* ─── Category Bar ──────────────────────────────────── */
.category-bar {
  position:sticky; top:60px; z-index:190;
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  padding:0 24px;
  display:flex; align-items:center; gap:4px;
  overflow-x:auto;
  scrollbar-width:none;
}
.category-bar::-webkit-scrollbar { display:none; }
.cat-link {
  display:flex; align-items:center; gap:6px;
  padding:10px 14px; white-space:nowrap;
  color:var(--txt2); font-size:.82rem; font-weight:600;
  border-bottom:2px solid transparent;
  transition:var(--transition);
  flex-shrink:0;
}
.cat-link:hover  { color:var(--txt); }
.cat-link.active { color:var(--accent); border-bottom-color:var(--accent); }
.cat-link i { font-size:.82rem; }

/* ══════════════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════════════ */
.main-wrapper { max-width:1340px; margin:0 auto; padding:0 20px; }
.page-content  { padding:28px 0; }

/* ══════════════════════════════════════════════════════
   HERO / FEATURED BANNER
══════════════════════════════════════════════════════ */
.hero-banner {
  position:relative; border-radius:var(--radius);
  overflow:hidden; margin-bottom:36px;
  height:260px;
  background:linear-gradient(135deg, #1a0a00 0%, #2a1100 50%, #1a0500 100%);
  display:flex; align-items:flex-end;
  cursor:pointer;
}
.hero-banner-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center top;
  filter:blur(2px) brightness(.45);
  transition:transform .6s ease;
}
.hero-banner:hover .hero-banner-bg { transform:scale(1.03); }
.hero-banner-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,10,10,.95) 0%, rgba(10,10,10,.3) 50%, transparent 100%);
}
.hero-banner-content {
  position:relative; z-index:1;
  padding:24px; width:100%;
  display:flex; align-items:flex-end; gap:20px;
}
.hero-banner-cover {
  width:110px; height:110px; border-radius:8px;
  object-fit:cover; flex-shrink:0;
  box-shadow:0 8px 32px rgba(0,0,0,.7);
}
.hero-banner-info { flex:1; min-width:0; }
.hero-banner-tag {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--accent); color:#fff;
  font-size:.68rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; padding:3px 10px; border-radius:4px;
  margin-bottom:8px;
}
.hero-banner-title {
  font-size:clamp(1.3rem, 3vw, 2rem);
  font-weight:900; line-height:1.1;
  margin-bottom:6px; letter-spacing:-.02em;
}
.hero-banner-artist {
  font-size:.9rem; color:var(--txt2); margin-bottom:14px;
}
.hero-banner-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* Simpler hero (fallback) */
.hero {
  position:relative; overflow:hidden;
  border-radius:var(--radius); padding:60px 48px;
  margin-bottom:36px;
  background:linear-gradient(135deg, #1a0800 0%, #330d00 50%, #1a0500 100%);
  border:1px solid rgba(255,102,0,.15);
}
.hero::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 80% at 80% 20%, rgba(255,102,0,.08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 10% 80%, rgba(0,0,0,.3) 0%, transparent 60%);
}
.hero-title {
  font-size:clamp(1.8rem, 4vw, 2.8rem); font-weight:900;
  line-height:1.15; margin-bottom:14px; position:relative;
  letter-spacing:-.03em;
}
.hero-sub {
  font-size:1rem; opacity:.75; margin-bottom:28px;
  position:relative; max-width:480px; line-height:1.65;
  color:var(--txt2);
}
.hero-actions { display:flex; gap:12px; position:relative; flex-wrap:wrap; }

/* ══════════════════════════════════════════════════════
   SECTIONS
══════════════════════════════════════════════════════ */
.section { margin-bottom:40px; }
.section-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px; padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.section-title {
  font-size:.82rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.04em;
  display:flex; align-items:center; gap:8px;
  color:var(--txt2);
}
.section-title i { color:var(--accent); }
.section-link {
  color:var(--accent); font-size:.78rem; font-weight:700;
  display:flex; align-items:center; gap:4px;
  transition:var(--transition);
  text-transform:uppercase; letter-spacing:.04em;
}
.section-link:hover { color:var(--accent2); gap:7px; }

/* ══════════════════════════════════════════════════════
   SCROLL ROW (carousel horizontal)
══════════════════════════════════════════════════════ */
.scroll-row {
  display:flex; gap:14px;
  overflow-x:auto; padding-bottom:8px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
}
.scroll-row::-webkit-scrollbar { display:none; }
.scroll-row .card        { flex-shrink:0; width:160px; scroll-snap-align:start; }
.scroll-row .card-artist { width:145px; }
.scroll-row .card-lg     { width:185px; }

/* ══════════════════════════════════════════════════════
   CARDS GRID
══════════════════════════════════════════════════════ */
.cards-grid    { display:grid; grid-template-columns:repeat(auto-fill, minmax(155px,1fr)); gap:14px; }
.cards-grid-lg { grid-template-columns:repeat(auto-fill, minmax(185px,1fr)); }
.cards-grid-sm { grid-template-columns:repeat(auto-fill, minmax(135px,1fr)); }
.cards-grid-xl { grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); }

/* ══════════════════════════════════════════════════════
   CARD (Música / Álbum / Artista)
══════════════════════════════════════════════════════ */
.card {
  background:var(--card); border-radius:var(--radius-sm);
  overflow:hidden; transition:var(--transition);
  cursor:pointer; position:relative;
  border:1px solid transparent;
}
.card:hover {
  background:var(--card-hover);
  border-color:var(--border);
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}
.card-cover-wrap {
  position:relative; aspect-ratio:1; overflow:hidden;
  background:var(--bg3);
}
.card-cover-wrap img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .4s ease;
}
.card:hover .card-cover-wrap img { transform:scale(1.06); }

/* Play overlay on card */
.card-play-btn {
  position:absolute; bottom:8px; right:8px;
  width:40px; height:40px;
  background:var(--accent); border-radius:50%; border:none;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(8px) scale(.9);
  transition:var(--transition);
  box-shadow:0 4px 16px rgba(255,102,0,.55);
  cursor:pointer; color:#fff;
}
.card-play-btn:hover { background:var(--accent2); transform:translateY(0) scale(1.08) !important; }
.card:hover .card-play-btn { opacity:1; transform:translateY(0) scale(1); }

/* Download badge on card */
.card-dl-badge {
  position:absolute; top:8px; left:8px;
  background:rgba(0,0,0,.75); color:var(--txt2);
  font-size:.65rem; font-weight:700;
  padding:3px 7px; border-radius:4px;
  display:flex; align-items:center; gap:4px;
  backdrop-filter:blur(4px);
}
.card-dl-badge i { color:var(--accent); }

.card-body { padding:10px 12px 12px; }
.card-name {
  font-size:.82rem; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-bottom:3px; letter-spacing:-.01em;
}
.card-meta {
  font-size:.73rem; color:var(--txt2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card-stats { display:flex; align-items:center; gap:10px; margin-top:6px; }
.card-stat  {
  display:flex; align-items:center; gap:3px;
  font-size:.68rem; color:var(--txt3);
}
.card-stat i { font-size:.6rem; }

/* Artist card — imagem circular */
.card-artist .card-cover-wrap img { border-radius:50%; }
.card-artist .card-cover-wrap { padding:18px; background:var(--bg3); aspect-ratio:1; }
.card-artist .card-body { text-align:center; padding-top:8px; }

/* ══════════════════════════════════════════════════════
   MUSIC LIST (linhas de música)
══════════════════════════════════════════════════════ */
.music-list { display:flex; flex-direction:column; gap:1px; }
.music-item {
  display:grid;
  grid-template-columns:28px 48px 1fr auto;
  align-items:center; gap:12px;
  padding:8px 10px;
  border-radius:var(--radius-sm);
  transition:var(--transition); cursor:pointer;
  border:1px solid transparent;
}
.music-item:hover { background:var(--card); border-color:var(--border); }
.music-item:hover .music-num       { display:none; }
.music-item:hover .music-num-play  { display:flex !important; }
.music-item.playing {
  background:rgba(255,102,0,.08);
  border-color:rgba(255,102,0,.2);
}

.music-num {
  color:var(--txt3); font-size:.82rem;
  text-align:center; font-weight:500; flex-shrink:0;
}
.music-num-play {
  display:none !important;
  width:28px; height:28px; border-radius:50%;
  align-items:center; justify-content:center;
  color:var(--txt2); font-size:.75rem;
}
.music-item.playing .music-num { display:none; }
.music-item.playing .eq-anim   { display:flex; }

.eq-anim {
  display:none;
  align-items:flex-end; gap:2px; height:16px;
  justify-content:center;
}
.eq-anim span {
  width:3px; background:var(--accent); border-radius:2px;
  animation:eqBar .7s ease infinite;
}
.eq-anim span:nth-child(2) { animation-delay:.15s; }
.eq-anim span:nth-child(3) { animation-delay:.3s; }
@keyframes eqBar {
  0%,100% { height:3px; } 50% { height:14px; }
}

.music-cover {
  width:48px; height:48px; border-radius:var(--radius-xs);
  object-fit:cover; background:var(--bg3); flex-shrink:0;
}
.music-info  { min-width:0; }
.music-title {
  font-size:.84rem; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-bottom:2px; letter-spacing:-.01em;
}
.music-artist {
  font-size:.75rem; color:var(--txt2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.music-artist a:hover { color:var(--accent); }
.music-item.playing .music-title { color:var(--accent); }

.music-actions {
  display:flex; align-items:center; gap:12px;
  color:var(--txt3); font-size:.75rem; flex-shrink:0;
}
.music-duration   { font-variant-numeric:tabular-nums; }
.music-plays,
.music-downloads  {
  display:flex; align-items:center; gap:4px;
  font-variant-numeric:tabular-nums;
}
.music-downloads i { color:var(--accent); }
.btn-like,
.btn-icon {
  background:none; border:none;
  color:var(--txt3); cursor:pointer;
  padding:5px; border-radius:4px;
  transition:var(--transition); font-size:.85rem;
  display:flex; align-items:center; justify-content:center;
}
.btn-like:hover     { color:#ef4444; transform:scale(1.15); }
.btn-icon:hover     { color:var(--accent); transform:scale(1.1); }
.btn-like.liked     { color:#ef4444; }
.btn-download:hover { color:var(--success); }

/* ══════════════════════════════════════════════════════
   TOP LIST (ranking)
══════════════════════════════════════════════════════ */
.top-list { display:flex; flex-direction:column; gap:4px; }
.top-item {
  display:flex; align-items:center; gap:12px;
  padding:10px 12px;
  background:var(--card); border-radius:var(--radius-sm);
  border:1px solid transparent;
  transition:var(--transition); cursor:pointer;
}
.top-item:hover {
  background:var(--card-hover);
  border-color:var(--border);
  transform:translateX(3px);
}
.top-rank {
  font-size:.95rem; font-weight:900; color:var(--txt3);
  width:26px; text-align:center; flex-shrink:0;
  font-variant-numeric:tabular-nums;
}
.top-rank.gold   { color:#f59e0b; }
.top-rank.silver { color:#9ca3af; }
.top-rank.bronze { color:#b45309; }

/* ══════════════════════════════════════════════════════
   GENRE GRID
══════════════════════════════════════════════════════ */
.genres-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(130px,1fr));
  gap:10px;
}
.genre-card {
  background:var(--card); border-radius:var(--radius-sm);
  padding:20px 14px; text-align:center; cursor:pointer;
  transition:var(--transition);
  border:1px solid var(--border);
  position:relative; overflow:hidden;
}
.genre-card::before {
  content:''; position:absolute; inset:0;
  opacity:.1;
  background:var(--genre-color, var(--accent));
  transition:var(--transition);
}
.genre-card::after {
  content:''; position:absolute;
  top:0; left:0; right:0; height:3px;
  background:var(--genre-color, var(--accent));
}
.genre-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.5); }
.genre-card:hover::before { opacity:.2; }
.genre-icon  { font-size:1.8rem; margin-bottom:8px; position:relative; }
.genre-name  { font-size:.82rem; font-weight:700; position:relative; }
.genre-count { font-size:.7rem; color:var(--txt2); margin-top:2px; position:relative; }

/* ══════════════════════════════════════════════════════
   PÁGINA DE ARTISTA
══════════════════════════════════════════════════════ */
.artist-banner {
  width:100%; height:260px; object-fit:cover;
  border-radius:var(--radius); background:var(--bg3);
  margin-bottom:-72px;
  box-shadow:inset 0 -80px 80px var(--bg);
}
.artist-header {
  display:flex; align-items:flex-end; gap:24px;
  margin-bottom:32px; padding:0 8px; position:relative;
}
.artist-avatar {
  width:120px; height:120px; border-radius:50%;
  object-fit:cover; flex-shrink:0;
  border:4px solid var(--bg);
  background:var(--bg3);
  box-shadow:0 4px 24px rgba(0,0,0,.6);
}
.artist-info { flex:1; padding-bottom:4px; min-width:0; }
.artist-verified {
  display:inline-flex; align-items:center; gap:5px;
  font-size:.68rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent);
  background:rgba(255,102,0,.1); padding:2px 8px;
  border-radius:4px; margin-bottom:6px;
}
.artist-name {
  font-size:clamp(1.5rem, 4vw, 2.2rem);
  font-weight:900; margin-bottom:8px; letter-spacing:-.03em;
}
.artist-stats { display:flex; gap:24px; flex-wrap:wrap; margin-bottom:12px; }
.artist-stat strong {
  display:block; font-size:1rem; font-weight:800; letter-spacing:-.02em;
}
.artist-stat span { font-size:.72rem; color:var(--txt2); }
.btn-follow {
  background:var(--accent); color:#fff; border:none;
  padding:9px 26px; border-radius:6px;
  font-weight:700; cursor:pointer; font-size:.82rem;
  transition:var(--transition); letter-spacing:.01em;
  box-shadow:0 4px 16px rgba(255,102,0,.35);
}
.btn-follow:hover { background:var(--accent2); transform:translateY(-1px); }
.btn-follow.following {
  background:transparent; border:1.5px solid var(--border2);
  color:var(--txt2); box-shadow:none;
}
.btn-follow.following:hover {
  border-color:var(--danger); color:var(--danger);
  background:rgba(239,68,68,.07);
}
.artist-social { display:flex; gap:7px; margin-top:12px; flex-wrap:wrap; }
.social-link {
  width:36px; height:36px;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--txt2); font-size:.85rem; transition:var(--transition);
}
.social-link:hover {
  background:var(--accent); color:#fff;
  border-color:var(--accent); transform:translateY(-2px);
}

/* ══════════════════════════════════════════════════════
   TABS
══════════════════════════════════════════════════════ */
.tabs {
  display:flex; gap:2px;
  border-bottom:1px solid var(--border);
  margin-bottom:24px;
}
.tab-btn {
  padding:10px 20px;
  background:none; border:none;
  color:var(--txt2); font-size:.84rem; font-weight:600;
  cursor:pointer;
  border-bottom:2px solid transparent;
  transition:var(--transition);
  margin-bottom:-1px;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  display:flex; align-items:center; gap:6px;
}
.tab-btn:hover  { color:var(--txt); background:rgba(255,255,255,.04); }
.tab-btn.active { color:var(--accent); border-bottom-color:var(--accent); }

/* ══════════════════════════════════════════════════════
   PÁGINA DE MÚSICA
══════════════════════════════════════════════════════ */
.music-page {
  display:grid; grid-template-columns:280px 1fr;
  gap:40px; align-items:start;
}
.music-page-cover {
  width:100%; aspect-ratio:1; border-radius:var(--radius);
  object-fit:cover; box-shadow:var(--shadow-accent);
}
.music-page-title {
  font-size:clamp(1.4rem, 3vw, 2rem); font-weight:900;
  margin-bottom:6px; letter-spacing:-.03em;
}
.music-page-artist { font-size:.95rem; color:var(--txt2); margin-bottom:18px; }
.music-page-artist a:hover { color:var(--accent); }
.music-page-actions {
  display:flex; align-items:center; gap:12px;
  margin-bottom:22px; flex-wrap:wrap;
}
.btn-play-big {
  background:var(--accent); color:#fff; border:none;
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; cursor:pointer;
  transition:var(--transition);
  box-shadow:var(--shadow-accent);
}
.btn-play-big:hover {
  transform:scale(1.08);
  box-shadow:0 8px 28px rgba(255,102,0,.5);
  background:var(--accent2);
}
.music-meta {
  display:flex; gap:18px; flex-wrap:wrap;
  color:var(--txt3); font-size:.8rem; margin-bottom:22px;
}
.music-meta span { display:flex; align-items:center; gap:5px; }
.lyrics {
  background:var(--card); border-radius:var(--radius);
  padding:24px; margin-top:24px;
  border:1px solid var(--border);
}
.lyrics h3  { font-size:.9rem; font-weight:700; margin-bottom:16px; color:var(--accent); }
.lyrics pre { white-space:pre-wrap; font-family:inherit; font-size:.84rem; color:var(--txt2); line-height:2; }

/* ══════════════════════════════════════════════════════
   FORMULÁRIOS
══════════════════════════════════════════════════════ */
.form-card {
  background:var(--card); border-radius:var(--radius);
  padding:32px; max-width:560px; margin:0 auto;
  border:1px solid var(--border);
}
.form-title { font-size:1.3rem; font-weight:800; margin-bottom:5px; letter-spacing:-.02em; }
.form-sub   { color:var(--txt2); font-size:.84rem; margin-bottom:26px; }
.form-group { margin-bottom:18px; }
.form-label {
  display:block; font-size:.78rem; font-weight:600;
  margin-bottom:6px; color:var(--txt2); letter-spacing:.01em;
}
.form-control {
  width:100%;
  background:var(--bg3); border:1.5px solid var(--border);
  color:var(--txt); padding:10px 13px;
  border-radius:var(--radius-sm); font-size:.88rem; outline:none;
  transition:var(--transition);
}
.form-control:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(255,102,0,.15);
  background:var(--card);
}
.form-control::placeholder { color:var(--txt3); }
textarea.form-control { resize:vertical; min-height:100px; }
select.form-control {
  cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23555555' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center;
  padding-right:34px;
}
.form-row   { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-hint  { font-size:.75rem; color:var(--txt3); margin-top:4px; }
.form-check { display:flex; align-items:center; gap:9px; cursor:pointer; user-select:none; }
.form-check input { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; border-radius:3px; }

/* ══════════════════════════════════════════════════════
   BOTÕES
══════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 20px; border-radius:var(--radius-sm);
  font-size:.84rem; font-weight:600; cursor:pointer;
  border:none; transition:var(--transition);
  text-decoration:none; white-space:nowrap;
  letter-spacing:.01em;
}
.btn-primary:hover  { background:var(--accent2); transform:translateY(-1px); }
.btn-primary        { background:var(--accent); color:#fff; }
.btn-gradient       { background:var(--gradient); color:#fff; box-shadow:0 2px 12px rgba(255,102,0,.35); }
.btn-gradient:hover { opacity:.92; transform:translateY(-1px); }
.btn-outline        { background:transparent; border:1.5px solid var(--border2); color:var(--txt); }
.btn-outline:hover  { border-color:var(--accent); color:var(--accent); background:rgba(255,102,0,.07); }
.btn-danger         { background:var(--danger); color:#fff; }
.btn-danger:hover   { opacity:.88; transform:translateY(-1px); }
.btn-success        { background:var(--success); color:#fff; }
.btn-success:hover  { opacity:.88; }
.btn-ghost          { background:rgba(255,255,255,.06); color:var(--txt2); }
.btn-ghost:hover    { background:rgba(255,255,255,.1); color:var(--txt); }
.btn-sm      { padding:5px 13px; font-size:.76rem; }
.btn-lg      { padding:12px 30px; font-size:.95rem; }
.btn-xl      { padding:16px 38px; font-size:1rem; font-weight:700; }
.btn-block   { width:100%; justify-content:center; }
.btn-icon-only { padding:8px; border-radius:var(--radius-sm); }
.btn-circle  { width:38px; height:38px; border-radius:50%; padding:0; justify-content:center; }
.flex-1      { flex:1; }

/* Download btn special */
.btn-download-big {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent); color:#fff;
  padding:10px 22px; border-radius:6px;
  font-weight:700; font-size:.84rem; cursor:pointer;
  border:none; transition:var(--transition);
  box-shadow:0 4px 16px rgba(255,102,0,.35);
}
.btn-download-big:hover { background:var(--accent2); transform:translateY(-1px); }

/* ══════════════════════════════════════════════════════
   ALERTS / FLASH
══════════════════════════════════════════════════════ */
.alert {
  padding:12px 15px; border-radius:var(--radius-sm);
  font-size:.84rem; margin-bottom:14px;
  display:flex; align-items:flex-start; gap:9px;
  border-left:3px solid;
  animation:alertIn .2s ease;
}
@keyframes alertIn {
  from { opacity:0; transform:translateY(-4px); }
  to   { opacity:1; transform:translateY(0); }
}
.alert-success { background:rgba(34,197,94,.1);  border-color:#22c55e; color:#4ade80; }
.alert-error   { background:rgba(239,68,68,.1);  border-color:#ef4444; color:#f87171; }
.alert-warn    { background:rgba(245,158,11,.1); border-color:#f59e0b; color:#fbbf24; }
.alert-info    { background:rgba(255,102,0,.1);  border-color:#ff6600; color:#ff9933; }
.alert i       { margin-top:1px; flex-shrink:0; }

/* ══════════════════════════════════════════════════════
   BADGES
══════════════════════════════════════════════════════ */
.badge {
  display:inline-flex; align-items:center;
  padding:2px 8px; border-radius:4px;
  font-size:.66rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;
}
.badge-success { background:rgba(34,197,94,.15); color:#4ade80; border:1px solid rgba(34,197,94,.3); }
.badge-warn    { background:rgba(245,158,11,.15); color:#fbbf24; border:1px solid rgba(245,158,11,.3); }
.badge-danger  { background:rgba(239,68,68,.15);  color:#f87171; border:1px solid rgba(239,68,68,.3); }
.badge-info    { background:rgba(255,102,0,.15);  color:#ff9933; border:1px solid rgba(255,102,0,.3); }
.badge-gray    { background:rgba(85,85,85,.2);    color:var(--txt3); border:1px solid var(--border); }
.badge-hot     { background:var(--accent); color:#fff; }

/* ══════════════════════════════════════════════════════
   AUTH PAGES
══════════════════════════════════════════════════════ */
.auth-wrapper {
  min-height:calc(100vh - 60px);
  display:flex; align-items:center; justify-content:center;
  padding:40px 20px;
  background:radial-gradient(ellipse 60% 60% at 50% 0%, rgba(255,102,0,.08) 0%, transparent 60%);
}
.auth-card {
  background:var(--card); border-radius:12px;
  padding:40px; width:100%; max-width:440px;
  border:1px solid var(--border);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.auth-logo {
  font-size:1.7rem; font-weight:900;
  color:var(--accent);
  text-align:center; margin-bottom:5px; letter-spacing:-.03em;
}
.auth-subtitle { text-align:center; color:var(--txt2); font-size:.84rem; margin-bottom:28px; }
.auth-divider  {
  display:flex; align-items:center; gap:12px;
  color:var(--txt3); font-size:.75rem; margin:20px 0;
}
.auth-divider::before,
.auth-divider::after { content:''; flex:1; height:1px; background:var(--border); }
.auth-switch   { text-align:center; color:var(--txt2); font-size:.84rem; margin-top:20px; }
.auth-switch a { color:var(--accent); font-weight:700; }

/* ══════════════════════════════════════════════════════
   UPLOAD AREA
══════════════════════════════════════════════════════ */
.upload-area {
  border:2px dashed var(--border2);
  border-radius:var(--radius);
  padding:40px 20px; text-align:center; cursor:pointer;
  transition:var(--transition); background:var(--bg3);
  position:relative;
}
.upload-area input[type=file] {
  position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%;
}
.upload-area:hover,
.upload-area.drag-over {
  border-color:var(--accent); background:rgba(255,102,0,.05);
  box-shadow:0 0 0 4px rgba(255,102,0,.08);
}
.upload-area i     { font-size:2.2rem; color:var(--accent); margin-bottom:12px; display:block; }
.upload-area p     { color:var(--txt2); font-size:.88rem; margin-bottom:4px; }
.upload-area small { color:var(--txt3); font-size:.75rem; }
.upload-placeholder { pointer-events:none; }

/* ══════════════════════════════════════════════════════
   SEARCH PAGE
══════════════════════════════════════════════════════ */
.search-bar-big {
  background:var(--card); border-radius:8px;
  padding:4px; display:flex;
  margin-bottom:36px; border:1.5px solid var(--border);
  transition:var(--transition);
}
.search-bar-big:focus-within {
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(255,102,0,.12);
}
.search-bar-big input {
  flex:1; background:none; border:none;
  color:var(--txt); padding:11px 20px; font-size:.95rem; outline:none;
}
.search-bar-big button {
  background:var(--accent); color:#fff; border:none;
  padding:10px 26px; border-radius:6px;
  font-size:.84rem; font-weight:700; cursor:pointer;
  transition:var(--transition);
}
.search-bar-big button:hover { background:var(--accent2); }
.search-results-header { font-size:1rem; font-weight:700; margin-bottom:20px; color:var(--txt2); }
.search-results-header span { color:var(--txt); }

/* ══════════════════════════════════════════════════════
   PAGINAÇÃO
══════════════════════════════════════════════════════ */
.pagination {
  display:flex; justify-content:center; gap:5px;
  margin-top:36px; flex-wrap:wrap;
}
.pag-btn {
  padding:8px 14px;
  background:var(--card); border:1.5px solid var(--border);
  color:var(--txt2); border-radius:6px;
  font-size:.8rem; font-weight:500; transition:var(--transition);
}
.pag-btn:hover  { border-color:var(--accent); color:var(--accent); }
.pag-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700; }

/* ══════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════ */
.footer {
  background:var(--bg2); border-top:1px solid var(--border);
  padding:48px 24px 32px;
  margin-top:40px;
}
.footer-grid {
  max-width:1340px; margin:0 auto;
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:40px; margin-bottom:36px;
}
.footer-brand   { font-size:1.2rem; font-weight:900; color:var(--accent); margin-bottom:9px; letter-spacing:-.02em; }
.footer-desc    { color:var(--txt3); font-size:.82rem; line-height:1.75; }
.footer-heading {
  font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:var(--txt3); margin-bottom:14px;
}
.footer-links   { display:flex; flex-direction:column; gap:8px; }
.footer-links a { color:var(--txt2); font-size:.83rem; transition:var(--transition); }
.footer-links a:hover { color:var(--accent); padding-left:3px; }
.footer-bottom {
  max-width:1340px; margin:0 auto;
  padding-top:20px; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  color:var(--txt3); font-size:.78rem;
}

/* ══════════════════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════════════════ */
.empty-state      { text-align:center; padding:80px 20px; color:var(--txt3); }
.empty-state i    { font-size:3rem; margin-bottom:18px; display:block; opacity:.35; }
.empty-state h3   { font-size:1rem; color:var(--txt2); margin-bottom:6px; }
.empty-state p    { font-size:.84rem; }

/* ══════════════════════════════════════════════════════
   UTILITY
══════════════════════════════════════════════════════ */
.text-accent  { color:var(--accent); }
.text-pink    { color:var(--pink); }
.text-muted   { color:var(--txt2); }
.text-sm      { font-size:.82rem; }
.text-xs      { font-size:.72rem; }
.fw-bold      { font-weight:700; }
.fw-black     { font-weight:900; }
.flex         { display:flex; }
.flex-center  { display:flex; align-items:center; justify-content:center; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.items-center { align-items:center; }
.gap-sm       { gap:8px; }
.gap-md       { gap:16px; }
.gap-lg       { gap:24px; }
.mt-sm        { margin-top:8px; }
.mt-md        { margin-top:16px; }
.mt-lg        { margin-top:32px; }
.mb-sm        { margin-bottom:8px; }
.mb-md        { margin-bottom:16px; }
.mb-lg        { margin-bottom:32px; }
.w-full       { width:100%; }
.hidden       { display:none !important; }
.truncate     { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ══════════════════════════════════════════════════════
   EXPLORE / FILTER BAR
══════════════════════════════════════════════════════ */
.filter-bar { display:flex; align-items:center; gap:10px; margin-bottom:24px; flex-wrap:wrap; }
.filter-bar select {
  background:var(--card); border:1.5px solid var(--border);
  color:var(--txt); padding:8px 14px;
  border-radius:6px; font-size:.82rem; cursor:pointer; outline:none;
  transition:var(--transition);
}
.filter-bar select:focus { border-color:var(--accent); }
.filter-pills { display:flex; gap:6px; flex-wrap:wrap; }
.filter-pill  {
  padding:6px 14px; border-radius:24px;
  background:var(--card); border:1.5px solid var(--border);
  color:var(--txt2); font-size:.78rem; font-weight:600;
  cursor:pointer; transition:var(--transition);
  text-decoration:none;
}
.filter-pill:hover,
.filter-pill.active { background:var(--accent); border-color:var(--accent); color:#fff; }

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  .music-page  { grid-template-columns:220px 1fr; gap:32px; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .hero        { padding:48px 32px; }
}
@media (max-width:768px) {
  .navbar              { padding:0 14px; gap:10px; height:56px; }
  .navbar-links .nav-hide { display:none; }
  .nav-toggle          { display:block; }
  .category-bar        { top:56px; padding:0 14px; }
  .hero                { padding:36px 20px; margin-bottom:28px; }
  .hero-title          { font-size:1.7rem; }
  .hero-banner         { height:200px; }
  .hero-banner-cover   { width:80px; height:80px; }
  .hero-banner-title   { font-size:1.2rem; }
  .music-page          { grid-template-columns:1fr; gap:24px; }
  .music-page-cover    { max-width:240px; margin:0 auto; }
  .artist-header       { flex-direction:column; align-items:flex-start; }
  .artist-banner       { margin-bottom:0; height:160px; border-radius:var(--radius) var(--radius) 0 0; }
  .artist-avatar       { width:88px; height:88px; border-width:3px; }
  .artist-name         { font-size:1.5rem; }
  .footer-grid         { grid-template-columns:1fr; gap:24px; }
  .form-row            { grid-template-columns:1fr; }
  .cards-grid          { grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:10px; }
  .music-item          { grid-template-columns:24px 42px 1fr auto; gap:9px; padding:7px 8px; }
  .music-cover         { width:42px; height:42px; }
  .music-actions       { gap:7px; }
  .music-plays         { display:none; }
}
@media (max-width:480px) {
  .main-wrapper   { padding:0 12px; }
  .hero           { padding:26px 16px; border-radius:10px; }
  .hero-banner    { height:170px; border-radius:10px; }
  .cards-grid     { grid-template-columns:repeat(2,1fr); gap:9px; }
  .genres-grid    { grid-template-columns:repeat(2,1fr); }
  .auth-card      { padding:24px 18px; }
  .top-item       { padding:8px 10px; }
  .section-header { margin-bottom:12px; padding-bottom:10px; }
}