/* ============================================================
   CIFRATURN — THEME PREMIUM v2
   ------------------------------------------------------------
   Camada única de identidade visual. Deve ser o ÚLTIMO CSS
   carregado para vencer os patches legados (bugfixes_patch,
   mobile_improvements, ct-dark-theme...).

   Índice:
     01. Tokens                  (cores, escala tipográfica, espaço)
     02. Tema claro
     03. Base e ritmo vertical
     04. Header
     05. Superfícies e profundidade
     06. Controles — altura única --control-h
     07. Toolbar sticky          (--toolbar-h + scroll-margin)
     08. Leitor de cifra         (núcleo do produto)
     09. Sidebar e relacionadas
     10. Modais
     11. Footer
     12. Animações
     13. Responsivo
     14. Impressão
     15. Acessibilidade

   Contraste verificado (WCAG 2.1):
     acorde dourado / surface escura ... 8.23:1  AAA
     rótulo #9aa7b8 / surface2 ......... 6.39:1  AA+
     acorde #7a5e12 / marfim ........... 4.85:1  AA
     rótulo #6b655c / surface clara .... 5.48:1  AA
   ============================================================ */

/* ─── 01. TOKENS ───────────────────────────────────────────── */
:root {
    /* ---- Dourado ---- */
    --ct-gold: #d4af37;
    --ct-gold-soft: #e5c76b;
    --ct-gold-bright: #f0d98a;
    --ct-gold-deep: #a8862a;
    --ct-gold-glow: rgba(212, 175, 55, .16);
    --ct-gold-line: rgba(212, 175, 55, .30);
    /* Brilho metálico — usado em títulos e no estado ativo */
    --ct-gold-metal: linear-gradient(135deg, #f0d98a 0%, #d4af37 38%, #a8862a 62%, #e5c76b 100%);

    /* ---- Dourado de SUPERFÍCIE (botões) ----
       NÃO é o --ct-gold-metal. Aquele é recortado em texto e no tema
       claro tem de ser escuro para se ler sobre papel; este é o
       contrário: a superfície é que é dourada, e por isso é igual
       nos dois temas, com a tinta escura por cima. Cinco paragens
       porque duas cores lêem-se como plástico — a faixa clara a 22%
       é o reflexo, e é ela que faz o olho ver metal.

       Letra branca sobre dourado nunca passa de 3,7:1; foi o que
       obrigou o tema claro a usar antes um dourado escurecido
       (#8a6a15 → #6f5512), que ficava cor de mostarda. Com tinta
       escura o mesmo botão dá 5,5:1 no ponto mais escuro do
       gradiente e 10,5:1 no mais claro. */
    --ct-ouro-botao: linear-gradient(135deg,
            #f2d98c 0%, #e0c063 22%, #d9b449 52%, #c9a437 76%, #bf9a2e 100%);
    --ct-ouro-botao-hover: linear-gradient(135deg,
            #f7e4a6 0%, #e8cd76 22%, #e0c063 52%, #d3ad3f 76%, #c9a437 100%);
    --ct-ouro-botao-tinta: #33270a;

    /* ---- Superfícies (dark = padrão) ---- */
    --ct-bg: #0d1117;
    --ct-surface: #161b22;
    /* Header e rodapé: escuros nos dois temas — ver seções 04 e 11.
       Por isso usam o dourado claro mesmo no tema light. */
    --ct-header-bg: #12171f;
    --ct-header-text: #b6c0cc;
    --ct-header-accent: #d4af37;
    --ct-footer-bg: #12171f;
    --ct-footer-text: #b6c0cc;
    --ct-footer-dim: #8b96a5;
    --ct-surface-2: #1c2430;
    --ct-surface-3: #253040;
    --ct-border: rgba(255, 255, 255, .09);
    --ct-border-strong: rgba(255, 255, 255, .17);

    /* ---- Texto (todos ≥ AA sobre surface) ---- */
    --ct-text: #e6edf3;
    --ct-text-soft: #b6c0cc;
    --ct-text-dim: #9aa7b8;
    /* Chamava-se decoração e acabou em rótulos de verdade ("Tom:",
       "Vel"), a 3,8:1. Subido até dar 5,9:1 sobre a superfície. */
    --ct-text-faint: #8b97a8;

    /* ---- Semânticas ---- */
    --ct-success: #3fb950;
    --ct-danger: #f85149;
    --ct-warning: #d29922;

    /* ---- Tipografia ---- */
    --ct-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ct-font-mono: 'Roboto Mono', 'Fira Code', 'SFMono-Regular', Consolas, 'Courier New', monospace;

    /* Escala tipográfica — razão 1.25 (terça maior) */
    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-base: 14px;
    --fs-md: 16px;
    --fs-lg: 20px;
    --fs-xl: 25px;
    --fs-2xl: 31px;
    --fs-3xl: 39px;

    --lh-tight: 1.2;
    --lh-normal: 1.55;

    /* ---- Espaçamento — escala 4px ---- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;

    /* ---- Altura ÚNICA de controle ---- */
    /* Todo botão, stepper e slider da toolbar usa este valor.
       É o que impede a barra de virar um mosaico desalinhado. */
    --control-h: 40px;
    --control-px: 14px;
    --control-gap: 8px;

    /* Altura real da toolbar — medida por JS (ver cifra.html).
       O fallback cobre o caso de o JS não rodar. */
    --toolbar-h: 64px;
    --header-h: 64px;

    /* ---- Sombras ---- */
    --ct-shadow-sm: 0 1px 2px rgba(0, 0, 0, .2), 0 2px 6px rgba(0, 0, 0, .14);
    --ct-shadow-md: 0 4px 12px rgba(0, 0, 0, .24), 0 1px 3px rgba(0, 0, 0, .18);
    --ct-shadow-lg: 0 14px 38px rgba(0, 0, 0, .34), 0 4px 12px rgba(0, 0, 0, .2);
    --ct-shadow-gold: 0 4px 20px rgba(212, 175, 55, .28);
    --ct-shadow-gold-lg: 0 0 0 1px rgba(212, 175, 55, .4), 0 6px 28px rgba(212, 175, 55, .34);

    /* ---- Raios ---- */
    --ct-r-sm: 6px;
    --ct-r: 10px;
    --ct-r-lg: 14px;
    --ct-r-pill: 999px;

    /* ---- Movimento ---- */
    --ct-t: 180ms cubic-bezier(.4, 0, .2, 1);
    --ct-t-slow: 340ms cubic-bezier(.4, 0, .2, 1);
    --ct-ease-out: cubic-bezier(.16, 1, .3, 1);

    /* ---- Leitor de cifra ---- */
    --ct-cifra-size: 15px;
    --ct-cifra-leading: 1.6;
    /* Largura de leitura confortável */
    --ct-cifra-medida: 78ch;
}

/* ─── 02. TEMA CLARO ───────────────────────────────────────── */
body.theme-light {
    --ct-bg: #f6f5f2;
    --ct-surface: #ffffff;
    --ct-surface-2: #faf9f6;
    --ct-surface-3: #f0eee8;
    --ct-border: rgba(24, 20, 10, .11);
    --ct-border-strong: rgba(24, 20, 10, .2);

    --ct-text: #16181d;
    --ct-text-soft: #44484f;
    --ct-text-dim: #6b655c;
    --ct-text-faint: #8a837a;

    /* Escurecido para passar AA sobre o MARFIM do tema, não sobre
       branco: 4,85:1 sobre #e9e5d9 e 6,1:1 sobre #ffffff. */
    --ct-gold: #7a5e12;
    --ct-gold-soft: #a37f1e;
    --ct-gold-bright: #6f5512;
    --ct-gold-deep: #5c4610;
    --ct-gold-glow: rgba(138, 106, 21, .11);
    --ct-gold-line: rgba(138, 106, 21, .26);
    --ct-gold-metal: linear-gradient(135deg, #a37f1e 0%, #8a6a15 40%, #6f5512 70%, #a37f1e 100%);

    --ct-shadow-sm: 0 1px 2px rgba(24, 20, 10, .06), 0 2px 6px rgba(24, 20, 10, .04);
    --ct-shadow-md: 0 4px 12px rgba(24, 20, 10, .09), 0 1px 3px rgba(24, 20, 10, .05);
    --ct-shadow-lg: 0 14px 38px rgba(24, 20, 10, .12), 0 4px 12px rgba(24, 20, 10, .07);
    --ct-shadow-gold: 0 4px 20px rgba(138, 106, 21, .2);
    --ct-shadow-gold-lg: 0 0 0 1px rgba(138, 106, 21, .35), 0 6px 28px rgba(138, 106, 21, .24);
}

/* ─── 02a. REMAP DA MARCA LARANJA → DOURADO ────────────────── */
/* site.css e premium_base.css definem o laranja do tema antigo em
   variáveis. Redefini-las aqui converte de uma vez todos os
   componentes que ainda usam `var(--laranja)` / `var(--brand-500)`
   — números de destaque, botões, ícones de lista — sem precisar
   caçar cada classe.

   O tom #a8862a não é escolha estética arbitrária: essas variáveis
   servem TANTO de fundo de botão (com texto branco por cima) quanto
   de cor de texto sobre superfície escura. Medido:
       branco sobre #a8862a ......... 3.44  (AA texto grande)
       #a8862a sobre #161b22 ........ 5.03  (AA)
   É o único ponto da rampa que atende aos dois usos — e melhora o
   laranja anterior no caso do botão (que dava 2.84, reprovado). */
:root {
    --laranja: #a8862a;
    --laranja-hover: #d4af37;
    --brand-500: #a8862a;
    --brand-600: #8a6a15;
}

/* Exceção: sobre o header escuro cabe o dourado claro, que tem
   8.23 de contraste — o "Turn" do logo e os ícones do menu. */
body.ct-redesign .logo-turn,
body.ct-redesign .ct-header .text-brand-500,
body.ct-redesign .top-header .logo-turn {
    color: var(--ct-header-accent) !important;
    -webkit-text-fill-color: var(--ct-header-accent);
}

/* ─── 02b. CORREÇÃO: STICKY vs OVERFLOW ────────────────────── */
/* bugfixes_patch.css aplica `overflow-x: hidden !important` em
   html/body para matar o scroll horizontal no mobile. O efeito
   colateral é grave: pela spec, quando um eixo do overflow deixa
   de ser `visible`, o outro computa para `auto` — html/body viram
   contêiner de rolagem e TODO position:sticky descendente para de
   funcionar (header e toolbar do leitor).

   `overflow-x: clip` corta o transbordo sem criar contexto de
   rolagem, então o sticky sobrevive. Onde não houver suporte,
   o comportamento antigo (hidden) permanece — degrada, não quebra. */
@supports (overflow: clip) {

    html,
    body.ct-redesign {
        overflow-x: clip !important;
        overflow-y: visible !important;
    }
}

/* ─── 02c. CORREÇÃO: GRID ESTOURANDO A VIEWPORT ────────────── */
/* `1fr` resolve para `minmax(auto, 1fr)`, e esse mínimo `auto` é o
   MIN-CONTENT do item. Como .cifra-conteudo usa `white-space: pre`,
   o min-content dela é a linha mais longa da música — a coluna se
   recusa a encolher e empurra o layout inteiro para fora da tela.
   No celular isso cortava cabeçalho, chips, toolbar e cifra no
   mesmo eixo vertical.

   `minmax(0, 1fr)` autoriza a coluna a encolher; a rolagem
   horizontal então acontece DENTRO da cifra, que é onde ela deve
   estar — o alinhamento acorde↔sílaba continua intacto. */
body.ct-redesign .cifra-page-wrapper {
    grid-template-columns: minmax(0, 1fr) 300px;
}

@media (max-width: 960px) {
    body.ct-redesign .cifra-page-wrapper {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Mesma armadilha em flex/grid: sem `min-width: 0` o item usa
   min-content como largura mínima e estoura o pai.
   O wrapper leva só `min-width` — pôr `max-width: 100%` nele
   sobrescreveria o seu próprio cap de 1180px e mataria a
   centralização no desktop. */
body.ct-redesign .cifra-page-wrapper {
    min-width: 0;
}

body.ct-redesign .cifra-main-col,
body.ct-redesign .cifra-side-col,
body.ct-redesign .cifra-body-card,
body.ct-redesign .cifra-toolbar,
body.ct-redesign .song-header-card,
body.ct-redesign .sidebar-acordes-card {
    min-width: 0;
    max-width: 100%;
}

/* ─── 03. BASE E RITMO VERTICAL ────────────────────────────── */
/* A textura de fundo (o halo dourado no topo) é o PRÓPRIO
   background do body, não um ::before.

   A versão anterior era um `::before` fixo com `z-index: 0`, e para
   o conteúdo não ficar embaixo dele havia um
   `body.ct-redesign > * { position: relative }`. Esse seletor
   atropelava `position: fixed` de qualquer filho direto do body —
   foi o que deixou o toast de contato.html encalhado no rodapé
   (aparecia só o ✓) e valia igual para modais e véus.
   Como background, o halo fica atrás de tudo sem que nenhuma regra
   precise mexer no posicionamento dos filhos. */
body.ct-redesign {
    background-color: var(--ct-bg) !important;
    background-image:
        radial-gradient(1100px 600px at 50% -10%,
            var(--ct-gold-glow), transparent 70%) !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    color: var(--ct-text) !important;
    font-family: var(--ct-font) !important;
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--ct-t-slow), color var(--ct-t-slow);
}

/* Só tipografia — NUNCA cor.
   Forçar `color` aqui pintava de escuro os títulos que ficam sobre
   heros escuros dentro de páginas claras (forum.html, sobre.html),
   deixando texto escuro sobre fundo escuro. A cor do título é
   decisão de cada componente, não do tema global. */
body.ct-redesign h1,
body.ct-redesign h2,
body.ct-redesign h3,
body.ct-redesign h4 {
    font-family: var(--ct-font) !important;
    letter-spacing: -.022em;
    line-height: var(--lh-tight);
}

::selection {
    background: var(--ct-gold-glow);
    color: var(--ct-text);
}

body.ct-redesign ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.ct-redesign ::-webkit-scrollbar-track {
    background: transparent;
}

body.ct-redesign ::-webkit-scrollbar-thumb {
    background: var(--ct-border-strong);
    border-radius: var(--ct-r-pill);
}

body.ct-redesign ::-webkit-scrollbar-thumb:hover {
    background: var(--ct-gold-line);
}

/* ─── 04. HEADER ───────────────────────────────────────────── */
/* O header do CifraTurn é escuro em TODAS as páginas, e o logo
   ("Cifra" em branco) e a navegação são claros. Pintá-lo com
   --ct-surface fazia ele virar branco no tema claro e o logo
   sumia. Por isso ele tem token próprio, igual nos dois temas. */
body.ct-redesign .ct-header,
body.ct-redesign .top-header {
    background: color-mix(in srgb, var(--ct-header-bg) 92%, transparent) !important;
    border-bottom: 1px solid var(--ct-border) !important;
    box-shadow: var(--ct-shadow-sm) !important;
    backdrop-filter: saturate(170%) blur(14px);
    -webkit-backdrop-filter: saturate(170%) blur(14px);
    height: var(--header-h);
    position: sticky;
    top: 0;
    z-index: 60;
}

/* Fio dourado sob o header — assinatura da marca */
body.ct-redesign .ct-header::after,
body.ct-redesign .top-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ct-gold-line) 18%,
            var(--ct-gold) 50%, var(--ct-gold-line) 82%, transparent);
    opacity: .8;
    pointer-events: none;
}

/* --ct-header-text, não --ct-text-soft: no tema claro este último
   é escuro e sumiria sobre o header (que permanece escuro).
   NÃO mexer em padding aqui: os links do header usam `py-2` e
   encolher o padding-bottom puxava o sublinhado para dentro do
   texto, cortando as descidas das letras. */
body.ct-redesign .ct-nav a,
body.ct-redesign .ct-header a {
    color: var(--ct-header-text) !important;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    transition: color var(--ct-t);
}

/* ── Sublinhado dourado do menu ──
   Cresce do centro com easing de saída suave e ganha um leve
   halo. `bottom: 6px` mantém o traço folgado abaixo da linha de
   base, sem encostar nas descidas do "g" e do "ç". */
body.ct-redesign .ct-header nav a::after,
body.ct-redesign .ct-nav a::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    /* Menor = mais longe do texto (mede a partir da base da caixa) */
    bottom: 3px;
    height: 2px;
    width: auto;
    border-radius: var(--ct-r-pill);
    background: linear-gradient(90deg,
            transparent,
            var(--ct-header-accent) 22%,
            #f0d98a 50%,
            var(--ct-header-accent) 78%,
            transparent) !important;
    transform: scaleX(0);
    transform-origin: center;
    opacity: 0;
    box-shadow: 0 0 8px rgba(212, 175, 55, .55);
    transition: transform 300ms var(--ct-ease-out), opacity 200ms ease;
    pointer-events: none;
}

body.ct-redesign .ct-header nav a:hover::after,
body.ct-redesign .ct-header nav a:focus-visible::after,
body.ct-redesign .ct-header nav a.active::after,
body.ct-redesign .ct-header nav a[aria-current="page"]::after,
body.ct-redesign .ct-nav a:hover::after,
body.ct-redesign .ct-nav a.active::after {
    transform: scaleX(1);
    opacity: 1;
}

/* O item ativo já é dourado no texto — o sublinhado fica sólido */
body.ct-redesign .ct-header nav a.text-brand-500::after {
    transform: scaleX(1);
    opacity: 1;
}

/* Fundo suave no hover, em vez do branco translúcido genérico */
body.ct-redesign .ct-header nav a:hover {
    background: var(--ct-gold-glow) !important;
}

body.ct-redesign .ct-nav a:hover,
body.ct-redesign .ct-header a:hover,
body.ct-redesign .ct-nav a.active {
    color: var(--ct-header-accent) !important;
}

body.ct-redesign .ct-nav a::after {
    background: var(--ct-header-accent);
}

/* ─── 05. SUPERFÍCIES E PROFUNDIDADE ───────────────────────── */
body.ct-redesign .cifra-body-card,
body.ct-redesign .song-header-card,
body.ct-redesign .cifra-toolbar,
body.ct-redesign .sidebar-video-card,
body.ct-redesign .sidebar-acordes-card,
body.ct-redesign .sidebar-card,
body.ct-redesign .card {
    background: var(--ct-surface) !important;
    border: 1px solid var(--ct-border) !important;
    border-radius: var(--ct-r-lg) !important;
    box-shadow: var(--ct-shadow-md) !important;
    transition: border-color var(--ct-t), box-shadow var(--ct-t), transform var(--ct-t);
}

/* Cabeçalho da música — véu dourado + brilho superior */
body.ct-redesign .song-header-card {
    background:
        radial-gradient(120% 140% at 0% 0%, var(--ct-gold-glow), transparent 55%),
        var(--ct-surface) !important;
    border-color: var(--ct-gold-line) !important;
    padding: var(--sp-5) !important;
    position: relative;
    overflow: hidden;
}

body.ct-redesign .song-header-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--ct-gold-metal);
    opacity: .85;
}

/* Aqui a cor é segura: o fundo do card é meu */
body.ct-redesign .song-header-card h1 {
    font-size: var(--fs-2xl) !important;
    font-weight: 800 !important;
    color: var(--ct-text) !important;
    margin: 0 0 var(--sp-1) !important;
}

body.ct-redesign .song-artist-link {
    color: var(--ct-gold) !important;
    font-weight: 600;
    font-size: var(--fs-md);
    text-decoration: none;
    transition: color var(--ct-t);
}

body.ct-redesign .song-artist-link:hover {
    color: var(--ct-gold-soft) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Chips de info — esticam para ocupar a largura do card.
   Sem isto o cabeçalho fica com dois terços de espaço morto
   à direita e parece inacabado. */
body.ct-redesign .info-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--control-gap) !important;
    margin-top: var(--sp-5) !important;
    width: 100%;
}

body.ct-redesign .info-tab-item {
    flex: 1 1 150px;
    min-width: 150px;
    text-align: center;
    background: var(--ct-surface-2) !important;
    border: 1px solid var(--ct-border) !important;
    border-radius: var(--ct-r) !important;
    padding: var(--sp-3) var(--sp-4) !important;
    transition: border-color var(--ct-t), transform var(--ct-t);
}

body.ct-redesign .info-tab-item:hover {
    border-color: var(--ct-gold-line) !important;
    transform: translateY(-1px);
}

body.ct-redesign .info-tab-value,
body.ct-redesign .info-tab-value.orange {
    color: var(--ct-gold) !important;
    font-weight: 700 !important;
    font-size: var(--fs-md) !important;
}

body.ct-redesign .info-tab-label {
    color: var(--ct-text-dim) !important;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: var(--fs-xs);
    font-weight: 600;
}

/* ─── 06. CONTROLES — ALTURA ÚNICA ─────────────────────────── */
/* PONTO 1 do briefing: um único token de altura para botão,
   stepper e slider. Sem isso a barra vira mosaico ao quebrar. */
body.ct-redesign .tool-btn,
body.ct-redesign .action-btn,
body.ct-redesign .tom-inline-control,
body.ct-redesign .ct-stepper {
    height: var(--control-h);
    box-sizing: border-box;
    border-radius: var(--ct-r) !important;
    display: inline-flex;
    align-items: center;
    flex: none;
}

body.ct-redesign .tool-btn,
body.ct-redesign .action-btn {
    background: var(--ct-surface-2) !important;
    border: 1px solid var(--ct-border) !important;
    color: var(--ct-text-soft) !important;
    font-family: var(--ct-font) !important;
    font-weight: 600 !important;
    font-size: var(--fs-base) !important;
    padding: 0 var(--control-px) !important;
    gap: var(--sp-2);
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    transition: background var(--ct-t), border-color var(--ct-t),
        color var(--ct-t), transform var(--ct-t), box-shadow var(--ct-t);
}

/* Varredura de brilho no hover */
body.ct-redesign .tool-btn::after,
body.ct-redesign .action-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%,
            var(--ct-gold-glow) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform 620ms var(--ct-ease-out);
    pointer-events: none;
}

body.ct-redesign .tool-btn:hover::after,
body.ct-redesign .action-btn:hover::after {
    transform: translateX(120%);
}

body.ct-redesign .tool-btn:hover,
body.ct-redesign .action-btn:hover {
    background: var(--ct-surface-3) !important;
    border-color: var(--ct-gold-line) !important;
    color: var(--ct-gold) !important;
    transform: translateY(-2px);
    box-shadow: var(--ct-shadow-md) !important;
}

/* PONTO 3: estado :active visível */
body.ct-redesign .tool-btn:active,
body.ct-redesign .action-btn:active {
    transform: translateY(0) scale(.97);
    box-shadow: var(--ct-shadow-sm) !important;
}

/* Estado ligado — dourado metálico + brilho pulsante */
body.ct-redesign .tool-btn.active {
    background: var(--ct-gold-metal) !important;
    border-color: var(--ct-gold) !important;
    color: #10141c !important;
    font-weight: 700 !important;
    box-shadow: var(--ct-shadow-gold) !important;
    animation: ct-pulse-gold 2.4s ease-in-out infinite;
}

body.theme-light .tool-btn.active {
    color: #fff !important;
}

body.ct-redesign .tool-btn i,
body.ct-redesign .action-btn i {
    font-size: var(--fs-base);
    line-height: 1;
}

/* Botão primário */
body.ct-redesign .btn-primary,
body.ct-redesign .btn-salvar {
    background: var(--ct-gold-metal) !important;
    color: #10141c !important;
    border: none !important;
    border-radius: var(--ct-r) !important;
    height: var(--control-h);
    font-weight: 700 !important;
    box-shadow: var(--ct-shadow-gold) !important;
    transition: filter var(--ct-t), transform var(--ct-t), box-shadow var(--ct-t);
}

body.theme-light .btn-primary,
body.theme-light .btn-salvar {
    color: #fff !important;
}

body.ct-redesign .btn-primary:hover,
body.ct-redesign .btn-salvar:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: var(--ct-shadow-gold-lg) !important;
}

/* Campos de formulário */
body.ct-redesign input[type="text"],
body.ct-redesign input[type="email"],
body.ct-redesign input[type="password"],
body.ct-redesign input[type="search"],
body.ct-redesign input[type="number"],
body.ct-redesign textarea,
body.ct-redesign select {
    background: var(--ct-surface-2) !important;
    border: 1px solid var(--ct-border) !important;
    color: var(--ct-text) !important;
    border-radius: var(--ct-r) !important;
    font-family: var(--ct-font) !important;
    font-size: var(--fs-base);
    padding: 0 var(--sp-3);
    min-height: var(--control-h);
    transition: border-color var(--ct-t), box-shadow var(--ct-t);
}

body.ct-redesign textarea {
    padding: var(--sp-3);
    line-height: var(--lh-normal);
}

body.ct-redesign input:focus,
body.ct-redesign textarea:focus,
body.ct-redesign select:focus {
    outline: none;
    border-color: var(--ct-gold) !important;
    box-shadow: 0 0 0 3px var(--ct-gold-glow) !important;
}

body.ct-redesign ::placeholder {
    color: var(--ct-text-dim) !important;
    opacity: 1;
}

/* ─── 07. TOOLBAR STICKY ───────────────────────────────────── */
/* PONTO 1: fundo sólido + blur para não deixar o conteúdo
   "vazar" por trás, e gap igual em linha e coluna. */
body.ct-redesign .cifra-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--control-gap);
    /* row-gap == column-gap: quebra alinhada */
    row-gap: var(--control-gap);
    padding: var(--sp-3) var(--sp-3) !important;
    margin-top: var(--sp-4);

    position: sticky;
    top: var(--header-h);
    z-index: 45;

    background: color-mix(in srgb, var(--ct-surface) 92%, transparent) !important;
    border: 1px solid var(--ct-border) !important;
    border-radius: var(--ct-r-lg) !important;
    box-shadow: var(--ct-shadow-md) !important;
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
}

body.ct-redesign .toolbar-sep {
    width: 1px;
    height: calc(var(--control-h) - 14px);
    background: var(--ct-border-strong) !important;
    margin: 0 var(--sp-1);
    flex: none;
}

/* Quebra deliberada: a barra não cabe numa linha só, então o
   corte é escolhido — linha 1 = leitura (vídeo, simplificar,
   rolagem), linha 2 = ajustes (tom, fonte, ferramentas).
   Sem isto o wrap corta em ponto arbitrário. */
body.ct-redesign .toolbar-break {
    flex-basis: 100%;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

/* Steppers (TOM / FONTE / VEL) — mesma altura dos botões */
body.ct-redesign .tom-inline-control,
body.ct-redesign .ct-stepper {
    gap: var(--sp-1);
    background: var(--ct-surface-2) !important;
    border: 1px solid var(--ct-border) !important;
    padding: 0 var(--sp-2) !important;
    transition: border-color var(--ct-t);
}

body.ct-redesign .tom-inline-control:hover,
body.ct-redesign .ct-stepper:hover {
    border-color: var(--ct-gold-line) !important;
}

/* PONTO 3: rótulo com contraste AA (6.39:1) */
body.ct-redesign .tom-inline-control .lbl,
body.ct-redesign .ct-stepper .lbl {
    color: var(--ct-text-dim) !important;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 0 var(--sp-1);
    user-select: none;
    white-space: nowrap;
}

body.ct-redesign .tom-inline-control button,
body.ct-redesign .ct-stepper button {
    background: transparent !important;
    border: none !important;
    color: var(--ct-text-soft) !important;
    width: 28px;
    height: 28px;
    border-radius: var(--ct-r-sm) !important;
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    transition: background var(--ct-t), color var(--ct-t), transform var(--ct-t);
}

body.ct-redesign .tom-inline-control button:hover,
body.ct-redesign .ct-stepper button:hover {
    background: var(--ct-gold-glow) !important;
    color: var(--ct-gold) !important;
}

body.ct-redesign .tom-inline-control button:active,
body.ct-redesign .ct-stepper button:active {
    transform: scale(.88);
}

body.ct-redesign .tom-val,
body.ct-redesign .ct-stepper-val {
    color: var(--ct-gold) !important;
    font-family: var(--ct-font-mono) !important;
    font-weight: 700 !important;
    font-size: var(--fs-base);
    min-width: 32px;
    text-align: center;
    user-select: none;
    font-variant-numeric: tabular-nums;
}

/* Slider de velocidade */
body.ct-redesign .ct-speed-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 78px;
    height: 4px;
    border-radius: var(--ct-r-pill);
    background: var(--ct-border-strong);
    outline: none;
    cursor: pointer;
    margin: 0 var(--sp-2);
    flex: none;
}

body.ct-redesign .ct-speed-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--ct-gold);
    cursor: pointer;
    box-shadow: var(--ct-shadow-sm);
    transition: transform var(--ct-t), box-shadow var(--ct-t);
}

body.ct-redesign .ct-speed-slider:hover::-webkit-slider-thumb,
body.ct-redesign .ct-speed-slider:focus-visible::-webkit-slider-thumb {
    transform: scale(1.25);
    box-shadow: var(--ct-shadow-gold);
}

body.ct-redesign .ct-speed-slider::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border: none;
    border-radius: 50%;
    background: var(--ct-gold);
    cursor: pointer;
}

/* ─── 08. LEITOR DE CIFRA ──────────────────────────────────── */
body.ct-redesign .cifra-body-card {
    padding: var(--sp-5) !important;
    margin-top: var(--sp-4);
}

/* PONTO 4: largura de leitura + rolagem horizontal controlada.
   `white-space: pre` é obrigatório — o alinhamento acorde↔sílaba
   depende dos espaços literais da monoespaçada. */
body.ct-redesign .cifra-conteudo {
    font-family: var(--ct-font-mono) !important;
    font-size: var(--ct-cifra-size) !important;
    line-height: var(--ct-cifra-leading) !important;
    letter-spacing: 0 !important;
    color: var(--ct-text) !important;
    background: transparent !important;
    max-width: var(--ct-cifra-medida);
    white-space: pre !important;
    word-break: normal !important;
    word-wrap: normal !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    padding-bottom: var(--sp-2);
    tab-size: 4;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    transition: font-size var(--ct-t);
}

/* PONTO 2 e 4: cada linha é um bloco com papel definido.
   É isso que dá o ritmo vertical — a letra "cola" no acorde
   dela, e o respiro fica ENTRE os pares, não dentro deles. */
body.ct-redesign .cl {
    white-space: pre;
    line-height: var(--ct-cifra-leading);
    min-height: 1em;
}

/* Linha de acordes abre um novo par → recebe o respiro */
body.ct-redesign .cl-acordes {
    margin-top: var(--sp-3);
    color: var(--ct-gold);
}

/* ...mas a letra logo abaixo cola no acorde dela */
body.ct-redesign .cl-acordes+.cl-letra,
body.ct-redesign .cl-acordes+.cl-acordes {
    margin-top: 0;
}

/* Primeira linha depois do título não herda margem dupla */
body.ct-redesign .cl-secao+.cl-acordes,
body.ct-redesign .cl-secao+.cl-letra {
    margin-top: 0;
}

body.ct-redesign .cl-vazia {
    height: var(--sp-3);
    min-height: 0;
}

