/* ============================================
   MUSIC FLOW - DARK THEME (Spotify-like)
   ============================================ */

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

:root {
    --bg:           #1f2937;
    --bg-soft:      #111827;
    --bg-card:      #374151;
    --bg-elevated:  #283141;
    --bg-hover:     #4b5563;
    --bg-dark:      #0f172a;
    --bg-dark-2:    #1e293b;

    --accent:       #1db954;
    --accent-1:     #1db954;
    --accent-2:     #a78bfa;
    --accent-3:     #f472b6;
    --accent-glow:  rgba(167, 139, 250, 0.35);

    --text:         #f9fafb;
    --text-soft:    #d1d5db;
    --text-mute:    #9ca3af;

    --border:       rgba(255, 255, 255, 0.08);
    --danger:       #f87171;
    --warning:      #fbbf24;

    --grad-1: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
    --grad-2: linear-gradient(135deg, #1db954 0%, #1ed760 100%);
    --grad-hero: radial-gradient(ellipse at top left, rgba(167, 139, 250, 0.3), transparent 60%),
                 radial-gradient(ellipse at top right, rgba(244, 114, 182, 0.25), transparent 60%);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow:    0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5);
}

html {
    scroll-behavior: smooth;
    height: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* Empurra o footer para o fundo em páginas curtas */
body > *:not(.footer):not(.player):not(.navbar) {
    flex-shrink: 0;
}
body > .footer { margin-top: auto; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
img { max-width: 100%; display: block; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-soft); }
::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #6b7280; }

/* NAVBAR */
.navbar {
    background: rgba(31, 41, 55, 0.85);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding: 0.5rem 0;
    position: sticky; top: 0; z-index: 1000;
}
.navbar .container { display: flex; justify-content: space-between; align-items: center; gap: 2rem; }

/* HAMBURGER (só visível em mobile) */
.hamburger {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    transition: background 0.2s ease;
}
.hamburger:hover { background: var(--bg-elevated); }
.hamburger span {
    display: block;
    width: 24px;
    height: 3px;
    background: var(--text);
    border-radius: 3px;
    transition: all 0.3s ease;
}
.hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.logo { display: inline-flex; align-items: center; text-decoration: none; height: 80px; transition: transform 0.2s ease; }
.logo img { height: 100%; width: auto; display: block; object-fit: contain; }
.logo:hover { transform: scale(1.03); }

.footer-logo { height: 90px; width: auto; display: block; margin-bottom: 0.8rem; object-fit: contain; }

@media (max-width: 768px) {
    .logo { height: 56px; }
    .footer-logo { height: 64px; }
}

.nav-links { display: flex; list-style: none; gap: 1.5rem; }
.nav-links a { color: var(--text-soft); text-decoration: none; font-weight: 500; font-size: 0.92rem; transition: color 0.2s ease; position: relative; }
.nav-links a:hover { color: var(--text); }

.admin-link {
    background: var(--grad-1);
    padding: 0.45rem 1rem !important;
    border-radius: 999px; color: white !important;
    font-weight: 600; transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.admin-link:hover { transform: translateY(-1px); box-shadow: 0 8px 20px var(--accent-glow); color: white !important; }

.search-bar {
    display: flex; align-items: center; gap: 0.5rem;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 999px; padding: 0.4rem 0.4rem 0.4rem 1rem;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.search-bar:focus-within { border-color: var(--accent-2); background: var(--bg-hover); box-shadow: 0 0 0 4px var(--accent-glow); }
.search-bar .search-icon { color: var(--text-mute); font-size: 0.9rem; }
.search-bar input { background: transparent; border: none; color: var(--text); width: 230px; font-size: 0.9rem; outline: none; }
.search-bar input::placeholder { color: var(--text-mute); }
.search-bar button {
    background: var(--grad-1); border: none; color: white;
    width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease;
}
.search-bar button:hover { transform: scale(1.08); }

/* =====================================================
   PLAYER CUSTOM (sem 3 pontinhos do browser nativo)
   ===================================================== */
.custom-audio-controls {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0;
}

/* Play/Pause */
.cp-play-btn {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--grad-1);
    color: white;
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(167, 139, 250, 0.35);
}
.cp-play-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 18px rgba(167, 139, 250, 0.5);
}
.cp-play-btn:active { transform: scale(0.96); }

/* Tempo (current / duration) */
.cp-time {
    font-family: 'DM Mono', monospace, sans-serif;
    font-size: 0.78rem;
    color: var(--text-mute);
    min-width: 38px;
    text-align: center;
    -webkit-user-select: none;
    user-select: none;
    flex-shrink: 0;
}

/* Barra de progresso */
.cp-seek-wrap { flex: 1; min-width: 0; display: flex; align-items: center; }
.cp-seek {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    outline: none;
    cursor: pointer;
    transition: height 0.15s ease;
    background-image: linear-gradient(90deg, #a78bfa 0%, #f472b6 var(--seek-pct, 0%), rgba(255,255,255,0.08) var(--seek-pct, 0%));
}
.cp-seek:hover { height: 7px; }
.cp-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.35);
    transition: transform 0.15s ease;
}
.cp-seek::-moz-range-thumb {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.35);
}
.cp-seek:hover::-webkit-slider-thumb { transform: scale(1.15); }

/* Mute */
.cp-mute-btn {
    background: transparent;
    border: none;
    color: var(--text-mute);
    font-size: 0.9rem;
    cursor: pointer;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.18s ease;
    flex-shrink: 0;
}
.cp-mute-btn:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.cp-mute-btn.muted { color: #f87171; }

/* Prev / Next / Shuffle */
.cp-ctrl-btn {
    background: transparent;
    border: none;
    color: var(--text-mute);
    font-size: 0.88rem;
    cursor: pointer;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.18s ease;
    flex-shrink: 0;
    opacity: 0.5;
}
.cp-ctrl-btn:hover  { color: var(--text); background: rgba(255,255,255,0.06); opacity: 1; }
.cp-ctrl-btn.active { color: #a78bfa; opacity: 1; }
.cp-ctrl-btn.ready  { opacity: 1; }

@media (max-width: 640px) {
    .custom-audio-controls { gap: 0.45rem; }
    .cp-time { font-size: 0.7rem; min-width: 32px; }
    .cp-mute-btn { display: none; }
    #shuffleBtn  { display: none; }
}

/* =====================================================
   NAVBAR V2 — visual melhorado
   ===================================================== */
.navbar-v2 .container {
    gap: 1.5rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    padding-left: 8px;     /* logo encostado mais à esquerda */
    max-width: 100%;       /* navbar ocupa toda a largura */
}

/* Logo: leve glow e ligeiramente maior */
.navbar-v2 .logo { height: 64px; }
.navbar-v2 .logo img {
    filter: drop-shadow(0 0 14px rgba(167, 139, 250, 0.35));
    transition: filter 0.3s ease, transform 0.3s ease;
}
.navbar-v2 .logo:hover img {
    filter: drop-shadow(0 0 22px rgba(167, 139, 250, 0.6));
}

/* Nav links: underline animado no hover/active */
.navbar-v2 .nav-links {
    gap: 0.4rem;
    margin: 0 auto 0 0.5rem;
}
.navbar-v2 .nav-links > li > a,
.navbar-v2 .nav-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.95rem;
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text-soft);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease, background 0.2s ease;
}
.navbar-v2 .nav-links > li > a::after,
.navbar-v2 .nav-more-btn::after {
    content: '';
    position: absolute;
    left: 18%; right: 18%; bottom: 4px;
    height: 2px;
    background: var(--grad-1);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
    border-radius: 2px;
}
.navbar-v2 .nav-links > li > a:hover,
.navbar-v2 .nav-more-btn:hover,
.navbar-v2 .nav-links > li > a.active {
    color: var(--text);
    background: rgba(255, 255, 255, 0.04);
}
.navbar-v2 .nav-links > li > a:hover::after,
.navbar-v2 .nav-more-btn:hover::after,
.navbar-v2 .nav-links > li > a.active::after {
    transform: scaleX(1);
}

/* Dropdown "Mais" */
.nav-more { position: relative; }
.nav-more-btn .fa-chevron-down {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}
.nav-more.open .nav-more-btn .fa-chevron-down {
    transform: rotate(180deg);
}
.nav-more-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.5rem;
    list-style: none;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 1100;
}
.nav-more.open .nav-more-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav-more-menu li a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.9rem;
    color: var(--text-soft);
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: background 0.15s ease, color 0.15s ease;
}
.nav-more-menu li a:hover {
    background: rgba(167, 139, 250, 0.12);
    color: var(--text);
}
.nav-more-menu li a i {
    width: 16px;
    color: var(--accent-2);
    font-size: 0.85rem;
}
.nav-plano-link {
    color: #c4b5fd !important;
    font-weight: 600;
}
.nav-badge-pro {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    background: var(--grad-1);
    color: white;
}

/* Acções à direita */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

/* Pesquisa colapsável */
.nav-search { position: relative; display: flex; align-items: center; }
.nav-search-toggle {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-soft);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
}
.nav-search-toggle:hover {
    color: var(--text);
    border-color: var(--accent-2);
    background: rgba(167, 139, 250, 0.1);
}
.nav-search-box {
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%) scaleX(0);
    transform-origin: right center;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.3rem 0.3rem 0.3rem 1rem;
    width: 320px;
    max-width: 60vw;
    transition: transform 0.25s ease, opacity 0.25s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
}
.nav-search.expanded .nav-search-box {
    transform: translateY(-50%) scaleX(1);
    opacity: 1;
    pointer-events: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.nav-search.expanded .nav-search-toggle {
    visibility: hidden;
}
.nav-search-box input {
    background: transparent;
    border: none;
    color: var(--text);
    flex: 1;
    font-size: 0.9rem;
    outline: none;
    min-width: 0;
}
.nav-search-box input::placeholder { color: var(--text-mute); }
.nav-search-box button {
    background: var(--grad-1);
    border: none; color: white;
    width: 32px; height: 32px; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.nav-search-box button:hover { transform: scale(1.08); }

/* RESPONSIVE NAVBAR V2 */
@media (max-width: 1024px) {
    .navbar-v2 .nav-search-box { width: 260px; }
    .navbar-v2 .nav-links { gap: 0.2rem; }
}
@media (max-width: 900px) {
    .navbar-v2 .nav-search { display: none; }

    /* "Mais" — esconde o botão mas mostra os itens directamente no hamburger */
    .navbar-v2 .nav-more-btn { display: none; }
    .navbar-v2 .nav-more-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0;
        min-width: 0;
        display: block;
    }
    .navbar-v2 .nav-more-menu li a {
        padding: 0.85rem 1rem;
        border-radius: 10px;
        font-size: 1rem;
        color: var(--text-soft);
    }
    .navbar-v2 .nav-more-menu li a:hover,
    .navbar-v2 .nav-more-menu li a:active {
        background: var(--bg-elevated);
        color: var(--text);
    }
    /* Linha divisória antes dos itens extra */
    .navbar-v2 .nav-more {
        border-top: 1px solid var(--border);
        padding-top: 0.4rem;
        margin-top: 0.4rem;
        width: 100%;
    }
}

/* HERO */
.hero { position: relative; padding: 4rem 0 5rem; overflow: hidden; }
.hero-bg-glow { position: absolute; inset: 0; background: var(--grad-hero); pointer-events: none; z-index: 0; }
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: center; }

.hero-badge {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: rgba(139, 92, 246, 0.15); border: 1px solid rgba(139, 92, 246, 0.3);
    color: #c4b5fd; padding: 0.4rem 1rem; border-radius: 999px;
    font-size: 0.82rem; font-weight: 600; margin-bottom: 1.5rem;
}
.hero-text h1 { font-size: 3.8rem; line-height: 1.05; font-weight: 900; letter-spacing: -0.02em; margin-bottom: 1.2rem; }
.grad-text {
    background: var(--grad-1); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero-text p { font-size: 1.1rem; color: var(--text-soft); margin-bottom: 2rem; max-width: 480px; }

.hero-search {
    display: flex; align-items: center; gap: 0.5rem;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 999px; padding: 0.5rem 0.5rem 0.5rem 1.3rem;
    max-width: 480px; transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: var(--shadow);
}
.hero-search:focus-within { border-color: var(--accent-2); box-shadow: 0 0 0 4px var(--accent-glow); }
.hero-search > i { color: var(--text-mute); }
.hero-search input {
    flex: 1; background: transparent; border: none; color: var(--text);
    padding: 0.75rem 0; font-size: 1rem; outline: none;
}
.hero-search input::placeholder { color: var(--text-mute); }
.hero-search button {
    background: var(--grad-1); color: white; border: none;
    padding: 0.8rem 1.5rem; border-radius: 999px; cursor: pointer;
    font-weight: 600; transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-search button:hover { transform: translateY(-1px); box-shadow: 0 8px 22px var(--accent-glow); }

.hero-carousel {
    position: relative; height: 420px; border-radius: 24px; overflow: hidden;
    box-shadow: var(--shadow-lg); background: var(--bg-dark);
}
.carousel-slide {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    opacity: 0; transition: opacity 0.8s ease; cursor: pointer;
}
.carousel-slide.active { opacity: 1; }
.carousel-slide::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.95) 100%);
}
.carousel-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem; z-index: 2; }
.carousel-content .rank {
    display: inline-block; background: var(--grad-1); color: white;
    padding: 0.25rem 0.75rem; border-radius: 999px;
    font-size: 0.75rem; font-weight: 700; margin-bottom: 0.8rem;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.carousel-content h3 { font-size: 2rem; font-weight: 800; margin-bottom: 0.3rem; line-height: 1.1; }
.carousel-content p { color: var(--text-soft); margin-bottom: 1rem; font-size: 1rem; }
.carousel-content .btn-play-hero {
    background: white; color: black; border: none;
    padding: 0.7rem 1.5rem; border-radius: 999px; font-weight: 700;
    cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem;
    transition: transform 0.2s ease;
}
.carousel-content .btn-play-hero:hover { transform: scale(1.05); }

.carousel-dots { position: absolute; bottom: 1rem; right: 1.5rem; z-index: 3; display: flex; gap: 0.4rem; }
.carousel-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,0.3); cursor: pointer;
    transition: background 0.2s ease, width 0.2s ease; border: none;
}
.carousel-dot.active { background: white; width: 24px; border-radius: 4px; }

