/* =====================================================================
   MINHA BIBLIOTECA — REFINO DE UX
   Carregue DEPOIS de site.css. Nada aqui muda arquitetura ou marcacao;
   sao apenas sobrescritas. Para desfazer, remova o <link>.

       <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
       <link rel="stylesheet" href="~/css/refino.css" asp-append-version="true" />
   ===================================================================== */


/* =====================================================================
   1. TOKENS
   ===================================================================== */
:root {
    /* AA em texto pequeno sobre #05070F: era 4,09:1, passa a 6,6:1 */
    --texto-3: #8A94AD;

    /* Bordas que sobrevivem ao iPhone com brilho baixo, ou na rua */
    --borda: rgba(255, 255, 255, 0.11);
    --borda-forte: rgba(255, 255, 255, 0.22);

    /* Uma curva por gesto. E daqui que vem a "cara de app":
       o dedo desce rapido e duro, a tela se revela devagar e macio. */
    --t-toque:   110ms cubic-bezier(0.30, 0.00, 0.10, 1);
    --t-padrao:  240ms cubic-bezier(0.32, 0.72, 0.00, 1);
    --t-revelar: 420ms cubic-bezier(0.16, 1.00, 0.30, 1);

    /* A curva antiga (Material) fica mais proxima da do iOS */
    --transicao: 240ms cubic-bezier(0.32, 0.72, 0, 1);

    /* Ritmo vertical das prateleiras */
    --gap-titulo:  10px;   /* titulo  -> fileira */
    --gap-fileira: 40px;   /* fileira -> proxima secao */
}


/* =====================================================================
   2. TIPOGRAFIA
   SF Pro ja esta no iPhone: nao tem FOUT, nao tem requisicao externa
   (importante num servidor que so se alcanca por Tailscale) e e a fonte
   de todo app nativo. Inter continua como reserva.
   Para manter Inter, apague so o bloco `body` abaixo.
   ===================================================================== */
body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
}

/* O tamanho carrega a hierarquia; o peso para de gritar em oito lugares */
.mb-destaque-titulo {
    font-size: clamp(2rem, 8.6vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.042em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}

.mb-secao-titulo    { font-size: 1.3rem;  letter-spacing: -0.03em;  margin-bottom: var(--gap-titulo); }
.mb-pagina-titulo   { font-size: 1.85rem; letter-spacing: -0.036em; }
.mb-cartao-serie-titulo { font-weight: 700; letter-spacing: -0.038em; }
.mb-etiqueta        { font-weight: 700; }

.mb-secao-cabecalho .mb-secao-titulo { margin-bottom: var(--gap-titulo); }


/* =====================================================================
   3. HEROI
   62vh no iOS e mais de 62% do que se ve (vh = large viewport), e a
   primeira fileira nunca aparece. 56svh com teto deixa a fileira espiar.
   ===================================================================== */
.mb-conteudo { padding-top: 0; }

.mb-conteudo > .mb-destaque:first-child {
    /* o banner passa POR BAIXO da barra translucida, como na Netflix */
    margin-top: calc(-1 * (var(--topo-altura) + env(safe-area-inset-top)));
    padding-top: calc(var(--topo-altura) + env(safe-area-inset-top));
}

.mb-destaque {
    min-height: 62vh;    /* reserva para navegador antigo */
    min-height: 56svh;   /* svh = a altura que se ve de verdade */
    max-height: 600px;
}

/* Rampa mais longa e um degrau lateral: o titulo para de lavar em capa clara */
.mb-destaque-veu {
    background:
        linear-gradient(180deg,
            rgba(5, 7, 15, 0.72)  0%,
            rgba(5, 7, 15, 0.26) 22%,
            rgba(5, 7, 15, 0.20) 44%,
            rgba(5, 7, 15, 0.70) 74%,
            rgba(5, 7, 15, 0.94) 90%,
            var(--tinta-0)      100%),
        linear-gradient(90deg,
            rgba(5, 7, 15, 0.78)  0%,
            rgba(5, 7, 15, 0.10) 62%);
}

/* Ou se borra de verdade, ou nao se borra */
.mb-destaque-fundo-capa { filter: blur(16px); transform: scale(1.1); }

.mb-destaque-conteudo { padding-bottom: 20px; }
.mb-destaque-sinopse  { -webkit-line-clamp: 2; font-size: 0.88rem; margin-top: 8px; }
.mb-destaque-acoes    { margin-top: 16px; gap: 8px; }

/* O respiro que faz a primeira fileira espiar na tela inicial */
.mb-destaque + .mb-secao { padding-top: 20px; }


/* =====================================================================
   4. RITMO DAS SECOES
   Hoje: 18px do titulo ate os cartazes, 38px entre fileiras (2,1:1).
   Alvo: 10px e 40px (4:1) — o titulo cola na fileira dele.
   ===================================================================== */
.mb-secao      { padding: 0 0 var(--gap-fileira); }
.mb-secao-topo { padding-top: 18px; }

.mb-cartao-serie + .mb-secao { padding-top: 22px; }

/* O padding vertical do carrossel tem de absorver o scale() do hover:
   overflow-x:auto forca overflow-y:auto, entao o que cresce e cortado. */
.mb-carrossel {
    padding-top: 6px;
    padding-bottom: 12px;
    padding-left:  max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    scroll-padding-left: max(16px, env(safe-area-inset-left));
}

.mb-grade {
    padding-left:  max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    gap: 26px 12px;
    /* 112px de minimo derrubava para 2 colunas por 1px em 390pt */
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 480px) {
    .mb-grade { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
}


/* =====================================================================
   5. CARTAZES
   Largura em vw: o "pedacinho" do proximo cartaz e o que diz "role".
   Em px fixos ele some no Pro Max. Em 34vw fica igual em todo iPhone.
   ===================================================================== */
.mb-cartaz    { width: clamp(108px, 34vw, 152px); position: relative; }
.mb-continuar { width: clamp(200px, 62vw, 290px); position: relative; }

/* O texto sob o cartaz ocupava 25% da altura da arte. Uma linha basta:
   ano e duracao continuam no heroi e na ficha do filme. */
.mb-cartaz-titulo {
    -webkit-line-clamp: 1;
    margin-top: 8px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--texto-2);
    transition: color var(--t-padrao);
}

.mb-cartaz-sub { display: none; }

/* No catalogo o subtitulo ainda ajuda a diferenciar */
.mb-grade .mb-cartaz-sub    { display: block; }
.mb-grade .mb-cartaz-titulo { -webkit-line-clamp: 2; color: var(--texto); }

/* Propriedades nomeadas: `transition: var(--transicao)` era `all` */
.mb-cartaz-arte,
.mb-continuar-arte {
    transition: border-color var(--t-padrao), box-shadow var(--t-padrao);
}

.mb-continuar-play {
    transition: transform var(--t-padrao), background var(--t-padrao),
                border-color var(--t-padrao);
}


/* =====================================================================
   6. TOQUE  — a maior ausencia da interface hoje
   Nenhum cartaz, cartao ou episodio respondia ao dedo.
   ===================================================================== */
.mb-cartaz,
.mb-continuar,
.mb-episodio,
.mb-nav-mobile a,
.mb-secao-link,
.mb-botao,
.mb-temporada-chip,
.mb-marca,
.mb-sair button {
    -webkit-tap-highlight-color: transparent;
}

.mb-cartaz,
.mb-continuar {
    transition: transform var(--t-padrao), opacity var(--t-padrao);
}

.mb-cartaz:active,
.mb-continuar:active {
    transform: scale(0.955);
    opacity: 0.88;
    transition-duration: 110ms;
}

.mb-episodio { transition: transform var(--t-toque), background var(--t-padrao),
                           border-color var(--t-padrao); }

.mb-episodio:active {
    transform: scale(0.985);
    background: linear-gradient(140deg, rgba(34, 56, 102, 0.92), rgba(20, 34, 62, 0.92));
    border-color: var(--safira);
}

.mb-botao:active          { transform: scale(0.96); transition-duration: 110ms; }
.mb-chip:active,
.mb-temporada-chip:active { transform: scale(0.94); transition-duration: 110ms; }


/* =====================================================================
   7. BARRA DE ABAS  (bug: site.js marca .ativo, o CSS nao pinta nada)
   ===================================================================== */
.mb-nav-mobile a { position: relative; }

.mb-nav-mobile a.ativo { color: var(--safira-claro); }

.mb-nav-mobile a.ativo::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 24px;
    height: 2px;
    transform: translateX(-50%);
    border-radius: 0 0 3px 3px;
    background: var(--safira-claro);
    box-shadow: 0 0 10px var(--safira-brilho);
}