/* Acordes */
body.ct-redesign .cifra-conteudo .chord,
body.ct-redesign .chord {
    color: var(--ct-gold) !important;
    font-weight: 700 !important;
    font-family: var(--ct-font-mono) !important;
    display: inline !important;
    cursor: pointer;
    /* PONTO 4: sublinhado pontilhado NÃO altera a largura do
       caractere — usar text-decoration, nunca border/padding. */
    text-decoration: underline dotted transparent;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color var(--ct-t), text-decoration-color var(--ct-t);
}

body.ct-redesign .chord:hover,
body.ct-redesign .chord:focus-visible {
    color: var(--ct-gold-bright) !important;
    text-decoration-color: currentColor;
}

/* PONTO 2: título de seção com mais peso e menos espaço morto */
body.ct-redesign .section-title {
    font-family: var(--ct-font) !important;
    font-weight: 800 !important;
    color: var(--ct-gold) !important;
    font-size: var(--fs-sm) !important;
    text-transform: uppercase;
    letter-spacing: .14em !important;
    display: block;
    margin: var(--sp-5) 0 var(--sp-2) !important;
    padding-bottom: var(--sp-1);
    border-bottom: 1px solid var(--ct-gold-line) !important;

    /* PONTO 1: impede a toolbar sticky de cobrir o título ao
       rolar ou ao pular via âncora. */
    scroll-margin-top: calc(var(--header-h) + var(--toolbar-h) + var(--sp-4));
}

body.ct-redesign .cifra-conteudo>.cl:first-child .section-title,
body.ct-redesign .section-title:first-child {
    margin-top: 0 !important;
}

body.ct-redesign .section-title-inline {
    color: var(--ct-text-dim) !important;
    font-weight: 700;
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* Tablatura */
body.ct-redesign .cifra-tab,
body.ct-redesign .cifra-conteudo span[style*="Courier"] {
    font-family: var(--ct-font-mono) !important;
    color: var(--ct-text-dim) !important;
    white-space: pre;
}

body.ct-redesign .cifra-footer-row {
    display: flex;
    gap: var(--control-gap);
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--ct-border);
    flex-wrap: wrap;
}

/* ─── 09. SIDEBAR E RELACIONADAS ───────────────────────────── */
body.ct-redesign .sidebar-acordes-card,
body.ct-redesign .sidebar-video-card {
    padding: var(--sp-4) !important;
}

body.ct-redesign .sidebar-card-title,
body.ct-redesign .sidebar-title {
    color: var(--ct-text) !important;
    font-size: var(--fs-sm) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: var(--sp-3);
}

body.ct-redesign .sidebar-acordes-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

body.ct-redesign .acorde-chip,
body.ct-redesign .sidebar-acorde-chip {
    background: var(--ct-surface-2) !important;
    border: 1px solid var(--ct-border) !important;
    color: var(--ct-gold) !important;
    font-family: var(--ct-font-mono) !important;
    font-weight: 700;
    font-size: var(--fs-base);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--ct-r-sm) !important;
    cursor: pointer;
    transition: border-color var(--ct-t), transform var(--ct-t), box-shadow var(--ct-t);
}

body.ct-redesign .acorde-chip:hover,
body.ct-redesign .sidebar-acorde-chip:hover {
    border-color: var(--ct-gold) !important;
    transform: translateY(-2px);
    box-shadow: var(--ct-shadow-gold);
}

body.ct-redesign .relacionada-card {
    background: var(--ct-surface) !important;
    border: 1px solid var(--ct-border) !important;
    border-radius: var(--ct-r) !important;
    transition: border-color var(--ct-t), transform var(--ct-t), box-shadow var(--ct-t);
}

body.ct-redesign .relacionada-card:hover {
    border-color: var(--ct-gold-line) !important;
    transform: translateY(-3px);
    box-shadow: var(--ct-shadow-lg) !important;
}

body.ct-redesign .relacionada-info h4 {
    color: var(--ct-text) !important;
    font-size: var(--fs-base) !important;
}

body.ct-redesign .relacionada-artista {
    color: var(--ct-gold) !important;
    font-weight: 600;
    cursor: pointer;
    display: inline-block;
}

body.ct-redesign .relacionada-artista:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.ct-redesign .relacionada-info small {
    color: var(--ct-text-dim) !important;
}

/* ─── 10. MODAIS ───────────────────────────────────────────── */
body.ct-redesign .modal-overlay,
body.ct-redesign .modal-acordes-overlay,
body.ct-redesign .auth-modal-overlay {
    background: rgba(5, 8, 12, .74) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.ct-redesign .modal-content,
body.ct-redesign .modal-acordes-content,
body.ct-redesign .auth-modal {
    background: var(--ct-surface) !important;
    border: 1px solid var(--ct-border-strong) !important;
    border-radius: var(--ct-r-lg) !important;
    box-shadow: var(--ct-shadow-lg) !important;
    color: var(--ct-text) !important;
    animation: ct-modal-in 300ms var(--ct-ease-out);
}

body.ct-redesign .acorde-card {
    background: var(--ct-surface-2) !important;
    border: 1px solid var(--ct-border) !important;
    border-radius: var(--ct-r) !important;
    transition: border-color var(--ct-t), transform var(--ct-t), box-shadow var(--ct-t);
}

body.ct-redesign .acorde-card:hover {
    border-color: var(--ct-gold) !important;
    transform: translateY(-3px);
    box-shadow: var(--ct-shadow-gold) !important;
}

body.ct-redesign .acorde-card-name {
    color: var(--ct-gold) !important;
    font-family: var(--ct-font-mono) !important;
    font-weight: 700 !important;
}

/* ─── 11. FOOTER ───────────────────────────────────────────── */
/* Escuro nos dois temas, como o header — e pelo mesmo motivo: o
   site.css escreve os textos do rodapé em rgba(255,255,255,.5),
   pensados para o slab escuro original. Com --ct-surface aqui, no
   tema claro o fundo virava branco e o rodapé inteiro sumia
   (branco sobre branco, 1.00:1) em todas as ~30 páginas claras. */
/* Gradiente, não cor chapada: o rodapé é o fim da página e um bloco
   liso lê como "corte". A rampa vertical do #161c26 ao #0b0f14 dá a
   sensação de profundidade que o header tem com o blur, e o halo
   dourado no topo amarra os dois extremos da página. */
body.ct-redesign .footer,
body.ct-redesign.theme-light .footer {
    /* background-color explícito sob os gradientes: se o navegador
       não pintar as camadas de imagem (ou uma ferramenta amostrar só
       a cor), o rodapé continua escuro em vez de herdar o marfim do
       corpo e deixar o texto claro sobre fundo claro. */
    background-color: #12171f !important;
    background-image:
        radial-gradient(120% 90% at 50% 0%, rgba(212, 175, 55, .07) 0%, transparent 62%),
        linear-gradient(180deg, #161c26 0%, #12171f 45%, #0b0f14 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, .09) !important;
    color: var(--ct-footer-text) !important;
    position: relative;
    margin-top: var(--sp-7);
}

/* Contraste dos textos do rodapé, medido sobre #12171f (o tom médio
   da rampa):
     título dourado #d4af37 .... 8,55:1  AAA
     link      #b6c0cc ......... 8,90:1  AAA
     copyright #8b96a5 ......... 5,10:1  AA
   Especificidade alta de propósito — três folhas legadas ainda
   escrevem estes links em rgba(255,255,255,.45), que dá 4,0:1. */
body.ct-redesign .footer .footer-col a,
body.ct-redesign.theme-light .footer .footer-col a,
body.ct-redesign .footer .footer-col li a,
body.ct-redesign.theme-light .footer .footer-col li a {
    color: var(--ct-footer-text) !important;
    opacity: 1 !important;
}

body.ct-redesign .footer .footer-col h4,
body.ct-redesign.theme-light .footer .footer-col h4 {
    color: var(--ct-header-accent) !important;
}

/* O ícone ao lado do link acompanha o link, mas um degrau abaixo —
   é ornamento, não conteúdo. */
body.ct-redesign .footer .footer-col a i,
body.ct-redesign.theme-light .footer .footer-col a i {
    color: var(--ct-footer-dim) !important;
    transition: color var(--ct-t), transform var(--ct-t);
}

body.ct-redesign .footer .footer-col a:hover,
body.ct-redesign.theme-light .footer .footer-col a:hover {
    color: var(--ct-header-accent) !important;
}

body.ct-redesign .footer .footer-col a:hover i,
body.ct-redesign.theme-light .footer .footer-col a:hover i {
    color: var(--ct-header-accent) !important;
    transform: translateX(2px);
}

body.ct-redesign .footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ct-gold-line), transparent);
}

body.ct-redesign .footer a,
body.ct-redesign.theme-light .footer a {
    color: var(--ct-footer-text) !important;
    transition: color var(--ct-t);
}

body.ct-redesign .footer a:hover,
body.ct-redesign.theme-light .footer a:hover {
    /* --ct-header-accent, não --ct-gold: no tema claro o segundo é
       escurecido para valer sobre branco, e o rodapé é escuro. */
    color: var(--ct-header-accent) !important;
}

body.ct-redesign .footer p,
body.ct-redesign .footer .footer-copy,
body.ct-redesign .footer .footer-copy p,
body.ct-redesign.theme-light .footer p,
body.ct-redesign.theme-light .footer .footer-copy p {
    color: var(--ct-footer-dim) !important;
}

/* ─── 11c. PLAYLIST DE VIDEOAULAS ──────────────────────────── */
/* `.playlist-items` rola dentro de um max-height de 420px. Sem
   tratamento nenhum na borda, a linha cortada no topo encosta no
   cabeçalho e lê como se o cabeçalho estivesse POR CIMA da aula —
   foi exatamente o que apareceu no print. Não é sobreposição: é uma
   borda de rolagem sem acabamento.

   Duas peças resolvem: o cabeçalho ganha sombra e empilhamento
   próprio (fica claro que ele está na frente e é fixo), e a lista
   ganha uma máscara que desvanece os 14px do topo — a linha cortada
   some em vez de bater no corte. */
body.ct-redesign .playlist-header {
    position: relative;
    z-index: 2;
    box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .55);
}

body.ct-redesign .playlist-items {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    scrollbar-width: thin;
    scrollbar-color: var(--ct-gold-line) transparent;
    scroll-padding-top: 8px;
}

body.ct-redesign .playlist-items::-webkit-scrollbar {
    width: 8px;
}

body.ct-redesign .playlist-items::-webkit-scrollbar-thumb {
    background: var(--ct-gold-line);
    border-radius: 99px;
}

/* Item ativo: a barra dourada à esquerda substitui o fundo colorido
   — marca a posição sem competir com a miniatura do vídeo. */
body.ct-redesign .playlist-item {
    border-left: 3px solid transparent;
    transition: background var(--ct-t), border-color var(--ct-t);
}

body.ct-redesign .playlist-item:hover {
    background: var(--ct-gold-glow) !important;
}

body.ct-redesign .playlist-item.active {
    background: var(--ct-gold-glow) !important;
    border-left-color: var(--ct-gold) !important;
}


/* ─── 11b. BOTÃO FLUTUANTE DE PARAR ROLAGEM ────────────────── */
/* No celular a toolbar não é sticky, então enquanto a rolagem
   automática corre o botão "Parar" fica fora de alcance. Este
   FAB aparece só nesse estado. */
body.ct-redesign .ct-fab-stop {
    display: none;
    position: fixed;
    right: max(var(--sp-4), env(safe-area-inset-right));
    bottom: max(var(--sp-5), env(safe-area-inset-bottom));
    z-index: 70;

    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    cursor: pointer;

    background: var(--ct-gold-metal);
    color: #10141c;
    font-size: var(--fs-lg);
    align-items: center;
    justify-content: center;
    box-shadow: var(--ct-shadow-gold-lg);
    animation: ct-pulse-gold 2.4s ease-in-out infinite;
}

body.theme-light .ct-fab-stop {
    color: #fff;
}

body.ct-redesign.rolando .ct-fab-stop {
    display: inline-flex;
}

body.ct-redesign .ct-fab-stop:active {
    transform: scale(.92);
}

/* No desktop a toolbar é sticky — o botão Parar já está sempre
   visível ali, o FAB seria redundante. */
@media (min-width: 641px) {
    body.ct-redesign.rolando .ct-fab-stop {
        display: none;
    }
}

/* ─── 11c. RESÍDUOS DA PALETA LARANJA ANTIGA ───────────────── */
/* Levantados varrendo a página renderizada no navegador atrás de
   #ff6b35 / #ff8e53 — o laranja do tema Cifra Club que sobrou em
   componentes com !important próprio. Desde a p50 já não sobra
   nenhum: os literais foram trocados na origem. */
body.ct-redesign .text-brand-500,
body.ct-redesign .fas.fa-home,
body.ct-redesign .fas.fa-random,
body.ct-redesign .fab.fa-youtube,
body.ct-redesign .text-orange-500,
body.ct-redesign .laranja {
    color: var(--ct-gold) !important;
}

/* Dentro do header vale o dourado CLARO mesmo no tema claro: lá o
   fundo é escuro nos dois temas, e --ct-gold (escurecido para valer
   sobre branco) dava 3.4:1 no ícone de "Início". */
body.ct-redesign .ct-header .text-brand-500,
body.ct-redesign .ct-header .fas,
body.ct-redesign .ct-header .laranja,
body.ct-redesign .footer .fas,
body.ct-redesign #ct-mobile-nav .fas {
    color: inherit !important;
}

body.ct-redesign .ct-header .ct-nav-link.is-active .fas,
body.ct-redesign .ct-logo h1 .text-brand-500 {
    color: var(--ct-header-accent) !important;
}

/* Videoaula era o único botão da toolbar em laranja sólido,
   o que roubava a ênfase do estado "ativo" dourado. */
body.ct-redesign .tool-btn.btn-video {
    background: var(--ct-surface-2) !important;
    border-color: var(--ct-border) !important;
    color: var(--ct-text-soft) !important;
}

body.ct-redesign .tool-btn.btn-video:hover {
    background: var(--ct-surface-3) !important;
    border-color: var(--ct-gold-line) !important;
    color: var(--ct-gold) !important;
}

body.ct-redesign .tool-btn.btn-video.active {
    background: var(--ct-gold-metal) !important;
    border-color: var(--ct-gold) !important;
    color: #10141c !important;
}

body.ct-redesign .spinner {
    border-top-color: var(--ct-gold) !important;
}

/* Badge de cifra verificada — o verde puro destoava do dourado.
   Mantém a leitura semântica, mas dessaturado para conviver. */
body.ct-redesign .badge-principal {
    background: rgba(63, 185, 80, .12) !important;
    color: var(--ct-success) !important;
    border: 1px solid rgba(63, 185, 80, .3) !important;
    border-radius: var(--ct-r-pill) !important;
}

/* ─── 12. ANIMAÇÕES ────────────────────────────────────────── */
@keyframes ct-pulse-gold {

    0%,
    100% {
        box-shadow: var(--ct-shadow-gold);
    }

    50% {
        box-shadow: var(--ct-shadow-gold-lg);
    }
}

@keyframes ct-fade-up {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes ct-modal-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Entrada escalonada dos blocos principais */
body.ct-redesign .song-header-card,
body.ct-redesign .cifra-toolbar,
body.ct-redesign .cifra-body-card,
body.ct-redesign .sidebar-acordes-card {
    animation: ct-fade-up 520ms var(--ct-ease-out) backwards;
}

body.ct-redesign .song-header-card {
    animation-delay: 0ms;
}

body.ct-redesign .cifra-toolbar {
    animation-delay: 70ms;
}

body.ct-redesign .cifra-body-card {
    animation-delay: 140ms;
}

body.ct-redesign .sidebar-acordes-card {
    animation-delay: 210ms;
}

/* ─── 13. RESPONSIVO ───────────────────────────────────────── */
@media (max-width: 960px) {
    :root {
        --header-h: 56px;
    }

    body.ct-redesign .cifra-toolbar {
        border-radius: var(--ct-r) !important;
    }
}

@media (max-width: 640px) {
    :root {
        /* PONTO 3: alvo de toque ≥ 44px no mobile */
        --control-h: 44px;
        --control-px: 10px;
        --control-gap: 6px;
        --ct-cifra-size: 13.5px;
        --ct-cifra-leading: 1.55;
        --ct-cifra-medida: 100%;
        --fs-2xl: 25px;
    }

    /* TOOLBAR — quebra em vez de rolar.
       Rolagem horizontal esconde controles atrás de um gesto
       que ninguém descobre. Numa barra usada com o violão na
       mão, tudo precisa estar visível. Sobrescreve o
       `overflow-x:auto; flex-wrap:nowrap` do bugfixes_patch. */
    body.ct-redesign .cifra-toolbar {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        justify-content: center;
        padding: var(--sp-2) !important;

        /* NÃO sticky no celular. Com tudo visível a barra ocupa
           3–4 linhas (~160px); grudada na tela, ela e o header
           comeriam ~27% do visor o tempo todo. Aqui ela rola
           junto com o conteúdo. */
        position: static !important;
    }

    /* Separadores consomem largura preciosa e a quebra de linha
       já agrupa visualmente */
    body.ct-redesign .toolbar-sep,
    body.ct-redesign .toolbar-break {
        display: none !important;
    }

    body.ct-redesign .tom-inline-control button,
    body.ct-redesign .ct-stepper button {
        width: 36px;
        height: 36px;
    }

    /* O slider fica colado no botão de Rolagem, então o rótulo
       "VEL" é redundante — e cada pixel conta aqui. TOM e FONTE
       mantêm o rótulo porque um sem o outro seria ambíguo. */
    body.ct-redesign .ct-stepper-vel .lbl {
        display: none;
    }

    body.ct-redesign .ct-speed-slider {
        width: 62px;
        margin: 0 var(--sp-1);
    }

    /* Rótulo some, ícone fica — o botão vira quadrado 44x44 */
    body.ct-redesign .tool-btn .btn-label {
        display: none;
    }

    body.ct-redesign .tool-btn {
        padding: 0 !important;
        width: var(--control-h);
        justify-content: center;
    }

    body.ct-redesign .tool-btn i {
        font-size: var(--fs-md);
    }

    /* CHIPS DE INFO — grade de 3 colunas iguais.
       Com flex-basis 150px eles estouravam o card em telas de
       ~320px e a DIFICULDADE era empurrada para fora. */
    body.ct-redesign .info-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--sp-2);
        margin-top: var(--sp-4) !important;
    }

    body.ct-redesign .info-tab-item {
        min-width: 0;
        flex: none;
        padding: var(--sp-2) var(--sp-1) !important;
        overflow: hidden;
    }

    body.ct-redesign .info-tab-label {
        font-size: 9px;
        letter-spacing: .03em;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.ct-redesign .info-tab-value {
        font-size: var(--fs-base) !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }

    body.ct-redesign .cifra-body-card,
    body.ct-redesign .song-header-card {
        padding: var(--sp-4) !important;
        border-radius: var(--ct-r) !important;
    }

    /* Em telas muito estreitas cada pixel de largura vira um
       ponto a mais de fonte na cifra — o padding é o que dá
       para negociar sem quebrar o alinhamento. */
    @media (max-width: 380px) {
        body.ct-redesign .cifra-body-card {
            padding: var(--sp-3) var(--sp-2) !important;
        }
    }

    /* A cifra continua com rolagem horizontal PRÓPRIA — aqui
       ela é legítima, o alinhamento não pode quebrar. */
    body.ct-redesign .cifra-conteudo {
        overflow-x: auto !important;
    }

    /* Toolbar não é mais sticky aqui, então só o header conta */
    body.ct-redesign .section-title {
        scroll-margin-top: calc(var(--header-h) + var(--sp-3));
    }
}

/* ─── 14. IMPRESSÃO ────────────────────────────────────────── */
@media print {

    body.ct-redesign .ct-header,
    body.ct-redesign .footer,
    body.ct-redesign .cifra-toolbar,
    body.ct-redesign .cifra-side-col,
    body.ct-redesign .cifra-footer-row,
    body.ct-redesign #youtube-miniplayer-container,
    body.ct-redesign .cifras-relacionadas-section,
    body.ct-redesign::before {
        display: none !important;
    }

    body.ct-redesign,
    body.ct-redesign .cifra-body-card,
    body.ct-redesign .song-header-card {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
        border: none !important;
        animation: none !important;
    }

    body.ct-redesign .cifra-conteudo {
        color: #000 !important;
        font-size: 11pt !important;
        max-width: none;
        overflow: visible !important;
    }

    body.ct-redesign .chord,
    body.ct-redesign .section-title {
        color: #000 !important;
        font-weight: 700 !important;
    }
}

/* ─── 15. ACESSIBILIDADE ───────────────────────────────────── */
/* PONTO 3: foco visível em TODOS os controles */
body.ct-redesign :focus-visible {
    outline: 2px solid var(--ct-gold);
    outline-offset: 2px;
    border-radius: var(--ct-r-sm);
}

body.ct-redesign .tool-btn:focus-visible,
body.ct-redesign .action-btn:focus-visible,
body.ct-redesign .acorde-chip:focus-visible {
    border-color: var(--ct-gold) !important;
    box-shadow: var(--ct-shadow-gold) !important;
}

/* PONTO 3: respeitar prefers-reduced-motion.
   A rolagem automática também é desligada — ver cifra.html. */
@media (prefers-reduced-motion: reduce) {

    body.ct-redesign *,
    body.ct-redesign *::before,
    body.ct-redesign *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    body.ct-redesign .tool-btn:hover,
    body.ct-redesign .action-btn:hover,
    body.ct-redesign .acorde-chip:hover,
    body.ct-redesign .relacionada-card:hover {
        transform: none !important;
    }
}

/* ============================================================
   16. PÁGINAS DE CONTEÚDO E RODAPÉ — dourado escuro
   ------------------------------------------------------------
   Termos, privacidade, cookies, FAQ, ajudas, glossário, sobre,
   contato, trabalhe conosco, newsletter, política de partituras.

   Essas páginas foram desenhadas claras, com cartões brancos e
   acentos laranja. Como cada uma tem nomes de classe próprios
   (policy-section, guide-card, principle-card, callout...), o
   alvo aqui é o PADRÃO (sufixos -card/-box/-hero) em vez de uma
   lista exaustiva — tudo escopado em .ct-pagina-conteudo para
   não vazar para as páginas de aplicação.
   ============================================================ */

/* background-COLOR, não o atalho: `background` apagaria o halo
   dourado que a seção 03 põe em background-image. */
body.ct-pagina-conteudo {
    background-color: var(--ct-bg) !important;
    color: var(--ct-text) !important;
}

/* ── Hero ──
   Escopo em `ct-redesign`, não em `ct-pagina-conteudo`: o hero é
   uma faixa ESCURA em qualquer página, clara ou escura. Enquanto
   estava restrito às páginas de política, os heros de lercifras,
   afinar, glossário e FAQ continuavam no gradiente petróleo da
   marca antiga — a "cor nada a ver" que o dono apontou. */