.carousel-skeleton {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, #1a1a2e 0%, #2a2a44 50%, #1a1a2e 100%);
    background-size: 200% 100%; animation: shimmer 1.5s infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* STATS BAR */
/* TOP POR PERÍODO */
.top-periodo-bar { padding: 2rem 0; background: var(--bg); }
.top-periodo-titulo {
    font-size: 1.8rem; font-weight: 800; letter-spacing: -0.01em;
    margin-bottom: 1.25rem;
    display: flex; align-items: center; gap: 0.6rem;
}
.top-periodo-titulo i,
.top-periodo-titulo::first-letter { color: inherit; }
.top-periodo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.tpc {
    display: flex; flex-direction: column; gap: 0.65rem;
    padding: 1rem 1.1rem;
    background: var(--bg-card); border-radius: 16px;
    border: 1px solid var(--border); box-shadow: var(--shadow-sm);
    cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-align: left;
    min-width: 0; overflow: hidden;
}
.tpc:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.tpc-periodo {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--text-mute);
}
.tpc-body { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.tpc-capa {
    width: 46px; height: 46px; border-radius: 8px;
    object-fit: cover; flex-shrink: 0;
    background: var(--bg-elevated);
}
.tpc-info { flex: 1; min-width: 0; }
.tpc-titulo {
    font-weight: 700; font-size: 0.88rem; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 0.1rem;
}
.tpc-artista {
    font-size: 0.76rem; color: var(--text-mute);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tpc-count {
    display: none;
}
.tpc-vazio {
    font-size: 0.82rem; color: var(--text-mute);
    font-style: italic; padding: 0.3rem 0;
}

@media (max-width: 900px) { .top-periodo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .top-periodo-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; } }

/* SECÇÕES */
.section { padding: 4rem 0; }
.section-alt { background: var(--bg-elevated); }
.section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.section-header h2 { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.01em; display: flex; align-items: center; gap: 0.6rem; }
.section-header h2 i {
    background: var(--grad-1); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.section-sub { color: var(--text-mute); font-size: 0.95rem; }
.section-ver-todos { margin-left: auto; font-size: 0.85rem; font-weight: 600; color: var(--accent); text-decoration: none; display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.9rem; border: 1.5px solid var(--accent); border-radius: 2rem; transition: background 0.2s, color 0.2s; white-space: nowrap; }
.section-ver-todos:hover { background: var(--accent); color: #fff; }

.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* MUSICAS GRID */
.musicas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.5rem; }
.musica-card {
    background: var(--bg-card); border-radius: 14px; overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease; cursor: pointer;
    border: 1px solid var(--border); box-shadow: var(--shadow-sm); padding: 1rem;
}
.musica-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); background: var(--bg-hover); }
.musica-capa {
    position: relative; width: 100%; aspect-ratio: 1 / 1;
    border-radius: 10px; overflow: hidden;
    background: linear-gradient(135deg, #4c1d95 0%, #831843 100%);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.7); font-size: 3rem; margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
}
.musica-capa img { width: 100%; height: 100%; object-fit: cover; }
.musica-capa::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.6) 100%); opacity: 0; transition: opacity 0.25s ease; }
.musica-card:hover .musica-capa::before { opacity: 1; }
.play-overlay {
    position: absolute; bottom: 0.8rem; right: 0.8rem;
    width: 48px; height: 48px; background: var(--accent); color: black;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: translateY(8px); transition: all 0.25s ease;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4); font-size: 1.1rem; z-index: 2; pointer-events: none;
}
.musica-card:hover .play-overlay { opacity: 1; transform: translateY(0); }
.musica-card:hover .play-overlay:hover { transform: scale(1.08); }

.musica-titulo { font-size: 0.98rem; font-weight: 700; margin-bottom: 0.3rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.musica-artista { color: var(--text-mute); font-size: 0.85rem; margin-bottom: 0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.musica-produtor { color: var(--text-mute); font-size: 0.72rem; margin-bottom: 0.7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .75; }
.musica-produtor i { color: var(--accent-2); margin-right: .2rem; }
.produtor-link { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; transition: opacity .15s, color .15s; }
.produtor-link:hover { opacity: 1; color: var(--accent-2); border-bottom-style: solid; }
.musica-stats { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: var(--text-mute); }
.musica-stats span { display: inline-flex; align-items: center; gap: 0.3rem; }
.btn-share-card {
    background: none; border: none; cursor: pointer; color: var(--text-mute);
    font-size: 0.82rem; padding: 4px 6px; border-radius: 6px;
    display: inline-flex; align-items: center;
    transition: color 0.2s, background 0.2s; margin-left: auto;
}
.btn-share-card:hover { color: var(--accent); background: rgba(255,255,255,0.06); }
.btn-share-modal {
    background: rgba(255,255,255,0.07);
    color: var(--text-soft);
    border: 1.5px solid rgba(255,255,255,0.12);
}
.btn-share-modal:hover { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.22); color: #fff; transform: translateY(-2px); }
.btn-musica { display: none; }

/* Adicionar à Playlist — card e modal */
.btn-addplaylist-card {
    background: none; border: none; cursor: pointer; color: var(--text-mute);
    font-size: 0.82rem; padding: 4px 6px; border-radius: 6px;
    display: inline-flex; align-items: center;
    transition: color 0.2s, background 0.2s;
}
.btn-addplaylist-card:hover { color: var(--accent-2); background: rgba(255,255,255,0.06); }
.btn-playlist-modal, .btn-playlist-modal-album {
    height: 46px; padding: 0 0.75rem; border-radius: 12px; font-size: 0.82rem; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    white-space: nowrap; overflow: hidden; letter-spacing: 0.01em;
    background: rgba(167,139,250,.1); color: var(--accent-2); border: 1.5px solid rgba(167,139,250,.25);
}
.btn-playlist-modal:hover, .btn-playlist-modal-album:hover { background: rgba(167,139,250,.18); border-color: rgba(167,139,250,.45); transform: translateY(-2px); }
.modal-btns-5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
@media (max-width: 768px) {
    .modal-btns-5 { grid-template-columns: 1fr 1fr; }
}

/* Modal "Adicionar à Playlist" — overlay dinâmico (public/script.js) */
.mf-playlist-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 9999;
    display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.mf-playlist-modal {
    background: var(--bg-card, #1f2937); border: 1px solid var(--border); border-radius: 16px;
    padding: 1.5rem; width: 100%; max-width: 420px; max-height: 80vh; overflow-y: auto;
}
.mf-playlist-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.mf-playlist-modal-head h3 { margin: 0; font-size: 1.05rem; color: var(--text); display: flex; align-items: center; gap: .5rem; }
.mf-playlist-modal-close { background: none; border: none; color: var(--text-mute); font-size: 1.4rem; cursor: pointer; line-height: 1; }
.mf-playlist-modal-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; min-height: 40px; }
.mf-playlist-item {
    display: flex; justify-content: space-between; align-items: center; width: 100%;
    background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 8px;
    padding: .65rem .85rem; color: var(--text); font-size: .88rem; cursor: pointer; text-align: left;
    transition: background .15s, border-color .15s;
}
.mf-playlist-item:hover { background: rgba(167,139,250,.12); border-color: rgba(167,139,250,.35); }
.mf-playlist-item-count { color: var(--text-mute); font-size: .75rem; flex-shrink: 0; margin-left: .75rem; }
.mf-playlist-empty, .mf-playlist-loading { color: var(--text-mute); font-size: .85rem; text-align: center; padding: 1rem 0; margin: 0; }
.mf-playlist-modal-new { display: flex; gap: .5rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.mf-playlist-modal-new input {
    flex: 1; background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 8px;
    padding: .55rem .75rem; color: var(--text); font-size: .85rem;
}
.mf-playlist-modal-new button {
    background: var(--grad-1); color: #fff; border: none; border-radius: 8px;
    padding: 0 1rem; font-size: .85rem; font-weight: 700; cursor: pointer; white-space: nowrap;
}

/* PÁGINA /playlists — descoberta */
.playlists-section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 2rem 0 1.2rem; flex-wrap: wrap; }
.playlists-section-head h2 { margin: 0; font-size: 1.3rem; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: .55rem; }
.playlists-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; }
.playlist-card { cursor: pointer; }
.playlist-card-capa { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 1/1; margin-bottom: .7rem; background: var(--bg-card); }
.playlist-card-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.playlist-card-badge {
    position: absolute; top: .5rem; left: .5rem; background: rgba(0,0,0,.6); color: #fff;
    font-size: .68rem; font-weight: 700; padding: .2rem .55rem; border-radius: 20px; backdrop-filter: blur(4px);
}
.playlist-card-titulo { font-size: 0.98rem; font-weight: 700; margin-bottom: 0.2rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.playlist-card-sub { color: var(--text-mute); font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.playlist-empty-state { color: var(--text-mute); text-align: center; padding: 2rem 1rem; grid-column: 1/-1; }
.btn-criar-playlist {
    background: var(--grad-1); color: #fff; border: none; border-radius: 10px;
    padding: .6rem 1.2rem; font-size: .88rem; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; gap: .5rem; transition: transform .18s ease;
}
.btn-criar-playlist:hover { transform: translateY(-2px); }
.criar-playlist-modal-content { max-width: 440px; }
.criar-playlist-field { margin-bottom: 1rem; }
.criar-playlist-field label { display: block; font-size: .82rem; color: var(--text-soft); margin-bottom: .35rem; }
.criar-playlist-field input[type="text"], .criar-playlist-field textarea {
    width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.05); border: 1px solid var(--border);
    border-radius: 8px; padding: .6rem .8rem; color: var(--text); font-size: .88rem; resize: vertical;
}
.criar-playlist-toggle { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--text-soft); }
.playlist-login-nudge { color: var(--text-mute); text-align: center; padding: 1.5rem; border: 1px dashed var(--border); border-radius: 12px; }
.playlist-login-nudge a { color: var(--accent-2); font-weight: 700; text-decoration: none; }

/* PÁGINA /p/:codigo — detalhe da playlist */
.playlist-detail-header { display: flex; gap: 1.8rem; align-items: flex-end; flex-wrap: wrap; margin: 1.5rem 0 2rem; }
.playlist-detail-capa { width: 220px; height: 220px; border-radius: 16px; object-fit: cover; box-shadow: var(--shadow-lg); flex-shrink: 0; background: var(--bg-card); }
.playlist-detail-info { flex: 1; min-width: 240px; }
.playlist-detail-tipo { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-2); margin-bottom: .4rem; }
.playlist-detail-nome { font-size: 2.2rem; font-weight: 900; color: var(--text); margin: 0 0 .5rem; line-height: 1.1; }
.playlist-detail-desc { color: var(--text-soft); font-size: .95rem; margin-bottom: .6rem; }
.playlist-detail-meta { color: var(--text-mute); font-size: .85rem; margin-bottom: 1.2rem; }
.playlist-detail-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.btn-playlist-action {
    background: rgba(255,255,255,0.07); color: var(--text-soft); border: 1.5px solid rgba(255,255,255,0.12);
    border-radius: 10px; padding: .55rem 1.1rem; font-size: .85rem; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: .5rem; transition: all .18s ease;
}
.btn-playlist-action:hover { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.22); color: #fff; transform: translateY(-2px); }
.btn-playlist-action.danger { background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.3); color: #f87171; }
.btn-playlist-action.danger:hover { background: rgba(248,113,113,.18); border-color: rgba(248,113,113,.5); color: #fca5a5; }
.playlist-track-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 2rem; }
.playlist-track-row {
    display: flex; align-items: center; gap: .9rem; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 10px; padding: .6rem .9rem; transition: background .15s;
}
.playlist-track-row:hover { background: var(--bg-elevated, rgba(255,255,255,0.04)); }
.playlist-track-num { color: var(--text-mute); font-size: .82rem; width: 22px; text-align: center; flex-shrink: 0; }
.playlist-track-capa { width: 46px; height: 46px; border-radius: 6px; object-fit: cover; flex-shrink: 0; cursor: pointer; }
.playlist-track-info { flex: 1; min-width: 0; cursor: pointer; }
.playlist-track-titulo { font-size: .9rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.playlist-track-artista { font-size: .8rem; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.playlist-track-tipo-badge { font-size: .68rem; font-weight: 700; color: var(--accent-2); background: rgba(167,139,250,.12); border-radius: 6px; padding: .12rem .4rem; margin-left: .4rem; }
.playlist-track-owner-actions { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; }
.playlist-track-owner-actions button {
    background: none; border: none; color: var(--text-mute); cursor: pointer; padding: .35rem .5rem;
    border-radius: 6px; font-size: .85rem; transition: color .15s, background .15s;
}
.playlist-track-owner-actions button:hover { color: var(--text); background: rgba(255,255,255,0.08); }
.playlist-track-owner-actions button.remove:hover { color: #f87171; }

/* ARTISTAS */
.artistas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.5rem; }
.artista-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 14px; padding: 1.2rem; text-align: center; cursor: pointer;
    box-shadow: var(--shadow-sm); transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.artista-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); background: var(--bg-hover); }
.artista-avatar {
    width: 110px; height: 110px; border-radius: 50%; margin: 0 auto 1rem;
    overflow: hidden; background: var(--grad-1);
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 2.5rem; font-weight: 800; box-shadow: var(--shadow);
}
.artista-avatar img { width: 100%; height: 100%; object-fit: cover; }
.artista-nome { font-weight: 700; color: var(--text); font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0.3rem; }
.artista-meta { color: var(--text-mute); font-size: 0.78rem; }

/* PRODUTORES — grid e card próprios */
.produtores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1.25rem;
}
.produtor-card {
    background: linear-gradient(160deg, var(--bg-dark-2) 0%, var(--bg-card) 100%);
    border: 1px solid rgba(167,139,250,.2);
    border-radius: 16px;
    padding: 1.4rem 1.2rem 1.1rem;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s ease;
    box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.produtor-card:hover {
    transform: translateY(-7px);
    border-color: rgba(167,139,250,.5);
    box-shadow: 0 12px 36px rgba(167,139,250,.18);
}
.produtor-card .artista-avatar {
    background: var(--grad-1);
    box-shadow: 0 0 0 3px rgba(167,139,250,.3), var(--shadow);
    width: 100px;
    height: 100px;
    font-size: 2.2rem;
}
.produtor-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .07em;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: var(--grad-1);
    color: #fff;
    margin-bottom: .5rem;
}
.produtor-estilos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .3rem;
    margin-top: .4rem;
}
.produtor-estilo-tag {
    font-size: .65rem;
    font-weight: 600;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: rgba(167,139,250,.12);
    color: #c4b5fd;
    border: 1px solid rgba(167,139,250,.18);
}
@media (max-width: 768px) {
    .produtores-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .produtor-card .artista-avatar { width: 84px; height: 84px; }
}