.mb-nav-desktop a.ativo { color: var(--texto); }

.mb-nav-desktop a.ativo::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;
    height: 2px;
    border-radius: 2px;
    background: var(--safira-claro);
}


/* =====================================================================
   8. ENTRADA DA PAGINA
   Oito linhas de CSS, e o maior ganho de "cara de app" da lista.
   ===================================================================== */
@keyframes mb-subir { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: no-preference) {
    .mb-secao,
    .mb-cartao-serie,
    .mb-destaque-conteudo > * {
        animation: mb-subir var(--t-revelar) both;
    }

    .mb-secao:nth-of-type(2) { animation-delay:  60ms; }
    .mb-secao:nth-of-type(3) { animation-delay: 110ms; }
    .mb-secao:nth-of-type(4) { animation-delay: 155ms; }
    .mb-secao:nth-of-type(5) { animation-delay: 195ms; }
    .mb-secao:nth-of-type(6) { animation-delay: 230ms; }
    .mb-secao:nth-of-type(n+7) { animation-delay: 260ms; }

    .mb-destaque-conteudo > :nth-child(1) { animation-delay:  40ms; }
    .mb-destaque-conteudo > :nth-child(2) { animation-delay:  90ms; }
    .mb-destaque-conteudo > :nth-child(3) { animation-delay: 135ms; }
    .mb-destaque-conteudo > :nth-child(4) { animation-delay: 175ms; }
    .mb-destaque-conteudo > :nth-child(5) { animation-delay: 210ms; }

    /* Capa entra sem "pipocar" (precisa do trecho de JS — ver o documento) */
    .mb-cartaz-arte img,
    .mb-continuar-arte img { opacity: 0; transition: opacity 360ms ease; }
    .mb-cartaz-arte img.mb-pronta,
    .mb-continuar-arte img.mb-pronta { opacity: 1; }
    .mb-continuar-arte img.mb-pronta { opacity: 0.9; }
}


/* =====================================================================
   9. HOVER  — so mouse. O cartao inteiro cresce, nao so a arte.
   ===================================================================== */
@media (hover: hover) and (pointer: fine) {
    .mb-carrossel { padding-top: 14px; padding-bottom: 22px; }

    .mb-cartaz:hover { transform: scale(1.06); z-index: 2; }

    .mb-cartaz:hover .mb-cartaz-arte {
        transform: none;                       /* anula o translateY antigo */
        border-color: rgba(255, 255, 255, 0.30);
        box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.95);
    }

    .mb-cartaz:hover .mb-cartaz-titulo { color: var(--texto); }

    .mb-continuar:hover { transform: scale(1.035); z-index: 2; }

    .mb-continuar:hover .mb-continuar-arte {
        border-color: rgba(255, 255, 255, 0.30);
        box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.95);
    }

    .mb-continuar:hover .mb-continuar-play {
        background: var(--safira);
        border-color: #fff;
        transform: translate(-50%, -50%) scale(1.08);
    }

    /* 2px estava abaixo do limiar de percepcao: lia como tremida */
    .mb-episodio:hover { transform: none; }
    .mb-episodio:hover .mb-episodio-play { transform: scale(1.12); }
}


