/* ==========================================================================
   Ondas — interface no padrão do player do Spotify (design Encore).
   Medidas conferidas no player real: topo 64px, painéis com 8px de folga e
   raio 8px, capa de álbum 232px (raio 4px), título 72px/800, linha de faixa
   56px, play verde 56px, texto secundário #b3b3b3.
   ========================================================================== */

@font-face {
    font-family: "Figtree";
    src: url("/fontes/figtree.woff2") format("woff2");
    font-weight: 400 900;
    font-display: swap;
}

:root {
    --preto: #000;
    --base: #121212;               /* fundo dos painéis */
    --realce: #1a1a1a;             /* hover em item de lista */
    --elevado: #181818;            /* cartão */
    --elevado-realce: #282828;     /* cartão no hover */
    --tinta: rgba(255, 255, 255, 0.1);
    --tinta-forte: rgba(255, 255, 255, 0.3);
    --texto: #fff;
    --texto-suave: #b3b3b3;
    --verde: #1ed760;
    --verde-escuro: #1db954;
    --perigo: #f15e6c;

    --altura-topo: 64px;
    --altura-player: 72px;
    --altura-nav: 0px;             /* a barra de baixo só existe no celular */
    --largura-lateral: 320px;
    --largura-painel: 0px;         /* o painel "Tocando agora" abre em 340px */
    --folga: 8px;
    --raio: 8px;
    --cor-capa: #333;              /* trocada em tempo real pela cor da capa */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* pares de ícone (contorno / preenchido): só um aparece por vez */
.icone-cheio { display: none; }
.ativo > .icone-cheio { display: block; }
.ativo > .icone-vazio { display: none; }

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    inset: 0;
    background: var(--preto);
    color: var(--texto);
    font-family: "Figtree", "Circular Std", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%;
}

button, input { font: inherit; color: inherit; }
img { display: block; object-fit: cover; background: #282828; }
a { color: inherit; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border: 3px solid transparent; background-clip: content-box; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); background-clip: content-box; }

/* ==========================================================================
   entrada
   ========================================================================== */

.tela-entrada {
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: linear-gradient(180deg, #1f1f1f 0%, var(--preto) 45%);
}

.cartao-entrada {
    width: min(420px, 100%);
    border-radius: var(--raio);
    background: var(--base);
    padding: 2.5rem 2rem;
    text-align: center;
}

.cartao-entrada .marca { display: grid; justify-items: center; gap: 0.6rem; }
.cartao-entrada h1 { margin: 1.25rem 0 0; font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; }
.cartao-entrada .marca p { margin: 0.35rem 0 0; color: var(--texto-suave); font-size: 0.875rem; }

#form-entrada { display: grid; gap: 0.9rem; margin-top: 2rem; text-align: left; }
#form-entrada label { display: grid; gap: 0.4rem; }
#form-entrada span { font-size: 0.875rem; font-weight: 700; }

#form-entrada input {
    border: 1px solid #727272;
    border-radius: 4px;
    background: var(--preto);
    padding: 0.85rem 0.9rem;
    outline: none;
}

#form-entrada input:focus { border-color: var(--texto); border-width: 2px; padding: calc(0.85rem - 1px) calc(0.9rem - 1px); }
#form-entrada .botao-principal { margin-top: 0.6rem; justify-content: center; padding: 0.9rem; font-size: 1rem; }

.aviso-erro {
    margin: 0;
    border-left: 4px solid var(--perigo);
    border-radius: 4px;
    background: rgba(241, 94, 108, 0.15);
    color: #ffdfe2;
    padding: 0.75rem 0.9rem;
    font-size: 0.875rem;
}

/* ==========================================================================
   grade principal — topo / lateral / palco / painel / player
   ========================================================================== */

.grade-app {
    display: grid;
    grid-template-columns: var(--largura-lateral) minmax(0, 1fr) var(--largura-painel);
    grid-template-rows: var(--altura-topo) minmax(0, 1fr) auto;
    grid-template-areas:
        "topo topo topo"
        "lateral palco painel"
        "player player player";
    height: 100dvh;
    max-height: 100%;
    gap: var(--folga);
    padding: 0 var(--folga) var(--folga);
    background: var(--preto);
    overflow: hidden;
}

.grade-app.com-painel { --largura-painel: 340px; }

/* ------------------------------------------------------------------ topo */

.topo-global {
    grid-area: topo;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 0 0 4px;
}

.logo-ondas {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
}

.logo-ondas svg { width: 32px; height: 32px; }

.botao-redondo {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: none;
    border: 0;
    border-radius: 50%;
    background: var(--elevado);
    color: var(--texto);
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}

.botao-redondo svg { width: 24px; height: 24px; fill: currentColor; }
.botao-redondo:hover { background: var(--elevado-realce); transform: scale(1.04); }
.botao-redondo.ativo { color: var(--texto); }

.busca-topo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: min(474px, 100%);
    height: 48px;
    border: 1px solid transparent;
    border-radius: 500px;
    background: var(--elevado);
    padding: 0 1rem;
    transition: background 0.15s, border-color 0.15s;
}

.busca-topo:hover { background: var(--elevado-realce); }
.busca-topo:focus-within { border-color: var(--texto); background: var(--elevado-realce); }
.busca-topo svg { width: 24px; height: 24px; fill: var(--texto-suave); flex: none; }
.busca-topo:focus-within svg { fill: var(--texto); }

.busca-topo input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-size: 0.875rem;
    outline: none;
}

.busca-topo input::placeholder { color: var(--texto-suave); }

/* o "x" nativo do campo de busca vem azul no celular — trocado por um X do tema */
.busca-topo input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.47 2.47a.75.75 0 0 1 1.06 0L8 6.94l4.47-4.47a.75.75 0 1 1 1.06 1.06L9.06 8l4.47 4.47a.75.75 0 1 1-1.06 1.06L8 9.06l-4.47 4.47a.75.75 0 0 1-1.06-1.06L6.94 8 2.47 3.53a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E") center/16px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.47 2.47a.75.75 0 0 1 1.06 0L8 6.94l4.47-4.47a.75.75 0 1 1 1.06 1.06L9.06 8l4.47 4.47a.75.75 0 1 1-1.06 1.06L8 9.06l-4.47 4.47a.75.75 0 0 1-1.06-1.06L6.94 8 2.47 3.53a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E") center/16px no-repeat;
    cursor: pointer;
}

.topo-direita { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }

.pilula-escura {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 32px;
    border: 0;
    border-radius: 500px;
    background: var(--preto);
    color: var(--texto);
    padding: 0 1rem;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s, background 0.15s;
}

.pilula-escura:hover { transform: scale(1.04); background: #1f1f1f; }
.pilula-escura svg { width: 16px; height: 16px; fill: currentColor; }

.avatar-usuario {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #7d4b32;
    color: var(--texto);
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    padding: 4px;
}

.avatar-usuario:hover { transform: scale(1.06); }

/* ------------------------------------------------------------------ lateral */

.lateral {
    grid-area: lateral;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--folga);
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.cartao-painel {
    border-radius: var(--raio);
    background: var(--base);
    min-height: 0;
}

.menu { padding: 0.5rem 0.75rem; display: grid; gap: 0.25rem; }

.item-menu {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--texto-suave);
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.item-menu svg { width: 24px; height: 24px; fill: currentColor; flex: none; }
.item-menu:hover { color: var(--texto); }
.item-menu.ativo { color: var(--texto); }

/* biblioteca */

.biblioteca { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); min-height: 0; }

.biblioteca-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem 0.25rem 1.25rem;
}