/* GÊNEROS */
.generos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .65rem; }
.genero-card {
    position: relative; aspect-ratio: 2 / 1; border-radius: 10px;
    overflow: hidden; padding: .65rem .75rem; cursor: pointer; color: white;
    font-weight: 700; display: flex; align-items: flex-end; transition: transform 0.25s ease;
}
.genero-card:hover { transform: scale(1.04); }
.genero-card:nth-child(7n+1) { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.genero-card:nth-child(7n+2) { background: linear-gradient(135deg, #ec4899, #be185d); }
.genero-card:nth-child(7n+3) { background: linear-gradient(135deg, #1db954, #047857); }
.genero-card:nth-child(7n+4) { background: linear-gradient(135deg, #f59e0b, #b45309); }
.genero-card:nth-child(7n+5) { background: linear-gradient(135deg, #06b6d4, #0e7490); }
.genero-card:nth-child(7n+6) { background: linear-gradient(135deg, #ef4444, #991b1b); }
.genero-card:nth-child(7n+7) { background: linear-gradient(135deg, #3b82f6, #1e40af); }
.genero-card i { position: absolute; bottom: -8px; right: -8px; font-size: 3rem; opacity: 0.3; transform: rotate(-20deg); }
.genero-card p { font-size: .88rem; z-index: 1; }

@media (max-width: 600px) {
    .generos-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: .4rem;
    }
    .genero-card {
        border-radius: 8px;
        padding: .4rem .5rem;
    }
    .genero-card i { font-size: 2rem; bottom: -6px; right: -6px; }
    .genero-card p { font-size: .72rem; }
}

/* MODAL */
.modal {
    display: none; position: fixed; z-index: 2000; inset: 0;
    background: rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    animation: fadeIn 0.3s ease;
}
/* Modal de música aparece sempre à frente do modal de álbum */
#musicModal {
    z-index: 2100;
    overflow-y: auto;
    align-items: flex-start;
}
#musicModal .modal-content {
    margin: 4% auto 4%;
    max-width: 860px;
    width: 92%;
}
/* Outras músicas do artista — dentro do modal */
.modal-outras-musicas { margin-top: 2rem; }
.modal-outras-titulo {
    font-size: 1rem; font-weight: 700; color: var(--text-soft);
    margin-bottom: 0.75rem; padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.modal-outras-lista { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; }
.modal-outra-musica {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.5rem 0.6rem; border-radius: 10px;
    cursor: pointer; transition: background 0.15s;
}
.modal-outra-musica:hover { background: var(--bg-elevated); }
.modal-outra-musica img {
    width: 40px; height: 40px; border-radius: 6px;
    object-fit: cover; flex-shrink: 0;
}
.modal-outra-titulo {
    flex: 1; font-size: 0.88rem; font-weight: 600;
    color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.modal-outra-downloads {
    font-size: 0.78rem; color: var(--text-mute); white-space: nowrap;
    display: flex; align-items: center; gap: 0.3rem;
}
.modal-outra-downloads i { color: var(--accent-2); font-size: 0.72rem; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-content {
    background: var(--bg-card); margin: 5% auto; padding: 2rem;
    border-radius: 16px; width: 90%; max-width: 800px;
    border: 1px solid var(--border); box-shadow: var(--shadow-lg); color: var(--text);
    max-height: 90vh; overflow-y: auto;   /* evita conteúdo cortado em viewports pequenas */
}
.close { color: var(--text-mute); float: right; font-size: 2rem; font-weight: bold; cursor: pointer; transition: color 0.2s ease; line-height: 1; }
.close:hover { color: var(--text); }
.modal-body { display: flex; gap: 2rem; }
.modal-left { flex: 1; }
.modal-left img { width: 100%; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,0.4); }
.modal-right { flex: 1.2; }
.modal-right h2 { color: var(--text); margin-bottom: 0.5rem; font-size: 1.6rem; font-weight: 800; }
.artista { color: var(--accent-2); font-size: 1rem; margin-bottom: 0.3rem; font-weight: 600; }
.album { color: var(--text-mute); margin-bottom: 1.2rem; font-size: 0.9rem; }
.modal-stats { display: flex; gap: 2rem; margin: 1rem 0 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.stat { display: flex; align-items: center; gap: 0.5rem; color: var(--text-soft); }
.stat i { color: var(--accent-2); }
.download-info { text-align: center; color: var(--text-mute); font-size: 0.85rem; margin-top: 0.5rem; }
.modal-btns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0.55rem;
    margin-top: 1.2rem;
}

.btn-play-preview, .btn-download, .btn-like-modal, .btn-share-modal {
    height: 46px;
    padding: 0 0.75rem;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    white-space: nowrap;
    overflow: hidden;
    letter-spacing: 0.01em;
}
.btn-play-preview {
    background: var(--grad-1);
    color: #fff;
    border: none;
    box-shadow: 0 4px 14px rgba(167,139,250,0.3);
}
.btn-play-preview:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(167,139,250,0.45); }
.btn-play-preview.playing {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    box-shadow: 0 4px 14px rgba(245,158,11,0.35);
    animation: pulse-btn 1.5s infinite;
}
@keyframes pulse-btn {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.5); }
    50%      { box-shadow: 0 0 0 10px rgba(245,158,11,0); }
}
.btn-download {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
    border: none;
    box-shadow: 0 4px 14px rgba(34,197,94,0.28);
}
.btn-download:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(34,197,94,0.42); }

.preview-player {
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: 12px; padding: 0.8rem 1rem; margin-bottom: 1rem;
    animation: fadeInDown 0.3s ease;
}
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.preview-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; }
.preview-label { color: var(--accent-2); font-size: 0.85rem; font-weight: 700; display: flex; align-items: center; gap: 0.4rem; }
.preview-time { color: var(--text-mute); font-size: 0.8rem; font-family: 'Courier New', monospace; }
.preview-player audio { width: 100%; height: 32px; }

.capa-fallback { width: 100%; height: 100%; object-fit: cover !important; background: var(--bg-elevated); }

/* ÁLBUNS */
.albuns-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; }
.album-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 14px; overflow: hidden; cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: var(--shadow-sm); padding: 1rem;
}
.album-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.album-card-capa {
    width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden;
    background: linear-gradient(135deg, #4c1d95 0%, #831843 100%);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.7); font-size: 3.5rem;
    margin-bottom: 1rem; box-shadow: var(--shadow-sm);
}
.album-card-capa img { width: 100%; height: 100%; object-fit: cover; }
.album-card-titulo { font-size: 1rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0.3rem; }
.album-card-artista { color: var(--accent-2); font-size: 0.85rem; margin-bottom: 0.6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.album-card-stats { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--text-mute); margin-bottom: 0.8rem; }
.btn-album {
    width: 100%; padding: 0.6rem;
    background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border);
    border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 0.85rem;
    transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 0.4rem;
}
.btn-album:hover { background: var(--grad-1); color: white; border-color: transparent; }

#albumModal {
    overflow-y: auto;
    align-items: flex-start;
}
.album-modal-content {
    max-width: 860px;
    width: 92%;
    margin: 4% auto 6%;   /* margem inferior extra para o mini player não tapar a última faixa */
}
.album-modal-header { display: flex; gap: 2rem; margin-bottom: 1.5rem; align-items: flex-start; }
#albumModalCapa { width: 180px; height: 180px; object-fit: cover; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,0.4); flex-shrink: 0; }
.album-modal-info { flex: 1; }
.album-modal-info h2 { color: var(--text); margin-bottom: 0.4rem; font-size: 1.6rem; font-weight: 800; }
.album-modal-stats { display: flex; gap: 1.5rem; margin: 0.8rem 0 1.2rem; font-size: 0.85rem; color: var(--text-soft); }
.btn-download-album {
    padding: 0.85rem 1.5rem; background: var(--grad-2); color: black;
    border: none; border-radius: 999px; font-size: 0.95rem; font-weight: 700;
    cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: inline-flex; align-items: center; gap: 0.5rem;
}
.btn-download-album:hover { transform: scale(1.03); box-shadow: 0 8px 22px rgba(29, 185, 84, 0.4); }

.album-faixas { border-top: 1px solid var(--border); padding-top: 1rem; }
.album-faixas h3 { color: var(--text); margin-bottom: 1rem; font-size: 1.1rem; }
.faixa-item { display: flex; align-items: center; gap: 1rem; padding: 0.7rem 0.6rem; border-radius: 8px; transition: background 0.2s ease; }
.faixa-item:hover { background: var(--bg-elevated); }
.faixa-numero { width: 26px; text-align: center; font-size: 0.85rem; color: var(--text-mute); font-weight: 700; flex-shrink: 0; }
.faixa-capa { width: 44px; height: 44px; border-radius: 6px; background: var(--grad-1); display: flex; align-items: center; justify-content: center; color: white; overflow: hidden; flex-shrink: 0; }
.faixa-capa img { width: 100%; height: 100%; object-fit: cover; }
.faixa-info { flex: 1; min-width: 0; }
.faixa-titulo { font-weight: 700; color: var(--text); font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.faixa-artista { color: var(--text-mute); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.faixa-btns { display: flex; gap: 0.4rem; flex-shrink: 0; }

.faixa-btn-ouvir, .faixa-btn-baixar {
    width: 36px; height: 36px; border: none; border-radius: 50%;
    cursor: pointer; font-size: 0.8rem;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s ease; color: white;
}
.faixa-btn-ouvir { background: var(--grad-1); }
.faixa-btn-baixar { background: var(--grad-2); color: black; }
.faixa-btn-ouvir:hover, .faixa-btn-baixar:hover { transform: scale(1.12); }

/* Faixa a tocar — destaque */
.faixa-tocando { background: var(--bg-elevated); }
.faixa-tocando .faixa-titulo { color: var(--accent-2); }
.faixa-tocando .faixa-numero { color: var(--accent-2); }
.faixa-btn-ouvir.playing { background: var(--accent-2); animation: pulse-play 1.4s ease-in-out infinite; }
@keyframes pulse-play {
    0%, 100% { box-shadow: 0 0 0 0 rgba(167,139,250,0.55); }
    50%       { box-shadow: 0 0 0 7px rgba(167,139,250,0); }
}

/* Mini player inline do álbum — fica colado ao fundo do modal enquanto se faz scroll */
.album-mini-player {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 0.75rem 1rem;
    background: var(--bg-dark-2);
    border-top: 1px solid var(--border);
    border-radius: 0 0 16px 16px;
    margin-top: 0.5rem;
    position: sticky;
    bottom: 0;
    z-index: 10;
}
.amp-capa {
    width: 40px; height: 40px; border-radius: 6px;
    object-fit: cover; flex-shrink: 0;
    background: var(--bg-hover);
}
.amp-track { flex-shrink: 0; min-width: 0; max-width: 140px; }
.amp-titulo {
    font-weight: 700; font-size: 0.85rem; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.amp-artista {
    font-size: 0.75rem; color: var(--text-mute);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.amp-progress {
    flex: 1; display: flex; align-items: center; gap: 0.5rem; min-width: 0;
}
.amp-progress span { font-size: 0.72rem; color: var(--text-mute); flex-shrink: 0; }
#ampSeek {
    flex: 1; height: 4px; -webkit-appearance: none; appearance: none;
    background: var(--bg-hover); border-radius: 4px; cursor: pointer; outline: none;
}
#ampSeek::-webkit-slider-thumb {
    -webkit-appearance: none; width: 12px; height: 12px;
    border-radius: 50%; background: var(--accent-2); cursor: pointer;
}
#ampSeek::-moz-range-thumb {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--accent-2); cursor: pointer; border: none;
}
.amp-btn {
    width: 36px; height: 36px; border: none; border-radius: 50%;
    background: var(--grad-1); color: white; font-size: 0.8rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: transform 0.2s ease;
}
.amp-btn:hover { transform: scale(1.1); }

/* PLAYER — layout Spotify (3 colunas) */
.player {
    display: none; position: fixed; bottom: 0; left: 0; right: 0;
    background: rgba(17, 24, 39, 0.97); border-top: 1px solid var(--border);
    color: var(--text); padding: 0.65rem 1.5rem;
    /* margem direita para não ficar atrás do botão flutuante do chat */
    padding-right: 5.5rem;
    z-index: 1500;
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.5);
}
audio { filter: invert(0.9) hue-rotate(180deg); width: 100%; height: 32px; }

/* Linha principal — 3 colunas */
.player-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    max-width: 1280px;
    margin: 0 auto;
}

/* Coluna esquerda: capa + título/artista */
.player-left { width: 44px; height: 44px; flex-shrink: 0; }
.player-left img { width: 100%; height: 100%; border-radius: 6px; object-fit: cover; }

/* Wrapper esquerdo (capa + info em linha) */
.player-content > .player-left,
.player-content > .player-track-info {
    /* handled by grid cell 1 — wrap them together */
}
/* Primeiro grid cell = capa + info lado a lado */
.player-content {
    grid-template-areas: "track center controls";
}
.player-left         { grid-area: unset; }
.player-track-info   { grid-area: unset; }
.player-center       { grid-area: unset; }
.player-right        { grid-area: unset; }

/* Re-definir como flex na célula esquerda */
.player-content {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
/* Capa */
.player-left { width: 46px; height: 46px; flex-shrink: 0; }
.player-left img { width: 100%; height: 100%; border-radius: 6px; object-fit: cover; }
/* Título + artista */
.player-track-info {
    flex: 0 0 160px;
    min-width: 0;
    overflow: hidden;
}
.player-track-info p {
    font-weight: 700; margin: 0; color: var(--text);
    font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player-track-info span {
    font-size: 0.74rem; color: var(--text-mute);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
/* Centro: botões + seek empilhados */
.player-center {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
}
/* Linha dos botões */
.cp-btns-row {
    display: flex; align-items: center; gap: 0.6rem;
}
/* Linha do seek */
.cp-seek-row {
    display: flex; align-items: center; gap: 0.5rem; width: 100%;
}
.cp-seek-row .cp-seek-wrap { flex: 1; min-width: 0; display: flex; align-items: center; }

/* Direita — vazia (mantida para não quebrar o flex) */
.player-right { display: none; }

/* ✕ empilhado por cima do tempo de duração */
.cp-time-close {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    flex-shrink: 0;
}
.btn-fechar {
    background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text);
    width: 26px; height: 26px; border-radius: 50%; cursor: pointer; transition: all 0.2s ease;
    font-size: 0.72rem; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.btn-fechar:hover { background: var(--danger); border-color: var(--danger); }

/* Mobile — compactar */
@media (max-width: 640px) {
    .player { padding: 0.5rem 0.75rem; padding-right: 3.8rem; }
    .player-track-info { flex: 0 0 100px; }
    .player-track-info p { font-size: 0.78rem; }
    #shuffleBtn, #prevBtn, #nextBtn { display: none; }
    .cp-seek-row .cp-time:last-child { display: none; }
}
@media (max-width: 375px) {
    .player { padding-right: 3rem; }
    .player-track-info { flex: 0 0 80px; }
}

/* PAGINAÇÃO */
.pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: 2rem; }
.pagination button, .pagination a, .pagination span {
    padding: 0.6rem 1rem; background: var(--bg-card); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px;
    cursor: pointer; transition: all 0.2s ease; font-weight: 600;
}
.pagination button:hover, .pagination a:hover { background: var(--grad-1); border-color: transparent; }
.pagination .active { background: var(--grad-1); border-color: transparent; }

/* ============ CONTACTO & FEEDBACK ============ */
.contacto-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 2.5rem;
    align-items: stretch;
}
/* Painel esquerdo — info */
.contacto-info {
    display: flex; flex-direction: column; gap: .85rem;
    height: 100%;
}
.contacto-info-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 14px; padding: 1.1rem 1.25rem;
    display: flex; flex-direction: column; gap: 0.35rem;
    transition: border-color 0.2s ease;
    flex: 1; /* os 3 cards partilham a altura igualmente */
}
.contacto-info-card:hover { border-color: rgba(167,139,250,0.3); }
.cic-icon {
    width: 36px; height: 36px; border-radius: 9px;
    background: var(--grad-1); display: flex; align-items: center;
    justify-content: center; color: white; font-size: .9rem; margin-bottom: 0.2rem;
}
.contacto-info-card h4 { font-weight: 700; color: var(--text); font-size: 0.92rem; }
.contacto-info-card p  { color: var(--text-mute); font-size: 0.83rem; line-height: 1.5; }

/* Painel direito — formulário */
.contacto-form-wrap {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 18px; padding: 2rem;
}
.contacto-form { display: flex; flex-direction: column; gap: 1.1rem; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cf-group { display: flex; flex-direction: column; gap: 0.4rem; position: relative; }
.cf-group label {
    font-size: 0.82rem; font-weight: 600; color: var(--text-mute);
    text-transform: uppercase; letter-spacing: 0.04em;
    display: flex; align-items: center; gap: 0.4rem;
}
.cf-group input,
.cf-group select,
.cf-group textarea {
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: 10px; padding: 0.75rem 1rem; color: var(--text);
    font-size: 0.9rem; font-family: inherit; outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
}
.cf-group input:focus,
.cf-group select:focus,
.cf-group textarea:focus {
    border-color: var(--accent-2);
    box-shadow: 0 0 0 3px rgba(167,139,250,0.15);
}
.cf-group select { cursor: pointer; -webkit-appearance: none; appearance: none; }
.cf-group textarea { resize: vertical; min-height: 130px; }
.cf-char-count {
    position: absolute; bottom: 0.6rem; right: 0.75rem;
    font-size: 0.72rem; color: var(--text-mute); pointer-events: none;
}
.btn-cf-enviar {
    width: 100%; padding: 0.9rem; border: none; border-radius: 12px;
    background: var(--grad-1); color: white; font-size: 1rem; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    gap: 0.6rem; transition: opacity 0.2s ease, transform 0.2s ease;
}
.btn-cf-enviar:hover:not(:disabled) { opacity: 0.9; transform: translateY(-1px); }
.btn-cf-enviar:disabled { opacity: 0.6; cursor: not-allowed; }

/* Estado de sucesso */
.cf-sucesso {
    flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 3rem 1rem; gap: 0.75rem;
}
.cf-sucesso-icon { font-size: 3.5rem; color: var(--accent); }
.cf-sucesso h3 { font-size: 1.4rem; font-weight: 800; color: var(--text); }
.cf-sucesso p  { color: var(--text-mute); font-size: 0.92rem; max-width: 300px; }
.btn-cf-nova {
    margin-top: 0.5rem; padding: 0.65rem 1.5rem; border: 1px solid var(--border);
    border-radius: 999px; background: transparent; color: var(--text);
    cursor: pointer; font-size: 0.88rem; font-weight: 600;
    display: flex; align-items: center; gap: 0.4rem;
    transition: background 0.2s ease;
}
.btn-cf-nova:hover { background: var(--bg-elevated); }

/* Responsive contacto */
@media (max-width: 900px) {
    .contacto-grid { grid-template-columns: 1fr; align-items: start; }
    .contacto-info { flex-direction: row; flex-wrap: wrap; height: auto; }
    .contacto-info-card { flex: 1; min-width: 180px; }
}
@media (max-width: 560px) {
    .form-row-2 { grid-template-columns: 1fr; }
    .contacto-form-wrap { padding: 1.25rem; }
    .contacto-info { flex-direction: column; }
}

/* FOOTER */
.footer { background: var(--bg-dark); color: #cbd5e1; padding: 2rem 0 1rem; }
.footer .footer-section h3 { color: white; }
.footer .footer-section p, .footer .footer-section li, .footer .footer-section a { color: #cbd5e1; }
.footer .footer-bottom { color: #94a3b8; border-top-color: rgba(255,255,255,0.1); }
.footer-placeholder { display: none; }
.footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; margin-bottom: 1.5rem; }
.footer-section h3 { color: var(--text); margin-bottom: 0.8rem; font-size: 1rem; font-weight: 700; }
.footer-section h3 i { color: var(--accent-2); }
.footer-section p, .footer-section li { font-size: 0.88rem; color: var(--text-soft); margin-bottom: 0.4rem; }
.footer-section ul { list-style: none; }
.footer-section a { color: var(--text-soft); text-decoration: none; transition: color 0.2s ease; }
.footer-section a:hover { color: var(--accent-2); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 1rem; text-align: center; color: var(--text-mute); font-size: 0.82rem; }

/* =====================================================
   ANÚNCIOS — sistema de monetização
   ===================================================== */
.ad-slot {
    margin: 0.8rem auto;
    text-align: center;
    display: none; /* só aparece se carregar um anúncio */
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}
.ad-slot.loaded { display: block; }
.ad-slot a {
    display: block;
    text-decoration: none;
    color: inherit;
    line-height: 0; /* remove espaço extra abaixo da imagem */
}
.ad-slot img {
    max-width: 100%;
    max-height: 120px;     /* limita altura máxima */
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    object-fit: contain;
}
.ad-slot:hover img {
    transform: scale(1.01);
    box-shadow: 0 6px 24px rgba(167, 139, 250, 0.25), 0 3px 14px rgba(0, 0, 0, 0.3);
}

.ad-slot-topo { max-width: 970px; margin-top: 0.6rem; }
.ad-slot-meio { max-width: 970px; }
.ad-slot-meio img { max-height: 150px; }  /* meio pode ser um pouco maior */
.ad-slot-pre-footer { max-width: 970px; margin-bottom: 0.6rem; }

/* === ANÚNCIO dentro da secção "Sobre" — ocupa ~20% da altura === */
.ad-slot-sobre {
    margin: 2.5rem auto 0.5rem;
    max-width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.05), rgba(244, 114, 182, 0.03));
    border: 1px solid rgba(167, 139, 250, 0.12);
    border-radius: 14px;
}
.ad-slot-sobre img {
    max-height: 140px;       /* mantém ~20% da altura típica da secção Sobre */
    max-width: 100%;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}
.ad-slot-sobre:hover img {
    box-shadow: 0 8px 26px rgba(167, 139, 250, 0.3), 0 4px 18px rgba(0, 0, 0, 0.35);
}
@media (max-width: 768px) {
    .ad-slot-sobre img { max-height: 100px; }
}

/* === HERO DESTAQUE — banner grande estilo hero === */
.ad-slot-hero-destaque {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box;
}
.ad-slot-hero-destaque img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: block !important;
    margin: 0 !important;
}
.ad-slot-hero-destaque .ad-label {
    top: 10px; left: 14px;
    font-size: 0.62rem;
    padding: 3px 9px;
}
@media (max-width: 768px) {
    .ad-slot-hero-destaque { margin-bottom: 0 !important; }
}

/* ── Hero Artistas Fan Carousel ── */
.hero-artistas-wrap {
    position: relative;
    width: 100%;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a0a2e 50%, #0a1a2e 100%);
    overflow: hidden;
    padding: 2.5rem 0 3rem;
    -webkit-user-select: none;
    user-select: none;
}
.hero-artista-card {
    position: absolute;
    border-radius: 16px;
    overflow: hidden;
    will-change: transform, opacity;
    backface-visibility: hidden;
}
.hero-artista-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.hero-artista-label {
    position: absolute;
    bottom: -34px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: .88rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.9);
    pointer-events: none;
    transition: opacity .4s ease;
}

@media (max-width: 768px) {
    .hero-artistas-wrap {
        min-height: 210px;
        padding: 1.2rem 0 2rem;
        background: linear-gradient(135deg, #08081a 0%, #160826 50%, #08111e 100%);
    }
}
@media (max-width: 480px) {
    .hero-artistas-wrap {
        min-height: 185px;
        padding: 1rem 0 1.8rem;
    }
}

/* ── Hero Destaque Slideshow ── */
.hero-ad-slideshow { position: relative; border-radius: 14px; overflow: hidden; }
.hero-ad-slide {
    width: 100%;
    display: none;
    animation: heroFadeIn .5s ease;
}
.hero-ad-slide.active { display: block; }
.hero-ad-slide img { border-radius: 14px !important; }
@keyframes heroFadeIn {
    from { opacity: 0; transform: scale(1.01); }
    to   { opacity: 1; transform: scale(1); }
}

.hero-ad-prev,
.hero-ad-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,.45); color: #fff;
    border: none; border-radius: 50%;
    width: 36px; height: 36px;
    font-size: 1.3rem; line-height: 1;
    cursor: pointer; z-index: 10;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s ease;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.hero-ad-prev { left: 10px; }
.hero-ad-next { right: 10px; }
.hero-ad-prev:hover,
.hero-ad-next:hover { background: rgba(0,0,0,.75); }

.hero-ad-dots {
    position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 6px; z-index: 10;
}
.hero-ad-dot {
    width: 8px; height: 8px; border-radius: 50%;
    border: none; background: rgba(255,255,255,.45);
    cursor: pointer; padding: 0; transition: background .2s, transform .2s;
}
.hero-ad-dot.active { background: #fff; transform: scale(1.3); }

@media (max-width: 768px) {
    .hero-ad-prev, .hero-ad-next { width: 28px; height: 28px; font-size: 1rem; }
    .hero-ad-dot { width: 6px; height: 6px; }
}

.ad-label {
    position: absolute;
    top: 6px; left: 6px;
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.52rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    z-index: 2;
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 0.25s ease;
}
.ad-slot:hover .ad-label { opacity: 1; }

/* Sticky mobile (320x50) */
.ad-slot-mobile-sticky {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgba(15, 23, 42, 0.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
    padding: 4px;
    text-align: center;
    z-index: 999;
}
.ad-slot-mobile-sticky.loaded { display: block; }
.ad-slot-mobile-sticky img { max-height: 44px; width: auto; margin: 0 auto; display: block; }
.ad-slot-mobile-sticky .ad-close-btn {
    position: absolute; top: -10px; right: 8px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--bg-soft); border: 1px solid var(--border);
    color: var(--text); font-size: 0.7rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
@media (min-width: 768px) {
    .ad-slot-mobile-sticky { display: none !important; }
}

/* Sidebar direita (desktop) */
.ad-slot-sidebar {
    display: none;
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 180px;
    max-height: 600px;
    background: transparent;
    z-index: 100;
}
.ad-slot-sidebar.loaded { display: block; }
.ad-slot-sidebar img { width: 100%; height: auto; border-radius: 10px; }
@media (max-width: 1300px) {
    .ad-slot-sidebar { display: none !important; }
}

/* === PARCEIROS === */
.footer-partners {
    border-top: 1px solid var(--border);
    padding: 1.4rem 0 1rem;
    text-align: center;
}
.footer-partners-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--text-mute);
    margin: 0 0 1rem;
    font-weight: 700;
    opacity: 0.85;
}
.footer-partners-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    justify-content: center;
    align-items: center;
}
.footer-partner {
    color: var(--text-soft);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.25s ease;
    opacity: 0.7;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.footer-partner:hover {
    opacity: 1;
    color: var(--text);
    background: rgba(167, 139, 250, 0.08);
    border-color: rgba(167, 139, 250, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(167, 139, 250, 0.2);
}

/* Parceiros com logo — sem card, apenas imagem com cantos arredondados */
.footer-partner-img {
    width: 140px !important;
    height: 72px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 14px !important;  /* radius no container — overflow:hidden corta limpo */
    overflow: hidden !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform .25s !important;
}
.footer-partner-img:hover {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: translateY(-2px) !important;
}
.footer-partner-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 0 !important;  /* radius gerido pelo container */
    filter: brightness(0.92);
    transition: filter 0.25s ease;
}
.footer-partner-img:hover img {
    filter: brightness(1.1);
}
@media (max-width: 600px) {
    /* Parceiros com logo — mais pequenos no mobile */
    .footer-partner-img {
        width: 88px !important;
        height: 46px !important;
        border-radius: 8px !important;
    }
    /* Parceiros texto — mais compactos */
    .footer-partner {
        font-size: 0.78rem;
        padding: 0.3rem 0.75rem;
    }
    .footer-partners-list {
        gap: 0.5rem 1rem;
    }
}

/* SUBMIT LINK + MODAL */
.submit-link {
    background: rgba(167, 139, 250, 0.15); border: 1px solid rgba(167, 139, 250, 0.3);
    color: #c4b5fd !important; padding: 0.4rem 0.9rem !important;
    border-radius: 999px; font-size: 0.85rem !important;
    display: inline-flex !important; align-items: center; gap: 0.4rem;
}
.submit-link:hover { background: var(--grad-1); border-color: transparent; color: white !important; }

.submit-modal-content { max-width: 720px; max-height: 90vh; overflow-y: auto; padding: 2rem; }
.submit-modal-header { margin-bottom: 1.5rem; text-align: center; }
.submit-modal-header h2 {
    background: var(--grad-1); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.6rem; font-weight: 800; margin-bottom: 0.5rem;
}
.submit-modal-header h2 i { -webkit-text-fill-color: initial; color: var(--accent-2); margin-right: 0.4rem; }
.submit-modal-header p { color: var(--text-soft); font-size: 0.92rem; }

.submit-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; background: var(--bg-elevated); padding: 0.3rem; border-radius: 12px; }
.submit-tab {
    flex: 1; padding: 0.7rem 1rem; background: transparent; border: none;
    color: var(--text-mute); cursor: pointer; font-weight: 600;
    font-size: 0.9rem; border-radius: 8px; transition: all 0.2s ease;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; font-family: inherit;
}
.submit-tab.active { background: var(--grad-1); color: white; box-shadow: 0 4px 12px var(--accent-glow); }

.submit-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.submit-form .form-group { margin-bottom: 1rem; }
.submit-form label { display: block; margin-bottom: 0.4rem; color: var(--text-soft); font-weight: 600; font-size: 0.88rem; }
.submit-form input[type="text"], .submit-form input[type="email"], .submit-form input[type="number"], .submit-form input[type="file"], .submit-form textarea, .submit-form select {
    width: 100%; padding: 0.75rem 0.9rem;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: 8px; font-size: 0.92rem; color: var(--text);
    font-family: inherit; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.submit-form select {
    -webkit-appearance: none; 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 d='M1 1l5 5 5-5' stroke='%239ca3af' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.2rem; cursor: pointer;
}
.submit-form select option { background: var(--bg-card); color: var(--text); }
.submit-form input::placeholder, .submit-form textarea::placeholder { color: var(--text-mute); }
.submit-form input:focus, .submit-form textarea:focus, .submit-form select:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--accent-glow); }
.genero-outro-input { margin-top: 8px !important; }
.submit-form input[type="file"] { cursor: pointer; padding: 0.6rem; }
.submit-form input[type="file"]::-webkit-file-upload-button {
    background: var(--grad-1); color: white; border: none;
    padding: 0.45rem 0.9rem; border-radius: 6px; margin-right: 0.8rem;
    font-weight: 600; cursor: pointer;
}
.form-hint { display: block; color: var(--text-mute); font-size: 0.78rem; margin-top: 0.3rem; }