/* =====================================================================
   10. CONTRASTE E ALVOS DE TOQUE
   ===================================================================== */
/* O botao secundario sumia sobre banner claro */
.mb-botao-vidro {
    background: rgba(16, 22, 38, 0.62);
    border-color: rgba(255, 255, 255, 0.28);
}

/* "Ver tudo" e "Ler mais" tinham ~14px de area clicavel.
   O pseudo-elemento amplia o alvo sem mexer no layout. */
.mb-secao-link,
.mb-mais { position: relative; }

.mb-secao-link::after,
.mb-mais::after {
    content: "";
    position: absolute;
    inset: -15px -10px;
}

:focus-visible {
    outline: 2px solid var(--safira-claro);
    outline-offset: 3px;
    border-radius: 6px;
}

.mb-cartaz:focus-visible,
.mb-continuar:focus-visible { outline-offset: 5px; }

/* 100vh transborda sob a barra de endereco do Safari */
.mb-conteudo-auth { min-height: 100svh; }


/* =====================================================================
   11. IPHONE DEITADO
   Em 852x393, as duas barras comiam 32% da altura do visor.
   ===================================================================== */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
    :root { --topo-altura: 48px; --barra-inferior: 52px; }

    .mb-destaque { min-height: 84svh; max-height: none; }
    .mb-destaque-titulo  { font-size: 1.9rem; }
    .mb-destaque-sinopse { display: none; }

    .mb-nav-mobile a { flex-direction: row; gap: 8px; font-size: 0.74rem; }
    .mb-nav-ico      { width: 18px; height: 18px; }
}


/* =====================================================================
   12. MOVIMENTO REDUZIDO  (o bloco original cobria so duas propriedades)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* =====================================================================
   13. CORRECOES DE BUGS DO site.css
   ===================================================================== */
/* .mb-mini esta declarado duas vezes (linha 295 pilula da Viagem,
   linha 1557 linha da gaveta do player). A segunda vencia e desmanchava
   a pilula. Este seletor e mais especifico e devolve o formato. */
.mb-viagem-atalhos .mb-mini {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(43, 107, 255, 0.35);
    background: rgba(43, 107, 255, 0.12);
    color: var(--safira-claro);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
}

.mb-viagem-atalhos .mb-mini:active { transform: scale(0.94); }

/* .mb-carrossel-largo e usada no Home e nao existia no CSS */
.mb-carrossel-largo { scroll-snap-type: x mandatory; }


/* =====================================================================
   14. TABLET E DESKTOP  (acompanha os novos tamanhos)
   ===================================================================== */
@media (min-width: 700px) {
    .mb-cartaz    { width: 158px; }
    .mb-continuar { width: 300px; }

    .mb-carrossel,
    .mb-grade {
        padding-left:  max(32px, env(safe-area-inset-left));
        padding-right: max(32px, env(safe-area-inset-right));
        scroll-padding-left: max(32px, env(safe-area-inset-left));
    }

    .mb-grade { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 30px 18px; }
    .mb-secao-titulo  { font-size: 1.45rem; }
    .mb-pagina-titulo { font-size: 2.2rem; }
}

@media (min-width: 1000px) {
    .mb-destaque { min-height: 68svh; max-height: 720px; }

    .mb-carrossel,
    .mb-grade {
        padding-left:  48px;
        padding-right: 48px;
        scroll-padding-left: 48px;
    }

    :root { --gap-fileira: 48px; }
}


/* =====================================================================
   15. FUNDO DA PAGINA
   O brilho safira do body estava dimensionado em % com
   `background-attachment: fixed` — que o Safari do iPhone ignora. O
   gradiente entao esticava junto com a altura do documento e virava um
   painel azul inteiro abaixo do heroi, com uma linha dura no encontro.
   Ancorado em px ele fica onde devia: so no topo. Abaixo, preto chapado,
   como nos tres referenciais.
   ===================================================================== */
