/* ==========================================================================
   CifraNET Music — identidade visual
   Escuro profundo + violeta + turquesa. Sem fontes ou bibliotecas externas.
   ========================================================================== */

:root {
    --m-fundo: #07070d;
    --m-fundo-2: #0b0b14;
    --m-superficie: #10101c;
    --m-superficie-2: #161624;
    --m-borda: rgba(255, 255, 255, .08);
    --m-borda-forte: rgba(255, 255, 255, .16);
    --m-texto: #f4f4fb;
    --m-texto-2: #a6a6bd;
    --m-texto-3: #6f6f88;
    --m-violeta: #7c5cff;
    --m-violeta-2: #a48bff;
    --m-turquesa: #35e0c8;
    --m-ouro: #ffb545;
    --m-vermelho: #ff5a76;
    --m-verde: #38d39f;
    --m-raio: 18px;
    --m-raio-g: 26px;
    --m-sombra: 0 18px 50px rgba(0, 0, 0, .45);
    --m-max: 1240px;
    --m-fonte: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body.m-body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--m-fonte);
    color: var(--m-texto);
    background:
        radial-gradient(900px 520px at 12% -10%, rgba(124, 92, 255, .22), transparent 60%),
        radial-gradient(800px 500px at 92% 0%, rgba(53, 224, 200, .12), transparent 55%),
        linear-gradient(180deg, var(--m-fundo) 0%, var(--m-fundo-2) 55%, #05050a 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    line-height: 1.55;
    overflow-x: hidden;
}

img { max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -.02em; }
p { margin: 0; }

.m-visualmente-oculto {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.m-pular {
    position: absolute; left: -999px; top: 10px; z-index: 200;
    padding: 10px 16px; border-radius: 12px; background: var(--m-violeta); color: #fff; font-weight: 800;
}
.m-pular:focus { left: 12px; }

:focus-visible {
    outline: 2px solid var(--m-turquesa);
    outline-offset: 3px;
    border-radius: 8px;
}

/* ── cabeçalho ─────────────────────────────────────────────────────── */
.m-topo {
    position: sticky; top: 0; z-index: 80;
    background: rgba(7, 7, 13, .78);
    backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--m-borda);
}
.m-topo__inner {
    max-width: 1480px; margin: 0 auto; padding: 14px 20px;
    display: flex; align-items: center; gap: 18px;
}
/* ── as três marcas do topo (19/10/2026) ──────────────────────────────
   CifraNET Music (a casa), CifraNET e Músicas para Missa, uma ao lado da outra
   no mesmo desenho da barra do site: quadradinho com o símbolo + nome. Os dois
   nomes vizinhos vão em DUAS linhas ("CifraNET/Music" e "Músicas/para Missa")
   para caberem na MESMA altura do quadradinho e não alargarem o topo. */