.submit-divider { display: flex; align-items: center; margin: 1.5rem 0 1rem; gap: 1rem; }
.submit-divider::before, .submit-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.submit-divider span { color: var(--text-mute); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

.btn-submit-public {
    width: 100%; padding: 0.95rem; background: var(--grad-1); color: white;
    border: none; border-radius: 999px; font-size: 0.95rem; font-weight: 700;
    cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-top: 0.5rem; display: inline-flex; align-items: center; justify-content: center;
    gap: 0.5rem; font-family: inherit;
}
.btn-submit-public:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 25px var(--accent-glow); }
.btn-submit-public:disabled { opacity: 0.6; cursor: not-allowed; }
.submit-progress { text-align: center; color: var(--accent-2); margin-top: 1rem; font-weight: 600; font-size: 0.9rem; }

@media (max-width: 600px) {
    .submit-modal-content { padding: 1.2rem; }
    .submit-form .form-row { grid-template-columns: 1fr; }
}

/* SECÇÃO SOBRE */
.sobre-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: start; }
.sobre-texto p { color: var(--text-soft); font-size: 1rem; line-height: 1.7; margin-bottom: 1.2rem; }
.sobre-lead { font-size: 1.1rem !important; color: var(--text) !important; }
.sobre-lead strong {
    background: var(--grad-1); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; font-weight: 800;
}
.sobre-tagline {
    font-size: 1.05rem !important; color: var(--text) !important; font-weight: 600;
    padding: 1rem 1.2rem; background: rgba(167, 139, 250, 0.08);
    border-left: 3px solid var(--accent-2); border-radius: 0 8px 8px 0; margin-top: 1.5rem;
}
.sobre-features { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.feature-card {
    background: var(--bg-card); border: 1px solid var(--border);
    padding: 1.5rem; border-radius: 14px; box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); background: var(--bg-hover); }
.feature-icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: var(--grad-1); display: flex; align-items: center; justify-content: center;
    color: white; font-size: 1.2rem; margin-bottom: 1rem;
}
.feature-card h4 { color: var(--text); font-size: 1.05rem; font-weight: 700; margin-bottom: 0.4rem; }
.feature-card p { color: var(--text-mute); font-size: 0.88rem; line-height: 1.5; }

@media (max-width: 900px) { .sobre-grid { grid-template-columns: 1fr; gap: 2rem; } }
@media (max-width: 540px) { .sobre-features { grid-template-columns: 1fr; } }