body {
    background-image:
        radial-gradient(120% 460px at 50% -40px,
            rgba(23, 51, 122, 0.85) 0%,
            rgba(23, 51, 122, 0)  100%),
        radial-gradient(70% 300px at 100% 0,
            rgba(43, 107, 255, 0.20) 0%,
            rgba(43, 107, 255, 0)  100%),
        linear-gradient(180deg, #0A1226 0px, var(--tinta-0) 460px);
    background-attachment: scroll;
    background-repeat: no-repeat;
}


/* =====================================================================
   16. HEROI: UMA LINHA A MENOS
   Com a sinopse em 2 linhas, o "Ler mais" virava um quarto nivel de
   texto e empurrava os botoes para baixo. Nenhum dos tres referenciais
   poe "ler mais" no heroi — quem quer o texto inteiro abre a ficha.
   (Nas outras telas o botao continua funcionando normalmente.)
   ===================================================================== */
.mb-destaque-conteudo .mb-mais { display: none; }


/* =====================================================================
   17. TELA "ADICIONAR A BIBLIOTECA"  (/Importar)
   Reaproveita .mb-bloco, .mb-botao e .mb-dica do site.css; aqui so o
   que essa tela tem de proprio.
   ===================================================================== */
.mb-caminho {
    margin: 10px 0;
    padding: 11px 13px;
    border-radius: var(--raio-p);
    background: rgba(5, 8, 16, 0.65);
    border: 1px solid var(--borda);
    color: var(--safira-claro);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.8rem;
    line-height: 1.45;
    /* caminho do Windows nao tem espaco para quebrar sozinho */
    word-break: break-all;
}

.mb-importar { border-left: 3px solid var(--borda-forte); }
.mb-importar.mb-pronta  { border-left-color: var(--safira); }
.mb-importar.mb-travada { border-left-color: #C9553D; }

.mb-importar-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.mb-importar-topo h2 { margin-bottom: 0; min-width: 0; word-break: break-word; }

.mb-selo {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.mb-selo-serie  { color: var(--safira-claro); background: rgba(43,107,255,0.14);
                  border-color: rgba(43,107,255,0.38); }
.mb-selo-filme  { color: #7FD6A8; background: rgba(60,190,125,0.12);
                  border-color: rgba(60,190,125,0.35); }
.mb-selo-duvida { color: #E6B667; background: rgba(224,160,60,0.12);
                  border-color: rgba(224,160,60,0.35); }

.mb-importar-meta {
    font-size: 0.8rem;
    color: var(--texto-2);
    margin-top: 6px;
}

.mb-importar-meta b { color: var(--texto); font-weight: 600; }

/* Lista do que a pasta tem e do que falta */
.mb-checklist {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 14px 0 0;
    padding: 0;
}

.mb-checklist li {
    font-size: 0.74rem;
    font-weight: 600;
    padding: 5px 11px 5px 9px;
    border-radius: 999px;
    border: 1px solid var(--borda);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mb-checklist li::before {
    font-weight: 800;
    font-size: 0.8rem;
    line-height: 1;
}

.mb-checklist li.ok {
    color: #7FD6A8;
    background: rgba(60, 190, 125, 0.10);
    border-color: rgba(60, 190, 125, 0.30);
}
.mb-checklist li.ok::before { content: "\2713"; }

.mb-checklist li.falta {
    color: #F0A08C;
    background: rgba(201, 85, 61, 0.14);
    border-color: rgba(201, 85, 61, 0.42);
}
.mb-checklist li.falta::before { content: "\00D7"; }

/* Opcional que nao veio: nao impede nada, entao nao grita */
.mb-checklist li.opcional {
    color: var(--texto-3);
    background: rgba(255, 255, 255, 0.03);
}
.mb-checklist li.opcional::before { content: "\2013"; }

.mb-importar-problemas,
.mb-importar-avisos {
    margin-top: 14px;
    padding: 11px 13px;
    border-radius: var(--raio-p);
    font-size: 0.82rem;
    line-height: 1.5;
}

.mb-importar-problemas {
    background: rgba(201, 85, 61, 0.12);
    border: 1px solid rgba(201, 85, 61, 0.38);
    color: #F5BCAC;
}

.mb-importar-avisos {
    background: rgba(43, 107, 255, 0.10);
    border: 1px solid rgba(43, 107, 255, 0.30);
    color: var(--texto-2);
}

.mb-importar-problemas p + p,
.mb-importar-avisos p + p { margin-top: 5px; }

.mb-botao:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.mb-botao:disabled:active { transform: none; }

@media (min-width: 700px) {
    .mb-painel { padding-left: 32px; padding-right: 32px; }
}

/* =====================================================================
   18. PERFIS  (/Perfil, /Account/Login)

   Entrou em 01/10 junto com os perfis. Tudo aqui e classe nova — nao
   sobrescreve nada do site.css, entao apagar este bloco inteiro so deixa
   as telas de perfil sem enfeite, sem quebrar o resto.
   ===================================================================== */

/* --- O botao do perfil no topo (ocupa o lugar do antigo "Sair") --- */
.mb-perfil-botao {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--borda);
    color: var(--texto-2);
    border-radius: 99px;
    padding: 5px 13px 5px 5px;
    font-size: 0.82rem;
    font-weight: 600;
    transition: var(--transicao);
    -webkit-tap-highlight-color: transparent;
}

.mb-perfil-botao:hover,
.mb-perfil-botao:active {
    color: var(--texto);
    border-color: var(--borda-forte);
}

.mb-perfil-inicial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 99px;
    background: linear-gradient(140deg, var(--safira) 0%, var(--safira-escuro) 100%);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0;
}

.mb-perfil-inicial-grande {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    font-size: 1.4rem;
}

/* O nome inteiro cabe no desktop; no celular o circulo ja identifica. */
.mb-perfil-nome {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 380px) {
    .mb-perfil-nome { display: none; }
    .mb-perfil-botao { padding: 5px; }
}

/* --- Cartao do perfil --- */
.mb-perfil-cartao {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.mb-perfil-dados { min-width: 0; }

.mb-perfil-dados strong {
    display: block;
    font-size: 1.02rem;
    color: var(--texto);
    line-height: 1.3;
}

.mb-perfil-dados small {
    display: block;
    margin-top: 3px;
    font-size: 0.78rem;
    color: var(--texto-3);
    line-height: 1.5;
}

.mb-perfil-dados code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.76rem;
    color: var(--texto-2);
}

.mb-etiqueta-calma {
    background: rgba(255, 255, 255, 0.07);
    color: var(--texto-2);
}

/* --- Linha da lista de perfis --- */
.mb-perfil-linha {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--tinta-1);
}

.mb-perfil-linha-acoes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mb-perfil-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.mb-perfil-mini input {
    flex: 1 1 130px;
    min-width: 0;
    background: var(--tinta-2);
    border: 1px solid var(--borda);
    border-radius: var(--raio-p);
    color: var(--texto);
    padding: 9px 12px;
    font-size: 0.86rem;
    font-family: inherit;
}

.mb-perfil-mini input:focus {
    outline: none;
    border-color: var(--safira);
    box-shadow: 0 0 0 3px var(--safira-brilho);
}

.mb-perfil-mini .mb-botao { flex: 0 0 auto; }

.mb-botao-perigo {
    border-color: rgba(255, 110, 110, 0.35);
    color: #FF9A9A;
}

.mb-botao-perigo:hover,
.mb-botao-perigo:active {
    border-color: rgba(255, 110, 110, 0.6);
    color: #FFC2C2;
}

/* --- Textos de apoio --- */
.mb-perfil-resumo {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--texto-2);
    max-width: 62ch;
}