body.ct-redesign [class$="-hero"],
body.ct-redesign [class*="-hero "] {
    background:
        radial-gradient(120% 160% at 50% -20%, var(--ct-gold-glow), transparent 60%),
        linear-gradient(180deg, #12171f 0%, #0d1117 100%) !important;
    border-bottom: 1px solid var(--ct-gold-line) !important;
    position: relative;
}

body.ct-redesign [class$="-hero"] h1,
body.ct-redesign [class$="-hero"] h2,
body.ct-redesign [class*="-hero "] h1,
body.ct-redesign [class*="-hero "] h2 {
    /* Branco fixo: o hero é escuro mesmo no tema claro, onde
       --ct-text é quase preto. */
    color: #e6edf3 !important;
}

/* O trecho destacado do título (era laranja) */
body.ct-redesign [class$="-hero"] h1 span,
body.ct-redesign [class*="-hero "] h1 span,
body.ct-redesign [class$="-hero"] .destaque {
    background: linear-gradient(135deg, #f0d98a 0%, #d4af37 38%,
            #c9a431 62%, #e5c76b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent !important;
}

body.ct-redesign [class$="-hero"] p,
body.ct-redesign [class*="-hero "] p {
    color: #b6c0cc !important;
}

/* Pílulas de metadados dentro do hero (Leitura ~10 min, Nível…) */
body.ct-redesign [class$="-hero"] [class*="meta"],
body.ct-redesign [class$="-hero"] [class*="chip"],
body.ct-redesign [class$="-hero"] [class*="tag"] {
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid var(--ct-gold-line) !important;
    color: #cdd6e0 !important;
}

/* Números de destaque e ícones do hero traziam #ff6b35 fixo no
   código (não via variável), então não foram alcançados pelo
   remap da secção 02a. */
body.ct-pagina-conteudo [class*="stat-num"],
body.ct-pagina-conteudo [class*="-num"],
body.ct-pagina-conteudo [class$="-hero"] i,
body.ct-pagina-conteudo .hero-badge i,
body.ct-pagina-conteudo .sec-intro i {
    color: var(--ct-gold) !important;
}

body.ct-pagina-conteudo .hero-badge {
    background: var(--ct-gold-glow) !important;
    border: 1px solid var(--ct-gold-line) !important;
    color: var(--ct-gold) !important;
}

/* Só as pílulas de metadados. NÃO usar [class*="hero-stat"]: isso
   pinta também o contêiner dos números e cria um retângulo solto
   atrás deles. */
body.ct-pagina-conteudo .meta-pill {
    background: var(--ct-surface-2) !important;
    border: 1px solid var(--ct-border) !important;
    color: var(--ct-text-soft) !important;
}

body.ct-pagina-conteudo .hero-stat-num,
body.ct-pagina-conteudo [class*="stat-num"] {
    color: var(--ct-gold) !important;
    background: transparent !important;
    border: 0 !important;
}

body.ct-pagina-conteudo .hero-stat-label,
body.ct-pagina-conteudo [class*="stat-label"] {
    color: var(--ct-text-dim) !important;
    background: transparent !important;
    border: 0 !important;
}

/* ── Cartões, seções e caixas ──
   [class*="-card"] casa no MEIO da palavra: pegava `hero-card-logo`
   (que é só o texto do logo dentro do cartão) e desenhava uma caixa
   com borda e sombra em volta dele. O par `[class$="-card"]` +
   `[class*="-card "]` cobre "classe que TERMINA em -card", esteja
   ela sozinha ou seguida de outras. Mesma ideia para -box/-panel/
   -item/-icon: é a diferença entre "é um cartão" e "vive num". */
body.ct-pagina-conteudo .policy-section,
body.ct-pagina-conteudo .summary-float,
body.ct-pagina-conteudo .callout,
body.ct-pagina-conteudo .policy-layout,
body.ct-pagina-conteudo [class$="-card"],
body.ct-pagina-conteudo [class*="-card "],
body.ct-pagina-conteudo [class$="-box"],
body.ct-pagina-conteudo [class*="-box "],
body.ct-pagina-conteudo [class$="-panel"],
body.ct-pagina-conteudo [class*="-panel "],
body.ct-pagina-conteudo [class$="-item"],
body.ct-pagina-conteudo [class*="-item "] {
    background: var(--ct-surface) !important;
    border-color: var(--ct-border) !important;
    color: var(--ct-text) !important;
    box-shadow: var(--ct-shadow-md) !important;
}

/* Contêiner de layout não é cartão — sem fundo nem sombra */
body.ct-pagina-conteudo .policy-layout {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

body.ct-pagina-conteudo .policy-section,
body.ct-pagina-conteudo [class$="-card"],
body.ct-pagina-conteudo [class*="-card "] {
    border: 1px solid var(--ct-border) !important;
    border-radius: var(--ct-r-lg) !important;
    transition: border-color var(--ct-t), transform var(--ct-t);
}

body.ct-pagina-conteudo .policy-section:hover,
body.ct-pagina-conteudo [class$="-card"]:hover,
body.ct-pagina-conteudo [class*="-card "]:hover {
    border-color: var(--ct-gold-line) !important;
}

/* ── Blocos auxiliares (sumário lateral, barras, avisos) ──
   Não seguem o padrão -card/-box, então vão nomeados. */
body.ct-pagina-conteudo .sidebar-nav,
body.ct-pagina-conteudo .quick-links,
body.ct-pagina-conteudo .version-bar,
body.ct-pagina-conteudo .summary-box,
body.ct-pagina-conteudo .toc,
body.ct-pagina-conteudo aside {
    background: var(--ct-surface) !important;
    border: 1px solid var(--ct-border) !important;
    border-radius: var(--ct-r-lg) !important;
    color: var(--ct-text) !important;
}

body.ct-pagina-conteudo .sidebar-nav a,
body.ct-pagina-conteudo .quick-links a {
    color: var(--ct-text-soft) !important;
    border-color: var(--ct-border) !important;
    transition: background var(--ct-t), color var(--ct-t);
}

body.ct-pagina-conteudo .sidebar-nav a:hover {
    background: var(--ct-gold-glow) !important;
    color: var(--ct-gold) !important;
}

body.ct-pagina-conteudo .sidebar-nav a.active {
    background: var(--ct-gold-glow) !important;
    color: var(--ct-gold) !important;
    border-left: 3px solid var(--ct-gold) !important;
    font-weight: 600;
}

/* Cabeçalho do sumário */
body.ct-pagina-conteudo .sidebar-nav > :first-child {
    background: var(--ct-surface-2) !important;
    color: var(--ct-gold) !important;
    border-bottom: 1px solid var(--ct-border) !important;
}

/* Barra de versão: texto claro, só a data/e-mail em dourado */
body.ct-pagina-conteudo .version-bar {
    color: var(--ct-text-soft) !important;
}

body.ct-pagina-conteudo .version-bar strong,
body.ct-pagina-conteudo .version-bar a {
    color: var(--ct-gold) !important;
}

/* Migalhas de pão */
body.ct-pagina-conteudo .breadcrumb,
body.ct-pagina-conteudo [class*="breadcrumb"] {
    color: var(--ct-text-dim) !important;
}

/* ── Avisos com leitura semântica, em versão escura ── */
body.ct-pagina-conteudo .callout {
    background: var(--ct-surface-2) !important;
    border: 1px solid var(--ct-border) !important;
    border-left: 3px solid var(--ct-gold) !important;
    border-radius: var(--ct-r) !important;
}

body.ct-pagina-conteudo .callout.info {
    background: rgba(56, 139, 253, .10) !important;
    border-left-color: #58a6ff !important;
}

body.ct-pagina-conteudo .callout.info,
body.ct-pagina-conteudo .callout.info p {
    color: #a5d0ff !important;
}

body.ct-pagina-conteudo .callout.danger {
    background: rgba(248, 81, 73, .10) !important;
    border-left-color: var(--ct-danger) !important;
}

body.ct-pagina-conteudo .callout.danger,
body.ct-pagina-conteudo .callout.danger p {
    color: #ffb3ae !important;
}

body.ct-pagina-conteudo .perm-box.allowed {
    background: rgba(63, 185, 80, .09) !important;
    border: 1px solid rgba(63, 185, 80, .32) !important;
}

body.ct-pagina-conteudo .perm-box.denied {
    background: rgba(248, 81, 73, .09) !important;
    border: 1px solid rgba(248, 81, 73, .32) !important;
}

/* ── Texto corrido ── */
body.ct-pagina-conteudo p,
body.ct-pagina-conteudo li,
body.ct-pagina-conteudo td,
body.ct-pagina-conteudo dd,
body.ct-pagina-conteudo .sec-intro {
    color: var(--ct-text-soft) !important;
}

body.ct-pagina-conteudo h2,
body.ct-pagina-conteudo h3,
body.ct-pagina-conteudo h4,
body.ct-pagina-conteudo dt,
body.ct-pagina-conteudo strong,
body.ct-pagina-conteudo b {
    color: var(--ct-text) !important;
}

/* Títulos de seção ganham o dourado */
body.ct-pagina-conteudo .policy-section h2,
body.ct-pagina-conteudo .policy-section h3 {
    color: var(--ct-gold) !important;
}

/* Dourado só nos links de texto. Um <a> que já é um botão cheio
   (cta-primary, action-*) tem fundo dourado próprio — pintar o
   texto de dourado também deixava 1.63:1, dourado sobre dourado. */
/* O rodapé e o cabeçalho ficam de fora: são escuros nos dois temas, e
   no tema claro o `--ct-gold` é escurecido de propósito para valer
   sobre branco (#8a6a15). Sobre o rodapé escuro isso dá 3,6:1 — abaixo
   do mínimo para texto pequeno, e era o "Sobre nós" do rodapé de todas
   as páginas de conteúdo. Lá dentro mandam as regras do rodapé, que já
   usam os tokens próprios dele. */
/* No tema claro, um <a> dentro de bloco escuro sai daqui: quem lhe
   dá cor é a §29a, com o dourado do header. Ver p46. */
body.ct-pagina-conteudo:not(.theme-light) a:not(.tool-btn):not(.action-btn):not([class*="btn"]):not([class*="cta"]):not([class*="action"]):not(.footer a):not(.ct-header a):not(#ct-mobile-nav a),
body.ct-pagina-conteudo.theme-light a:not(.tool-btn):not(.action-btn):not([class*="btn"]):not([class*="cta"]):not([class*="action"]):not(.footer a):not(.ct-header a):not(#ct-mobile-nav a):not(.ct-bloco-escuro):not(.ct-bloco-escuro *) {
    color: var(--ct-gold) !important;
}

/* Botão cheio: o par certo do dourado profundo é o branco. */
body.ct-pagina-conteudo .cta-primary,
body.ct-pagina-conteudo [class*="cta"][class*="primary"] {
    color: #fff !important;
}

/* ── Ícones, selos e pílulas ──
   O dourado vale para todo ícone. O FUNDO, não: quase todo
   `*-icon` do site é um <div> com width/height próprios (um selo),
   mas alguns são só o glifo — `.number-icon`, `.error-icon`. Num
   <div> sem largura o fundo estica e vira uma barra atravessando o
   cartão inteiro (era o que acontecia com "O CifraTurn em números"
   em sobre.html). Por isso o fundo é revogado logo abaixo nesses. */
body.ct-pagina-conteudo .ps-icon,
body.ct-pagina-conteudo [class$="-icon"],
body.ct-pagina-conteudo [class*="-icon "] {
    background: var(--ct-gold-glow) !important;
    color: var(--ct-gold) !important;
    border-color: var(--ct-gold-line) !important;
}

/* Ícones que são apenas glifo — sem caixa, sem fundo.
   Ao criar um `*-icon` novo sem width/height no CSS da página,
   acrescentar aqui. */
body.ct-pagina-conteudo .number-icon,
body.ct-pagina-conteudo .error-icon,
body.ct-pagina-conteudo .ct-icon-plain {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: var(--ct-gold) !important;
}

body.ct-pagina-conteudo .summary-pill,
body.ct-pagina-conteudo [class$="-pill"],
body.ct-pagina-conteudo [class*="-pill "],
body.ct-pagina-conteudo [class$="badge"],
body.ct-pagina-conteudo [class*="badge "] {
    background: var(--ct-surface-2) !important;
    border: 1px solid var(--ct-border) !important;
    color: var(--ct-text-soft) !important;
}

/* Marcadores semânticos mantêm a leitura (sim/não), dessaturados */
body.ct-pagina-conteudo .summary-pill .fa-check-circle {
    color: var(--ct-success) !important;
}

body.ct-pagina-conteudo .summary-pill .fa-times-circle,
body.ct-pagina-conteudo .summary-pill .fa-ban {
    color: var(--ct-danger) !important;
}

/* ── Acordeões (FAQ, ajudas, glossário) ──
   O estado aberto pintava o gatilho de branco-creme, feito para
   cartão claro. Sobre fundo escuro virava um bloco branco no meio
   da página. */
body.ct-pagina-conteudo .faq-item.is-open .faq-trigger,
body.ct-pagina-conteudo [class*="-item"].is-open [class*="-trigger"],
body.ct-pagina-conteudo [class*="-item"].is-open > button,
body.ct-pagina-conteudo [class*="-item"].active > button {
    background: var(--ct-gold-glow) !important;
}

body.ct-pagina-conteudo .faq-item.is-open {
    border-color: var(--ct-gold-line) !important;
}

body.ct-pagina-conteudo .faq-q-text,
body.ct-pagina-conteudo [class*="-q-text"],
body.ct-pagina-conteudo [class*="-question"] {
    color: var(--ct-text) !important;
}

body.ct-pagina-conteudo .faq-q-num,
body.ct-pagina-conteudo .faq-item.is-open .faq-q-num {
    background: var(--ct-gold-glow) !important;
    color: var(--ct-gold) !important;
    border: 1px solid var(--ct-gold-line) !important;
}

body.ct-pagina-conteudo .faq-body-inner,
body.ct-pagina-conteudo [class*="-body-inner"],
body.ct-pagina-conteudo [class*="-answer"] {
    color: var(--ct-text-soft) !important;
}

/* Filtros por tema */
body.ct-pagina-conteudo .topic-btn {
    background: var(--ct-surface-2) !important;
    border: 1px solid var(--ct-border) !important;
    color: var(--ct-text-soft) !important;
}

body.ct-pagina-conteudo .topic-btn:hover {
    border-color: var(--ct-gold-line) !important;
    color: var(--ct-gold) !important;
}

body.ct-pagina-conteudo .topic-btn.active,
body.ct-pagina-conteudo .topic-btn.is-active {
    background: var(--ct-gold-glow) !important;
    border-color: var(--ct-gold) !important;
    color: var(--ct-gold) !important;
}

body.ct-pagina-conteudo .topic-count,
body.ct-pagina-conteudo .block-count {
    background: var(--ct-surface-3) !important;
    color: var(--ct-text-soft) !important;
}

body.ct-pagina-conteudo .faq-tag {
    background: var(--ct-gold-glow) !important;
    color: var(--ct-gold) !important;
    border: 1px solid var(--ct-gold-line) !important;
}

/* Item de navegação marcado como atual */
body.ct-pagina-conteudo .current {
    color: var(--ct-gold) !important;
}

/* ── Tabelas ──
   As páginas de política já tinham tido a COR do texto convertida
   para os tokens escuros (#b6c0cc / #e6edf3), mas os fundos ficaram
   claros: `tr:nth-child(even) { background:#f8fafc }` e
   `tr:hover { background:#fff7ed }`. Resultado: linha branca com
   texto cinza-claro — ~1.3:1, ilegível (privacidade, cookies,
   termos, afinar). O zebrado agora é escuro, na mesma escada de
   superfícies do resto do tema. */
body.ct-pagina-conteudo table {
    border-color: var(--ct-border) !important;
    background: transparent !important;
}

body.ct-pagina-conteudo thead {
    background: var(--ct-surface-2) !important;
}

body.ct-pagina-conteudo th {
    background: var(--ct-surface-2) !important;
    color: var(--ct-gold) !important;
    border-color: var(--ct-border) !important;
}

body.ct-pagina-conteudo tbody tr {
    background: transparent !important;
    transition: background var(--ct-t);
}

body.ct-pagina-conteudo tbody tr:nth-child(even) {
    background: var(--ct-surface-2) !important;
}

body.ct-pagina-conteudo tbody tr:hover,
body.ct-pagina-conteudo tbody tr:nth-child(even):hover {
    background: var(--ct-gold-glow) !important;
}

body.ct-pagina-conteudo td {
    border-color: var(--ct-border) !important;
    background: transparent !important;
}

/* ── A tabela rola em vez de estourar ──
   Uma tabela de três colunas de texto não encolhe abaixo da largura
   mínima do conteúdo. Com `width: 100%` num ecrã de 390 px, o que
   acontece é que ela passa por cima da margem direita e a última
   coluna fica cortada FORA do ecrã, sem forma nenhuma de lá chegar:
   era o "PRAZO DE RESPOSTA" dos termos, a "FINALIDADE" da
   privacidade e o "EXEMPLO" do lercifras.

   `display: block` faz da própria tabela a caixa de rolagem — sem
   precisar de um invólucro em cada uma das ~20 tabelas das páginas
   de política. O conteúdo continua a compor-se como tabela (as
   linhas e células mantêm o `display` delas); o que muda é que o
   excesso passa a rolar na horizontal em vez de sair pela borda.

   O `min-width` nas células impede o contrário — colunas espremidas
   a uma palavra por linha, que é o que o navegador faz quando tenta
   caber a todo o custo.

   Só no telemóvel: no computador as tabelas cabem e `display: block`
   tiraria-lhes o `width: 100%`. */
/* ── A tabela rola em vez de estourar (telemóvel) ──
   Uma tabela de três ou quatro colunas de texto não encolhe abaixo
   da largura mínima do conteúdo. Com `width: 100%` num ecrã de
   390 px ela passava por cima da margem direita e a última coluna
   ficava cortada FORA do ecrã, sem forma nenhuma de lá chegar: era o
   "PRAZO DE RESPOSTA" dos termos, a "FINALIDADE" da privacidade e o
   "EXEMPLO" do lercifras.

   `display: block` faz da própria tabela a caixa de rolagem, sem
   precisar de um invólucro em cada uma das ~20 tabelas das páginas
   de política. O conteúdo continua a compor-se como tabela; o que
   muda é que o excesso rola na horizontal.

   POR QUE NÃO SE FAZ CABER À FORÇA: `overflow-wrap: anywhere` nas
   células fá-las caber sempre — é o único valor que conta para a
   largura mínima do conteúdo — e medido dá zero de rolagem em todas
   as páginas. Mas parte as palavras a meio para lá chegar:
   "Stri/pe", "transa/ção", "Últimos 4 dígito/s do cartão". Num
   documento que alguém tem mesmo de ler, isso é pior do que
   arrastar o dedo. Fica `break-word`, que só parte a palavra que
   sozinha não cabe na linha (um email, um URL), e o `min-width`
   impede o contrário — colunas espremidas a uma letra por linha. */
@media (max-width: 768px) {
    body.ct-pagina-conteudo table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        /* A barra fica à vista, sempre: é ela que diz que há mais
           coluna do lado de lá. Sem isto, no telemóvel, ela só
           aparece DEPOIS de se arrastar — quando já não é preciso. */
        scrollbar-width: thin;
        scrollbar-color: var(--ct-gold-line) transparent;
    }

    body.ct-pagina-conteudo table::-webkit-scrollbar {
        height: 6px;
    }

    body.ct-pagina-conteudo table::-webkit-scrollbar-track {
        background: transparent;
    }

    body.ct-pagina-conteudo table::-webkit-scrollbar-thumb {
        background: var(--ct-gold-line);
        border-radius: 999px;
    }

    body.ct-pagina-conteudo table th,
    body.ct-pagina-conteudo table td {
        overflow-wrap: break-word;
        min-width: 7em;
    }

    body.ct-pagina-conteudo table th:first-child,
    body.ct-pagina-conteudo table td:first-child {
        min-width: 8em;
    }
}

/* Células marcadas (ex.: .open-note em afinar.html) usavam o
   laranja antigo com fundo próprio — precisam vencer o zebrado. */
body.ct-pagina-conteudo td.open-note,
body.ct-pagina-conteudo td[class*="destaque"] {
    background: var(--ct-gold-glow) !important;
    color: var(--ct-gold) !important;
}

/* ── Campos de formulário (contato, newsletter) ── */
body.ct-pagina-conteudo .form-group label {
    color: var(--ct-text-soft) !important;
}

/* ============================================================
   16b. TEMA CLARO — CAMADA DE INVERSÃO
   ------------------------------------------------------------
   O escuro virou o padrão do site: as páginas trazem os hexes
   escuros escritos no próprio HTML. O tema claro, portanto, não
   pode ser "a ausência do escuro" — precisa REPINTAR, com a mesma
   varredura por padrão de classe que a seção 16 usa, só que com
   marfim quente no lugar do grafite.

   Especificidade: `.ct-pagina-conteudo.theme-light` (0,3,x) vence
   as regras da 16 (0,2,x); onde a página escreveu direto no HTML,
   o `!important` daqui resolve.

   O header e o rodapé ficam de fora: são escuros nos dois temas.
   ============================================================ */

body.ct-redesign.theme-light {
    /* Marfim quente, não branco puro: o dourado precisa de um
       fundo com temperatura para não parecer mostarda. */
    --ct-bg: #f7f5f0;
    --ct-surface: #ffffff;
    --ct-surface-2: #f2efe8;
    --ct-surface-3: #eae5da;
    --ct-border: rgba(40, 32, 16, .12);
    --ct-border-strong: rgba(40, 32, 16, .22);
    --ct-text: #1a1712;
    --ct-text-soft: #4a453c;
    --ct-text-dim: #6b655c;

    background-color: var(--ct-bg) !important;
    background-image:
        radial-gradient(1100px 600px at 50% -10%,
            rgba(138, 106, 21, .09), transparent 70%) !important;
    color: var(--ct-text) !important;
}

/* ── Superfícies ──
   Casa por sufixo de classe (-card, -item, -box…), o que é ótimo
   para as ~30 páginas de conteúdo e péssimo dentro do arcade: lá
   `.game-stat-item`, `.hud-item` e `.an-item` são COLUNAS de um
   painel, não caixas. Recebiam fundo branco e sombra e viravam
   caixinhas soltas dentro do card. A regra logo abaixo desta
   devolve o controle ao ct-arcade nessas três regiões. */
body.ct-redesign.theme-light .policy-section,
body.ct-redesign.theme-light .summary-float,
body.ct-redesign.theme-light [class$="-card"],
body.ct-redesign.theme-light [class*="-card "],
body.ct-redesign.theme-light [class$="-box"],
body.ct-redesign.theme-light [class*="-box "],
body.ct-redesign.theme-light [class$="-panel"],
body.ct-redesign.theme-light [class*="-panel "],
body.ct-redesign.theme-light [class$="-item"],
body.ct-redesign.theme-light [class*="-item "],
body.ct-redesign.theme-light [class$="-section"],
body.ct-redesign.theme-light [class*="-section "],
body.ct-redesign.theme-light [class$="-notice"],
body.ct-redesign.theme-light [class*="-notice "],
body.ct-redesign.theme-light [class$="-callout"],
body.ct-redesign.theme-light [class*="-callout "],
body.ct-redesign.theme-light [class$="-block"],
body.ct-redesign.theme-light [class*="-block "],
body.ct-redesign.theme-light [class*="faq-question"],
body.ct-redesign.theme-light [class*="-trigger"],
body.ct-redesign.theme-light .sidebar-nav>*,
body.ct-redesign.theme-light .sidebar-nav,
body.ct-redesign.theme-light .quick-links,
body.ct-redesign.theme-light .summary-box,
body.ct-redesign.theme-light .toc,
body.ct-redesign.theme-light aside {
    background: var(--ct-surface) !important;
    border-color: var(--ct-border) !important;
    color: var(--ct-text) !important;
    box-shadow: 0 1px 2px rgba(40, 32, 16, .05),
        0 6px 20px rgba(40, 32, 16, .07) !important;
}

body.ct-redesign.theme-light .policy-layout {
    background: transparent !important;
    box-shadow: none !important;
}

/* Devolve ao ct-arcade o interior dos jogos e das ferramentas.
   Dois ids no seletor (1,3,1 e 2,3,0) para passar da regra de
   superfícies acima, que é 0,3,1. Aqui só se anula o que ela
   impôs — cor e fundo próprios continuam vindo do ct-arcade. */
body.ct-redesign.theme-light #gm-overlay :is([class$="-item"], [class*="-item "], [class$="-card"], [class*="-card "], [class$="-box"], [class$="-panel"], [class$="-section"]),
body.ct-redesign.theme-light #modal-overlay :is([class$="-item"], [class*="-item "], [class$="-card"], [class*="-card "], [class$="-box"], [class$="-panel"], [class$="-section"]),
body.ct-redesign.theme-light .games-section :is(.game-stat-item, .hud-item, .game-diff, .games-tab, .xp-card-info) {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
}

/* ── O HEADER E O RODAPÉ FICAM DE FORA DAS SUPERFÍCIES ──
   A regra de superfícies acima casa por SUFIXO de classe e não olha
   onde o elemento vive. As caixas da BUSCA moram dentro do header:
   `.ps-sr-item` (dropdown de partituras), `.ct-sug-item` (sugestões
   do index) e `.ct-bsc-item` (busca global) todas terminam em
   "-item" — recebiam fundo BRANCO.

   E o texto delas não acompanhava: a regra universal de tinta (§16b)
   exclui `.ct-header *` de propósito, porque o header é escuro nos
   dois temas. Resultado no tema claro: título branco sobre cartão
   branco. A busca aparecia, mas só se via o preço.

   Um seletor a mais que a regra de superfícies (0,4,1 contra 0,3,1)
   devolve estas três regiões ao escuro a que pertencem. */
body.ct-redesign.theme-light .ct-header :is([class$="-card"], [class*="-card "], [class$="-box"], [class*="-box "], [class$="-panel"], [class$="-item"], [class*="-item "], [class$="-section"], [class*="-section "], [class$="-notice"], [class$="-callout"], [class$="-block"], [class*="-trigger"]),
body.ct-redesign.theme-light .footer :is([class$="-card"], [class*="-card "], [class$="-box"], [class*="-box "], [class$="-panel"], [class$="-item"], [class*="-item "], [class$="-section"], [class*="-section "], [class$="-notice"], [class$="-callout"], [class$="-block"], [class*="-trigger"]),
body.ct-redesign.theme-light #ct-mobile-nav :is([class$="-card"], [class*="-card "], [class$="-box"], [class*="-box "], [class$="-panel"], [class$="-item"], [class*="-item "], [class$="-section"], [class*="-section "], [class$="-notice"], [class$="-callout"], [class$="-block"], [class*="-trigger"]) {
    background: transparent !important;
    border-color: rgba(255, 255, 255, .08) !important;
    box-shadow: none !important;
    color: inherit !important;
}

/* ── CTA das partituras: roxo → dourado ──
   O bloco PianoSynestesia veio com a identidade roxa do parceiro,
   cravada em `style=` inline (e com onmouseover reescrevendo a
   sombra, por isso o !important também na box-shadow). Roxo é a cor
   DELES; o botão de compra é NOSSO — é a mesma ação que o resto do
   site pinta de dourado, e no tema claro o roxo saltava como se
   fosse de outro produto.

   Os enfeites do bloco (véu, notas caindo, borda da capa) seguem
   roxos de propósito: identificam o parceiro sem disputar a ação. */
body.ct-redesign .ps-index-cta,
body.ct-redesign .ps-buy-btn,
body.ct-redesign .ps-card-btn,
body.ct-redesign #partituras a[style*="8b5cf6"],
body.ct-redesign #partituras a[style*="139,92,246"] {
    background: var(--ct-gold-metal) !important;
    background-image: var(--ct-gold-metal) !important;
    border-color: transparent !important;
    box-shadow: var(--ct-shadow-gold) !important;
}

/* No tema claro o dourado da marca é escuro (#8a6a15 e abaixo), e
   tinta escura sobre ele daria 3,0:1 — reprovado para um rótulo de
   13px em negrito. A rampa vira um par mais fechado e o texto vai
   para branco: 5,06:1 no pior ponto. No escuro continua o inverso,
   tinta escura sobre dourado claro. */
body.ct-redesign.theme-light .ps-index-cta,
body.ct-redesign.theme-light .ps-buy-btn,
body.ct-redesign.theme-light .ps-card-btn {
    background: linear-gradient(135deg, #8a6a15 0%, #6f5512 100%) !important;
    background-image: linear-gradient(135deg, #8a6a15 0%, #6f5512 100%) !important;
}

body.ct-redesign.theme-light #partituras .ps-index-cta,
body.ct-redesign.theme-light #partituras .ps-buy-btn,
body.ct-redesign.theme-light #partituras .ps-card-btn,
body.ct-redesign.theme-light #partituras .ps-index-cta i,
body.ct-redesign.theme-light #partituras .ps-buy-btn i,
body.ct-redesign.theme-light .ps-index-cta,
body.ct-redesign.theme-light .ps-buy-btn,
body.ct-redesign.theme-light .ps-card-btn,
body.ct-redesign.theme-light .ps-index-cta i,
body.ct-redesign.theme-light .ps-buy-btn i,
body.ct-redesign.theme-light .ps-card-btn i {
    color: #ffffff !important;
}

/* A tinta do botão precisa de um id no seletor: a regra universal
   de texto do tema claro chega a ~0,14,1 e pintava este rótulo de
   cinza (--ct-text-soft) sobre o dourado — 1,9:1. Um id resolve de
   uma vez, porque ids vencem qualquer quantidade de classes. */
body.ct-redesign #partituras .ps-index-cta,
body.ct-redesign .ps-buy-btn,
body.ct-redesign #partituras .ps-card-btn,
body.ct-redesign #partituras a[style*="8b5cf6"],
body.ct-redesign #partituras a[style*="139,92,246"],
body.ct-redesign .ps-index-cta[id],
body.ct-redesign .ps-index-cta,
body.ct-redesign .ps-buy-btn,
body.ct-redesign .ps-card-btn {
    color: #1a1408 !important;
}

body.ct-redesign .ps-index-cta:hover,
body.ct-redesign .ps-card-btn:hover,
body.ct-redesign #partituras a[style*="8b5cf6"]:hover,
body.ct-redesign #partituras a[style*="139,92,246"]:hover {
    box-shadow: var(--ct-shadow-gold-lg) !important;
    transform: translateY(-2px) !important;
}

body.ct-redesign .ps-index-cta i,
body.ct-redesign .ps-card-btn i,
body.ct-redesign #partituras a[style*="8b5cf6"] i {
    color: #1a1408 !important;
}

/* ── Texto ──
   Aqui o tema PODE mandar na cor (ao contrário do escuro, onde a
   regra é nunca forçar): no claro é o próprio tema que repinta as
   superfícies, então ele sabe sobre o que o texto vai cair.

   E precisa ser um seletor universal, não uma lista de tags: as
   páginas foram escritas para o escuro e têm cor clara cravada em
   dezenas de classes próprias (.timeline-year, .hcs-label,
   .beat-label…). Enumerá-las seria caçar uma a uma para sempre.

   As exclusões são as três regiões que continuam escuras: o hero,
   o header/rodapé, e `.ct-bloco-escuro` — a marca que o
   ct-shell.js põe nos blocos de notação musical, porque CSS não
   consegue perguntar "seu fundo é escuro?".

   A quarta exclusão é diferente das outras: o arcade (jogos e
   ferramentas) NÃO continua escuro no tema claro. Ele sai daqui
   porque tem folha própria — ct-arcade.css — que define a cor de
   cada peça nos dois temas, inclusive as semânticas que este
   seletor apagava: o verde do XP, o vermelho do erro, o dourado
   das pílulas. Todos viravam cinza-texto, e o feedback do jogo
   deixava de existir como cor.

   Com ~12 `:not()`, a especificidade desta regra passa de 0,12,1 —
   nenhuma folha carregada depois vence isso por força bruta. Sair
   da lista é a única saída limpa. */
body.ct-redesign.theme-light *:not(.ct-bloco-escuro):not(.ct-bloco-escuro *):not([class$="-hero"]):not([class$="-hero"] *):not([class*="-hero "]):not([class*="-hero "] *):not(.hero-carousel):not(.hero-carousel *):not(.ct-header):not(.ct-header *):not(.footer):not(.footer *):not(#ct-mobile-nav):not(#ct-mobile-nav *):not(#gm-overlay):not(#gm-overlay *):not(#modal-overlay):not(#modal-overlay *):not(.games-section):not(.games-section *):not(.ct-toast):not(.ct-toast *):not(.xp-popup):not(.ps-index-cta):not(.ps-index-cta *):not(.ps-card-btn):not(.ps-card-btn *):not(.ps-buy-btn):not(.ps-buy-btn *):not(.video-title-overlay):not(.video-title-overlay *):not(.feature-btn):not(.feature-btn *):not(.ct-cor-propria):not(.ct-cor-propria *) {
    color: var(--ct-text-soft) !important;
}

/* O carrossel do topo é um caso de `.ct-bloco-escuro` que o
   seletor acima não pegava: a classe é `hero-carousel`, começa com
   "hero-" e não TERMINA em "-hero", então escapava das duas regras
   de exclusão. O slide tem uma foto e um véu preto por cima — o
   texto tem de continuar branco em qualquer tema, e estava saindo
   cinza-escuro sobre a foto. */
body.ct-redesign.theme-light .hero-carousel :is(h1, h2, h3, p, span, .carousel-sub) {
    color: #ffffff !important;
}

body.ct-redesign.theme-light .hero-carousel :is(p, .carousel-sub) {
    color: rgba(255, 255, 255, .88) !important;
}

/* A capa da videoaula é o mesmo caso do carrossel: foto com véu
   preto e o título por cima. `video-title-overlay` não termina em
   "-hero" nem é medida pelo ct-shell (o fundo dela é gradiente,
   e gradiente não dá para medir), então o seletor universal acima
   pintava o título de cinza-escuro sobre a imagem — ilegível.
   A saída é a mesma: sair da lista, e deixar a cor branca que o
   site.css já define para `.video-thumb-title`. */

/* O véu precisa ser forte o bastante para o branco passar de 4,5:1
   sobre a parte mais clara da foto. */
body.ct-redesign .ct-carousel-slide>.absolute.inset-0,
body.ct-redesign.theme-light .ct-carousel-slide>.absolute.inset-0 {
    background: linear-gradient(90deg, rgba(6, 9, 13, .88) 0%, rgba(6, 9, 13, .62) 45%, rgba(6, 9, 13, .28) 100%) !important;
}

/* Reafirmações, em ordem de força crescente.
   O arcade sai destas também: dentro do jogo, `strong` marca a
   resposta certa em dourado e os `h2/h3` do estúdio já têm cor
   própria — ver a nota sobre o arcade na regra acima. */
body.ct-redesign.theme-light :is(h1, h2, h3, h4, h5, h6, dt, strong, b, th):not(.ct-bloco-escuro *):not([class$="-hero"] *):not(.hero-carousel *):not(.ct-header *):not(#ct-mobile-nav *):not(.footer *):not(#gm-overlay *):not(#modal-overlay *):not(.games-section *):not(.video-title-overlay *) {
    color: var(--ct-text) !important;
}

/* O `#ct-mobile-nav` tem de estar aqui: ele é irmão do header, não
   filho, por isso `:not(.ct-header *)` não o cobre — e o dropdown é
   escuro nos dois temas. Sem esta exclusão os links do menu ficavam
   #8a6a15 sobre #12171f, que é 3,4:1. */
body.ct-redesign.theme-light a:not([class*="btn"]):not([class*="cta"]):not([class*="action"]):not(.ct-header *):not(#ct-mobile-nav *):not(.footer *):not(.ct-bloco-escuro):not(.ct-bloco-escuro *) {
    color: #7a5e12 !important;
}

body.ct-redesign.theme-light :is(.policy-section, [class$="-section"]) :is(h2, h3) {
    color: #6f5512 !important;
}

/* Botão de fundo dourado quer texto branco, em qualquer tema. */
/* O "Cadastre-se" saiu daqui: o fundo dele é o metal dourado, e
   sobre metal a tinta é escura. Ver p49. */
body.ct-redesign.theme-light :is([class*="cta"], [class*="btn-primary"], [class*="-primary"]):is(a, button) {
    color: #fff !important;
}

/* Marcadores semânticos não viram cinza. */
body.ct-redesign.theme-light .fa-check-circle,
body.ct-redesign.theme-light :is(.success, .allowed, [class*="-success"]) {
    color: #15803d !important;
}

body.ct-redesign.theme-light :is(.fa-times-circle, .fa-ban),
body.ct-redesign.theme-light :is(.danger, .denied, [class*="-danger"], [class*="-error"]) {
    color: #b91c1c !important;
}

/* Quem leva .ct-cor-propria decide sozinho — tipicamente por
   estar sobre fundo escuro, onde este dourado some. */
body.ct-redesign.theme-light :is([class$="-icon"], [class*="-icon "], [class$="-num"], [class*="stat-num"]):not(.ct-cor-propria):not(.ct-cor-propria *):not(.ct-bloco-escuro *) {
    color: #7a5e12 !important;
}

/* O dourado de texto aqui é o escurecido: 5.06:1 sobre branco.
   As exclusões de região são obrigatórias: com quatro `:not()` de
   classe esta regra chega a 0,7,1 e atropelava até a seção 11. Era
   o que pintava os links do RODAPÉ de #8a6a15 — dourado de fundo
   claro, aplicado sobre o slab escuro do rodapé: 3,56:1, reprovado.
   O mesmo valia para header, carrossel e arcade.

   `.ct-bloco-escuro` entrou na lista pela mesma razão, e fecha o caso
   de vez: aquelas regiões estão nomeadas uma a uma, mas um bloco
   escuro pode aparecer em qualquer página. Eram os "Top 100" do 404,
   o "Ver detalhes" das partituras e o "Criar conta" das ajudas —
   todos a 3,6:1. Com a exclusão, quem lhes dá a cor é a §29a, com o
   dourado do header (#d4af37), que sobre escuro dá 8,9:1. */
body.ct-redesign.theme-light .policy-section h2,
body.ct-redesign.theme-light .policy-section h3,
body.ct-redesign.theme-light a:not(.tool-btn):not(.ps-buy-btn):not([class*="btn"]):not([class*="cta"]):not([class*="action"]):not(.footer *):not(.ct-header *):not(.hero-carousel *):not(#ct-mobile-nav *):not(#gm-overlay *):not(#modal-overlay *):not(.games-section *):not(.ct-bloco-escuro):not(.ct-bloco-escuro *) {
    color: #7a5e12 !important;
}

body.ct-redesign.theme-light [class$="-icon"],
body.ct-redesign.theme-light [class*="-icon "],
body.ct-redesign.theme-light .ps-icon {
    background: rgba(138, 106, 21, .10) !important;
    color: #7a5e12 !important;
    border-color: rgba(138, 106, 21, .26) !important;
}

body.ct-redesign.theme-light .number-icon,
body.ct-redesign.theme-light .error-icon,
body.ct-redesign.theme-light .ct-icon-plain {
    background: none !important;
    border: 0 !important;
    color: #7a5e12 !important;
}

/* ── Tabelas ── */
body.ct-redesign.theme-light thead,
body.ct-redesign.theme-light th {
    background: var(--ct-surface-3) !important;
    color: #6f5512 !important;
    border-color: var(--ct-border) !important;
}

body.ct-redesign.theme-light tbody tr:nth-child(even) {
    background: var(--ct-surface-2) !important;
}

body.ct-redesign.theme-light tbody tr:hover,
body.ct-redesign.theme-light tbody tr:nth-child(even):hover {
    background: rgba(138, 106, 21, .09) !important;
}

/* ── Selos, pílulas e filtros ── */
body.ct-redesign.theme-light [class$="-pill"],
body.ct-redesign.theme-light [class*="-pill "],
body.ct-redesign.theme-light [class$="badge"],
body.ct-redesign.theme-light [class*="badge "],
body.ct-redesign.theme-light .topic-btn,
body.ct-redesign.theme-light .filter-btn {
    background: var(--ct-surface-3) !important;
    border-color: var(--ct-border) !important;
    color: var(--ct-text-soft) !important;
}

body.ct-redesign.theme-light .topic-btn.active,
body.ct-redesign.theme-light .topic-btn.is-active,
body.ct-redesign.theme-light .filter-btn.active,
body.ct-redesign.theme-light .sidebar-nav a.active {
    background: rgba(138, 106, 21, .12) !important;
    border-color: rgba(138, 106, 21, .4) !important;
    color: #6f5512 !important;
}

/* ── Avisos: de volta aos tons claros, com a mesma semântica ── */
body.ct-redesign.theme-light .callout {
    background: var(--ct-surface-2) !important;
    border: 1px solid var(--ct-border) !important;
    border-left: 3px solid #8a6a15 !important;
}

body.ct-redesign.theme-light .callout.info,
body.ct-redesign.theme-light .callout.info p {
    background: #eef5ff !important;
    border-left-color: #2563eb !important;
    color: #1e3a8a !important;
}

body.ct-redesign.theme-light .callout.danger,
body.ct-redesign.theme-light .callout.danger p {
    background: #fdeeee !important;
    border-left-color: #dc2626 !important;
    color: #7f1d1d !important;
}

/* ── Campos ── */
body.ct-redesign.theme-light input,
body.ct-redesign.theme-light textarea,
body.ct-redesign.theme-light select {
    background: var(--ct-surface) !important;
    border-color: var(--ct-border-strong) !important;
    color: var(--ct-text) !important;
}

/* ── O hero é uma ilha escura dentro da página clara ──
   A inversão acima repintava de branco os cartões que vivem DENTRO
   do hero (o painel do logo em sobre.html, o índice em lercifras),
   enquanto o texto deles continuava branco — cartão branco, letra
   branca. Aqui o interior do hero volta inteiro para a lógica
   escura, que é a que corresponde ao fundo que ele tem. */
body.ct-redesign.theme-light [class$="-hero"],
body.ct-redesign.theme-light [class*="-hero "] {
    background:
        radial-gradient(120% 160% at 50% -20%, rgba(212, 175, 55, .16), transparent 60%),
        linear-gradient(180deg, #12171f 0%, #0d1117 100%) !important;
}

body.ct-redesign.theme-light [class$="-hero"] *,
body.ct-redesign.theme-light [class*="-hero "] * {
    color: #b6c0cc !important;
}

body.ct-redesign.theme-light [class$="-hero"] :is(h1, h2, h3, strong, b),
body.ct-redesign.theme-light [class*="-hero "] :is(h1, h2, h3, strong, b) {
    color: #e6edf3 !important;
}

body.ct-redesign.theme-light [class$="-hero"] :is([class$="-card"], [class*="-card "], [class$="-box"], [class$="-item"], [class*="-item "], [class$="-panel"]),
body.ct-redesign.theme-light [class*="-hero "] :is([class$="-card"], [class*="-card "], [class$="-item"], [class*="-item "]) {
    background: rgba(255, 255, 255, .05) !important;
    border-color: rgba(255, 255, 255, .12) !important;
    box-shadow: none !important;
}

body.ct-redesign.theme-light [class$="-hero"] :is([class$="-icon"], [class*="-icon "], [class$="-num"], [class*="stat-num"], a),
body.ct-redesign.theme-light [class*="-hero "] :is([class$="-icon"], [class$="-num"], a) {
    color: var(--ct-header-accent) !important;
}

/* ── Botões de contorno: dourado, não branco ──
   A regra de "CTA quer texto branco" vale para o botão CHEIO. O
   secundário é transparente; branco nele some sobre o marfim. */
body.ct-redesign.theme-light :is(a, button)[class*="secondary"],
body.ct-redesign.theme-light :is(a, button)[class*="outline"],
body.ct-redesign.theme-light :is(a, button)[class*="ghost"] {
    color: #7a5e12 !important;
    border-color: rgba(138, 106, 21, .4) !important;
    background: transparent !important;
}

/* ...menos no menu mobile. Ele é escuro nos dois temas (usa os
   tokens do header, §17), e a regra acima casava `ct-mnav-btn-ghost`
   por `[class*="ghost"]`: no tema claro o "Entrar" virava dourado
   escuro sobre grafite e sumia — os dois botões do menu ficavam
   invisíveis no telemóvel. */
body.ct-redesign.theme-light #ct-mobile-nav .ct-mnav-btn-ghost {
    color: rgba(255, 255, 255, .85) !important;
    background: rgba(255, 255, 255, .07) !important;
    border-color: rgba(255, 255, 255, .12) !important;
}

body.ct-redesign.theme-light #ct-mobile-nav .ct-mnav-btn-solid {
    color: #fff !important;
    background: linear-gradient(135deg, var(--ct-header-accent), #a8862a) !important;
    border: 0 !important;
}

/* Selos e pílulas dentro do hero seguem o hero, não o marfim. */
body.ct-redesign.theme-light [class$="-hero"] :is([class*="badge"], [class*="-pill"], [class*="chip"]),
body.ct-redesign.theme-light [class*="-hero "] :is([class*="badge"], [class*="-pill"], [class*="chip"]) {
    background: rgba(212, 175, 55, .16) !important;
    border-color: rgba(212, 175, 55, .30) !important;
    color: var(--ct-header-accent) !important;
}

/* ── Último a falar: o interior dos blocos escuros ──
   Estas vêm no fim de propósito. O problema não era o tema claro
   "esquecer" desses blocos, e sim a seção 16 (dark) definir
   `h2, h3, h4 { color: var(--ct-text) }`: no tema claro essa
   variável vira quase-preta, e o título ficava preto sobre o
   grafite do bloco. Aqui a cor volta a acompanhar o FUNDO, que é
   o que decide — não o tema da página. */
/* O `*` para de valer nos filhos que o tema claro repinta por
   conta própria — um selo marfim dentro de um cartão escuro herda
   o fundo do selo, não o do cartão. */
body.ct-redesign.theme-light .ct-bloco-escuro:not(.hero-carousel):not(.hero-carousel *),
body.ct-redesign.theme-light .ct-bloco-escuro *:not(.hero-carousel):not(.hero-carousel *):not([class*="badge"]):not([class*="-pill"]):not([class*="chip"]):not([class$="-card"]):not([class*="-card "]):not([class$="-box"]):not([class$="-item"]):not([class*="-item "]):not(.ct-cor-propria):not(.ct-cor-propria *):not(.ps-buy-btn):not(.ps-card-btn):not(.ps-buy-btn *):not(.ps-card-btn *) {
    color: #cdd6e0 !important;
}

body.ct-redesign.theme-light .ct-bloco-escuro:not(.hero-carousel *) :is(h1, h2, h3, h4, h5, strong, b, dt):not(.hero-carousel *) {
    color: #e6edf3 !important;
}

/* Um <a> dentro do bloco escuro é dourado — a não ser que ele SEJA
   o botão dourado: aí a tinta tem de ser escura, senão fica ouro
   sobre ouro (1,0:1). Daí as exclusões dos CTA de partitura. */
body.ct-redesign.theme-light .ct-bloco-escuro :is(a, [class$="-icon"], [class$="-num"], [class*="stat-num"]):not(.ps-buy-btn):not(.ps-card-btn):not(.ct-cor-propria) {
    color: var(--ct-header-accent) !important;
}

/* Fundo dourado cheio quer branco, nos dois temas. O cinza claro
   dos blocos grafite daria 1.87:1 aqui. */
body.ct-redesign .ct-fundo-forte,
body.ct-redesign .ct-fundo-forte * {
    color: #fff !important;
}

/* Semânticos ficam por último em qualquer tema: verde é verde. */
body.ct-redesign .fa-check-circle,
body.ct-redesign .fa-circle-check {
    color: var(--ct-success) !important;
}

body.ct-redesign :is(.fa-times-circle, .fa-ban, .fa-circle-xmark) {
    color: var(--ct-danger) !important;
}

/* ============================================================
   16c. JOGOS  — movido para assets/css/ct-arcade.css
   ------------------------------------------------------------
   Este bloco reescrevia o modal dos jogos em grafite+dourado.
   Virou um problema quando o arcade ganhou camada própria: os
   seletores daqui começam com `body.ct-redesign`, ou seja tem
   especificidade 0,2,1 e venciam as regras equivalentes do
   ct-arcade.css (0,1,0 ou 0,2,0) mesmo carregando ANTES dele.
   O resultado era um arquivo mandando na cor e o outro mandando
   no espaçamento do mesmo botão.

   ct-arcade.css agora é dono único de jogos E ferramentas, nos
   dois temas. Tudo que existia aqui está lá, incluindo a cascata
   de entrada das opções e as animações de acerto e erro.
   ============================================================ */


.ct-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   17. HEADER E RODAPÉ CANÔNICOS
   ------------------------------------------------------------
   Markup em assets/js/ct-shell.js, um só para o site inteiro.

   Antes existiam dois headers: o do index (montado com utilitários
   do Tailwind, com busca/menu/tema) e o `.top-header` das outras
   ~45 páginas — que era só o logo, sem navegação nenhuma. Como o
   Tailwind só é carregado em 5 páginas, o header do index não podia
   ser copiado como estava; daí esta implementação em CSS puro, que
   renderiza igual em qualquer página.

   O header é escuro nos dois temas (tokens --ct-header-*) — ver a
   seção 04, que cuida do fundo, do fio dourado e do sublinhado do
   menu. Aqui fica só a caixa.
   ============================================================ */

/* Empilhamento: header acima do menu mobile (para o "×" continuar
   clicável), menu acima do véu. */
body.ct-redesign .ct-header {
    z-index: 9999 !important;
    transition: box-shadow var(--ct-t-slow), background var(--ct-t-slow);
}

/* O header é escuro TAMBÉM no tema claro — a regra da seção 04 usa
   `body.ct-redesign .ct-header` (0,2,1) e perdia por especificidade
   para `body.ct-redesign.theme-light .ct-header` (0,3,1), que o
   site.css deixou do tema antigo. Repetida aqui com a mesma
   especificidade, a ordem de carga resolve a favor do tema.
   Sem isto, nas ~30 páginas claras o header virava branco e o
   "Entrar" (texto branco) sumia dentro dele. */
body.ct-redesign.theme-light .ct-header,
body.ct-redesign.theme-light .top-header {
    background: color-mix(in srgb, var(--ct-header-bg) 92%, transparent) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .09) !important;
}