/* SOCIAL LINKS */
.footer-social-text { color: #94a3b8 !important; font-size: 0.85rem; margin-bottom: 0.9rem; }
.social-links { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.social-link {
    width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1 !important; border-radius: 50%; text-decoration: none;
    font-size: 1rem; transition: all 0.25s ease; position: relative; overflow: hidden;
}
.social-link::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity 0.25s ease; }
.social-link i { position: relative; z-index: 1; transition: transform 0.25s ease; }
.social-link:hover { transform: translateY(-3px); border-color: transparent; color: white !important; }
.social-link:hover::before { opacity: 1; }
.social-link:hover i { transform: scale(1.15); }
.social-link.instagram::before { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.social-link.facebook::before  { background: #1877f2; }
.social-link.whatsapp::before  { background: #25D366; }
.social-link.tiktok::before    { background: linear-gradient(135deg, #25F4EE 0%, #FE2C55 100%); }
.social-link.youtube::before   { background: #FF0000; }
.social-link.instagram:hover { box-shadow: 0 6px 20px rgba(220, 39, 67, 0.4); }
.social-link.facebook:hover  { box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4); }
.social-link.whatsapp:hover  { box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4); }
.social-link.tiktok:hover    { box-shadow: 0 6px 20px rgba(254, 44, 85, 0.4); }
.social-link.youtube:hover   { box-shadow: 0 6px 20px rgba(255, 0, 0, 0.4); }

/* AD CONTAINER */
.ad-container { padding: 1.5rem; text-align: center; background: var(--bg-elevated); margin: 1rem 0; }

/* LOADING / SKELETON */
.loading { text-align: center; padding: 2rem; color: var(--text-mute); }
.spinner {
    border: 3px solid var(--border); border-top: 3px solid var(--accent-2);
    border-radius: 50%; width: 36px; height: 36px;
    animation: spin 1s linear infinite; margin: 0 auto 0.8rem;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.skeleton-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 14px; padding: 1rem; overflow: hidden; box-shadow: var(--shadow-sm);
}
.skeleton-block {
    background: linear-gradient(90deg, #374151 0%, #4b5563 50%, #374151 100%);
    background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px;
}
.skeleton-cover { width: 100%; aspect-ratio: 1 / 1; margin-bottom: 1rem; }
.skeleton-line { height: 12px; margin-bottom: 0.5rem; }
.skeleton-line.short { width: 60%; }
.skeleton-artista {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 14px; padding: 1.2rem; text-align: center; box-shadow: var(--shadow-sm);
}
.skeleton-avatar {
    width: 110px; height: 110px; border-radius: 50%; margin: 0 auto 1rem;
    background: linear-gradient(90deg, #374151 0%, #4b5563 50%, #374151 100%);
    background-size: 200% 100%; animation: shimmer 1.5s infinite;
}

/* NOTIFICAÇÕES */
.notification {
    position: fixed; top: 20px; right: 20px;
    padding: 0.9rem 1.5rem; background: var(--bg-card); color: var(--text);
    border-radius: 12px; border: 1px solid var(--border); box-shadow: var(--shadow-lg);
    z-index: 3000; animation: slideIn 0.3s ease;
    font-size: 0.9rem; font-weight: 500;
}
@keyframes slideIn { from { transform: translateX(400px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.notification.success { border-left: 3px solid var(--accent); }
.notification.error   { border-left: 3px solid var(--danger); }
.notification.warning { border-left: 3px solid var(--warning); }
.notification.info    { border-left: 3px solid var(--accent-2); }

/* ============ BADGE SOBREPOSTO NO AVATAR (plano) ============ */
.artista-avatar-wrap {
    position: relative;
    width: fit-content;
    margin: 0 auto 1rem;
}
.artista-avatar-wrap .artista-avatar { margin: 0; }

.avatar-plan-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 34px;
    height: 34px;
    object-fit: contain;
    z-index: 3;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
}

/* Tamanho maior na página de perfil (hero 200px) */
.artista-hero-avatar-wrap .avatar-plan-badge {
    width: 52px;
    height: 52px;
    bottom: 4px;
    right: 4px;
}

/* Wrapper externo para o avatar hero: mesmas dimensões do círculo, sem overflow, posiciona o badge */
.artista-hero-avatar-wrap {
    position: relative;
    width: 200px;
    height: 200px;
    flex-shrink: 0;
}

/* ============ BADGES DE VERIFICAÇÃO / PLANO ============ */
.badge-tier {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    font-size: 0.7em;
    margin-left: 0.25em;
    vertical-align: middle;
    flex-shrink: 0;
    color: #fff;
}
.badge-tier i { font-size: 0.55em; line-height: 1; }

/* Tier: free verificado — cinzento discreto */
.badge-tier-free {
    background: #475569;
}

/* Tier: artist — azul clássico + pulso suave */
.badge-tier-artist {
    background: #1d9bf0;
    animation: badge-pulse-blue 3s ease-in-out infinite;
}
@keyframes badge-pulse-blue {
    0%, 100% { box-shadow: 0 0 0 0 rgba(29,155,240,0.45); }
    50%      { box-shadow: 0 0 0 5px rgba(29,155,240,0); }
}

/* Tier: pro — dourado + brilho */
.badge-tier-pro {
    background: linear-gradient(135deg, #d97706, #f59e0b);
    animation: badge-pulse-gold 3s ease-in-out infinite;
}
@keyframes badge-pulse-gold {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(245,158,11,0); }
}

/* Tier: label — roxo premium + brilho */
.badge-tier-label {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    animation: badge-pulse-purple 3s ease-in-out infinite;
}
@keyframes badge-pulse-purple {
    0%, 100% { box-shadow: 0 0 0 0 rgba(168,85,247,0.55); }
    50%      { box-shadow: 0 0 0 7px rgba(168,85,247,0); }
}

/* Tamanho maior no hero de artista */
#artistaNome .badge-tier {
    font-size: 0.8em;
    width: 0.8em;
    height: 0.8em;
}

/* ============ PÁGINA DE ARTISTA ============ */
.artista-hero {
    position: relative;
    padding: 4rem 0 3rem;
    overflow: hidden;
    background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg) 100%);
}
.artista-hero-bg {
    position: absolute; inset: 0;
    background: var(--grad-hero);
    opacity: 0.6;
    pointer-events: none;
}
.artista-hero-inner {
    position: relative; z-index: 1;
    display: flex;
    align-items: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}
.artista-hero-avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    border: 4px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
    background: var(--grad-1);
}
.artista-hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.artista-hero-info { flex: 1; min-width: 250px; }
.artista-hero-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(167, 139, 250, 0.15);
    border: 1px solid rgba(167, 139, 250, 0.3);
    color: #c4b5fd;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}
#artistaNome {
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
    word-break: break-word;
}
.artista-hero-stats {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}
.artista-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.artista-stat strong {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.artista-stat span {
    color: var(--text-mute);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.3rem;
}

.artista-hero-label-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.artista-hero-label-row .artista-hero-label { margin-bottom: 0; }

.artista-provincia {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--text-mute);
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(255,255,255,0.06);
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--border);
}

.artista-bio {
    color: var(--text-soft);
    font-size: 1rem;
    line-height: 1.65;
    max-width: 600px;
    margin-bottom: 1.5rem;
    opacity: 0.85;
}

.artista-social {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 1.2rem;
}
.artista-social-link {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    text-decoration: none;
    color: white;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    opacity: 0.85;
}
.artista-social-link:hover { transform: translateY(-2px); opacity: 1; box-shadow: 0 6px 16px rgba(0,0,0,0.4); }
.artista-social-link.instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.artista-social-link.facebook  { background: #1877f2; }
.artista-social-link.youtube   { background: #ff0000; }
.artista-social-link.tiktok    { background: #010101; border: 1px solid rgba(255,255,255,0.15); }
.artista-social-link.whatsapp  { background: #25d366; }

.artista-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
    flex-wrap: nowrap;
}
.artista-tabs::-webkit-scrollbar { display: none; }
.artista-tab {
    padding: 0.85rem 1.5rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-mute);
    transition: all 0.2s ease;
    font-size: 0.95rem;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.artista-tab:hover { color: var(--text-soft); }
.artista-tab.active {
    color: var(--accent-2);
    border-bottom-color: var(--accent-2);
}
.artista-tab-count {
    background: var(--bg-elevated);
    color: var(--text-mute);
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}
.artista-tab.active .artista-tab-count {
    background: var(--accent-2);
    color: white;
}

.artista-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-mute);
}
.artista-empty i { font-size: 3rem; margin-bottom: 1rem; color: var(--accent-2); }
.artista-empty p { font-size: 1.1rem; margin-bottom: 1.5rem; }
.btn-voltar {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.5rem;
    background: var(--grad-1);
    color: white;
    text-decoration: none;
    border-radius: 999px;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-voltar:hover { transform: translateY(-1px); box-shadow: 0 10px 25px var(--accent-glow); }

/* Link de artista clicável nos cards de música (verificado) */
.artista-link {
    color: var(--text-mute);
    text-decoration: none;
    transition: color 0.15s ease;
}
.artista-link:hover {
    color: var(--accent-2);
    text-decoration: underline;
}
/* Artista não verificado — sem link */
.artista-link-plain {
    color: var(--text-mute);
    font-size: inherit;
}

/* ===== BOTÃO DE LIKE / GOSTO DO ARTISTA ===== */
.artista-like-row {
    margin-top: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-like-artista {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 1.3rem;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-mute);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.22s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    -webkit-user-select: none;
    user-select: none;
}

.btn-like-artista i {
    font-size: 1rem;
    transition: transform 0.22s ease, color 0.22s ease;
}

.btn-like-artista:hover {
    border-color: #f472b6;
    color: #f472b6;
    background: rgba(244, 114, 182, 0.1);
    box-shadow: 0 0 18px rgba(244, 114, 182, 0.25);
}

.btn-like-artista:hover i { transform: scale(1.2); }

/* Estado activo (já deu like) */
.btn-like-artista.liked {
    border-color: #f472b6;
    background: rgba(244, 114, 182, 0.18);
    color: #f472b6;
    box-shadow: 0 0 22px rgba(244, 114, 182, 0.3);
}
.btn-like-artista.liked i { color: #f472b6; }

/* Estado leitura — mostra contagem mas não é clicável (< 100 gostos) */
.btn-like-artista.like-readonly {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
    border-color: rgba(255,255,255,0.12);
    color: var(--text-mute, #8899aa);
    background: rgba(255,255,255,0.04);
    box-shadow: none;
}
.btn-like-artista.like-readonly i { color: inherit; }

/* ═══════════════════════════════════════════════════════════
   FÃS — Navbar: sino + botão auth + menu
   ═══════════════════════════════════════════════════════════ */

/* Sino de notificações */
.nav-fan-notif-btn {
    position: relative;
    background: none;
    border: none;
    color: var(--text-mute, #8899aa);
    font-size: 1.05rem;
    padding: .4rem .5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: color .2s;
}
.nav-fan-notif-btn:hover { color: var(--brand-l, #1a8fa0); }
.nav-notif-badge {
    position: absolute;
    top: 2px; right: 2px;
    min-width: 17px; height: 17px;
    background: #f43f5e;
    color: #fff;
    border-radius: 99px;
    font-size: .65rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    padding: 0 3px;
}

/* Botão auth fã */
.nav-fan-wrap   { position: relative; }
.nav-fan-auth-btn {
    display: flex; align-items: center; gap: .4rem;
    padding: .4rem .85rem;
    background: transparent;
    border: 1.5px solid rgba(255,255,255,.18);
    border-radius: 99px;
    color: var(--text-mute, #8899aa);
    font-size: .82rem; font-weight: 600;
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
    white-space: nowrap;
}
.nav-fan-auth-btn:hover {
    border-color: var(--brand-l, #1a8fa0);
    color: var(--brand-l, #1a8fa0);
    background: rgba(26,143,160,.08);
}
.nav-fan-auth-btn:disabled {
    opacity: .55;
    cursor: default;
    pointer-events: none;
}
.nav-fan-menu {
    position: absolute;
    top: calc(100% + 8px); right: 0;
    background: #1a2d3c;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    padding: .6rem 0;
    min-width: 160px;
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
    z-index: 200;
}
.nav-fan-menu-nome {
    padding: .5rem 1rem .15rem;
    font-size: .78rem;
    font-weight: 600;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-fan-menu-tipo {
    padding: .05rem 1rem .35rem;
    font-size: .72rem;
    font-weight: 500;
    color: var(--brand-l, #1a8fa0);
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: .3rem;
    white-space: nowrap;
}
.nav-fan-menu-sep {
    height: 1px;
    background: rgba(255,255,255,.08);
    margin: .2rem 0;
}
.nav-fan-menu button {
    width: 100%; padding: .5rem 1rem;
    background: none; border: none;
    color: var(--text-mute, #8899aa);
    font-size: .82rem; text-align: left;
    cursor: pointer; transition: background .15s, color .15s;
    display: flex; align-items: center; gap: .5rem;
}
.nav-fan-menu button:hover { background: rgba(255,255,255,.05); color: #e2e8f0; }

/* ═══════════════════════════════════════════════════════════
   FÃS — Painel de notificações
   ═══════════════════════════════════════════════════════════ */
.fan-notif-panel {
    position: fixed;
    top: 64px; right: 16px;
    width: min(360px, calc(100vw - 32px));
    max-height: 480px;
    background: #1a2d3c;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,.5);
    z-index: 1100;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.fan-notif-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: .85rem 1rem .7rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: .88rem; font-weight: 700; color: #e2e8f0;
}
.fan-notif-header button {
    background: none; border: none;
    color: var(--text-mute); cursor: pointer; font-size: .9rem;
    padding: .2rem .4rem; border-radius: 6px;
    transition: background .15s;
}
.fan-notif-header button:hover { background: rgba(255,255,255,.08); }
.fan-notif-list { overflow-y: auto; flex: 1; }
.fan-notif-empty {
    text-align: center;
    color: var(--text-mute, #8899aa);
    font-size: .82rem;
    padding: 2rem 1rem;
}
.fan-notif-item {
    display: flex; gap: .8rem; align-items: flex-start;
    padding: .7rem 1rem;
    cursor: pointer;
    transition: background .15s;
    border-bottom: 1px solid rgba(255,255,255,.05);
    position: relative;
}
.fan-notif-item:hover          { background: rgba(255,255,255,.04); }
.fan-notif-item.nao-lida       { background: rgba(26,143,160,.08); }
.fan-notif-icon  { font-size: 1.2rem; flex-shrink: 0; padding-top: .1rem; }
.fan-notif-titulo { font-size: .82rem; font-weight: 600; color: #e2e8f0; line-height: 1.3; }
.fan-notif-corpo  { font-size: .77rem; color: var(--text-mute); margin-top: .15rem; line-height: 1.3; }
.fan-notif-data   { font-size: .7rem;  color: var(--text-mute); margin-top: .25rem; }
.fan-notif-del {
    flex-shrink: 0;
    margin-left: auto;
    background: none; border: none; cursor: pointer;
    color: var(--text-mute); font-size: .85rem; line-height: 1;
    padding: .2rem .3rem; border-radius: 4px;
    opacity: 0; pointer-events: none;
    transition: opacity .15s, color .15s, background .15s;
    align-self: center;
}
.fan-notif-item:hover .fan-notif-del { opacity: 1; pointer-events: auto; }
.fan-notif-del:hover { color: #f87171; background: rgba(248,113,113,.12); }

/* ═══════════════════════════════════════════════════════════
   MODAL — Letra da música
   ═══════════════════════════════════════════════════════════ */
.modal-letra-toggle {
    width: 100%; display: flex; align-items: center;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
    border-radius: 10px; padding: .7rem 1rem; cursor: pointer;
    color: var(--text); font-size: .88rem; font-weight: 600;
    transition: background .15s;
}
.modal-letra-toggle:hover { background: rgba(255,255,255,.08); }
.modal-letra-body {
    margin-top: .5rem;
    background: rgba(0,0,0,.18); border-radius: 10px;
    padding: 1rem 1.2rem; max-height: 420px; overflow-y: auto;
}
.modal-letra-texto {
    white-space: pre-wrap; word-break: break-word;
    font-family: inherit; font-size: .88rem; line-height: 1.85;
    color: #d1d5db; margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   RÁDIO POR GÉNERO
   ═══════════════════════════════════════════════════════════ */
.radio-genre-chips {
    display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem;
}
.radio-genre-chip {
    padding: .48rem 1.1rem; border-radius: 999px; cursor: pointer;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
    color: var(--text-mute); font-size: .85rem; font-weight: 500;
    transition: background .18s, border-color .18s, color .18s, transform .12s;
    white-space: nowrap;
}
.radio-genre-chip:hover {
    background: rgba(13,110,126,.2); border-color: var(--brand-l); color: #e2e8f0;
    transform: translateY(-1px);
}
.radio-genre-chip.ativo {
    background: var(--brand); border-color: var(--brand-l); color: #fff; font-weight: 600;
}
.radio-ativo {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    margin-top: 1rem; padding: .7rem 1.1rem;
    background: rgba(13,110,126,.15); border: 1px solid rgba(26,143,160,.3);
    border-radius: 12px; font-size: .88rem; color: #e2e8f0;
}
.radio-ativo-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    background: var(--brand-l); animation: radioPulse 1.4s ease-in-out infinite;
}
@keyframes radioPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.8)} }
.radio-parar-btn {
    margin-left: auto; background: none; border: 1px solid rgba(248,113,113,.4);
    color: #f87171; border-radius: 8px; padding: .35rem .8rem;
    cursor: pointer; font-size: .8rem; font-weight: 600;
    transition: background .15s;
}
.radio-parar-btn:hover { background: rgba(248,113,113,.1); }

/* ═══════════════════════════════════════════════════════════
   FÃS — Histórico de reproduções
   ═══════════════════════════════════════════════════════════ */
.hist-item {
    display: flex; align-items: center; gap: .7rem;
    padding: .6rem .85rem;
    border-bottom: 1px solid rgba(255,255,255,.05);
    cursor: pointer; transition: background .15s;
}
.hist-item:hover { background: rgba(255,255,255,.04); }
.hist-capa {
    width: 42px; height: 42px; border-radius: 8px;
    object-fit: cover; flex-shrink: 0;
}
.hist-capa-placeholder {
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.25); font-size: .85rem;
}
.hist-info { flex: 1; min-width: 0; }
.hist-titulo {
    font-size: .82rem; font-weight: 700; color: #e2e8f0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hist-artista {
    font-size: .74rem; color: var(--text-mute);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: .1rem;
}
.hist-data { font-size: .68rem; color: var(--text-mute); margin-top: .15rem; opacity: .8; }
.hist-play-btn {
    width: 30px; height: 30px; border-radius: 50%; border: none;
    background: rgba(26,143,160,.2); color: var(--brand-l);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; font-size: .75rem;
    transition: background .18s, transform .15s;
}
.hist-play-btn:hover { background: rgba(26,143,160,.4); transform: scale(1.1); }

/* ═══════════════════════════════════════════════════════════
   FÃS — Modal de login / registo
   ═══════════════════════════════════════════════════════════ */
.fan-modal {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.65);
    z-index: 1000;
    align-items: flex-start; justify-content: center;  /* flex-start permite scroll vertical */
    padding: 1rem;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    overflow-y: auto;   /* scroll quando o modal é maior que a viewport */
}
.fan-modal-box {
    background: #112233;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 18px;
    padding: 2rem 2rem 1.8rem;
    width: min(420px, 100%);
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,.6);
    max-height: 92vh; overflow-y: auto;   /* protecção em ecrãs baixos */
    margin: auto 0;   /* centra verticalmente no scroll container */
}
.fan-modal-close {
    position: absolute; top: 1rem; right: 1.1rem;
    background: none; border: none;
    color: var(--text-mute); font-size: 1.4rem;
    cursor: pointer; line-height: 1;
    transition: color .15s;
}
.fan-modal-close:hover { color: #e2e8f0; }
.fan-modal-tabs {
    display: flex; gap: .5rem;
    margin-bottom: 1.5rem;
    background: rgba(255,255,255,.05);
    border-radius: 10px; padding: .3rem;
}
.fan-tab {
    flex: 1; padding: .5rem;
    background: none; border: none;
    border-radius: 8px;
    color: var(--text-mute);
    font-size: .85rem; font-weight: 600;
    cursor: pointer; transition: background .2s, color .2s;
}
.fan-tab.active {
    background: var(--brand, #0d6e7e);
    color: #fff;
}
.fan-modal-header {
    text-align: center; margin-bottom: 1.4rem;
}
.fan-modal-icon {
    font-size: 2rem; color: var(--brand-l, #1a8fa0);
    display: block; margin-bottom: .6rem;
}
.fan-modal-header h2 {
    margin: 0 0 .3rem;
    font-size: 1.25rem; color: #e2e8f0;
}
.fan-modal-header p {
    margin: 0; font-size: .82rem; color: var(--text-mute);
}
.fan-field { margin-bottom: 1rem; }
.fan-field label {
    display: block; font-size: .78rem;
    font-weight: 600; color: #94a3b8;
    margin-bottom: .3rem;
}
.fan-field input {
    width: 100%; box-sizing: border-box;
    padding: .7rem .9rem;
    background: rgba(255,255,255,.05);
    border: 1.5px solid rgba(255,255,255,.12);
    border-radius: 9px;
    color: #e2e8f0; font-size: .9rem;
    transition: border-color .2s;
    outline: none;
}
.fan-field input:focus { border-color: var(--brand-l, #1a8fa0); }
.fan-erro {
    background: rgba(244,63,94,.12);
    border: 1px solid rgba(244,63,94,.35);
    border-radius: 8px;
    color: #fca5a5;
    font-size: .8rem;
    padding: .55rem .8rem;
    margin-bottom: .8rem;
}
.fan-submit {
    width: 100%;
    padding: .8rem;
    background: linear-gradient(135deg, var(--brand,#0d6e7e), var(--brand-l,#1a8fa0));
    border: none; border-radius: 10px;
    color: #fff; font-size: .95rem; font-weight: 700;
    cursor: pointer; display: flex; align-items: center;
    justify-content: center; gap: .5rem;
    transition: opacity .2s, transform .15s;
}
.fan-submit:hover   { opacity: .9; }
.fan-submit:active  { transform: scale(.98); }
.fan-submit:disabled { opacity: .5; cursor: not-allowed; }
.fan-link-row {
    text-align: center; font-size: .78rem;
    color: var(--text-mute); margin-top: .9rem 0 0;
}
.fan-link-row a { color: var(--brand-l); text-decoration: none; }
.fan-link-row a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════
   FÃS — Botão "Seguir" no perfil do artista
   ═══════════════════════════════════════════════════════════ */
.btn-seguir-artista {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .6rem 1.3rem;
    background: linear-gradient(135deg, var(--brand,#0d6e7e), var(--brand-l,#1a8fa0));
    border: none;
    border-radius: 99px;
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 4px 18px rgba(13,110,126,.35);
    -webkit-user-select: none;
    user-select: none;
}
.btn-seguir-artista:hover  { opacity: .88; box-shadow: 0 4px 22px rgba(26,143,160,.45); }
.btn-seguir-artista:active { transform: scale(.97); }
.btn-seguir-artista.a-seguir {
    background: rgba(26,143,160,.15);
    border: 1.5px solid var(--brand-l, #1a8fa0);
    color: var(--brand-l, #1a8fa0);
    box-shadow: none;
}
.btn-seguir-artista.a-seguir:hover { background: rgba(26,143,160,.22); }
.seguir-count {
    font-size: .78rem;
    font-weight: 500;
    opacity: .75;
}

/* ══════════════════════════════════════════
   COMENTÁRIOS NO MODAL DE MÚSICA
══════════════════════════════════════════ */
.modal-comentarios {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 1.2rem 0 0;
    margin-top: 1.2rem;
}
.modal-coment-header {
    display: flex; align-items: center; gap: .5rem;
    font-size: .9rem; font-weight: 600; color: var(--text-mute);
    text-transform: uppercase; letter-spacing: .5px;
    margin-bottom: 1rem;
}
.modal-coment-header i { color: var(--brand-l); }
.modal-coment-total { font-size: .8rem; font-weight: 400; opacity: .6; }

/* Form */
.modal-comentarios textarea {
    width: 100%; background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1); border-radius: 8px;
    color: var(--text); padding: .7rem .9rem; font-size: .88rem;
    font-family: inherit; resize: none; outline: none;
    transition: border-color .2s;
}
.modal-comentarios textarea:focus { border-color: var(--brand-l); }
.modal-coment-form-footer {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: .4rem;
}
.coment-char { font-size: .75rem; color: var(--text-mute); }
.btn-coment-enviar {
    background: var(--brand); color: #fff;
    border: none; border-radius: 20px;
    padding: .45rem 1.1rem; font-size: .82rem; font-weight: 600;
    cursor: pointer; display: flex; align-items: center; gap: .35rem;
    transition: background .2s;
}
.btn-coment-enviar:hover { background: var(--brand-l); }
.btn-coment-enviar:disabled { opacity: .5; cursor: default; }

/* Prompt de login */
.coment-login-prompt {
    display: flex; align-items: center; gap: .6rem;
    background: rgba(255,255,255,.04); border-radius: 8px;
    padding: .8rem 1rem; margin-bottom: .8rem;
    font-size: .85rem; color: var(--text-mute);
}
.coment-login-prompt i { color: var(--brand-l); }
.coment-login-prompt button {
    margin-left: auto; background: var(--brand); color: #fff;
    border: none; border-radius: 16px; padding: .35rem .9rem;
    font-size: .8rem; font-weight: 600; cursor: pointer;
}

/* Lista */
.modal-coment-list { display: flex; flex-direction: column; gap: .75rem; margin-top: .8rem; }
.coment-loading, .coment-empty {
    text-align: center; color: var(--text-mute);
    font-size: .85rem; padding: 1rem 0;
}
.coment-item {
    display: flex; gap: .75rem; align-items: flex-start;
}
.coment-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    background: var(--brand); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; font-weight: 700;
}
.coment-corpo { flex: 1; min-width: 0; }
.coment-nome { font-size: .82rem; font-weight: 600; color: var(--text); }
.coment-data { font-size: .75rem; color: var(--text-mute); margin-left: .5rem; }
.coment-texto {
    margin: .2rem 0 0; font-size: .85rem; color: var(--text-mute);
    line-height: 1.5; word-break: break-word;
}
.coment-staff {
    background: rgba(167,139,250,0.06);
    border: 1px solid rgba(167,139,250,0.2);
    border-radius: 10px;
    padding: .6rem .75rem;
}
.coment-avatar-staff {
    background: linear-gradient(135deg, #a78bfa, #f472b6);
    font-size: .9rem;
}
.coment-staff-badge {
    display: inline-block;
    background: rgba(167,139,250,0.2);
    color: #c4b5fd;
    font-size: .65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 99px;
    margin-left: .35rem;
    vertical-align: middle;
    letter-spacing: .03em;
    text-transform: uppercase;
}
/* Badge do artista da música */
.coment-artista-badge {
    display: inline-block;
    background: rgba(96,165,250,0.18);
    color: #93c5fd;
    font-size: .65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 99px;
    margin-left: .35rem;
    vertical-align: middle;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.coment-avatar-artista {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
}
/* Botão Responder */
.btn-responder {
    background: none;
    border: none;
    color: var(--text-mute);
    font-size: .75rem;
    cursor: pointer;
    padding: .15rem .4rem;
    border-radius: 4px;
    transition: color .2s, background .2s;
    margin-top: .3rem;
}
.btn-responder:hover { color: var(--brand-l, #60a5fa); background: rgba(96,165,250,0.08); }
/* Bloco de respostas aninhadas */
.coment-replies {
    margin-top: .6rem;
    margin-left: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    border-left: 2px solid rgba(255,255,255,0.07);
    padding-left: .75rem;
}
/* Form inline de resposta */
.coment-reply-form {
    margin-top: .5rem;
    margin-left: 2.5rem;
    display: flex;
    gap: .5rem;
    align-items: flex-start;
}
.coment-reply-form textarea {
    flex: 1;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: .5rem .7rem;
    color: var(--text, #f1f5f9);
    font-size: .82rem;
    resize: none;
    min-height: 56px;
    line-height: 1.4;
    transition: border-color .2s;
}
.coment-reply-form textarea:focus { outline: none; border-color: rgba(96,165,250,0.5); }
.coment-reply-form textarea::placeholder { color: rgba(255,255,255,0.3); }
.coment-reply-form-btns { display: flex; flex-direction: column; gap: .3rem; }
.btn-reply-enviar {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: .35rem .7rem;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.btn-reply-enviar:disabled { opacity: .5; cursor: not-allowed; }
.btn-reply-cancelar {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-mute, #94a3b8);
    border-radius: 6px;
    padding: .3rem .6rem;
    font-size: .75rem;
    cursor: pointer;
}
.btn-reply-cancelar:hover { background: rgba(255,255,255,0.1); }
@media (max-width: 480px) {
    .coment-replies { margin-left: 1.25rem; padding-left: .5rem; }
    .coment-reply-form { margin-left: 1rem; flex-direction: column; }
    .coment-reply-form-btns { flex-direction: row; }
}

/* === BOTÃO PARTILHAR === */
.btn-share-artista {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 1.3rem;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-mute);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.22s ease;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    -webkit-user-select: none;
    user-select: none;
    margin-left: 0.6rem;
}
.btn-share-artista i { font-size: 1rem; transition: transform 0.22s ease, color 0.22s ease; }
.btn-share-artista:hover {
    border-color: var(--accent-2);
    color: var(--accent-2);
    background: rgba(167, 139, 250, 0.1);
    box-shadow: 0 0 18px rgba(167, 139, 250, 0.25);
}
.btn-share-artista:hover i { transform: scale(1.15); }

/* === BOTÃO SINO (PUSH NOTIFICATIONS) === */
.btn-bell-artista {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 1.3rem;
    border-radius: 999px;
    border: 2px solid rgba(255, 215, 0, 0.25);
    background: rgba(255, 215, 0, 0.06);
    color: var(--text-mute);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.22s ease;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    -webkit-user-select: none;
    user-select: none;
}
.btn-bell-artista i { font-size: 1rem; transition: transform 0.3s ease; }
.btn-bell-artista:hover {
    border-color: #fbbf24;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
    box-shadow: 0 0 18px rgba(251, 191, 36, 0.25);
}
.btn-bell-artista:hover i { transform: rotate(-15deg) scale(1.2); }
.btn-bell-artista.bell-active {
    border-color: #fbbf24;
    background: rgba(251, 191, 36, 0.18);
    color: #fbbf24;
    box-shadow: 0 0 22px rgba(251, 191, 36, 0.3);
}
.btn-bell-artista.bell-active i { color: #fbbf24; animation: bellRing 0.5s ease; }
.btn-bell-artista:disabled { opacity: 0.6; cursor: not-allowed; }

@keyframes bellRing {
    0%   { transform: rotate(0); }
    20%  { transform: rotate(-20deg); }
    40%  { transform: rotate(20deg); }
    60%  { transform: rotate(-12deg); }
    80%  { transform: rotate(8deg); }
    100% { transform: rotate(0); }
}

/* === MODAL DE PARTILHA === */
.share-modal-content {
    max-width: 460px !important;
    padding: 2rem !important;
}
.share-head { text-align: center; margin-bottom: 1.6rem; }
.share-head h2 {
    background: var(--grad-1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.4rem;
    margin: 0 0 0.3rem;
    display: inline-flex; align-items: center; gap: 0.5rem;
}
.share-head h2 i { -webkit-text-fill-color: #a78bfa; }
.share-subtitle { color: var(--text-mute); font-size: 0.92rem; margin: 0; }
.share-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem;
    margin-bottom: 1.4rem;
}
.share-option {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0.6rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: var(--text-soft);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.78rem;
    font-weight: 600;
}
.share-option i { font-size: 1.5rem; }
.share-option:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.2);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
}
.share-option.whatsapp i { color: #25d366; }
.share-option.facebook i { color: #1877f2; }
.share-option.twitter  i { color: #ffffff; }
.share-option.telegram i { color: #29b6f6; }
.share-option.email    i { color: #fbbf24; }
.share-option.native   i { color: #a78bfa; }
.share-option.whatsapp:hover { background: rgba(37, 211, 102, 0.12); border-color: #25d366; }
.share-option.facebook:hover { background: rgba(24, 119, 242, 0.12); border-color: #1877f2; }
.share-option.twitter:hover  { background: rgba(255, 255, 255, 0.1); border-color: #ffffff; }
.share-option.telegram:hover { background: rgba(41, 182, 246, 0.12); border-color: #29b6f6; }
.share-option.email:hover    { background: rgba(251, 191, 36, 0.12); border-color: #fbbf24; }
.share-option.native:hover   { background: rgba(167, 139, 250, 0.12); border-color: #a78bfa; }

.share-link-wrap {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.4rem 0.4rem 0.4rem 0.9rem;
}
.share-link-wrap input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 0.85rem;
    outline: none;
    min-width: 0;
}
.btn-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    background: var(--grad-1);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: all 0.2s ease;
}
.btn-copy:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(167, 139, 250, 0.35); }
.btn-copy.copied { background: linear-gradient(135deg, #34d399, #10b981); }

@media (max-width: 480px) {
    .share-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Animação de bounce ao clicar */
@keyframes likeBounce {
    0%  { transform: scale(1); }
    35% { transform: scale(1.35); }
    70% { transform: scale(0.88); }
    100%{ transform: scale(1); }
}
.btn-like-artista.like-bounce i { animation: likeBounce 0.45s ease forwards; }

/* RESPONSIVE da página artista */
@media (max-width: 768px) {
    .artista-hero { padding: 2rem 0 1.5rem; }
    .artista-hero-inner { gap: 1.5rem; flex-direction: column; text-align: center; }
    .artista-hero-avatar { width: 140px; height: 140px; }
    .artista-hero-avatar-wrap { width: 140px; height: 140px; }
    #artistaNome { font-size: 2.2rem; }
    .artista-hero-stats { justify-content: center; gap: 1.2rem; }
    .artista-stat strong { font-size: 1.3rem; }
    .artista-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .artista-hero-label-row { justify-content: center; }
    .artista-social { justify-content: center; }
    .artista-bio { text-align: center; max-width: 100%; }
    .artista-like-row { justify-content: center; }
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .hero-inner { grid-template-columns: 1fr; gap: 2rem; }
    .hero-carousel { height: 320px; }
    .hero-text h1 { font-size: 2.8rem; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .container { padding: 0 16px; }
    .navbar .container { gap: 0.6rem; flex-wrap: nowrap; }

    /* Mostrar hamburger */
    .hamburger { display: flex; flex-shrink: 0; }

    /* Menu dropdown quando aberto */
    .nav-links {
        display: none;
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        background: var(--bg-soft);
        flex-direction: column;
        padding: 1.2rem 1.5rem;
        gap: 0.5rem;
        border-bottom: 1px solid var(--border);
        box-shadow: 0 8px 24px rgba(0,0,0,0.4);
        z-index: 999;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }
    .nav-links.active { display: flex; }
    .nav-links li { width: 100%; }
    .nav-links a {
        display: block;
        padding: 0.85rem 1rem;
        border-radius: 10px;
        font-size: 1rem;
        transition: background 0.2s ease;
    }
    .nav-links a:hover, .nav-links a:active { background: var(--bg-elevated); }
    .nav-links .admin-link, .nav-links .submit-link {
        text-align: center;
        justify-content: center;
    }

    /* Esconder search bar da navbar no mobile (já há a do hero) */
    .search-bar { display: none; }
    .hero { padding: 2.5rem 0 3rem; }
    .hero-text h1 { font-size: 2.2rem; }
    .hero-text p { font-size: 1rem; }
    .hero-carousel { height: 260px; }
    .carousel-content { padding: 1.2rem; }
    .carousel-content h3 { font-size: 1.4rem; }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 0.8rem; }
    .stat-value { font-size: 1.3rem; }
    .stat-icon { width: 42px; height: 42px; font-size: 1rem; }
    .section { padding: 2.5rem 0; }
    .section-header h2 { font-size: 1.4rem; }
    .musicas-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; }
    .artistas-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .albuns-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .artista-avatar { width: 90px; height: 90px; }
    .modal-content { width: 95%; margin: 8% auto; padding: 1.5rem; }
    #musicModal .modal-content { width: 96%; margin: 4% auto; padding: 1.25rem 1rem 1.5rem; }
    .modal-body { flex-direction: column; }
    .album-modal-header { flex-direction: column; align-items: center; text-align: center; }
    .album-modal-stats { justify-content: center; }
}

/* ── Mobile Landscape (ecrã rodado) ─────────────────────────────────────── */
@media (max-width: 900px) and (orientation: landscape) {
    .hero { min-height: 100svh; padding: 1rem 0; }
    .hero-inner { flex-direction: row; align-items: center; gap: 1.5rem; }
    .hero-text { max-width: 55%; }
    .hero-text h1 { font-size: 1.6rem; }
    .hero-carousel { height: 200px; }
    .hero-search { max-width: 100%; }

    .navbar { padding: .5rem 0; }

    .section { padding: 1.5rem 0; }
    .section-header h2 { font-size: 1.2rem; }

    .musicas-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
    .albuns-grid  { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .artistas-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }

    /* Modal em landscape — usa o espaço horizontal disponível */
    .modal-content { width: 90%; margin: 2% auto; max-height: 90svh; overflow-y: auto; }
    #musicModal .modal-content { margin: 1% auto; }
    .modal-body { flex-direction: row; gap: 1.5rem; }
    .modal-capa { width: 140px; height: 140px; flex-shrink: 0; }
    .album-modal-header { flex-direction: row; align-items: flex-start; text-align: left; }
    .album-modal-stats { justify-content: flex-start; }
    #albumModalCapa { width: 130px; height: 130px; }
}

/* ============================================================
   CORRECÇÕES MOBILE GLOBAIS
   ============================================================ */

/* ── Modal body: colapsa para coluna em mobile portrait ���─ */
@media (max-width: 640px) and (orientation: portrait) {
    .modal-body { flex-direction: column; gap: 1rem; }
    .modal-capa { width: 120px; height: 120px; margin: 0 auto; }
    /* Limitar imagem de capa no modal de música */
    .modal-left img { max-width: 180px; max-height: 180px; width: auto; margin: 0 auto; display: block; object-fit: cover; }
    .modal-content { max-height: 90svh; overflow-y: auto; }
}

/* ── Navbar search: adapta a largura em ecrãs pequenos ── */
@media (max-width: 480px) {
    .nav-search-box { width: calc(100vw - 120px); max-width: calc(100vw - 60px); }
    .navbar-v2 .nav-search-box { width: calc(100vw - 120px); }
}

/* ── Hero search: ocupa largura total em ecrãs muito pequenos ── */
@media (max-width: 375px) {
    .hero-search { max-width: 100%; padding: 0.4rem 0.6rem; }
    .hero-search input { font-size: 0.9rem; }
}

/* ── Contacto grid: colapsa correctamente ── */
@media (max-width: 375px) {
    .contacto-grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* ── Top período: gap reduzido em ecrãs muito pequenos ── */
@media (max-width: 340px) {
    .top-periodo-grid { gap: 0.3rem; }
    .tpc { padding: 0.7rem 0.5rem; }
}

/* ── Footer partners: gap horizontal reduzido ── */
@media (max-width: 360px) {
    .footer-partners-list { gap: 0.5rem 1rem; }
}

/* ── Tabelas admin: remove min-width em mobile para evitar overflow ── */
@media (max-width: 768px) {
    .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { min-width: 420px; }
}
@media (max-width: 480px) {
    table { min-width: 360px; }
    th, td { padding: 0.65rem 0.6rem; font-size: 0.82rem; }
}

/* ── Botões: altura mínima de 44px para toque confortável ── */
@media (max-width: 768px) {
    .btn-aprovar-card, .btn-rejeitar-card { min-height: 44px; font-size: 0.85rem; }
    .pendente-card-actions { gap: 0.5rem; }
}

/* ── Ecrãs muito pequenos (320px - Galaxy S5, iPhone SE antigo) ── */
@media (max-width: 360px) {
    .pendente-card-header img,
    .pendente-card-header .icon-placeholder { width: 44px; height: 44px; }
    .pendente-card-header { gap: 0.5rem; }
    .pendente-card-titulo { font-size: 0.88rem; }
    .section-header h2 { font-size: 1.2rem; }
    .musicas-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    .albuns-grid { grid-template-columns: 1fr; }
}

/* ── Perfil artista/produtor: avatar e stats responsivos ── */
@media (max-width: 480px) {
    .artista-hero-avatar { width: 100px; height: 100px; }
    .artista-hero-avatar-wrap { width: 100px; height: 100px; }
    .artista-hero-info { min-width: auto; }
    .artista-hero-stats { gap: 0.8rem; flex-wrap: wrap; justify-content: center; }
    .btn-like-artista, .btn-share-artista, .btn-bell-artista { min-height: 44px; padding: 0.65rem 1rem; }
}

/* ── Grids de beats/serviços: forçar 1 coluna em mobile ── */
@media (max-width: 480px) {
    .beats-grid { grid-template-columns: 1fr !important; }
    .servicos-grid { grid-template-columns: 1fr !important; }
    .produtores-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.75rem; }
}

/* ── Search bars de listing pages (artistas / produtores / musicas) ── */
.artistas-search-bar,
.produtores-search-bar,
.musicas-search-bar {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--bg-elevated);
    border: 1.5px solid rgba(255,255,255,.07);
    border-radius: 999px;
    max-width: 560px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 20px rgba(0,0,0,.28);
}
.artistas-search-bar:focus-within,
.produtores-search-bar:focus-within,
.musicas-search-bar:focus-within {
    border-color: rgba(168,85,247,.4);
    box-shadow: 0 0 0 3px rgba(168,85,247,.12), 0 4px 20px rgba(0,0,0,.28);
}
.artistas-search-bar .sb-icon,
.produtores-search-bar .sb-icon,
.musicas-search-bar .sb-icon {
    padding: 0 0 0 1.25rem;
    color: var(--text-mute);
    font-size: 0.85rem;
    flex-shrink: 0;
}
.artistas-search-bar input,
.produtores-search-bar input,
.musicas-search-bar input {
    border: none;
    background: transparent;
    outline: none;
    color: var(--text);
    font-size: 0.97rem;
    width: 100%;
    padding: 0.9rem 0.9rem;
}
.artistas-search-bar input::placeholder,
.produtores-search-bar input::placeholder,
.musicas-search-bar input::placeholder { color: var(--text-mute); }
.artistas-search-bar .sb-btn,
.produtores-search-bar .sb-btn,
.musicas-search-bar .sb-btn {
    flex-shrink: 0;
    margin: 0.35rem;
    padding: 0.55rem 1.35rem;
    background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 10px rgba(168,85,247,.35);
}
.artistas-search-bar .sb-btn:hover,
.produtores-search-bar .sb-btn:hover,
.musicas-search-bar .sb-btn:hover {
    opacity: .88;
    box-shadow: 0 4px 16px rgba(168,85,247,.45);
}
@media (max-width: 480px) {
    .artistas-search-bar,
    .produtores-search-bar,
    .musicas-search-bar { max-width: 100%; }
}

/* ── Listing pages: hero ── */
.artistas-page-hero,
.produtores-page-hero,
.musicas-page-hero {
    background: linear-gradient(160deg, var(--bg-elevated) 0%, var(--bg) 100%);
    padding: 3.5rem 0 2.5rem;
    border-bottom: 1px solid var(--border);
}
.artistas-page-hero h1,
.produtores-page-hero h1,
.musicas-page-hero h1 {
    font-size: 2.2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
}
.artistas-page-hero h1 i,
.produtores-page-hero h1 i,
.musicas-page-hero h1 i {
    background: var(--grad-1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.artistas-page-hero p,
.produtores-page-hero p,
.musicas-page-hero p {
    color: var(--text-mute);
    font-size: 0.95rem;
    margin-bottom: 2rem;
}
@media (max-width: 600px) {
    .artistas-page-hero h1,
    .produtores-page-hero h1,
    .musicas-page-hero h1 { font-size: 1.5rem; }
}

/* ── Listing pages: count + pagination ── */
.artistas-count,
.produtores-count,
.musicas-count {
    color: var(--text-mute);
    font-size: 0.85rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.artistas-pagination,
.produtores-pagination,
.musicas-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 3rem;
    flex-wrap: wrap;
}
.pag-btn {
    padding: 0.45rem 1rem;
    border-radius: 2rem;
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.pag-btn:hover:not(:disabled) { border-color: var(--accent-1); color: var(--accent-1); }
.pag-btn.active { background: var(--accent-1); border-color: var(--accent-1); color: #fff; }
.pag-btn:disabled { opacity: 0.4; cursor: default; }

/* ── Navbar listing pages: ocultar links de secção + Mais ── */
.navbar-listing .nav-links > li:has(a[data-nav="trending"]),
.navbar-listing .nav-links > li:has(a[data-nav="artistas"]),
.navbar-listing .nav-links > li:has(a[data-nav="produtores"]),
.navbar-listing .nav-links > li:has(a[data-nav="albuns"]),
.navbar-listing .nav-links > li.nav-more,
.navbar-listing .nav-links > li[data-listing-hide] { display: none; }
/* Ocultar nav-search nas listing pages (body já tem campo de pesquisa próprio) */
.navbar-listing .nav-search { display: none; }

/* ── Faixas de álbum: texto legível em mobile ── */
@media (max-width: 480px) {
    .faixa-titulo { font-size: 0.82rem; }
    .faixa-artista { font-size: 0.75rem; }
    .faixa-item { gap: 0.6rem; padding: 0.6rem 0.4rem; }
    .faixa-capa { width: 36px; height: 36px; flex-shrink: 0; }
    .album-faixas { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── Tabs de artista com scroll suave ── */
.artista-tabs {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}
.artista-tab-btn { scroll-snap-align: center; }

/* ── Formulário de colaboração: inputs com altura adequada para toque ── */
@media (max-width: 480px) {
    .colab-form-row input,
    .colab-form-row select,
    .colab-form-row textarea { min-height: 44px; font-size: 16px; }
    .colab-form-row label { font-size: 0.82rem; }
}

/* ── Prevenir zoom iOS em inputs (font < 16px dispara zoom) ── */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="search"],
    input[type="password"],
    input[type="number"],
    select,
    textarea { font-size: 16px !important; }
    /* Restaurar em desktop — só afecta mobile */
}

/* ── Grids de artistas: 1 coluna em ecrãs muito pequenos ── */
@media (max-width: 375px) {
    .artistas-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    .produtores-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
}

/* ============================================================
   GUEST CHAT WIDGET — visitantes não registados
   ============================================================ */
#mfGuestWrap {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9999;
    font-family: 'Outfit', sans-serif;
}

/* Botão flutuante */
#mfGuestBtn {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6d28d9, #a78bfa);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 28px rgba(109, 40, 217, 0.5);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}
#mfGuestBtn:hover { transform: scale(1.08) translateY(-2px); box-shadow: 0 14px 36px rgba(109,40,217,0.65); }
#mfGuestBtn svg { width: 26px; height: 26px; }
#mfGuestBtn.active { background: linear-gradient(135deg, #4f46e5, #6d28d9); }

@keyframes mfgBtnPulse {
    0%, 100% { box-shadow: 0 8px 28px rgba(109,40,217,0.5); transform: scale(1); }
    50%       { box-shadow: 0 8px 32px rgba(239,68,68,0.65), 0 0 0 6px rgba(239,68,68,0.12); transform: scale(1.05); }
}
#mfGuestBtn.has-notification { animation: mfgBtnPulse 1.8s ease-in-out infinite; }

/* Badge de não lidas */
.mfg-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    background: #ef4444;
    color: white;
    font-size: 0.65rem;
    font-weight: 800;
    border-radius: 999px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2px solid #1f2937;
    line-height: 1;
}
.mfg-badge.show { display: flex; }

/* Painel do chat */
#mfGuestPanel {
    position: absolute;
    bottom: 70px;
    right: 0;
    width: 320px;
    height: 440px;
    background: #1f2937;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(16px) scale(0.96);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
#mfGuestPanel.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

/* Header */
.mfg-header {
    background: linear-gradient(135deg, #6d28d9 0%, #a78bfa 100%);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.mfg-header-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    flex-shrink: 0;
}
.mfg-header-info { flex: 1; min-width: 0; }
.mfg-header-title { font-weight: 800; font-size: 0.9rem; color: white; }
.mfg-header-sub { font-size: 0.7rem; color: rgba(255,255,255,0.78); margin-top: 1px; }
/* Grupo de acções no header (reiniciar + fechar) */
.mfg-header-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.mfg-restart-btn {
    background: rgba(255,255,255,0.12);
    border: none;
    color: rgba(255,255,255,0.85);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}
.mfg-restart-btn:hover {
    background: rgba(255,255,255,0.28);
    color: white;
}
.mfg-restart-btn.spinning svg {
    animation: mfgSpin 0.55s ease-in-out;
}
@keyframes mfgSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.mfg-close {
    background: rgba(255,255,255,0.15);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: background 0.2s ease;
    flex-shrink: 0;
}
.mfg-close:hover { background: rgba(255,255,255,0.28); }

/* Área de mensagens */
.mfg-msgs {
    flex: 1;
    overflow-y: auto;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scroll-behavior: smooth;
}
.mfg-msgs::-webkit-scrollbar { width: 4px; }
.mfg-msgs::-webkit-scrollbar-thumb { background: rgba(167,139,250,0.25); border-radius: 4px; }

/* Bolhas de mensagens */
.mfg-bub {
    display: flex;
    flex-direction: column;
    max-width: 85%;
    gap: 2px;
}
.mfg-bub--me {
    align-self: flex-end;
    align-items: flex-end;
}
.mfg-bub--them {
    align-self: flex-start;
    align-items: flex-start;
}
.mfg-bub-text {
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 0.83rem;
    line-height: 1.45;
    word-break: break-word;
}
.mfg-bub--me .mfg-bub-text {
    background: linear-gradient(135deg, #6d28d9, #a78bfa);
    color: white;
    border-bottom-right-radius: 4px;
}
.mfg-bub--them .mfg-bub-text {
    background: #283141;
    color: #e2e8f0;
    border: 1px solid rgba(255,255,255,0.07);
    border-bottom-left-radius: 4px;
}
.mfg-bub-time {
    font-size: 0.62rem;
    color: #6b7280;
    padding: 0 4px;
}

/* Indicador de digitação */
.mfg-typing {
    align-self: flex-start;
    background: #283141;
    border: 1px solid rgba(255,255,255,0.07);
    padding: 10px 14px;
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    display: flex;
    gap: 4px;
    align-items: center;
}
.mfg-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #a78bfa;
    display: inline-block;
    animation: mfgTyping 1.2s ease-in-out infinite;
}
.mfg-typing span:nth-child(2) { animation-delay: 0.2s; }
.mfg-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes mfgTyping {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30%            { opacity: 1;   transform: translateY(-4px); }
}

/* Área de input */
.mfg-input-wrap {
    display: flex;
    gap: 6px;
    padding: 10px 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: #1a2535;
    flex-shrink: 0;
    align-items: center;
}
.mfg-input {
    flex: 1;
    background: #283141;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 8px 14px;
    color: #e2e8f0;
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease;
}
.mfg-input::placeholder { color: #6b7280; }
.mfg-input:focus { border-color: #a78bfa; }
.mfg-input.mfg-shake { animation: mfgShake 0.4s ease; }
@keyframes mfgShake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-6px); }
    40%       { transform: translateX(6px); }
    60%       { transform: translateX(-4px); }
    80%       { transform: translateX(4px); }
}
.mfg-send-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6d28d9, #a78bfa);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mfg-send-btn:hover { transform: scale(1.08); box-shadow: 0 4px 12px rgba(109,40,217,0.5); }

/* Área de opções rápidas */
.mfg-options-wrap {
    padding: 10px 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: #1a2535;
    flex-shrink: 0;
    flex-direction: column;
    gap: 6px;
}
.mfg-opt-btn {
    display: block;
    width: 100%;
    padding: 9px 14px;
    border-radius: 12px;
    border: 1px solid rgba(167,139,250,0.3);
    background: rgba(167,139,250,0.08);
    color: #c4b5fd;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: all 0.18s ease;
}
.mfg-opt-btn:hover {
    background: rgba(167,139,250,0.18);
    border-color: #a78bfa;
    color: white;
    transform: translateX(3px);
}

/* Mobile */
@media (max-width: 480px) {
    #mfGuestWrap { bottom: 18px; right: 14px; }
    #mfGuestPanel { width: calc(100vw - 28px); right: -14px; height: 400px; }
}

/* ════════════════════════════════════════════════════════════
   CHARTS ANGOLA — Top 10 semanal
   ════════════════════════════════════════════════════════════ */
.charts-tabs {
    display: flex;
    gap: .45rem;
    align-items: center;
    flex-shrink: 0;
}
.charts-tab {
    display: flex; align-items: center; gap: .35rem;
    padding: .42rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.04);
    color: var(--text-mute);
    font-size: .82rem; font-weight: 600;
    cursor: pointer;
    transition: all .18s;
    white-space: nowrap;
}
.charts-tab:hover { border-color: var(--brand-l); color: var(--brand-l); }
.charts-tab.charts-tab-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.charts-loading {
    padding: 2rem; text-align: center;
    color: var(--text-mute); font-size: .9rem;
}
.charts-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem; margin-top: .85rem;
}
@media (max-width: 640px) {
    .charts-list { grid-template-columns: 1fr; }
}
.chart-item {
    display: flex; align-items: center; gap: .85rem;
    padding: .65rem .9rem;
    background: rgba(255,255,255,.04);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.06);
    cursor: pointer;
    transition: background .15s, transform .12s;
}
.chart-item:hover {
    background: rgba(26,143,160,.11);
    border-color: rgba(26,143,160,.22);
    transform: translateX(3px);
}
.chart-rank {
    font-family: 'DM Mono', monospace;
    font-size: .95rem; font-weight: 700;
    color: var(--text-mute);
    width: 2rem; text-align: center; flex-shrink: 0;
}
.chart-rank-top { font-size: 1.28rem; }
.chart-capa {
    width: 46px; height: 46px; border-radius: 8px;
    object-fit: cover; flex-shrink: 0;
    background: rgba(255,255,255,.06);
}
.chart-info { flex: 1; min-width: 0; }
.chart-titulo {
    font-weight: 600; font-size: .88rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--text);
}
.chart-artista {
    font-size: .76rem; color: var(--text-mute);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: .12rem;
}
.chart-count {
    display: flex; flex-direction: column;
    align-items: flex-end; gap: .18rem; flex-shrink: 0;
}
.chart-count-val { font-size: .72rem; color: var(--text-mute); white-space: nowrap; }
.chart-trend {
    font-size: .7rem; font-weight: 700;
    padding: .08rem .38rem; border-radius: 999px;
}
.trend-up   { color: #4ade80; background: rgba(74,222,128,.13); }
.trend-down { color: #f87171; background: rgba(248,113,113,.13); }
.trend-new  { color: var(--brand-l); background: rgba(26,143,160,.16); font-size: .62rem; }
.trend-same { color: rgba(255,255,255,.25); }
.charts-empty {
    text-align: center; color: var(--text-mute);
    padding: 2rem; font-size: .9rem; line-height: 1.6;
}
@media (max-width: 480px) {
    .charts-tab span { display: none; }
    .charts-tab { padding: .42rem .75rem; }
    .chart-item { gap: .6rem; padding: .58rem .65rem; }
    .chart-capa { width: 40px; height: 40px; border-radius: 6px; }
    .chart-count-val { display: none; }
}

/* ════════════════════════════════════════════════════════════
   BOTTOM NAVIGATION — Mobile App Feel
   ════════════════════════════════════════════════════════════ */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 56px;
    background: rgba(8,20,34,.97);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    backdrop-filter: blur(18px) saturate(1.5);
    border-top: 1px solid rgba(26,143,160,.18);
    z-index: 1500;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-nav-item {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2px;
    background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,.38);
    text-decoration: none;
    font-size: .58rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    padding: 0;
    transition: color .15s;
    min-height: 56px;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}


.bottom-nav-item i { font-size: 1.08rem; transition: transform .15s; }
.bottom-nav-item:hover { color: rgba(255,255,255,.7); }
.bottom-nav-item.bnav-active { color: var(--brand-l); }
.bottom-nav-item.bnav-active i {
    transform: translateY(-1px) scale(1.08);
    filter: drop-shadow(0 0 6px rgba(26,143,160,.55));
}
/* Badge de notificações no bottom nav */
.bottom-nav-item .bn-badge {
    position: absolute;
    top: 7px; right: calc(50% - 14px);
    min-width: 16px; height: 16px;
    background: #ef4444; color: #fff;
    font-size: .55rem; font-weight: 800;
    border-radius: 999px;
    display: none;
    align-items: center; justify-content: center;
    padding: 0 4px;
    border: 2px solid rgba(8,20,34,.97);
    line-height: 1;
}
.bottom-nav-item .bn-badge.show { display: flex; }

@media (max-width: 768px) {
    .bottom-nav { display: flex; }
    /* Corpo: adicionar espaço para bottom nav */
    body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important; }
    /* Player sobe acima do bottom nav */
    .player { bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important; }
    /* Guest chat sobe acima do bottom nav */
    #mfGuestWrap { bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important; }
    /* Modal: restringir capa em modo coluna */
    .modal-left img {
        max-width: 150px !important;
        max-height: 150px !important;
        margin: 0 auto;
        display: block;
    }
    /* Painel de notificações: limitar altura em mobile para não ultrapassar bottom nav */
    .fan-notif-panel {
        max-height: calc(100svh - 64px - 56px - env(safe-area-inset-bottom, 0px));
    }
}
@media (max-width: 480px) {
    .modal-left img { max-width: 110px !important; max-height: 110px !important; }
    .modal-stats { gap: .8rem; flex-wrap: wrap; }
    .modal-btns { grid-template-columns: 1fr 1fr; gap: 0.45rem; }
    .modal-btns button { height: 42px; font-size: .76rem; padding: 0 0.5rem; border-radius: 10px; }
}

/* ── Likes em músicas ────────────────────────────────────────────── */
.btn-like-card {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-mute);
    font-size: .72rem;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 5px;
    border-radius: 5px;
    transition: color .18s;
    line-height: 1;
}
.btn-like-card:hover { color: #f43f5e; }
.btn-like-card.liked { color: #f43f5e; }
.btn-like-card .like-count { font-size: .68rem; }

.btn-like-modal {
    background: rgba(244,63,94,.09);
    color: var(--text-soft);
    border: 1.5px solid rgba(244,63,94,.22);
}
.btn-like-modal:hover { background: rgba(244,63,94,.18); color: #f43f5e; border-color: rgba(244,63,94,.45); transform: translateY(-2px); }
.btn-like-modal.liked { background: rgba(244,63,94,.22); color: #f43f5e; border-color: rgba(244,63,94,.55); }
.btn-like-modal .like-count { font-size: .78rem; font-weight: 700; }

/* ============================================================
   CHARTS ANGOLA — section-header responsivo
   ============================================================ */

/* Permite que charts-tabs encolha como flex item em mobile        */
/* (a regra base tem flex-shrink:0 que impedia o layout correcto)  */
@media (max-width: 768px) {
    .section-header .charts-tabs { flex-shrink: 1; }
}
/* Em ecrãs estreitos: header em coluna, tabs por baixo do título  */
@media (max-width: 640px) {
    #chartsSection .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }
    #chartsSection .charts-tabs { align-self: flex-start; }
}

/* ── Charts tabs: tap target >= 44px em mobile ── */
@media (max-width: 480px) {
    .charts-tab { min-height: 44px; }
}

/* ============================================================
   MELHORIAS RESPONSIVE MOBILE — alinhamento e UX táctil
   ============================================================ */

/* ── Título "Top Por Período": reduzir em mobile ── */
@media (max-width: 768px) {
    .top-periodo-titulo { font-size: 1.4rem; margin-bottom: 1rem; }
}
@media (max-width: 480px) {
    .top-periodo-titulo { font-size: 1.2rem; }
}

/* ── Section-header: alinhar ao centro + inner div toma espaço sobrante ── */
/* Evita que section-ver-todos quebre para nova linha em ecrãs estreitos    */
@media (max-width: 768px) {
    .section-header { align-items: center; gap: 0.75rem; }
    .section-header > div { flex: 1 1 auto; min-width: 0; }
    .section-ver-todos { flex-shrink: 0; min-height: 36px; align-items: center; }
}

/* ── Section-ver-todos: compactar em ecrãs muito pequenos ── */
@media (max-width: 400px) {
    .section-ver-todos { font-size: 0.78rem; padding: 0.3rem 0.65rem; }
}

/* ── Play overlay: sempre visível em dispositivos touch (sem hover) ── */
@media (hover: none) and (pointer: coarse) {
    .play-overlay { opacity: 0.88; transform: translateY(0); }
    .musica-capa::before { opacity: 0.3; }
}
.musica-card:active .play-overlay { opacity: 1; transform: scale(1.06) !important; }

/* ── Hero: ajustes finos em ecrãs < 400px ── */
@media (max-width: 400px) {
    .hero { padding: 2rem 0 2.5rem; }
    .hero-text h1 { font-size: 1.85rem; }
    .hero-carousel { height: 220px; }
    .carousel-content h3 { font-size: 1.1rem; }
    .carousel-content { padding: 1rem; }
    .hero-search button { padding: 0.65rem 1rem; }
    .hero-badge { font-size: 0.75rem; padding: 0.35rem 0.8rem; margin-bottom: 1rem; }
}

/* ── Player: pista de informação usa espaço disponível em mobile ── */
@media (max-width: 640px) {
    .player-track-info { flex: 1 1 auto; min-width: 0; max-width: 150px; }
}
@media (max-width: 375px) {
    .player-track-info { max-width: 110px; }
}

/* ── Charts tabs: overflow horizontal em ecrãs < 360px ── */
@media (max-width: 360px) {
    .charts-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: none;
    scrollbar-width: none;
        padding-bottom: 2px;
        max-width: 100%;
    }
    .charts-tabs::-webkit-scrollbar { display: none; }
}

/* ── Modal: botão fechar com área de toque adequada (44px) ── */
@media (max-width: 768px) {
    .modal-close {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ── Top período cards: imagem e texto ajustados em ecrãs muito pequenos ── */
@media (max-width: 360px) {
    .tpc-capa { width: 38px; height: 38px; border-radius: 6px; }
    .tpc-titulo { font-size: 0.82rem; }
    .tpc-artista { font-size: 0.7rem; }
    .tpc { padding: 0.75rem 0.6rem; }
}

/* ── Paginação: botões com área de toque suficiente em mobile ── */
@media (max-width: 480px) {
    .pagination button,
    .pagination a,
    .pagination span { min-height: 44px; display: inline-flex; align-items: center; padding: 0 0.85rem; }
}

/* ── Artista card: avatar proporcionalmente menor em 360px ── */
@media (max-width: 360px) {
    .artista-avatar { width: 70px; height: 70px; font-size: 1.8rem; }
    .artista-nome { font-size: 0.85rem; }
}

/* ── Paginação .pag-btn: tap target mínimo em mobile ── */
@media (max-width: 768px) {
    .pag-btn { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ── Artista hero: centrar avatar + stats em mobile ── */
@media (max-width: 768px) {
    .artista-hero-inner { align-items: center; }
    .artista-stat { align-items: center; }
    .artista-hero-avatar-wrap { margin: 0 auto; }
}

/* ── Plan card featured: sem scale overflow em mobile ── */
@media (max-width: 768px) {
    .plan-card.featured { transform: none !important; }
    .plan-card.featured:hover { transform: translateY(-4px) !important; }
}