.titulo-biblioteca {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 0;
    background: transparent;
    color: var(--texto-suave);
    padding: 0.5rem 0;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

.titulo-biblioteca:hover { color: var(--texto); }
.titulo-biblioteca svg { width: 24px; height: 24px; fill: currentColor; }

.chips { display: flex; gap: 0.5rem; padding: 0.5rem 1rem; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }

.chip {
    flex: none;
    border: 0;
    border-radius: 500px;
    background: #232323;
    color: var(--texto);
    padding: 0.4rem 0.8rem;
    font-size: 0.875rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.chip:hover { background: #2a2a2a; }
.chip.ativo { background: var(--texto); color: var(--preto); }

.biblioteca-ferramentas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.25rem 1rem 0.5rem;
    color: var(--texto-suave);
    font-size: 0.875rem;
}

.busca-biblioteca {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    border-radius: 4px;
    background: transparent;
    padding: 0.35rem 0.5rem;
}

.busca-biblioteca:focus-within { background: var(--elevado-realce); }
.busca-biblioteca svg { width: 16px; height: 16px; fill: var(--texto-suave); flex: none; }
.busca-biblioteca input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 0.875rem; outline: none; }

.botao-texto {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 0;
    background: transparent;
    color: var(--texto-suave);
    padding: 0.35rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.botao-texto:hover { color: var(--texto); }
.botao-texto svg { width: 16px; height: 16px; fill: currentColor; }

.lista-biblioteca { overflow-y: auto; padding: 0 0.5rem 1rem; min-height: 0; }

.item-biblioteca {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    border: 0;
    border-radius: 4px;
    background: transparent;
    padding: 0.5rem;
    text-align: left;
    cursor: pointer;
}

.item-biblioteca:hover { background: var(--elevado-realce); }
.item-biblioteca img { width: 48px; height: 48px; border-radius: 4px; }
.item-biblioteca .capa-quadrada { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 4px; }
.item-biblioteca strong { display: block; font-size: 1rem; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-biblioteca.tocando strong { color: var(--verde); }
.item-biblioteca span { display: block; color: var(--texto-suave); font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.aviso-lateral {
    border-radius: var(--raio);
    background: var(--elevado);
    margin: 0.5rem;
    padding: 1.25rem;
}

.aviso-lateral strong { display: block; font-size: 1rem; }
.aviso-lateral p { margin: 0.5rem 0 1.25rem; font-size: 0.875rem; }

/* ------------------------------------------------------------------ palco */

.palco {
    grid-area: palco;
    position: relative;
    border-radius: var(--raio);
    background: var(--base);
    overflow: hidden;
    min-width: 0;
}

.rolagem {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    /* o cabeçalho colorido de cada tela é pintado por trás do topo do palco */
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--cor-capa) 62%, transparent) 0, transparent 320px),
        linear-gradient(180deg, color-mix(in srgb, var(--cor-capa) 22%, transparent) 0, var(--base) 480px);
}

.barra-palco {
    position: sticky;
    top: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 64px;
    padding: 0 1.5rem;
    background: transparent;
    transition: background-color 0.3s;
}

.barra-palco.fixada { background: color-mix(in srgb, var(--cor-capa) 70%, #101010); }

.navegacao { display: flex; gap: 0.5rem; }

.botao-nav {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    color: var(--texto);
    cursor: pointer;
}

.botao-nav svg { width: 20px; height: 20px; fill: currentColor; }
.botao-nav:disabled { color: #6a6a6a; cursor: default; }

.titulo-barra {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s, transform 0.25s;
}

.barra-palco.fixada .titulo-barra { opacity: 1; transform: none; }

.barra-palco .play-barra {
    width: 48px;
    height: 48px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s, transform 0.25s;
    pointer-events: none;
}

.barra-palco.fixada .play-barra { opacity: 1; transform: none; pointer-events: auto; }

.conteudo-tela { padding: 0 1.5rem 2.5rem; }

/* ==========================================================================
   home
   ========================================================================== */

.filtros-home { display: flex; gap: 0.5rem; padding: 0 0 1.5rem; }

.saudacao-home {
    margin: 0 0 1.25rem;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.grade-atalhos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.atalho {
    position: relative;
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    height: 80px;
    border: 0;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--texto);
    overflow: hidden;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s;
}

.atalho:hover { background: rgba(255, 255, 255, 0.2); }
.atalho img, .atalho .capa-quadrada { width: 80px; height: 80px; }
.atalho strong { font-size: 1rem; font-weight: 700; padding-right: 4.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.atalho .play-flutuante {
    right: 1rem;
    bottom: 50%;
    transform: translateY(50%) scale(0.9);
    width: 48px;
    height: 48px;
}

.atalho:hover .play-flutuante { opacity: 1; transform: translateY(50%) scale(1); }

.trilho { margin-bottom: 2rem; }

.trilho-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.trilho-topo h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.trilho-topo h2:hover { text-decoration: underline; cursor: pointer; }

.mostrar-tudo {
    border: 0;
    background: transparent;
    color: var(--texto-suave);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
}

.mostrar-tudo:hover { text-decoration: underline; color: var(--texto); }

.grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem;
}

.trilho .grade { overflow: hidden; }

.cartao {
    position: relative;
    display: block;
    width: 100%;
    border: 0;
    border-radius: var(--raio);
    background: transparent;
    color: var(--texto);
    padding: 12px;
    text-align: left;
    cursor: pointer;
    transition: background 0.3s;
}

.cartao:hover { background: var(--elevado-realce); }
.cartao .moldura-capa { display: block; position: relative; margin-bottom: 1rem; }

.cartao img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.cartao.redondo img { border-radius: 50%; }

.cartao strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}

.cartao span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 0.25rem;
    color: var(--texto-suave);
    font-size: 0.875rem;
    line-height: 1.4;
}

.play-flutuante {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: var(--verde);
    color: #000;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s, transform 0.2s, background 0.2s, scale 0.1s;
    cursor: pointer;
}

.play-flutuante svg { width: 24px; height: 24px; fill: currentColor; }
.cartao:hover .play-flutuante, .play-flutuante:focus-visible { opacity: 1; transform: translateY(0); }
.play-flutuante:hover { background: #3be477; scale: 1.04; }

.capa-quadrada {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 4px;
    background: linear-gradient(135deg, #4502a4 0%, #8e8ee5 100%);
}

.capa-quadrada svg { width: 40%; height: 40%; fill: #fff; }

/* ==========================================================================
   cabeçalho de entidade (álbum, playlist, curtidas)
   ========================================================================== */

.capa-entidade-fundo {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.cabecalho-entidade {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    padding: 1rem 1.5rem 1.5rem;
    min-height: 300px;
}

.cabecalho-entidade > img,
.cabecalho-entidade > .capa-quadrada {
    width: 232px;
    height: 232px;
    flex: none;
    border-radius: 4px;
    box-shadow: 0 4px 60px rgba(0, 0, 0, 0.5);
}

.info-entidade { min-width: 0; padding-bottom: 0.25rem; }
.info-entidade .rotulo { font-size: 0.875rem; font-weight: 700; }

.info-entidade h1 {
    margin: 0.5rem 0;
    font-size: clamp(2rem, 5.5vw, 6rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.04em;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.meta-entidade {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
    font-weight: 400;
}

.meta-entidade strong { font-weight: 700; }
.meta-entidade .ponto { color: var(--texto-suave); }
.meta-entidade .suave { color: var(--texto-suave); }

.descricao-entidade {
    margin: 0.5rem 0 0;
    color: var(--texto-suave);
    font-size: 0.875rem;
    line-height: 1.5;
    max-width: 75ch;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.barra-acoes {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0, rgba(18, 18, 18, 0.9) 100%);
}

.play-grande {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    flex: none;
    border: 0;
    border-radius: 50%;
    background: var(--verde);
    color: #000;
    cursor: pointer;
    transition: transform 0.1s, background 0.15s;
}

.play-grande svg { width: 28px; height: 28px; fill: currentColor; }
.play-grande:hover { transform: scale(1.04); background: #3be477; }

.acao-fantasma {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--texto-suave);
    cursor: pointer;
    transition: color 0.15s, transform 0.1s;
}

.acao-fantasma svg { width: 32px; height: 32px; fill: currentColor; }
.acao-fantasma.menor svg { width: 24px; height: 24px; }
.acao-fantasma:hover { color: var(--texto); transform: scale(1.04); }
.acao-fantasma.ativo { color: var(--verde); }

.acoes-direita { margin-left: auto; display: flex; align-items: center; gap: 1rem; }

/* ==========================================================================
   lista de faixas
   ========================================================================== */

.lista-faixas { margin: 0; padding: 0 0 1.5rem; list-style: none; }

.cabecalho-lista {
    display: grid;
    grid-template-columns: 16px minmax(0, 4fr) minmax(0, 2fr) 40px 60px 40px;
    align-items: center;
    gap: 1rem;
    height: 36px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin: 0 1rem 1rem;
    padding: 0 1rem;
    color: var(--texto-suave);
    font-size: 0.875rem;
}

.cabecalho-lista .col-duracao { justify-self: end; }
.cabecalho-lista svg { width: 16px; height: 16px; fill: currentColor; }

.faixa {
    display: grid;
    grid-template-columns: 16px minmax(0, 4fr) minmax(0, 2fr) 40px 60px 40px;
    align-items: center;
    gap: 1rem;
    height: 56px;
    border-radius: 4px;
    margin: 0 1rem;
    padding: 0 1rem;
    color: var(--texto-suave);
    cursor: pointer;
}

.faixa:hover { background: rgba(255, 255, 255, 0.1); }
.faixa .indice { position: relative; font-size: 1rem; font-variant-numeric: tabular-nums; text-align: right; }
.faixa .indice .numero { display: block; }

.faixa .indice .mini-play {
    position: absolute;
    inset: 0;
    display: none;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--texto);
    cursor: pointer;
}

.faixa .indice .mini-play svg { width: 16px; height: 16px; fill: currentColor; }
.faixa:hover .indice .numero { visibility: hidden; }
.faixa:hover .indice .mini-play { display: grid; }
.faixa.tocando .indice .numero { color: var(--verde); }

.faixa .nome { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.faixa .nome img { width: 40px; height: 40px; border-radius: 4px; flex: none; }
.faixa .nome .textos { min-width: 0; }

.faixa .nome strong {
    display: block;
    color: var(--texto);
    font-size: 1rem;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.faixa.tocando .nome strong { color: var(--verde); }

.faixa .nome span {
    display: block;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.faixa:hover .nome span { color: var(--texto); }
.faixa .album-coluna { font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.faixa:hover .album-coluna { color: var(--texto); }

/* na página de álbum a coluna "Álbum" seria redundante — o Spotify a omite */
.lista-faixas.sem-coluna-album .faixa,
.cabecalho-lista.sem-coluna-album { grid-template-columns: 16px minmax(0, 1fr) 40px 60px 40px; }
.lista-faixas.sem-coluna-album .album-coluna,
.cabecalho-lista.sem-coluna-album .col-album { display: none; }

/* janela de importação */
.cortina {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.7);
    padding: 1rem;
}

.caixa-modal {
    width: min(520px, 100%);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: var(--raio);
    background: #282828;
    padding: 1.75rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.caixa-modal h3 { margin: 0 0 0.5rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.caixa-modal p { margin: 0 0 1.25rem; color: var(--texto-suave); font-size: 0.875rem; line-height: 1.5; }
.caixa-modal strong { color: var(--texto); }

.caixa-modal input {
    width: 100%;
    border: 1px solid #727272;
    border-radius: 4px;
    background: #3e3e3e;
    padding: 0.85rem 0.9rem;
    font-size: 0.875rem;
    outline: none;
}

.caixa-modal input:focus { border-color: var(--texto); }
.acoes-modal { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.5rem; }

.barra-importacao {
    height: 6px;
    border-radius: 3px;
    background: #4d4d4d;
    margin-top: 1.25rem;
    overflow: hidden;
}

.barra-importacao i { display: block; height: 100%; width: 0; background: var(--verde); transition: width 0.4s; }

/* rádios: cartão com o logo da emissora e selo de ao vivo */
.cartao .selo-vivo {
    position: absolute;
    top: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 0.15rem 0.4rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.cartao .selo-vivo::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f0356b;
    animation: pulsar 1.6s ease-in-out infinite;
}

@keyframes pulsar { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.cartao .capa-radio {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 4px;
    background: linear-gradient(135deg, #1f1f1f, #3d3d3d);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.cartao .capa-radio img { width: 70%; height: 70%; object-fit: contain; background: transparent; border-radius: 0; box-shadow: none; }
.cartao .capa-radio svg { width: 40%; height: 40%; fill: rgba(255, 255, 255, 0.5); }

/* faixa ao vivo: o player esconde o tempo e mostra o selo */
.player.ao-vivo .barra-tempo span:not(.selo-vivo-player),
.player.ao-vivo .trilha { visibility: hidden; }

.player .selo-vivo-player {
    display: none;
    align-items: center;
    gap: 0.35rem;
    color: var(--texto-suave);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.player.ao-vivo .selo-vivo-player { display: inline-flex; }
.player.ao-vivo .barra-tempo { position: relative; }
.player.ao-vivo .selo-vivo-player { position: absolute; left: 50%; transform: translateX(-50%); }
.player.ao-vivo .selo-vivo-player::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #f0356b; animation: pulsar 1.6s ease-in-out infinite; }

/* resultados vindos de um trecho da letra */
.lista-letras { padding: 0 0 0.5rem; }

.lista-letras .faixa-letra {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    height: 56px;
    border-radius: 4px;
    padding: 0 0.5rem;
    color: var(--texto-suave);
    cursor: pointer;
}

.lista-letras .faixa-letra:hover { background: rgba(255, 255, 255, 0.1); }
.lista-letras .faixa-letra img { width: 40px; height: 40px; border-radius: 4px; }
.lista-letras .capa-quadrada { width: 40px; height: 40px; }
.lista-letras .textos { min-width: 0; }
.lista-letras strong { display: block; color: var(--texto); font-size: 1rem; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-letras .textos span { display: block; font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.etiqueta svg { width: 12px; height: 12px; fill: currentColor; flex: none; }
.etiqueta.verde { background: rgba(30, 215, 96, 0.15); color: var(--verde); }

@media (max-width: 860px), (pointer: coarse) and (max-width: 1200px) {
    .lista-letras .faixa-letra { padding: 0 0.25rem; }
    .etiqueta { font-size: 0.6875rem; }
}

/* miniatura do artista na linha de informações, como no cabeçalho do Spotify */
.meta-entidade .avatar-artista { width: 24px; height: 24px; border-radius: 50%; margin-right: 0.25rem; }

.faixa .coluna-icone { display: flex; justify-content: center; }
.faixa .duracao { justify-self: end; font-size: 0.875rem; font-variant-numeric: tabular-nums; }

.faixa .acao-faixa {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--texto-suave);
    opacity: 0;
    cursor: pointer;
}

.faixa .acao-faixa svg { width: 16px; height: 16px; fill: currentColor; }
.faixa:hover .acao-faixa { opacity: 1; }
.faixa .acao-faixa.ativo { opacity: 1; color: var(--verde); }
.faixa .acao-faixa:hover { color: var(--texto); transform: scale(1.06); }
.faixa .acao-faixa.ativo:hover { color: var(--verde); }

/* equalizador animado da faixa tocando */
.barras-eq { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 16px; }
.barras-eq i { display: block; width: 2px; background: var(--verde); animation: pular 0.9s ease-in-out infinite; }
.barras-eq i:nth-child(1) { height: 40%; animation-delay: -0.4s; }
.barras-eq i:nth-child(2) { height: 100%; animation-delay: -0.2s; }
.barras-eq i:nth-child(3) { height: 60%; }
.barras-eq i:nth-child(4) { height: 80%; animation-delay: -0.6s; }

@keyframes pular { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
.pausado .barras-eq i { animation-play-state: paused; }

/* ==========================================================================
   botões gerais
   ========================================================================== */

.botao-principal, .botao-secundario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 0;
    border-radius: 500px;
    padding: 0.75rem 2rem;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform 0.1s, background 0.15s, border-color 0.15s;
}

.botao-principal { background: var(--texto); color: #000; }
.botao-principal:hover { transform: scale(1.04); background: #f0f0f0; }
.botao-principal.verde { background: var(--verde); }
.botao-principal.verde:hover { background: #3be477; }
.botao-principal svg { width: 18px; height: 18px; fill: currentColor; }

.botao-secundario { border: 1px solid var(--tinta-forte); background: transparent; color: var(--texto); }
.botao-secundario:hover { border-color: var(--texto); transform: scale(1.04); }

.vazio-tela { padding: 3rem 1rem; text-align: center; color: var(--texto-suave); }
.vazio-tela strong { display: block; color: var(--texto); font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; }
.dica { color: var(--texto-suave); font-size: 0.875rem; }

.titulo-secao { margin: 2rem 0 1rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }

/* ==========================================================================
   painel "Tocando agora"
   ========================================================================== */

.painel-direita {
    grid-area: painel;
    display: none;
    flex-direction: column;
    border-radius: var(--raio);
    background: var(--base);
    overflow: hidden;
    min-width: 0;
}

.com-painel .painel-direita { display: flex; }

.painel-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem 0.5rem;
    font-size: 1rem;
    font-weight: 700;
}

.painel-rolagem { overflow-y: auto; padding: 0 1rem 1.5rem; }

.painel-capa {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--raio);
    margin-bottom: 1rem;
}

.painel-titulo { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.painel-titulo h3 { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.painel-titulo p { margin: 0.25rem 0 0; color: var(--texto-suave); font-size: 0.875rem; }

.cartao-sobre {
    border-radius: var(--raio);
    background: var(--elevado);
    margin-top: 1.5rem;
    padding: 1rem;
}

.cartao-sobre h4 { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 700; }
.cartao-sobre p { margin: 0; color: var(--texto-suave); font-size: 0.875rem; line-height: 1.5; }

.fila-painel { margin-top: 1.5rem; }
.fila-painel h4 { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 700; }

.item-fila {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    border: 0;
    border-radius: 4px;
    background: transparent;
    padding: 0.4rem;
    text-align: left;
    cursor: pointer;
}

.item-fila:hover { background: var(--elevado-realce); }
.item-fila img { width: 40px; height: 40px; border-radius: 4px; }
.item-fila strong { display: block; font-size: 0.875rem; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-fila.tocando strong { color: var(--verde); }
.item-fila span { display: block; color: var(--texto-suave); font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   player
   ========================================================================== */

.player {
    grid-area: player;
    display: grid;
    grid-template-columns: minmax(180px, 30%) minmax(0, 40%) minmax(180px, 30%);
    align-items: center;
    height: var(--altura-player);
    padding: 0 0.5rem;
    background: var(--preto);
}

.player-faixa { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.player-faixa > img { width: 56px; height: 56px; border-radius: 4px; flex: none; cursor: pointer; }
.player-textos { min-width: 0; }

.player-textos strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-textos strong:hover { text-decoration: underline; cursor: pointer; }

.player-textos span {
    display: block;
    color: var(--texto-suave);
    font-size: 0.6875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-textos span:hover { color: var(--texto); text-decoration: underline; cursor: pointer; }

.player-controles { display: grid; gap: 0.25rem; justify-items: center; min-width: 0; width: 100%; }
.botoes { display: flex; align-items: center; gap: 1rem; }

.botao-controle {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--texto-suave);
    cursor: pointer;
    transition: color 0.15s, transform 0.1s;
}

.botao-controle svg { width: 16px; height: 16px; fill: currentColor; }
.botao-controle:hover { color: var(--texto); transform: scale(1.06); }
.botao-controle.ativo { color: var(--verde); }
.botao-controle.ativo::after {
    content: "";
    position: absolute;
    margin-top: 26px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--verde);
}

.botao-tocar {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: var(--texto);
    color: #000;
    cursor: pointer;
    transition: transform 0.1s;
}

.botao-tocar svg { width: 16px; height: 16px; fill: currentColor; }
.botao-tocar:hover { transform: scale(1.06); }

.barra-tempo { display: flex; align-items: center; gap: 0.5rem; width: 100%; }

.barra-tempo span {
    color: var(--texto-suave);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    min-width: 40px;
    text-align: center;
}

/* trilha customizada: cinza que vira verde no hover, com bolinha que aparece */
.trilha {
    position: relative;
    flex: 1;
    height: 12px;
    display: flex;
    align-items: center;
    cursor: pointer;
    touch-action: none;
}

.trilha .fundo { position: absolute; inset: 0 0 auto; top: 4px; height: 4px; border-radius: 2px; background: #4d4d4d; }
.trilha .preenchida { position: absolute; top: 4px; left: 0; height: 4px; border-radius: 2px; background: var(--texto); width: 0; }

.trilha .bolinha {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--texto);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.1s;
    pointer-events: none;
}

.trilha:hover .preenchida, .trilha.arrastando .preenchida { background: var(--verde); }
.trilha:hover .bolinha, .trilha.arrastando .bolinha { opacity: 1; }

.player-extras { display: flex; align-items: center; justify-content: flex-end; gap: 0.35rem; }
.volume { display: flex; align-items: center; gap: 0.25rem; }
.volume .trilha { width: 93px; flex: none; }

/* ==========================================================================
   avisos e mobile
   ========================================================================== */

.aviso-flutuante {
    position: fixed;
    left: 50%;
    bottom: calc(var(--altura-player) + 1.25rem);
    z-index: 60;
    transform: translateX(-50%);
    border-radius: var(--raio);
    background: var(--verde);
    color: #000;
    padding: 0.85rem 1.15rem;
    font-size: 0.875rem;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    max-width: calc(100vw - 2rem);
}

.selo-offline {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 500px;
    background: var(--elevado-realce);
    color: var(--texto-suave);
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
}

.selo-baixada { display: inline-grid; place-items: center; color: var(--verde); }
.selo-baixada svg { width: 16px; height: 16px; fill: currentColor; }

.nav-inferior { display: none; }
.somente-mobile { display: none; }
.menu-flutuante {
    position: fixed;
    /* acima do player cheio (80) e da janelinha (200): abrindo atrás deles,
       os três pontos e a seta de baixar pareciam não funcionar */
    z-index: 210;
    min-width: 200px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    background: #282828;
    padding: 4px;
    box-shadow: 0 16px 24px rgba(0, 0, 0, 0.6);
}

.menu-flutuante button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: var(--texto);
    padding: 0.75rem;
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
}

.menu-flutuante button:hover { background: rgba(255, 255, 255, 0.1); }
.menu-flutuante button svg { width: 16px; height: 16px; fill: currentColor; }

/* ---------------------------------------------------------------- tablet */

@media (max-width: 1100px) and (not ((pointer: coarse) and (max-width: 1200px))) {
    :root { --largura-lateral: 88px; }
    .grade-app.com-painel { --largura-painel: 0px; }
    .painel-direita { display: none !important; }
    .lateral .item-menu { justify-content: center; padding: 0.75rem; }
    .lateral .item-menu .rotulo-menu { display: none; }
    .lateral .biblioteca-topo { justify-content: center; padding: 0.75rem 0; }
    .lateral .titulo-biblioteca span { display: none; }
    .lateral .chips,
    .lateral .biblioteca-ferramentas,
    .lateral .aviso-lateral { display: none; }
    .lateral .item-biblioteca { grid-template-columns: 48px; justify-content: center; }
    .lateral .item-biblioteca div:last-child { display: none; }
    .cabecalho-lista, .faixa { grid-template-columns: 16px minmax(0, 1fr) 40px 60px 40px; }
    .cabecalho-lista .col-album, .faixa .album-coluna { display: none; }
}

/* ---------------------------------------------------------------- celular */

@media (max-width: 860px), (pointer: coarse) and (max-width: 1200px) {
    :root { --altura-player: 56px; --folga: 0px; --altura-nav: 58px; }

    .grade-app {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto auto;
        grid-template-areas: "palco" "player" "nav";
        gap: 0;
        padding: 0;
        height: 100%;
        max-height: 100dvh;
        overflow: hidden;
    }

    #topo-busca {
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--base);
        padding-top: calc(0.5rem + env(safe-area-inset-top));
    }

    .topo-global { display: none; }
    .lateral { display: none; }
    .palco { border-radius: 0; }
    .rolagem { padding-bottom: 0.5rem; }
    .conteudo-tela { padding: 0 1rem 1.5rem; }

    /* topo do celular: saudação + engrenagem, igual ao app */
    .somente-mobile { display: flex; }
    .barra-palco { height: 56px; padding: 0.5rem 1rem; gap: 0.75rem; background: linear-gradient(180deg, color-mix(in srgb, var(--cor-capa) 55%, #101010), transparent); }
    .barra-palco .navegacao { display: none; }
    .barra-palco.tela-inicio .titulo-barra { opacity: 1; transform: none; }
    .barra-palco .titulo-barra { font-size: 1.5rem; font-weight: 800; }
    .barra-palco.fixada { background: color-mix(in srgb, var(--cor-capa) 70%, #101010); }
    .barra-palco .play-barra { display: none; }
    #avatar-mobile { width: 32px; height: 32px; flex: none; }

    /* campo de busca dentro da tela Buscar, claro como no app */
    #topo-busca .busca-topo {
        width: 100%;
        height: 44px;
        margin-bottom: 1.25rem;
        background: #fff;
        border-radius: 4px;
    }

    #topo-busca .busca-topo input { color: #000; font-size: 1rem; font-weight: 500; }
    #topo-busca .busca-topo input::placeholder { color: #6a6a6a; }
    #topo-busca .busca-topo svg { fill: #000; }
    #topo-busca .busca-topo:hover, #topo-busca .busca-topo:focus-within { background: #fff; border-color: transparent; }
    .barra-palco.tela-buscar { display: none !important; }

    .chips { padding: 0 1rem 0.75rem; }
    .chip { font-size: 0.8125rem; padding: 0.35rem 0.75rem; }
    .filtros-home { padding: 0 0 1rem; overflow-x: auto; scrollbar-width: none; }
    .filtros-home::-webkit-scrollbar { display: none; }

    .saudacao-home { font-size: 1.5rem; }
    .grade-atalhos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .atalho { height: 56px; grid-template-columns: 56px minmax(0, 1fr); gap: 0.6rem; }
    .atalho img, .atalho .capa-quadrada { width: 56px; height: 56px; }
    .atalho strong { font-size: 0.8125rem; padding-right: 0.5rem; white-space: normal; }
    .atalho .play-flutuante { display: none; }

    .grade { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.25rem; }
    .trilho .grade { grid-auto-flow: column; grid-auto-columns: minmax(140px, 42vw); grid-template-columns: none; grid-auto-rows: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .trilho .grade::-webkit-scrollbar { display: none; }
    .trilho .grade > * { scroll-snap-align: start; }
    .cartao { padding: 0 0 1rem; }
    .cartao:hover { background: transparent; }
    .play-flutuante { display: none; }
    .trilho-topo h2 { font-size: 1.25rem; }

    /* cabeçalho de álbum em coluna, como no app */
    .cabecalho-entidade {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
        padding: 0.5rem 1rem 1rem;
        min-height: 0;
    }

    .cabecalho-entidade > img,
    .cabecalho-entidade > .capa-quadrada { width: min(220px, 55vw); height: min(220px, 55vw); }
    .info-entidade { width: 100%; }
    .info-entidade h1 { font-size: 1.75rem; margin: 0.25rem 0; }
    .info-entidade .rotulo { display: none; }
    .meta-entidade { justify-content: center; }
    .descricao-entidade { margin-inline: auto; -webkit-line-clamp: 3; }

    .barra-acoes { padding: 0.5rem 1rem 1rem; gap: 1rem; }
    .barra-acoes .acoes-direita { gap: 0.75rem; }

    .cabecalho-lista { display: none; }
    .faixa { grid-template-columns: minmax(0, 1fr) 32px 32px; height: 56px; margin: 0; padding: 0 1rem; gap: 0.75rem; }
    .faixa .indice, .faixa .album-coluna, .faixa .duracao { display: none; }
    .lista-faixas.sem-coluna-album .faixa { grid-template-columns: minmax(0, 1fr) 32px 32px; }
    .faixa .acao-faixa { opacity: 1; }
    .faixa .nome strong { font-size: 0.9375rem; }

    /* mini player colado na nav inferior */
    .player {
        grid-area: player;
        grid-template-columns: minmax(0, 1fr) auto;
        height: 56px;
        margin: 0 0.5rem 0.25rem;
        border-radius: 6px;
        padding: 0 0.5rem;
        /* o mini player do app pega a cor da capa que está tocando */
        background: color-mix(in srgb, var(--cor-capa) 80%, #000);
    }

    .player-controles { display: none; }
    .player-faixa > img { width: 40px; height: 40px; }
    .player-extras { gap: 0.25rem; }
    .player-extras .so-desktop { display: none; }

    .player .barra-progresso-mini {
        position: absolute;
        left: 0.5rem;
        right: 0.5rem;
        bottom: 0;
        height: 2px;
        background: rgba(255, 255, 255, 0.25);
        border-radius: 2px;
        overflow: hidden;
    }

    .player .barra-progresso-mini i { display: block; height: 100%; background: var(--texto); width: 0; }

    .nav-inferior {
        grid-area: nav;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0, #000 40%);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .item-nav {
        display: grid;
        justify-items: center;
        gap: 2px;
        border: 0;
        background: transparent;
        color: var(--texto-suave);
        padding: 0.5rem 0 0.6rem;
        font-size: 0.625rem;
        font-weight: 500;
        cursor: pointer;
    }

    .item-nav svg { width: 24px; height: 24px; fill: currentColor; }
    .item-nav.ativo { color: var(--texto); }

    .aviso-flutuante { bottom: calc(var(--altura-player) + 4.5rem); }

    /* tela cheia do player no celular */
    .player-cheio {
        position: fixed;
        inset: 0;
        z-index: 80;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        gap: 1rem;
        background: linear-gradient(180deg, var(--cor-capa) 0%, #101010 60%, #000 100%);
        padding: 1rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
    }

    .player-cheio .cabecalho-cheio { display: flex; align-items: center; justify-content: space-between; }
    .player-cheio .cabecalho-cheio span { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
    .player-cheio .capa-cheia { width: 100%; aspect-ratio: 1; border-radius: var(--raio); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); align-self: center; }
    .player-cheio .rodape-cheio { display: grid; gap: 1rem; }
    .player-cheio .titulo-cheio strong { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
    .player-cheio .titulo-cheio span { display: block; color: var(--texto-suave); font-size: 1rem; }
    .player-cheio .linha-titulo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
    .player-cheio .botoes { justify-content: space-between; gap: 0.5rem; }
    .player-cheio .botao-tocar { width: 64px; height: 64px; }
    .player-cheio .botao-tocar svg { width: 28px; height: 28px; }
    .player-cheio .botao-controle svg { width: 24px; height: 24px; }
    .player-cheio .barra-tempo { width: 100%; }
}

@media (max-width: 380px) {
    .grade-atalhos { grid-template-columns: minmax(0, 1fr); }
}


/* ---- enviar pastas do PC ---- */
#zona-arrastar {
    display: grid;
    gap: .5rem;
    justify-items: center;
    text-align: center;
    padding: 1.75rem 1rem;
    border: 2px dashed #4d4d4d;
    border-radius: 8px;
    background: #1a1a1a;
    transition: border-color .15s, background .15s;
}

#zona-arrastar strong { font-size: 1rem; font-weight: 700; }
#zona-arrastar.sobre { border-color: #1ed760; background: #14301f; }

#fila-envio,
#erros-envio {
    max-height: 168px;
    overflow-y: auto;
    display: grid;
    gap: .25rem;
    font-size: .8125rem;
    color: #b3b3b3;
}

#fila-envio li {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .375rem .5rem;
    background: #1a1a1a;
    border-radius: 4px;
}

#fila-envio li strong { color: #fff; font-weight: 600; }
#fila-envio li button {
    background: none;
    border: 0;
    color: #b3b3b3;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

#fila-envio li button:hover { color: #fff; }


/* modal em tela estreita: botões empilhados e menos folga */
@media (max-width: 480px) {
    .caixa-modal { padding: 1.25rem; }
    .caixa-modal h3 { font-size: 1.25rem; }
    .acoes-modal { flex-direction: column-reverse; }
    .acoes-modal button { width: 100%; }
    #zona-arrastar { padding: 1.25rem .75rem; }
}


/* ---- baixadas: alternar entre grade de capas e lista ---- */
.grade.como-lista {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.linha-baixada {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--texto-suave);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    text-align: left;
    cursor: pointer;
}

.linha-baixada:hover { background: rgba(255, 255, 255, 0.1); }
.linha-baixada img { width: 48px; height: 48px; border-radius: 4px; object-fit: cover; }
.linha-baixada .textos { min-width: 0; display: grid; gap: 2px; }
.linha-baixada .textos strong {
    color: var(--texto);
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.linha-baixada .textos span { font-size: 0.8125rem; }
.linha-baixada .play-flutuante { position: static; opacity: 0; transform: none; width: 40px; height: 40px; }
.linha-baixada:hover .play-flutuante { opacity: 1; }


/* ---- "não pedir senha" na tela de entrada ---- */
.marcador {
    display: flex !important;
    align-items: center;
    gap: 0.6rem;
    color: var(--texto-suave);
    font-size: 0.875rem;
    cursor: pointer;
}

.marcador input {
    width: 18px;
    height: 18px;
    accent-color: var(--verde);
    cursor: pointer;
}

.marcador span { user-select: none; }


/* ---- letra que rola junto com a música ---- */
.letra-rolando {
    overflow-y: auto;
    padding: 1rem 0.5rem 2rem;
    display: grid;
    gap: 0.9rem;
    align-content: start;
    scroll-behavior: smooth;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 82%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 12%, #000 82%, transparent);
}

.letra-rolando p {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.45);
    transition: color .2s;
    cursor: pointer;
}

.letra-rolando p.agora { color: #fff; }
.letra-rolando .aviso-letra { font-size: 0.9375rem; font-weight: 500; color: var(--texto-suave); cursor: default; }

.player-cheio .letra-rolando { min-height: 0; }

#botao-velocidade {
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

#botao-velocidade.ativo, #botao-sono.ativo, #botao-letra.ativo, #letra-cheio.ativo { color: var(--verde); }

/* letra no painel "Tocando agora" do desktop */
#painel-letra-desktop {
    max-height: 42vh;
    overflow-y: auto;
    display: grid;
    gap: 0.6rem;
    padding: 0.5rem 0 1rem;
}

#painel-letra-desktop p { margin: 0; font-size: 1rem; font-weight: 600; color: rgba(255,255,255,.45); }
#painel-letra-desktop p.agora { color: #fff; }


/* ---- categorias da busca, com arte inclinada como no app ---- */
.cartao-categoria {
    position: relative;
    aspect-ratio: 1;
    max-height: 190px;
    display: flex;
    align-items: flex-start;
    border: 0;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    padding: 0.9rem;
    color: #fff;
    display: block;
}

.cartao-categoria strong {
    position: relative;
    z-index: 1;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.15;
    display: block;
    max-width: 70%;
}

.cartao-categoria img {
    position: absolute;
    right: -14%;
    bottom: -8%;
    width: 56%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 4px;
    transform: rotate(25deg);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .45);
}

.cartao-categoria:hover img { transform: rotate(20deg) scale(1.04); transition: transform .2s; }

@media (max-width: 480px) {
    .cartao-categoria strong { font-size: 1.05rem; }
}


/* ---- puxar para atualizar ---- */
.puxar-atualizar {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 70;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #282828;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
    transform: translate(-50%, -60px);
    opacity: 0;
    pointer-events: none;
}

.puxar-atualizar .giro {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, .25);
    border-top-color: var(--verde);
    border-radius: 50%;
}

.puxar-atualizar.girando .giro { animation: girar .8s linear infinite; }

@keyframes girar { to { transform: rotate(360deg); } }

#botao-traduzir { font-size: 0.75rem; font-weight: 800; letter-spacing: .02em; }
#botao-traduzir.ativo { color: var(--verde); }

.letra-rolando p .traducao {
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .5);
    margin-top: 0.15rem;
}

.letra-rolando p.agora .traducao { color: rgba(255, 255, 255, .75); }


/* ---- sem internet: fica claro o que dá para ouvir agora ---- */
body.sem-rede .faixa:not(.no-aparelho) .nome,
body.sem-rede .faixa:not(.no-aparelho) .indice,
body.sem-rede .faixa:not(.no-aparelho) .duracao { opacity: .45; }

body.sem-rede .faixa.no-aparelho .nome strong::after {
    content: '↓';
    margin-left: .4rem;
    color: var(--verde);
    font-size: .75rem;
    vertical-align: middle;
}


/* ---- perfil e configurações ---- */
.perfil-topo {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem 0 2rem;
}

.avatar-grande {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #535353;
    display: grid;
    place-items: center;
    font-size: 2.5rem;
    font-weight: 700;
    overflow: hidden;
    flex: none;
}

.avatar-grande img { width: 100%; height: 100%; object-fit: cover; }
.perfil-topo h1 { font-size: 2rem; font-weight: 800; margin: 0 0 .25rem; letter-spacing: -.02em; }
.perfil-topo .botao-secundario { margin-top: .75rem; }

.lista-config { display: grid; gap: .25rem; padding-bottom: 3rem; }

.grupo-config { margin-top: 1.5rem; }
.grupo-config h2 {
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--texto-suave);
    margin: 0 0 .5rem;
}

.item-config {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--texto);
    text-align: left;
    padding: .9rem .75rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: .9375rem;
}

.item-config:hover { background: rgba(255, 255, 255, .08); }
.item-config small { display: block; color: var(--texto-suave); font-size: .8125rem; margin-top: .15rem; }
.item-config .valor { color: var(--texto-suave); font-size: .875rem; white-space: nowrap; }
.item-config.perigo { color: #f15e6c; }

/* qualquer avatar: a foto preenche o círculo e não estica o layout */
.avatar-usuario, .avatar-grande, .avatar-gaveta { overflow: hidden; flex: none; }
.avatar-usuario img, .avatar-grande img, .avatar-gaveta img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}


/* ---- iPhone: notch em cima, barra de gestos embaixo, cantos arredondados ----
   Sem isso o topo do app fica debaixo da barra de status e os cartões encostam
   na curva da tela. */
@supports (padding: env(safe-area-inset-top)) {
    @media (max-width: 860px), (pointer: coarse) and (max-width: 1200px) {
        .barra-palco { padding-top: calc(0.5rem + env(safe-area-inset-top)); height: auto; min-height: 56px; }
        .conteudo-tela { padding-left: calc(1rem + env(safe-area-inset-left)); padding-right: calc(1rem + env(safe-area-inset-right)); }
        .nav-inferior { padding-bottom: calc(env(safe-area-inset-bottom) + 2px); }
        .player { margin-left: calc(0.5rem + env(safe-area-inset-left)); margin-right: calc(0.5rem + env(safe-area-inset-right)); }
        .player-cheio { padding-top: calc(1rem + env(safe-area-inset-top)); padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
        .cortina { padding-top: calc(1rem + env(safe-area-inset-top)); padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
        #topo-busca { padding-top: calc(0.5rem + env(safe-area-inset-top)); }
    }
}

/* a faixa de chips rola sozinha: no iPhone ela empurrava a largura da página */
.filtros-home, #filtros-home {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.filtros-home::-webkit-scrollbar, #filtros-home::-webkit-scrollbar { display: none; }


/* ---- artista: capa redonda, como no app ---- */
.moldura-capa.redonda img { border-radius: 50%; }
.cartao-artista strong { text-align: center; display: block; }
.cartao-artista span:not(.moldura-capa):not(.play-flutuante) { text-align: center; display: block; }

.link-artista {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.link-artista:hover { color: var(--texto); text-decoration: underline; }


/* ---- procurar e ordenar dentro da lista ---- */
.barra-filtro {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 1rem 0.75rem;
    padding: 0 1rem;
}

.barra-filtro input {
    flex: 1;
    min-width: 0;
    height: 40px;
    border: 0;
    border-radius: 4px;
    background: #242424;
    color: var(--texto);
    padding: 0 0.9rem;
    font-size: 0.875rem;
    outline: none;
}

.barra-filtro input:focus { background: #2a2a2a; box-shadow: inset 0 0 0 1px #666; }
.barra-filtro .dica { white-space: nowrap; font-size: 0.8125rem; }

@media (max-width: 860px), (pointer: coarse) and (max-width: 1200px) {
    .barra-filtro { margin: 0 0 0.75rem; padding: 0 1rem; }
}


/* ---- arrastar na fila ---- */
.item-fila { position: relative; touch-action: pan-y; }

.item-fila .pegador {
    display: grid;
    place-items: center;
    width: 28px;
    color: var(--texto-suave);
    cursor: grab;
    touch-action: none;
    flex: none;
}

.item-fila .pegador svg { width: 16px; height: 16px; fill: currentColor; }
.item-fila.arrastando { opacity: .6; background: rgba(255, 255, 255, .12); cursor: grabbing; }


/* ---- painel do perfil (desliza da esquerda, como no app) ---- */
.cortina-gaveta {
    position: fixed;
    inset: 0;
    z-index: 95;
    background: rgba(0, 0, 0, .6);
    animation: aparecer .18s ease;
}

@keyframes aparecer { from { opacity: 0 } to { opacity: 1 } }

.gaveta-perfil {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 96;
    width: min(88vw, 420px);
    background: #1c1c1c;
    display: flex;
    flex-direction: column;
    padding: calc(1.25rem + env(safe-area-inset-top)) 0 calc(1rem + env(safe-area-inset-bottom));
    overflow-y: auto;
    animation: entrar-lateral .2s ease;
    box-shadow: 8px 0 30px rgba(0, 0, 0, .5);
}

@keyframes entrar-lateral { from { transform: translateX(-100%) } to { transform: none } }

.topo-gaveta {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--texto);
    text-align: left;
    padding: 0.75rem 1.5rem 1.5rem;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.avatar-gaveta {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #535353;
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    font-weight: 700;
    overflow: hidden;
    flex: none;
}

.avatar-gaveta img { width: 100%; height: 100%; object-fit: cover; }
.topo-gaveta .textos strong { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.topo-gaveta .textos span { color: var(--texto-suave); font-size: .9375rem; }

.itens-gaveta { display: grid; align-content: start; padding: 0.75rem 0; }

.item-gaveta {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 1.25rem;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--texto);
    text-align: left;
    padding: 1rem 1.5rem;
    cursor: pointer;
    font-size: 1rem;
}

.item-gaveta:hover { background: rgba(255, 255, 255, .06); }
.item-gaveta svg { width: 26px; height: 26px; fill: currentColor; }
.item-gaveta small { display: block; color: var(--texto-suave); font-size: .8125rem; margin-top: .15rem; }


/* ---- configurações em categorias, como no app ---- */
.item-config.secao { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 1.1rem; padding: 1rem 0.75rem; }
.item-config .icone-secao { display: grid; place-items: center; color: var(--texto); }
.item-config .icone-secao svg { width: 24px; height: 24px; fill: currentColor; }
.item-config.secao .valor svg { width: 16px; height: 16px; fill: var(--texto-suave); }

.voltar-config {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 0;
    background: transparent;
    color: var(--texto-suave);
    font-size: .9375rem;
    padding: .5rem .75rem 1rem;
    cursor: pointer;
}

.voltar-config svg { width: 16px; height: 16px; fill: currentColor; }
.voltar-config:hover { color: var(--texto); }


/* ---- topo da busca e faixa "descubra", no formato do app ---- */
.cabecalho-busca {
    display: none;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.cabecalho-busca h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; margin: 0; }

.faixa-descubra {
    display: grid;
    grid-auto-flow: column;
    /* min() evita rolagem lateral em telas de 320px, onde 230px + folga não cabe */
    grid-auto-columns: min(230px, 72vw);
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 1rem;
}

.faixa-descubra::-webkit-scrollbar { display: none; }

.cartao-descubra {
    position: relative;
    aspect-ratio: 16 / 10;
    border: 0;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    scroll-snap-align: start;
    background: #222;
}

.cartao-descubra img { width: 100%; height: 100%; object-fit: cover; }

.cartao-descubra .selo {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    right: 0.75rem;
    text-align: left;
    color: #fff;
    font-weight: 800;
    font-size: 1.0625rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
}

.cartao-descubra .selo small { display: block; font-weight: 500; font-size: .8125rem; opacity: .85; }
.cartao-descubra::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.75)); }
.cartao-descubra .selo { z-index: 1; }

@media (max-width: 860px), (pointer: coarse) and (max-width: 1200px) {
    .cabecalho-busca { display: flex; }
    #topo-busca .busca-topo { margin-bottom: 1.5rem; }
}


/* ---- Sua Biblioteca no formato do app ---- */
.cabecalho-biblioteca {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.cabecalho-biblioteca h1 { flex: 1; font-size: 1.5rem; font-weight: 800; margin: 0; letter-spacing: -.02em; }

.barra-ordem-biblioteca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
}

.barra-ordem-biblioteca .botao-texto { display: inline-flex; align-items: center; gap: .5rem; }
.barra-ordem-biblioteca svg { width: 16px; height: 16px; fill: currentColor; }

.campo-filtro-biblioteca {
    width: 100%;
    height: 40px;
    border: 0;
    border-radius: 4px;
    background: #242424;
    color: var(--texto);
    padding: 0 .9rem;
    margin-bottom: .75rem;
    font-size: .875rem;
    outline: none;
}

/* chip escolhido fica verde e ganha o X de limpar, como no app */
.chips .chip.ativo { background: var(--verde); color: #000; }
.chip-limpar {
    display: none;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #232323;
    color: var(--texto);
    cursor: pointer;
    flex: none;
}

.chips.filtrando .chip-limpar { display: grid; }
.chips.filtrando .chip:not(.ativo) { display: none; }
.chip-limpar svg { width: 14px; height: 14px; fill: currentColor; }

/* visão em grade (o botãozinho da direita) */
.lista-biblioteca.em-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
}

.lista-biblioteca.em-grade .item-biblioteca {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
}

.lista-biblioteca.em-grade .item-biblioteca img,
.lista-biblioteca.em-grade .item-biblioteca .capa-quadrada { width: 100%; height: auto; aspect-ratio: 1; }


.item-biblioteca img.redonda { border-radius: 50%; }

/* com foto o círculo é a própria imagem: o respiro da inicial atrapalha */
.avatar-usuario:has(img) { padding: 0; background: #000; }

/* foto da conta na lista "Contas da casa" */
.avatar-item {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #7d4b32;
    color: var(--texto);
    font-weight: 700;
    font-size: .875rem;
    overflow: hidden;
    flex: none;
}

.avatar-item img { width: 100%; height: 100%; object-fit: cover; }

/* com foto o item ganha uma coluna: sem isso o avatar entra na vaga do valor */
.item-config:has(.avatar-item) { grid-template-columns: auto minmax(0, 1fr) auto; }

/* -------------------------------------------------------- faixas do YouTube */
/* O texto tem que sobreviver ao celular: as acoes ficam compactas para nao
   comerem a coluna do meio (grid 40px / 1fr / auto). */
.faixa-yt .acoes-yt { display: flex; align-items: center; gap: .4rem; }
.faixa-yt .estado-yt { font-size: .75rem; opacity: .85; white-space: nowrap; }
.faixa-yt .estado-yt.erro { color: #f38ba8; }
.faixa-yt .estado-yt.pronto { color: #a6e3a1; }
.faixa-yt .guardar-yt.ativo { color: var(--verde, #1db954); }

@media (max-width: 640px) {
    /* no celular a etiqueta de duracao sai: o nome da musica vale mais */
    .faixa-yt .etiqueta { display: none; }
    .faixa-yt .estado-yt { max-width: 5rem; overflow: hidden; text-overflow: ellipsis; }
}

/* ------------------------------------------------- player do YouTube ancorado */
/* Fica acima da barra de reprodução, sem cobrir a tela: dá para continuar
   navegando e buscando com o vídeo tocando. */
.painel-yt {
    position: fixed;
    right: 1rem;
    bottom: calc(var(--altura-player, 90px) + 1rem);
    z-index: 60;
    width: min(420px, calc(100vw - 2rem));
    background: var(--fundo-cartao, #181818);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgb(0 0 0 / .55);
}

.painel-yt[hidden] { display: none; }

.painel-yt .topo-yt {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .75rem;
}

.painel-yt .topo-yt strong {
    flex: 1;
    font-size: .85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.painel-yt .moldura-yt { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.painel-yt .moldura-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 640px) {
    /* no celular ocupa a largura toda, logo acima da nav de baixo */
    .painel-yt { right: .5rem; left: .5rem; width: auto; bottom: calc(var(--altura-player, 76px) + 4.2rem); }
}

/* ------------------------------------------------------- palco do vídeo */
/* Painel ancorado acima da barra, como era antes: sem cobrir a tela e sem
   backdrop-filter — o desfoque custa caro na WebView do APK e era parte da
   lentidão. Continua dando para navegar com o vídeo tocando. */
.palco-video {
    position: fixed;
    right: 1rem;
    bottom: calc(var(--altura-player, 72px) + 1rem);
    z-index: 60;
    width: min(420px, calc(100vw - 2rem));
}

.palco-video[hidden] { display: none; }

.palco-video .moldura-central {
    background: var(--fundo-cartao, #181818);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgb(0 0 0 / .55);
}

.palco-video .topo-video {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .5rem .4rem .5rem .75rem;
}

/* o nome ocupa o que sobra e quebra em duas linhas em vez de virar "..." */
.palco-video .topo-video strong {
    flex: 1;
    min-width: 0;
    font-size: .82rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.palco-video .topo-video .botao-nav {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: .95rem;
    background: rgb(255 255 255 / .08);
}

.palco-video .topo-video .botao-nav:hover { background: rgb(255 255 255 / .18); }

.palco-video video {
    display: block;
    width: 100%;
    /* sem aspecto fixo: o formato progressivo do YouTube e 480x360 (4:3) e
       forcar 16/9 esticava a imagem. A altura sai da propria midia. */
    height: auto;
    max-height: 60vh;
    background: #000;
}

@media (max-width: 640px) {
    .palco-video {
        right: .5rem;
        left: .5rem;
        width: auto;
        bottom: calc(var(--altura-player, 56px) + 4.2rem);
    }
}

/* vídeo dentro da tela cheia, no lugar da capa */
.palco-cheio {
    width: min(92vw, 520px);
    /* vídeo é 16:9: no quadrado antigo sobrava tarja preta em cima e embaixo,
       e o palco ainda ficava colado no topo da área */
    aspect-ratio: 16 / 9;
    align-self: center;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    display: grid;
    place-items: center;
}
.palco-cheio[hidden] { display: none; }
.palco-cheio video, .palco-cheio #tela-video { width: 100%; height: 100%; object-fit: contain; background: #000; }

/* selo que separa vídeo de música na lista */
.selo-tipo {
    display: inline-flex;
    align-items: center;
    vertical-align: -2px;
    margin-right: .4rem;
}
.selo-tipo svg { width: 14px; height: 14px; }
/* sobre fundo escuro os dois precisam de brilho proprio, senao somem */
.selo-tipo.video { color: #7cc4ff; }
.selo-tipo.som { color: #1db954; }

/* ------------------------------------------------ escolher playlist (modal) */
.lista-playlists {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    max-height: min(48vh, 320px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.lista-playlists li { margin: 0 0 .25rem; }

.lista-playlists button {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .5rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--texto, #fff);
    text-align: left;
    cursor: pointer;
}

.lista-playlists button:hover,
.lista-playlists button:focus-visible { background: rgba(255, 255, 255, .1); }

.lista-playlists img,
.lista-playlists .sem-capa {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    object-fit: cover;
    background: #3e3e3e;
    display: grid;
    place-items: center;
}

.lista-playlists .sem-capa svg { width: 20px; height: 20px; opacity: .7; }
.lista-playlists .nome-pl { overflow: hidden; }
.lista-playlists .nome-pl strong { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-playlists .nome-pl small { color: var(--texto-suave, #b3b3b3); font-size: .8rem; }
.lista-playlists .ja-tem { color: #1db954; font-size: .78rem; white-space: nowrap; }

.nova-playlist-modal { display: flex; gap: .5rem; align-items: center; }
.nova-playlist-modal input { flex: 1; margin: 0; }
.nova-playlist-modal button { white-space: nowrap; }

.lista-playlists .vazio { color: var(--texto-suave, #b3b3b3); font-size: .85rem; padding: .5rem; }

/* controles sobre o vídeo, no estilo do player de podcast */
.area-video { position: relative; }

.controles-video {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    background: linear-gradient(rgb(0 0 0 / .15), rgb(0 0 0 / .45));
    opacity: 1;
    transition: opacity .25s ease;
}

/* somem sozinhos com o vídeo tocando e ninguém tocando na tela */
.controles-video.escondidos { opacity: 0; pointer-events: none; }

.botao-video {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: rgb(0 0 0 / .45);
    color: #fff;
    font-size: 1.35rem;
    cursor: pointer;
}

.botao-video.grande { width: 62px; height: 62px; font-size: 1.7rem; background: #fff; color: #000; }
.botao-video span {
    position: absolute;
    font-size: .58rem;
    font-weight: 700;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.rodape-video { display: none; }   /* o nome ja aparece no topo e na barra */

/* Na janela flutuante sobra pouco espaço: fica só o vídeo, sem interface. */
body.em-janela-flutuante .palco-video { background: #000; padding: 0; }
body.em-janela-flutuante .palco-video .moldura-central { width: 100%; border-radius: 0; }
body.em-janela-flutuante .palco-video .topo-video,
body.em-janela-flutuante .palco-video .rodape-video,
body.em-janela-flutuante .controles-video,
body.em-janela-flutuante .barra-player,
body.em-janela-flutuante .nav-inferior { display: none !important; }

/* ----------------------------------------------------- seção YouTube */

.topo-yt {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.campo-yt {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .6rem;
    height: 42px;
    padding: 0 1rem;
    border-radius: 999px;
    background: #1f1f1f;
    border: 1px solid #333;
    min-width: 0;
}

.campo-yt svg { width: 18px; height: 18px; fill: var(--texto-suave); flex: none; }

.campo-yt input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--texto);
    font-size: .9375rem;
    outline: none;
}

.campo-yt input::-webkit-search-cancel-button { -webkit-appearance: none; }

.chips-yt { padding: 0 0 1rem; }

/* grade de vídeos: uma coluna no celular, como no app de vídeo */
.grade-yt {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 700px) {
    .grade-yt { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem 1rem; }
}

.cartao-yt {
    display: grid;
    gap: .625rem;
    background: none;
    border: 0;
    padding: 0;
    color: var(--texto);
    text-align: left;
    cursor: pointer;
    width: 100%;
}

.miniatura-yt {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: #181818;
}

.miniatura-yt img { width: 100%; height: 100%; object-fit: cover; display: block; }

.duracao-yt {
    position: absolute;
    right: 8px;
    bottom: 8px;
    background: rgba(0, 0, 0, .8);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 4px;
}

.linha-yt { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: .75rem; align-items: start; }

.linha-yt .marca-canal {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #303030;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: .875rem;
    overflow: hidden;
}

.linha-yt h3 {
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.linha-yt p { margin: .25rem 0 0; color: var(--texto-suave); font-size: .8125rem; }

.cartao-yt.tocando .miniatura-yt { outline: 2px solid var(--verde); outline-offset: 2px; }

/* palco do vídeo escolhido */
.palco-yt {
    display: grid;
    grid-template-columns: minmax(0, 140px) minmax(0, 1fr);
    gap: 1rem;
    background: var(--elevado);
    border-radius: 12px;
    padding: .875rem;
    margin-bottom: 1.25rem;
}

.capa-palco-yt { aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #181818; }
.capa-palco-yt img { width: 100%; height: 100%; object-fit: cover; }

.dados-palco-yt h2 {
    font-size: 1rem;
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dados-palco-yt p { margin: .25rem 0 .75rem; color: var(--texto-suave); font-size: .8125rem; }
.acoes-palco-yt { display: flex; flex-wrap: wrap; gap: .5rem; }

@media (max-width: 520px) {
    .palco-yt { grid-template-columns: 1fr; }
}

.esqueleto-yt {
    border-radius: 12px;
    background: linear-gradient(90deg, #1c1c1c 25%, #262626 37%, #1c1c1c 63%);
    background-size: 400% 100%;
    animation: brilho-yt 1.2s ease-in-out infinite;
}

@keyframes brilho-yt { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }

.botao-contorno {
    border: 1px solid #535353;
    background: transparent;
    color: var(--texto);
    border-radius: 999px;
    padding: .5rem 1rem;
    font-weight: 600;
    font-size: .875rem;
    cursor: pointer;
}

.botao-contorno:hover { border-color: var(--texto); transform: scale(1.02); }
.botao-contorno.menor { padding: .375rem .875rem; font-size: .8125rem; }

/* ------------------------------------------------- app em janela minúscula
   Quando o Android põe o PWA em picture-in-picture, ele renderiza a página
   inteira em algo como 360x200 — e o player cheio, feito para a tela toda,
   jogava capa e controles para fora. Aqui ele vira mini player: a mídia ocupa
   tudo e sobram só título curto e os três controles, como no app de vídeo. */
@media (max-height: 430px) and (max-width: 760px) {
    .player-cheio {
        display: block;
        padding: 0;
        gap: 0;
        background: #000;
    }

    .player-cheio .cabecalho-cheio,
    .player-cheio .barra-tempo,
    .player-cheio #curtir-cheio,
    .player-cheio #embaralhar-cheio,
    .player-cheio #letra-cheio,
    .player-cheio #baixar-cheio,
    .player-cheio #botao-traduzir,
    .letra-rolando { display: none !important; }

    .player-cheio .capa-cheia,
    .player-cheio .palco-cheio {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        margin: 0;
        border-radius: 0;
        aspect-ratio: auto;
        box-shadow: none;
        object-fit: cover;
    }

    .player-cheio .palco-cheio video { object-fit: contain; }

    .player-cheio .rodape-cheio {
        position: absolute;
        inset: auto 0 0 0;
        display: grid;
        gap: .25rem;
        padding: 1.75rem .625rem .5rem;
        background: linear-gradient(180deg, transparent, rgb(0 0 0 / .82) 55%);
    }

    .player-cheio .titulo-cheio strong {
        font-size: .8125rem;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .player-cheio .titulo-cheio span { font-size: .6875rem; }
    .player-cheio .linha-titulo { gap: .5rem; }

    .player-cheio .botoes { justify-content: center; gap: 1.25rem; }
    .player-cheio .botoes .botao-controle svg { width: 20px; height: 20px; }
    .player-cheio .botao-tocar { width: 40px; height: 40px; }
}

/* ------------------------------------------- mini player de vídeo no app
   No formato do app de vídeo: pequeno, encostado no canto de baixo, sem barra
   de título — os controles ficam por cima da imagem e somem sozinhos. */
.palco-video {
    width: min(240px, 46vw);
    right: .75rem;
    /* a regra antiga do celular fixava left: .5rem e esticava o painel de
       ponta a ponta; aqui ele volta a ser um cartãozinho do lado direito */
    left: auto;
    bottom: calc(var(--altura-player, 72px) + var(--altura-nav, 56px) + .5rem);
}

.palco-video .moldura-central { border-radius: 10px; background: #000; }

.palco-video .topo-video {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 2;
    padding: .25rem;
    gap: .25rem;
    justify-content: flex-end;
    background: linear-gradient(180deg, rgb(0 0 0 / .6), transparent);
    opacity: 0;
    transition: opacity .18s;
}

.palco-video:hover .topo-video,
.palco-video.mostrando .topo-video { opacity: 1; }

/* o título sai do topo: no mini player ele mora embaixo, numa linha só */
.palco-video .topo-video strong { display: none; }

.palco-video .topo-video .botao-nav {
    width: 28px;
    height: 28px;
    font-size: .8rem;
    background: rgb(0 0 0 / .55);
}

.palco-video video { max-height: none; aspect-ratio: 16 / 9; object-fit: contain; }

.palco-video .rodape-video {
    display: grid;
    gap: .1rem;
    padding: .375rem .5rem .5rem;
    background: #0f0f0f;
}

.palco-video .rodape-video strong {
    font-size: .75rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.palco-video .rodape-video span { font-size: .6875rem; color: var(--texto-suave); }

/* controles no meio da imagem, como no mini player do app de vídeo */
.palco-video .controles-video {
    background: rgb(0 0 0 / .35);
    opacity: 0;
    transition: opacity .18s;
}

.palco-video:hover .controles-video,
.palco-video.mostrando .controles-video { opacity: 1; }

@media (min-width: 861px) {
    .palco-video { bottom: calc(var(--altura-player, 72px) + 1rem); width: min(320px, 30vw); }
}

/* ------------------------------------------- página do vídeo (seção YouTube) */

.pagina-yt { margin-bottom: 1.5rem; }

.tela-do-video {
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    display: grid;
    place-items: center;
    margin-bottom: .75rem;
}

.tela-do-video img { width: 100%; height: 100%; object-fit: cover; }
.tela-do-video video { width: 100%; height: 100%; object-fit: contain; background: #000; }

.titulo-video-yt {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 .25rem;
}

.dados-video-yt {
    border: 0;
    background: none;
    color: var(--texto-suave);
    font-size: .8125rem;
    padding: 0;
    cursor: pointer;
    text-align: left;
}

.dados-video-yt:hover { color: var(--texto); }

.canal-yt {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    margin: 1rem 0;
}

.marca-canal.grande {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #303030;
    display: grid;
    place-items: center;
    font-weight: 700;
    overflow: hidden;
}

.nome-canal-yt strong { display: block; font-size: .9375rem; }
.nome-canal-yt small { color: var(--texto-suave); font-size: .75rem; }

.botao-inscrever {
    border: 0;
    border-radius: 999px;
    background: var(--texto);
    color: #000;
    font-weight: 700;
    font-size: .875rem;
    padding: .5rem 1rem;
    cursor: pointer;
    white-space: nowrap;
}

.botao-inscrever.inscrito { background: #272727; color: var(--texto); }

/* fila de pilulas que rola de lado, como as ações do app de vídeo */
.acoes-video-yt {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .25rem;
    scrollbar-width: none;
}

.acoes-video-yt::-webkit-scrollbar { display: none; }

.pilula-yt {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    flex: none;
    border: 0;
    border-radius: 999px;
    background: #272727;
    color: var(--texto);
    font-size: .8125rem;
    font-weight: 600;
    padding: .5rem .875rem;
    cursor: pointer;
    white-space: nowrap;
}

.pilula-yt:hover { background: #3f3f3f; }
.pilula-yt.ativa { background: var(--verde); color: #000; }
.pilula-yt svg { width: 16px; height: 16px; fill: currentColor; }

.descricao-yt {
    background: #272727;
    border-radius: 12px;
    padding: .75rem;
    font-size: .8125rem;
    line-height: 1.45;
    white-space: pre-wrap;
    margin: .75rem 0 0;
    max-height: 40vh;
    overflow: auto;
}

/* imagem por baixo enquanto o vídeo não entra na página */
.tela-do-video { position: relative; }
.tela-do-video img { position: absolute; inset: 0; }
.tela-do-video video { position: relative; z-index: 1; }

.girando-yt {
    position: absolute;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid rgb(255 255 255 / .25);
    border-top-color: #fff;
    animation: girar-yt .8s linear infinite;
}

@keyframes girar-yt { to { transform: rotate(360deg); } }

/* na janelinha do PiP nada mais existe além do que está tocando */
body.modo-janelinha .barra-palco,
body.modo-janelinha .nav-inferior,
body.modo-janelinha .lateral,
body.modo-janelinha .player,
body.modo-janelinha .tela { display: none !important; }

body.modo-janelinha .player-cheio { z-index: 200; }

/* na janelinha o vídeo tem exatamente o tamanho da janela: sem aspecto fixo,
   senão sobra alguns pixels para fora e a barra de rolagem aparece */
body.modo-janelinha #tela-video,
body.modo-janelinha .palco-cheio video {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    max-height: 100%;
    object-fit: contain;
}

body.modo-janelinha .palco-cheio { display: block; }

/* ------------------- vídeo fixo no topo, como na página do app de vídeo */

.palco-pagina-yt {
    position: sticky;
    top: 0;
    z-index: 6;
    margin: 0 0 .75rem;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
}

/* rolando a lista, o vídeo encosta no topo e perde o arredondado de cima */
.palco-pagina-yt .tela-do-video { border-radius: 0; margin: 0; }

.controles-pagina-yt {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    grid-template-rows: 1fr auto;
    background: rgb(0 0 0 / .35);
    opacity: 0;
    transition: opacity .18s;
    pointer-events: none;
}

.controles-pagina-yt.aparecendo { opacity: 1; pointer-events: auto; }

.botoes-pagina-yt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(.6rem, 5vw, 2.5rem);
}

/* botões redondos e translúcidos, como os do app de vídeo */
.botao-yt {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    padding: 0;
    flex: none;
}

.botao-yt svg { width: 26px; height: 26px; fill: #fff; }
.botao-yt.grande { width: 60px; height: 60px; background: rgb(0 0 0 / .45); }
.botao-yt.grande svg { width: 30px; height: 30px; }
.botao-yt.pequeno { width: 32px; height: 32px; }
.botao-yt.pequeno svg { width: 20px; height: 20px; }
.botao-yt:active { transform: scale(.92); }

.rodape-controles-yt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: 0 .5rem .5rem;
}

.tempos-yt {
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    text-shadow: 0 1px 3px rgb(0 0 0 / .8);
}

/* a barra vermelha vive fora do painel: continua à mostra com ele escondido */
.progresso-yt {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    height: 3px;
    background: rgb(255 255 255 / .3);
    cursor: pointer;
}

.progresso-yt i {
    display: block;
    height: 100%;
    width: 0;
    background: #f00;
    transition: width .2s linear;
}

.progresso-yt b {
    position: absolute;
    top: 50%;
    left: 0;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: #f00;
    opacity: 0;
    transition: opacity .18s;
}

/* com os controles à mostra a barra engorda e ganha a bolinha, como no app */
.palco-pagina-yt:has(.controles-pagina-yt.aparecendo) .progresso-yt { height: 5px; bottom: 2px; }
.palco-pagina-yt:has(.controles-pagina-yt.aparecendo) .progresso-yt b { opacity: 1; }

/* assistindo, o player de baixo sai de cena: o comando está no próprio vídeo */
body.assistindo-video .player { display: none !important; }

/* O botão verde de tocar é coisa de mouse: no celular ele só aparecia no
   cartão que acabou de ser tocado (o foco fica), e era isso que dava o
   ponto verde solto no canto da capa. */
@media (max-width: 860px), (hover: none) {
    .cartao .play-flutuante { display: none; }
}

/* foto do canal no cartão, como na lista do app de vídeo */
.linha-yt .marca-canal img { width: 100%; height: 100%; object-fit: cover; }
.selo-yt { font-size: .625rem; opacity: .75; }

/* ---- a seção YouTube vai de borda a borda, como no app de vídeo ----
   O padding da tela deixava faixas vazias dos dois lados da miniatura. */
@media (max-width: 700px) {
    #tela-youtube { padding-left: 0; padding-right: 0; }

    #tela-youtube .topo-yt,
    #tela-youtube .chips-yt,
    #tela-youtube #dica-youtube,
    #tela-youtube #aviso-busca,
    #tela-youtube .titulo-video-yt,
    #tela-youtube .dados-video-yt,
    #tela-youtube .canal-yt,
    #tela-youtube .acoes-video-yt,
    #tela-youtube .descricao-yt,
    #tela-youtube .pagina-yt > .titulo-secao { padding-left: .75rem; padding-right: .75rem; }

    #tela-youtube .grade-yt { gap: 1.5rem; }
    .grade-yt .miniatura-yt { border-radius: 0; }
    .grade-yt .linha-yt { padding: 0 .75rem; }

    .palco-pagina-yt { border-radius: 0; margin-left: 0; margin-right: 0; }
    .palco-pagina-yt .tela-do-video { border-radius: 0; }
}


/* andamento do download, à vista de qualquer tela */
.baixa-andamento {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--altura-player, 72px) + var(--altura-nav, 0px) + .75rem);
    z-index: 90;
    width: min(340px, calc(100vw - 2rem));
    background: var(--elevado);
    border-radius: 10px;
    padding: .625rem .75rem;
    box-shadow: 0 12px 30px rgb(0 0 0 / .5);
    font-size: .8125rem;
}

.baixa-andamento[hidden] { display: none; }
.baixa-andamento span { display: block; margin-bottom: .375rem; }

.baixa-andamento i {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: var(--verde);
    width: 0;
    transition: width .3s;
}

.baixa-andamento .fundo-barra { display: block; height: 4px; border-radius: 2px; background: rgb(255 255 255 / .15); }

/* ---- mini player: só o essencial, como no app de vídeo ----
   Eram seis botões sobre um vídeo de 111 px de altura. Ficam dois: tocar no
   meio e fechar no canto; avançar/voltar e tela cheia vivem no player grande. */
.palco-video #voltar15,
.palco-video #avancar15,
.palco-video #pip-video,
.palco-video #cheia-video { display: none; }

.palco-video .controles-video { justify-content: center; }

.palco-video #tocar-video {
    width: 40px;
    height: 40px;
    font-size: 1rem;
    background: rgb(0 0 0 / .5);
    border-radius: 50%;
}

.palco-video #fechar-video {
    width: 26px;
    height: 26px;
    font-size: .8rem;
}

/* arrastando, o cartão gruda no dedo */
.palco-video.arrastando { transition: none; cursor: grabbing; }
.palco-video { touch-action: none; }

/* ---- janelinha do sistema: só o vídeo e o play, como no PiP do app ---- */
body.modo-janelinha .rodape-cheio {
    background: none;
    padding: 0;
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
}

body.modo-janelinha .rodape-cheio .linha-titulo,
body.modo-janelinha .rodape-cheio .barra-tempo,
body.modo-janelinha #embaralhar-cheio,
body.modo-janelinha #anterior-cheio,
body.modo-janelinha #proxima-cheio,
body.modo-janelinha #letra-cheio,
body.modo-janelinha #baixar-cheio,
body.modo-janelinha #curtir-cheio,
body.modo-janelinha #botao-traduzir { display: none !important; }

body.modo-janelinha .rodape-cheio .botoes {
    display: grid;
    place-items: center;
    gap: 0;
    pointer-events: auto;
}

body.modo-janelinha #tocar-cheio {
    width: 56px;
    height: 56px;
    background: rgb(0 0 0 / .5);
    color: #fff;
}

body.modo-janelinha #tocar-cheio svg { width: 26px; height: 26px; fill: #fff; }


/* No PiP do sistema o Android não repassa o toque para dentro da página: um
   botão desenhado ali nunca responde. Fica só o vídeo, como no app de vídeo —
   play/pause vêm dos controles do próprio sistema (Media Session). */
body.modo-janelinha .rodape-cheio { display: none !important; }


/* ---- topo da seção YouTube fixo, com o vídeo logo abaixo ---- */
#tela-youtube .topo-yt {
    position: sticky;
    top: 0;
    z-index: 8;
    background: var(--fundo);
    padding-top: .5rem;
    padding-bottom: .5rem;
    margin-bottom: 0;
}

.palco-pagina-yt { top: 58px; }

/* 2) os controles ficam no meio do vídeo: antes a linha do tempo empurrava
   o trio de botões para cima do centro */
.controles-pagina-yt { grid-template-rows: 1fr; }

.botoes-pagina-yt {
    position: absolute;
    inset: 0;
    display: grid;
    grid-auto-flow: column;
    place-content: center;
    gap: clamp(.6rem, 5vw, 2.5rem);
}

.rodape-controles-yt {
    position: absolute;
    inset: auto 0 0 0;
}

/* 3) a barra vermelha ganha área de toque: 3 px é fino demais para o dedo */
.progresso-yt {
    height: 3px;
    padding: 10px 0;
    margin-bottom: -10px;
    background: none;
    touch-action: none;
}

.progresso-yt::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 10px;
    height: 3px;
    background: rgb(255 255 255 / .3);
}

.progresso-yt i {
    position: absolute;
    left: 0;
    top: 10px;
    height: 3px;
}

.palco-pagina-yt:has(.controles-pagina-yt.aparecendo) .progresso-yt::before,
.palco-pagina-yt:has(.controles-pagina-yt.aparecendo) .progresso-yt i { height: 5px; }
.progresso-yt b { top: 12px; }
.progresso-yt.pegando b, .palco-pagina-yt:has(.aparecendo) .progresso-yt b { opacity: 1; }


/* vídeo baixado tocando no card da lista, no lugar da capa */
.palco-entidade {
    position: relative;
    width: 232px;
    max-width: 40vw;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    flex: none;
    align-self: flex-end;
}

.palco-entidade[hidden] { display: none; }
.palco-entidade video { width: 100%; height: 100%; object-fit: contain; background: #000; }

@media (max-width: 860px) {
    .palco-entidade { width: 100%; max-width: none; align-self: center; }
}


/* interruptor de reprodução automática, no topo do "A seguir" */
.linha-a-seguir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.25rem 0 .5rem;
    padding: 0 .75rem;
}

.interruptor-yt {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 0;
    background: none;
    color: var(--texto-suave);
    font-size: .75rem;
    cursor: pointer;
    padding: 0;
}

.trilho-interruptor {
    width: 34px;
    height: 18px;
    border-radius: 999px;
    background: #4d4d4d;
    position: relative;
    transition: background .18s;
    flex: none;
}

.trilho-interruptor i {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: transform .18s;
}

.interruptor-yt[aria-checked="true"] .trilho-interruptor { background: var(--verde); }
.interruptor-yt[aria-checked="true"] .trilho-interruptor i { transform: translateX(16px); }
.interruptor-yt[aria-checked="true"] { color: var(--texto); }

@media (min-width: 701px) { .linha-a-seguir { padding: 0; } }

/* A barra de ações da lista (tocar, baixar, ordenar, alternar visão) tinha
   largura de sobra até a barra de rolagem aparecer e comer 12 px — aí o
   "Recentes/Cartões" passava da borda. Agora ela quebra em vez de vazar. */
.barra-acoes { flex-wrap: wrap; row-gap: .75rem; }
.acoes-direita { flex-wrap: wrap; justify-content: flex-end; row-gap: .5rem; min-width: 0; }

@media (max-width: 520px) {
    .barra-acoes { gap: 1rem; padding: 1.25rem 1rem; }
    .acoes-direita { gap: .625rem; }
    .acoes-direita .botao-texto { font-size: .8125rem; }
}

/* ======================================================================
   Aba YouTube no desenho do Nexora
   ----------------------------------------------------------------------
   Os tokens abaixo são os mesmos de /root/nexora/src/app/globals.css, na
   ordem de lá: superfícies, texto, marca (violeta com secundária ciano),
   estados e elevação. Ficam presos a #tela-youtube para não vazarem no
   resto do Ondas, que é escuro por desenho.

   O Ondas é um app escuro, então o padrão aqui é o tema ESCURO do Nexora;
   `.claro` traz o tema claro dele, pelo botão do topo.
   ====================================================================== */

#tela-youtube.nx {
    --nx-bg: oklch(16.5% 0.014 285);
    --nx-bg-elevated: oklch(19.5% 0.016 285);
    --nx-surface: oklch(20.5% 0.016 285);
    --nx-surface-2: oklch(24% 0.018 285);
    --nx-surface-3: oklch(28% 0.02 285);
    --nx-border: oklch(28.5% 0.018 285);
    --nx-border-strong: oklch(36% 0.02 285);

    --nx-text: oklch(96% 0.006 285);
    --nx-text-muted: oklch(78% 0.016 285);
    --nx-text-subtle: oklch(70% 0.016 285);
    --nx-text-inverse: oklch(18% 0.02 285);

    --nx-brand: oklch(58% 0.205 287);
    --nx-brand-hover: oklch(64% 0.195 287);
    --nx-brand-soft: oklch(30% 0.075 287);
    --nx-brand-border: oklch(40% 0.11 287);
    --nx-brand-text: oklch(80% 0.13 287);
    --nx-accent: oklch(78% 0.12 205);

    --nx-live: oklch(65% 0.21 20);
    --nx-danger: oklch(65% 0.19 25);
    --nx-danger-soft: oklch(28% 0.07 25);

    --nx-shadow-sm: 0 2px 8px oklch(0% 0 0 / .45);
    --nx-shadow-md: 0 10px 30px oklch(0% 0 0 / .5);
    --nx-glass: oklch(22% 0.018 285 / .78);

    --nx-raio-xs: .375rem;
    --nx-raio-sm: .625rem;
    --nx-raio-md: .875rem;
    --nx-raio-lg: 1.125rem;
    --nx-raio-xl: 1.5rem;
    --nx-saida: cubic-bezier(.22, 1, .36, 1);
    --nx-topo-altura: 60px;

    background: var(--nx-bg);
    color: var(--nx-text);
    padding-bottom: 2.5rem;
}

#tela-youtube.nx.claro {
    --nx-bg: oklch(98.4% 0.004 285);
    --nx-bg-elevated: oklch(100% 0 0);
    --nx-surface: oklch(100% 0 0);
    --nx-surface-2: oklch(96.4% 0.005 285);
    --nx-surface-3: oklch(93.6% 0.008 285);
    --nx-border: oklch(90.5% 0.008 285);
    --nx-border-strong: oklch(84% 0.012 285);

    --nx-text: oklch(21% 0.02 285);
    --nx-text-muted: oklch(46% 0.02 285);
    --nx-text-subtle: oklch(52% 0.017 285);
    --nx-text-inverse: oklch(99% 0 0);

    --nx-brand: oklch(55% 0.222 287);
    --nx-brand-hover: oklch(50% 0.222 287);
    --nx-brand-soft: oklch(95% 0.03 287);
    --nx-brand-border: oklch(86% 0.07 287);
    --nx-brand-text: oklch(48% 0.2 287);

    --nx-live: oklch(58% 0.22 20);
    --nx-danger: oklch(56% 0.2 25);
    --nx-danger-soft: oklch(96% 0.02 25);

    --nx-shadow-sm: 0 2px 6px oklch(20% 0.02 285 / .07);
    --nx-shadow-md: 0 8px 24px oklch(20% 0.02 285 / .1);
    --nx-glass: oklch(100% 0 0 / .78);
}

/* O #rolagem pinta um gradiente com a cor da capa que está tocando — dentro da
   aba isso vazava por trás do topo translúcido e deixava uma faixa esverdeada
   que não existe no Nexora. Um pseudo-elemento com z-index negativo NÃO cobre
   (a seção cria contexto de empilhamento próprio); quem resolve é trocar o
   fundo do próprio #rolagem enquanto a aba está aberta. */
body.na-aba-youtube #rolagem {
    background: oklch(16.5% 0.014 285);
}
/* a barra do topo do app também é pintada com a cor da capa (inclusive no
   celular, onde ela é um gradiente): dentro da aba ela fica transparente e
   deixa o fundo do Nexora aparecer */
body.na-aba-youtube .barra-palco,
body.na-aba-youtube .barra-palco.fixada { display: none !important; }
body.na-aba-youtube.tema-claro-yt #rolagem {
    background: oklch(98.4% 0.004 285);
}

#tela-youtube.nx :focus-visible {
    outline: 2px solid var(--nx-brand);
    outline-offset: 2px;
    border-radius: 4px;
}

:where(#tela-youtube.nx) button { font: inherit; color: inherit; }
/* `:where` zera a especificidade: sem isso o seletor com id venceria toda regra
   de classe abaixo e os botões de marca ficariam com a cor herdada. */
#tela-youtube.nx h1, #tela-youtube.nx h2, #tela-youtube.nx h3 { letter-spacing: -.01em; }
#tela-youtube.nx svg { width: 1.125rem; height: 1.125rem; flex: none; }

/* ---------------------------------------------------------------- topo */

.nx-topo {
    position: sticky;
    top: 0;
    z-index: 9;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem 0;
    background: var(--nx-glass);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-bottom: 1px solid var(--nx-border);
    margin-bottom: 1rem;
}

.nx-marca {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    font-weight: 700;
    letter-spacing: -.02em;
}
.nx-marca i {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9px;
    align-self: center;
    background: linear-gradient(135deg, var(--nx-brand), var(--nx-accent));
    box-shadow: var(--nx-shadow-sm);
}
.nx-marca b { font-size: 1.0625rem; }
.nx-marca em {
    font-style: normal;
    font-size: .6875rem;
    font-weight: 500;
    color: var(--nx-text-subtle);
}

.nx-campo {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .6rem;
    height: 42px;
    padding: 0 1rem;
    min-width: 0;
    max-width: 34rem;
    border-radius: 999px;
    background: var(--nx-surface-2);
    border: 1px solid var(--nx-border);
    transition: border-color .16s var(--nx-saida), background .16s var(--nx-saida);
}
.nx-campo:focus-within { border-color: var(--nx-brand-border); background: var(--nx-surface); }
.nx-campo svg { fill: var(--nx-text-subtle); }
/* O input precisa ocupar TODA a altura do campo. Com a altura natural (~20 px)
   dentro de um campo de 42, o dedo acerta a borda do <form> — que não foca
   nada — e a busca parece morta. Foi exatamente o que aconteceu no celular.
   O <label> antigo focava por associação; o <form> não faz isso. */
.nx-campo input {
    flex: 1;
    min-width: 0;
    align-self: stretch;
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--nx-text);
    font-size: .9375rem;
    outline: none;
}

/* área de toque confortável: o campo inteiro é o alvo */
.nx-campo { cursor: text; }
.nx-campo svg { pointer-events: none; }
.nx-campo input::placeholder { color: var(--nx-text-subtle); }
.nx-campo input::-webkit-search-cancel-button { -webkit-appearance: none; }

.nx-limpar, .nx-icone {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--nx-text-muted);
    cursor: pointer;
    transition: background .16s var(--nx-saida), color .16s var(--nx-saida);
}
.nx-limpar { width: 1.75rem; height: 1.75rem; }
.nx-limpar:hover, .nx-icone:hover { background: var(--nx-surface-3); color: var(--nx-text); }
.nx-icone:disabled { opacity: .35; cursor: default; }
.nx-limpar svg, .nx-icone svg { stroke: currentColor; fill: none; }

/* --------------------------------------------------------------- chips */

.nx-chips {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    scrollbar-width: none;
}
.nx-chips::-webkit-scrollbar { display: none; }

.nx-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 2rem;
    padding: 0 .875rem;
    border: 0;
    border-radius: 999px;
    background: var(--nx-surface-2);
    color: var(--nx-text);
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background .16s var(--nx-saida);
}
.nx-chip:hover { background: var(--nx-surface-3); }
.nx-chip svg { width: 1rem; height: 1rem; stroke: currentColor; fill: none; }
.nx-chip.nav svg { fill: currentColor; stroke: none; }
.nx-chip.nav.ativo, .nx-chip.ativo {
    background: var(--nx-text);
    color: var(--nx-text-inverse);
}
.nx-separador {
    flex: none;
    width: 1px;
    margin: .25rem .25rem;
    background: var(--nx-border);
}

/* -------------------------------------------------------------- blocos */

.nx-pilha { display: flex; flex-direction: column; gap: 2.5rem; }

.nx-titulo-pagina h1 { margin: 0; font-size: 1.5rem; font-weight: 600; }
.nx-titulo-pagina h1 em { font-style: normal; color: var(--nx-brand-text); }
.nx-titulo-pagina p { margin: .35rem 0 0; font-size: .875rem; color: var(--nx-text-muted); }

.nx-secao { display: flex; flex-direction: column; gap: .875rem; }
.nx-secao > h2, .nx-cabecalho h2 {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}
.nx-cabecalho h2 svg { stroke: currentColor; fill: none; color: var(--nx-brand-text); }
.nx-secao > h2 svg { stroke: currentColor; fill: none; color: var(--nx-brand-text); }
.nx-cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.nx-cabecalho p { margin: .2rem 0 0; font-size: .875rem; color: var(--nx-text-muted); }
.nx-setas { display: flex; align-items: center; gap: .25rem; flex: none; }

.nx-subtitulo {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--nx-text-muted);
}
.nx-subtitulo svg { stroke: currentColor; fill: none; }

.nx-nota { margin: .75rem 0 0; font-size: .8125rem; color: var(--nx-text-subtle); }
.nx-fim { display: grid; place-items: center; padding: 1rem 0; min-height: 2rem; }

/* -------------------------------------------------------------- botões */

.nx-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    height: 2.25rem;
    padding: 0 1rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--nx-surface-2);
    color: var(--nx-text);
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background .16s var(--nx-saida), border-color .16s var(--nx-saida);
}
.nx-botao svg { width: 1.0625rem; height: 1.0625rem; stroke: currentColor; fill: none; }
.nx-botao.brand { background: var(--nx-brand); color: #fff; }
.nx-botao.brand:hover { background: var(--nx-brand-hover); }
.nx-botao.secundario:hover { background: var(--nx-surface-3); }
.nx-botao.contorno { background: transparent; border-color: var(--nx-border-strong); }
.nx-botao.contorno:hover { background: var(--nx-surface-2); }
.nx-botao.marcado { color: var(--nx-brand-text); }
.nx-botao.marcado svg { fill: var(--nx-brand-text); stroke: var(--nx-brand-text); }

.nx-link {
    border: 0;
    background: none;
    color: var(--nx-brand-text);
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.nx-link:hover { text-decoration: underline; }
.nx-link svg { width: 1rem; height: 1rem; stroke: currentColor; fill: none; }
.nx-link.limpar { color: var(--nx-text-muted); margin-left: auto; }

/* ------------------------------------------------------------ avatares */

.nx-avatar {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
    border-radius: 999px;
    overflow: hidden;
    background: var(--nx-surface-3);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.nx-avatar.grande { width: 3.5rem; height: 3.5rem; font-size: 1rem; }
.nx-avatar img { width: 100%; height: 100%; object-fit: cover; }

.nx-verificado {
    width: .9rem !important;
    height: .9rem !important;
    stroke: currentColor;
    fill: none;
    color: var(--nx-text-subtle);
    vertical-align: -1px;
    margin-left: .2rem;
}

/* -------------------------------------------------------------- cartão */

.nx-grade {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem 1rem;
}
@media (min-width: 26rem) { .nx-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .nx-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 96rem) { .nx-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 112rem) { .nx-grade { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.nx-cartao { display: block; min-width: 0; }

.nx-abrir {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.nx-miniatura {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    border-radius: var(--nx-raio-sm);
    background: var(--nx-surface-2);
}
.nx-miniatura.vertical { aspect-ratio: 9 / 16; }
.nx-miniatura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s var(--nx-saida);
}
.nx-cartao:hover .nx-miniatura img { transform: scale(1.03); }

.nx-selo {
    position: absolute;
    right: .375rem;
    bottom: .375rem;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .35rem;
    border-radius: var(--nx-raio-xs);
    font-size: .6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}
.nx-selo.escuro { background: rgb(0 0 0 / .8); color: #fff; }
.nx-selo.marca { background: var(--nx-brand); color: #fff; }
.nx-selo.topo { top: .375rem; bottom: auto; left: .375rem; right: auto; }
.nx-selo.ao-vivo { background: var(--nx-live); color: #fff; }
.nx-selo.ao-vivo i {
    width: .4rem;
    height: .4rem;
    border-radius: 999px;
    background: #fff;
    animation: nx-pulsar 1.8s ease-in-out infinite;
}
@keyframes nx-pulsar { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.86); } }

.nx-rodape { display: flex; gap: .75rem; margin-top: .75rem; }
.nx-ir-canal { border: 0; background: none; padding: 0; margin-top: .1rem; cursor: pointer; }

.nx-info { min-width: 0; flex: 1; }
.nx-info h3 {
    margin: 0;
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: left;
}
.nx-canal, .nx-legenda {
    margin: .25rem 0 0;
    font-size: .8125rem;
    color: var(--nx-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}
.nx-legenda { margin-top: .1rem; color: var(--nx-text-subtle); }

.nx-mais {
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--nx-text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity .16s var(--nx-saida), background .16s var(--nx-saida);
}
.nx-cartao:hover .nx-mais, .nx-mais:focus-visible { opacity: 1; }
.nx-mais:hover { background: var(--nx-surface-3); }
.nx-mais svg { width: 1rem; height: 1rem; }

.nx-cartao.tocando .nx-miniatura { outline: 2px solid var(--nx-brand); outline-offset: 2px; }

/* cartão compacto — o da lateral "A seguir" e o dos comentários */
.nx-cartao.compacto { display: flex; gap: .625rem; align-items: flex-start; }
.nx-cartao.compacto .nx-abrir { width: 10rem; flex: none; }
.nx-cartao.compacto .nx-info h3 { font-size: .8125rem; }
.nx-cartao.compacto .nx-canal, .nx-cartao.compacto .nx-legenda { font-size: .75rem; }
.nx-compactos { display: flex; flex-direction: column; gap: .75rem; }

/* ------------------------------------------------------------- trilhos */

.nx-rolagem {
    display: block;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: .25rem;
}
.nx-rolagem::-webkit-scrollbar { display: none; }
.nx-trilho-itens { display: flex; gap: 1rem; }
.nx-trilho-item { flex: none; width: 280px; scroll-snap-align: start; }
.nx-trilho-item.estreito { width: 172px; }
@media (min-width: 40rem) {
    .nx-trilho-item { width: 300px; }
    .nx-trilho-item.estreito { width: 196px; }
}

/* ---------------------------------------------------------- esqueletos */

.nx-brilho {
    display: block;
    border-radius: var(--nx-raio-xs);
    background-image: linear-gradient(90deg, var(--nx-surface-2) 0%, var(--nx-surface-3) 50%, var(--nx-surface-2) 100%);
    background-size: 200% 100%;
    animation: nx-cintilar 1.6s linear infinite;
}
@keyframes nx-cintilar { from { background-position: -200% 0; } to { background-position: 200% 0; } }

.nx-esq-cartao { display: block; }
.nx-esq-rodape { display: flex; gap: .75rem; margin-top: .75rem; }
.nx-esq-rodape b { width: 2.25rem; height: 2.25rem; border-radius: 999px; flex: none; display: block;
    background-image: linear-gradient(90deg, var(--nx-surface-2) 0%, var(--nx-surface-3) 50%, var(--nx-surface-2) 100%);
    background-size: 200% 100%; animation: nx-cintilar 1.6s linear infinite; }
.nx-linhas { flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.nx-linhas i { display: block; height: .875rem; border-radius: 4px;
    background-image: linear-gradient(90deg, var(--nx-surface-2) 0%, var(--nx-surface-3) 50%, var(--nx-surface-2) 100%);
    background-size: 200% 100%; animation: nx-cintilar 1.6s linear infinite; }
.nx-linhas i.media { width: 55%; }
.nx-linhas i.curta { width: 35%; }
.nx-esq-cartao.compacto { display: flex; gap: .625rem; }

.nx-girando {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    border: 2px solid var(--nx-border-strong);
    border-top-color: var(--nx-brand);
    animation: nx-girar .7s linear infinite;
    display: inline-block;
}
@keyframes nx-girar { to { transform: rotate(360deg); } }

/* ----------------------------------------------------- vazio e erro */

.nx-estado {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: 3rem 1.5rem;
    text-align: center;
}
.nx-bolha {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: .75rem;
    border-radius: 999px;
    background: var(--nx-brand-soft);
    color: var(--nx-brand-text);
}
.nx-bolha svg { width: 1.75rem; height: 1.75rem; stroke: currentColor; fill: none; }
.nx-bolha.perigo { background: var(--nx-danger-soft); color: var(--nx-danger); }
.nx-estado h2 { margin: 0; font-size: 1.125rem; font-weight: 600; }
.nx-estado p { margin: 0; max-width: 28rem; font-size: .875rem; color: var(--nx-text-muted); }
.nx-estado .nx-botao { margin-top: 1rem; }
/* dentro de uma trilha o vazio não pode ocupar meia tela */
.nx-secao > .nx-estado, .nx-trilho .nx-estado { padding: 2rem 1rem; }

/* ------------------------------------------------------------ filtros */

.nx-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.5rem;
    padding: .75rem 0;
    border-top: 1px solid var(--nx-border);
    border-bottom: 1px solid var(--nx-border);
}
.nx-filtros-rotulo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--nx-text-muted);
}
.nx-filtros-rotulo svg { width: 1rem; height: 1rem; stroke: currentColor; fill: none; }
.nx-grupo-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.nx-grupo-filtro > span { font-size: .75rem; color: var(--nx-text-subtle); }
.nx-filtro {
    border: 0;
    border-radius: 999px;
    padding: .25rem .625rem;
    background: var(--nx-surface-2);
    color: var(--nx-text-muted);
    font-size: .75rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .16s var(--nx-saida);
}
.nx-filtro:hover { background: var(--nx-surface-3); }
.nx-filtro.ativo { background: var(--nx-brand); color: #fff; }

/* ------------------------------------------------ categorias e canais */

.nx-categorias {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}
@media (min-width: 40rem) { .nx-categorias { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .nx-categorias { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 96rem) { .nx-categorias { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.nx-categorias button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-raio-sm);
    background: var(--nx-surface);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background .16s var(--nx-saida), border-color .16s var(--nx-saida);
}
.nx-categorias button:hover { border-color: var(--nx-brand-border); background: var(--nx-brand-soft); }
.nx-emoji { font-size: 1.5rem; line-height: 1; }

.nx-canais {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}
@media (min-width: 64rem) { .nx-canais { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nx-canais button {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1.25rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-raio-sm);
    background: var(--nx-surface);
    text-align: center;
    cursor: pointer;
    transition: border-color .16s var(--nx-saida);
}
.nx-canais button:hover { border-color: var(--nx-brand-border); }
.nx-canais strong { font-size: .9375rem; font-weight: 500; }
.nx-canais small { font-size: .75rem; color: var(--nx-text-muted); }
.nx-canais span {
    font-size: .75rem;
    color: var(--nx-text-subtle);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nx-canais-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.nx-canais-lista li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-raio-sm);
}
.nx-canais-lista div { min-width: 0; flex: 1; }
.nx-canais-lista strong { display: block; font-size: .9375rem; font-weight: 500; }
.nx-canais-lista p { margin: .1rem 0 0; font-size: .875rem; color: var(--nx-text-muted); }
.nx-canais-lista span {
    display: block;
    margin-top: .1rem;
    font-size: .8125rem;
    color: var(--nx-text-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -------------------------------------------------------- página do canal */

.nx-capa-canal {
    width: 100%;
    aspect-ratio: 6 / 1;
    object-fit: cover;
    border-radius: var(--nx-raio-xl);
    display: block;
}
.nx-capa-canal.vazia { background: linear-gradient(90deg, var(--nx-brand-soft), var(--nx-surface-2)); }

.nx-cabecalho-canal { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.nx-cabecalho-canal .nx-avatar.grande { width: 6rem; height: 6rem; font-size: 1.5rem; }
.nx-info-canal { min-width: 0; flex: 1; }
.nx-info-canal h1 { margin: 0; font-size: 1.5rem; font-weight: 600; }
.nx-info-canal p { margin: .25rem 0 0; font-size: .875rem; color: var(--nx-text-muted); }
.nx-info-canal .nx-bio {
    max-width: 42rem;
    color: var(--nx-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nx-acoes-canal { display: flex; gap: .5rem; flex: none; }

.nx-abas {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--nx-border);
    scrollbar-width: none;
}
.nx-abas::-webkit-scrollbar { display: none; }
.nx-abas button {
    flex: none;
    position: relative;
    padding: .75rem 1rem;
    border: 0;
    background: none;
    color: var(--nx-text-muted);
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
}
.nx-abas button:hover { color: var(--nx-text); }
.nx-abas button.ativo { color: var(--nx-text); }
.nx-abas button.ativo::after {
    content: '';
    position: absolute;
    left: .75rem;
    right: .75rem;
    bottom: -1px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.nx-sobre ul { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.5rem; }
.nx-sobre li { display: flex; flex-direction: column; }
.nx-sobre li b { font-size: 1.125rem; }
.nx-sobre li small { color: var(--nx-text-muted); font-size: .8125rem; }
.nx-sobre .nx-botao { align-self: flex-start; margin-top: 1rem; text-decoration: none; }

.nx-playlists { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40rem) { .nx-playlists { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .nx-playlists { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nx-playlists strong { display: block; margin-top: .5rem; font-size: .875rem; font-weight: 500; }

/* ------------------------------------------------------ página de assistir */

.nx-assistir {
    display: grid;
    gap: 1.5rem;
    align-items: start;
}
@media (min-width: 80rem) {
    .nx-assistir { grid-template-columns: minmax(0, 1fr) 400px; }
}
#tela-youtube.foco .nx-assistir { grid-template-columns: minmax(0, 1fr); max-width: 64rem; margin-inline: auto; }
#tela-youtube.foco .nx-lateral,
#tela-youtube.foco .nx-comentarios { display: none; }

.nx-coluna { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }

.nx-titulo-video { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
@media (min-width: 40rem) { .nx-titulo-video { font-size: 1.5rem; } }

.nx-linha-canal { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.nx-nome-canal { display: flex; flex-direction: column; min-width: 0; }
.nx-nome-canal strong { font-size: .9375rem; font-weight: 500; }
.nx-nome-canal small { font-size: .75rem; color: var(--nx-text-muted); }

.nx-acoes { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-left: auto; }
/* sem `flex: none` o par curtir/não-gostei encolhe a zero quando a fila rola
   de lado no celular — o span não tem largura mínima própria */
.nx-acoes > * { flex: none; }
.nx-par {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border-radius: 999px;
    background: var(--nx-surface-2);
}
.nx-pilula {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 2.25rem;
    padding: 0 .875rem;
    border: 0;
    background: transparent;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .16s var(--nx-saida);
}
.nx-pilula:hover { background: var(--nx-surface-3); }
.nx-pilula svg { width: 1.0625rem; height: 1.0625rem; stroke: currentColor; fill: none; }
.nx-pilula[aria-pressed="true"] { color: var(--nx-brand-text); }
.nx-pilula[aria-pressed="true"] svg { fill: currentColor; }
#descurtir-yt[aria-pressed="true"] { color: var(--nx-danger); }
.nx-divisor { width: 1px; height: 1.25rem; background: var(--nx-border-strong); }

/* --------------------------------------------------------- descrição */

.nx-descricao {
    padding: 1rem;
    border-radius: var(--nx-raio-sm);
    background: var(--nx-surface-2);
    font-size: .875rem;
}
.nx-dados { margin: 0; font-weight: 500; }
.nx-texto-descricao {
    margin-top: .5rem;
    line-height: 1.6;
    color: var(--nx-text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.nx-descricao.aberta .nx-texto-descricao { display: block; -webkit-line-clamp: none; overflow: visible; }
.nx-tempo, .nx-capitulo {
    border: 0;
    background: none;
    color: var(--nx-brand-text);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
}
.nx-tempo:hover { text-decoration: underline; }

.nx-capitulos { margin-top: 1.25rem; }
.nx-capitulos h3 { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .875rem; font-weight: 600; }
.nx-capitulos h3 svg { stroke: currentColor; fill: none; }
.nx-capitulos ol { list-style: none; margin: .5rem 0 0; padding: 0; }
.nx-capitulo {
    display: flex;
    width: 100%;
    align-items: center;
    gap: .75rem;
    padding: .375rem .5rem;
    border-radius: var(--nx-raio-xs);
    color: var(--nx-text);
    text-align: left;
    transition: background .16s var(--nx-saida);
}
.nx-capitulo:hover { background: var(--nx-surface-3); }
.nx-capitulo span {
    width: 3.5rem;
    flex: none;
    font-variant-numeric: tabular-nums;
    font-size: .75rem;
    color: var(--nx-brand-text);
}

.nx-mostrar-mais {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .75rem;
    border: 0;
    background: none;
    color: var(--nx-text-muted);
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
}
.nx-mostrar-mais:hover { color: var(--nx-text); }
.nx-mostrar-mais svg { width: .9rem; height: .9rem; }

/* ------------------------------------------------------- comentários */

.nx-comentarios { display: flex; flex-direction: column; gap: 1rem; }
.nx-lista-comentarios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.nx-comentario { display: flex; gap: .75rem; }
.nx-comentario > div { min-width: 0; flex: 1; }
.nx-autor { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .8125rem; flex-wrap: wrap; }
.nx-autor strong { font-weight: 600; }
.nx-autor small { color: var(--nx-text-subtle); }
.nx-etiqueta {
    padding: .05rem .4rem;
    border-radius: 999px;
    background: var(--nx-brand-soft);
    color: var(--nx-brand-text);
    font-size: .6875rem;
    font-weight: 600;
}
.nx-texto-comentario { margin: .25rem 0 0; font-size: .875rem; line-height: 1.55; overflow-wrap: anywhere; }
.nx-curtidas-comentario {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: .375rem 0 0;
    font-size: .75rem;
    color: var(--nx-text-muted);
}
.nx-curtidas-comentario svg { width: .9rem; height: .9rem; stroke: currentColor; fill: none; }
.nx-respostas { margin-top: .5rem; }
.nx-respostas summary {
    cursor: pointer;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--nx-brand-text);
}
.nx-respostas ul { list-style: none; margin: .75rem 0 0; padding: 0 0 0 .5rem; display: flex; flex-direction: column; gap: 1rem; }

/* ----------------------------------------------------------- lateral */

.nx-lateral { min-width: 0; display: flex; flex-direction: column; gap: .75rem; }
.nx-linha-a-seguir { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nx-linha-a-seguir h2 {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--nx-text-muted);
}
.nx-linha-a-seguir h2 svg { stroke: currentColor; fill: none; }

.nx-interruptor {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 0;
    background: none;
    color: var(--nx-text-muted);
    font-size: .75rem;
    cursor: pointer;
}
.nx-trilho-interruptor, .nx-interruptor .nx-trilho {
    width: 2.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background: var(--nx-surface-3);
    position: relative;
    transition: background .16s var(--nx-saida);
    display: block;
}
.nx-interruptor .nx-trilho i {
    position: absolute;
    top: .1875rem;
    left: .1875rem;
    width: .875rem;
    height: .875rem;
    border-radius: 999px;
    background: var(--nx-text-muted);
    transition: transform .16s var(--nx-saida), background .16s var(--nx-saida);
}
.nx-interruptor[aria-checked="true"] .nx-trilho { background: var(--nx-brand); }
.nx-interruptor[aria-checked="true"] .nx-trilho i { transform: translateX(1rem); background: #fff; }

/* -------------------------------------------------------------- menu */

.nx-menu {
    position: fixed;
    z-index: 60;
    min-width: 14rem;
    padding: .375rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-raio-md);
    background: var(--nx-bg-elevated, #1b1b20);
    box-shadow: var(--nx-shadow-md, 0 10px 30px rgb(0 0 0 / .5));
    color: var(--nx-text, #eee);
    animation: nx-surgir .16s var(--nx-saida);
}
@keyframes nx-surgir { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.nx-menu button {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    padding: .5rem .625rem;
    border: 0;
    border-radius: var(--nx-raio-xs);
    background: none;
    color: inherit;
    font-size: .875rem;
    text-align: left;
    cursor: pointer;
}
.nx-menu button:hover { background: var(--nx-surface-2, #2a2a31); }
.nx-menu svg { width: 1rem; height: 1rem; flex: none; }

/* o menu nasce fora de #tela-youtube, então carrega os tokens escuros por padrão */
.nx-menu {
    --nx-border: oklch(28.5% 0.018 285);
    --nx-bg-elevated: oklch(19.5% 0.016 285);
    --nx-surface-2: oklch(24% 0.018 285);
    --nx-text: oklch(96% 0.006 285);
    --nx-raio-md: .875rem;
    --nx-raio-xs: .375rem;
    --nx-saida: cubic-bezier(.22, 1, .36, 1);
    --nx-shadow-md: 0 10px 30px oklch(0% 0 0 / .5);
}

/* ------------------------------------------------------------- palco */
/* O palco do vídeo é o mesmo de antes (ele resolve PiP, tela cheia e o som em
   segundo plano); só ganha o arredondado e a folga do Nexora. */

/* No desktop o vídeo fica no fluxo, como na página do Nexora: grudado no topo
   ele passava por cima dos comentários. No celular ele continua fixo — lá isso
   é o que segura o vídeo à vista enquanto se lê a lista. */
#tela-youtube .palco-pagina-yt {
    position: static;
    border-radius: var(--nx-raio-sm);
    margin-bottom: 0;
}
#tela-youtube .tela-do-video { border-radius: var(--nx-raio-sm); }

/* ---- aba YouTube no celular ---------------------------------------------
   Este bloco usa exatamente o cabeçalho que o servidor procura para montar o
   /css/celular.css (ver MARCA_CELULAR em server/index.js): é o que faz o
   layout de celular valer também quando o Chrome do Android está em "versão
   para computador", onde nenhuma media query casa. */
@media (max-width: 860px), (pointer: coarse) and (max-width: 1200px) {
    #tela-youtube.nx { --nx-topo-altura: 56px; }

    #tela-youtube .palco-pagina-yt { position: sticky; top: var(--nx-topo-altura); z-index: 6; }

    /* no celular o topo é só busca e perfil, como no Nexora */
    .nx-marca { display: none; }
    .nx-topo { padding: .5rem 0; gap: .5rem; }

    .nx-pilha { gap: 2rem; }
    .nx-grade { gap: 1.5rem 1rem; }

    /* as setas do trilho são coisa de mouse: no dedo, rola-se de lado */
    .nx-setas .nx-icone { display: none; }

    .nx-cabecalho { align-items: flex-start; }
    .nx-titulo-pagina h1 { font-size: 1.25rem; }

    .nx-cartao.compacto .nx-abrir { width: 9rem; }

    /* a fila de ações do vídeo rola de lado em vez de quebrar em três linhas */
    .nx-acoes {
        margin-left: 0;
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: .25rem;
    }
    .nx-acoes::-webkit-scrollbar { display: none; }
    .nx-linha-canal { row-gap: .75rem; }

    .nx-cabecalho-canal { flex-direction: column; align-items: flex-start; }
    .nx-acoes-canal { width: 100%; }
    .nx-acoes-canal .nx-botao { flex: 1; }
    .nx-capa-canal { border-radius: var(--nx-raio-md); }

    .nx-filtros {
        gap: .5rem .75rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding: .5rem 0;
        -webkit-overflow-scrolling: touch;
    }
    .nx-filtros::-webkit-scrollbar { display: none; }
    .nx-grupo-filtro { flex-wrap: nowrap; flex: none; }
    .nx-link.limpar { margin-left: 0; flex: none; }

    /* o botão "⋯" não tem hover no celular: fica sempre visível */
    .nx-mais { opacity: 1; }

    .nx-menu { min-width: 12rem; }
}

/* ------------------------------------------------------- curtos (Shorts)
   O /curtos do Nexora: um por tela, snap vertical, ações à direita e o autor
   por cima do vídeo. Fica fixo sobre tudo porque curto é experiência de tela
   cheia — no palco 16:9 da página comum ele virava duas tarjas pretas. */

.nx-curtos {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: #000;
}

/* A rolagem precisa de altura FIXA, não de `height: 100%` dentro de um grid de
   linha automática: ali a linha crescia com o conteúdo, o 100% virava circular
   e apareciam dois curtos na mesma tela. `inset: 0` resolve isso de vez. */
.nx-curtos-rolagem {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    overscroll-behavior: contain;
    scrollbar-width: none;
}
.nx-curtos-rolagem::-webkit-scrollbar { display: none; }

.nx-curto {
    height: 100%;
    min-height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: grid;
    place-items: center;
    padding: 0;
}

.nx-curto-moldura {
    position: relative;
    height: 100%;
    width: 100%;
    max-width: min(100%, calc(100dvh * 9 / 16));
    background: #000;
    overflow: hidden;
}
@media (min-width: 40rem) {
    .nx-curto { padding: .75rem 0; }
    .nx-curto-moldura { border-radius: var(--nx-raio-xl, 1.5rem); }
}

/* A capa e o <video> ficam EMPILHADOS, não em duas linhas de grade: com
   `display: grid` o vídeo entrava embaixo da imagem e ocupava metade da tela —
   era o "short não abre igual short". A capa serve de poster por baixo. */
.nx-curto-tela { position: absolute; inset: 0; }
.nx-curto-tela img,
.nx-curto-tela video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.nx-curto-tela img { z-index: 0; }
.nx-curto-tela video { z-index: 1; background: #000; }

.nx-curto-progresso {
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: rgb(255 255 255 / .2);
    z-index: 3;
}
.nx-curto-progresso i { display: block; height: 100%; width: 0; background: #fff; transition: width .2s linear; }

.nx-curto-som {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 999px;
    background: rgb(0 0 0 / .5);
    color: #fff;
    cursor: pointer;
}
.nx-curto-som svg { width: 1.125rem; height: 1.125rem; fill: currentColor; }

/* texto por cima do vídeo, com o degradê que garante leitura em qualquer capa */
.nx-curto-rodape {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 3;
    padding: 3rem 4.5rem 1.5rem 1rem;
    color: #fff;
    background: linear-gradient(to top, rgb(0 0 0 / .85), rgb(0 0 0 / .4) 45%, transparent);
}
.nx-curto-autor { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.nx-curto-autor > button:first-child {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 0;
    background: none;
    color: #fff;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    min-width: 0;
}
.nx-curto-autor .nx-avatar { width: 2rem; height: 2rem; }
.nx-curto-seguir {
    border: 0;
    border-radius: 999px;
    padding: .25rem .75rem;
    background: #fff;
    color: #000;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
}
.nx-curto-seguir.seguindo { background: rgb(255 255 255 / .22); color: #fff; }
.nx-curto-rodape h2 {
    margin: .5rem 0 0;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nx-curto-rodape p { margin: .25rem 0 0; font-size: .75rem; color: rgb(255 255 255 / .7); }

.nx-curto-acoes {
    position: absolute;
    right: .5rem;
    bottom: 6rem;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.nx-curto-acoes button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    width: 3.25rem;
    border: 0;
    background: none;
    color: #fff;
    font-size: .625rem;
    cursor: pointer;
}
.nx-curto-acoes svg {
    width: 1.5rem;
    height: 1.5rem;
    stroke: currentColor;
    fill: none;
    filter: drop-shadow(0 1px 3px rgb(0 0 0 / .6));
}
.nx-curto-acoes button.ativo { color: var(--nx-brand-text, #b9a6ff); }
.nx-curto-acoes button.ativo svg { fill: currentColor; }
.nx-curto-acoes span { text-shadow: 0 1px 3px rgb(0 0 0 / .6); }

.nx-fechar-curtos {
    position: absolute;
    top: .75rem;
    left: .75rem;
    z-index: 6;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 999px;
    background: rgb(0 0 0 / .5);
    color: #fff;
    cursor: pointer;
}
.nx-fechar-curtos svg { width: 1.125rem; height: 1.125rem; stroke: currentColor; fill: none; }

/* setas: coisa de mouse, como no Nexora */
.nx-curtos-setas {
    position: absolute;
    top: 50%;
    right: 1.5rem;
    transform: translateY(-50%);
    z-index: 5;
    display: none;
    flex-direction: column;
    gap: .5rem;
}
@media (min-width: 64rem) { .nx-curtos-setas { display: flex; } }
.nx-curtos-setas .nx-icone { background: rgb(255 255 255 / .12); color: #fff; }
.nx-curtos-setas .nx-icone:hover { background: rgb(255 255 255 / .22); }
.nx-curtos-setas .nx-icone:disabled { opacity: .3; }

/* folha de comentários, subindo de baixo */
.nx-folha {
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgb(0 0 0 / .5);
    display: grid;
    align-items: end;
}
.nx-folha-caixa {
    background: var(--nx-bg-elevated, #1b1b20);
    color: var(--nx-text, #eee);
    border-radius: 1.5rem 1.5rem 0 0;
    max-height: 80dvh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    animation: nx-subir .22s cubic-bezier(.22, 1, .36, 1);
}
@keyframes nx-subir { from { transform: translateY(100%); } to { transform: translateY(0); } }
.nx-folha-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem .5rem;
}
.nx-folha-topo h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.nx-folha-corpo { overflow-y: auto; padding: 0 1rem 1.5rem; }

/* com o feed aberto, o player de baixo sai de cena: o comando está no curto */
body.nos-curtos .player,
body.nos-curtos .nav-inferior { display: none !important; }

/* ==========================================================================
   Ajustes criticos para busca em celular e APK (prevencao de auto-zoom e outline)
   ========================================================================== */
#entrada-busca,
#busca-youtube,
.busca-topo input,
.nx-campo input {
    font-size: 16px !important;
}

#tela-youtube.nx .nx-campo input,
#tela-youtube.nx .nx-campo input:focus,
#tela-youtube.nx .nx-campo input:focus-visible,
#tela-youtube.nx .nx-campo:focus-within {
    outline: none !important;
    box-shadow: none !important;
}


.form-busca {
    display: contents;
    margin: 0;
    padding: 0;
}

label.busca-topo {
    cursor: text;
    display: flex;
    align-items: center;
}

body:has(#entrada-busca:focus) .nav-inferior,
body:has(#busca-youtube:focus) .nav-inferior,
body:has(input[type="search"]:focus) .nav-inferior {
    display: none !important;
}

body:has(#entrada-busca:focus) .grade-app,
body:has(#busca-youtube:focus) .grade-app,
body:has(input[type="search"]:focus) .grade-app {
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "palco" "player";
}

/* Downloads remain visible without taking over navigation or the player. */
#progresso-downloads{position:fixed;z-index:3000;right:16px;bottom:110px;width:min(440px,calc(100vw - 32px));padding:14px 16px;border-radius:14px;border:1px solid #414141;background:#202020;color:#fff;box-shadow:0 6px 30px #0008;font-size:13px;line-height:1.5}
#progresso-downloads progress{display:block;width:100%;height:7px;margin:9px 0;accent-color:#1ed760}
#progresso-downloads>div{display:flex;flex-wrap:wrap;gap:8px 12px;justify-content:flex-end}
#progresso-downloads button{color:#fff;background:transparent;border:0;cursor:pointer;font:inherit;padding:5px 0}
.em-janela-flutuante #progresso-downloads,.modo-janelinha #progresso-downloads{display:none!important}

/* carregando no palco da página do vídeo (segue os eventos da mídia) */
.palco-pagina-yt.carregando::after {
    content: '';
    position: absolute;
    z-index: 6;
    top: 50%;
    left: 50%;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    border-radius: 50%;
    border: 4px solid rgb(255 255 255 / .25);
    border-top-color: #fff;
    animation: girar-yt .8s linear infinite;
    pointer-events: none;
}
/* enquanto carrega, o botão do meio não finge que está tocando */
.palco-pagina-yt.carregando #yt-tocar { opacity: 0; }

/* ---------------- controles do vídeo no formato do app do YouTube (2026-10) */
.topo-controles-yt {
    position: absolute;
    inset: 0 0 auto 0;
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .35rem .4rem;
    background: linear-gradient(rgb(0 0 0 / .55), transparent);
    z-index: 1;
}
.titulo-controles-yt {
    flex: 1;
    min-width: 0;
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    visibility: hidden;
}
.rodape-controles-yt { background: linear-gradient(transparent, rgb(0 0 0 / .5)); padding-top: 1.2rem; }
.botoes-pagina-yt { gap: clamp(1.8rem, 12vw, 4.5rem); }
.botao-yt.grande { width: 64px; height: 64px; background: rgb(0 0 0 / .35); }
.botao-yt.grande svg { width: 34px; height: 34px; }

/* toque duplo: semicírculo claro do lado tocado com "10 segundos" */
.pulo-yt {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 42%;
    z-index: 4;
    display: grid;
    place-items: center;
    background: rgb(255 255 255 / .14);
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}
.pulo-yt.esquerda { left: 0; border-radius: 0 50% 50% 0 / 0 50% 50% 0; }
.pulo-yt.direita { right: 0; border-radius: 50% 0 0 50% / 50% 0 0 50%; }
.pulo-yt.ativo { opacity: 1; }
.pulo-yt span { display: grid; justify-items: center; gap: .2rem; font-size: .8rem; font-weight: 600; }
.pulo-yt b { font-size: .9rem; letter-spacing: -.2em; }
.pulo-yt em { font-style: normal; }

/* segurar o dedo: 2x enquanto segura */
.rapido-yt {
    position: absolute;
    top: .6rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    padding: .3rem .8rem;
    border-radius: 999px;
    background: rgb(0 0 0 / .6);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
}
.rapido-yt.ativo { opacity: 1; }

/* tela cheia: o palco inteiro (vídeo + nossos controles), fundo preto */
.palco-pagina-yt:fullscreen,
.palco-pagina-yt.cheia-fixa {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    width: 100vw;
    height: 100dvh;
    z-index: 400;
    background: #000;
    display: grid;
    place-items: center;
}
.palco-pagina-yt:fullscreen .tela-do-video,
.palco-pagina-yt.cheia-fixa .tela-do-video { width: 100%; height: 100%; aspect-ratio: auto; display: grid; place-items: center; }
.palco-pagina-yt:fullscreen video,
.palco-pagina-yt.cheia-fixa video { width: 100%; height: 100%; object-fit: contain; }
.palco-pagina-yt:fullscreen .tela-do-video img,
.palco-pagina-yt.cheia-fixa .tela-do-video img { object-fit: contain; width: 100%; height: 100%; }
.palco-pagina-yt:fullscreen .titulo-controles-yt,
.palco-pagina-yt.cheia-fixa .titulo-controles-yt { visibility: visible; }
.palco-pagina-yt:fullscreen #yt-minimizar,
.palco-pagina-yt.cheia-fixa #yt-minimizar { display: none; }
.palco-pagina-yt:fullscreen .progresso-yt,
.palco-pagina-yt.cheia-fixa .progresso-yt { bottom: 1rem !important; left: 1rem !important; right: 1rem !important; }
.palco-pagina-yt:fullscreen .rodape-controles-yt,
.palco-pagina-yt.cheia-fixa .rodape-controles-yt { padding: 1.6rem 1rem 2rem; }
body.yt-cheia-fixa { overflow: hidden; }

/* ======================================================================
   ABA YOUTUBE NO FORMATO DO APP OFICIAL (out/2026) — par de youtube-clone.js
   Paleta, tipografia e medidas do app; o resto do Ondas não muda.
   ====================================================================== */
#tela-youtube.nx {
    --nx-bg: #0f0f0f;
    --nx-bg-elevated: #212121;
    --nx-surface: #272727;
    --nx-surface-2: #3f3f3f;
    --nx-surface-3: #4a4a4a;
    --nx-border: rgb(255 255 255 / .1);
    --nx-border-strong: rgb(255 255 255 / .2);
    --nx-text: #f1f1f1;
    --nx-text-muted: #aaaaaa;
    --nx-text-subtle: #aaaaaa;
    --nx-text-inverse: #0f0f0f;
    --nx-brand: #f1f1f1;
    --nx-brand-hover: #d9d9d9;
    --nx-brand-soft: #272727;
    --nx-brand-border: #3f3f3f;
    --nx-brand-text: #3ea6ff;
    --nx-accent: #3ea6ff;
    --nx-live: #ff0000;
    --nx-raio-sm: .5rem;
    --nx-raio-md: .75rem;
    --nx-raio-lg: .75rem;
    --nx-topo-altura: 48px;
    font-family: Roboto, "Segoe UI", Arial, sans-serif;
}
#tela-youtube.nx.claro {
    --nx-bg: #ffffff;
    --nx-bg-elevated: #ffffff;
    --nx-surface: #f2f2f2;
    --nx-surface-2: #e5e5e5;
    --nx-surface-3: #d9d9d9;
    --nx-border: rgb(0 0 0 / .1);
    --nx-text: #0f0f0f;
    --nx-text-muted: #606060;
    --nx-text-subtle: #606060;
    --nx-text-inverse: #ffffff;
    --nx-brand: #0f0f0f;
    --nx-brand-hover: #272727;
    --nx-brand-soft: #f2f2f2;
    --nx-brand-text: #065fd4;
    --nx-accent: #065fd4;
}
body.na-aba-youtube #rolagem { background: #0f0f0f !important; }
body.na-aba-youtube.tema-claro-yt #rolagem { background: #fff !important; }

/* ---- topo: logo à esquerda, lupa à direita; buscando, "← campo" ---- */
#tela-youtube .nx-topo { height: 48px; padding: 0 .25rem 0 .75rem; gap: .25rem; border: 0; }
#tela-youtube .nx-topo .avatar-usuario,
#tela-youtube .nx-topo .nx-marca,
#tela-youtube .nx-topo #nx-tema { display: none; }
.yt-logo { display: flex; align-items: center; gap: .3rem; flex: 1; min-width: 0; }
.yt-logo img { width: 26px; height: 26px; }
.yt-logo b { font-size: 1.15rem; font-weight: 700; letter-spacing: -.04em; color: var(--nx-text); }
#tela-youtube .nx-topo .nx-campo,
#tela-youtube .nx-topo .yt-voltar-busca { display: none; }
#tela-youtube .nx-topo.buscando .yt-logo,
#tela-youtube .nx-topo.buscando .yt-abrir-busca { display: none; }
#tela-youtube .nx-topo.buscando .yt-voltar-busca { display: grid; }
#tela-youtube .nx-topo.buscando .nx-campo {
    display: flex; flex: 1; height: 36px; border-radius: 18px;
    background: var(--nx-surface); border: 0;
}
#tela-youtube .nx-topo.buscando .nx-campo > svg { display: none; }
#tela-youtube .nx-topo .nx-icone { width: 40px; height: 40px; }
#tela-youtube .nx-topo .nx-icone svg { width: 24px; height: 24px; }

/* ---- chips: retângulo arredondado, ativo branco, texto puro ---- */
#tela-youtube .nx-chips { gap: .5rem; padding: .25rem .75rem .5rem; }
#tela-youtube .nx-chip {
    height: 32px; padding: 0 .75rem; border-radius: 8px; border: 0;
    background: var(--nx-surface); color: var(--nx-text);
    font-size: .875rem; font-weight: 500; white-space: nowrap;
}
#tela-youtube .nx-chip.ativo { background: var(--nx-text); color: var(--nx-bg); }
#tela-youtube .nx-chip.so-icone { width: 44px; padding: 0; justify-content: center; }
#tela-youtube .nx-chip.so-icone svg { width: 20px; height: 20px; margin: 0; }
#tela-youtube .nx-separador { width: 1px; height: 24px; background: var(--nx-border-strong); align-self: center; }

/* ---- cartões do feed: miniatura de ponta a ponta, sem moldura ---- */
#tela-youtube .nx-cartao .nx-miniatura,
#tela-youtube .nx-cartao .nx-miniatura img { border-radius: 0; }
#tela-youtube .nx-cartao h3 { font-size: .9375rem; font-weight: 500; line-height: 1.3; }
#tela-youtube .nx-cartao .nx-canal,
#tela-youtube .nx-cartao .nx-legenda { font-size: .75rem; color: var(--nx-text-muted); }
#tela-youtube .nx-cartao.tocando { outline: 0; box-shadow: none; }
#tela-youtube .nx-selo.escuro { background: rgb(0 0 0 / .8); border-radius: 4px; font-size: .75rem; font-weight: 500; }
#tela-youtube .nx-cabecalho p,
#tela-youtube .nx-secao > p { display: none; }
#tela-youtube .nx-secao h2,
#tela-youtube .nx-cabecalho h2 { font-size: 1.125rem; font-weight: 700; }

/* ---- página do vídeo ---- */
body.yt-assistindo #tela-youtube .nx-topo,
body.yt-assistindo #tela-youtube .nx-chips { display: none !important; }
body.yt-assistindo .palco-pagina-yt { top: 0 !important; }
.palco-pagina-yt { touch-action: none; background: #000; }
#pagina-youtube { transition: transform .18s, opacity .18s; }
#tela-youtube .nx-titulo-video {
    margin: .75rem .75rem .25rem; font-size: 1.125rem; line-height: 1.4rem; font-weight: 600;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.yt-meta { margin: 0 .75rem .75rem; font-size: .75rem; color: var(--nx-text-muted); }
.yt-meta b { color: var(--nx-text); font-weight: 500; margin-left: .25rem; }
#tela-youtube .nx-linha-canal {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
    gap: .75rem; padding: 0 .75rem; margin: 0;
}
#tela-youtube .nx-linha-canal .nx-avatar.grande { width: 36px; height: 36px; font-size: .8rem; }
#tela-youtube .nx-nome-canal { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
#tela-youtube .nx-nome-canal strong { font-size: .9375rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tela-youtube .nx-nome-canal small { font-size: .75rem; color: var(--nx-text-muted); white-space: nowrap; }
#tela-youtube #inscrever-yt {
    height: 36px; padding: 0 1rem; border-radius: 18px; border: 0;
    font-size: .875rem; font-weight: 500;
}
#tela-youtube #inscrever-yt.brand { background: var(--nx-text); color: var(--nx-bg); }
#tela-youtube #inscrever-yt.contorno { background: var(--nx-surface); color: var(--nx-text); }
#tela-youtube .nx-acoes { grid-column: 1 / -1; gap: .5rem; padding: .75rem 0 .25rem; margin: 0 -.75rem; padding-inline: .75rem; }
#tela-youtube .nx-acoes .nx-botao,
#tela-youtube .nx-acoes .nx-pilula,
#tela-youtube .nx-par {
    height: 36px; border-radius: 18px; border: 0;
    background: var(--nx-surface); color: var(--nx-text);
    font-size: .875rem; font-weight: 500; padding: 0 .75rem; gap: .4rem;
}
#tela-youtube .nx-par { padding: 0; }
#tela-youtube .nx-par .nx-pilula { background: transparent; }
#tela-youtube .nx-acoes svg { width: 20px; height: 20px; }

/* descrição: só abre em folha */
#tela-youtube #caixa-descricao-yt:not(.yt-folha-aberta) { display: none; }
#tela-youtube #caixa-descricao-yt .nx-mostrar-mais { display: none; }
#tela-youtube #caixa-descricao-yt .nx-texto-descricao { max-height: none; -webkit-line-clamp: unset; display: block; }
.yt-folha-topo { display: none; }
.yt-folha-aberta > .yt-folha-topo {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 1; background: inherit; padding: .5rem 0 .75rem;
    border-bottom: 1px solid var(--nx-border); margin-bottom: .75rem;
}
.yt-folha-topo h2 { font-size: 1.125rem; font-weight: 700; margin: 0; }
.yt-fechar-folha { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: inherit; }
.yt-fechar-folha svg { width: 24px; height: 24px; }

/* comentários: cartão compacto ("Comentários 60" + o primeiro) que abre em folha */
#tela-youtube #comentarios-yt:not(.yt-folha-aberta) {
    margin: .75rem; padding: .6rem .75rem; border-radius: .75rem;
    background: var(--nx-surface); max-height: 104px; overflow: hidden; cursor: pointer;
}
#tela-youtube #comentarios-yt:not(.yt-folha-aberta) .nx-subtitulo { font-size: .875rem; font-weight: 600; margin: 0 0 .4rem; }
#tela-youtube #comentarios-yt:not(.yt-folha-aberta) .nx-subtitulo svg { display: none; }
#tela-youtube #comentarios-yt:not(.yt-folha-aberta) .nx-comentario ~ .nx-comentario,
#tela-youtube #comentarios-yt:not(.yt-folha-aberta) .nx-nota,
#tela-youtube #comentarios-yt:not(.yt-folha-aberta) .nx-curtidas-comentario,
#tela-youtube #comentarios-yt:not(.yt-folha-aberta) .nx-respostas,
#tela-youtube #comentarios-yt:not(.yt-folha-aberta) .nx-autor { display: none; }
#tela-youtube #comentarios-yt:not(.yt-folha-aberta) .nx-texto-comentario {
    font-size: .8125rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* "A seguir": sem cabeçalho (a chave está no player), cartões grandes */
#tela-youtube .nx-linha-a-seguir { display: none; }
#tela-youtube #a-seguir-yt { display: grid; gap: 1rem; padding-top: .5rem; }

/* controles do player: chave de reprodução automática */
.yt-autoplay { position: relative; width: 36px; height: 22px; border: 0; background: transparent; padding: 0; margin-right: .25rem; }
.yt-autoplay::before { content: ''; position: absolute; inset: 6px 2px; border-radius: 6px; background: rgb(255 255 255 / .5); }
.yt-autoplay i {
    position: absolute; top: 2px; left: 0; width: 18px; height: 18px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .5); transition: left .15s;
}
.yt-autoplay[aria-checked="true"] i { left: 18px; }
.yt-autoplay[aria-checked="true"] i::after { content: '▶'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 8px; color: #000; }
.palco-pagina-yt video::cue { background: rgb(8 8 8 / .75); color: #fff; font-family: Roboto, Arial, sans-serif; font-size: 15px; }

/* ---- folhas (engrenagem, descrição, comentários, abrir link) ---- */
.yt-veu { position: fixed; inset: 0; z-index: 470; background: rgb(0 0 0 / .5); }
.yt-folha,
.yt-folha-aberta {
    position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 480;
    max-height: 72vh; overflow-y: auto; margin: 0 !important;
    background: #212121 !important; color: #f1f1f1; border-radius: 12px 12px 0 0 !important;
    padding: .5rem 1rem calc(1rem + env(safe-area-inset-bottom)) !important;
    font-family: Roboto, Arial, sans-serif;
    animation: yt-sobe .2s cubic-bezier(.22, 1, .36, 1);
}
#comentarios-yt.yt-folha-aberta, #caixa-descricao-yt.yt-folha-aberta { top: 30vh; max-height: none; cursor: auto; }
@keyframes yt-sobe { from { transform: translateY(100%); } }
body.tema-claro-yt .yt-folha, body.tema-claro-yt .yt-folha-aberta { background: #fff !important; color: #0f0f0f; }
.yt-alca { display: block; width: 40px; height: 4px; border-radius: 2px; background: rgb(255 255 255 / .3); margin: 0 auto .5rem; }
.yt-folha-titulo { display: flex; align-items: center; gap: .25rem; padding: .25rem 0 .5rem; }
.yt-folha-titulo h2 { font-size: 1rem; font-weight: 600; margin: 0; }
.yt-folha-voltar { display: grid; place-items: center; width: 36px; height: 36px; border: 0; background: transparent; color: inherit; }
.yt-folha-voltar svg { width: 22px; height: 22px; }
.yt-folha-itens { display: grid; }
.yt-opcao {
    display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 1.25rem;
    min-height: 48px; padding: .25rem 0; border: 0; background: transparent; color: inherit;
    font: inherit; font-size: .9375rem; text-align: left; cursor: pointer;
}
.yt-opcao svg { width: 24px; height: 24px; fill: currentColor; }
.yt-opcao b { font-weight: 400; font-size: .875rem; color: #aaa; }
.yt-opcao small { display: block; font-size: .75rem; color: #aaa; margin-top: .2rem; line-height: 1.3; }
.yt-opcao.desativado { opacity: .75; cursor: default; }
.yt-marca { width: 24px; height: 24px; }
.yt-chave, .yt-linha-config .yt-chave { position: relative; width: 36px; height: 20px; border-radius: 10px; background: #717171; flex: none; }
.yt-chave::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
[aria-checked="true"] > .yt-chave { background: #3ea6ff; }
[aria-checked="true"] > .yt-chave::after { left: 18px; }
.yt-form-link { display: flex; gap: .5rem; padding: .25rem 0 .75rem; }
.yt-form-link input { flex: 1; min-width: 0; height: 40px; border-radius: 8px; border: 1px solid #3f3f3f; background: #0f0f0f; color: #f1f1f1; padding: 0 .75rem; font: inherit; }
.yt-form-link button { height: 40px; padding: 0 1rem; border: 0; border-radius: 20px; background: #f1f1f1; color: #0f0f0f; font-weight: 500; }

/* ---- Inscrições e Você ---- */
.yt-canais-inscritos { display: flex; gap: 1rem; overflow-x: auto; padding: .75rem; scrollbar-width: none; }
.yt-canal-bolha { display: grid; justify-items: center; gap: .3rem; width: 64px; flex: none; border: 0; background: none; color: var(--nx-text); font: inherit; }
.yt-canal-bolha span { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--nx-surface); font-weight: 600; }
.yt-canal-bolha img { width: 100%; height: 100%; object-fit: cover; }
.yt-canal-bolha small { font-size: .7rem; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.yt-voce-topo { display: flex; align-items: center; gap: 1rem; padding: 1rem .75rem .5rem; }
.yt-voce-foto { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #3f3f3f; font-size: 1.6rem; font-weight: 600; color: #fff; flex: none; }
.yt-voce-foto img { width: 100%; height: 100%; object-fit: cover; }
.yt-voce-topo h1 { font-size: 1.5rem; font-weight: 700; margin: 0; }
.yt-voce-topo p { margin: .15rem 0 0; font-size: .8rem; color: var(--nx-text-muted); }
.yt-voce-lista { display: grid; padding: .5rem 0; border-top: 1px solid var(--nx-border); }
.yt-voce-lista button, .yt-linha-config {
    display: flex; align-items: center; gap: 1.25rem; min-height: 52px; padding: 0 .9rem;
    border: 0; background: transparent; color: var(--nx-text); font: inherit; font-size: .9375rem; text-align: left; width: 100%;
}
.yt-voce-lista svg { width: 24px; height: 24px; fill: currentColor; flex: none; }
.yt-voce-lista small { display: block; font-size: .75rem; color: var(--nx-text-muted); }
.yt-linha-config { justify-content: space-between; }
.yt-linha-config b { font-weight: 400; font-size: .8125rem; color: var(--nx-text-muted); text-align: right; }
.yt-voce-bloco { border-top: 1px solid var(--nx-border); padding: .75rem 0 .25rem; }
.yt-voce-bloco h2 { font-size: 1rem; font-weight: 700; margin: 0 .9rem .25rem; }
.yt-voce-bloco > p { font-size: .8rem; color: var(--nx-text-muted); margin: 0 .9rem .5rem; line-height: 1.35; }

/* ---- mini player único, preso acima da barra ---- */
.mini-yt { display: none; }
.mini-yt:not([hidden]) {
    position: fixed; left: 0; right: 0; z-index: 60;
    bottom: calc(var(--altura-nav, 0px) + env(safe-area-inset-bottom));
    height: 56px; display: grid; grid-template-columns: 100px minmax(0, 1fr) 48px 48px; align-items: center;
    background: #212121; color: #f1f1f1; font-family: Roboto, Arial, sans-serif; touch-action: none;
}
body.tema-claro-yt.na-aba-youtube .mini-yt:not([hidden]) { background: #fff; color: #0f0f0f; box-shadow: 0 -1px 0 rgb(0 0 0 / .1); }
.mini-yt-progresso { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgb(255 255 255 / .2); }
.mini-yt-progresso b { display: block; height: 100%; width: 0; background: #f00; }
.mini-yt-video { width: 100px; height: 56px; background: #000; overflow: hidden; }
.mini-yt-video video { width: 100%; height: 100%; object-fit: cover; }
.mini-yt-textos { display: grid; padding: 0 .6rem; min-width: 0; }
.mini-yt-textos strong { font-size: .8125rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-yt-textos span { font-size: .75rem; color: #aaa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-yt-botao { display: grid; place-items: center; height: 56px; border: 0; background: transparent; color: inherit; }
.mini-yt-botao svg { width: 24px; height: 24px; fill: currentColor; stroke: currentColor; }
body.com-mini-yt .player,
body.com-mini-yt .palco-video { display: none !important; }
@media (min-width: 861px) {
    .mini-yt:not([hidden]) { left: auto; right: 1rem; bottom: 1rem; width: 400px; border-radius: 12px; overflow: hidden; }
}

/* ---- barra de baixo do YouTube (só dentro da aba, no celular) ---- */
.item-nav-yt { display: none; }
body.na-aba-youtube .nav-inferior > .item-nav { display: none; }
body.na-aba-youtube .nav-inferior > .item-nav-yt {
    display: grid; justify-items: center; align-content: center; gap: 2px;
    border: 0; background: transparent; color: #f1f1f1;
    padding: .35rem 0 .45rem; font-family: Roboto, Arial, sans-serif; font-size: .625rem; font-weight: 400;
}
body.na-aba-youtube .nav-inferior { background: #0f0f0f; border-top: 1px solid rgb(255 255 255 / .1); }
body.na-aba-youtube.tema-claro-yt .nav-inferior { background: #fff; border-top-color: rgb(0 0 0 / .1); }
body.na-aba-youtube.tema-claro-yt .nav-inferior > .item-nav-yt { color: #0f0f0f; }
.item-nav-yt svg { width: 24px; height: 24px; fill: currentColor; }
.item-nav-yt .icone-cheio { display: none; }
.item-nav-yt.ativo .icone-cheio { display: block; }
.item-nav-yt.ativo .icone-vazio { display: none; }
.item-nav-yt.yt-criar svg { width: 36px; height: 36px; fill: none; }
.yt-avatar-nav { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #3f3f3f; font-size: .7rem; font-weight: 600; color: #fff; }
.yt-avatar-nav img { width: 100%; height: 100%; object-fit: cover; }
.item-nav-yt.ativo .yt-avatar-nav { box-shadow: 0 0 0 2px currentColor; }

/* Shorts dentro da aba: como no app, a barra de baixo continua à vista e o
   feed termina em cima dela. */
@media (max-width: 860px) { body.na-aba-youtube.nos-curtos .nav-inferior { display: grid !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; } }
html.e-celular body.na-aba-youtube.nos-curtos .nav-inferior { display: grid !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; }
body.na-aba-youtube .nx-curtos { bottom: calc(var(--altura-nav, 0px) + env(safe-area-inset-bottom)); }
body.na-aba-youtube.nos-curtos .mini-yt { display: none !important; }

body.na-aba-youtube.faixa-yt .player { display: none !important; }
#tela-youtube .nx-topo { background: var(--nx-bg) !important; backdrop-filter: none; box-shadow: none; }

/* Início no formato do app: coluna única, prateleira de Shorts, ⋮ vertical */
#tela-youtube .yt-inicio .nx-grade { grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 861px) { #tela-youtube .yt-inicio .nx-grade { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } }
#tela-youtube .yt-inicio .nx-cabecalho { display: none; }
.yt-prateleira { grid-column: 1 / -1; padding: .25rem 0 .5rem; }
.yt-prateleira h2 { display: flex; align-items: center; gap: .5rem; margin: 0 .75rem .75rem; font-size: 1.125rem; font-weight: 700; }
.yt-prateleira h2 svg { width: 26px; height: 26px; fill: #f00; }
.yt-prateleira-rolagem { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2rem) / 2); gap: .25rem; overflow-x: auto; padding: 0 .75rem; scrollbar-width: none; scroll-snap-type: x mandatory; }
@media (min-width: 861px) { .yt-prateleira-rolagem { grid-auto-columns: 210px; } }
.yt-prateleira-rolagem > * { scroll-snap-align: start; min-width: 0; }
.yt-prateleira-rolagem .nx-miniatura,
.yt-prateleira-rolagem .nx-miniatura img { border-radius: 8px !important; }
#tela-youtube .nx-cartao:not(.compacto) .nx-info { display: block; }
#tela-youtube .nx-cartao:not(.compacto) .nx-info h3 { margin-bottom: .2rem; }
#tela-youtube .nx-cartao:not(.compacto) .nx-canal,
#tela-youtube .nx-cartao:not(.compacto) .nx-legenda { display: inline; }
#tela-youtube .nx-cartao:not(.compacto) .nx-canal + .nx-legenda:not(:empty)::before { content: ' · '; }
#tela-youtube .nx-cartao .nx-verificado { width: 12px; height: 12px; vertical-align: -1px; margin-left: 2px; }
#tela-youtube .nx-cartao .nx-rodape { gap: .75rem; padding: .6rem .75rem 0; }
#tela-youtube .nx-cartao .nx-ir-canal .nx-avatar { width: 36px; height: 36px; }
#tela-youtube .nx-mais svg { transform: rotate(90deg); }

/* cartão da prateleira de Shorts: título e visualizações por cima da imagem */
.yt-prateleira .nx-cartao { position: relative; outline: 0 !important; border: 0 !important; box-shadow: none !important; }
.yt-prateleira .nx-cartao .nx-selo,
.yt-prateleira .nx-cartao .nx-ir-canal,
.yt-prateleira .nx-cartao .nx-canal { display: none !important; }
.yt-prateleira .nx-cartao .nx-rodape {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem .5rem .5rem !important;
    background: linear-gradient(transparent, rgb(0 0 0 / .75)); border-radius: 0 0 8px 8px; pointer-events: none;
}
.yt-prateleira .nx-cartao .nx-rodape .nx-mais { position: absolute; top: -260%; right: 0; pointer-events: auto; }
.yt-prateleira .nx-cartao h3 { color: #fff; font-size: .875rem; font-weight: 500; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.yt-prateleira .nx-cartao .nx-legenda { color: #fff !important; font-size: .75rem; display: block !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yt-prateleira .nx-cartao .nx-legenda::before { content: none !important; }

/* conta do YouTube em Você */
.yt-passos { margin: 0 .9rem .75rem 2rem; padding: 0; font-size: .85rem; line-height: 1.5; color: var(--nx-text); }
.yt-passos li { margin-bottom: .45rem; }
.yt-passos a { color: #3ea6ff; }
.yt-passos code { display: inline-block; margin-top: .2rem; padding: .15rem .4rem; border-radius: 4px; background: var(--nx-surface); font-size: .78rem; user-select: all; word-break: break-all; }
.yt-form-chaves { display: grid; gap: .5rem; margin: 0 .9rem .75rem; }
.yt-form-chaves input { height: 40px; border-radius: 8px; border: 1px solid var(--nx-surface-2); background: var(--nx-bg); color: var(--nx-text); padding: 0 .75rem; font: inherit; font-size: .85rem; }
.yt-botao-google { margin: .25rem .9rem .75rem; height: 40px; padding: 0 1.25rem; border: 0; border-radius: 20px; background: #f1f1f1; color: #0f0f0f; font: inherit; font-weight: 500; font-size: .9rem; }
.yt-form-chaves .yt-botao-google { margin: .25rem 0 0; }