body.ct-redesign.theme-light .ct-header h1,
body.ct-redesign.theme-light .ct-header nav a,
body.ct-redesign.theme-light #btn-theme-toggle-idx {
    color: var(--ct-header-text) !important;
}

body.ct-redesign.theme-light .ct-logo h1 {
    color: #fff !important;
}

/* ── Logo: vida ao passar o cursor ──
   O header claro tinha o mesmo markup do escuro mas nenhum estado
   de hover, e por isso lia como "básico" ao lado dele. O gesto é o
   mesmo nos dois temas: a marca sobe 1px, o brasão gira de leve e o
   dourado ganha brilho. Um só movimento, curto — o logo é um ponto
   de orientação, não um brinquedo. */
body.ct-redesign .ct-logo {
    transition: transform var(--ct-t);
}

body.ct-redesign .ct-logo:hover {
    transform: translateY(-1px);
}

body.ct-redesign .ct-logo img,
body.ct-redesign .ct-logo .ct-logo-mark {
    transition: transform 320ms var(--ct-ease-out), filter var(--ct-t);
}

body.ct-redesign .ct-logo:hover img,
body.ct-redesign .ct-logo:hover .ct-logo-mark {
    transform: rotate(-6deg) scale(1.06);
    filter: drop-shadow(0 4px 12px rgba(212, 175, 55, .45));
}

body.ct-redesign .ct-logo h1,
body.ct-redesign .ct-logo h1 .text-brand-500,
body.ct-redesign .ct-logo h1 .logo-turn {
    transition: color var(--ct-t), text-shadow var(--ct-t);
}

body.ct-redesign .ct-logo:hover h1 .text-brand-500,
body.ct-redesign .ct-logo:hover h1 .logo-turn {
    text-shadow: 0 0 18px rgba(212, 175, 55, .55);
}

/* Fio dourado que corre sob a marca no hover.
   Ancorado no BLOCO de texto (h1 + slogan), não no h1: preso ao h1
   o traço caía em `bottom: -3px`, que é exatamente onde começa o
   "Cifras, Partituras e Tablaturas" — a linha riscava a frase. Sob o
   bloco inteiro ele sublinha o lockup e não tem em quem esbarrar.

   `h1:last-child` cobre os headers sem slogan (o `.top-header` das
   outras páginas); onde o slogan existe, o h1 não é o último filho
   e a regra não dispara — nunca saem dois traços. */
body.ct-redesign .ct-logo .ct-logo-text,
body.ct-redesign .ct-logo h1:last-child {
    position: relative;
}

body.ct-redesign .ct-logo .ct-logo-text::after,
body.ct-redesign .ct-logo h1:last-child::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 2px;
    border-radius: 2px;
    background: var(--ct-gold-metal);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 380ms var(--ct-ease-out);
    pointer-events: none;
}

body.ct-redesign .ct-logo:hover .ct-logo-text::after,
body.ct-redesign .ct-logo:hover h1:last-child::after {
    transform: scaleX(1);
}

/* ── Ícones do header no tema claro ──
   A busca e o "Entrar" herdavam texto branco de um tema que não
   existe mais aqui: brancos sobre o header — que continua escuro —
   até funcionavam, mas o <style> do index pintava o header de
   branco e os dois sumiam. Com o header de volta ao escuro, é só
   garantir que usem o token do header e não o do corpo. */
body.ct-redesign.theme-light .ct-header .ct-icon-btn,
body.ct-redesign.theme-light .ct-header button:not(.btn-signup):not([class*="cta"]),
body.ct-redesign.theme-light .ct-header .btn-login,
body.ct-redesign.theme-light .ct-header #btn-login,
body.ct-redesign.theme-light .ct-header .fa-search,
body.ct-redesign.theme-light .ct-header [class*="search"] {
    color: var(--ct-header-text) !important;
}

body.ct-redesign.theme-light .ct-header .btn-login,
body.ct-redesign.theme-light .ct-header #btn-login {
    border-color: rgba(255, 255, 255, .22) !important;
    background: transparent !important;
}

body.ct-redesign .ct-header .btn-login:hover,
body.ct-redesign .ct-header #btn-login:hover,
body.ct-redesign .ct-header .ct-icon-btn:hover {
    color: var(--ct-header-accent) !important;
    border-color: var(--ct-gold-line) !important;
    background: rgba(212, 175, 55, .12) !important;
}

body.ct-redesign.theme-light .ct-header nav a:hover,
body.ct-redesign.theme-light .ct-header .ct-nav-link.is-active {
    color: var(--ct-header-accent) !important;
    background: var(--ct-gold-glow) !important;
}

/* No tema claro o dourado do header continua sendo o claro
   (--ct-header-accent), não o escurecido de texto sobre branco:
   o fundo aqui é escuro nos dois casos. */
body.ct-redesign.theme-light .ct-logo h1 .text-brand-500,
body.ct-redesign.theme-light .ct-icon-btn:hover,
body.ct-redesign.theme-light .ct-mnav-link:hover,
body.ct-redesign.theme-light .ct-mnav-link.is-active {
    color: var(--ct-header-accent) !important;
}

body.ct-redesign.theme-light #ct-mobile-nav {
    background: var(--ct-header-bg) !important;
    border-top-color: rgba(255, 255, 255, .09) !important;
}

body.ct-redesign.theme-light .ct-mnav-link {
    color: var(--ct-header-text) !important;
}

body.ct-redesign .ct-header.scrolled {
    box-shadow: 0 4px 24px rgba(0, 0, 0, .42) !important;
}

body.ct-redesign .ct-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    height: var(--header-h);
    padding: 0 var(--sp-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}

/* ── Logo ── */
body.ct-redesign .ct-logo {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    text-decoration: none;
    flex-shrink: 0;
}

body.ct-redesign .ct-logo img {
    width: 40px;
    height: 40px;
    border-radius: var(--ct-r);
    flex-shrink: 0;
    box-shadow: var(--ct-shadow-sm);
    transition: transform var(--ct-t-slow);
}

/* O logótipo encolhe no telemóvel.
   Isto já existia — mas no premium_base.css, que só ~metade das
   páginas carrega. O perfil não o carrega, e por isso ficava com os
   40 px do desktop num ecrã de 390: ao lado do mesmo header do
   index, com 26 px, parecia outro site. Aqui vale para todas.

   Fica com especificidade baixa de propósito (0,2,1): onde o
   premium_base existe, é ele que continua a mandar, com o `#id` e o
   `!important` dele. Isto é a rede para quem não o tem. */
@media (max-width: 767px) {
    body.ct-redesign .ct-logo img {
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 430px) {
    body.ct-redesign .ct-logo img {
        width: 24px;
        height: 24px;
    }
}

body.ct-redesign .ct-logo:hover img {
    transform: rotate(-6deg) scale(1.06);
}

body.ct-redesign .ct-logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
}

body.ct-redesign .ct-logo h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
    /* O header é escuro nos dois temas — branco fixo, não --ct-text */
    color: #fff !important;
    transition: color var(--ct-t);
}

body.ct-redesign .ct-logo h1 .text-brand-500 {
    color: var(--ct-header-accent) !important;
}

body.ct-redesign .ct-logo-slogan {
    margin-top: 2px;
    font-size: var(--fs-xs);
    font-weight: 400;
    white-space: nowrap;
    color: rgba(255, 255, 255, .5) !important;
}

/* ── Navegação desktop ── */
/* Os !important nos `display` do header não são preferência: o
   index.html trazia inline `@media(min-width:1024px){
   #ct-menu-toggle{display:none!important} }`, herdado de quando o
   menu desktop aparecia em 1024. Com o header agora compartilhado,
   isso abria um vão de 1024–1279px sem navegação nenhuma — nem a
   barra, nem o hambúrguer. Quem manda no breakpoint é esta camada. */
body.ct-redesign .ct-nav-desktop {
    display: none !important;
    align-items: center;
    gap: 2px;
}

body.ct-redesign .ct-nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--ct-r);
    font-size: var(--fs-base);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    color: var(--ct-header-text) !important;
    /* O ::after (sublinhado dourado) vem da seção 04 */
    position: relative;
    transition: color var(--ct-t), background var(--ct-t);
}

body.ct-redesign .ct-nav-link i {
    font-size: var(--fs-sm);
    opacity: .7;
    transition: opacity var(--ct-t), transform var(--ct-t);
}

body.ct-redesign .ct-nav-link:hover,
body.ct-redesign .ct-nav-link.is-active {
    color: var(--ct-header-accent) !important;
    background: var(--ct-gold-glow) !important;
}

body.ct-redesign .ct-nav-link:hover i {
    opacity: 1;
    transform: translateY(-1px);
}

/* ── Ações à direita ── */
body.ct-redesign .ct-header-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
}

body.ct-redesign .ct-icon-btn {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    font-size: var(--fs-md);
    color: var(--ct-header-text) !important;
    transition: color var(--ct-t), background var(--ct-t), transform var(--ct-t);
}

body.ct-redesign .ct-icon-btn:hover {
    color: var(--ct-header-accent) !important;
    background: var(--ct-gold-glow);
}

body.ct-redesign .ct-icon-btn:active {
    transform: scale(.9);
}

/* ── Busca que expande ── */
body.ct-redesign .ct-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

body.ct-redesign .ct-search-field {
    position: relative;
    display: flex;
    align-items: center;
}

body.ct-redesign .ct-search-input {
    width: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    border: 0 solid transparent;
    border-radius: var(--ct-r);
    outline: 0;
    font-size: var(--fs-base);
    font-family: inherit;
    background: transparent;
    color: #e6edf3;
    transition: width var(--ct-t-slow), opacity var(--ct-t), padding var(--ct-t-slow);
}

body.ct-redesign .ct-search-wrap.expanded .ct-search-input {
    width: 280px;
    max-width: 46vw;
    padding: 9px var(--sp-4) 9px 38px;
    opacity: 1;
    pointer-events: auto;
    border: 1px solid var(--ct-gold-line);
    background: rgba(255, 255, 255, .07);
}

body.ct-redesign .ct-inner-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, .35);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ct-t);
}

body.ct-redesign .ct-search-wrap.expanded .ct-inner-search-icon {
    opacity: 1;
}

body.ct-redesign .ct-search-results {
    position: absolute;
    top: calc(100% + var(--sp-2));
    right: 0;
    min-width: 320px;
    max-height: 60vh;
    overflow-y: auto;
    display: none;
    background: var(--ct-surface);
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-r-lg);
    box-shadow: var(--ct-shadow-lg);
    z-index: 10;
}

body.ct-redesign .ct-search-results:not(:empty) {
    display: block;
}

/* ── Botões de conta ── */
body.ct-redesign .ct-header .user-area {
    display: none !important;
    align-items: center;
    gap: var(--sp-2);
}

body.ct-redesign .ct-menu-toggle {
    display: flex !important;
}

body.ct-redesign .ct-header .btn-login,
body.ct-redesign .ct-header .btn-signup {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: 38px;
    padding: 0 var(--sp-4);
    border-radius: var(--ct-r-pill);
    font-size: var(--fs-base);
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: transform var(--ct-t), box-shadow var(--ct-t),
        background var(--ct-t), border-color var(--ct-t);
}

/* Os !important aqui não são estilo — são obrigatórios: o site.css
   traz `.btn-signup { background: white !important }` do tema azul
   antigo, e sem !important a ordem de carga não resolve. */
body.ct-redesign .ct-header .btn-login {
    font-weight: 600;
    color: rgba(255, 255, 255, .85) !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    box-shadow: none !important;
}

body.ct-redesign .ct-header .btn-login:hover {
    color: var(--ct-header-accent) !important;
    border-color: var(--ct-gold-line) !important;
    background: var(--ct-gold-glow) !important;
    transform: translateY(-1px) !important;
}

body.ct-redesign .ct-header .btn-signup {
    font-weight: 700;
    border: 0 !important;
    /* O dourado de SUPERFÍCIE, com a tinta escura por cima — ver
       seção 02a. Com branco não havia dourado que passasse: o
       gradiente antigo dava 4,1:1 e era assim em todo o site. */
    background: var(--ct-ouro-botao) !important;
    color: var(--ct-ouro-botao-tinta) !important;
    box-shadow: 0 4px 14px rgba(168, 134, 42, .32) !important;
}

body.ct-redesign .ct-header .btn-signup:hover {
    background: var(--ct-ouro-botao-hover) !important;
    /* O site.css antigo dava scale(1.05) + brightness aqui; o
       vocabulário do tema é subir 1px, igual em todo botão. */
    transform: translateY(-1px) !important;
    filter: none !important;
    box-shadow: 0 6px 20px rgba(168, 134, 42, .48) !important;
}

body.ct-redesign .ct-header .btn-login:active,
body.ct-redesign .ct-header .btn-signup:active {
    transform: translateY(0) scale(.97);
}

/* ── Menu mobile ── */
body.ct-redesign #ct-mobile-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: ct-fade-in 200ms ease both;
}

body.ct-redesign #ct-mobile-nav {
    display: none;
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: 9995;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    background: var(--ct-header-bg);
    border-top: 1px solid var(--ct-border);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .55);
    animation: ct-slide-down 240ms var(--ct-ease-out) both;
}

body.ct-redesign .ct-mnav-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--sp-3) var(--sp-4) var(--sp-5);
}

body.ct-redesign .ct-mnav-link {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 13px var(--sp-4);
    border-radius: var(--ct-r);
    font-size: var(--fs-base);
    font-weight: 600;
    text-decoration: none;
    color: var(--ct-header-text) !important;
    transition: background var(--ct-t), color var(--ct-t);
}

body.ct-redesign .ct-mnav-link i {
    width: 18px;
    text-align: center;
    opacity: .7;
}

body.ct-redesign .ct-mnav-link:hover,
body.ct-redesign .ct-mnav-link.is-active {
    color: var(--ct-header-accent) !important;
    background: var(--ct-gold-glow);
}

body.ct-redesign .ct-mnav-link.is-active i {
    opacity: 1;
}

body.ct-redesign #ct-mobile-auth-area {
    display: flex;
    gap: var(--sp-3);
    margin-top: var(--sp-2);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--ct-border);
}

body.ct-redesign .ct-mnav-btn {
    flex: 1;
    padding: 11px;
    border-radius: var(--ct-r);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: transform var(--ct-t), background var(--ct-t);
}

body.ct-redesign .ct-mnav-btn:active {
    transform: scale(.97);
}

body.ct-redesign .ct-mnav-btn-ghost {
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
}

body.ct-redesign .ct-mnav-btn-solid {
    font-weight: 700;
    color: #fff;
    border: 0;
    background: linear-gradient(135deg, var(--ct-gold-deep), #8a6a15);
    box-shadow: 0 4px 14px rgba(168, 134, 42, .35);
}

/* Se o usuário está logado, o script.js preenche .user-area e os
   dois botões saem de cena. */
body.ct-redesign #ct-mobile-auth-area .user-area:not(:empty) ~ button {
    display: none;
}

/* E se NÃO está logado, a .user-area vazia não pode ocupar lugar:
   ela herda `width:100%` das folhas antigas do header e empurrava
   "Entrar" e "Cadastre-se" para fora da tela — no telemóvel os
   dois botões simplesmente não existiam. */
body.ct-redesign #ct-mobile-auth-area .user-area:empty {
    display: none !important;
}

/* ── Pontos de quebra do header ── */
/* O header antigo (.top-header) fica escondido nas páginas que
   ainda o tiverem em algum trecho não migrado. */
body.ct-redesign .top-header,
body.ct-redesign .main-menu {
    display: none !important;
}

@media (min-width: 640px) {

    body.ct-redesign .ct-header .user-area,
    body.ct-redesign .ct-header #ct-user-area-desktop {
        display: flex !important;
    }
}

/* 1280px, não 1024: são 7 itens de menu, e junto com o logo, a
   busca e os botões de conta eles somam ~1210px. Abaixo disso o
   menu estourava a direita do header (o "Cadastre-se" saía da
   tela) em vez de recolher para o hambúrguer. */
@media (min-width: 1280px) {
    body.ct-redesign .ct-nav-desktop {
        display: flex !important;
    }

    body.ct-redesign .ct-menu-toggle {
        display: none !important;
    }
}

/* Os ícones do menu custam ~140px na soma. Só entram quando há
   folga para eles. */
@media (max-width: 1399px) {
    body.ct-redesign .ct-nav-link i {
        display: none;
    }
}

@media (max-width: 639px) {
    body.ct-redesign .ct-header-inner {
        padding: 0 var(--sp-3);
        gap: var(--sp-2);
    }

    body.ct-redesign .ct-logo h1 {
        font-size: 21px;
    }

    body.ct-redesign .ct-logo-slogan {
        display: none;
    }

    /* Numa largura dessas, busca + tema + menu não cabem junto do
       logo. A busca fica; o tema migra para o menu mobile. */
    body.ct-redesign #btn-theme-toggle-idx {
        display: none;
    }
}

/* ── Rodapé ── */
body.ct-redesign .footer-inner {
    max-width: 1280px;
    margin: 0 auto;
}

body.ct-redesign .footer-col h4,
body.ct-redesign.theme-light .footer-col h4 {
    color: var(--ct-header-accent) !important;
    font-size: var(--fs-base);
    font-weight: 700;
    letter-spacing: .02em;
    margin-bottom: var(--sp-4);
}

/* O fio sob o título do rodapé continuava #ff6b35: é um ::after,
   e o remap da seção 02a só alcança quem usa as variáveis. */
body.ct-redesign .footer-col h4::after {
    background: var(--ct-gold-metal) !important;
    height: 2px;
    width: 32px;
    border-radius: var(--ct-r-pill);
}

body.ct-redesign .footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

body.ct-redesign .footer-col li+li {
    margin-top: 10px;
}

body.ct-redesign .footer-col a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 13px;
    text-decoration: none;
    /* Desliza um passo no hover — o mesmo gesto do menu lateral */
    transition: color var(--ct-t), transform var(--ct-t);
}

body.ct-redesign .footer-col a i {
    width: 15px;
    text-align: center;
    font-size: var(--fs-xs);
    opacity: .55;
    transition: opacity var(--ct-t), color var(--ct-t);
}

body.ct-redesign .footer-col a:hover {
    transform: translateX(3px);
}

body.ct-redesign .footer-col a:hover i {
    opacity: 1;
    color: var(--ct-gold);
}

body.ct-redesign .footer-suporte {
    margin-top: 10px;
    font-size: 13px;
}

body.ct-redesign .footer-suporte a,
body.ct-redesign.theme-light .footer-suporte a {
    color: var(--ct-header-accent) !important;
    font-weight: 600;
}

body.ct-redesign .footer-col a:hover i,
body.ct-redesign .social-btn:hover,
body.ct-redesign.theme-light .social-btn:hover {
    color: var(--ct-header-accent) !important;
}

body.ct-redesign .social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--ct-border);
    color: var(--ct-text-soft) !important;
    transition: color var(--ct-t), border-color var(--ct-t),
        transform var(--ct-t), background var(--ct-t);
}

body.ct-redesign .social-btn:hover {
    color: var(--ct-gold) !important;
    border-color: var(--ct-gold-line);
    background: var(--ct-gold-glow);
    transform: translateY(-2px);
}

/* ── Resíduos laranja do modal de conta ──
   Levantados varrendo a página renderizada atrás de #ff6b35 /
   #ff7139, como na seção 11c. São gradientes e ::after, que o
   remap de variáveis não alcança. */
