/* ============================================================
   theme.css — estilos de tema, layout e componentes da home
   Extraído do index.html para separar estrutura de apresentação
   ============================================================ */

        /* Language Toggle Styles */
        .lang-toggle-btn {
            background: transparent;
            color: #9ca3af;
        }

        .lang-toggle-btn.active {
            background-color: #000 !important;
            color: #fff !important;
        }

        .dark .lang-toggle-btn.active {
            background-color: #fff !important;
            color: #000 !important;
        }

        .lang-toggle-btn:hover:not(.active) {
            background-color: #f3f4f6;
            color: #000;
        }

        .dark .lang-toggle-btn:hover:not(.active) {
            background-color: #262626;
            color: #fff;
        }
        #mobileSearchWrapper { display: none !important; }
        #scrollToTopBtn { display: none !important; }
        div:has(> #tagBrowserToggle) { display: none !important; }
        div:has(> #activeFiltersWrapper) { display: none !important; }

        /* Bloquear pull-to-refresh nativo do navegador (mobile) */
        html, body { overscroll-behavior-y: contain; }

        /* Painel de aparência (home) — destaque do tema selecionado */
        .site-theme-btn { position: relative; transition: transform 0.15s, box-shadow 0.15s; }
        .site-theme-btn.is-active {
            box-shadow: 0 0 0 2px var(--n-accent, #B8860B);
            transform: translateY(-1px);
        }
        .site-theme-btn:active { transform: scale(0.96); }

        /* ════════════════════════════════════════════════════
           PAINÉIS DE CONTROLE (home + reader): NÃO escalam com
           o slider de fonte. Todas as unidades rem do Tailwind
           usadas dentro destes contêineres são sobrescritas por
           valores em px fixos.
           ════════════════════════════════════════════════════ */
        #siteAppearancePopover,
        #appearanceMenu,
        #historyDropdown {
            font-size: 16px !important;
            line-height: 1.5 !important;
        }
        #siteAppearancePopover {
            width: 288px !important;
            max-width: calc(100vw - 16px) !important;
            padding: 16px !important;
            border-radius: 4px !important;
            box-shadow: var(--n-shadow, 0 4px 24px rgba(0, 0, 0, 0.07)) !important;
        }
        #appearanceMenu {
            width: 256px !important;
            max-width: calc(100vw - 16px) !important;
            padding: 16px !important;
            border-radius: 4px !important;
        }
        #historyDropdown {
            width: 256px !important;
            max-width: calc(100vw - 16px) !important;
            border-radius: 4px !important;
        }
        /* Força line-height fixa em todos descendentes (Tailwind text-base
           e text-lg setam line-height em rem que escala com html).
           NÃO sobrescreve font-size — utilities text-[Npx] devem permanecer. */
        #siteAppearancePopover *,
        #appearanceMenu *,
        #historyDropdown * { line-height: 1.4 !important; }
        /* Texts explícitos do Tailwind (text-[Npx]) se mantêm; só os "text-base"
           (1rem) e text-lg (1.125rem) precisam de override. */
        #siteAppearancePopover .text-base,
        #appearanceMenu .text-base { font-size: 16px !important; }
        #siteAppearancePopover .text-lg,
        #appearanceMenu .text-lg { font-size: 18px !important; }
        /* Spacing utilities: gap / padding / margin / dimensão em rem → px */
        #siteAppearancePopover .gap-1, #appearanceMenu .gap-1 { gap: 4px !important; }
        #siteAppearancePopover .gap-2, #appearanceMenu .gap-2 { gap: 8px !important; }
        #siteAppearancePopover .gap-3, #appearanceMenu .gap-3 { gap: 12px !important; }
        #siteAppearancePopover .gap-4, #appearanceMenu .gap-4 { gap: 16px !important; }
        #siteAppearancePopover .p-1, #appearanceMenu .p-1 { padding: 4px !important; }
        #siteAppearancePopover .p-2, #appearanceMenu .p-2 { padding: 8px !important; }
        #siteAppearancePopover .p-3, #appearanceMenu .p-3 { padding: 12px !important; }
        #siteAppearancePopover .p-4, #appearanceMenu .p-4 { padding: 16px !important; }
        #siteAppearancePopover .py-2, #appearanceMenu .py-2 { padding-top: 8px !important; padding-bottom: 8px !important; }
        #siteAppearancePopover .px-3, #appearanceMenu .px-3 { padding-left: 12px !important; padding-right: 12px !important; }
        #siteAppearancePopover .px-4, #appearanceMenu .px-4 { padding-left: 16px !important; padding-right: 16px !important; }
        #siteAppearancePopover .mb-2, #appearanceMenu .mb-2 { margin-bottom: 8px !important; }
        #siteAppearancePopover .mt-1, #appearanceMenu .mt-1 { margin-top: 4px !important; }
        #siteAppearancePopover .mt-2, #appearanceMenu .mt-2 { margin-top: 8px !important; }
        #siteAppearancePopover .h-2, #appearanceMenu .h-2 { height: 8px !important; }
        #siteAppearancePopover .h-3, #appearanceMenu .h-3 { height: 12px !important; }
        #siteAppearancePopover .h-4, #appearanceMenu .h-4 { height: 16px !important; }
        #siteAppearancePopover .w-3, #appearanceMenu .w-3 { width: 12px !important; }
        #siteAppearancePopover .w-4, #appearanceMenu .w-4 { width: 16px !important; }
        /* Bordas arredondadas pequenas */
        #siteAppearancePopover .rounded, #appearanceMenu .rounded { border-radius: 2px !important; }
        #siteAppearancePopover .rounded-lg, #appearanceMenu .rounded-lg { border-radius: 4px !important; }
        #siteAppearancePopover .rounded-xl, #appearanceMenu .rounded-xl { border-radius: 4px !important; }
        /* Display de tamanho */
        #modalFontSizeDisplay, #siteFontSizeDisplay { font-size: 11px !important; }

        /* ════════════════════════════════════════════════════
           DESIGN NÓRDICO — Paleta Quente e Sofisticada
           Linho aquecido · Sálvia nórdica · Tipografia refinada
           --n-muted ajustado para contraste WCAG AA (≥4.5:1)
           ════════════════════════════════════════════════════ */
        :root {
            --n-bg:      #F8F9F5;
            --n-surface: #FDFAF5;
            --n-border:  #DDD8CE;
            --n-border2: #C9C2B8;
            --n-text:    #1C1916;
            --n-muted:   #6B6258;
            --n-accent:  #B8860B;
            /* Shared design-system aliases */
            --bg-color:  var(--n-bg);
            --surface:   var(--n-surface);
            --text-main: var(--n-text);
            --accent:    var(--n-accent);
        }
        .dark {
            --n-bg:      #0F0D0B;
            --n-surface: #161310;
            --n-border:  #2C2620;
            --n-border2: #3F3830;
            --n-text:    #EDE8DE;
            --n-muted:   #A89F92;
            --n-accent:  #C9A227;
        }

        /* ════════════════════════════════════════════════════
           TEMAS SITE-WIDE — escopo via html[data-theme="X"]
           O slider de tema do reader também muda o site inteiro
           (cards, header, abas, alfabeto). Mutes ajustados
           para WCAG AA (≥4.5:1).
           ════════════════════════════════════════════════════ */
        html[data-theme="original"] {
            /* Alinhado com o Caminho da Felicidade — 2 níveis claros:
               bg-color (warm gray único) + surface (white) com radius e shadow.
               Acento ouro mais profundo, soft pra hovers. */
            --n-bg:           #FFFFFF;  /* surface — cards, panes, search */
            --n-desk:         #F2F2F0;  /* bg-color — todo o resto (body, mainList) */
            --n-surface:      #FFFFFF;
            --n-border:       #E4E4E0;
            --n-border2:      #D4D4D0;
            --n-text:         #1C1C1A;
            --n-muted:        #8C8A86;
            --n-accent:       #9B7209;
            --n-accent-soft:  rgba(155, 114, 9, 0.06);
            --n-accent-mid:   rgba(155, 114, 9, 0.14);
            --n-shadow:       0 4px 24px rgba(0, 0, 0, 0.07);
            /* Header habita a "outside zone" (warm gray do body, translúcido).
               Chrome zone (search/tabs) é parte da "page" (white surface). */
            --site-header-bg: rgba(242, 242, 240, 0.85);
            --site-sticky-bg: #FFFFFF;
        }
        html[data-theme="quiet"] {
            --n-bg:      #4A494E;
            --n-surface: #56555A;
            --n-border:  #5A595E;
            --n-border2: #6B6A6F;
            --n-text:    #E5E4E8;
            --n-muted:   #C0BFC3;
            --n-accent:  #C9A227;
            --site-header-bg: rgba(74, 73, 78, 0.95);
            --site-sticky-bg: rgba(74, 73, 78, 0.97);
        }
        html[data-theme="paper"] {
            --n-bg:      #EDEDED;
            --n-surface: #E5E5E5;
            --n-border:  #DEDEDE;
            --n-border2: #C9C9C9;
            --n-text:    #1D1D1D;
            --n-muted:   #595959;
            --n-accent:  #B8860B;
            --site-header-bg: rgba(237, 237, 237, 0.95);
            --site-sticky-bg: rgba(237, 237, 237, 0.97);
        }
        html[data-theme="calm"] {
            --n-bg:      #EEE2CC;
            --n-surface: #E5D7BD;
            --n-border:  #D8C8A8;
            --n-border2: #C9B891;
            --n-text:    #362D25;
            --n-muted:   #6E5F4F;
            --n-accent:  #8B5A2B;
            --site-header-bg: rgba(238, 226, 204, 0.95);
            --site-sticky-bg: rgba(238, 226, 204, 0.97);
        }
        html[data-theme="focus"] {
            --n-bg:      #FFFCF5;
            --n-surface: #FAF6E8;
            --n-border:  #EBE5D5;
            --n-border2: #DCD0B0;
            --n-text:    #141205;
            --n-muted:   #6B6657;
            --n-accent:  #B8860B;
            --site-header-bg: rgba(255, 252, 245, 0.95);
            --site-sticky-bg: rgba(255, 252, 245, 0.97);
        }
        html[data-theme="bold"] {
            --n-bg:      #FFFFFF;
            --n-surface: #F8F8F8;
            --n-border:  #D4D4D4;
            --n-border2: #A3A3A3;
            --n-text:    #000000;
            --n-muted:   #4B5563;
            --n-accent:  #000000;
            --site-header-bg: rgba(255, 255, 255, 0.95);
            --site-sticky-bg: rgba(255, 255, 255, 0.97);
        }
        /* Bold theme: peso semibold globalmente */
        html[data-theme="bold"] body,
        html[data-theme="bold"] .ci-title { font-weight: 600 !important; }

        /* Body = desk (warm um pouco mais escuro). Fallback para n-bg
           pros temas que não definem desk. Sem transição (Chrome às vezes
           "trava" o repaint quando var() muda via attribute selector). */
        body {
            background-color: var(--n-desk, var(--n-bg)) !important;
            color: var(--n-text) !important;
            transition: none !important;
        }

        /* Superfície principal */
        #appContent {
            background-color: var(--n-bg) !important;
            border-color: var(--n-border) !important;
            box-shadow: 0 0 60px rgba(28, 25, 22, 0.05) !important;
            /* Cria stacking context isolado para que filhos (sticky wrapper z-90,
               purificacaoSearchBar z-100, etc.) não vazem acima dos modais
               (#searchModal z-99990, #readModal, etc.) que vivem no <body>. */
            position: relative;
            z-index: 0;
        }

        /* Header fixo full-width — habita a "outside zone" (warm gray do body),
           translúcido com blur. AppContent é a "page" (white card centrado). */
        #site-header {
            background-color: var(--site-header-bg, rgba(242, 242, 240, 0.85)) !important;
            backdrop-filter: saturate(180%) blur(20px);
            -webkit-backdrop-filter: saturate(180%) blur(20px);
            border-bottom: 1px solid var(--n-border) !important;
        }
        .dark #site-header {
            /* Respeita o tema escolhido (quiet, paper, etc.); cai p/ near-black só se var ausente */
            background-color: var(--site-header-bg, rgba(15, 13, 11, 0.85)) !important;
        }

        /* Nome do site — title case discreto, igual à referência */
        #site-header > span {
            font-size: 14px !important;
            letter-spacing: 0.3px !important;
            text-transform: none !important;
            font-weight: 500 !important;
            color: var(--n-muted) !important;
            font-family: 'Outfit', sans-serif !important;
        }

        /* Site chrome (header + popovers) — congelado em tamanhos absolutos
           pra não escalar com o slider de Tamanho. O slider escala
           <html>{font-size}, o que faz utilities Tailwind rem-based crescerem;
           aqui sobrescrevemos pra px absoluto cada utility usada na chrome. */
        #site-header { font-size: 16px !important; padding-left: 16px !important; padding-right: 16px !important; }
        #site-header > div.flex { gap: 4px !important; }
        #site-header button { width: 32px !important; height: 32px !important; }
        #site-header button .text-base { font-size: 16px !important; }
        #site-header svg { width: var(--icon-w, 18px) !important; height: var(--icon-h, 18px) !important; }
        #site-header a svg { --icon-w: 28px; --icon-h: 28px; }

        /* Popovers de chrome — Aparência e Histórico ancorados ao header.
           Pinamos largura, padding, gap e fontes pra não escalar com o slider. */
        #siteAppearancePopover, #siteHistoryPopover {
            width: 288px !important;
            right: 8px !important;
            font-size: 16px !important;
        }
        #siteAppearancePopover { padding: 16px !important; }
        #siteAppearancePopover > div.flex { gap: 16px !important; }
        #siteAppearancePopover .mb-2 { margin-bottom: 8px !important; }
        #siteAppearancePopover .grid { gap: 8px !important; }
        #siteAppearancePopover .grid > button { padding: 8px !important; }
        #siteAppearancePopover .grid > button .text-base,
        #siteAppearancePopover .grid > button .text-lg { font-size: 18px !important; }
        #siteAppearancePopover .grid > button .mt-1 { margin-top: 4px !important; }
        #siteAppearancePopover input[type="range"] { height: 8px !important; }
        #siteHistoryPopover .p-3 { padding: 12px !important; }
        #siteHistoryPopover .max-h-80 { max-height: 320px !important; }

        /* Tabs principais (O Johrei, Sobre a Purificação, etc.) e sub-abas
           (01 Fundamentos, 02 Prática) — parte da chrome de navegação, também
           pinadas. .tab-btn usa font-size/padding em rem; pulamos pra px. */
        #tabsContainer {
            padding-top: 20px !important;
            padding-bottom: 2px !important;
            padding-left: 32px !important;
            padding-right: 32px !important;
            gap: 40px !important;
        }
        #tabsContainer .tab-btn {
            font-size: 12px !important;
            padding-bottom: 6px !important;
        }
        /* Wrappers de sub-abas (Fundamentos / Prática):
           - Desktop/tablet: labels italic serif com underline dourado
             no ativo. Gap 24px dá respiração editorial entre eles. */
        #tabsContainer + div .flex.items-baseline { gap: 24px !important; }
        #tabScopeSwitcherMobile > div { gap: 8px !important; }

        /* Wrapper sticky (nav + filtros). Sombra suave embaixo cria a sensação
           de "elevação" — o conteúdo scrolla por baixo deste plano fixo,
           separando claramente chrome zone de cards sem precisar mudar bg.
           IMPORTANTE: NÃO setar position aqui — o wrapper é md:sticky pelo
           Tailwind e qualquer override (relative/absolute) quebra o scroll. */
        #appContent > div:first-child {
            background-color: var(--site-sticky-bg, rgba(255, 255, 255, 0.97)) !important;
            box-shadow:
                0 1px 0 var(--n-border, #E4E4E0),
                0 6px 16px -8px rgba(0, 0, 0, 0.08) !important;
        }
        .dark #appContent > div:first-child {
            background-color: var(--site-sticky-bg, rgba(22, 19, 16, 0.97)) !important;
        }

        /* Barra de nav interna (mobile) */
        div:has(> #mobileTabsContainer) {
            background-color: var(--site-sticky-bg, rgba(255, 255, 255, 0.97)) !important;
            border-bottom-color: var(--n-border) !important;
        }
        .dark div:has(> #mobileTabsContainer) {
            background-color: var(--site-sticky-bg, rgba(22, 19, 16, 0.97)) !important;
        }

        /* Tabs mobile e desktop */
        #mobileTabsContainer {
            background-color: transparent !important;
            border-bottom-color: var(--n-border) !important;
        }
        nav#tabsContainer {
            border-bottom-color: var(--n-border) !important;
        }

        /* ════════════════════════════════════════════════════
           Anti-clash: superfícies hardcoded `dark:bg-[#0a0a0a]` /
           `dark:bg-[#050505]` / `dark:bg-[#111]` no markup brigam com
           temas escuros customizados (quiet, paper, sepia). Forçamos
           todas a respeitar a paleta do tema, com fallback near-black
           preservando o comportamento original quando nenhum tema é
           selecionado.
           ════════════════════════════════════════════════════ */
        .dark body {
            background-color: var(--n-desk, var(--n-bg, #050505)) !important;
        }
        .dark #appContent,
        .dark #mainList {
            background-color: var(--n-bg, #0a0a0a) !important;
        }
        .dark #mainList { color: var(--n-text) !important; }

        /* Search/filters sticky wrapper interno + super-tabs mobile scroll */
        .dark #searchInput,
        .dark .category-filter-select,
        .dark .source-filter-select,
        .dark .search-input,
        .dark #mobileSearchInput {
            background-color: var(--n-bg, #111) !important;
            color: var(--n-text) !important;
            border-color: var(--n-border) !important;
        }
        .dark .search-input::placeholder,
        .dark #searchInput::placeholder {
            color: var(--n-muted) !important;
            opacity: 0.7;
        }

        /* Modais (read, search, filter, history popover) */
        .dark #modalCard,
        .dark #modalHeader,
        .dark #modalBody,
        .dark #modalFooter,
        .dark #searchModal .relative,
        .dark #filterModalCard,
        .dark #historyPopover,
        .dark #appearancePopover {
            background-color: var(--n-surface, #111) !important;
            color: var(--n-text) !important;
            border-color: var(--n-border) !important;
        }
        .dark #modalBackdrop { background-color: rgba(0, 0, 0, 0.55) !important; }

        /* Pílulas/dropdowns/cards menores */
        .dark .filter-pill,
        .dark .scope-button,
        .dark #tagBrowserToggle {
            background-color: var(--n-surface, #1a1a1a) !important;
            border-color: var(--n-border) !important;
            color: var(--n-text) !important;
        }

        /* Bordas escuras Tailwind viram a borda do tema */
        .dark .border-gray-800,
        .dark .border-gray-900 {
            border-color: var(--n-border) !important;
        }

        /* Body view tabs (FRENTE/DETALHES/COSTAS) — em dark mode, em vez de
           inverter pra bg branco gritante, usa surface diferenciada + borda
           accent. Idle fica transparente com borda sutil. */
        .dark #tab-front.bg-black,
        .dark #tab-detail.bg-black,
        .dark #tab-back.bg-black {
            background-color: var(--n-surface) !important;
            color: var(--n-text) !important;
            border-color: var(--n-accent) !important;
        }
        .dark #tab-front.bg-white,
        .dark #tab-detail.bg-white,
        .dark #tab-back.bg-white {
            background-color: transparent !important;
            color: var(--n-muted) !important;
            border-color: var(--n-border) !important;
        }

        /* Sub-aba heading na lista — barrinha à esquerda usa o accent do tema
           (gold em Quiet, sand em paper, etc.). Texto em --n-text. */
        .dark .sub-aba-heading::before {
            background: var(--n-accent, #c9a84c) !important;
        }
        .dark .sub-aba-heading span {
            color: var(--n-text) !important;
        }

        /* Alphabet / A-Z — sem fundo próprio */
        #alphabetWrapper { background: transparent !important; }

        /* Tab inativo — warm muted (only targets inactive .text-gray-400 state) */
        .tab-btn.text-gray-400 { color: var(--n-muted) !important; }

        /* Tab ativo — mapa usa sage, outros mantêm cor da categoria */
        .tab-btn.border-cat-dark {
            border-color: var(--n-accent) !important;
            color: var(--n-text) !important;
        }
        #mobileTabsContainer button.border-black {
            border-color: var(--n-accent) !important;
        }

        /* Botão Filtros — texto simples, sem pill */
        #tagBrowserToggle {
            background-color: transparent !important;
            border: none !important;
            padding: 0 !important;
            font-size: 11px !important;
            color: var(--n-muted) !important;
            box-shadow: none !important;
            text-decoration: underline !important;
            text-underline-offset: 3px !important;
            text-decoration-color: var(--n-border) !important;
        }
        #tagBrowserToggle:hover {
            color: var(--n-text) !important;
            box-shadow: none !important;
        }

        /* Lista principal */
        #mainList { background-color: var(--n-bg) !important; }

        /* Barra de busca por purificação — segue o tema */
        /* ════════════════════════════════════════════════════
           BUSCA — campo editorial centrado
           Mobile: compacto e sólido (peso por contraste).
           Desktop: serif italic generoso, hairline gold no focus.
           ════════════════════════════════════════════════════ */
        #purificacaoSearchBar {
            padding: 10px 12px !important;
        }
        /* Suggestions acima dos demais itens dentro do search bar */
        #purificacaoSuggestions { z-index: 96 !important; }
        @media (min-width: 768px) {
            #purificacaoSearchBar { padding: 28px 16px 22px !important; }
        }
        #purificacaoSearchBar > div {
            max-width: 540px !important;
            padding: 0 !important;
        }

        /* Campo de busca — superfície white com radius 4px, hairline.
           Alinha com o vocabulário de surface do Caminho da Felicidade. */
        #purificacaoSearchBar > div > div.flex {
            gap: 12px !important;
            padding: 12px 16px !important;
            border: 1px solid var(--n-border);
            border-radius: 4px !important;
            background: var(--n-surface, #FFFFFF);
            box-shadow: var(--n-shadow, 0 1px 8px rgba(0, 0, 0, 0.04));
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        @media (min-width: 768px) {
            #purificacaoSearchBar > div > div.flex {
                padding: 14px 20px !important;
                gap: 14px !important;
            }
        }
        #purificacaoSearchBar > div > div.flex:focus-within {
            border-color: var(--n-accent);
            box-shadow: 0 0 0 3px var(--n-accent-soft, rgba(155, 114, 9, 0.06));
        }

        /* Ícone — vira gold no focus */
        #purificacaoSearchBar svg {
            width: 16px !important;
            height: 16px !important;
            color: var(--n-muted) !important;
            transition: color 0.2s;
        }
        @media (min-width: 768px) {
            #purificacaoSearchBar svg { width: 18px !important; height: 18px !important; }
        }
        #purificacaoSearchBar > div > div.flex:focus-within svg {
            color: var(--n-accent) !important;
        }

        /* Input — serif italic, tamanho compatível */
        #purificacaoInput {
            color: var(--n-text) !important;
            font-family: 'Crimson Pro', 'Noto Serif JP', serif !important;
            font-size: 16px !important;
            font-style: italic;
            font-weight: 400;
        }
        @media (min-width: 768px) {
            #purificacaoInput { font-size: 19px !important; }
        }
        #purificacaoInput::placeholder { color: var(--n-muted) !important; opacity: 0.6; }

        /* Hint escondida em todos viewports — o warm zone já separa as zonas.
           O fallback no empty-state continua intacto (botão "Buscar X em todos"). */
        .purif-hint { display: none !important; }
        .purif-hint button {
            background: none; border: none; padding: 0;
            font: inherit; font-weight: 600;
            color: var(--n-text);
            text-decoration: underline;
            text-underline-offset: 3px;
            text-decoration-color: var(--n-border2, var(--n-border));
            cursor: pointer;
            transition: color 0.15s, text-decoration-color 0.15s;
        }
        .purif-hint button:hover {
            color: var(--n-accent);
            text-decoration-color: var(--n-accent);
        }

        /* Grid — 1 coluna editorial */
        #contentList {
            grid-template-columns: 1fr !important;
            gap: 0 !important;
            padding-top: 0 !important;
        }

        /* ── CARD ITEM ── */
        .card-item {
            position: relative;
            padding: 0.75rem 0 !important;
            overflow: hidden;
            display: flex !important;
            flex-direction: column !important;
            gap: 0.3rem !important;
            border: none !important;
            border-top: 1px solid var(--n-border) !important;
            border-radius: 0 !important;
            background: transparent !important;
            transition: background 0.15s ease !important;
        }
        .card-item:last-child { border-bottom: 1px solid var(--n-border) !important; }

        /* hairline dourada varre da esquerda no hover */
        .card-item::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; height: 2px;
            background: var(--n-accent);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 1;
        }
        .card-item:hover::before { transform: scaleX(1); }
        .card-item:hover { background: rgba(184, 134, 11, 0.03) !important; }
        .dark .card-item:hover { background: rgba(201, 162, 39, 0.04) !important; }
        /* Em temas escuros customizados, o accent gold no hover fica gritante.
           Troca pro neutro --n-border2 (sóbrio) e reduz opacidade. */
        .dark .card-item::before { background: var(--n-border2) !important; opacity: 0.6; }

        /* linha de header: apenas ações à direita (label de categoria removido — redundante dentro da aba) */
        .ci-header { display: flex; justify-content: flex-end; align-items: center; }
        .ci-cat { display: none !important; }
        .ci-actions { display: flex; align-items: center; gap: 10px; }

        /* botão apostila — sem fundo, apenas cor */
        .ci-save {
            background: none !important;
            border: none;
            padding: 0;
            cursor: pointer;
            color: var(--n-border2);
            display: flex;
            align-items: center;
            transition: color 0.15s;
        }
        .ci-save:hover { color: var(--n-accent); }
        .ci-save.text-yellow-600 { color: var(--n-accent) !important; }

        /* seta direcional */
        .ci-arrow {
            font-size: 16px;
            line-height: 1;
            color: var(--n-border2);
            display: inline-block;
            transition: color 0.2s, transform 0.2s;
            font-style: normal;
        }
        .card-item:hover .ci-arrow { color: var(--n-accent); transform: translateX(3px); }

        /* título */
        .ci-title {
            font-family: 'Crimson Pro', 'Noto Serif JP', serif !important;
            font-size: 1.35rem !important;
            font-weight: 400 !important;
            line-height: 1.3 !important;
            color: var(--n-text) !important;
            margin: 0.05rem 0 0 !important;
            display: -webkit-box !important;
            -webkit-line-clamp: 2 !important;
            -webkit-box-orient: vertical !important;
            overflow: hidden !important;
            transition: color 0.15s;
        }
        .card-item:hover .ci-title { color: #1a1007 !important; }
        .dark .card-item:hover .ci-title { color: #f5f0e8 !important; }

        /* tags — texto inline separado por pontos */
        /* Ocultas temporariamente nos cards (pedido do usuário). */
        .ci-tags {
            display: none !important;
        }
        .ci-tags--legacy {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            line-height: 1.6;
            margin-top: 0.1rem;
        }
        .ci-tag {
            background: none; border: none; padding: 0;
            font-family: 'Outfit', sans-serif;
            font-size: 9px; font-weight: 600;
            letter-spacing: 0.07em; text-transform: uppercase;
            color: var(--n-muted); cursor: pointer;
            transition: color 0.12s;
        }
        .ci-tag:hover { color: var(--n-text); }
        .ci-tag.is-active { color: var(--n-text); text-decoration: underline; text-underline-offset: 2px; }
        .ci-dot { font-size: 9px; color: var(--n-border2); padding: 0 4px; user-select: none; }

        /* "30 ensinamentos" escondido — era ruído entre chrome e cards.
           Pode voltar como contador de filtro/busca ativo no futuro. */
        #resultsBar { display: none !important; }
        /* contentList ganha respiro próprio agora que resultsBar saiu */
        #contentList { padding-top: 12px !important; }

        /* desktop — Nordic minimal (sem borda caixa, sem rounded), mais respiração */
        @media (min-width: 768px) {
            #contentList { padding-top: 1.25rem !important; }
            .card-item {
                padding: 1.1rem 1.5rem 1.1rem 0 !important;
            }
            .ci-title { font-size: 1.3rem !important; }
            #resultsBar { padding: 24px 0 12px !important; }
            #resultsCount { font-size: 12px !important; }
        }

        /* ── ALFABETO — colapsável ── */
        #alphabetWrapper:not(.hidden) {
            border-bottom: 1px solid var(--n-border);
        }
        .alpha-toggle-btn {
            display: flex;
            width: 100%;
            align-items: center;
            justify-content: space-between;
            padding: 10px 1rem;
            background: transparent;
            border: none;
            cursor: pointer;
            font-family: 'Outfit', sans-serif;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--n-muted);
            transition: color 0.15s;
        }
        .alpha-toggle-btn:hover { color: var(--n-text); }
        #alphabetChevron { transition: transform 0.25s ease; }
        #alphabetWrapper.alpha-open #alphabetChevron { transform: rotate(180deg); }
        .alpha-panel {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }
        #alphabetWrapper.alpha-open .alpha-panel { max-height: 60px; }
        #alphabetContainer {
            padding: 6px 1rem 10px !important;
            gap: 5px !important;
        }
        #alphabetContainer button {
            width: 28px !important;
            height: 28px !important;
            font-size: 10px !important;
            padding: 0 !important;
            flex: none !important;
        }
        #alphabetContainer button[id^="btn-category"] {
            width: auto !important;
            padding: 0 8px !important;
            height: 26px !important;
        }