.mb-perfil-nota {
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--texto-3);
    max-width: 62ch;
}

.mb-perfil-subtitulo {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--texto);
    margin-top: 10px;
}

.mb-perfil-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.mb-perfil-form { max-width: 420px; }

/* --- Atalhos de perfil na tela de entrada --- */
.mb-login-perfis {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.mb-login-perfil {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--borda);
    border-radius: 99px;
    color: var(--texto-2);
    padding: 7px 15px;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transicao);
    -webkit-tap-highlight-color: transparent;
}

.mb-login-perfil-ativo {
    background: var(--safira-escuro);
    border-color: var(--safira);
    color: var(--texto);
}

@media (min-width: 700px) {
    .mb-perfil-linha {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    .mb-perfil-linha-acoes { flex: 0 1 460px; }
}

/* =====================================================================
   19. MARCA DO CANAL NO PLAYER  (01/10, recalibrado)

   A marca d'agua da fonte vem QUEIMADA NOS PIXELS no canto inferior
   esquerdo: medida sobre um quadro real, 17,91% da largura por 2,97% da
   altura da IMAGEM, colada nas duas bordas.

   ⚠️ A PRIMEIRA VERSAO DEIXAVA FANTASMA. Era uma tinta chapada com 95%
   de opacidade, e 5% de um texto branco sobre painel escuro ainda se le:
   medido, sobrava contraste 10 de 200. Tapar escurecendo nao resolve —
   tem de DESTRUIR o texto. Por isso agora o painel e vidro fosco: o
   backdrop-filter borra o que esta atras antes de escurecer, e o residuo
   cai para ~2.

   O desfoque e o raio vem do player.js em --mb-borrao e --mb-raio, porque
   blur() nao aceita porcentagem e a imagem muda de tamanho entre o
   celular e o PC.

   Apagar este bloco e as linhas da "marca do canal" no player.js desfaz
   tudo; os arquivos de video nunca foram tocados.
   ===================================================================== */
.mb-marca {
    position: absolute;
    overflow: hidden;
    pointer-events: none;   /* nao pode roubar o toque das .mb-zona */
    z-index: 2;             /* acima do video, abaixo dos controles (5 e 6) */
}

/* O painel de vidro. Fica colado no canto porque a marca de origem
   tambem esta colada — um painel com margem deixaria a quina aparecendo.
   So o canto de cima a direita e arredondado, que e o unico que da para
   arredondar sem descobrir a marca.

   ⚠️ 19,5% E QUASE O MINIMO. A marca de origem termina em 18,05% da
   largura da imagem (medido num quadro limpo), entao a barra so tem
   1,45 ponto de folga. Encurtar mais do que isto faz o fim do
   "REDECANAIS.com" reaparecer pela direita. */
/* MEDIDAS JUSTAS (01/10). Antes a barra era 19,5% x 5,8% e sobrava folga
   visivel em cima/embaixo da logo e depois do ".com". Agora:

     largura 18,4%  -> a marca termina em 18,05%; sobram 0,35 ponto, que e
                       so o antisserrilhado da borda dela
     altura   4,6%  -> NAO e a marca que manda aqui e sim a LOGO, que tem
                       3,66% de altura; sobram 0,47 ponto de cada lado
     degrau em 14,5% -> o "REDECANAIS" acaba em 14,18%
     parte baixa 2,0% -> o ".com" precisa de 1,70%

   Conferido ponto a ponto ao longo da curva: a barra nunca fica mais
   baixa que a marca, com folga minima de 0,30 ponto. Encurtar mais do
   que isto faz a marca reaparecer.

   ⚠️ O TETO DO DEGRAU E 2,4%, NAO 2,0%. Com 2,0% o fio dourado da
   descida raspava no topo do "m" do ".com" — sobrava 0,07 ponto, menos
   de 1 px. Agora sobram 0,94 ponto (10 px a 1080p). A curva tambem foi
   alongada ate 16,6%, o que deixou a descida mais mansa (inclinacao
   0,59 contra 0,86).

   ⚠️ NO RETRATO a logo e 12,5%, nao 13,5%. Com 13,5% o ".com" terminava
   em 18,60% numa barra de 18,4% e vazava para fora do vidro. */
.mb-marca-tapa {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 18.4%;
    height: 4.6%;
    border-radius: 0 var(--mb-raio, 10px) 0 0;   /* so vale sem clip-path */

    /* VIDRO. Quem apaga a marca de origem e o DESFOQUE, nao a opacidade —
       isso foi medido, nao chutado. Com desfoque de ~1,3x a altura da
       marca, brilho 0.30 e tinta 0.62 sao o ponto MAIS CLARO que ainda
       nao deixa fantasma (residuo 2,8 de 200 de contraste). Subir o
       brilho para 0.40 ja traz o texto de volta, e aumentar o desfoque
       quase nao compra folga: de 1,2x para 1,8x o residuo so cai de 2,8
       para 2,3. Entao NAO CLAREIE mais do que isto. */
    background:
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0.15) 0%,
            rgba(255, 255, 255, 0.045) 20%,
            rgba(255, 255, 255, 0) 52%),
        linear-gradient(100deg,
            rgba(255, 255, 255, 0.11) 0%,
            rgba(255, 255, 255, 0.025) 44%,
            rgba(255, 255, 255, 0) 72%),
        rgba(12, 17, 30, 0.62);
    -webkit-backdrop-filter: blur(var(--mb-borrao, 24px)) saturate(135%) brightness(0.30);
            backdrop-filter: blur(var(--mb-borrao, 24px)) saturate(135%) brightness(0.30);

    /* DEGRAU CURVO. A marca de origem nao tem altura constante: o
       "REDECANAIS" vai ate 14,18% da largura e pede 3,31% da altura, mas
       o ".com" depois dele pede so 1,70%. A primeira versao descia em
       canto reto e ficava um retangulo em cima do outro; agora a descida
       e uma curva (smoothstep) entre 75% e 92% do proprio painel, e o
       fim ganhou um canto arredondado.

       Conferido ponto a ponto ao longo da curva: em nenhum x o painel
       fica mais baixo que a marca, com folga minima de 1,30 ponto.

       Sem suporte a clip-path vira o retangulo inteiro — maior que o
       preciso, mas cobrindo. */
    clip-path: polygon(0% 0%, 78.8% 0%, 79.52% 0.54%, 80.23% 2.06%, 80.94% 4.41%, 81.66% 7.47%, 82.37% 11.09%, 83.08% 15.13%, 83.8% 19.45%, 84.51% 23.91%, 85.22% 28.37%, 85.94% 32.69%, 86.65% 36.73%, 87.36% 40.35%, 88.08% 43.41%, 88.79% 45.77%, 89.5% 47.29%, 90.22% 47.83%, 95.5% 47.83%, 97.22% 48.89%, 98.68% 51.93%, 99.66% 56.47%, 100% 61.83%, 100% 100%, 0% 100%);
}