.m-marcas { display: inline-flex; align-items: center; gap: 14px; flex: 0 0 auto; min-width: 0; }
.m-marca { display: inline-flex; align-items: center; gap: 8px; color: var(--m-texto); flex: 0 0 auto; }
.m-marca:hover { color: #fff; }
.m-marca__ico {
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px;
    color: #fff; flex: 0 0 auto;
}
.m-marca__txt { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.12; letter-spacing: -.01em; white-space: nowrap; }
.m-marca__txt strong { font-weight: 800; }
/* O nome do CIFRANET fica numa linha só no computador e, no CELULAR, empilha
   "Cifra" / "NET" para dividir a linha com as outras duas logos e a conta. */
.m-marca__txt--cifranet > span, .m-marca__txt--cifranet > strong { display: inline; }
.m-marca--music .m-marca__ico { background: linear-gradient(135deg, var(--m-violeta), #4a2bd6 55%, #1e8d84); box-shadow: 0 10px 24px rgba(124, 92, 255, .38); }
.m-marca--music strong { color: var(--m-turquesa); }
.m-marca--cifranet .m-marca__ico { background: linear-gradient(135deg, #ff9d52, #ff6a00); box-shadow: 0 10px 24px rgba(255, 106, 0, .3); }
.m-marca--cifranet strong { color: #ff9d52; }
.m-marca--missa .m-marca__ico { background: linear-gradient(135deg, #22b184, #0b7a5c); box-shadow: 0 10px 24px rgba(11, 122, 92, .3); }
.m-marca--missa strong { color: #3ed598; }
.m-logo__marca {
    display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 13px;
    background: linear-gradient(135deg, var(--m-violeta), #4a2bd6 55%, #1e8d84);
    color: #fff; box-shadow: 0 10px 24px rgba(124, 92, 255, .38);
}

.m-busca-form {
    position: relative; flex: 1 1 260px; max-width: 430px; min-width: 0;
}
.m-busca-form__icone { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--m-texto-3); display: flex; }
.m-busca-form__campo {
    width: 100%; height: 44px; padding: 0 16px 0 42px; border-radius: 999px;
    border: 1px solid var(--m-borda); background: rgba(255, 255, 255, .05); color: var(--m-texto);
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.m-busca-form__campo::placeholder { color: var(--m-texto-3); }
.m-busca-form__campo:focus {
    outline: none; border-color: rgba(124, 92, 255, .7); background: rgba(255, 255, 255, .08);
    box-shadow: 0 0 0 4px rgba(124, 92, 255, .18);
}

.m-sugestoes {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 90;
    background: #12121f; border: 1px solid var(--m-borda-forte); border-radius: 16px;
    box-shadow: var(--m-sombra); padding: 8px; overflow: hidden;
}
.m-sugestoes__item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 11px; }
.m-sugestoes__item:hover, .m-sugestoes__item:focus { background: rgba(255, 255, 255, .06); }
.m-sugestoes__capa { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; background: var(--m-superficie-2); flex: 0 0 auto; }
.m-sugestoes__texto { display: grid; min-width: 0; }
.m-sugestoes__texto strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-sugestoes__texto small { color: var(--m-texto-3); font-size: 12px; }
.m-sugestoes__vazio { padding: 14px; color: var(--m-texto-3); font-size: 14px; }

/* ── menu lateral fixo ─────────────────────────────────────────────── */
.m-corpo {
    width: 100%; max-width: 1480px; margin: 0 auto; padding: 22px 20px 70px;
    display: grid; grid-template-columns: 246px minmax(0, 1fr);
    gap: 26px; align-items: start;
}
.m-lateral {
    position: sticky; top: 84px;
    display: grid; gap: 12px; align-content: start;
    max-height: calc(100vh - 104px); overflow: auto;
    padding: 16px 14px;
    border: 1px solid var(--m-borda); border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
    box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}
.m-lateral__topo { display: flex; align-items: center; justify-content: space-between; }
.m-lateral__rotulo { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--m-texto-3); font-weight: 800; }
.m-lateral__fechar {
    display: none; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--m-borda);
    background: rgba(255, 255, 255, .05); color: var(--m-texto-2); place-items: center;
}
.m-lateral__nav { display: grid; gap: 3px; }
.m-lateral__link {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
    color: var(--m-texto-2); font-weight: 700; font-size: 14px; line-height: 1.2;
}
.m-lateral__link .m-icone { flex: 0 0 auto; opacity: .85; }
.m-lateral__link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.m-lateral__link.is-ativo { background: rgba(124, 92, 255, .2); color: #fff; box-shadow: inset 0 0 0 1px rgba(124, 92, 255, .42); }
.m-lateral__link--sair { color: #ffb3c1; }
.m-lateral__separador { height: 1px; background: var(--m-borda); margin: 2px 0; }
.m-lateral__voltar { padding: 4px 12px 0; font-size: 12.5px; color: var(--m-texto-3); }
.m-lateral__voltar:hover { color: var(--m-turquesa); }
.m-sobreposicao { display: none; }

.m-topo__acoes { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.m-btn--usuario { padding-left: 6px; }
.m-btn--usuario > span:last-child { padding-left: 2px; }
.m-avatar { border-radius: 50%; object-fit: cover; display: inline-block; flex: 0 0 auto; }
.m-avatar--letra {
    display: inline-grid; place-items: center; background: linear-gradient(135deg, var(--m-violeta), #2f8d84);
    color: #fff; font-weight: 800; font-size: 13px;
}

.m-menu-btn {
    display: none; width: 42px; height: 42px; border-radius: 13px; border: 1px solid var(--m-borda);
    background: rgba(255, 255, 255, .05); color: var(--m-texto); place-items: center; flex: 0 0 auto;
}

/* ── botões, selos e chips ─────────────────────────────────────────── */
.m-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--m-borda-forte);
    background: rgba(255, 255, 255, .06); color: var(--m-texto); font-weight: 700; font-size: 14px;
    transition: transform .16s, background .16s, border-color .16s, box-shadow .16s;
}
.m-btn:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .1); }
.m-btn--primario {
    border-color: transparent; background: linear-gradient(135deg, var(--m-violeta), #5a36e2 60%, #1f9d8f);
    color: #fff; box-shadow: 0 10px 26px rgba(124, 92, 255, .35);
}
.m-btn--primario:hover { box-shadow: 0 14px 32px rgba(124, 92, 255, .45); }
.m-btn--fantasma { background: transparent; }
.m-btn--perigo { border-color: rgba(255, 90, 118, .45); color: #ffb3c1; background: rgba(255, 90, 118, .08); }
.m-btn--pequeno { min-height: 36px; padding: 0 13px; font-size: 13px; }
.m-btn--bloco { width: 100%; }

.m-selo {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800;
    background: rgba(255, 255, 255, .1); color: var(--m-texto-2); letter-spacing: .02em;
}
.m-selo--verificado { background: rgba(53, 224, 200, .18); color: var(--m-turquesa); }
.m-selo--explicito { background: rgba(255, 255, 255, .16); color: #fff; width: 18px; height: 18px; padding: 0; }
.m-selo--ouro { background: rgba(255, 181, 69, .18); color: var(--m-ouro); }
.m-selo--violeta { background: rgba(124, 92, 255, .2); color: var(--m-violeta-2); }

.m-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
    border: 1px solid var(--m-borda); background: rgba(255, 255, 255, .04); color: var(--m-texto-2);
    font-size: 13px; font-weight: 700;
}
.m-chip:hover, .m-chip.is-ativo { color: #fff; border-color: rgba(124, 92, 255, .55); background: rgba(124, 92, 255, .18); }

.m-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 24px; }

/* ── estrutura ─────────────────────────────────────────────────────── */
.m-main { min-width: 0; padding: 0; margin: 0; }
.m-secao { margin: 44px 0; }
.m-secao__cabeca {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px;
}
.m-secao__titulo { font-size: clamp(20px, 2.4vw, 27px); font-weight: 800; }
.m-secao__subtitulo { color: var(--m-texto-3); font-size: 14px; margin-top: 4px; }
.m-secao__link {
    display: inline-flex; align-items: center; gap: 6px; color: var(--m-texto-2); font-size: 13.5px;
    font-weight: 700; white-space: nowrap;
}
.m-secao__link:hover { color: var(--m-turquesa); }

.m-grid { display: grid; gap: 18px; }
.m-grid--cards { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.m-grid--artistas { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.m-grid--duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m-grid--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── cards ─────────────────────────────────────────────────────────── */
.m-card {
    position: relative; border-radius: var(--m-raio); background: var(--m-superficie);
    border: 1px solid var(--m-borda); padding: 10px; min-width: 0;
    transition: transform .2s, border-color .2s, background .2s;
}
.m-card:hover { transform: translateY(-3px); border-color: var(--m-borda-forte); background: var(--m-superficie-2); }
.m-card__link { display: grid; gap: 10px; }
.m-card__capa { position: relative; display: block; border-radius: 13px; overflow: hidden; }
.m-card__capa--artista { border-radius: 50%; width: 100%; aspect-ratio: 1; }
.m-card__corpo { display: grid; gap: 2px; min-width: 0; }
.m-card__titulo {
    font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-card__artista { color: var(--m-texto-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-card__meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--m-texto-3); font-size: 11.5px; margin-top: 2px; }
.m-card__posicao {
    position: absolute; left: 8px; top: 8px; z-index: 2; display: grid; place-items: center;
    min-width: 26px; height: 26px; padding: 0 7px; border-radius: 9px;
    background: rgba(5, 5, 10, .78); color: var(--m-ouro); font-weight: 900; font-size: 13px;
    backdrop-filter: blur(6px);
}
.m-card__play {
    position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center; background: var(--m-turquesa); color: #05221f;
    opacity: 0; transform: translateY(8px) scale(.9); transition: .2s; box-shadow: 0 10px 22px rgba(53, 224, 200, .35);
}
.m-card:hover .m-card__play, .m-card:focus-within .m-card__play { opacity: 1; transform: none; }
.m-card__favorito {
    position: absolute; right: 10px; top: 10px; z-index: 3; width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center; border: 0; background: rgba(5, 5, 10, .55); color: #fff;
    opacity: 0; transition: .18s; backdrop-filter: blur(6px);
}
.m-card:hover .m-card__favorito, .m-card__favorito[aria-pressed="true"] { opacity: 1; }
.m-card__favorito[aria-pressed="true"] { color: var(--m-vermelho); }

.m-capa {
    display: block; position: relative; background: linear-gradient(140deg, #2a2350, #123c3a);
    aspect-ratio: 1; overflow: hidden;
}
.m-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-capa--vazia {
    display: grid; place-items: center; font-size: clamp(22px, 3vw, 34px); font-weight: 900;
    color: rgba(255, 255, 255, .74); letter-spacing: -.02em;
    background:
        radial-gradient(120% 120% at 20% 0%, rgba(124, 92, 255, .55), transparent 55%),
        radial-gradient(120% 120% at 100% 100%, rgba(53, 224, 200, .45), transparent 60%),
        linear-gradient(145deg, #1a1730, #0d2b2a);
}
.m-capa--redonda { border-radius: 50%; }
.m-capa--card { border-radius: 13px; }

/* ── hero da home ──────────────────────────────────────────────────── */
.m-hero {
    position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 30px; align-items: end; padding: 34px; border-radius: var(--m-raio-g);
    border: 1px solid var(--m-borda); overflow: hidden;
    background:
        radial-gradient(600px 300px at 8% 0%, rgba(124, 92, 255, .38), transparent 62%),
        radial-gradient(500px 280px at 100% 20%, rgba(53, 224, 200, .2), transparent 60%),
        linear-gradient(160deg, #12122a, #0b0b16 60%, #08110f);
    box-shadow: var(--m-sombra);
}
.m-hero__selo {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px;
    background: rgba(255, 255, 255, .08); color: var(--m-turquesa); font-size: 12px; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase;
}
.m-hero__titulo { font-size: clamp(32px, 5vw, 58px); font-weight: 900; letter-spacing: -.035em; margin: 16px 0 12px; }
.m-hero__texto { color: var(--m-texto-2); font-size: 16px; max-width: 46ch; }
.m-hero__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.m-hero__capa { display: grid; gap: 12px; justify-items: end; }
.m-hero__capa-principal { width: min(100%, 340px); border-radius: 24px; overflow: hidden; box-shadow: 0 26px 60px rgba(0, 0, 0, .55); }
.m-hero__stats { display: flex; gap: 18px; margin-top: 26px; flex-wrap: wrap; }
.m-hero__stat { display: grid; }
.m-hero__stat strong { font-size: 22px; font-weight: 900; }
.m-hero__stat span { color: var(--m-texto-3); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }

/* ── trilha e compartilhamento ─────────────────────────────────────── */
.m-trilha {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 20px;
    color: var(--m-texto-3); font-size: 12.5px;
}
.m-trilha a { color: var(--m-texto-2); }
.m-trilha a:hover { color: var(--m-turquesa); }
.m-trilha > span:last-child { color: var(--m-texto); font-weight: 600; }

.m-compartilhar { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── página de música ──────────────────────────────────────────────── */
.m-detalhe { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 34px; align-items: start; }
.m-detalhe__capa { border-radius: 22px; overflow: hidden; box-shadow: var(--m-sombra); }
.m-detalhe__tipo { color: var(--m-texto-3); font-size: 12px; text-transform: uppercase; letter-spacing: .14em; font-weight: 800; }
.m-detalhe__titulo { font-size: clamp(30px, 4.6vw, 52px); font-weight: 900; letter-spacing: -.035em; margin: 10px 0; }
.m-detalhe__artista { font-size: 17px; color: var(--m-texto-2); font-weight: 600; }
.m-detalhe__artista a:hover { color: var(--m-turquesa); }
.m-detalhe__meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; align-items: center; }
.m-detalhe__texto { color: var(--m-texto-2); font-size: 15px; max-width: 68ch; margin-top: 14px; }
.m-detalhe__acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.m-plataformas { display: grid; gap: 10px; margin-top: 26px; }
.m-plataforma {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
    border: 1px solid var(--m-borda); background: rgba(255, 255, 255, .035); font-weight: 700; font-size: 14px;
    transition: .18s;
}
.m-plataforma:hover { background: rgba(255, 255, 255, .075); border-color: var(--m-borda-forte); transform: translateY(-1px); }
.m-plataforma__ponto { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 4px rgba(255, 255, 255, .05); }
.m-plataforma__nome { flex: 1; min-width: 0; }
.m-plataforma__acao { color: var(--m-texto-3); display: flex; }

.m-player { margin-top: 26px; display: grid; gap: 12px; }
.m-player iframe { width: 100%; border: 0; border-radius: 16px; background: #0b0b12; display: block; }
.m-player--spotify iframe { height: 152px; }
.m-player--youtube iframe { aspect-ratio: 16 / 9; height: auto; }
.m-player--deezer iframe, .m-player--apple iframe, .m-player--soundcloud iframe, .m-player--tidal iframe { height: 220px; }
.m-player__nota { color: var(--m-texto-3); font-size: 12px; }

/* ── faixas / listas ───────────────────────────────────────────────── */
.m-faixas { display: grid; gap: 4px; }
.m-faixa {
    display: grid; grid-template-columns: 34px 52px minmax(0, 1fr) auto; align-items: center; gap: 14px;
    padding: 8px 10px; border-radius: 12px; transition: background .16s;
}
.m-faixa:hover { background: rgba(255, 255, 255, .05); }
.m-faixa__numero { color: var(--m-texto-3); font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.m-faixa__capa { width: 52px; height: 52px; border-radius: 9px; overflow: hidden; }
.m-faixa__texto { display: grid; min-width: 0; }
.m-faixa__titulo { font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-faixa__sub { color: var(--m-texto-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-faixa__acoes { display: flex; align-items: center; gap: 6px; }
.m-faixa__tempo { color: var(--m-texto-3); font-size: 12px; font-variant-numeric: tabular-nums; }

.m-ranking { display: grid; gap: 6px; }
.m-ranking__linha {
    display: grid; grid-template-columns: 46px 58px minmax(0, 1fr) auto; align-items: center; gap: 14px;
    padding: 10px 12px; border-radius: 14px; border: 1px solid transparent; transition: .16s;
}
.m-ranking__linha:hover { background: rgba(255, 255, 255, .045); border-color: var(--m-borda); }
.m-ranking__pos { font-size: 22px; font-weight: 900; color: var(--m-texto-3); font-variant-numeric: tabular-nums; text-align: center; }
.m-ranking__pos--top { color: var(--m-ouro); }

/* ── perfil do artista ─────────────────────────────────────────────── */
.m-perfil { border-radius: var(--m-radio, var(--m-raio-g)); overflow: hidden; border: 1px solid var(--m-borda); background: var(--m-superficie); }
.m-perfil__capa { position: relative; aspect-ratio: 16 / 6; background: linear-gradient(140deg, #211a45, #0d3230); overflow: hidden; }
.m-perfil__capa img { width: 100%; height: 100%; object-fit: cover; }
.m-perfil__corpo { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 24px; padding: 0 26px 26px; align-items: end; }
.m-perfil__foto {
    width: 170px; height: 170px; border-radius: 26px; overflow: hidden; margin-top: -60px;
    border: 4px solid #0b0b14; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); background: var(--m-superficie-2);
}
.m-perfil__nome { font-size: clamp(26px, 4vw, 44px); font-weight: 900; letter-spacing: -.03em; }
.m-perfil__bio { color: var(--m-texto-2); margin-top: 10px; max-width: 70ch; }
.m-perfil__redes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.m-perfil__numeros { display: flex; gap: 22px; margin-top: 14px; flex-wrap: wrap; }
.m-perfil__numeros strong { font-size: 18px; font-weight: 900; }
.m-perfil__numeros span { color: var(--m-texto-3); font-size: 12px; display: block; }

/* ── painéis ───────────────────────────────────────────────────────── */
.m-painel { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 26px; align-items: start; }
.m-painel__lado { position: sticky; top: 92px; display: grid; gap: 6px; }
.m-painel__lado a {
    padding: 11px 14px; border-radius: 12px; color: var(--m-texto-2); font-weight: 700; font-size: 14px;
}
.m-painel__lado a:hover, .m-painel__lado a.is-ativo { background: rgba(124, 92, 255, .16); color: #fff; }
.m-painel__conteudo { display: grid; gap: 20px; min-width: 0; }
.m-painel-card { border: 1px solid var(--m-borda); border-radius: var(--m-raio-g); background: var(--m-superficie); padding: 24px; }
.m-painel-card > h2 { font-size: 20px; margin-bottom: 6px; }
.m-painel-card > p { color: var(--m-texto-3); font-size: 14px; }

.m-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.m-stat { padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid var(--m-borda); }
.m-stat span { color: var(--m-texto-3); font-size: 12px; text-transform: uppercase; letter-spacing: .07em; font-weight: 800; }
.m-stat strong { display: block; font-size: 26px; font-weight: 900; margin-top: 8px; letter-spacing: -.02em; }

.m-barras { display: grid; gap: 10px; }
.m-barra { display: grid; grid-template-columns: minmax(90px, 150px) minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 13px; }
.m-barra__rotulo { color: var(--m-texto-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-barra__trilha { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.m-barra__fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--m-violeta), var(--m-turquesa)); }
.m-barra__valor { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── formulários ───────────────────────────────────────────────────── */
.m-form { display: grid; gap: 18px; }
.m-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.m-campo { display: grid; gap: 6px; min-width: 0; }
.m-campo--largo { grid-column: 1 / -1; }
.m-label { font-size: 12.5px; font-weight: 800; color: var(--m-texto-2); letter-spacing: .02em; }
.m-input, .m-select, .m-textarea {
    width: 100%; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--m-borda-forte);
    background: rgba(255, 255, 255, .04); color: var(--m-texto); transition: .16s;
}
.m-input:focus, .m-select:focus, .m-textarea:focus {
    outline: none; border-color: rgba(124, 92, 255, .7); box-shadow: 0 0 0 4px rgba(124, 92, 255, .16);
}
.m-textarea { min-height: 120px; resize: vertical; }
.m-select option { background: #12121f; }
.m-ajuda { color: var(--m-texto-3); font-size: 12px; }
.m-erro { color: #ffb3c1; font-size: 12.5px; font-weight: 600; }
.m-aviso {
    padding: 14px 16px; border-radius: 14px; border: 1px solid var(--m-borda-forte);
    background: rgba(255, 255, 255, .05); color: var(--m-texto-2); font-size: 14px;
}
.m-aviso--erro { border-color: rgba(255, 90, 118, .4); background: rgba(255, 90, 118, .1); color: #ffc2cd; }
.m-aviso--ok { border-color: rgba(56, 211, 159, .4); background: rgba(56, 211, 159, .1); color: #b7f4de; }

.m-upload { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.m-upload__previa { width: 84px; height: 84px; border-radius: 14px; overflow: hidden; background: var(--m-superficie-2); flex: 0 0 auto; }
.m-upload__previa img { width: 100%; height: 100%; object-fit: cover; }
.m-upload input[type="file"] { color: var(--m-texto-2); font-size: 13px; }

.m-abas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; padding: 5px; border-radius: 16px; background: rgba(255, 255, 255, .04); width: fit-content; }
.m-abas a, .m-abas button {
    border: 0; background: transparent; padding: 9px 15px; border-radius: 12px; font-weight: 700; font-size: 13.5px; color: var(--m-texto-2);
}
.m-abas .is-ativo { background: rgba(255, 255, 255, .1); color: #fff; }

/* ── tabelas ───────────────────────────────────────────────────────── */
.m-tabela-wrap { overflow-x: auto; border: 1px solid var(--m-borda); border-radius: 16px; }
.m-tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
.m-tabela th, .m-tabela td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--m-borda); vertical-align: middle; }
.m-tabela th { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--m-texto-3); background: rgba(255, 255, 255, .03); }
.m-tabela tr:last-child td { border-bottom: 0; }
.m-tabela tbody tr:hover { background: rgba(255, 255, 255, .035); }
.m-tabela .m-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }

/* ── mensagens, vazio e paginação ──────────────────────────────────── */
.m-flash {
    margin: 0 0 18px; padding: 13px 18px; border-radius: 14px;
    display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px;
    border: 1px solid rgba(56, 211, 159, .4); background: rgba(56, 211, 159, .12); color: #b7f4de;
}
.m-flash--erro { border-color: rgba(255, 90, 118, .45); background: rgba(255, 90, 118, .12); color: #ffc2cd; }

.m-vazio {
    display: grid; justify-items: center; gap: 12px; text-align: center; padding: 54px 20px;
    border: 1px dashed var(--m-borda-forte); border-radius: var(--m-raio-g); color: var(--m-texto-2);
}
.m-vazio__icone {
    width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(124, 92, 255, .16); color: var(--m-violeta-2); font-size: 24px;
}
.m-vazio h1, .m-vazio h2 { font-size: 22px; color: var(--m-texto); }
.m-vazio--pagina { margin: 40px 0; }

.m-paginacao { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 34px 0 0; }
.m-pagina {
    display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 11px;
    border-radius: 12px; border: 1px solid var(--m-borda); color: var(--m-texto-2); font-weight: 700; font-size: 13.5px;
}
.m-pagina:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.m-pagina.is-atual { background: rgba(124, 92, 255, .22); border-color: rgba(124, 92, 255, .55); color: #fff; }
.m-pagina--vazio { border: 0; color: var(--m-texto-3); }

/* ── gêneros ───────────────────────────────────────────────────────── */
.m-generos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.m-genero {
    position: relative; display: flex; align-items: flex-end; min-height: 92px; padding: 14px;
    border-radius: 16px; font-weight: 800; font-size: 15px; overflow: hidden;
    background: linear-gradient(140deg, rgba(124, 92, 255, .35), rgba(53, 224, 200, .18)), var(--m-superficie-2);
    border: 1px solid var(--m-borda); transition: transform .18s, border-color .18s;
}
.m-genero:nth-child(3n) { background: linear-gradient(140deg, rgba(255, 181, 69, .3), rgba(124, 92, 255, .2)), var(--m-superficie-2); }
.m-genero:nth-child(4n) { background: linear-gradient(140deg, rgba(53, 224, 200, .26), rgba(28, 60, 120, .35)), var(--m-superficie-2); }
.m-genero:hover { transform: translateY(-2px); border-color: var(--m-borda-forte); }
.m-genero small { position: absolute; right: 12px; top: 12px; color: rgba(255, 255, 255, .65); font-size: 11.5px; font-weight: 700; }

/* ── diálogo e toast ───────────────────────────────────────────────── */
.m-dialogo {
    width: min(460px, calc(100vw - 32px)); border: 1px solid var(--m-borda-forte); border-radius: 22px;
    background: #10101c; color: var(--m-texto); padding: 22px; box-shadow: var(--m-sombra);
}
.m-dialogo::backdrop { background: rgba(2, 2, 6, .72); backdrop-filter: blur(3px); }
.m-dialogo h2 { font-size: 19px; margin-bottom: 14px; }
.m-dialogo__fechar { position: absolute; top: 10px; right: 12px; }
.m-dialogo__fechar button {
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--m-borda);
    background: rgba(255, 255, 255, .05); color: var(--m-texto-2);
}
.m-dialogo__lista { display: grid; gap: 6px; max-height: 260px; overflow: auto; margin-bottom: 16px; }
.m-dialogo__item {
    display: grid; gap: 2px; text-align: left; padding: 11px 13px; border-radius: 12px;
    border: 1px solid var(--m-borda); background: rgba(255, 255, 255, .04); color: var(--m-texto);
}
.m-dialogo__item:hover { background: rgba(124, 92, 255, .16); border-color: rgba(124, 92, 255, .5); }
.m-dialogo__item small { color: var(--m-texto-3); font-size: 12px; }
.m-dialogo__nova { border-top: 1px solid var(--m-borda); padding-top: 14px; display: grid; gap: 8px; }
.m-dialogo__linha { display: flex; gap: 8px; }
.m-dialogo__linha .m-input { flex: 1; }

.m-toast {
    position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 120;
    padding: 12px 20px; border-radius: 999px; background: #1a1a2a; border: 1px solid var(--m-borda-forte);
    color: var(--m-texto); font-size: 14px; font-weight: 600; box-shadow: var(--m-sombra);
    transition: opacity .35s, transform .35s; max-width: calc(100vw - 32px); text-align: center;
}
.m-toast.is-saindo { opacity: 0; transform: translate(-50%, 10px); }
.m-toast--erro { border-color: rgba(255, 90, 118, .5); color: #ffc2cd; }
@media (max-width: 760px) { .m-toast { bottom: 86px; } }

/* ── publicidade ───────────────────────────────────────────────────── */
.m-anuncio {
    display: block; margin: 30px 0; padding: 12px; border-radius: 16px;
    border: 1px solid var(--m-borda); background: rgba(255, 255, 255, .025);
}
.m-anuncio ins { width: 100%; }
.m-anuncio .ad-slot__label { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--m-texto-3); margin-bottom: 6px; }
.m-anuncio__rotulo { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--m-texto-3); margin-bottom: 6px; }

/* ── rodapé e barra mobile ─────────────────────────────────────────── */
.m-rodape { border-top: 1px solid var(--m-borda); background: rgba(5, 5, 10, .6); margin-top: 40px; }
.m-rodape__inner {
    max-width: 1480px; margin: 0 auto; padding: 40px 20px 20px;
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr); gap: 34px;
}
.m-rodape__marca { display: flex; gap: 12px; align-items: flex-start; }
.m-rodape__marca strong { font-size: 17px; }
.m-rodape__marca p { color: var(--m-texto-3); font-size: 13px; margin-top: 6px; max-width: 40ch; }
.m-rodape__colunas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.m-rodape__colunas div { display: grid; gap: 8px; align-content: start; }
.m-rodape__colunas h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--m-texto-3); }
.m-rodape__colunas a { color: var(--m-texto-2); font-size: 13.5px; }
.m-rodape__colunas a:hover { color: var(--m-turquesa); }
.m-rodape__nota {
    max-width: 1480px; margin: 0 auto; padding: 0 20px 30px; color: var(--m-texto-3); font-size: 11.5px;
}

.m-barra-mobile {
    display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: rgba(9, 9, 16, .94); backdrop-filter: blur(16px); border-top: 1px solid var(--m-borda);
}
.m-barra-mobile a {
    flex: 1; display: grid; justify-items: center; gap: 3px; padding: 6px 0; border-radius: 12px;
    color: var(--m-texto-3); font-size: 10.5px; font-weight: 700;
}
.m-barra-mobile a:hover { color: #fff; }

/* ── responsivo ────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
    .m-corpo { grid-template-columns: minmax(0, 1fr); padding: 16px 14px 110px; gap: 16px; }
    .m-menu-btn { display: grid; }
    .m-topo__inner { gap: 12px; }
    .m-marcas { gap: 10px; }
    .m-marca { gap: 6px; }
    .m-marca__ico { width: 34px; height: 34px; border-radius: 11px; }
    .m-marca__txt { font-size: 11.5px; }
    .m-lateral {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 95;
        width: min(310px, 88vw); max-height: none; border-radius: 0 22px 22px 0;
        padding: 18px 16px calc(24px + env(safe-area-inset-bottom));
        background: #0b0b15; box-shadow: 0 0 60px rgba(0, 0, 0, .6);
        transform: translateX(-105%); transition: transform .24s ease; overflow-y: auto;
    }
    .m-lateral.is-aberto { transform: none; }
    .m-lateral__fechar { display: grid; }
    .m-sobreposicao {
        display: block; position: fixed; inset: 0; z-index: 90;
        background: rgba(0, 0, 0, .58); backdrop-filter: blur(2px);
    }
    body.m-menu-aberto { overflow: hidden; }
    .m-hero { grid-template-columns: 1fr; padding: 26px; }
    .m-hero__capa { justify-items: start; }
    .m-detalhe { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; }
    .m-painel { grid-template-columns: 1fr; }
    .m-painel__lado { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
    .m-perfil__corpo { grid-template-columns: 120px minmax(0, 1fr); }
    .m-perfil__foto { width: 120px; height: 120px; border-radius: 20px; }
}

@media (max-width: 760px) {
    .m-main { padding: 0; }
    .m-topo__inner { padding: 12px 14px; flex-wrap: wrap; gap: 8px; }
    .m-busca-form { order: 4; flex: 1 1 100%; max-width: none; }
    /* 19/10/2026 (a pedido): as TRÊS marcas, os botões de conta e o botão do menu
       ficam na MESMA linha no celular. Para caber: quadradinho de 26 px, vão de
       4 px, nomes secundários em 10 px e "Cifra"/"NET" empilhados — a busca
       desce para a linha de baixo (é dela o `flex-basis` acima). */
    .m-marcas { flex: 0 0 auto; gap: 4px; flex-wrap: wrap; row-gap: 3px; }
    .m-marca { gap: 4px; }
    .m-marca__ico { width: 26px; height: 26px; border-radius: 8px; }
    .m-marca__ico svg { width: 17px; height: 17px; }
    .m-marca__txt { font-size: 10px; line-height: 1.12; }
    .m-marca__txt--cifranet > span, .m-marca__txt--cifranet > strong { display: block; }
    .m-topo__acoes { flex: 0 0 auto; margin-left: auto; }
    .m-topo__acoes .m-btn { min-height: 38px; padding: 0 10px; font-size: 13px; }
    .m-btn--usuario > span:last-child { display: none; }
    .m-hero__titulo { font-size: clamp(28px, 9vw, 40px); }
    .m-detalhe { grid-template-columns: 1fr; }
    .m-detalhe__capa { max-width: 260px; }
    .m-grid--duas, .m-grid--tres, .m-form-grid { grid-template-columns: 1fr; }
    .m-grid--cards { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
    .m-rodape__inner { grid-template-columns: 1fr; }
    .m-rodape__colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .m-barra-mobile { display: flex; }
    .m-perfil__corpo { grid-template-columns: 1fr; padding: 0 18px 22px; }
    .m-perfil__foto { width: 110px; height: 110px; margin-top: -46px; }
    .m-perfil__capa { aspect-ratio: 16 / 9; }
    .m-faixa { grid-template-columns: 26px 44px minmax(0, 1fr) auto; gap: 10px; }
    .m-faixa__capa { width: 44px; height: 44px; }
    .m-ranking__linha { grid-template-columns: 34px 46px minmax(0, 1fr); }
    .m-ranking__linha > :last-child { display: none; }
    .m-barra { grid-template-columns: minmax(70px, 110px) minmax(0, 1fr) auto; }
    .m-secao__cabeca { align-items: flex-start; flex-direction: column; gap: 6px; }
}

/* Celulares estreitos (360 dp e menos): aperta mais um degrau para as três marcas,
   o botão do menu e a conta continuarem na MESMA linha (19/10/2026, a pedido). */
@media (max-width: 400px) {
    .m-marcas { gap: 3px; }
    .m-marca { gap: 3px; }
    .m-marca__ico { width: 24px; height: 24px; border-radius: 7px; }
    .m-marca__ico svg { width: 16px; height: 16px; }
    .m-marca__txt { font-size: 9px; }
    .m-topo__acoes .m-btn { min-height: 32px; padding: 0 8px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}