body.ct-redesign .btn-auth-primary,
body.ct-redesign .auth-submit,
body.ct-redesign .btn-auth-primary:hover {
    background: linear-gradient(135deg, var(--ct-gold-deep), #8a6a15) !important;
    color: #fff !important;
    border: 0 !important;
}

body.ct-redesign .auth-tab::after,
body.ct-redesign .auth-tab.active::after {
    background: var(--ct-gold-metal) !important;
}

body.ct-redesign .auth-tab.active {
    color: var(--ct-gold) !important;
}

body.ct-redesign .fab:not(.fa-youtube) {
    color: inherit;
}

/* ============================================================
   18. MOVIMENTO — o mesmo vocabulário em todas as páginas
   ------------------------------------------------------------
   Três gestos, e só três: revelar ao entrar na tela, subir no
   hover, afundar no clique. Repetidos em todo componente, é o que
   faz o site parecer uma peça só e não 45 páginas separadas.
   ============================================================ */

/* ── Revelar ao rolar ──
   A regra está atrás de .ct-reveal-on, que o ct-shell.js põe no
   <html> durante o parse. Sem o script (ou com "reduzir
   movimento") nada é escondido — o conteúdo aparece direto. Essa
   é a diferença entre uma animação e um conteúdo perdido. */
html.ct-reveal-on body.ct-redesign .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 520ms var(--ct-ease-out),
        transform 520ms var(--ct-ease-out);
    will-change: opacity, transform;
}

html.ct-reveal-on body.ct-redesign .reveal.visible {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Filhos diretos escalonados: cada um entra 60ms depois do
   anterior, até o sexto. Além disso a espera fica perceptível. */
html.ct-reveal-on body.ct-redesign .reveal-stagger>* {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 460ms var(--ct-ease-out),
        transform 460ms var(--ct-ease-out);
}

html.ct-reveal-on body.ct-redesign .reveal-stagger.visible>* {
    opacity: 1;
    transform: none;
}

html.ct-reveal-on body.ct-redesign .reveal-stagger.visible>:nth-child(2) {
    transition-delay: 60ms;
}

html.ct-reveal-on body.ct-redesign .reveal-stagger.visible>:nth-child(3) {
    transition-delay: 120ms;
}

html.ct-reveal-on body.ct-redesign .reveal-stagger.visible>:nth-child(4) {
    transition-delay: 180ms;
}

html.ct-reveal-on body.ct-redesign .reveal-stagger.visible>:nth-child(5) {
    transition-delay: 240ms;
}

html.ct-reveal-on body.ct-redesign .reveal-stagger.visible>:nth-child(n+6) {
    transition-delay: 300ms;
}

@keyframes ct-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes ct-slide-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ── Subir no hover ──
   Vale para os cartões cuja superfície o tema já controla. Só
   transform/box-shadow: nada aqui mexe em cor, que depende do
   fundo de cada componente. */
body.ct-pagina-conteudo .policy-section,
body.ct-pagina-conteudo [class*="-card"],
body.ct-redesign .number-item,
body.ct-redesign .principle-item,
body.ct-redesign .feature-card,
body.ct-redesign .game-card {
    transition: transform var(--ct-t-slow),
        border-color var(--ct-t),
        box-shadow var(--ct-t-slow) !important;
}

body.ct-pagina-conteudo .policy-section:hover,
body.ct-pagina-conteudo [class*="-card"]:hover,
body.ct-redesign .number-item:hover,
body.ct-redesign .principle-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--ct-shadow-lg) !important;
}

/* ── Afundar no clique ── */
body.ct-redesign button:active,
body.ct-redesign .btn:active,
body.ct-redesign [class*="-btn"]:active {
    transform: scale(.97);
}

/* Foco visível — o teclado tem que enxergar o mesmo dourado. */
body.ct-redesign a:focus-visible,
body.ct-redesign button:focus-visible,
body.ct-redesign input:focus-visible,
body.ct-redesign select:focus-visible,
body.ct-redesign textarea:focus-visible {
    outline: 2px solid var(--ct-gold);
    outline-offset: 2px;
    border-radius: var(--ct-r-sm);
}

/* Rolagem suave para as âncoras dos sumários, sem passar por baixo
   do header sticky. */
html {
    scroll-behavior: smooth;
}

body.ct-redesign [id] {
    scroll-margin-top: calc(var(--header-h) + var(--sp-4));
}

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    body.ct-redesign *,
    body.ct-redesign *::before,
    body.ct-redesign *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    body.ct-redesign .reveal,
    body.ct-redesign .reveal-stagger>* {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================================
   21. MOBILE — o que só existe no telemóvel
   ============================================================ */

/* ── Troca de tema no menu mobile ──
   Abaixo de 640px o botão de tema sai do header (§17): logo +
   busca + tema + hambúrguer não cabem lado a lado. O comentário
   de lá dizia "o tema migra para o menu mobile" — mas a linha
   nunca existiu, e quem entrava pelo telemóvel simplesmente não
   tinha como trocar de tema. Aqui ela existe.

   O markup é o do ct-shell.js: um <button> que veste
   `.ct-mnav-link` (mesma altura, mesmo ícone, mesmo hover das
   linhas de navegação) mais esta classe, que só acrescenta o
   separador e desfaz o visual nativo do botão. */
body.ct-redesign .ct-mnav-theme {
    width: 100%;
    margin-top: var(--sp-2);
    padding-top: var(--sp-4);
    border: 0;
    border-top: 1px solid var(--ct-border);
    border-radius: 0;
    background: transparent;
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

body.ct-redesign .ct-mnav-theme:hover {
    background: var(--ct-gold-glow);
}

/* Acima de 640px o botão do header está de volta — duas formas de
   trocar o tema na mesma tela só confundem. */
@media (min-width: 640px) {
    body.ct-redesign .ct-mnav-theme {
        display: none;
    }
}

/* ── Widget "Buy me a coffee" ──
   A bolha de mensagem do widget é dimensionada por `max-width` e
   fica ancorada a 102px da direita — num ecrã de telemóvel isso
   deixa ~130px de largura para o texto, e a mensagem virava uma
   coluna de dez linhas cobrindo metade do conteúdo. No telemóvel
   fica só o botão; a mensagem continua no desktop, onde cabe.

   O seletor casa o `style` inline porque o widget não põe classe
   nem id nenhum nessa div — só nela o `transform-origin` é
   escrito assim. */
@media (max-width: 768px) {

    body>div[style*="transform-origin: right bottom"] {
        display: none !important;
    }

    #bmc-close-btn {
        display: none !important;
    }

    #bmc-wbtn {
        width: 52px !important;
        height: 52px !important;
        border-radius: 26px !important;
    }

    #bmc-wbtn img {
        width: 26px !important;
        height: 26px !important;
    }
}

/* ============================================================
   22. CAIXA DE SUGESTÕES DA BUSCA (ct-busca.js)
   ------------------------------------------------------------
   O markup antigo dos resultados vinha do script.js montado com
   classes utilitárias do Tailwind — que só existe no index e no
   partituras. Nas outras 49 páginas a lista saía sem estilo
   nenhum: texto preto sobre o painel escuro do header.
   Agora as classes são próprias e moram aqui, junto do resto do
   tema, e por isso valem em todas as páginas.

   A caixa é ESCURA nos dois temas, como o header de onde ela
   pende (§17) — e por isso usa os tokens do header e cores
   claras cravadas, não `--ct-text`, que no tema claro é quase
   preto e sumiria aqui dentro.
   ============================================================ */
body.ct-redesign .ct-search-results,
body.ct-redesign.theme-light .ct-search-results {
    background: var(--ct-header-bg) !important;
    border-color: rgba(255, 255, 255, .1) !important;
}

body.ct-redesign .ct-bsc-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 10px var(--sp-4);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.07);
    transition: background var(--ct-t);
}

body.ct-redesign .ct-bsc-item:last-child {
    border-bottom: 0;
}

body.ct-redesign .ct-bsc-item:hover,
body.ct-redesign .ct-bsc-item.is-alvo {
    background: rgba(212,175,55,.12);
}

/* A capa do resultado: iniciais do artista num quadrado colorido,
   com a FOTO dele por cima quando existe.

   A foto não vem do Firestore — lá ela é webp em base64 de 22 a
   44 KB dentro do documento da cifra, e pedi-la por linha custaria
   ~250 KB por consulta. Vem de assets/images/artistas/, recortada
   em 96 px (~1,6 KB) pelo gerar-fotos-artistas.js.

   As iniciais continuam pintadas DEBAIXO da foto, não no lugar
   dela: enquanto a imagem não chega — ou se não chegar — o que
   aparece já está lá, sem buraco nem salto de layout. */
body.ct-redesign .ct-bsc-capa {
    position: relative;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: var(--ct-r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .5px;
    color: rgba(255, 255, 255, .92);
    border: 1px solid rgba(255, 255, 255, .12);
    overflow: hidden;
}

body.ct-redesign .ct-bsc-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Sem isto a foto entra de estalo enquanto a lista ainda está
       caindo em cascata, e cada linha pisca em tempo diferente. */
    animation: ctBscFoto .22s ease both;
}

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

/* A capa ganha o fio dourado no item sob o cursor ou marcado pelo
   teclado — a mesma marca de seleção que o resto da linha usa.
   (Só a borda: o anel de `box-shadow` é o que distingue o cartão
   de ARTISTA do de cifra, e ele é definido na §24.) */
body.ct-redesign .ct-bsc-item:hover .ct-bsc-capa,
body.ct-redesign .ct-bsc-item.is-alvo .ct-bsc-capa {
    border-color: var(--ct-gold-line);
}

body.ct-redesign .ct-bsc-txt {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body.ct-redesign .ct-bsc-titulo,
body.ct-redesign .ct-bsc-artista {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ct-redesign .ct-bsc-titulo {
    font-size: var(--fs-base);
    font-weight: 700;
    color: #e9edf2 !important;
}

body.ct-redesign .ct-bsc-artista {
    font-size: var(--fs-sm);
    color: rgba(233,237,242,.55) !important;
}

/* O trecho que a pessoa digitou, aceso dentro do resultado. */
body.ct-redesign .ct-bsc-mark {
    background: transparent;
    color: var(--ct-header-accent) !important;
    font-weight: 800;
}

body.ct-redesign .ct-bsc-seta {
    flex: 0 0 auto;
    font-size: 10px;
    color: rgba(233,237,242,.55);
    opacity: .5;
}

body.ct-redesign .ct-bsc-item:hover .ct-bsc-seta,
body.ct-redesign .ct-bsc-item.is-alvo .ct-bsc-seta {
    color: var(--ct-header-accent);
    opacity: 1;
}

body.ct-redesign .ct-bsc-nota {
    padding: 9px var(--sp-4);
    font-size: var(--fs-sm);
    color: rgba(233,237,242,.55) !important;
    background: rgba(212,175,55,.12);
    border-bottom: 1px solid rgba(255,255,255,.07);
}

body.ct-redesign .ct-bsc-nota strong {
    color: var(--ct-header-accent) !important;
}

body.ct-redesign .ct-bsc-aviso {
    padding: 22px var(--sp-4);
    text-align: center;
    font-size: var(--fs-sm);
    color: rgba(233,237,242,.55) !important;
}

body.ct-redesign .ct-bsc-aviso i {
    display: block;
    font-size: 18px;
    margin-bottom: 8px;
    color: var(--ct-header-accent);
    opacity: .8;
}

body.ct-redesign .ct-bsc-aviso p {
    margin: 0 0 4px;
    color: #e9edf2 !important;
}

body.ct-redesign .ct-bsc-aviso span {
    font-size: var(--fs-xs);
    opacity: .8;
}

/* No telemóvel a caixa não pode ser mais larga que a tela: o
   `min-width: 320px` do painel a empurrava para fora à direita. */
@media (max-width: 520px) {
    body.ct-redesign .ct-search-results {
        min-width: 0;
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
        right: -8px;
    }
}

/* ── Último laranja das ferramentas ──
   `.feature-btn` (Iniciar Afinador, Iniciar Metrônomo...) ficou de
   fora do remap da §02a: o ct-dark-theme.css crava o gradiente
   #ff6b35 com !important e a classe não usa variável nenhuma.

   O botão também saiu da regra universal do tema claro (§16), como
   os outros CTA de fundo forte: é dourado cheio nos dois temas, e
   a letra tem de continuar branca. */
body.ct-redesign .feature-btn {
    background: linear-gradient(135deg, var(--ct-gold-deep), #8a6a15) !important;
    box-shadow: 0 4px 14px rgba(168, 134, 42, .35) !important;
}

body.ct-redesign .feature-btn:hover {
    background: linear-gradient(135deg, #c19a2f, var(--ct-gold-deep)) !important;
    box-shadow: 0 8px 20px rgba(168, 134, 42, .45) !important;
}

/* Mesma história no ponto ativo do carrossel — #ff6b35 cravado no
   ct-dark-theme.css. É a única marca de cor visível a essa
   distância; laranja ali denuncia a paleta antiga.

   Aqui vai `--ct-header-accent` e não `--ct-gold`: o slide é
   escuro nos dois temas, como o header, e o dourado do tema claro
   (#8a6a15) desapareceria sobre a foto. */
body.ct-redesign .carousel-dot.active {
    background: var(--ct-header-accent) !important;
}

/* ============================================================
   23. PARTITURAS — biblioteca e página de detalhe
   ------------------------------------------------------------
   partituras.html e detalhe-partitura.html nasceram com a
   identidade ROXA do PianoSynestesia e com texto claro cravado
   nas classes. O roxo virou dourado (decisão do dono: o parceiro
   se identifica pelo avatar, pelo nome e pelo selo do TikTok, não
   por pintar a ação de compra).

   ── Por que `.ct-cor-propria` ──
   A regra universal de texto do tema claro (§16) NÃO é 0,14,1
   como a nota dela diz: três das exclusões são ids
   (#ct-mobile-nav, #gm-overlay, #modal-overlay), e id dentro de
   :not() conta como id. A conta real é 3,16,1 — um id no seletor
   não vence, dois não vencem, e escrever quatro ids para pintar
   um preço de dourado seria absurdo.

   Então estas classes saem da lista, que é o que a própria nota
   da §16 recomenda ("sair da lista é a única saída limpa"). O
   gancho é genérico de propósito: `.ct-cor-propria` marca
   "este componente decide a própria cor", e serve para o
   próximo caso sem precisar mexer outra vez naquele seletor
   gigante.

   Quem leva a marca deve mesmo definir a própria cor nos DOIS
   temas — é o que as regras abaixo fazem.
   ============================================================ */

/* ── Cartão da biblioteca ── */
body.ct-redesign .ps-card-title {
    color: var(--ct-text) !important;
}

body.ct-redesign .ps-card-anime {
    color: var(--ct-text-dim) !important;
}

body.ct-redesign .ps-card-preco {
    color: var(--ct-gold) !important;
}

/* O selo de dificuldade fica sobre o véu escuro da capa, então as
   cores semânticas são as CLARAS nos dois temas — quem decide é o
   fundo do selo, não o tema da página. */
body.ct-redesign .ps-card-diff { color: #ffffff !important; }
body.ct-redesign .ps-card-diff.ps-diff-facil   { color: #7ee2a8 !important; }
body.ct-redesign .ps-card-diff.ps-diff-medio   { color: #f5c451 !important; }
/* O vermelho estava exactamente em 4,50:1 sobre o véu da capa —
   ou seja, dependia do arredondamento. Um tom mais claro. */
body.ct-redesign .ps-card-diff.ps-diff-dificil { color: #ffb0aa !important; }

/* ── Filtros de dificuldade ── */
body.ct-redesign .ps-filter-btn { color: var(--ct-text-dim) !important; }
body.ct-redesign .ps-filter-btn:hover { color: var(--ct-text) !important; }

body.ct-redesign .ps-filter-btn.active {
    color: var(--ct-gold) !important;
    background: var(--ct-gold-glow) !important;
    border-color: var(--ct-gold-line) !important;
}

/* ── Sugestões da busca ──
   O dropdown cai sob o header, que é escuro nos dois temas. */
body.ct-redesign .ps-sr-price { color: var(--ct-header-accent) !important; }

/* ── Página de detalhe ── */
/* O título vinha pintado por `background-clip: text` com um degradê
   BRANCO. No tema claro isso é branco sobre papel — o título
   simplesmente desaparecia. O degradê volta a ser tinta normal, e a
   cor passa a acompanhar o tema. */
body.ct-redesign .song-title {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--ct-text) !important;
}

body.ct-redesign .anime-tag {
    color: var(--ct-gold) !important;
    background: var(--ct-gold-glow) !important;
    border-color: var(--ct-gold-line) !important;
}

body.ct-redesign .price-tag { color: var(--ct-text) !important; }
body.ct-redesign .price-tag small { color: var(--ct-gold) !important; }

/* ── Barra de compra fixa do telemóvel ──
   Escura nos dois temas, como o header e o rodapé: ela flutua sobre
   conteúdo qualquer, e é o único elemento da página que precisa ser
   legível sem saber o que está por baixo. */
body.ct-redesign .buy-bar { color: var(--ct-header-text) !important; }
body.ct-redesign .buy-bar .buy-bar-label { color: var(--ct-footer-dim) !important; }
body.ct-redesign .buy-bar .buy-bar-preco { color: #f0d98a !important; }

/* A barra herda o tratamento dourado dos CTA de partitura (a classe
   .purchase-btn não está naquela lista), então a tinta do rótulo é
   definida aqui, junto do fundo. */
body.ct-redesign .purchase-btn {
    background: var(--ct-gold-metal) !important;
    background-image: var(--ct-gold-metal) !important;
    border-color: transparent !important;
    color: #1a1408 !important;
}

body.ct-redesign .purchase-btn i { color: #1a1408 !important; }

/* No tema claro o dourado da marca é escuro; tinta escura sobre ele
   daria ~3:1. Mesma solução dos outros CTA: rampa fechada + branco. */
body.ct-redesign.theme-light .purchase-btn {
    background: linear-gradient(135deg, #8a6a15 0%, #6f5512 100%) !important;
    background-image: linear-gradient(135deg, #8a6a15 0%, #6f5512 100%) !important;
    color: #ffffff !important;
}

body.ct-redesign.theme-light .purchase-btn i { color: #ffffff !important; }

/* A barra é escura mesmo no tema claro, então o botão dentro dela
   volta ao ouro claro com tinta escura — o par de maior contraste
   sobre aquele fundo. */
body.ct-redesign.theme-light .buy-bar .purchase-btn {
    background: var(--ct-gold-metal) !important;
    background-image: linear-gradient(135deg, #f0d98a 0%, #d4af37 38%, #a8862a 62%, #e5c76b 100%) !important;
    color: #1a1408 !important;
}

body.ct-redesign.theme-light .buy-bar .purchase-btn i { color: #1a1408 !important; }

/* ── CTA dentro de faixa escura (o herói SAO) ──
   Três regras anteriores disputam a tinta deste botão:
   `.ct-bloco-escuro *` (cinza-claro), `.ct-bloco-escuro :is(a,…)`
   (ouro) e `:is([class*="cta"],…):is(a,button)` do tema claro
   (branco). Todas davam ouro-sobre-ouro ou quase.

   O seletor precisa de `a.` e das duas classes de tema para passar
   de (0,3,2), que é a mais forte das três. */
body.ct-redesign .ct-bloco-escuro a.ps-buy-btn,
body.ct-redesign .ct-bloco-escuro a.ps-buy-btn i,
body.ct-redesign .ct-bloco-escuro a.ps-card-btn,
body.ct-redesign .ct-bloco-escuro a.ps-card-btn i,
body.ct-redesign.theme-light .ct-bloco-escuro a.ps-buy-btn,
body.ct-redesign.theme-light .ct-bloco-escuro a.ps-buy-btn i,
body.ct-redesign.theme-light .ct-bloco-escuro a.ps-card-btn,
body.ct-redesign.theme-light .ct-bloco-escuro a.ps-card-btn i {
    color: #1a1408 !important;
}

/* Dentro do bloco escuro o ouro é sempre o CLARO, mesmo com a
   página no tema claro — o fundo ali não mudou de cor. */
body.ct-redesign.theme-light .ct-bloco-escuro a.ps-buy-btn,
body.ct-redesign.theme-light .ct-bloco-escuro a.ps-card-btn {
    background-image: linear-gradient(135deg, #f0d98a 0%, #d4af37 38%, #a8862a 62%, #e5c76b 100%) !important;
}

/* ── Ações secundárias dentro de faixa escura ──
   Botão fantasma (véu branco translúcido sobre a foto): a tinta é
   quase-branca nos dois temas. O dourado escuro do tema claro dava
   2,1:1 sobre esse véu. */
body.ct-redesign .ct-bloco-escuro .ct-cor-propria[style*="rgba(255,255,255,0.08)"],
body.ct-redesign.theme-light .ct-bloco-escuro .ct-cor-propria[style*="rgba(255,255,255,0.08)"] {
    color: #f2f6fa !important;
}

/* ============================================================
   24. BUSCA — ENTRADA DOS RESULTADOS E CARTÃO DE ARTISTA
   ------------------------------------------------------------
   A lista de sugestões aparecia de uma vez, em bloco. Com o motor
   novo a resposta vem em 1–3 ms, e sem nenhuma transição a lista
   pisca: o conteúdo troca antes de o olho acompanhar.

   A entrada escalonada resolve os dois lados. Cada linha entra
   com um atraso proporcional à sua posição (o `animation-delay`
   vem inline do ct-busca.js), então a lista "cai" em cascata e a
   troca fica legível mesmo quando é instantânea.
   ============================================================ */

@keyframes ctBscEntra {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

body.ct-redesign .ct-bsc-item {
    /* `both` para a linha já nascer invisível: sem isso ela pisca
       no estado final antes de o atraso começar a contar. */
    animation: ctBscEntra 260ms var(--ct-ease-out) both;
}

body.ct-redesign .ct-bsc-nota,
body.ct-redesign .ct-bsc-aviso {
    animation: ctBscEntra 240ms var(--ct-ease-out) both;
}

/* Quem pediu menos movimento no sistema recebe a lista pronta. */
@media (prefers-reduced-motion: reduce) {
    body.ct-redesign .ct-bsc-item,
    body.ct-redesign .ct-bsc-nota,
    body.ct-redesign .ct-bsc-aviso {
        animation: none !important;
    }
}

/* ── Cartão de artista ──
   O artista é um destino diferente de uma cifra: leva a uma
   página com todas as músicas dele. A lista tem de mostrar essa
   diferença antes do clique, não depois — daí o avatar redondo (o
   da cifra é quadrado), o fio dourado à esquerda e a etiqueta. */
body.ct-redesign .ct-bsc-artista-item {
    background: linear-gradient(90deg, var(--ct-gold-glow), transparent 62%);
    box-shadow: inset 3px 0 0 var(--ct-gold);
}

body.ct-redesign .ct-bsc-artista-item:hover,
body.ct-redesign .ct-bsc-artista-item.is-alvo {
    background: linear-gradient(90deg, rgba(212,175,55,.22), rgba(212,175,55,.06) 62%);
}

body.ct-redesign .ct-bsc-capa-redonda {
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--ct-gold-line);
}

body.ct-redesign .ct-bsc-tag {
    display: inline-block;
    margin-right: 7px;
    padding: 1px 7px;
    border-radius: var(--ct-r-pill);
    background: var(--ct-gold-glow);
    border: 1px solid var(--ct-gold-line);
    color: var(--ct-header-accent);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    vertical-align: 1px;
}

/* ============================================================
   25. PERFIL — header, ranking e superfícies
   ------------------------------------------------------------
   perfil.html cresceu à parte do resto do site: não carrega o
   site.css, traz ~3.500 linhas de estilo no próprio arquivo e
   tinha um <header> só dele, com uma navegação de quatro itens
   que não existia em mais nenhuma página.

   Três coisas vêm parar aqui:

   1. O HEADER passou a ser o canônico (§17), injetado pelo
      ct-shell como nas outras 50 páginas. O que era exclusivo do
      perfil — moedas, carrinho, sair, avatar — continua existindo
      e é encaixado nas ações do header por JS. É esse encaixe que
      esta seção veste.

   2. O RANKING foi refeito. As classes antigas (.podium-item,
      .lb-row) estavam definidas TRÊS vezes dentro do perfil.html,
      cada bloco sobrescrevendo o anterior — daí o pódio branco
      sobre a página escura e os nomes em #0f172a, invisíveis.
      O markup novo usa `ct-rk-*` e é estilizado só aqui.

   3. As superfícies que sobraram claras no tema escuro: os selos
      de item equipado do inventário, que eram `background: white`
      cravado no bugfixes_patch.css.

   Tudo abaixo trabalha com os tokens `--ct-*`, então acompanha os
   dois temas sem uma segunda lista de regras.
   ============================================================ */

/* ── 25a. As ações próprias do perfil dentro do header ── */

/* A carteira. Dourada nos dois temas: é o número que o utilizador
   mais procura ao entrar. */
body.ct-redesign .ct-perfil-coins {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: var(--ct-r-pill);
    background: rgba(212, 175, 55, .13);
    border: 1px solid var(--ct-gold-line);
    color: var(--ct-header-accent) !important;
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body.ct-redesign .ct-perfil-coins i {
    color: var(--ct-header-accent) !important;
    font-size: 12px;
}

/* O carrinho carrega um contador. `position: relative` no botão e
   não no ícone: o selo tem de se pendurar na moldura do botão. */
body.ct-redesign .ct-perfil-carrinho {
    position: relative;
}

/* O `updateCartBadge` do perfil.js liga e desliga este selo com
   `style.display = "flex" | "none"` — então o centro tem de ser
   feito com flex, não com `line-height`, ou o número desce um
   pixel toda vez que o carrinho muda. */
body.ct-redesign .ct-perfil-carrinho-selo {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: var(--ct-r-pill);
    background: var(--ct-danger);
    color: #fff !important;
    font-size: 10px;
    font-weight: 800;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--ct-header-bg);
}

/* O avatar é o atalho para trocar a foto. O anel dourado marca
   que ele é clicável — sem ele parecia só uma imagem. */
body.ct-redesign .ct-perfil-avatar {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--ct-gold-line);
    background: var(--ct-surface-2);
    color: var(--ct-header-accent) !important;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--ct-t), box-shadow var(--ct-t);
}

body.ct-redesign .ct-perfil-avatar:hover {
    border-color: var(--ct-gold);
    box-shadow: var(--ct-shadow-gold);
}

body.ct-redesign .ct-perfil-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Abaixo de 900px o header canônico já é apertado: sobra o
   essencial. O rótulo das moedas sai antes do número, e o "sair"
   sai por último — no telemóvel ele também está no menu. */
@media (max-width: 900px) {
    body.ct-redesign .ct-perfil-coins {
        padding: 5px 10px;
        font-size: 12px;
    }
}

/* Abaixo de 640px o header canônico já perde o botão de tema (§17)
   e ainda assim não cabiam seis ações: medido em 390px, a barra ia
   até 463px e o botão do MENU ficava fora da tela — não havia como
   abrir a navegação no telemóvel.

   Ficam a lupa, as moedas e o menu. As três que saem têm outro
   caminho: o carrinho tem botão próprio dentro da loja, o avatar é
   clicável no topo do perfil, e o "sair" é acrescentado ao menu
   mobile pelo script do perfil.html. */
@media (max-width: 640px) {
    body.ct-redesign .ct-perfil-sair,
    body.ct-redesign .ct-perfil-carrinho,
    body.ct-redesign .ct-perfil-avatar {
        display: none;
    }

    body.ct-redesign .ct-perfil-coins {
        padding: 5px 9px;
        gap: 5px;
        font-size: 11.5px;
    }
}

/* O "Sair" do menu mobile é uma ação destrutiva no meio de links de
   navegação: fica separado por um fio e não finge ser um link. */
body.ct-redesign .ct-mnav-sair {
    width: 100%;
    margin-top: 6px;
    padding-top: 14px;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* ── 25b. Ranking ── */

body.ct-redesign .ct-rk {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 var(--sp-4) var(--sp-7);
}

body.ct-redesign .ct-rk-vazio {
    padding: 56px var(--sp-4);
    text-align: center;
    color: var(--ct-text-dim) !important;
    font-size: var(--fs-sm);
    font-weight: 600;
}

body.ct-redesign .ct-rk-vazio i {
    display: block;
    font-size: 26px;
    margin-bottom: 12px;
    color: var(--ct-gold) !important;
}

/* ── O pódio ──
   Três degraus, o do meio mais alto. A diferença de altura vem de
   `margin-bottom` e não de `height`: assim o conteúdo de cada
   degrau manda no tamanho dele, e um nome comprido quebra em vez
   de estourar a caixa — era o que as três alturas fixas do
   arquivo antigo faziam. */
/* Colunas implícitas, não `repeat(3, …)`: com dois jogadores no
   ranking a terceira coluna ficava vazia e o pódio saía encostado
   à esquerda. `minmax(0, 1fr)` e não `1fr` puro — 1fr tem mínimo
   `auto` e um nome comprido empurraria a grade para fora da tela. */
body.ct-redesign .ct-rk-podio {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    justify-items: center;
    align-items: end;
    gap: var(--sp-4);
    margin: 34px 0 var(--sp-6);
}

body.ct-redesign .ct-rk-degrau {
    width: 100%;
    max-width: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 30px var(--sp-3) var(--sp-4);
    border-radius: var(--ct-r-lg);
    background: linear-gradient(180deg, var(--ct-surface-2), var(--ct-surface));
    border: 1px solid var(--ct-border);
    box-shadow: var(--ct-shadow-md);
    cursor: pointer;
    text-align: center;
    position: relative;
    transition: transform var(--ct-t), box-shadow var(--ct-t), border-color var(--ct-t);
}

body.ct-redesign .ct-rk-degrau:hover,
body.ct-redesign .ct-rk-degrau:focus-visible {
    transform: translateY(-5px);
    border-color: var(--ct-gold-line);
    box-shadow: var(--ct-shadow-lg);
    outline: none;
}

body.ct-redesign .ct-rk-ouro {
    margin-bottom: 22px;
    padding-top: 36px;
    border: 1px solid var(--ct-gold-line);
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(212, 175, 55, .16), transparent 62%),
        linear-gradient(180deg, var(--ct-surface-2), var(--ct-surface));
    box-shadow: var(--ct-shadow-gold-lg);
}

/* A medalha sai para fora da caixa: é o que dá a leitura de
   "pódio" antes de se ler qualquer número. */
body.ct-redesign .ct-rk-medalha {
    position: absolute;
    top: -17px;
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1;
    border-radius: 50%;
    background: var(--ct-surface-3);
    border: 1px solid var(--ct-border-strong);
    box-shadow: var(--ct-shadow-sm);
}

/* Sem tom próprio, as três medalhas lêem-se iguais e o pódio deixa
   de dizer quem está à frente. O dourado é o mesmo do resto do
   site; a prata e o bronze são só para os distinguir. */
body.ct-redesign .ct-rk-medalha i {
    color: #c8d0dc;
}

body.ct-redesign .ct-rk-ouro .ct-rk-medalha i {
    color: #d4af37;
}

body.ct-redesign .ct-rk-bronze .ct-rk-medalha i {
    color: #c8813f;
}

body.ct-redesign .ct-rk-ouro .ct-rk-medalha {
    width: 40px;
    height: 40px;
    top: -20px;
    font-size: 20px;
    border-color: var(--ct-gold);
    box-shadow: var(--ct-shadow-gold);
}

body.ct-redesign .ct-rk-foto {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ct-surface-3);
    border: 2px solid var(--ct-border-strong);
    flex-shrink: 0;
}

body.ct-redesign .ct-rk-ouro .ct-rk-foto {
    width: 88px;
    height: 88px;
    border-color: var(--ct-gold);
    box-shadow: 0 0 0 4px var(--ct-gold-glow);
}

body.ct-redesign .ct-rk-prata .ct-rk-foto {
    border-color: #b9c2cc;
}

body.ct-redesign .ct-rk-bronze .ct-rk-foto {
    border-color: #c88a52;
}

body.ct-redesign .ct-rk-foto img,
body.ct-redesign .ct-rk-foto-mini img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.ct-redesign .ct-rk-iniciais {
    font-size: 20px;
    font-weight: 800;
    color: var(--ct-gold) !important;
    letter-spacing: .5px;
}

body.ct-redesign .ct-rk-foto-mini .ct-rk-iniciais {
    font-size: 13px;
}

body.ct-redesign .ct-rk-nome {
    font-size: var(--fs-base);
    font-weight: 800;
    color: var(--ct-text) !important;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

body.ct-redesign .ct-rk-xp {
    padding: 4px 14px;
    border-radius: var(--ct-r-pill);
    background: rgba(212, 175, 55, .13);
    border: 1px solid var(--ct-gold-line);
    color: var(--ct-gold) !important;
    font-size: var(--fs-sm);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* A etiqueta do jogador é comprada na loja e tem cor própria —
   `tagStyle` vem do catálogo com o gradiente dela. Por isso
   `.ct-cor-propria` no markup: sem ele o tema claro pintaria todas
   de cinza e a loja de tags deixaria de fazer sentido. */
body.ct-redesign .ct-rk-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--ct-r-pill);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .3px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── A tabela ── */
body.ct-redesign .ct-rk-tabela {
    background: var(--ct-surface);
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-r-lg);
    box-shadow: var(--ct-shadow-md);
    overflow: hidden;
}

body.ct-redesign .ct-rk-linha {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 110px 96px;
    align-items: center;
    gap: var(--sp-3);
    padding: 11px var(--sp-4);
    border-bottom: 1px solid var(--ct-border);
    cursor: pointer;
    transition: background var(--ct-t);
}

body.ct-redesign .ct-rk-linha:last-child {
    border-bottom: 0;
}

body.ct-redesign .ct-rk-cabecalho {
    background: var(--ct-surface-3);
    cursor: default;
    padding-top: 13px;
    padding-bottom: 13px;
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ct-text-dim) !important;
}

body.ct-redesign .ct-rk-linha:not(.ct-rk-cabecalho):hover,
body.ct-redesign .ct-rk-linha:not(.ct-rk-cabecalho):focus-visible {
    background: rgba(212, 175, 55, .07);
    outline: none;
}

/* O top 3 continua marcado na tabela — quem rola direto para a
   lista não perde a informação que o pódio dá. */
body.ct-redesign .ct-rk-p1 {
    box-shadow: inset 3px 0 0 var(--ct-gold);
    background: linear-gradient(90deg, rgba(212, 175, 55, .09), transparent 45%);
}

body.ct-redesign .ct-rk-p2 {
    box-shadow: inset 3px 0 0 #b9c2cc;
}

body.ct-redesign .ct-rk-p3 {
    box-shadow: inset 3px 0 0 #c88a52;
}

/* A linha do próprio utilizador. Fundo dourado fraco e fio cheio:
   dá para achar-se na lista de relance. */
body.ct-redesign .ct-rk-eu {
    background: linear-gradient(90deg, rgba(212, 175, 55, .14), rgba(212, 175, 55, .03)) !important;
    box-shadow: inset 3px 0 0 var(--ct-gold);
}

/* A linha "forçada": quem não entrou nas 10 carregadas aparece
   colada no fim, separada por um fio mais forte. */
body.ct-redesign .ct-rk-destacada {
    border-top: 2px solid var(--ct-gold-line);
    cursor: default;
}

body.ct-redesign .ct-rk-pos {
    font-size: var(--fs-base);
    font-weight: 900;
    color: var(--ct-text-dim) !important;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

body.ct-redesign .ct-rk-p1 .ct-rk-pos {
    color: var(--ct-gold) !important;
}

body.ct-redesign .ct-rk-jogador {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

body.ct-redesign .ct-rk-foto-mini {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ct-surface-3);
    border: 1px solid var(--ct-border-strong);
    flex-shrink: 0;
}

body.ct-redesign .ct-rk-jogador-txt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
}

body.ct-redesign .ct-rk-nome-linha {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--ct-text) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.ct-redesign .ct-rk-voce {
    flex-shrink: 0;
    padding: 1px 8px;
    border-radius: var(--ct-r-pill);
    background: rgba(212, 175, 55, .16);
    border: 1px solid var(--ct-gold-line);
    color: var(--ct-gold) !important;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
}

body.ct-redesign .ct-rk-premium {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--ct-gold) !important;
}

body.ct-redesign .ct-rk-col-xp {
    text-align: right;
    font-size: var(--fs-base);
    font-weight: 800;
    color: var(--ct-gold) !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body.ct-redesign .ct-rk-cabecalho .ct-rk-col-xp,
body.ct-redesign .ct-rk-cabecalho .ct-rk-col-coins {
    font-size: var(--fs-xs);
    font-weight: 800;
    color: var(--ct-text-dim) !important;
}

body.ct-redesign .ct-rk-col-coins {
    text-align: right;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--ct-text-soft) !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body.ct-redesign .ct-rk-col-coins i {
    margin-right: 4px;
    font-size: 11px;
    color: var(--ct-gold) !important;
}

/* ── Rodapé da tabela ── */
body.ct-redesign .ct-rk-rodape {
    text-align: center;
    padding: var(--sp-5) 0 var(--sp-2);
}

body.ct-redesign .ct-rk-mais {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    border: 1px solid var(--ct-gold-line);
    border-radius: var(--ct-r-pill);
    background: rgba(212, 175, 55, .10);
    color: var(--ct-gold) !important;
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 800;
    cursor: pointer;
    transition: background var(--ct-t), box-shadow var(--ct-t), transform var(--ct-t);
}

body.ct-redesign .ct-rk-mais:hover {
    background: rgba(212, 175, 55, .18);
    box-shadow: var(--ct-shadow-gold);
    transform: translateY(-1px);
}

body.ct-redesign .ct-rk-fim {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ct-text-faint) !important;
}

/* ── Telemóvel ──
   Coins sai primeiro (é o número menos procurado), depois a
   etiqueta. O pódio nunca vira uma coluna só: perder os três
   degraus lado a lado é perder o que ele comunica. */
@media (max-width: 720px) {
    body.ct-redesign .ct-rk {
        padding: 0 var(--sp-3) var(--sp-6);
    }

    body.ct-redesign .ct-rk-podio {
        gap: var(--sp-2);
        margin: 30px 0 var(--sp-6);
    }

    body.ct-redesign .ct-rk-degrau {
        padding: 26px 8px 14px;
        gap: 7px;
    }

    body.ct-redesign .ct-rk-foto {
        width: 56px;
        height: 56px;
    }

    body.ct-redesign .ct-rk-ouro .ct-rk-foto {
        width: 66px;
        height: 66px;
    }

    body.ct-redesign .ct-rk-nome {
        font-size: var(--fs-sm);
    }

    body.ct-redesign .ct-rk-xp {
        padding: 3px 10px;
        font-size: var(--fs-xs);
    }

    body.ct-redesign .ct-rk-linha {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        gap: 10px;
        padding: 10px var(--sp-3);
    }

    body.ct-redesign .ct-rk-col-coins {
        display: none;
    }

    body.ct-redesign .ct-rk-foto-mini {
        width: 34px;
        height: 34px;
    }

    body.ct-redesign .ct-rk-nome-linha {
        font-size: var(--fs-sm);
    }
}

@media (max-width: 420px) {
    body.ct-redesign .ct-rk-tag {
        display: none;
    }
}

/* ── 25c. Superfícies que ficaram claras no tema escuro ──
   `.inv-equipped-chip` nasceu com `background: white` cravado no
   bugfixes_patch.css, de quando o perfil era uma página clara.
   Sobre a página escura viram pastilhas brancas — é o que se vê no
   inventário. Aqui elas voltam a seguir o tema. */
body.ct-redesign .inv-equipped-section {
    background: linear-gradient(135deg, rgba(212, 175, 55, .07), rgba(212, 175, 55, .02)) !important;
    border-color: var(--ct-gold-line) !important;
}

body.ct-redesign .inv-equipped-title {
    color: var(--ct-gold) !important;
}

body.ct-redesign .inv-equipped-chip {
    background: var(--ct-surface-2) !important;
    border-color: var(--ct-gold-line) !important;
    color: var(--ct-text) !important;
    box-shadow: var(--ct-shadow-sm) !important;
}

body.ct-redesign .inv-equipped-chip .chip-name {
    color: var(--ct-text) !important;
}

body.ct-redesign .inv-equipped-chip .chip-label {
    color: var(--ct-text-dim) !important;
}

body.ct-redesign .inv-unequip-btn {
    color: var(--ct-text-dim) !important;
}

/* ------------------------------------------------------------
   25d. LOJA E INVENTÁRIO DO PERFIL
   ------------------------------------------------------------
   A loja ficou de fora da repaginação: veio da versão clara e
   rosa/roxa do perfil, com as cores escritas dentro de `style=`.
   O que isso produzia, medido no navegador:

     • os cartões de "Super Destaques Míticos" tinham
       `background: linear-gradient(to bottom,#fff,#fdf2f8)` cravado
       e o nome em `var(--text)` — que no tema escuro é CLARO.
       Letra clara sobre cartão branco: o item ficava ilegível.
     • a faixa "Coleção Mítica" era azul #1e40af com texto branco;
       no tema claro a regra universal (§16b) pintava esse texto de
       cinza escuro sobre o azul escuro — 1,23:1.
     • todo botão de fundo dourado com `color:white` INLINE perdia o
       branco para a mesma regra universal — 1,62:1. Estilo inline
       não tem `!important`, e a regra universal tem.

   Duas decisões governam tudo abaixo:

   1. COR NENHUMA no HTML. Quem precisa de cor própria leva classe,
      e a classe é definida aqui, nos dois temas.

   2. O par dourado dos botões cheios segue a mesma convenção dos
      CTA de partitura (§23): no ESCURO, ouro claro com tinta
      escura (~9:1); no CLARO, ouro fechado com tinta branca
      (5,06:1). Ouro claro com branco — o que estava lá — dá 2,6:1
      nos dois.
   ------------------------------------------------------------ */

/* ── Botão de fundo dourado ── */
body.ct-redesign .btn-ouro,
body.ct-redesign .btn-buy,
body.ct-redesign .deal-buy-btn,
body.ct-redesign .btn-equip-store,
body.ct-redesign .mythic-card-btn,
body.ct-redesign .mythic-btn,
body.ct-redesign .btn-save,
body.ct-redesign .btn-banner-save,
body.ct-redesign .btn-auth,
body.ct-redesign .btn-confirm,
body.ct-redesign .prem-plan-top,
body.ct-redesign .btn-confirm-prem,
body.ct-redesign .btn-checkout,
body.ct-redesign .cart-notif-view,
body.ct-redesign #cat-tabs .cat-btn.active {
    background: var(--ct-ouro-botao) !important;
    border: 1px solid rgba(255, 255, 255, .38) !important;
    color: var(--ct-ouro-botao-tinta) !important;
    font-family: inherit;
    font-weight: 800;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5),
        0 2px 8px rgba(168, 134, 42, .26);
    transition: filter var(--ct-t), box-shadow var(--ct-t), transform var(--ct-t);
}

body.ct-redesign .btn-ouro i,
body.ct-redesign .btn-buy i,
body.ct-redesign .deal-buy-btn i,
body.ct-redesign .btn-equip-store i,
body.ct-redesign .mythic-card-btn i,
body.ct-redesign .mythic-btn i,
body.ct-redesign .btn-save i,
body.ct-redesign .btn-banner-save i,
body.ct-redesign .btn-auth i,
body.ct-redesign .btn-confirm i,
body.ct-redesign .prem-plan-top *,
body.ct-redesign .btn-confirm-prem i,
body.ct-redesign .btn-checkout i,
body.ct-redesign .cart-notif-view i,
body.ct-redesign #cat-tabs .cat-btn.active i {
    color: var(--ct-ouro-botao-tinta) !important;
}

/* No tema claro o mesmo botão dourado, só com a sombra mais
   contida: sobre papel, o halo dourado do tema escuro suja. */
body.ct-redesign.theme-light .btn-ouro,
body.ct-redesign.theme-light .btn-buy,
body.ct-redesign.theme-light .deal-buy-btn,
body.ct-redesign.theme-light .btn-equip-store,
body.ct-redesign.theme-light .mythic-card-btn,
body.ct-redesign.theme-light .mythic-btn,
body.ct-redesign.theme-light .btn-save,
body.ct-redesign.theme-light .btn-banner-save,
body.ct-redesign.theme-light .btn-auth,
body.ct-redesign.theme-light .btn-confirm,
body.ct-redesign.theme-light .prem-plan-top,
body.ct-redesign.theme-light .btn-confirm-prem,
body.ct-redesign.theme-light .btn-checkout,
body.ct-redesign.theme-light .cart-notif-view,
body.ct-redesign.theme-light #cat-tabs .cat-btn.active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55),
        0 2px 6px rgba(120, 92, 20, .18) !important;
}

body.ct-redesign .btn-ouro:hover,
body.ct-redesign .btn-buy:hover,
body.ct-redesign .deal-buy-btn:hover:not(:disabled),
body.ct-redesign .mythic-card-btn:hover:not(:disabled),
body.ct-redesign .mythic-btn:hover {
    filter: brightness(1.06);
    box-shadow: var(--ct-shadow-gold);
    transform: translateY(-1px);
}

body.ct-redesign .btn-ouro {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: var(--ct-r-pill);
    font-size: 13px;
}

body.ct-redesign .btn-ouro-num {
    padding: 1px 7px;
    border-radius: var(--ct-r-pill);
    background: rgba(0, 0, 0, .22);
    font-size: 11px;
    font-weight: 800;
}

body.ct-redesign.theme-light .btn-ouro-num {
    background: rgba(255, 255, 255, .24);
}

/* Estado "já é seu": deixa de ser ação, então deixa de ser ouro. */
body.ct-redesign .btn-buy.owned,
body.ct-redesign .btn-buy:disabled,
body.ct-redesign .deal-buy-btn.owned,
body.ct-redesign .deal-buy-btn:disabled,
body.ct-redesign .mythic-card-btn.is-adquirido,
body.ct-redesign .btn-equip-store.equipped {
    background: var(--ct-surface-3) !important;
    border-color: var(--ct-border) !important;
    color: var(--ct-text-soft) !important;
    cursor: default;
    box-shadow: none !important;
    transform: none !important;
}

body.ct-redesign .btn-buy.owned i,
body.ct-redesign .deal-buy-btn.owned i,
body.ct-redesign .mythic-card-btn.is-adquirido i,
body.ct-redesign .btn-equip-store.equipped i {
    color: var(--ct-success) !important;
}

/* O botão de contorno da faixa mítica não é ouro cheio. */
body.ct-redesign .mythic-btn-vazado,
body.ct-redesign.theme-light .mythic-btn-vazado {
    background: rgba(255, 255, 255, .09) !important;
    border: 1px solid rgba(255, 255, 255, .28) !important;
    color: #e6edf3 !important;
}

body.ct-redesign .mythic-btn-vazado i,
body.ct-redesign.theme-light .mythic-btn-vazado i {
    color: #e6edf3 !important;
}

/* ── Faixa "Coleção Mítica" ──
   Escura nos dois temas, como o header: leva `.ct-bloco-escuro` no
   markup para o tema claro não tentar clarear o que está por cima
   dela. O ouro entra pelo selo e pelo botão, não pelo fundo — a
   faixa é um fundo, não uma ação. */
body.ct-redesign .mythic-promo {
    position: relative;
    overflow: hidden;
    margin: 20px 0;
    padding: 26px;
    border-radius: var(--ct-r-lg);
    border: 1px solid var(--ct-gold-line);
    background:
        radial-gradient(120% 140% at 82% 0%, rgba(212, 175, 55, .18), transparent 58%),
        linear-gradient(135deg, #12171f 0%, #0d1117 100%);
    box-shadow: var(--ct-shadow-lg);
}

body.ct-redesign .mythic-promo-txt {
    position: relative;
    z-index: 2;
    max-width: 460px;
}

body.ct-redesign .mythic-promo-tag {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    font-size: var(--fs-sm);
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ct-header-accent) !important;
}

body.ct-redesign .mythic-promo h2 {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 900;
    color: #f3f6f9 !important;
}

body.ct-redesign .mythic-promo p {
    margin: 0 0 16px;
    font-size: var(--fs-base);
    line-height: 1.55;
    color: rgba(243, 246, 249, .74) !important;
}

body.ct-redesign .mythic-promo-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

body.ct-redesign .mythic-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--ct-r-pill);
    font-size: var(--fs-sm);
    font-weight: 800;
}

/* A coroa é ornamento: não pode roubar contraste do texto. */
body.ct-redesign .mythic-promo-marca {
    position: absolute;
    top: -18px;
    right: -14px;
    z-index: 1;
    font-size: 120px;
    color: var(--ct-gold) !important;
    opacity: .09;
    transform: rotate(15deg);
    pointer-events: none;
}

/* ── Vitrine mítica ── */
body.ct-redesign .mythic-showcase {
    margin-bottom: 30px;
}

body.ct-redesign .mythic-showcase-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: var(--fs-base);
    font-weight: 800;
    color: var(--ct-text) !important;
}

body.ct-redesign .mythic-showcase-titulo i {
    color: var(--ct-gold) !important;
}

body.ct-redesign .mythic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

body.ct-redesign .mythic-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 30px 12px 12px;
    border-radius: var(--ct-r-lg);
    background: linear-gradient(180deg, var(--ct-surface-2), var(--ct-surface));
    border: 1px solid var(--ct-gold-line);
    box-shadow: var(--ct-shadow-sm);
    transition: transform var(--ct-t), box-shadow var(--ct-t);
}

body.ct-redesign .mythic-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ct-shadow-gold);
}