/* O fio dourado. Recorte em forma de FITA: o contorno desce pelo topo da
   silhueta e volta deslocado 3,2% para baixo, fechando uma tira fina que
   acompanha inclusive a curva do degrau. Espessura em porcentagem para
   escalar sozinha: da 2,0 px no PC e 1,3 px no celular.

   Pintado POR CIMA do vidro, como irmao. Nao pode ficar atras: o vidro e
   translucido e o dourado mancharia o painel inteiro. */
.mb-marca-fio {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 18.4%;
    height: 4.6%;
    background: linear-gradient(100deg,
        rgba(246, 226, 160, 0.72) 0%,
        rgba(214, 175, 74, 0.62) 46%,
        rgba(169, 131, 52, 0.42) 100%);
    clip-path: polygon(0% 0%, 78.8% 0%, 79.52% 0.54%, 80.23% 2.06%, 80.94% 4.41%, 81.66% 7.47%, 82.37% 11.09%, 83.08% 15.13%, 83.8% 19.45%, 84.51% 23.91%, 85.22% 28.37%, 85.94% 32.69%, 86.65% 36.73%, 87.36% 40.35%, 88.08% 43.41%, 88.79% 45.77%, 89.5% 47.29%, 90.22% 47.83%, 95.5% 47.83%, 97.22% 48.89%, 98.68% 51.93%, 99.66% 56.47%, 100% 61.83%, 100% 65.23%, 99.66% 59.87%, 98.68% 55.33%, 97.22% 52.29%, 95.5% 51.23%, 90.22% 51.23%, 89.5% 50.69%, 88.79% 49.17%, 88.08% 46.81%, 87.36% 43.75%, 86.65% 40.13%, 85.94% 36.09%, 85.22% 31.77%, 84.51% 27.31%, 83.8% 22.85%, 83.08% 18.53%, 82.37% 14.49%, 81.66% 10.87%, 80.94% 7.81%, 80.23% 5.46%, 79.52% 3.94%, 78.8% 3.4%, 0% 3.4%);
}

/* O ".com" dourado, encostado no HORUS para os dois lerem como uma marca
   so. Fica com 35% da altura do HORUS e passa POR BAIXO do teto do
   degrau — a descida cai em cima dele, que e como a marca de origem era
   montada. E texto, nao imagem: escala sem borrar e usa exatamente a cor
   do olho da logo. O corpo vem do player.js em --mb-com, porque
   font-size nao aceita porcentagem da altura do pai. */