body.ct-redesign .mythic-selo {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    padding: 2px 8px;
    border-radius: var(--ct-r-pill);
    background: rgba(212, 175, 55, .16);
    border: 1px solid var(--ct-gold-line);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--ct-gold) !important;
}

body.ct-redesign .mythic-card-preview {
    margin-bottom: 4px;
}

body.ct-redesign .mythic-card-nome {
    font-size: var(--fs-sm);
    font-weight: 800;
    text-align: center;
    line-height: 1.25;
    color: var(--ct-text) !important;
    overflow-wrap: anywhere;
}

body.ct-redesign .mythic-card-preco {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fs-xs);
    font-weight: 800;
    color: var(--ct-gold) !important;
}

body.ct-redesign .mythic-card-btn {
    width: 100%;
    margin-top: 4px;
    padding: 6px;
    border-radius: var(--ct-r-sm);
    font-size: 10px;
}

body.ct-redesign .mythic-vazio {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 140px;
    padding: 16px;
    border: 1px dashed var(--ct-gold-line);
    border-radius: var(--ct-r-lg);
    background: rgba(212, 175, 55, .04);
    text-align: center;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--ct-text-dim) !important;
}

body.ct-redesign .mythic-vazio i {
    font-size: 24px;
    opacity: .55;
    color: var(--ct-gold) !important;
}

/* ── Raridade ──
   A cor era escrita no `style=` a partir de RARITY[x].color, uma
   paleta calibrada para fundo branco: #7c3aed (épico) dá 6,6:1
   sobre branco e 3,0:1 sobre o grafite. Uma cor só não serve aos
   dois fundos — daí um par por raridade, escolhido por classe. */
body.ct-redesign .r-comum { color: #9aa7b8 !important }
body.ct-redesign .r-incomum { color: #4ade80 !important }
body.ct-redesign .r-raro { color: #7dabff !important }
body.ct-redesign .r-epico { color: #c4a2ff !important }
body.ct-redesign .r-lendario { color: #eab308 !important }
body.ct-redesign .r-mitico { color: #f472b6 !important }

body.ct-redesign.theme-light .r-comum { color: #52606d !important }
body.ct-redesign.theme-light .r-incomum { color: #157f3c !important }
body.ct-redesign.theme-light .r-raro { color: #1d4ed8 !important }
body.ct-redesign.theme-light .r-epico { color: #6d28d9 !important }
body.ct-redesign.theme-light .r-lendario { color: #a16207 !important }
body.ct-redesign.theme-light .r-mitico { color: #be185d !important }

/* A pílula de raridade do cartão era branca a 90% — uma mancha
   clara em cima do cartão escuro. Segue o cartão. */
body.ct-redesign .card-rarity {
    background: var(--ct-surface-3) !important;
    border-color: currentColor !important;
}

/* ── Selos e filtros ── */
body.ct-redesign .badge-premium {
    background: rgba(212, 175, 55, .16) !important;
    border: 1px solid var(--ct-gold-line) !important;
    color: var(--ct-gold) !important;
}

body.ct-redesign .badge-premium i {
    color: var(--ct-gold) !important;
}

body.ct-redesign .card-badge.mitico,
body.ct-redesign .card-badge.lend,
body.ct-redesign .card-badge.anim,
body.ct-redesign .card-badge.deal {
    color: #1a1408 !important;
    font-weight: 800;
}

body.ct-redesign .card-badge.mitico { background: linear-gradient(135deg, #f0a8d0, #db2777) !important }
body.ct-redesign .card-badge.lend { background: var(--ct-gold-metal) !important }
body.ct-redesign .card-badge.anim { background: linear-gradient(135deg, #7dd3fc, #34d399) !important }
body.ct-redesign .card-badge.deal { background: linear-gradient(135deg, #fca5a5, #ef4444) !important }

body.ct-redesign .rarity-check-btn {
    color: var(--ct-text-soft) !important;
    border-color: var(--ct-border-strong) !important;
}

body.ct-redesign .rarity-check-btn.rarity-checked {
    background: rgba(212, 175, 55, .14) !important;
    border-color: var(--ct-gold-line) !important;
    color: var(--ct-gold) !important;
}

/* A etiqueta comprada na loja tem a cor DELA — é o produto. Aqui
   só se garante que a letra branca não se dissolva nos tons mais
   claros do gradiente, sem mexer no gradiente. */
body.ct-redesign .preview-tag-chip,
body.ct-redesign .ct-rk-tag {
    /* Contorno em vez de recolorir: o gradiente da etiqueta é o
       item que a pessoa comprou, e algumas rampas (a laranja do
       "Cifra Rei") só dão 2,2:1 com branco. A sombra dupla levanta
       a leitura sem mexer numa cor sequer do produto. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 0 3px rgba(0, 0, 0, .45);
}

/* ── O avatar do header ──
   Usava `--ct-surface-2`, que acompanha o tema: no claro virava
   marfim dentro do header, que é escuro nos dois temas — inicial
   cinza-clara sobre marfim, 1,6:1. O header tem tokens próprios
   justamente por isto. */
body.ct-redesign .ct-perfil-avatar,
body.ct-redesign.theme-light .ct-perfil-avatar {
    background: rgba(255, 255, 255, .07);
    border-color: var(--ct-gold-line);
    color: var(--ct-header-accent) !important;
}

/* ------------------------------------------------------------
   25e. A ENTRADA DO PERFIL PÚBLICO
   ------------------------------------------------------------
   Clicar em alguém no ranking abre o cartão daquela pessoa. Antes
   ele simplesmente estava lá no quadro seguinte, e a única
   animação (`ppFadeIn` presa ao id) não recomeçava na segunda
   abertura — o elemento nunca é recriado, e CSS não reinicia uma
   animação por causa de `display`.

   Agora o perfil.js troca a classe `.pp-entrando` a cada abertura,
   e a entrada acontece em duas camadas: o cartão chega primeiro, e
   as informações da pessoa entram atrás dele, em cascata — avatar
   e nome, depois cada número, depois o corpo. É a ordem em que se
   lê o cartão; a animação só torna essa ordem visível.

   Os números não aparecem prontos: sobem até o valor (contarAte no
   perfil.js). Quem pediu menos movimento no sistema recebe tudo
   parado e os números já no lugar — o bloco no fim desta seção.
   ------------------------------------------------------------ */

@keyframes ppCartaoEntra {
    from {
        opacity: 0;
        transform: translateY(22px) scale(.94);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes ppInfoEntra {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

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

@keyframes ppAnelAcende {
    0% {
        box-shadow: 0 0 0 0 rgba(212, 175, 55, .5),
                    0 0 25px rgba(212, 175, 55, .2);
    }
    100% {
        box-shadow: 0 0 0 14px rgba(212, 175, 55, 0),
                    0 0 25px rgba(212, 175, 55, .2);
    }
}

/* O fundo escurece junto, senão o cartão parece saltar de um véu
   que já estava lá. */
body.ct-redesign #modal-public-profile.open {
    animation: ppVeuEntra 200ms ease both;
}

body.ct-redesign #modal-public-profile-box.pp-entrando {
    animation: ppCartaoEntra 420ms var(--ct-ease-out) both;
}

/* A cascata. Os atrasos começam depois do cartão ter percorrido
   metade do caminho: antes disso não há onde a informação pousar. */
body.ct-redesign .pp-entrando .pp-avatar-row,
body.ct-redesign .pp-entrando .pp-stats-grid > *,
body.ct-redesign .pp-entrando > div:last-child > * {
    animation: ppInfoEntra 380ms var(--ct-ease-out) both;
}

body.ct-redesign .pp-entrando .pp-avatar-row { animation-delay: 130ms }

body.ct-redesign .pp-entrando .pp-stats-grid > :nth-child(1) { animation-delay: 200ms }
body.ct-redesign .pp-entrando .pp-stats-grid > :nth-child(2) { animation-delay: 250ms }
body.ct-redesign .pp-entrando .pp-stats-grid > :nth-child(3) { animation-delay: 300ms }
body.ct-redesign .pp-entrando .pp-stats-grid > :nth-child(4) { animation-delay: 350ms }

body.ct-redesign .pp-entrando > div:last-child > :nth-child(1) { animation-delay: 300ms }
body.ct-redesign .pp-entrando > div:last-child > :nth-child(2) { animation-delay: 340ms }
body.ct-redesign .pp-entrando > div:last-child > :nth-child(3) { animation-delay: 380ms }
body.ct-redesign .pp-entrando > div:last-child > :nth-child(n+4) { animation-delay: 420ms }

/* O avatar da pessoa dá um pulso dourado ao chegar — é o único
   elemento que identifica QUEM é, e merece o olhar primeiro. */
body.ct-redesign .pp-entrando #pp-avatar-ring {
    animation: ppAnelAcende 900ms var(--ct-ease-out) 160ms both;
}

/* Os números que sobem ficam com largura estável enquanto contam;
   sem isto a grade treme a cada casa decimal que entra. */
body.ct-redesign .pp-stat-val {
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    body.ct-redesign #modal-public-profile.open,
    body.ct-redesign #modal-public-profile-box.pp-entrando,
    body.ct-redesign .pp-entrando .pp-avatar-row,
    body.ct-redesign .pp-entrando .pp-stats-grid > *,
    body.ct-redesign .pp-entrando > div:last-child > *,
    body.ct-redesign .pp-entrando #pp-avatar-ring {
        animation: none !important;
    }
}

/* ------------------------------------------------------------
   25f. DUAS SOBREPOSIÇÕES
   ------------------------------------------------------------ */

/* ── A faixa de aviso do topo do perfil ──
   `.daily-claimed` é `display:flex` com `justify-content:
   space-between`, herdado da variante ATIVA — que tem dois filhos
   (o texto e o botão "Coletar") e quer os extremos.

   Na variante já-coletada há um <i> e um nó de TEXTO solto. O nó
   de texto vira um item anônimo do flex, e os dois vão para os
   cantos: o ícone encostado à esquerda e a frase à direita, com um
   vazio de 900px no meio. Era isso a "linha desformatada". */
body.ct-redesign .daily-claimed {
    justify-content: flex-start;
    gap: 10px;
}

/* ── O aviso flutuante e o botão do Buy Me a Coffee ──
   Os dois moram no canto inferior direito com a mesma margem, e o
   widget é um <iframe> de terceiro com z-index próprio: o toast
   ("+300 CifraCoins coletados") aparecia POR BAIXO da xícara e
   ficava cortado ao meio.

   Não dá para mover o widget — o script dele decide a posição. Dá
   para subir o que é nosso, para acima da faixa que ele ocupa
   (~60px de botão + 18px de margem). */
body.ct-redesign .toast,
body.ct-redesign #cart-notification {
    bottom: 96px;
}

@media (max-width: 768px) {
    body.ct-redesign .toast,
    body.ct-redesign #cart-notification {
        bottom: 88px;
    }
}

/* ── Ajuste fino dos selos, medido no navegador ──
   Os quatro que ainda reprovavam depois da §25d. Nenhum muda de
   cor semântica: vermelho continua vermelho, verde continua verde
   — só saem do tom pastel que não sustenta letra por cima. */
body.ct-redesign .deal-badge,
body.ct-redesign .card-badge.deal {
    background: #b91c1c !important;
    color: #ffffff !important;
}

body.ct-redesign .card-equipped-badge {
    background: rgba(13, 100, 70, .95) !important;
    color: #ffffff !important;
}

body.ct-redesign .card-equipped-badge i {
    color: #6ee7b7 !important;
}

/* O dourado do selo "Lendário" ia até #a8862a na ponta escura, e
   ali a tinta escura caía para 4,4:1. A rampa fecha antes. */
body.ct-redesign .card-badge.lend {
    background: linear-gradient(135deg, #f0d98a, #d4af37) !important;
}

body.ct-redesign.theme-light .r-incomum {
    color: #0f6b31 !important;
}

/* ── O botão do bónus diário ──
   Verde-para-ciano claro (#10b981 → #06b6d4) com letra branca dá
   2,5:1 — e é a ação mais clicada da aba Editar. A rampa fecha um
   par de tons; continua verde-água, e o branco passa a 5,3:1. */
body.ct-redesign .btn-claim {
    background: linear-gradient(135deg, #0f766e, #0e7490) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(13, 100, 90, .35) !important;
}

body.ct-redesign .btn-claim i {
    color: #ffffff !important;
}

/* As etiquetas compradas na loja mantêm a letra BRANCA nos dois
   temas — o gradiente é o produto, e é sobre ele que a letra foi
   desenhada. Sem `.ct-cor-propria` no markup, o tema claro pintava
   a mesma etiqueta de cinza e ela mudava de aparência conforme o
   tema, o que não faz sentido para um item cosmético. */
body.ct-redesign .profile-tag,
body.ct-redesign .tag-preview-chip,
body.ct-redesign .preview-tag-chip,
body.ct-redesign.theme-light .profile-tag,
body.ct-redesign.theme-light .tag-preview-chip,
body.ct-redesign.theme-light .preview-tag-chip {
    color: #ffffff !important;
    /* Contorno em vez de recolorir: o gradiente da etiqueta é o
       item que a pessoa comprou, e algumas rampas (a laranja do
       "Cifra Rei") só dão 2,2:1 com branco. A sombra dupla levanta
       a leitura sem mexer numa cor sequer do produto. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 0 3px rgba(0, 0, 0, .45);
}

/* O "Ver Premium" é o mesmo botão do bónus diário com o gradiente
   dourado por cima. Segue a convenção dos cheios: ouro claro com
   tinta escura no escuro, ouro fechado com branco no claro. */
body.ct-redesign .btn-claim-ouro {
    background: linear-gradient(135deg, var(--ct-gold-soft), var(--ct-gold)) !important;
    color: #1a1408 !important;
    box-shadow: var(--ct-shadow-gold) !important;
}

body.ct-redesign.theme-light .btn-claim-ouro {
    background: linear-gradient(135deg, #8a6a15, #6f5512) !important;
    color: #ffffff !important;
}

/* ── A notificação de "adicionado ao carrinho" ──
   Três colunas em 340px: prévia de 52px, o texto e um botão de
   ~130px. Sobravam ~118px para o texto, então o rótulo quebrava em
   duas linhas por cima do botão e o nome do item era cortado a
   meio ("Cristal Infi…").

   O botão desce para uma linha própria. O nome ganha a largura
   inteira e o bloco continua com a mesma altura visual. */
body.ct-redesign #cart-notification .cart-notif-inner {
    flex-wrap: wrap;
    row-gap: 10px;
}

body.ct-redesign #cart-notification .cart-notif-info {
    flex: 1 1 140px;
}

body.ct-redesign #cart-notification .cart-notif-label {
    white-space: nowrap;
}

body.ct-redesign #cart-notification .cart-notif-actions {
    flex: 1 0 100%;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

body.ct-redesign #cart-notification .cart-notif-view {
    flex: 1;
    justify-content: center;
}

/* O X sai do fluxo do botão e volta para o canto do cartão, que é
   onde se procura por ele. */
body.ct-redesign #cart-notification .cart-notif-close {
    position: absolute;
    top: 8px;
    right: 8px;
}

/* ═══════════════════════════════════════════════════════════════════
   §26. BUSCA EXPANDIDA NO TELEMÓVEL
   ───────────────────────────────────────────────────────────────────
   A regra geral limita o campo a `max-width: 46vw`. Num ecrã de 412 px
   isso são 190 px — e ao lado ainda ficava o botão redondo da lupa, que
   já não serve para nada depois da busca estar aberta. Sobrava meia
   dúzia de caracteres visíveis para escrever "Chuva do Capital Inicial".

   No telemóvel, quando expandida, a busca toma o header inteiro e o
   botão que a abriu sai do caminho. Fica no fim do ficheiro de
   propósito: theme-premium.css é a última folha da página e estas
   regras precisam de ganhar às genéricas da §22.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* O wrap passa a ocupar a largura toda disponível no header. */
    body.ct-redesign .ct-search-wrap.expanded {
        position: absolute;
        left: var(--sp-3, 12px);
        right: var(--sp-3, 12px);
        z-index: 30;
    }

    body.ct-redesign .ct-search-wrap.expanded .ct-search-field {
        flex: 1 1 auto;
        min-width: 0;
    }

    body.ct-redesign .ct-search-wrap.expanded .ct-search-input {
        width: 100%;
        max-width: none;
        font-size: 16px;
        /* 16px não é capricho: abaixo disso o iOS faz zoom ao focar o
           campo e o utilizador fica com a página torta. */
    }

    /* O botão que abriu a busca deixa de fazer sentido enquanto ela
       está aberta — sai, e devolve a largura ao campo. */
    body.ct-redesign .ct-search-wrap.expanded #ct-search-toggle {
        width: 0;
        padding: 0;
        margin: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
    }

    /* Os resultados acompanham a nova largura do campo. */
    body.ct-redesign .ct-search-wrap.expanded .ct-search-results {
        left: 0;
        right: 0;
        min-width: 0;
        width: auto;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   §27. DIAGRAMAS DE ACORDE (motor SVG — ct-acordes.js)
   ───────────────────────────────────────────────────────────────────
   Substituem as imagens que vinham do servidor do CifraClub e que
   davam 404. Como são SVG inline, herdam as cores destas variáveis e
   acompanham o tema claro/escuro sem código nenhum.
   ═══════════════════════════════════════════════════════════════════ */
:root {
    --ct-diag-line: rgba(255, 255, 255, .34);
    --ct-diag-text: rgba(255, 255, 255, .72);
    --ct-diag-mute: rgba(255, 255, 255, .34);
    --ct-diag-white: #f4f1e8;
    --ct-diag-black: #1c2230;
}

body.theme-light {
    --ct-diag-line: rgba(28, 34, 48, .38);
    --ct-diag-text: rgba(28, 34, 48, .70);
    --ct-diag-mute: rgba(28, 34, 48, .38);
    --ct-diag-white: #ffffff;
    --ct-diag-black: #2d3b52;
}

.chord-diagram-item {
    position: relative;
    background: var(--ct-elev-1, rgba(255, 255, 255, .04));
    border: 1px solid var(--ct-line, rgba(255, 255, 255, .09));
    border-radius: 14px;
    padding: 10px 8px 8px;
    text-align: center;
}

.chord-diagram-item .chord-name {
    display: block;
    font-weight: 800;
    font-size: 14px;
    color: var(--ct-gold, #d4af37);
    margin-bottom: 4px;
}

.chord-diagram-item .diagram-wrapper {
    cursor: pointer;
    border-radius: 8px;
    transition: transform .18s ease;
}

.chord-diagram-item .diagram-wrapper:hover {
    transform: translateY(-2px);
}

/* O piano fica mais discreto: na faixa quem manda é o violão. */
.chord-piano-mini {
    margin-top: 6px;
    opacity: .8;
}

.chord-sem-posicao {
    display: block;
    padding: 18px 4px;
    font-size: 11px;
    opacity: .55;
}

.chord-ouvir {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--ct-line, rgba(255, 255, 255, .12));
    background: var(--ct-elev-2, rgba(255, 255, 255, .07));
    color: var(--ct-gold, #d4af37);
    font-size: 9px;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.chord-ouvir:hover {
    background: var(--ct-gold, #d4af37);
    color: #0e1621;
}

/* ── Painel com todas as posições ── */
.ct-acorde-detalhe .ct-pos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 12px;
}

.ct-pos-card {
    background: var(--ct-elev-1, rgba(255, 255, 255, .04));
    border: 1px solid var(--ct-line, rgba(255, 255, 255, .09));
    border-radius: 12px;
    padding: 10px 6px 6px;
    text-align: center;
}

.ct-pos-num {
    font-size: 10px;
    letter-spacing: .04em;
    opacity: .65;
    margin-bottom: 4px;
}

.ct-pos-piano {
    margin-top: 18px;
    max-width: 300px;
}

.ct-pos-rotulo {
    display: block;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .55;
    margin-bottom: 6px;
}

.ct-pos-ouvir {
    margin-top: 16px;
    padding: 9px 20px;
    border-radius: 999px;
    border: 1px solid var(--ct-gold-line, rgba(212, 175, 55, .34));
    background: transparent;
    color: var(--ct-gold, #d4af37);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}

.ct-pos-ouvir:hover {
    background: var(--ct-gold, #d4af37);
    color: #0e1621;
}

/* Cabeçalho do detalhe de acorde: atravessa a grelha inteira em vez de
   ocupar uma célula (senão empurra o primeiro diagrama para o lado). */
.acordes-detalhe-topo {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 4px;
}

.acordes-detalhe-topo strong {
    font-size: 18px;
    color: var(--ct-gold, #d4af37);
}

.acordes-voltar {
    background: transparent;
    border: 1px solid var(--ct-line, rgba(255, 255, 255, .14));
    color: inherit;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.acordes-voltar:hover {
    border-color: var(--ct-gold-line, rgba(212, 175, 55, .4));
    color: var(--ct-gold, #d4af37);
}

.acorde-card-piano {
    grid-column: 1 / -1;
}

/* ─── 26. CARTÃO DE DESTAQUE DE PARTITURA NO TEMA CLARO ────── */
/* O `.ps-feat` do index nasceu só para o tema escuro: fundo quase
   preto, véu opaco e a capa desfocada a 18% de brilho. O texto por
   cima, esse, seguia o tema — e no claro virava #16181d. Resultado:
   texto escuro sobre fundo escuro, com a faixa inteira ilegível.

   Aqui o véu passa a claro para acompanhar o texto. A capa desfocada
   sobe de brilho e desce de opacidade em vez de desaparecer: é ela
   que dá a cor da partitura ao cartão, e sem ela restava um
   rectângulo branco igual a todos os outros.

   As variáveis estão definidas em site.css, em `.ps-feat`. */
body.theme-light .ps-feat {
    --feat-veu-a: rgba(255, 253, 248, .93);
    --feat-veu-b: rgba(255, 253, 248, .62);
    --feat-fundo: linear-gradient(135deg, #ffffff 0%, var(--ct-surface-2) 100%);
    --feat-brilho: 1.06;
    --feat-linha: var(--ct-border-strong);
    --feat-sombra: var(--ct-shadow-lg);
}

/* Os dois textos que o cartão escreve a branco por cima do véu. Sem
   isto herdavam o branco do tema escuro e sumiam no véu claro. */
body.theme-light .ps-feat-titulo,
body.theme-light .ps-feat-anime,
body.theme-light .ps-feat-preco-lbl {
    color: var(--ct-text);
}

body.theme-light .ps-feat-desc,
body.theme-light .ps-feat-stats {
    color: var(--ct-text-soft);
}

/* ═══════════════════════════════════════════════════════════════════
   §28. PARTITURAS — ACABAMENTO DOURADO
   ───────────────────────────────────────────────────────────────────
   As duas páginas da loja (partituras.html e detalhe-partitura.html)
   nasceram desenhadas só para o escuro. No tema claro sobrava o que
   a inversão automática consegue fazer: fundo branco, texto cinza e
   botões de um dourado terroso — legível, mas sem acabamento.

   Esta seção dá a essas páginas um tratamento próprio. A ideia é a
   de uma capa dourada: o OURO não é o fundo, é o FIO — hairlines,
   aros, véus e realces sobre superfície de papel. Assim o contraste
   do texto continua a vir do papel (5:1 e acima) e o dourado faz o
   trabalho de que é capaz sem disputar legibilidade com ninguém.

   O gancho é a classe `ps-pagina` no <body> das duas páginas. Ela
   não é enfeite: as regras genéricas do tema claro (§16) chegam a
   (0,3,1) e um seletor de página dá a folga necessária para as
   vencer sem entrar na guerra de `!important` — e ao mesmo tempo
   impede que este acabamento vaze para as outras 45 páginas.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 28a. Paleta do acabamento ──
   Separada dos tokens de marca (--ct-gold*) de propósito: aqui não
   se descreve "a cor dourada", descreve-se o PAPEL que ela faz —
   fio, véu, aro, tinta, preenchimento de botão. Cada um tem um par
   claro/escuro pensado para o fundo em que vai cair. */
body.ct-redesign {
    --ps-tinta: var(--ct-gold);
    --ps-fio: rgba(212, 175, 55, .28);
    --ps-fio-forte: rgba(212, 175, 55, .55);
    --ps-veu: rgba(212, 175, 55, .10);
    --ps-aro: rgba(240, 217, 138, .45);
    --ps-superficie: var(--ct-surface);
    --ps-superficie-2: var(--ct-surface-2);
    --ps-sombra: 0 4px 14px rgba(0, 0, 0, .28);
    --ps-sombra-alta: 0 18px 42px rgba(0, 0, 0, .42);
    /* Botão: ouro claro com tinta escura por cima (8:1). */
    --ps-botao: linear-gradient(135deg, #f0d98a 0%, #d4af37 38%, #a8862a 66%, #e5c76b 100%);
    --ps-botao-tinta: #1a1408;
}

body.ct-redesign.theme-light {
    /* Segue o --ct-gold do tema: escurecido para valer sobre marfim. */
    --ps-tinta: #7a5e12;
    --ps-fio: rgba(138, 106, 21, .20);
    --ps-fio-forte: rgba(138, 106, 21, .46);
    --ps-veu: rgba(138, 106, 21, .07);
    --ps-aro: rgba(255, 244, 214, .30);
    --ps-superficie: linear-gradient(180deg, #ffffff 0%, #fdfaf3 100%);
    --ps-superficie-2: #faf7ef;
    --ps-sombra: 0 1px 2px rgba(40, 32, 16, .05), 0 8px 22px rgba(40, 32, 16, .07);
    --ps-sombra-alta: 0 16px 38px rgba(40, 32, 16, .13);
    /* Inverte-se o par: o preenchimento escurece e a tinta vira
       branca. Toda a rampa (#8f6f17 → #6b5211) fica acima de 4,75:1
       com branco por cima — o topo do degradê é o ponto crítico e é
       ele que manda no valor. Clarear mais o ouro reprovaria o
       rótulo, e é por isso que o brilho aqui vem do ARO, não do
       preenchimento. */
    --ps-botao: linear-gradient(135deg, #8f6f17 0%, #7a5d12 55%, #6b5211 100%);
    --ps-botao-tinta: #fffaf0;
}

/* ── 28b. Detalhes dourados do header ──
   O header já tinha o fio dourado embaixo e o sublinhado do menu,
   mas o corpo dele era um retângulo chapado. Três acréscimos, todos
   de baixo custo: um clarão dourado que desce do topo, um aro no
   brasão e uma moldura de 1px nos botões redondos. Vale em todas as
   páginas — o header é um só (ct-shell.js) e um header dourado só
   nas partituras leria como página de outro site. */
body.ct-redesign .ct-header,
body.ct-redesign.theme-light .ct-header {
    background-image:
        linear-gradient(180deg, rgba(212, 175, 55, .075) 0%, rgba(212, 175, 55, 0) 62%),
        radial-gradient(70% 150% at 50% 0%, rgba(212, 175, 55, .07), transparent 72%) !important;
    box-shadow: inset 0 1px 0 rgba(240, 217, 138, .15), var(--ct-shadow-sm) !important;
}

/* O fio de baixo ganha corpo e um halo curto. É a assinatura da
   marca: quando o header cola no topo, é a única coisa que separa
   a barra do conteúdo. */
body.ct-redesign .ct-header::after,
body.ct-redesign .top-header::after {
    opacity: 1;
    background: linear-gradient(90deg,
            transparent,
            rgba(212, 175, 55, .26) 10%,
            var(--ct-header-accent) 32%,
            #f6e5a8 50%,
            var(--ct-header-accent) 68%,
            rgba(212, 175, 55, .26) 90%,
            transparent);
    filter: drop-shadow(0 0 5px rgba(212, 175, 55, .45));
}

body.ct-redesign .ct-logo img {
    box-shadow: 0 0 0 1px rgba(212, 175, 55, .40), 0 2px 10px rgba(0, 0, 0, .45);
}

body.ct-redesign .ct-logo:hover img {
    box-shadow: 0 0 0 1px rgba(240, 217, 138, .75), 0 6px 18px rgba(212, 175, 55, .32);
}

body.ct-redesign .ct-header .ct-icon-btn {
    border: 1px solid rgba(212, 175, 55, .18);
}

/* A página em que se está deixa de ser "o link com fundo cinza" e
   passa a ser uma pastilha dourada com aro. */
body.ct-redesign .ct-nav-link.is-active,
body.ct-redesign.theme-light .ct-nav-link.is-active {
    background: linear-gradient(180deg, rgba(212, 175, 55, .20), rgba(212, 175, 55, .07)) !important;
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, .34), 0 2px 12px rgba(212, 175, 55, .12);
}

/* ── 28c. A caixa de busca é escura nos DOIS temas ──
   Ela pende do header, e o header não muda de cor com o tema. Duas
   coisas a quebravam no tema claro:

   1. o campo de texto — a regra genérica `input {}` do §16 pintava
      de branco, com tinta escura, um campo que vive dentro de uma
      barra escura;
   2. os resultados — `.ps-sr-item` e `.ct-sug-item` terminam em
      "-item" e apanhavam fundo branco da regra de superfícies,
      enquanto a tinta deles ficava clara (o header está excluído da
      regra universal de texto). Título branco sobre cartão branco:
      via-se o preço e mais nada.

   O bloco de exclusão do §16 já devolveu o fundo; aqui a caixa
   ganha o desenho que devia ter tido desde o início, igual nos dois
   temas e com o dourado do header. */
body.ct-redesign.theme-light .ct-header .ct-search-input {
    background: rgba(255, 255, 255, .08) !important;
    border-color: var(--ct-gold-line) !important;
    color: #e6edf3 !important;
}

body.ct-redesign.theme-light .ct-header .ct-search-input::placeholder {
    color: rgba(255, 255, 255, .42) !important;
}

body.ct-redesign .ct-search-results,
body.ct-redesign.theme-light .ct-search-results {
    background:
        linear-gradient(180deg, rgba(212, 175, 55, .08), rgba(212, 175, 55, 0) 140px),
        var(--ct-header-bg) !important;
    border: 1px solid rgba(212, 175, 55, .22) !important;
    border-radius: var(--ct-r-lg) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55) !important;
    overflow: hidden;
    overflow-y: auto;
}

body.ct-redesign .ct-search-results :is(.ps-sr-header, .ct-sug-header),
body.ct-redesign.theme-light .ct-search-results :is(.ps-sr-header, .ct-sug-header) {
    background: rgba(212, 175, 55, .07) !important;
    border-bottom: 1px solid rgba(212, 175, 55, .16) !important;
    color: rgba(240, 217, 138, .78) !important;
}

body.ct-redesign .ct-search-results :is(.ps-sr-item, .ct-sug-item),
body.ct-redesign.theme-light .ct-search-results :is(.ps-sr-item, .ct-sug-item) {
    background: transparent !important;
    border-color: rgba(255, 255, 255, .06) !important;
    box-shadow: none !important;
    color: #e9edf2 !important;
}

body.ct-redesign .ct-search-results :is(.ps-sr-item, .ct-sug-item):hover,
body.ct-redesign.theme-light .ct-search-results :is(.ps-sr-item, .ct-sug-item):hover {
    background: rgba(212, 175, 55, .13) !important;
}

body.ct-redesign .ct-search-results :is(.ps-sr-title, .ct-sug-title),
body.ct-redesign.theme-light .ct-search-results :is(.ps-sr-title, .ct-sug-title) {
    color: #f4f7fa !important;
}

body.ct-redesign .ct-search-results :is(.ps-sr-meta, .ps-sr-meta span, .ct-sug-sub, .ps-sr-empty, .ps-sr-footer, .ct-sug-empty, .ct-sug-footer),
body.ct-redesign.theme-light .ct-search-results :is(.ps-sr-meta, .ps-sr-meta span, .ct-sug-sub, .ps-sr-empty, .ps-sr-footer, .ct-sug-empty, .ct-sug-footer) {
    background: transparent !important;
    color: rgba(233, 237, 242, .55) !important;
}

body.ct-redesign .ct-search-results :is(.ps-sr-price, .ps-sr-footer strong),
body.ct-redesign.theme-light .ct-search-results :is(.ps-sr-price, .ps-sr-footer strong) {
    color: #f0d98a !important;
}

body.ct-redesign .ct-search-results .ct-sug-icon,
body.ct-redesign.theme-light .ct-search-results .ct-sug-icon {
    background: rgba(212, 175, 55, .14) !important;
    border-color: rgba(212, 175, 55, .25) !important;
    color: #f0d98a !important;
}

body.ct-redesign .ct-search-results :is(.ps-sr-thumb, .ps-sr-thumb-placeholder),
body.ct-redesign.theme-light .ct-search-results :is(.ps-sr-thumb, .ps-sr-thumb-placeholder) {
    border-color: rgba(255, 255, 255, .12) !important;
}

/* Os selos de dificuldade ficam sobre a caixa escura: as cores
   semânticas são as CLARAS nos dois temas, como nos cartões.

   O `.ps-sr-item` no meio do seletor não é decoração: a regra de
   texto secundário logo acima casa `.ps-sr-meta span`, e o selo É um
   span dentro da meta. Sem este degrau ela ganhava, e todos os selos
   — fácil, médio, difícil — saíam do mesmo cinza. */
body.ct-redesign .ct-search-results .ps-sr-item .ps-sr-diff-badge,
body.ct-redesign.theme-light .ct-search-results .ps-sr-item .ps-sr-diff-badge {
    background: rgba(255, 255, 255, .08) !important;
    border: 0 !important;
    color: rgba(233, 237, 242, .8) !important;
}

body.ct-redesign .ct-search-results .ps-sr-item .ps-sr-diff-facil,
body.ct-redesign.theme-light .ct-search-results .ps-sr-item .ps-sr-diff-facil {
    background: rgba(34, 197, 94, .16) !important;
    color: #86efac !important;
}

body.ct-redesign .ct-search-results .ps-sr-item .ps-sr-diff-medio,
body.ct-redesign.theme-light .ct-search-results .ps-sr-item .ps-sr-diff-medio {
    background: rgba(234, 179, 8, .16) !important;
    color: #fde047 !important;
}

body.ct-redesign .ct-search-results .ps-sr-item .ps-sr-diff-dificil,
body.ct-redesign.theme-light .ct-search-results .ps-sr-item .ps-sr-diff-dificil {
    background: rgba(239, 68, 68, .16) !important;
    color: #fca5a5 !important;
}

body.ct-redesign .ct-search-results .ps-sr-item .ps-sr-diff-muito-dificil,
body.ct-redesign.theme-light .ct-search-results .ps-sr-item .ps-sr-diff-muito-dificil {
    background: rgba(165, 19, 58, .92) !important;
    color: #ffffff !important;
}

/* ── 28d. Papel e fio nas duas páginas da loja ──
   O tema claro genérico entregava um branco chapado. Aqui o fundo
   ganha temperatura (o dourado precisa de um papel quente para não
   parecer mostarda) e cada bloco passa a ter um fio dourado no topo
   — a mesma marca que o header usa embaixo. */
body.ct-redesign.theme-light.ps-pagina {
    background-image:
        radial-gradient(1200px 520px at 50% -8%, rgba(138, 106, 21, .10), transparent 68%),
        radial-gradient(760px 420px at 92% 14%, rgba(138, 106, 21, .05), transparent 72%) !important;
}

body.ct-redesign.theme-light.ps-pagina :is(.description-box, .midi-box, .comment-input-wrap, .comment-item, .ps-empty-comments, .sheet-preview-note, .secure-msg, .ps-card) {
    background: var(--ps-superficie) !important;
    border: 1px solid var(--ps-fio) !important;
    box-shadow: var(--ps-sombra) !important;
}

body.ct-redesign.theme-light.ps-pagina .purchase-card {
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(138, 106, 21, .10), transparent 62%),
        linear-gradient(180deg, #ffffff 0%, #fdfaf3 100%) !important;
    border: 1px solid var(--ps-fio) !important;
    box-shadow: var(--ps-sombra-alta) !important;
}

/* O fio dourado no topo do bloco. Vai no ::after porque o ::before
   do `.purchase-card` já é o halo do canto — herdar metade das
   medidas dele daria um retângulo dourado de 120px no meio do
   cartão. */
body.ct-redesign.ps-pagina :is(.description-box, .midi-box, .purchase-card, .comment-input-wrap) {
    position: relative;
}

body.ct-redesign.ps-pagina :is(.description-box, .midi-box, .purchase-card, .comment-input-wrap)::after {
    content: '';
    position: absolute;
    /* Recuado 18px de cada lado: estes blocos têm cantos de 14 a 20px
       de raio, e um fio de ponta a ponta sairia pela curva fora. */
    left: 18px;
    right: 18px;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--ps-fio-forte) 24%,
            var(--ps-tinta) 50%, var(--ps-fio-forte) 76%, transparent);
    opacity: .8;
    pointer-events: none;
}

/* Os ícones dos títulos de seção viram pastilhas: é o detalhe que
   transforma "h3 com um ícone antes" em cabeçalho desenhado. */
body.ct-redesign.ps-pagina :is(.description-box, .midi-box, .sheet-preview-header, .comments-section) > h3 > i:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--ps-veu);
    border: 1px solid var(--ps-fio);
    color: var(--ps-tinta) !important;
    font-size: 13px;
}

/* Selo de dificuldade da barra lateral: no tema claro a regra
   genérica de pílulas apagava a semântica e deixava tudo cinza. */
body.ct-redesign.theme-light.ps-pagina .diff-badge {
    background: var(--ct-surface-3) !important;
    color: var(--ct-text-soft) !important;
}


/* O rodapé "Pagamento seguro" era uma caixa preta translúcida
   colada sob o botão — no papel virava uma mancha cinza. */
body.ct-redesign.theme-light.ps-pagina .secure-msg {
    background: var(--ps-superficie-2) !important;
    border: 1px solid var(--ps-fio) !important;
    box-shadow: none !important;
}

body.ct-redesign.ps-pagina .secure-msg i {
    color: var(--ps-tinta) !important;
}

/* ── 28e. Os botões de compra ──
   Um par único: preenchimento + tinta vêm dos tokens, então o botão
   é o mesmo objeto nos dois temas — só troca de lado. O que dá o
   ar de metal é o ARO (1px de ouro vivo) mais o realce interno no
   topo; o preenchimento em si continua conservador porque é ele que
   sustenta o contraste do rótulo. */
body.ct-redesign.ps-pagina :is(.purchase-btn, .btn-post-comment, .ps-card-btn),
body.ct-redesign.theme-light.ps-pagina :is(.purchase-btn, .btn-post-comment, .ps-card-btn) {
    background: var(--ps-botao) !important;
    background-image: var(--ps-botao) !important;
    border: 0 !important;
    color: var(--ps-botao-tinta) !important;
    box-shadow:
        inset 0 1px 0 var(--ps-aro),
        0 0 0 1px var(--ps-fio-forte),
        var(--ps-sombra) !important;
}

body.ct-redesign.ps-pagina :is(.purchase-btn, .btn-post-comment, .ps-card-btn) i,
body.ct-redesign.theme-light.ps-pagina :is(.purchase-btn, .btn-post-comment, .ps-card-btn) i {
    color: var(--ps-botao-tinta) !important;
}

body.ct-redesign.ps-pagina :is(.purchase-btn, .btn-post-comment, .ps-card-btn):hover:not(:disabled),
body.ct-redesign.theme-light.ps-pagina :is(.purchase-btn, .btn-post-comment, .ps-card-btn):hover:not(:disabled) {
    box-shadow:
        inset 0 1px 0 var(--ps-aro),
        0 0 0 1px var(--ps-fio-forte),
        0 0 0 4px var(--ps-veu),
        var(--ps-sombra-alta) !important;
}

/* Fora das páginas da loja o mesmo acabamento vale para os CTA de
   partitura do index — mesma ação, mesmo objeto. */
body.ct-redesign.theme-light :is(.ps-index-cta, .ps-buy-btn, .ps-card-btn) {
    background-image: var(--ps-botao) !important;
    box-shadow:
        inset 0 1px 0 var(--ps-aro),
        0 0 0 1px var(--ps-fio-forte),
        0 8px 20px rgba(138, 106, 21, .24) !important;
}

/* O botão fantasma "Descarregar PDF" acompanha, em versão vazada. */
body.ct-redesign.ps-pagina .btn-pdf {
    background: var(--ps-veu) !important;
    border: 1px solid var(--ps-fio) !important;
    color: var(--ps-tinta) !important;
}

body.ct-redesign.ps-pagina .btn-pdf:hover {
    border-color: var(--ps-fio-forte) !important;
    box-shadow: 0 0 0 3px var(--ps-veu) !important;
}

/* ── 28f. A pré-escuta ──
   O cartão de ouvir antes de comprar é o único ponto da página em
   que o visitante recebe alguma coisa de graça, e estava desenhado
   como um controlo de sistema: círculo chapado, barra cinza, ponto
   solto. Vira um objeto só — disco dourado com aro e halo, e uma
   barra que se PREENCHE de ouro à medida que toca (a percentagem
   chega do JS em `--midi-pct`).

   O halo não é sombra: é um anel de `box-shadow` sem desfoque, que
   engorda no hover e pulsa enquanto a música corre. Custa zero em
   layout — nada reflui, só se repinta. */
body.ct-redesign.ps-pagina .midi-box {
    overflow: hidden;
    background:
        radial-gradient(130% 170% at 0% 0%, var(--ps-veu), transparent 62%),
        var(--ps-superficie);
    border: 1px solid var(--ps-fio);
    box-shadow: var(--ps-sombra);
}

body.ct-redesign.ps-pagina .midi-linha {
    gap: 20px;
}

body.ct-redesign.ps-pagina .midi-play {
    width: 64px;
    height: 64px;
    border: 0;
    border-radius: 50%;
    background: var(--ps-botao);
    color: var(--ps-botao-tinta);
    font-size: 20px;
    box-shadow:
        inset 0 1px 0 var(--ps-aro),
        0 0 0 1px var(--ps-fio-forte),
        0 0 0 7px var(--ps-veu),
        var(--ps-sombra);
    transition: transform 220ms var(--ct-ease-out), box-shadow 220ms ease;
}

body.ct-redesign.ps-pagina .midi-play:hover:not(:disabled) {
    transform: scale(1.06);
    box-shadow:
        inset 0 1px 0 var(--ps-aro),
        0 0 0 1px var(--ps-fio-forte),
        0 0 0 12px var(--ps-veu),
        var(--ps-sombra-alta);
}

body.ct-redesign.ps-pagina .midi-play:active:not(:disabled) {
    transform: scale(.97);
}

body.ct-redesign.ps-pagina .midi-play:disabled {
    opacity: .5;
    box-shadow: 0 0 0 1px var(--ps-fio);
}

/* A pausa é o único sinal de que está a tocar (o ícone troca), e
   sozinha é discreta demais num cartão deste tamanho. */
@keyframes psHaloPulso {
    0%, 100% {
        box-shadow:
            inset 0 1px 0 var(--ps-aro),
            0 0 0 1px var(--ps-fio-forte),
            0 0 0 7px var(--ps-veu),
            var(--ps-sombra);
    }
    50% {
        box-shadow:
            inset 0 1px 0 var(--ps-aro),
            0 0 0 1px var(--ps-fio-forte),
            0 0 0 15px transparent,
            var(--ps-sombra);
    }
}

body.ct-redesign.ps-pagina .midi-play:has(.fa-pause) {
    animation: psHaloPulso 2.4s ease-in-out infinite;
}

body.ct-redesign.ps-pagina .midi-titulo {
    font-size: 15px;
    margin-bottom: 12px;
}

/* A barra: trilho fino com aro, preenchido a ouro até --midi-pct.
   Sem o valor (JS ainda não correu) fica 0% — trilho limpo, nunca
   uma barra cheia a mentir. */
body.ct-redesign.ps-pagina .midi-barra {
    height: 8px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, var(--ps-tinta) 0 var(--midi-pct, 0%), transparent var(--midi-pct, 0%)),
        var(--ps-trilho);
    box-shadow: inset 0 0 0 1px var(--ps-fio);
    margin-bottom: 10px;
}

body.ct-redesign.ps-pagina .midi-barra::-webkit-slider-thumb {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--ps-botao);
    border: 2px solid var(--ps-thumb-borda);
    box-shadow: 0 0 0 1px var(--ps-fio-forte), 0 2px 6px rgba(0, 0, 0, .32);
}

body.ct-redesign.ps-pagina .midi-barra::-moz-range-thumb {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--ps-botao);
    border: 2px solid var(--ps-thumb-borda);
    box-shadow: 0 0 0 1px var(--ps-fio-forte), 0 2px 6px rgba(0, 0, 0, .32);
}

body.ct-redesign.ps-pagina .midi-barra:disabled {
    opacity: .5;
}

body.ct-redesign.ps-pagina .midi-selo {
    background: var(--ps-veu);
    border: 1px solid var(--ps-fio);
    color: var(--ps-tinta) !important;
}

body.ct-redesign.ps-pagina .midi-aviso {
    border-top: 1px solid var(--ps-fio);
}

body.ct-redesign.ps-pagina .midi-aviso i {
    color: var(--ps-tinta) !important;
}

/* Tokens que só a pré-escuta usa. */
body.ct-redesign {
    --ps-trilho: rgba(255, 255, 255, .10);
    --ps-thumb-borda: #161b22;
}

body.ct-redesign.theme-light {
    --ps-trilho: rgba(40, 32, 16, .10);
    --ps-thumb-borda: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
    body.ct-redesign.ps-pagina .midi-play:has(.fa-pause) {
        animation: none;
    }
}

/* ── 28g. Da faixa do TikTok para a biblioteca ──
   O banner de parceria é escuro e a biblioteca é papel: a passagem
   entre os dois era um corte a régua, e o olho lê um corte como
   "acabou a página, começou outra".

   A emenda é uma dissolvência de 130px pintada NO banner, indo do
   transparente até à cor de fundo da página. Ela ocupa a folga que
   o `padding-bottom` acrescentou, por isso não passa por cima de
   texto nenhum — o conteúdo do banner termina acima dela. O fio
   dourado que existia na borda sai: um fio marca uma divisão, e a
   divisão é justamente o que se está a desfazer.

   Do outro lado, a biblioteca começa com um clarão dourado baixo,
   que recebe a dissolvência em vez de a deixar morrer no branco. */
body.ct-redesign .ps-partnership-banner {
    padding-bottom: 104px;
    border-bottom: 0 !important;
}

body.ct-redesign .ps-partnership-banner::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 130px;
    background: linear-gradient(to bottom,
            transparent 0%,
            color-mix(in srgb, var(--ct-bg) 45%, transparent) 52%,
            var(--ct-bg) 100%);
    pointer-events: none;
}

body.ct-redesign .ps-main {
    position: relative;
}

body.ct-redesign .ps-main::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -30px;
    transform: translateX(-50%);
    width: min(1000px, 96%);
    height: 220px;
    background: radial-gradient(58% 100% at 50% 0%, var(--ps-veu), transparent 72%);
    pointer-events: none;
    z-index: 0;
}

body.ct-redesign .ps-main > * {
    position: relative;
    z-index: 1;
}

/* ── 28h. A grelha ── */
body.ct-redesign.ps-pagina .ps-filters {
    border-bottom: 1px solid var(--ps-fio);
}

body.ct-redesign.theme-light.ps-pagina .ps-filter-btn {
    background: #ffffff !important;
    border: 1px solid var(--ps-fio) !important;
    box-shadow: 0 1px 2px rgba(40, 32, 16, .04) !important;
}

body.ct-redesign.ps-pagina .ps-filter-btn.active,
body.ct-redesign.theme-light.ps-pagina .ps-filter-btn.active {
    background: var(--ps-veu) !important;
    border-color: transparent !important;
    color: var(--ps-tinta) !important;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--ps-fio-forte), 0 2px 12px var(--ps-veu) !important;
}

body.ct-redesign.theme-light.ps-pagina .ps-card:hover {
    border-color: var(--ps-fio-forte) !important;
    box-shadow: var(--ps-sombra-alta), 0 0 0 1px rgba(138, 106, 21, .16) !important;
}

/* Fio dourado que acende no topo da capa ao passar o cursor: o
   cartão inteiro reage, não só a sombra. */
body.ct-redesign.ps-pagina .ps-card-thumb::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    z-index: 3;
    background: linear-gradient(90deg, transparent, var(--ct-gold-soft), transparent);
    opacity: 0;
    transition: opacity var(--ct-t);
    pointer-events: none;
}

body.ct-redesign.ps-pagina .ps-card:hover .ps-card-thumb::before {
    opacity: 1;
}

body.ct-redesign.ps-pagina .ps-card-preco {
    color: var(--ps-tinta) !important;
}

/* ── 28i. Varredura dourada no destaque do index ──
   Um reflexo curto que atravessa o cartão e volta a cada 4s: dá
   vida a uma faixa que de resto é estática entre uma troca de slide
   e a seguinte. É `transform` puro sobre um pseudo-elemento — não
   toca no layout e não pinta por cima de nada clicável. */
@keyframes psVarreduraOuro {
    0% { transform: translateX(-130%); }
    26% { transform: translateX(130%); }
    100% { transform: translateX(130%); }
}

body.ct-redesign .ps-feat::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(104deg,
            transparent 40%,
            rgba(240, 217, 138, .10) 46%,
            rgba(255, 247, 220, .30) 50%,
            rgba(240, 217, 138, .10) 54%,
            transparent 60%);
    transform: translateX(-130%);
    animation: psVarreduraOuro 4s cubic-bezier(.4, 0, .2, 1) infinite;
}

@media (prefers-reduced-motion: reduce) {
    body.ct-redesign .ps-feat::after { animation: none; opacity: 0; }
}

/* A moldura do cartão era roxa (a cor do parceiro) e no tema claro
   ficava lilás sobre marfim. A borda passa a ouro; os enfeites de
   dentro — selo "Anime", véu, capa — continuam roxos de propósito,
   que é ali que a marca do PianoSynestesia vive. */
body.ct-redesign .ps-feat {
    --feat-linha: rgba(212, 175, 55, .28);
}

body.ct-redesign.theme-light .ps-feat {
    --feat-linha: rgba(138, 106, 21, .30);
    --feat-sombra: 0 16px 38px rgba(40, 32, 16, .12), 0 0 0 1px rgba(138, 106, 21, .10);
}

/* "Ver pré-visualização" era texto cinza de 11px pendurado sob o
   botão de compra — a única outra ação do cartão, e não parecia
   uma. Vira botão vazado com o fio dourado da casa. */
body.ct-redesign .ps-feat-preview {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: var(--ct-r-pill);
    border: 1px solid var(--ps-fio);
    background: var(--ps-veu);
    color: var(--ps-tinta) !important;
    font-size: 12px;
    font-weight: 700;
    transition: border-color var(--ct-t), background var(--ct-t), transform var(--ct-t);
}

body.ct-redesign .ps-feat-preview i {
    color: var(--ps-tinta) !important;
}

body.ct-redesign .ps-feat-preview:hover {
    border-color: var(--ps-fio-forte);
    background: color-mix(in srgb, var(--ps-veu) 60%, var(--ps-fio));
    color: var(--ps-tinta) !important;
    transform: translateY(-1px);
}

body.ct-redesign .ps-feat-buy {
    gap: 10px;
}

/* O preço do destaque é dourado nos dois temas — no claro, o ouro
   escurecido (5,06:1 sobre papel), não o da marca, que ali daria
   2,3:1. Ver a marca `ct-cor-propria` no ct-destaques.js. */
body.ct-redesign.theme-light .ps-feat-price {
    color: #7a5e12 !important;
}

/* ── 28j. Ilhas escuras dentro da página clara ──
   A barra de compra fixa do telemóvel e as faixas marcadas com
   `ct-bloco-escuro` (o herói das partituras, o banner do TikTok)
   continuam escuras mesmo com a página no tema claro. Em vez de
   reescrever cada botão que cai lá dentro, o PAR de tokens volta ao
   lado escuro — quem estiver ali dentro vira sozinho, incluindo o
   que ainda não existe. */
body.ct-redesign.theme-light.ps-pagina :is(.buy-bar, .ct-bloco-escuro) {
    --ps-tinta: #d4af37;
    --ps-fio: rgba(212, 175, 55, .30);
    --ps-fio-forte: rgba(212, 175, 55, .55);
    --ps-veu: rgba(212, 175, 55, .12);
    --ps-aro: rgba(240, 217, 138, .45);
    --ps-botao: linear-gradient(135deg, #f0d98a 0%, #d4af37 38%, #a8862a 66%, #e5c76b 100%);
    --ps-botao-tinta: #1a1408;
    --ps-trilho: rgba(255, 255, 255, .12);
    --ps-thumb-borda: #161b22;
}

/* ── 28k. Selos semânticos da página de detalhe ──
   Estes três levam `ct-cor-propria` no HTML — sem a marca, a regra
   universal de texto do tema claro (0,26,1) pinta-os de cinza e o
   selo deixa de dizer o que dizia. Aqui recebem o par
   fundo-claro/tinta-escura que o papel pede; no tema escuro ficam
   com as cores que a própria página define. */
body.ct-redesign.theme-light.ps-pagina .tag-original {
    background: rgba(21, 128, 61, .10) !important;
    color: #15803d !important;
}

body.ct-redesign.theme-light.ps-pagina .sheet-preview-badge {
    background: rgba(185, 28, 28, .08) !important;
    border-color: rgba(185, 28, 28, .22) !important;
    color: #b91c1c !important;
}

body.ct-redesign.theme-light.ps-pagina .diff-badge {
    background: var(--ct-surface-3) !important;
    color: var(--ct-text-soft) !important;
}

body.ct-redesign.theme-light.ps-pagina .diff-badge.diff-facil {
    background: rgba(21, 128, 61, .10) !important;
    color: #15803d !important;
}

body.ct-redesign.theme-light.ps-pagina .diff-badge.diff-medio {
    background: rgba(180, 120, 10, .12) !important;
    color: #8a5a06 !important;
}

body.ct-redesign.theme-light.ps-pagina .diff-badge.diff-dificil {
    background: rgba(185, 28, 28, .10) !important;
    color: #b91c1c !important;
}

/* O topo da escala é cheio nos dois temas: o vermelho vazado já é o
   "Difícil", e um quarto nível precisava de peso, não de mais uma
   matiz. Branco sobre #a5133a dá 7,3:1. */
body.ct-redesign.theme-light.ps-pagina .diff-badge.diff-muito-dificil {
    background: #a5133a !important;
    color: #ffffff !important;
}

/* ── 28l. O que NÃO é caixa ──
   A regra de superfícies do §16 casa por sufixo de classe, e nesta
   página há cinco invólucros que terminam em "-section" ou são um
   `aside` sem serem caixa nenhuma: a coluna da direita, o bloco do
   título, o da pré-visualização e o dos comentários. Recebiam fundo
   branco e sombra, e a página passava a ter faixas brancas soltas
   por trás dos cartões de verdade — inclusive uma coluna branca de
   altura inteira à direita, atrás do cartão de compra.

   Aqui voltam a ser o que são: agrupadores transparentes. */
body.ct-redesign.theme-light.ps-pagina :is(.side-col, .main-col, .info-section, .comments-section, .sheet-preview-section, .pdf-section, .comment-footer) {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* ── 28m. A barra da pré-escuta é um <input> ──
   E por isso a regra genérica de campos do tema claro (§16, com
   `!important`) pintava-a de branco por cima do degradê de
   progresso. O `!important` daqui não é preferência: é o único
   jeito de um seletor mais específico ganhar de outro que já o usa. */
body.ct-redesign.ps-pagina .midi-barra {
    background:
        linear-gradient(90deg, var(--ps-tinta) 0 var(--midi-pct, 0%), transparent var(--midi-pct, 0%)),
        var(--ps-trilho) !important;
    border: 0 !important;
    box-shadow: inset 0 0 0 1px var(--ps-fio) !important;
}

/* ── 28n. A moldura da capa ──
   `background: #000` com um fio branco translúcido: sobre papel era
   um retângulo preto com borda invisível. */
body.ct-redesign.theme-light.ps-pagina .hero-preview-wrapper {
    background: var(--ps-superficie-2);
    box-shadow: var(--ps-sombra-alta), 0 0 0 1px var(--ps-fio);
}

body.ct-redesign.theme-light.ps-pagina .hero-preview {
    border-color: var(--ps-fio);
}

/* ── 28o. O disco de tocar é ÍCONE, não rótulo ──
   O botão de compra tem texto por cima, e é isso que obriga o
   preenchimento dele a ser um ouro escuro no tema claro (4,5:1 com
   branco). O disco da pré-escuta não tem texto nenhum — só um
   triângulo — e para conteúdo não-textual o mínimo é 3:1. Isso
   liberta-o para usar o ouro VIVO nos dois temas, com a tinta
   escura por cima: 7,6:1, e um objeto que finalmente parece uma
   peça de metal em vez de uma bolacha castanha.

   O aro escuro é o que resolve o contorno: ouro claro sobre cartão
   branco não chegaria aos 3:1 de fronteira sozinho. */
body.ct-redesign {
    --ps-disco: linear-gradient(135deg, #f6e6ad 0%, #d4af37 40%, #b8942c 72%, #e8cf7e 100%);
    --ps-disco-aro: rgba(240, 217, 138, .55);
}

body.ct-redesign.theme-light {
    --ps-disco-aro: rgba(122, 93, 18, .55);
}

body.ct-redesign.ps-pagina .midi-play {
    background: var(--ps-disco);
    color: #1a1408;
    box-shadow:
        inset 0 1px 0 rgba(255, 252, 240, .55),
        0 0 0 1px var(--ps-disco-aro),
        0 0 0 7px var(--ps-veu),
        var(--ps-sombra);
}

body.ct-redesign.ps-pagina .midi-play:hover:not(:disabled) {
    box-shadow:
        inset 0 1px 0 rgba(255, 252, 240, .55),
        0 0 0 1px var(--ps-disco-aro),
        0 0 0 12px var(--ps-veu),
        var(--ps-sombra-alta);
}

@keyframes psHaloPulso {
    0%, 100% {
        box-shadow:
            inset 0 1px 0 rgba(255, 252, 240, .55),
            0 0 0 1px var(--ps-disco-aro),
            0 0 0 7px var(--ps-veu),
            var(--ps-sombra);
    }
    50% {
        box-shadow:
            inset 0 1px 0 rgba(255, 252, 240, .55),
            0 0 0 1px var(--ps-disco-aro),
            0 0 0 15px transparent,
            var(--ps-sombra);
    }
}

/* O puxador da barra é a mesma peça em ponto pequeno. */
body.ct-redesign.ps-pagina .midi-barra::-webkit-slider-thumb {
    background: var(--ps-disco);
    box-shadow: 0 0 0 1px var(--ps-disco-aro), 0 2px 6px rgba(0, 0, 0, .3);
}

body.ct-redesign.ps-pagina .midi-barra::-moz-range-thumb {
    background: var(--ps-disco);
    box-shadow: 0 0 0 1px var(--ps-disco-aro), 0 2px 6px rgba(0, 0, 0, .3);
}

/* O selo "Bloqueado" fica sobre a folha borrada, que no tema claro é
   quase branca: ouro a 75% com letra branca dava 1,9:1. */
body.ct-redesign.theme-light.ps-pagina .sheet-lock-text {
    background: rgba(107, 82, 17, .88) !important;
    border-color: rgba(107, 82, 17, .5) !important;
    color: #fffaf0 !important;
}

/* ── 28p. A caixa de resultados segue o campo ──
   `.ct-search-results:not(:empty) { display: block }` (§17) existe
   porque o ct-busca.js fecha esvaziando o HTML, sem classe nenhuma.
   Só que partituras.html e index.html fecham de outra maneira — tiram
   `.expanded` do campo e deixam os resultados montados — e aquela
   regra (0,3,1) vencia o `display:none` das folhas das páginas. A
   caixa ficava pendurada no ecrã com a última pesquisa lá dentro,
   mesmo depois de fechada.

   Campo recolhido, caixa fechada: não há busca sem campo à vista. */
body.ct-redesign .ct-search-wrap:not(.expanded) .ct-search-results {
    display: none !important;
}

/* ── 28q. O id que escondia a busca ──
   O `premium_base.css` tem `#search-results, .search-suggestions {
   display: none }`. É um selector por ID — especificidade (1,0,0) — e
   por isso vencia a regra de §17 que mostra a caixa quando ela tem
   conteúdo, `body.ct-redesign .ct-search-results:not(:empty)`, que é
   (0,3,1).

   Resultado: nas páginas que carregam o premium_base.css — a cifra é
   uma delas — a busca do cabeçalho FUNCIONAVA e não se via. Medido: ao
   escrever "charlie" o motor encontrava 8 resultados e montava o HTML
   todo, e a caixa ficava em `display: none`. A partituras.html não
   carrega aquela folha, e é por isso que lá sempre funcionou — o que
   fazia o defeito parecer um problema da página da cifra.

   Aqui repete-se a regra com o id incluído: (1,2,0) contra (1,0,0),
   sem precisar de `!important` — assim a regra de cima, que fecha a
   caixa quando o campo está recolhido, continua a poder vencer. */
body.ct-redesign #search-results:not(:empty),
body.ct-redesign #ct-search-results:not(:empty) {
    display: block;
}

/* ═══════════════════════════════════════════════════════════════════
   §28r. A BUSCA NO TELEMÓVEL — uma peça só
   ───────────────────────────────────────────────────────────────────
   Três folhas mexiam nisto ao mesmo tempo (premium_base.css §114 e
   §226, theme-premium §17 e §26) e o resultado era o que se via:

     • uma moldura dourada grossa à volta do campo, somada de duas
       bordas — a do overlay e a do próprio input — mais o anel de
       foco. Parecia um contorno de depuração esquecido;
     • a lista de resultados NÃO acompanhava o campo: o §22 dá-lhe
       `width: calc(100vw - 20px)` e `right: -8px`, medidas tiradas da
       janela e não do campo, portanto ficava mais estreita e
       deslocada para a esquerda;
     • a última linha ficava cortada a meio, sem sinal de que havia
       mais, e a barra de rolagem aparecia por cima do conteúdo.

   Aqui a busca passa a ser UMA peça: o overlay é a moldura, o campo
   não tem moldura nenhuma, e a lista alinha com o overlay porque é
   filha dele — `left: 0; right: 0` chega, sem contas com a viewport.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    body.ct-redesign .ct-search-wrap.expanded {
        position: absolute !important;
        left: 10px !important;
        right: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: auto !important;
        z-index: 1001 !important;
        background: var(--ct-header-bg) !important;
        border: 1px solid var(--ct-border-strong) !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 28px rgba(0, 0, 0, .45) !important;
        padding: 0 !important;
    }

    /* O campo não desenha nada: quem é a caixa é o overlay. Sem isto
       ficavam duas molduras concêntricas com 2px entre elas. */
    body.ct-redesign .ct-search-wrap.expanded .ct-search-input,
    body.ct-redesign .ct-search-wrap.expanded .ct-search-input:focus,
    body.ct-redesign .ct-search-wrap.expanded .ct-search-input:focus-visible {
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        border-radius: 12px !important;
        padding: 12px 14px 12px 40px !important;
    }

    body.ct-redesign .ct-search-wrap.expanded .ct-inner-search-icon {
        left: 15px !important;
        color: var(--ct-gold) !important;
    }

    /* ── A lista ──
       `left/right: 0` contra o overlay, que é o pai posicionado. É a
       diferença entre alinhar com o campo e alinhar com a janela. */
    body.ct-redesign .ct-search-wrap.expanded .ct-search-results {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: calc(100% + 8px) !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: min(58vh, 420px) !important;
        border-radius: 14px !important;
        overflow-y: auto !important;
        /* Chegar ao fim da lista não pode rolar a página por trás. */
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--ct-gold-line) transparent;
        /* Um respiro no fim: sem ele a última linha encosta ao bordo e
           parece cortada mesmo quando é a última. */
        padding-bottom: 6px !important;
    }

    body.ct-redesign .ct-search-wrap.expanded .ct-search-results::-webkit-scrollbar {
        width: 4px;
    }
    body.ct-redesign .ct-search-wrap.expanded .ct-search-results::-webkit-scrollbar-thumb {
        background: var(--ct-gold-line);
        border-radius: 4px;
    }
    body.ct-redesign .ct-search-wrap.expanded .ct-search-results::-webkit-scrollbar-track {
        background: transparent;
    }

    /* O risco do último item fica pendurado sobre o respiro. */
    body.ct-redesign .ct-search-results .ct-bsc-item:last-child {
        border-bottom: 0 !important;
    }

    /* Linhas mais altas: são alvos de toque, e 10px de altura útil num
       item com foto de 44px não dava os 48px do mínimo recomendado. */
    body.ct-redesign .ct-search-results .ct-bsc-item {
        padding: 11px 14px !important;
        min-height: 56px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   §29. O QUE ESTÁ DENTRO DE UM BLOCO ESCURO

   Duas regras que fecham a mesma família de erros: o bloco continua
   escuro no tema claro, mas alguma outra regra trata o que está lá
   dentro como se estivesse sobre papel branco.

   Vem no fim do ficheiro de propósito — todas estas regras discutem
   com !important, e a ordem é o desempate quando o peso é igual.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 29a. Ligações ───────────────────────────────────────────────
   O dourado do tema claro (--ct-gold, #8a6a15) foi escolhido para
   ler sobre branco, onde dá 5,0:1. Sobre o azul-noite de um bloco
   escuro dá 3,6:1, e a regra genérica de ligações (que traz três
   :not() e por isso pesa mais do que a regra dos blocos escuros)
   levava-o para lá: os "Top 100" do 404, o "Ver detalhes" das
   partituras, o "Criar conta" das ajudas, o "Me avise quando abrir"
   do trabalhe connosco.

   Ali o dourado certo é o do header, --ct-header-accent (#d4af37),
   que é o mesmo tom que o site usa em cima de escuro em todo o lado
   e dá 8,9:1. */
html body.ct-redesign.ct-redesign.theme-light :is(.ct-bloco-escuro, .ct-fundo-forte) a:not([class*="btn"]):not([class*="-cta"]),
html body.ct-redesign.ct-redesign.theme-light a.ct-bloco-escuro :is(span, small, strong, i, em) {
    color: var(--ct-header-accent) !important;
}

/* Quando a própria ligação é o bloco escuro — um botão grafite feito
   com <a> — não é uma ligação sobre escuro, é uma superfície escura
   com texto: leva a tinta clara dos blocos, não o dourado. */
html body.ct-redesign.ct-redesign.theme-light a.ct-bloco-escuro {
    color: var(--ct-bloco-escuro-tinta, #cdd6e0) !important;
}

/* ─── 29b. Tabelas ────────────────────────────────────────────────
   O tema claro repinta `tr`/`td` de creme (#f2efe8) para as tabelas
   dos documentos legais. Numa secção que é escura de propósito —
   as listas de músicas do artista — isso deixava a linha clara com
   a tinta clara do bloco por cima: 1,3:1, o tom e as visitas de cada
   música ilegíveis.

   Dentro de um bloco escuro a tabela não tem superfície própria: o
   fundo é o do bloco. */
html body.ct-redesign.ct-redesign.theme-light .ct-bloco-escuro :is(table, thead, tbody, tfoot, tr, td, th) {
    background: transparent !important;
    background-color: transparent !important;
}


/* ═══ "Em breve" nas partituras ═══════════════════════════
   Enquanto as partituras estão a ser refeitas, o botão de
   compra dá lugar a isto. Fica com a forma do botão para o
   cartão não se desmanchar, mas sem o dourado e sem o cursor
   de clicar: tem de se ver que não é para carregar. */
html body.ct-redesign.ct-redesign.ct-redesign :is(.ps-em-breve, .ps-em-breve:hover),
html body.ct-redesign.ct-redesign.ct-redesign :is(.ps-em-breve, .ps-em-breve:hover) :is(i, span) {
    background: #2a3140 !important;
    background-image: none !important;
    color: #d7dee7 !important;
    -webkit-text-fill-color: #d7dee7 !important;
    border-color: rgba(255, 255, 255, .16) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: default !important;
    pointer-events: none;
    opacity: 1;
}

/* O ícone e o texto lá dentro não têm superfície própria: se lhes
   der o grafite outra vez, ficam um rectângulo dentro do chip. */
html body.ct-redesign.ct-redesign.ct-redesign :is(.ps-em-breve, .ps-em-breve:hover) :is(i, span) {
    background: transparent !important;
    border: 0 !important;
}

html body.ct-redesign.ct-redesign.ct-redesign :is(.ps-em-breve, .ps-em-breve:hover) {
    border: 1px solid rgba(255, 255, 255, .16) !important;
}

/* ============================================================
   26. MODO APP — o que muda dentro da TWA
   ------------------------------------------------------------
   A classe `ct-app` mora no <html>, não no <body>, e é posta
   pelo ct-app.js no <head> — antes do primeiro fotograma. Por
   isso estas regras já estão certas quando a página pinta, e
   não há um salto de "site" para "app" à vista.

   Escreve-se `html.ct-app body.ct-redesign` para o seletor
   pesar mais do que a regra universal do tema claro (§16b), que
   vale (3,16,1) e de outra forma pintava por cima destes tons.
   ============================================================ */

/* ── O rodapé do app ──
   Markup em ct-shell.js (htmlFooterApp). Não é o rodapé do site
   escondido: é outro, mais curto, com os documentos legais que a
   Play Store exige que estejam ao alcance dentro do app. */
html.ct-app body.ct-redesign .ct-footer-app {
    background: var(--ct-footer-bg);
    border-top: 1px solid rgba(255, 255, 255, .07);
    padding: 26px 20px calc(26px + env(safe-area-inset-bottom, 0px));
}

html.ct-app body.ct-redesign .ct-fapp {
    max-width: 460px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

html.ct-app body.ct-redesign .ct-fapp-logo {
    width: 34px;
    height: 34px;
    opacity: .78;
}

html.ct-app body.ct-redesign .ct-fapp-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 10px;
    line-height: 1.7;
}

/* Alvo de toque de 44px de altura sem afastar visualmente os
   links uns dos outros — o padding vertical faz o alvo, o
   negativo devolve o espaço ao layout. */
html.ct-app body.ct-redesign .ct-fapp-links a {
    color: var(--ct-footer-text) !important;
    -webkit-text-fill-color: var(--ct-footer-text) !important;
    font-size: 14px;
    text-decoration: none;
    padding: 11px 2px;
    margin: -11px 0;
}

html.ct-app body.ct-redesign .ct-fapp-links a:active {
    color: var(--ct-header-accent) !important;
    -webkit-text-fill-color: var(--ct-header-accent) !important;
}

html.ct-app body.ct-redesign .ct-fapp-sep {
    color: rgba(255, 255, 255, .22);
    font-size: 12px;
}

html.ct-app body.ct-redesign .ct-fapp-suporte {
    color: var(--ct-header-accent) !important;
    -webkit-text-fill-color: var(--ct-header-accent) !important;
    font-size: 13px;
    text-decoration: none;
}

html.ct-app body.ct-redesign .ct-fapp-legal {
    color: var(--ct-footer-dim) !important;
    -webkit-text-fill-color: var(--ct-footer-dim) !important;
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
}

/* ── O botão do café ──
   O ct-app.js já não injeta o script dentro do app, por isso
   isto nunca chega a ter alvo. Fica como rede: se algum dia uma
   página trouxer o widget por outro caminho, dentro do app ele
   não aparece na mesma. É um link de pagamento fora do Play
   Billing — motivo de recusa na loja. */
html.ct-app #bmc-wbtn,
html.ct-app #bmc-wbtn-wrapper,
html.ct-app #bmc-close-btn,
html.ct-app body>div[style*="transform-origin: right bottom"] {
    display: none !important;
}

/* ── Coisas de site que não fazem sentido num app ──
   O convite para instalar o app, dentro do app. */
html.ct-app body.ct-redesign .ct-instalar-app,
html.ct-app body.ct-redesign [data-so-web] {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   §30. HOME ENXUTA — artistas e artigos
   ───────────────────────────────────────────────────────────────────
   Entraram quando saíram da home as secções de Ferramentas, Jogos e
   Partituras (que passaram para a barra de abas do app). São filas
   horizontais: num telemóvel, uma grelha de doze artistas devolvia à
   home o comprimento que se lhe acabou de tirar.
   ═══════════════════════════════════════════════════════════════════ */

body.ct-redesign .ct-sec-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3, 12px);
    margin-bottom: var(--sp-4, 16px);
}

body.ct-redesign .ct-sec-topo h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: clamp(1.05rem, 3.4vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -.01em;
}

body.ct-redesign .ct-sec-topo h2 i { color: var(--ct-gold); }

body.ct-redesign .ct-sec-mais {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm, .875rem);
    font-weight: 600;
    color: var(--ct-gold) !important;
    text-decoration: none;
    padding: 6px 2px;
}

body.ct-redesign .ct-sec-mais i { font-size: .7em; }

/* ── As filas ──
   `scroll-snap` para o dedo parar em cima de um cartão inteiro, e o
   padding lateral negativo para o primeiro cartão nascer alinhado com
   o título e o último poder respirar na margem direita. */
body.ct-redesign .ct-artistas-fila,
body.ct-redesign .ct-artigos-fila {
    display: flex;
    gap: var(--sp-3, 12px);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: thin;
}

body.ct-redesign .ct-artistas-fila::-webkit-scrollbar,
body.ct-redesign .ct-artigos-fila::-webkit-scrollbar { height: 5px; }

body.ct-redesign .ct-artistas-fila::-webkit-scrollbar-thumb,
body.ct-redesign .ct-artigos-fila::-webkit-scrollbar-thumb {
    background: var(--ct-gold-line);
    border-radius: 3px;
}

/* ── Artista ── */
body.ct-redesign .ct-artista {
    flex: 0 0 auto;
    width: 96px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

body.ct-redesign .ct-artista img {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--ct-gold-line);
    background: var(--ct-surface-2, rgba(255, 255, 255, .05));
    transition: border-color var(--ct-t), transform var(--ct-t);
}

body.ct-redesign .ct-artista:hover img,
body.ct-redesign .ct-artista:active img {
    border-color: var(--ct-gold);
    transform: scale(1.04);
}

/* Sem foto: as iniciais em disco dourado. Um buraco cinzento no meio
   da fila lê-se como imagem partida. */
body.ct-redesign .ct-artista-ini {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 800;
    color: #12171f !important;
    background: var(--ct-gold-metal);
    border: 2px solid var(--ct-gold-line);
}

body.ct-redesign .ct-artista span {
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Artigo ── */
body.ct-redesign .ct-artigo {
    flex: 0 0 auto;
    width: 216px;
    scroll-snap-align: start;
    display: block;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

body.ct-redesign .ct-artigo img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--ct-r, 12px);
    border: 1px solid var(--ct-border);
    display: block;
    margin-bottom: 10px;
}

body.ct-redesign .ct-artigo-cat {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ct-gold) !important;
    margin-bottom: 4px;
}

body.ct-redesign .ct-artigo h3 {
    margin: 0;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* A partir do tablet as filas deixam de precisar de rolar. */
@media (min-width: 900px) {
    body.ct-redesign .ct-artistas-fila { flex-wrap: wrap; overflow-x: visible; }
    body.ct-redesign .ct-artigo { width: 260px; }
}