.mb-marca-com {
    position: absolute;
    left: 12.75%;            /* logo depois do HORUS, formando "HORUS.com" */
    bottom: 0;               /* sem descendente, a base cai junto com a do HORUS */
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: var(--mb-com, 13px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
    /* ⚠️ GRADIENTE ESTREITO, DE PROPOSITO.
       O olho da logo ocupa quase toda a altura do PNG, entao percorre a
       escala inteira do dourado — do creme no topo ao bronze embaixo. Ja
       ".com" nao tem nenhuma letra com haste para cima, entao os glifos
       vivem entre 32% e 86% da caixa de texto e NUNCA alcancam o trecho
       claro. Com o gradiente largo de antes, sobrava so o meio saturado:
       medido no aparelho, o ".com" saia com R-B 117 contra 102 do olho, e
       16 pontos mais escuro — exatamente o "mais amarelo" que se via.
       Estas duas paradas foram calculadas para a FAIXA DOS GLIFOS dar a
       media do olho: (200,171,97) contra (202,174,100). */
    color: #CAAE64;          /* = a media do olho, usado se o recorte no texto nao pegar */
    background: linear-gradient(to bottom, #DEC480 20%, #B69848 90%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mb-marca-logo {
    position: absolute;
    left: 1.4%;
    bottom: 0.468%;
    width: 11%;
    height: auto;
    display: block;
    filter: drop-shadow(0 1.5px 2.5px rgba(0, 0, 0, 0.55));
}

/* Em tela estreita a logo encolheria a ponto de o olho virar borrao. */
@media (max-width: 700px) {
    .mb-marca-tapa {
        width: 18.4%;
        height: 5.1%;
        /* a descida comeca depois da logo, que aqui e mais larga */
        clip-path: polygon(0% 0%, 78.8% 0%, 79.52% 0.59%, 80.23% 2.27%, 80.94% 4.89%, 81.66% 8.27%, 82.37% 12.28%, 83.08% 16.75%, 83.8% 21.53%, 84.51% 26.47%, 85.22% 31.41%, 85.94% 36.19%, 86.65% 40.66%, 87.36% 44.67%, 88.08% 48.06%, 88.79% 50.67%, 89.5% 52.35%, 90.22% 52.94%, 95.5% 52.94%, 97.22% 54.01%, 98.68% 57.04%, 99.66% 61.58%, 100% 66.94%, 100% 100%, 0% 100%);
    }

    .mb-marca-fio {
        width: 18.4%;
        height: 5.1%;
        clip-path: polygon(0% 0%, 78.8% 0%, 79.52% 0.59%, 80.23% 2.27%, 80.94% 4.89%, 81.66% 8.27%, 82.37% 12.28%, 83.08% 16.75%, 83.8% 21.53%, 84.51% 26.47%, 85.22% 31.41%, 85.94% 36.19%, 86.65% 40.66%, 87.36% 44.67%, 88.08% 48.06%, 88.79% 50.67%, 89.5% 52.35%, 90.22% 52.94%, 95.5% 52.94%, 97.22% 54.01%, 98.68% 57.04%, 99.66% 61.58%, 100% 66.94%, 100% 72.94%, 99.66% 67.58%, 98.68% 63.04%, 97.22% 60.01%, 95.5% 58.94%, 90.22% 58.94%, 89.5% 58.35%, 88.79% 56.67%, 88.08% 54.06%, 87.36% 50.67%, 86.65% 46.66%, 85.94% 42.19%, 85.22% 37.41%, 84.51% 32.47%, 83.8% 27.53%, 83.08% 22.75%, 82.37% 18.28%, 81.66% 14.27%, 80.94% 10.89%, 80.23% 8.27%, 79.52% 6.59%, 78.8% 6%, 0% 6%);
    }

    .mb-marca-com { left: 14.35%; }

    .mb-marca-logo { width: 12.5%; left: 1.5%; bottom: 0.468%; }
}

/* Navegador sem backdrop-filter (raro, mas existe): sem o desfoque a
   tinta sozinha deixaria fantasma, entao ali ela vira opaca de vez. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .mb-marca-tapa { background: #070A12; }
}


/* =====================================================================
   20. TEMA HORUS  (02/10)
   A logo e o icone do app sao dourado sobre preto; o site ainda vestia
   azul-safira. Esta secao troca a paleta inteira de uma vez.

   COMO FUNCIONA: o site.css pinta tudo com as variaveis --safira*. Os
   NOMES ficaram (renomear 60 usos so para trocar de cor seria risco sem
   ganho), mas os VALORES agora sao dourados. Alguns azuis estavam escritos
   direto no CSS (rgba(43,107,255,...) e #1B4ED8); sao trocados um a um mais
   abaixo.

   PARA VOLTAR AO AZUL: apague esta secao inteira (do comentario "20." ate
   o fim do arquivo). Nada mais depende dela, exceto o <img> da logo no
   _Layout.cshtml e no Login.cshtml, que continua funcionando sem ela.

   Ouro da logo (medido no PNG): claro #E4D098 · meio #CAAE64 · escuro #A8893C
   ===================================================================== */
:root {
    /* Preto de verdade, como o fundo do icone. Antes era azul-marinho. */
    --tinta-0: #050505;
    --tinta-1: #0B0B0C;
    --tinta-2: #131315;
    --tinta-3: #1C1C1F;

    --borda:        rgba(255, 255, 255, 0.10);
    --borda-forte:  rgba(255, 255, 255, 0.22);

    /* Os nomes continuam "safira"; o valor e ouro. */
    --safira:         #CAAE64;
    --safira-claro:   #E4D098;
    --safira-escuro:  #6F5A22;
    --safira-brilho:  rgba(202, 174, 100, 0.40);

    /* Branco levemente quente e cinzas quentes: o azulado de antes
       brigava com o ouro. Contraste de --texto-3 sobre #050505: ~5,8:1. */
    --texto:    #F3F0E8;
    --texto-2:  #A8A397;
    --texto-3:  #8E897D;
}

/* Fundo: preto com um clarao quente no topo. Continua ancorado em px
   (secao 15) — NAO volte para porcentagem nem para `fixed`. */
body {
    background-color: var(--tinta-0);
    background-image:
        radial-gradient(120% 460px at 50% -40px,
            rgba(202, 174, 100, 0.20) 0%,
            rgba(202, 174, 100, 0)    100%),
        radial-gradient(70% 300px at 100% 0,
            rgba(202, 174, 100, 0.07) 0%,
            rgba(202, 174, 100, 0)    100%),
        linear-gradient(180deg, #0D0C09 0px, var(--tinta-0) 460px);
    background-attachment: scroll;
    background-repeat: no-repeat;
}

/* ---------- Topo: a logo no lugar do "Minha Biblioteca" ---------- */
/* Classe nova de proposito. A antiga .mb-marca tambem e usada pela marca
   do canal no player (secao 19), que a deixa com pointer-events: none —
   ou seja, o toque na logo do topo nunca levou ao inicio. */
.mb-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.mb-logo img {
    height: 24px;
    width: auto;
    display: block;
    filter: drop-shadow(0 2px 10px rgba(202, 174, 100, 0.22));
}

/* ---------- Botao principal: ouro com texto escuro ---------- */
.mb-botao-primario {
    background: linear-gradient(135deg, #E6D49C 0%, #CAAE64 52%, #A8893C 100%);
    color: #1A1405;
    box-shadow: 0 8px 24px -8px rgba(202, 174, 100, 0.55);
}

/* Abas e chips ativos tinham texto branco sobre azul. Sobre ouro,
   o texto escuro e o que passa no contraste. */
.mb-chip.ativo,
.mb-temporada-chip.ativo,
.mb-gt-chip.ativo {
    color: #1A1405;
}
.mb-temporada-chip.ativo {
    background: linear-gradient(140deg, #CAAE64 0%, #A8893C 100%);
}
.mb-temporada-chip.ativo .mb-temporada-rotulo { color: rgba(26, 20, 5, 0.72); }
.mb-gt-chip.ativo {
    background: linear-gradient(135deg, #CAAE64, #A8893C);
}
.mb-chip.ativo .mb-chip-conta { color: #1A1405; background: rgba(0, 0, 0, 0.14); }

/* ---------- Azuis que estavam escritos direto ---------- */
.mb-mini,
.mb-viagem-atalhos .mb-mini {
    background: rgba(202, 174, 100, 0.10);
    border: 1px solid rgba(202, 174, 100, 0.30);
}
.mb-mini.atual {
    background: linear-gradient(135deg, rgba(202, 174, 100, 0.22), rgba(202, 174, 100, 0.05));
}
.mb-deteccao {
    background: linear-gradient(150deg, rgba(202, 174, 100, 0.12), rgba(11, 11, 12, 0.75));
    border: 1px solid rgba(202, 174, 100, 0.36);
}
.mb-alerta {
    background: rgba(202, 174, 100, 0.10);
    border: 1px solid rgba(202, 174, 100, 0.36);
}
.mb-selo-serie {
    color: var(--safira-claro);
    background: rgba(202, 174, 100, 0.12);
    border-color: rgba(202, 174, 100, 0.34);
}
.mb-importar-avisos {
    background: rgba(202, 174, 100, 0.09);
    border: 1px solid rgba(202, 174, 100, 0.28);
}

/* ---------- Login ---------- */
/* Fundo da tela de entrada: o clarao dourado fica atras da logo. */
body.mb-auth {
    background-image:
        radial-gradient(90% 380px at 50% 180px,
            rgba(202, 174, 100, 0.17) 0%,
            rgba(202, 174, 100, 0)    100%),
        linear-gradient(180deg, #0D0C09 0px, var(--tinta-0) 520px);
}

.mb-login {
    position: relative;
    background: linear-gradient(165deg, rgba(26, 25, 21, 0.92), rgba(10, 10, 11, 0.96));
    border: 1px solid rgba(202, 174, 100, 0.20);
    box-shadow:
        0 30px 70px -30px rgba(0, 0, 0, 1),
        0 0 60px -30px rgba(202, 174, 100, 0.35);
}

/* Fio de luz no alto do cartao */
.mb-login::before {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: -1px;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(228, 208, 152, 0) 0%,
        rgba(228, 208, 152, 0.85) 50%,
        rgba(228, 208, 152, 0) 100%);
    pointer-events: none;
}

.mb-login-logo {
    display: flex;
    justify-content: center;
    margin: 4px 0 10px;
}

.mb-login-logo img {
    width: min(82%, 280px);
    height: auto;
    display: block;
    filter: drop-shadow(0 6px 26px rgba(202, 174, 100, 0.30));
}

.mb-login p.mb-login-sub {
    color: var(--texto-2);
    letter-spacing: 0.01em;
}

.mb-campo input:focus,
.mb-entrada:focus {
    border-color: var(--safira);
    box-shadow: 0 0 0 3px rgba(202, 174, 100, 0.20);
}

/* ---------- Azul-marinho que sobrou: vira preto neutro ---------- */
/* Campos de texto, barras, menus e cartoes flutuantes usavam um preto
   azulado escrito direto (rgba(8,12,22) e parecidos). Sobre o ouro, esse
   azul aparecia como uma mancha fria. */
.mb-campo input,
.mb-entrada {
    background: rgba(0, 0, 0, 0.55);
}

.mb-nav-mobile {
    background: rgba(8, 8, 9, 0.90);
}

.mb-viagem-barra {
    background: rgba(8, 8, 9, 0.95);
}

.mb-menu,
.mb-proximo-card,
.mb-pular-abertura {
    background: rgba(12, 12, 13, 0.92);
}

.mb-caminho {
    background: rgba(0, 0, 0, 0.55);
}

.mb-botao-vidro {
    background: rgba(255, 255, 255, 0.08);
}

/* Veu do destaque: mesma rampa da secao 1, sem o tom azulado. */
.mb-destaque-veu {
    background:
        linear-gradient(180deg,
            rgba(5, 5, 5, 0.72)  0%,
            rgba(5, 5, 5, 0.26) 22%,
            rgba(5, 5, 5, 0.20) 44%,
            rgba(5, 5, 5, 0.70) 74%,
            rgba(5, 5, 5, 0.94) 90%,
            var(--tinta-0)     100%),
        linear-gradient(90deg,
            rgba(5, 5, 5, 0.78)  0%,
            rgba(5, 5, 5, 0.10) 62%);
}