/* Fonts carregadas via <link> no app.html (evita @import waterfall) */

/* ==================== A11Y: PREFERS-REDUCED-MOTION ====================
   Usuários com TDAH/dislexia/vestibular sofrem com auto-play de animações.
   Sistema operacional sinaliza preferência via media query — respeitamos
   GLOBALMENTE: animações ficam quase instantâneas, transições idem.
   Cada componente pode opt-in re-habilitando por seletor específico. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==================== PERF MOBILE: PAUSE WHEN TAB HIDDEN ====================
   Mobile bateria/CPU: ~15+ animações infinite (pulse, shimmer, rotate)
   continuam rodando mesmo com aba minimizada. Pausa-as quando body tem
   .app-hidden (toggled via visibilitychange listener no app.html).
   Ganho: GPU/CPU ociosa em background, bateria preservada. */
body.app-hidden *,
body.app-hidden *::before,
body.app-hidden *::after {
    animation-play-state: paused !important;
}

/* ==================== DESIGN TOKENS — escala consistente ====================
   Estes tokens substituem valores hardcoded espalhados (px aleatórios).
   Use sempre var(--space-*) e var(--radius-*) em novos componentes. */
:root {
    /* Spacing scale (mobile-first, base 4px) */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 20px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* Radius scale */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* Shadow scale (consistent depth) */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 24px var(--neuro-cyan-glow, rgba(6, 214, 160, 0.3));

    /* Z-index scale (predictable layering) */
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 50;
    --z-overlay: 100;
    --z-modal: 1000;
    --z-toast: 9000;
    --z-tutorial: 10000;
}

/* Status pill — padrão visual consistente pra indicators flutuantes
   (Carregando, region count, page indicator, save status, etc.) */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-pill);
    background: rgba(12, 16, 33, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); /* Safari iOS quirk */
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--neuro-text-primary, #e2e8f0);
    font-size: 12px;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}
.status-pill--loading {
    color: var(--neuro-cyan, #06d6a0);
}
/* Loading state visual indicator: pulse subtle no border pra feedback de "trabalhando".
   Sem isso, pill aparece estática durante 5-10s de PDF render — user duvida. */
.status-pill--loading::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--neuro-cyan, #06d6a0);
    margin-right: 6px;
    animation: statusPillPulse 1.2s ease-in-out infinite;
}
@keyframes statusPillPulse {
    0%, 100% { opacity: 0.4; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
    .status-pill--loading::before { animation: none; opacity: 1; }
}
.status-pill--success {
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.3);
}

/* ==================== A11Y: VISUALLY HIDDEN + SKIP LINK ====================
   .visually-hidden esconde visualmente mas mantém em screen readers (best
   practice para H1, labels invisíveis). .skip-to-main aparece no foco
   teclado pra pular header e ir direto pra conteúdo principal. */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.skip-to-main {
    position: absolute;
    top: -100px;
    left: 8px;
    z-index: 99999;
    padding: 8px 16px;
    background: var(--neuro-cyan, #06d6a0);
    color: var(--neuro-bg-deep, #050810);
    font-weight: 700;
    text-decoration: none;
    border-radius: 6px;
    transition: top 0.2s ease;
}
.skip-to-main:focus,
.skip-to-main:focus-visible {
    top: 8px;
}

/* ==================== A11Y: FOCUS-VISIBLE GLOBAL ====================
   Outline cyan visível para usuários de teclado em TODOS os elementos
   interativos. `focus-visible` só ativa em navegação por teclado, não
   em cliques de mouse — não polui visualmente quem usa mouse. */
*:focus { outline: none; }
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--neuro-cyan, #06d6a0) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(6, 214, 160, 0.18) !important;
    border-radius: 4px;
}

/* ==================== A11Y: MIN TOUCH TARGET (WCAG 2.5.5) ====================
   Botões com tamanho mínimo de 44x44 (Apple HIG / Material 48dp).
   Skip explícito pra:
   - .option-btn / .tab-btn (têm tamanho próprio, em grids compactos)
   - .dock-btn / FABs / .neuro-* (já position:fixed, não tocar)
   - .no-touch-min (escape hatch geral)
   IMPORTANTE: NÃO setar position aqui — sobrescreve fixed/absolute dos FABs. */
@media (pointer: coarse) {
    button:not(.no-touch-min):not(.option-btn):not(.tab-btn):not(.dock-btn):not(.dock-region-arrow):not([class*="fab"]):not([class*="-close"]):not([class*="neuro-"]),
    a:not(.no-touch-min)[role="button"]:not([class*="fab"]) {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ==================== UX: MODAL OVERFLOW MOBILE ====================
   Em viewports baixos, modais grandes saíam da tela e o conteúdo ficava
   inacessível. Adiciona max-height + scroll interno + safe-area pra
   notch devices. */
@media (max-width: 767px), (max-height: 700px) {
    .modal,
    [class*="-modal"]:not(.mobile-controls):not(.dock-grid-panel),
    .difficulty-modal,
    .retention-modal,
    [class*="modal__content"] {
        max-height: calc(100vh - 80px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    }
}

/* ==================== EMPTY STATES ==================== */
.neuro-chat__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 20px;
    gap: 8px;
    opacity: 0.85;
}
.neuro-chat__empty-icon {
    font-size: 48px;
    margin-bottom: 4px;
    filter: drop-shadow(0 0 8px rgba(6, 214, 160, 0.3));
}
.neuro-chat__empty-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--neuro-text-primary, #e2e8f0);
    margin: 0;
}
.neuro-chat__empty-hint {
    font-size: 14px;
    line-height: 1.5;
    color: var(--neuro-text-secondary, #94a3b8);
    max-width: 280px;
    margin: 0;
}

/* Empty state genérico — usado em search, planner, dashboard */
.empty-state-generic {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 20px;
    color: var(--neuro-text-secondary, #94a3b8);
    gap: 8px;
}
.empty-state-generic__icon {
    font-size: 56px;
    opacity: 0.6;
    margin-bottom: 8px;
}
.empty-state-generic__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--neuro-text-primary, #e2e8f0);
    margin: 0;
}
.empty-state-generic__desc {
    font-size: 14px;
    line-height: 1.5;
    max-width: 320px;
    margin: 0;
}
.empty-state-generic__cta {
    margin-top: 16px;
    padding: 10px 24px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--neuro-cyan, #06d6a0), var(--neuro-blue, #0ea5e9));
    color: white;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.empty-state-generic__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(6, 214, 160, 0.3);
}

/* ==================== NEURO-FUTURISTA DESIGN SYSTEM v2 ==================== */

:root {
    /* Neuro Background Scale */
    --neuro-bg-deep: #080b14;
    --neuro-bg-base: #0c1021;
    --neuro-bg-raised: #111827;
    --neuro-bg-surface: #1a2035;
    --neuro-bg-hover: #243049;

    /* Neuro Accent Colors */
    --neuro-cyan: #06d6a0;
    --neuro-cyan-glow: rgba(6, 214, 160, 0.4);
    --neuro-blue: #0ea5e9;
    --neuro-blue-glow: rgba(14, 165, 233, 0.3);
    --neuro-green: #22c55e;
    --neuro-amber: #f59e0b;
    --neuro-red: #ef4444;
    --neuro-purple: #a78bfa;
    --neuro-gold: #fbbf24;

    /* Neuro Text — WCAG AA contrast em fundo escuro (#0f172a):
       primary #e2e8f0 = 14.6:1 ✅
       secondary #94a3b8 = 7.8:1 ✅
       muted #8190a3 = 5.1:1 ✅ (era #475569 = 2.92:1 ❌ — falhava AA)
       accent #06d6a0 = 7.4:1 ✅ */
    --neuro-text-primary: #e2e8f0;
    --neuro-text-secondary: #94a3b8;
    --neuro-text-muted: #8190a3;
    --neuro-text-accent: #06d6a0;

    /* Neuro Borders */
    --neuro-border: rgba(255, 255, 255, 0.06);
    --neuro-border-glow: rgba(6, 214, 160, 0.15);

    /* Functional vars (preserved) */
    --bg-body: var(--neuro-bg-base);
    --bg-container: var(--neuro-bg-deep);
    --highlight-color: var(--neuro-cyan);
    --highlight-opacity: 0.5;
    --blend-mode: multiply;
    --canvas-filter: none;
    --text-color: var(--neuro-text-primary);
    --pdf-scale: 1.0;
    --zoom-factor: 1;

    /* ═══════════════════════════════════════════════════════════════
       Z-INDEX LAYER ARCHITECTURE
       Hierarquia estrita para evitar sobreposicoes
       ═══════════════════════════════════════════════════════════════ */

    /* Layer 0: PDF Canvas (base) */
    --z-pdf-canvas: 1;
    --z-pdf-text-layer: 2;
    --z-pdf-annotation: 3;

    /* Layer 1: UI Base (10-49) */
    --z-ui-base: 10;
    --z-word-block: 15;
    --z-word-block-hover: 18;
    --z-word-block-active: 20;
    --z-selection-highlight: 25;
    --z-region-highlight: 30;

    /* Layer 2: Floating UI (50-99) */
    --z-floating-dock: 50;
    --z-fab-base: 55;
    --z-sniper-fab: 56;
    --z-auto-select-fab: 57;
    --z-smart-hover-fab: 58;
    --z-ruler: 60;
    --z-tooltip: 80;
    --z-dropdown: 90;

    /* Layer 3: Overlays & Menus (100-499) */
    --z-context-menu: 100;
    --z-more-menu: 150;
    --z-difficulty-modal: 200;
    --z-finetune-modal: 250;
    --z-profile-modal: 300;
    --z-help-modal: 350;
    --z-game-ui: 400;
    --z-result-modal: 450;

    /* Layer 4: Panels (9000-9099) */
    --z-panel-backdrop: 9000;
    --z-neurotutor-panel: 9001;
    --z-neurotutor-fab: 9050;

    /* Layer 5: Modals (10000-10499) */
    --z-modal-backdrop: 10000;
    --z-dashboard-modal: 10001;
    --z-login-modal: 10050;
    --z-settings-modal: 10100;

    /* Layer 6: Top Layer (11000+) */
    --z-toast: 11000;
    --z-alert-critical: 12000;
    --z-loading-global: 99999;
}

/* ==================== THEME OVERRIDES ==================== */

body.theme-dark {
    --neuro-bg-deep: #050810;
    --neuro-bg-base: #0a0e1a;
    --neuro-bg-raised: #0f1629;
    --neuro-bg-surface: #162038;
    --bg-body: var(--neuro-bg-base);
    --bg-container: #000000;
    --canvas-filter: invert(1) hue-rotate(180deg) contrast(0.9);
    /* Off-white em vez de branco puro: reduz halation/ghosting reportado por
       leitores disléxicos no dark mode. Research-backed (WCAG dark mode 2025). */
    --text-color: #e8e6e3;
    --blend-mode: difference;
    --highlight-color: #00ffff;
}

body.theme-sepia {
    --neuro-bg-deep: #0f0c08;
    --neuro-bg-base: #1a1611;
    --neuro-bg-raised: #2a2318;
    --neuro-bg-surface: #3a3120;
    --neuro-bg-hover: #4a4030;
    --neuro-cyan: #d4a574;
    --neuro-cyan-glow: rgba(212, 165, 116, 0.4);
    --neuro-blue: #c49a6c;
    --neuro-text-primary: #e8d5b7;
    --neuro-text-secondary: #b8a080;
    --neuro-border: rgba(212, 165, 116, 0.1);
    --neuro-border-glow: rgba(212, 165, 116, 0.15);
    --bg-body: #1a1611;
    --bg-container: #100d09;
    --highlight-color: #d4a574;
    --blend-mode: multiply;
    --canvas-filter: sepia(0.5) contrast(0.95) brightness(0.85);
    --text-color: #e8d5b7;
}

body.theme-light {
    --neuro-bg-deep: #f0f2f5;
    --neuro-bg-base: #f8f9fb;
    --neuro-bg-raised: #ffffff;
    --neuro-bg-surface: #eef0f4;
    --neuro-bg-hover: #e2e5eb;
    --neuro-cyan: #059669;
    --neuro-cyan-glow: rgba(5, 150, 105, 0.3);
    --neuro-blue: #0284c7;
    --neuro-text-primary: #1a1a2e;
    --neuro-text-secondary: #4a5568;
    --neuro-text-muted: #718096;
    --neuro-border: rgba(0, 0, 0, 0.08);
    --neuro-border-glow: rgba(5, 150, 105, 0.15);
    --bg-body: #f8f9fb;
    --bg-container: #525659;
    --highlight-color: #059669;
    --blend-mode: multiply;
    --canvas-filter: none;
    --text-color: #1a1a2e;
}

/* ==================== GLASSMORPHISM ==================== */
.glass {
    background: rgba(12, 16, 33, 0.75);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.dark .glass,
body.theme-dark .glass {
    background: rgba(8, 11, 20, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
body.theme-light .glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
body.theme-sepia .glass {
    background: rgba(26, 22, 17, 0.8);
    border: 1px solid rgba(212, 165, 116, 0.1);
}

/* Hide mobile in zen-bar on small screens */
@media (max-width: 640px) {
    .zen-hide-mobile {
        display: none !important;
    }
}

/* ==================== GAME JUICE: Dopamine Loops ==================== */

/* ==================== NEURO ATMOSPHERE ==================== */

/* Gradient mesh base — sutilmente vivo */
.neuro-atmosphere {
    background:
        radial-gradient(ellipse 80% 50% at 20% 80%, rgba(6, 214, 160, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 20%, rgba(14, 165, 233, 0.04) 0%, transparent 50%),
        linear-gradient(180deg, var(--neuro-bg-deep) 0%, var(--neuro-bg-base) 100%);
}

/* Noise texture overlay (sutil grain) */
.neuro-grain::before {
    content: "";
    position: fixed;
    inset: 0;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.5'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 99990;
}

/* ==================== NEURO ANIMATIONS ==================== */

@keyframes neuro-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--neuro-cyan-glow); }
    50% { box-shadow: 0 0 16px 4px var(--neuro-cyan-glow); }
}

@keyframes neuro-reveal {
    from { opacity: 0; transform: translateY(12px) scale(0.97); filter: blur(4px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes neuro-backdrop {
    from { opacity: 0; backdrop-filter: blur(0); }
    to { opacity: 1; backdrop-filter: blur(12px); }
}

@keyframes neuro-float-up {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    30% { opacity: 1; transform: translateY(-15px) scale(1.3); }
    100% { opacity: 0; transform: translateY(-50px) scale(1); }
}

/* Confetti Particles */
.confetti-particle {
    position: fixed;
    top: -10px;
    width: 10px;
    height: 10px;
    z-index: 99999;
    pointer-events: none;
    opacity: 1;
}

@keyframes confetti-fall {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg) scale(0.5);
        opacity: 0;
    }
}

/* Liquid XP Bar */
.xp-bar-fill {
    transition: width 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.xp-bar-fill.glow {
    filter: brightness(1.5) drop-shadow(0 0 10px var(--neuro-gold));
    animation: xp-pulse 0.5s ease;
}

@keyframes xp-pulse {
    0% { transform: scaleY(1); }
    50% { transform: scaleY(1.2); }
    100% { transform: scaleY(1); }
}

/* Welcome Bonus Modal */
.welcome-bonus-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 11, 20, 0.9);
    backdrop-filter: blur(12px);
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.welcome-bonus-modal {
    background: linear-gradient(135deg, var(--neuro-cyan), var(--neuro-blue));
    border-radius: 24px;
    padding: 40px;
    text-align: center;
    color: white;
    max-width: 400px;
    margin: 20px;
    box-shadow: 0 20px 60px rgba(6, 214, 160, 0.4), 0 0 80px rgba(6, 214, 160, 0.1);
    animation: bounceIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes bounceIn {
    0% { transform: scale(0.5); opacity: 0; }
    70% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Level Up Animation */
.level-up-badge {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: linear-gradient(135deg, var(--neuro-gold), var(--neuro-amber));
    color: var(--neuro-bg-deep);
    padding: 30px 50px;
    border-radius: 20px;
    font-size: 32px;
    font-weight: 900;
    font-family: 'Space Grotesk', sans-serif;
    z-index: 99999;
    box-shadow: 0 20px 60px rgba(251, 191, 36, 0.5), 0 0 80px rgba(251, 191, 36, 0.15);
    animation: levelUpPop 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes levelUpPop {
    0% { transform: translate(-50%, -50%) scale(0) rotate(-10deg); }
    30% { transform: translate(-50%, -50%) scale(1.2) rotate(5deg); }
    50% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
    70% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

/* ==================== NEURO ATMOSPHERE EFFECTS ==================== */
@keyframes neuro-glow-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

@keyframes neuro-scan-line {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100vh); }
}

@keyframes neuro-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* ==================== HOME DARK MODE ==================== */
body.home-dark {
    --bg-body: var(--neuro-bg-base);
    --text-color: var(--neuro-text-primary);
}
body.home-dark #library-view {
    background: linear-gradient(180deg, var(--neuro-bg-base) 0%, var(--neuro-bg-raised) 100%);
}
body.home-dark .book-card {
    background: var(--neuro-bg-raised);
    border: 1px solid var(--neuro-border);
}
body.home-dark .book-card h3 {
    color: var(--neuro-text-primary);
}
/* Bug fix D: filenames longos sem espaço (ex: "15_historia_do_rio_gr...")
   eram cortados no meio sem reticências. word-break + overflow-wrap
   permite quebra dentro da palavra; line-clamp-2 adiciona "..." no fim. */
.book-card h3 {
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}
body.home-dark .book-card span {
    color: var(--neuro-text-secondary);
}
body.home-dark #pdf-search {
    background: var(--neuro-bg-raised);
    border-color: var(--neuro-bg-surface);
    color: var(--neuro-text-primary);
}
body.home-dark #pdf-search::placeholder {
    color: var(--neuro-text-muted);
}
body.home-dark #home-theme-toggle {
    background: var(--neuro-bg-surface);
}
body.home-dark .text-gray-400,
body.home-dark .text-gray-500 {
    color: var(--neuro-text-secondary) !important;
}
body.home-dark footer,
body.home-dark .text-xs.text-gray-400 {
    color: var(--neuro-text-muted) !important;
}
body.home-dark a:hover {
    color: var(--neuro-cyan) !important;
}

/* ==================== BODY + VIEW SECTIONS ==================== */
/* iOS tap highlight: removido GLOBALMENTE pra evitar flash cinza no tap.
   Aplicar em html garante propagação por todos os elementos sem regression.
   `body` mantém pra defesa em profundidade. */
html, body, button, a, [role="button"], [tabindex] {
    -webkit-tap-highlight-color: transparent;
}
body {
    background-color: var(--bg-body);
    color: var(--text-color);
    overflow: hidden;
    user-select: none;
    transition: background 0.3s;
    font-family: 'Outfit', sans-serif;
    -webkit-tap-highlight-color: transparent;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 0;
}

.view-section {
    display: none;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
}
.view-section.active {
    display: flex;
    flex-direction: column;
    /* Animation Hierarchy: fade-in sutil ao entrar (biblioteca↔reader) — evita
       hard cut visual. 240ms ease-out: rápido o bastante pra não atrasar UX. */
    animation: viewSectionFadeIn 0.24s ease-out;
}
@keyframes viewSectionFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Heuristic Nielsen 1 (Visibility of system status): destaca o item da sidebar
   correspondente à view atual. Library = primeiro item ("Biblioteca").
   Reader-active state realça nada (volta direto via "Biblioteca" quando precisar).
   Pequeno tick verde + bg sutil sinalizam "você está aqui". */
.neuro-sidebar .neuro-sidebar__item[data-view="library"] {
    position: relative;
}
body:not(.reader-active) .neuro-sidebar__item[data-view="library"] {
    background: rgba(6, 214, 160, 0.06);
    border-left: 3px solid var(--neuro-cyan, #06d6a0);
    padding-left: calc(var(--space-md, 12px) - 3px);
}

@media (prefers-reduced-motion: reduce) {
    /* A11y: usuários sensíveis a movimento veem corte simples — sem fade nem slide */
    .view-section.active { animation: none; }
}

#library-view {
    overflow-y: auto;
    padding: 0;
    align-items: center;
    background: linear-gradient(180deg, var(--neuro-bg-deep) 0%, var(--neuro-bg-base) 100%);
}
#library-view.active { overflow-y: auto; }

/* Library Search Input */
#pdf-search {
    background: var(--neuro-bg-raised) !important;
    border-color: var(--neuro-border) !important;
    color: var(--neuro-text-primary) !important;
}
#pdf-search::placeholder {
    color: var(--neuro-text-muted) !important;
}
#pdf-search:focus {
    border-color: var(--neuro-cyan) !important;
    box-shadow: 0 0 0 2px var(--neuro-cyan-glow) !important;
}

#reader-view {
    overflow: hidden;
}
#reader-view.active {
    overflow: hidden;
}

/* ==================== LIBRARY VIEW ==================== */
.book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 20px;
    width: 100%;
    max-width: 900px;
    padding: 20px;
    padding-bottom: 100px;
    margin: 0 auto;
    justify-content: center;
}

/* Quando a biblioteca está vazia */
.book-grid.empty-state {
    display: block;
    max-width: none;
    padding: 0;
}
.empty-library-container {
    width: 100%;
    /* flex-column pra reordenar as seções por `order` (Seu material + Colar Texto
       em cima, Exemplos embaixo) sem mexer na ordem do HTML — pedido do owner. */
    display: flex;
    flex-direction: column;
}

/* Card de adicionar novo PDF */
.add-book-card {
    background: transparent;
    border: 2px dashed var(--neuro-border, rgba(6, 214, 160, 0.3));
    border-radius: 16px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 220px;
}
.add-book-card:hover {
    border-color: var(--neuro-cyan, #06d6a0);
    background: rgba(6, 214, 160, 0.05);
    transform: translateY(-3px);
}
.add-book-card .add-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(6, 214, 160, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}
.add-book-card:hover .add-icon {
    background: rgba(6, 214, 160, 0.2);
    transform: scale(1.1);
}
.add-book-card .add-icon svg {
    color: var(--neuro-cyan, #06d6a0);
}
.add-book-card span {
    color: var(--neuro-text-secondary, #94a3b8);
    font-size: 13px;
    font-weight: 500;
    text-align: center;
}

.book-card {
    background: var(--neuro-bg-raised);
    border-radius: 16px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 1px var(--neuro-border);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.3s;
    position: relative;
    border: 1px solid var(--neuro-border);
}
body.theme-dark .book-card {
    background: var(--neuro-bg-raised);
    color: var(--neuro-text-primary);
}
/* Hover só em devices com mouse real (`hover: hover`) — em mobile, :hover ficaria
   "stuck" após tap até next tap em outro lugar. Common UX bug em SPAs. */
@media (hover: hover) {
    .book-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 20px var(--neuro-cyan-glow);
        border-color: var(--neuro-border-glow);
    }
}
.book-card:active { transform: scale(0.98); }

.book-cover {
    width: 100px;
    height: 140px;
    background: linear-gradient(135deg, var(--neuro-cyan), var(--neuro-blue));
    border-radius: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    box-shadow: 0 4px 15px rgba(6, 214, 160, 0.2);
}

.book-progress-bar {
    width: 100%;
    height: 4px;
    background: var(--neuro-bg-surface);
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}
.book-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--neuro-cyan), var(--neuro-blue));
    width: 0%;
    transition: width 0.5s;
}

.delete-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(239, 68, 68, 0.15);
    color: var(--neuro-red);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 10;
    border: none;
    cursor: pointer;
}
/* Mobile touch target expansion: visual continua 28px (não pollui o card) mas
   touch area vira 44x44 via pseudo-element invisível. WCAG 2.5.8 AA. */
.delete-btn::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
}
/* Mobile: força sempre visível (sem hover em touch) pra user encontrar */
@media (hover: none) and (pointer: coarse) {
    .delete-btn { opacity: 0.5; }
    .delete-btn:active { opacity: 1; }
}
.book-card:hover .delete-btn, .book-card:active .delete-btn { opacity: 1; }

/* ==================== LIBRARY HEADER ==================== */
.library-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(6, 214, 160, 0.08), rgba(99, 102, 241, 0.05));
    border-bottom: 1px solid var(--neuro-border, rgba(148, 163, 184, 0.1));
}
.library-header__menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--neuro-border, rgba(148, 163, 184, 0.1));
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}
.library-header__menu:hover {
    background: rgba(6, 214, 160, 0.15);
    border-color: rgba(6, 214, 160, 0.3);
}
.library-header__menu-line {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--neuro-cyan, #06d6a0);
    border-radius: 2px;
    transition: all 0.2s;
}
.library-header__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 700;
    color: var(--neuro-text-primary, #f1f5f9);
    margin: 0;
}
.library-header__icon {
    font-size: 24px;
}
.library-header__spacer {
    flex: 1;
}

/* Light theme */
body.theme-light .library-header,
body.home-light .library-header {
    background: linear-gradient(135deg, rgba(6, 214, 160, 0.05), rgba(99, 102, 241, 0.03));
}
body.theme-light .library-header__title,
body.home-light .library-header__title {
    color: #1e293b;
}
body.theme-light .library-header__menu,
body.home-light .library-header__menu {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}
body.theme-light .library-header__menu-line,
body.home-light .library-header__menu-line {
    background: #0d9488;
}

/* Mobile */
@media (max-width: 640px) {
    .library-header {
        padding: 12px 16px;
        gap: 12px;
    }
    .library-header__title {
        font-size: 18px;
    }
    .library-header__menu {
        width: 36px;
        height: 36px;
        padding: 8px;
    }
}

/* ==================== NEUROTUTOR DROPDOWN (Library Home) ==================== */
.neurotutor-dropdown {
    position: relative;
    display: inline-block;
}
.neurotutor-dropdown__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.08));
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: var(--neuro-text-primary, #f1f5f9);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.neurotutor-dropdown__toggle:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(139, 92, 246, 0.15));
    border-color: rgba(139, 92, 246, 0.5);
    transform: translateY(-2px);
}
.neurotutor-dropdown__toggle svg {
    transition: transform 0.2s ease;
}
.neurotutor-dropdown__menu.open + .neurotutor-dropdown__toggle svg,
.neurotutor-dropdown:has(.neurotutor-dropdown__menu.open) .neurotutor-dropdown__toggle svg {
    transform: rotate(180deg);
}
.neurotutor-dropdown__menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 240px;
    background: var(--neuro-bg-raised, #1e293b);
    border: 1px solid var(--neuro-border, rgba(148, 163, 184, 0.1));
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 1px rgba(139, 92, 246, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 100;
    overflow: hidden;
}
.neurotutor-dropdown__menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.neurotutor-dropdown__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: transparent;
    border: none;
    color: var(--neuro-text-primary, #f1f5f9);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}
.neurotutor-dropdown__item:hover {
    background: rgba(139, 92, 246, 0.1);
}
.neurotutor-dropdown__item:first-child {
    border-bottom: 1px solid var(--neuro-border, rgba(148, 163, 184, 0.1));
}
.neurotutor-dropdown__icon {
    font-size: 20px;
    flex-shrink: 0;
}
.neurotutor-dropdown__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.neurotutor-dropdown__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--neuro-text-primary, #f1f5f9);
}
.neurotutor-dropdown__desc {
    font-size: 11px;
    color: var(--neuro-text-muted, #64748b);
}

/* Light theme adjustments */
body.theme-light .neurotutor-dropdown__toggle,
body.home-light .neurotutor-dropdown__toggle {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(139, 92, 246, 0.05));
    color: var(--neuro-text-primary, #1e293b);
}
body.theme-light .neurotutor-dropdown__menu,
body.home-light .neurotutor-dropdown__menu {
    background: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
body.theme-light .neurotutor-dropdown__item,
body.home-light .neurotutor-dropdown__item {
    color: #1e293b;
}
body.theme-light .neurotutor-dropdown__title,
body.home-light .neurotutor-dropdown__title {
    color: #1e293b;
}

/* Mobile responsive */
@media (max-width: 480px) {
    .neurotutor-dropdown__toggle {
        padding: 8px 12px;
        font-size: 13px;
    }
    .neurotutor-dropdown__menu {
        min-width: 220px;
        right: 0;
        left: auto;
    }
}

/* ==================== HOME LOGIN BUTTON ==================== */
.home-login-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 10px rgba(139, 92, 246, 0.3);
}
.home-login-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}
.home-login-btn.logged-in {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 2px 10px rgba(34, 197, 94, 0.3);
}
.home-login-btn.logged-in:hover {
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
}

/* Light theme */
body.home-light .home-login-btn {
    box-shadow: 0 2px 10px rgba(139, 92, 246, 0.2);
}

/* Mobile */
@media (max-width: 480px) {
    .home-login-btn span {
        display: none;
    }
    .home-login-btn {
        padding: 8px 10px;
    }
}

/* ==================== PDF CONTAINER + WRAPPER + PAGE ==================== */
#pdf-container {
    position: relative;
    background-color: var(--bg-container);
    flex: 1;
    overflow: scroll !important;
    display: block;
    padding: 10px;
    padding-bottom: 150px;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    /* `pan-x pan-y` SEM `pinch-zoom` — o pinch é tratado pelo nosso JS
       em mobile-gestures.js. Permitir pinch nativo do browser conflita
       com o JS e o usuário vê a página "pular/mudar" no zoom. */
    touch-action: pan-x pan-y;
    overscroll-behavior: contain;
    min-height: 0;
    height: 100%;
}

#pdf-wrapper {
    transform-origin: top left;
    /* transition removida — causava layout shift durante zoom, fazendo a página "pular" */
    padding-bottom: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: fit-content;
    width: max-content;
    margin: 0 auto;
}

.page-wrapper {
    position: relative;
    margin-bottom: 20px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6), 0 0 1px rgba(6, 214, 160, 0.1);
    /* Background dark durante loading (antes do canvas pintar) — evita flash branco
       que destoa do tema. O canvas recebe background branco para o PDF renderizar
       sobre fundo branco corretamente. */
    background: var(--neuro-bg-surface, #121624);
    flex-shrink: 0;
}

.page-wrapper canvas {
    background: white;
}

/* Placeholder for lazy-loaded pages */
.page-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 800px;
    background: linear-gradient(135deg, var(--neuro-bg-raised) 0%, var(--neuro-bg-surface) 100%);
    border: 2px dashed var(--neuro-bg-hover);
    animation: placeholder-pulse 2s infinite;
}
.page-placeholder-spinner {
    width: 28px;
    height: 28px;
    margin: 0 auto;
    border: 3px solid rgba(6,214,160,0.18);
    border-top-color: var(--neuro-cyan, #06d6a0);
    border-radius: 50%;
    animation: page-placeholder-spin 0.8s linear infinite;
}
@keyframes page-placeholder-spin {
    to { transform: rotate(360deg); }
}
/* Reduced motion: spinner travado é confuso — esconde, deixa só o texto */
@media (prefers-reduced-motion: reduce) {
    .page-placeholder-spinner { display: none; }
}
@keyframes placeholder-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.page-wrapper canvas {
    filter: var(--canvas-filter);
    transition: filter 0.3s;
    display: block;
    width: 100%;
    height: auto;
}
.text-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    pointer-events: none;
}

/* PDF.js TextLayer */
.pdfjs-textlayer {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    opacity: 0;
    line-height: 1.0;
    pointer-events: none;
}
.pdfjs-textlayer > span,
.pdfjs-textlayer > div {
    color: transparent;
    position: absolute;
    white-space: pre;
    overflow: visible;
    pointer-events: none;
    transform-origin: 0% 0%;
}

/* ==================== WORD BLOCKS ==================== */
.word-block {
    position: absolute;
    border-radius: 4px;
    box-sizing: border-box;
    pointer-events: auto;
    padding: 0;
    margin: 0;
    background: transparent;
    color: transparent;
    /* font-size e line-height definidos inline pelo renderer (proporcionais à altura)
       para que o texto invisível preencha a área selecionável inteira */
    font-size: 10px; /* fallback caso inline não exista */
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    user-select: text;
    -webkit-user-select: text;
    cursor: text;
    /* iOS: suprime menu nativo (Copy/Look Up/Translate) ao long-press.
       Nossa action-bar substitui — sem isso há conflict UX (dois menus). */
    -webkit-touch-callout: none;
    /* Mobile: remove 300ms delay no tap (iOS Safari double-tap-to-zoom).
       Auto-mode tap em parágrafo precisa ser instantâneo. */
    touch-action: manipulation;
}
/* Hover sutil quando não está em play — indica que é selecionável */
body:not(.playing):not(.select-mode) .word-block:hover {
    background: rgba(6, 214, 160, 0.08);
}
/* Seleção nativa (::selection) — agora visível porque o texto preenche o bloco */
.word-block::selection,
.word-block *::selection {
    background: rgba(6, 214, 160, 0.40);
    color: transparent;
}
/* Seleção visível para clipboard/reflow words */
.word-block.reflow-word::selection {
    background: rgba(6, 214, 160, 0.4);
    color: var(--neuro-text-primary, #e2e8f0);
}
/* Highlight visual para word-blocks selecionados via JS (reforça ::selection) */
.word-block.wb-selected {
    background: rgba(6, 214, 160, 0.30) !important;
    border-radius: 3px;
    box-shadow: 0 0 0 1.5px rgba(6, 214, 160, 0.35);
}
.word-block.reflow-word.wb-selected {
    background: rgba(6, 214, 160, 0.25) !important;
}

/* Desabilitar seleção durante play e select-mode */
body.playing .word-block,
body.select-mode .word-block {
    user-select: none;
    -webkit-user-select: none;
}

/* Clipboard/Reflow word mode */
.word-block.reflow-word {
    position: relative !important;
    display: inline-block !important;
    padding: 4px 8px !important;
    margin: 0 !important;
    font-size: inherit !important;
    line-height: 1.5 !important;
    color: var(--neuro-text-primary) !important;
    background: transparent !important;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s;
    font-family: 'Outfit', sans-serif;
}

.word-block.reflow-word:hover {
    background: rgba(6, 214, 160, 0.1) !important;
}

.word-block.reflow-word.active::after {
    inset: 0;
}

/* ==================== WORD HIGHLIGHT OVERLAY (::after pseudo) ==================== */
.word-block::after {
    content: "";
    position: absolute;
    inset: calc(1px / var(--zoom-factor, 1)) calc(1.5px / var(--zoom-factor, 1));
    border-radius: 3px;
    background: transparent;
    pointer-events: none;
}

.word-block.in-region { cursor: pointer; }
.word-block.in-region:hover::after { background-color: rgba(6, 214, 160, 0.15); }
.word-block.in-region:hover { z-index: 50; }

/* ── Padrão: Modo Sublinhado (melhor legibilidade) ── */
.word-block.active::after {
    inset: auto 0 0 0;
    height: 3px;
    background: var(--highlight-color);
    opacity: 0.9;
    mix-blend-mode: normal;
    box-shadow: 0 1px 6px var(--highlight-color);
    border-radius: 0;
}
.word-block.active { z-index: 30; outline: none; }

/* ── Modo Destaque Completo (opcional via toggle) ── */
body.highlight-full .word-block.active::after {
    inset: calc(1px / var(--zoom-factor, 1)) calc(1.5px / var(--zoom-factor, 1));
    height: auto;
    background-color: var(--highlight-color);
    opacity: var(--highlight-opacity);
    mix-blend-mode: var(--blend-mode);
    box-shadow: 0 0 12px var(--highlight-color), 0 0 4px var(--highlight-color);
    border-radius: 3px;
}
body.highlight-full.theme-dark .word-block.active::after { mix-blend-mode: difference; }

.word-block.outside-region { opacity: 0.15; }

/* Word highlight feedback */
.word-highlight {
    position: absolute;
    background-color: rgba(6, 214, 160, 0.35);
    border-radius: 3px;
    pointer-events: none;
    z-index: 18;
    transition: all 0.2s ease;
}

.word-highlight.preview {
    background-color: rgba(14, 165, 233, 0.25);
    border: 1px dashed rgba(14, 165, 233, 0.5);
}

/* PERFORMANCE: Disable words during selection */
body.select-mode .word-block {
    pointer-events: none !important;
}

/* ==================== READING REGIONS ==================== */
.reading-region {
    position: absolute;
    border: calc(3px / var(--zoom-factor, 1)) solid var(--neuro-cyan);
    background: rgba(6, 214, 160, 0.08);
    z-index: 25;
    pointer-events: none;
    border-radius: 8px;
}
.reading-region.editing {
    pointer-events: auto;
    cursor: move;
    border-style: dashed;
    background: rgba(6, 214, 160, 0.2);
    z-index: 100;
}
.reading-region .region-label {
    position: absolute;
    top: -32px;
    left: 0;
    background: var(--neuro-cyan);
    color: var(--neuro-bg-deep);
    padding: 4px 12px;
    border-radius: 6px 6px 0 0;
    font-size: 12px;
    font-weight: bold;
    font-family: 'Space Grotesk', sans-serif;
    transform: scale(calc(1 / var(--zoom-factor, 1)));
    transform-origin: bottom left;
    z-index: 110;
    pointer-events: auto;
}
.reading-region .region-controls {
    position: absolute;
    top: -36px;
    right: 0;
    display: flex;
    gap: 4px;
    transform: scale(calc(1 / var(--zoom-factor, 1)));
    transform-origin: bottom right;
    z-index: 110;
    pointer-events: auto !important;
    flex-wrap: wrap;
    max-width: 100%;
}

/* Mobile: hide minigames in region controls */
@media (max-width: 640px) {
    .reading-region .region-controls {
        top: -32px;
        gap: 2px;
    }
    .reading-region .region-controls .region-quest {
        display: none;
    }
    .reading-region .region-play,
    .reading-region .region-restart,
    .reading-region .region-ai,
    .reading-region .region-edit,
    .reading-region .region-delete {
        width: 28px;
        height: 28px;
    }
}

/* Region Play button */
.reading-region .region-play {
    background: var(--neuro-green);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto !important;
    z-index: 111;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.15s ease;
    border: none;
}
.reading-region .region-play:hover { background: #16a34a; transform: scale(1.1); }
.reading-region .region-play:active { transform: scale(0.95); }

/* Region Restart button */
.reading-region .region-restart {
    background: var(--neuro-blue, #3b82f6);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto !important;
    z-index: 111;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.15s ease;
    border: none;
}
.reading-region .region-restart:hover { background: #2563eb; transform: scale(1.1); }
.reading-region .region-restart:active { transform: scale(0.95); }

/* Region AI button - Perguntar à IA */
.reading-region .region-ai {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto !important;
    z-index: 111;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
    transition: all 0.15s ease;
    border: none;
}
.reading-region .region-ai:hover {
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.5);
}
.reading-region .region-ai:active { transform: scale(0.95); }

/* Playing state */
.reading-region.playing {
    border-color: var(--neuro-green) !important;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.5), inset 0 0 30px rgba(34, 197, 94, 0.1) !important;
    animation: region-pulse 1.5s ease-in-out infinite;
}
.reading-region.playing .region-label {
    background: var(--neuro-green) !important;
}
.reading-region.playing .region-play {
    background: #eab308;
    animation: play-button-pulse 0.8s ease-in-out infinite;
}
@keyframes region-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.5), inset 0 0 30px rgba(34, 197, 94, 0.1); }
    50% { box-shadow: 0 0 35px rgba(34, 197, 94, 0.7), inset 0 0 40px rgba(34, 197, 94, 0.15); }
}
@keyframes play-button-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.reading-region .region-edit {
    background: var(--neuro-amber);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto !important;
    z-index: 111;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: none;
}
.reading-region .region-edit:hover { background: #d97706; transform: scale(1.1); }
.reading-region .region-edit:active { transform: scale(0.95); }

.reading-region .region-delete {
    background: var(--neuro-red);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto !important;
    z-index: 111;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: none;
}
.reading-region .region-delete:hover { background: #dc2626; transform: scale(1.1); }
.reading-region .region-delete:active { transform: scale(0.95); }

/* Resize Handles */
.reading-region .resize-handle {
    position: absolute;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--neuro-cyan), var(--neuro-blue));
    border: 3px solid white;
    border-radius: 50%;
    pointer-events: auto;
    cursor: pointer;
    display: none;
    z-index: 200;
    transform: scale(calc(1 / var(--zoom-factor, 1)));
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), 0 0 0 3px var(--neuro-cyan-glow);
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.reading-region .resize-handle:hover {
    background: linear-gradient(135deg, var(--neuro-blue), #0369a1);
    transform: scale(calc(1.2 / var(--zoom-factor, 1)));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(6, 214, 160, 0.3);
}
.reading-region .resize-handle:active {
    background: linear-gradient(135deg, #0369a1, #075985);
}
.reading-region.editing .resize-handle {
    display: block !important;
    animation: pulse-handle 1.5s ease-in-out infinite;
}
@keyframes pulse-handle {
    0%, 100% { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(6, 214, 160, 0.3); }
    50% { box-shadow: 0 2px 16px rgba(6, 214, 160, 0.6), 0 0 0 4px rgba(6, 214, 160, 0.2); }
}
.reading-region .resize-handle.top-left { top: -14px; left: -14px; cursor: nwse-resize; transform-origin: bottom right; }
.reading-region .resize-handle.top-right { top: -14px; right: -14px; cursor: nesw-resize; transform-origin: bottom left; }
.reading-region .resize-handle.bottom-left { bottom: -14px; left: -14px; cursor: nesw-resize; transform-origin: top right; }
.reading-region .resize-handle.bottom-right { bottom: -14px; right: -14px; cursor: nwse-resize; transform-origin: top left; }

/* ==================== CLIPBOARD MODE ==================== */
body.mode-clipboard.theme-dark {
    background: var(--neuro-bg-base) !important;
}
body.mode-clipboard.theme-dark #clipboard-section {
    background: var(--neuro-bg-base) !important;
}
body.mode-clipboard.theme-dark #clipboard-section * {
    border-color: var(--neuro-border) !important;
}
body.mode-clipboard.theme-dark .clipboard-reader-container {
    background: var(--neuro-bg-base) !important;
    border: none !important;
}

body.mode-clipboard.theme-sepia {
    background: #1a1611 !important;
}
body.mode-clipboard.theme-sepia #clipboard-section {
    background: #1a1611 !important;
}

body.mode-clipboard.theme-light {
    background: var(--neuro-bg-base) !important;
}
body.mode-clipboard.theme-light #clipboard-section {
    background: var(--neuro-bg-base) !important;
}

/* Hide PDF controls in clipboard mode */
body.mode-clipboard .desktop-toolbar {
    display: none !important;
}
body.mode-clipboard .mobile-controls {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Show zen controls instead of mobile-controls */
body.mode-clipboard .clipboard-zen-controls {
    display: flex !important;
}

body.mode-clipboard #btn-select,
body.mode-clipboard [onclick*="toggleSelectMode"],
body.mode-clipboard [onclick*="autoSelectText"] {
    display: none !important;
}

/* ==================== CLIPBOARD ZEN BAR ==================== */
.clipboard-zen-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(12, 16, 33, 0.92);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border: 1px solid var(--neuro-border);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(6, 214, 160, 0.05);
    border-radius: 9999px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 100;
}

body.theme-dark .clipboard-zen-bar {
    background: rgba(8, 11, 20, 0.95);
    border-color: var(--neuro-border);
}

body.theme-sepia .clipboard-zen-bar {
    background: rgba(26, 22, 17, 0.95);
    border-color: rgba(212, 165, 116, 0.15);
}

/* Zen bar buttons - Fitts' Law */
.clipboard-zen-bar .zen-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    font-family: 'Outfit', sans-serif;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--neuro-bg-surface);
    color: var(--neuro-text-primary);
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

.clipboard-zen-bar .zen-btn:hover {
    background: var(--neuro-bg-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Mobile: com o acesso rápido (régua/velocidade/fonte) a barra pode passar da
   largura da tela → rola na horizontal em vez de vazar pra fora. */
@media (max-width: 768px) {
    .clipboard-zen-bar {
        max-width: calc(100vw - 16px);
        overflow-x: auto;
        overflow-y: visible;
        justify-content: flex-start;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .clipboard-zen-bar::-webkit-scrollbar { display: none; }
    .clipboard-zen-bar .zen-btn { flex-shrink: 0; }
}

.clipboard-zen-bar .zen-btn:focus-visible {
    outline: 2px solid var(--neuro-cyan);
    outline-offset: 2px;
}

body.theme-dark .clipboard-zen-bar .zen-btn {
    background: var(--neuro-bg-surface);
    color: var(--neuro-text-primary);
}

body.theme-dark .clipboard-zen-bar .zen-btn:hover {
    background: var(--neuro-bg-hover);
}

/* Play button special */
.clipboard-zen-bar .play-btn {
    background: linear-gradient(135deg, var(--neuro-cyan), var(--neuro-green)) !important;
    color: var(--neuro-bg-deep) !important;
    padding: 12px 20px;
    min-width: 100px;
    font-weight: 700;
}

.clipboard-zen-bar .play-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px var(--neuro-cyan-glow);
}

.clipboard-zen-bar .play-btn.playing {
    background: linear-gradient(135deg, var(--neuro-amber), #d97706) !important;
}

/* Phase navigation buttons */
.clipboard-zen-bar .zen-btn-nav {
    min-width: auto;
    padding: 10px 16px;
}

/* Dividers */
.clipboard-zen-bar .zen-divider {
    height: 24px;
    width: 1px;
    background: var(--neuro-border);
    flex-shrink: 0;
}

body.theme-dark .clipboard-zen-bar .zen-divider {
    background: var(--neuro-border);
}

/* WPM Display */
.clipboard-zen-bar .zen-wpm {
    font-weight: 700;
    min-width: 70px;
    text-align: center;
    color: var(--neuro-text-primary);
    font-size: 13px;
    font-family: 'JetBrains Mono', monospace;
}

body.theme-dark .clipboard-zen-bar .zen-wpm {
    color: var(--neuro-text-primary);
}

/* Phase indicator */
.clipboard-zen-bar .zen-phase-indicator {
    font-size: 13px;
    color: var(--neuro-text-secondary);
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
    white-space: nowrap;
    padding: 6px 12px;
    background: var(--neuro-bg-surface);
    border-radius: 20px;
}

body.theme-dark .clipboard-zen-bar .zen-phase-indicator {
    background: var(--neuro-bg-surface);
    color: var(--neuro-text-secondary);
}

/* Mobile responsive - Zen Bar compact */
@media (max-width: 768px) {
    .clipboard-zen-bar {
        bottom: 12px;
        left: 12px;
        right: 12px;
        transform: none;
        padding: 8px 12px;
        gap: 6px;
        border-radius: 16px;
        justify-content: center;
        max-width: calc(100vw - 24px);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }

    .clipboard-zen-bar .zen-btn {
        min-width: 40px;
        min-height: 40px;
        padding: 8px;
        flex-shrink: 0;
    }

    .clipboard-zen-bar .play-btn {
        padding: 10px 14px;
        min-width: 60px;
        flex-shrink: 0;
    }

    .clipboard-zen-bar .zen-phase-indicator {
        font-size: 11px;
        padding: 4px 8px;
        flex-shrink: 0;
    }

    .clipboard-zen-bar .zen-divider {
        height: 20px;
        flex-shrink: 0;
    }

    /* Hide less important buttons on overflow */
    .clipboard-zen-bar .zen-btn[title="Diminuir fonte"],
    .clipboard-zen-bar .zen-btn[title="Aumentar fonte"] {
        display: none;
    }

    /* Mobile wrapper */
    .clipboard-zen-bar .zen-controls-wrapper {
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Zen controls wrapper */
.clipboard-zen-bar .zen-controls-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Eye button always visible */
.clipboard-zen-bar .zen-eye-btn {
    background: rgba(6, 214, 160, 0.15) !important;
    color: var(--neuro-cyan) !important;
    flex-shrink: 0;
}

.clipboard-zen-bar .zen-eye-btn:hover {
    background: rgba(6, 214, 160, 0.25) !important;
}

body.theme-dark .clipboard-zen-bar .zen-eye-btn {
    background: rgba(6, 214, 160, 0.12) !important;
    color: var(--neuro-cyan) !important;
}

/* When zen-bar is hidden */
.clipboard-zen-bar.zen-bar-hidden {
    padding: 8px 12px;
}

.clipboard-zen-bar.zen-bar-hidden .zen-controls-wrapper {
    display: none;
}

/* Pure text mode */
body.pure-text-mode .word-block {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 2px !important;
}

body.pure-text-mode .word-block.active {
    background: rgba(6, 214, 160, 0.15) !important;
    text-decoration: underline;
    text-decoration-color: var(--neuro-cyan);
}

body.pure-text-mode .reflow-container {
    line-height: 1.8;
}

/* Clipboard mode — highlight com alto contraste */
body.mode-clipboard .word-block.active {
    color: var(--highlight-color, #06d6a0) !important;
    text-shadow: 0 0 8px rgba(6, 214, 160, 0.4);
    border-bottom: 2px solid var(--highlight-color, #06d6a0);
}
body.mode-clipboard .word-block.active::after {
    background-color: transparent !important;
    box-shadow: none !important;
    opacity: 0 !important;
}
body.mode-clipboard .word-block.active.rainbow-highlight {
    color: currentColor !important;
    text-shadow: 0 0 8px currentColor;
    border-bottom-color: currentColor;
}
body.mode-clipboard .word-block.active.rainbow-highlight::after {
    opacity: 0 !important;
}

/* ==================== CLIPBOARD READER CONTAINER ==================== */
.clipboard-reader-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 24px calc(140px + env(safe-area-inset-bottom)) 24px;
    background: var(--bg-body);
    min-height: 100vh;
    overflow-y: auto;
}

body.theme-light .clipboard-reader-container {
    background: var(--neuro-bg-base);
}

body.theme-dark .clipboard-reader-container {
    background: var(--neuro-bg-base);
}

body.theme-sepia .clipboard-reader-container {
    background: #1a1611;
}

/* ==================== REFLOW CONTAINER ==================== */
.reflow-container {
    background: var(--neuro-bg-raised);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 1px var(--neuro-border);
    line-height: 2;
    color: var(--neuro-text-primary);
    border: 1px solid var(--neuro-border);
}

body.theme-dark .reflow-container {
    background: var(--neuro-bg-raised);
    color: var(--neuro-text-primary);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

body.theme-sepia .reflow-container {
    background: #2a2318;
    color: #e8d5b7;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Words wrapper */
.words-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px 6px;
}

/* Words in clipboard mode */
.word-block.reflow-word {
    display: inline-block;
    padding: 4px 2px;
    border-radius: 4px;
    transition: color 0.15s ease, background 0.15s ease, text-shadow 0.15s ease, border-color 0.15s ease;
    position: relative;
    cursor: default;
    border-bottom: 2px solid transparent;  /* Reserva espaço — evita layout shift ao ativar */
}

body.theme-dark .word-block.reflow-word {
    color: var(--neuro-text-primary);
}

body.theme-sepia .word-block.reflow-word {
    color: #e8d5b7;
}

/* ==================== SPEED SETUP MODAL ==================== */
.speed-setup-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: linear-gradient(135deg, var(--neuro-bg-deep) 0%, #0c1a3a 50%, #1a0c2e 100%);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.speed-setup-overlay.active { display: flex; }

.speed-card {
    background: var(--neuro-bg-raised);
    border-radius: 24px;
    padding: 30px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 60px rgba(6, 214, 160, 0.08);
    border: 1px solid var(--neuro-border);
    color: var(--neuro-text-primary);
}

.speed-option {
    width: 100%;
    padding: 16px;
    margin: 8px 0;
    border: 3px solid var(--neuro-bg-surface);
    border-radius: 16px;
    background: var(--neuro-bg-surface);
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--neuro-text-primary);
}
.speed-option:hover {
    border-color: var(--neuro-cyan);
    background: rgba(6, 214, 160, 0.08);
}
.speed-option:active { transform: scale(0.98); }
.speed-option.selected {
    border-color: var(--neuro-cyan);
    background: rgba(6, 214, 160, 0.08);
    box-shadow: 0 0 20px rgba(6, 214, 160, 0.1);
}

.speed-option-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.speed-option-text h4 {
    font-weight: bold;
    color: var(--neuro-text-primary);
    margin-bottom: 2px;
    font-family: 'Space Grotesk', sans-serif;
}
.speed-option-text p {
    font-size: 12px;
    color: var(--neuro-text-secondary);
}

/* Mobile Keyboard fix: scroll-margin-top garante que ao focar inputs em modais,
   browser mantém o input visível acima do keyboard que aparece. Funciona com
   scrollIntoView automático que browsers modernos fazem ao focar input. */
@media (max-width: 768px) {
    input, textarea, select {
        scroll-margin-top: 100px;
        scroll-margin-bottom: 100px;
    }
}

/* Drag-Drop visual feedback: empty library upload zone destaca quando user
   está arrastando arquivo sobre a página. Reforço visual de "solte aqui". */
.upload-zone.drag-over {
    background: rgba(6, 214, 160, 0.18) !important;
    border-color: rgba(6, 214, 160, 0.85) !important;
    border-style: solid !important;
    transform: scale(1.01);
    transition: all 0.15s ease-out;
}
@media (prefers-reduced-motion: reduce) {
    .upload-zone.drag-over { transform: none; }
}

/* Highlight da opção recomendada — guia escolha (Steve Krug "tornar óbvio") */
.speed-option--recommended {
    border-color: rgba(6, 214, 160, 0.55);
    background: linear-gradient(135deg, rgba(6, 214, 160, 0.08) 0%, rgba(6, 182, 212, 0.05) 100%);
    box-shadow: 0 0 24px rgba(6, 214, 160, 0.18);
}
.speed-option--recommended:hover {
    border-color: var(--neuro-cyan);
    background: linear-gradient(135deg, rgba(6, 214, 160, 0.14) 0%, rgba(6, 182, 212, 0.10) 100%);
}
.speed-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    color: #022c22;
    background: linear-gradient(135deg, #06d6a0 0%, #06b6d4 100%);
    border-radius: 999px;
    vertical-align: middle;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ==================== TUTORIAL INTERATIVO ==================== */
.tutorial-overlay {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: rgba(8, 11, 20, 0.9);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.tutorial-overlay.active { display: flex; }

.tutorial-card {
    background: var(--neuro-bg-raised);
    border-radius: 24px;
    padding: 30px;
    max-width: 450px;
    width: 100%;
    text-align: center;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    position: relative;
    border: 1px solid var(--neuro-border);
    color: var(--neuro-text-primary);
}

.tutorial-step { display: none; }
.tutorial-step.active { display: block; }

.tutorial-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
}

.tutorial-progress {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 20px 0;
}
.tutorial-progress-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--neuro-bg-surface);
    transition: all 0.3s;
}
.tutorial-progress-dot.active {
    background: var(--neuro-cyan);
    width: 30px;
    border-radius: 5px;
}
.tutorial-progress-dot.done {
    background: var(--neuro-green);
}

.tutorial-demo {
    background: var(--neuro-bg-surface);
    border-radius: 16px;
    padding: 20px;
    margin: 15px 0;
    position: relative;
    overflow: hidden;
}

.tutorial-demo-animation {
    animation: pulse-demo 2s infinite;
}

@keyframes pulse-demo {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
}

.tutorial-highlight {
    position: absolute;
    border: 3px solid var(--neuro-cyan);
    border-radius: 12px;
    background: rgba(6, 214, 160, 0.1);
    pointer-events: none;
    z-index: 401;
    animation: highlight-pulse 1.5s infinite;
}

@keyframes highlight-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--neuro-cyan-glow); }
    50% { box-shadow: 0 0 0 10px rgba(6, 214, 160, 0); }
}

/* ==================== HELP BUTTON ==================== */
.help-btn {
    position: fixed;
    bottom: 100px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--neuro-cyan), var(--neuro-blue));
    color: var(--neuro-bg-deep);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    font-family: 'Space Grotesk', sans-serif;
    box-shadow: 0 4px 15px var(--neuro-cyan-glow);
    cursor: pointer;
    z-index: 55;
    transition: transform 0.2s;
    border: none;
}
.help-btn:hover { transform: scale(1.1); }
.help-btn:active { transform: scale(0.95); }
.help-btn:focus-visible {
    /* Keyboard nav: outline cyan offset pra teclistas */
    outline: 3px solid var(--neuro-cyan, #06d6a0);
    outline-offset: 3px;
}

/* Mobile: help-btn on left side */
@media (max-width: 768px) {
    .help-btn {
        bottom: 100px;
        left: 16px;
        right: auto;
        width: 44px;
        height: 44px;
        font-size: 20px;
    }
}
@media (max-height: 500px) and (orientation: landscape) {
    .help-btn {
        bottom: 80px;
        left: 16px;
        right: auto;
        width: 40px;
        height: 40px;
    }
}

/* ==================== SELECT MODE ==================== */
body.select-mode #pdf-container { cursor: crosshair; }
body.select-mode .page-wrapper { cursor: crosshair; }

#selection-box {
    position: fixed;
    border: 3px dashed var(--neuro-cyan);
    background: rgba(6, 214, 160, 0.15);
    z-index: 9999;
    display: none;
    pointer-events: none;
    border-radius: 8px;
}

/* Selection point marker */
.selection-point {
    position: absolute;
    width: 50px;
    height: 50px;
    background: rgba(6, 214, 160, 0.9);
    border: 4px solid white;
    border-radius: 50%;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neuro-bg-deep);
    font-weight: bold;
    font-size: 18px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(6, 214, 160, 0.2);
    transform: translate(-50%, -50%) scale(calc(1 / var(--zoom-factor, 1)));
    pointer-events: none;
    animation: pulse-point 1s infinite;
}

@keyframes pulse-point {
    0%, 100% { transform: translate(-50%, -50%) scale(calc(1 / var(--zoom-factor, 1))); }
    50% { transform: translate(-50%, -50%) scale(calc(1.1 / var(--zoom-factor, 1))); }
}

/* Selection mode bar (Sniper) */
.selection-mode-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #ea580c, #dc2626);
    color: white;
    padding: 12px 16px;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    z-index: 200;
    box-shadow: 0 4px 20px rgba(234, 88, 12, 0.5);
    font-family: 'Outfit', sans-serif;
}
.selection-mode-bar.active { display: flex; }

/* Mobile: sniper bar at bottom */
@media (max-width: 768px) {
    .selection-mode-bar {
        top: auto;
        bottom: 0;
        padding: 12px 12px 28px 12px;
        flex-direction: column;
        gap: 8px;
        border-radius: 20px 20px 0 0;
    }
    .selection-mode-bar .selection-info {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
}
body.force-mobile .selection-mode-bar {
    top: auto;
    bottom: 0;
    padding: 12px 12px 28px 12px;
    flex-direction: column;
    gap: 8px;
    border-radius: 20px 20px 0 0;
}

.selection-mode-bar .selection-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
}
.selection-mode-bar .selection-step {
    background: rgba(255, 255, 255, 0.25);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
}
.selection-mode-bar button {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
}
.selection-mode-bar button:hover {
    background: rgba(255, 255, 255, 0.3);
}
.selection-mode-bar .cancel-btn {
    background: rgba(0, 0, 0, 0.3);
}
.selection-mode-bar .cancel-btn:hover {
    background: rgba(0, 0, 0, 0.5);
}

/* Hide mobile controls when Sniper active */
body.select-mode .mobile-controls {
    display: none !important;
}

/* ==================== SELECT INSTRUCTION ==================== */
#select-instruction {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--neuro-bg-raised);
    color: var(--neuro-text-primary);
    padding: 15px 24px;
    border-radius: 16px;
    font-size: 14px;
    z-index: 200;
    display: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 20px rgba(6, 214, 160, 0.05);
    text-align: center;
    max-width: 90%;
    line-height: 1.5;
    border: 1px solid var(--neuro-border);
    font-family: 'Outfit', sans-serif;
}
body.select-mode #select-instruction { display: block; }

/* ==================== READING GUIDE (RULER) - NEURO CYAN STYLE ==================== */
#reading-guide {
    position: fixed;
    left: 0;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    height: var(--ruler-height, 60px);
    /* Overlay escuro movido para seletores condicionais (playing / dragging) */
    box-shadow: none;
    border-top: 3px solid var(--ruler-border-color, var(--neuro-cyan, #06d6a0));
    border-bottom: 3px solid var(--ruler-border-color, var(--neuro-cyan, #06d6a0));
    z-index: 25;
    opacity: 0;
    visibility: hidden;
    display: none;
    transition: opacity 0.3s, top 0.25s ease-out;
    cursor: ns-resize;
    pointer-events: none;
}

/* "Puxador" da régua — alça pendurada na borda de baixo (sobre a máscara), pra
   arrastar sem tapar a palavra. pointer-events:auto (a régua em si é none). */
.ruler-handle {
    position: absolute;
    left: 50%;
    bottom: -16px;
    transform: translateX(-50%);
    width: 76px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ruler-border-color, var(--neuro-cyan, #06d6a0));
    border-radius: 0 0 11px 11px;
    pointer-events: auto;
    cursor: ns-resize;
    touch-action: none;                 /* não deixa o arrasto virar scroll */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
    z-index: 26;
}
.ruler-handle__grip {
    width: 30px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.95);
}
.ruler-handle:active { filter: brightness(1.12); }
/* Puxador da régua DESATIVADO por enquanto (pedido do owner): régua estática, o
   usuário rola o documento por baixo. Reativar = remover esta regra. */
.ruler-handle { display: none !important; }

/* Glow effect interno da régua */
#reading-guide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(6, 214, 160, 0.08) 0%,
        transparent 20%,
        transparent 80%,
        rgba(6, 214, 160, 0.08) 100%
    );
    pointer-events: none;
}

/* Linha de foco central */
#reading-guide::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(6, 214, 160, 0.3) 10%,
        rgba(6, 214, 160, 0.5) 50%,
        rgba(6, 214, 160, 0.3) 90%,
        transparent 100%
    );
    pointer-events: none;
    transition: opacity 0.2s;
}
#reading-guide.no-center-line::after {
    opacity: 0 !important;
}

#reading-guide.active {
    display: block;
    opacity: 1;
    visibility: visible;
    /* pointer-events:auto → tocar/arrastar EM CIMA da faixa fina da régua move a
       régua; tocar FORA (na área escurecida, que é box-shadow e não elemento)
       ATRAVESSA e rola o documento. O usuário escolhe: arrastar a régua ou rolar a
       tela (pedido do owner). Mesmo comportamento já usado em clipboard/neurotutor
       (~l.12077). O puxador visível segue desativado (só a faixa arrasta). */
    pointer-events: auto;
    transform: none;
    transition: top 0.3s ease-out, opacity 0.3s;
}

#reading-guide.dragging {
    transition: none !important;
}

#reading-guide.manual-position {
    transition: opacity 0.3s;
}

/* Escurecimento PERSISTENTE enquanto a régua está ativa (pedido do owner): antes
   só escurecia durante leitura/arrasto; agora fica sempre visível pra o usuário
   rolar o documento por baixo da régua estática. */
#reading-guide.active {
    box-shadow: 0 0 0 9999px rgba(8, 11, 20, var(--ruler-opacity, 0.88));
}

/* ==================== WORD JUMP POPUP ==================== */
.word-jump-popup {
    position: fixed;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(6, 214, 160, 0.92), rgba(5, 180, 140, 0.95));
    backdrop-filter: blur(12px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 8px 14px;
    opacity: 0;
    transition: opacity 0.2s;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 20px rgba(6, 214, 160, 0.3);
    pointer-events: auto;
    white-space: nowrap;
}
.word-jump-popup__text {
    color: #0a0e1a;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
}
.word-jump-popup__text strong {
    color: #0a0e1a;
    font-weight: 800;
}
.word-jump-popup__actions {
    display: flex;
    gap: 6px;
}
.word-jump-popup__btn {
    border: none;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.word-jump-popup__btn:active {
    transform: scale(0.95);
}
.word-jump-popup__btn--yes {
    background: #0a0e1a;
    color: #06d6a0;
}
.word-jump-popup__btn--yes:hover {
    background: #141a2e;
}
.word-jump-popup__btn--no {
    background: rgba(10, 14, 26, 0.3);
    color: rgba(10, 14, 26, 0.7);
}
.word-jump-popup__btn--no:hover {
    background: rgba(10, 14, 26, 0.5);
    color: rgba(10, 14, 26, 0.9);
}

/* Ruler Controls - Neuro Glassmorphism */
/* ==================== RULER CONTROLS — Horizontal panel above dock ==================== */
.ruler-controls {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    z-index: 62;
    width: calc(100% - 24px);
    max-width: 440px;
    background: rgba(10, 13, 20, 0.97);
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    border-radius: 18px;
    padding: 10px 14px;
    display: none;
    flex-direction: column;
    gap: 8px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(6, 214, 160, 0.1);
    border: 1px solid rgba(6, 214, 160, 0.15);
    opacity: 0;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.ruler-controls.active {
    display: flex;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* DEFENSIVO: a régua (config + máscara) só existe DENTRO de um leitor. Superfícies
   de leitura: PDF/Colado = body.reader-active; página do NeuroTutor =
   #neurotutor-page.active. Se por qualquer caminho (bfcache, restore que falha,
   demo quebrado) sobrar `.active` fora do leitor, esconde — nunca vaza pra
   biblioteca. (:has degrada gracioso: onde não houver suporte, o cleanup em JS
   — resetFocusTools/clearStaleReaderChrome — segue valendo.) */
body:not(.reader-active):not(:has(#neurotutor-page.active)) #ruler-controls,
body:not(.reader-active):not(:has(#neurotutor-page.active)) #reading-guide {
    display: none !important;
}

/* Header */
.ruler-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(6, 214, 160, 0.1);
}
.ruler-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--neuro-cyan, #06d6a0);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Controls row */
.ruler-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: nowrap;
}

/* Control group */
.ruler-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.ruler-group-label {
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--neuro-text-secondary, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ruler-group-controls {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(6, 214, 160, 0.05);
    border-radius: 10px;
    padding: 2px;
    border: 1px solid rgba(6, 214, 160, 0.08);
}

/* Buttons inside groups */
.ruler-controls .ruler-group-controls button {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--neuro-text-primary, #e2e8f0);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.ruler-controls .ruler-group-controls button:hover {
    background: rgba(6, 214, 160, 0.15);
    color: var(--neuro-cyan, #06d6a0);
}
.ruler-controls .ruler-group-controls button:active {
    transform: scale(0.9);
}

/* Value display */
.ruler-value {
    min-width: 40px;
    text-align: center;
    color: var(--neuro-cyan, #06d6a0);
    font-size: 0.72rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    padding: 0 2px;
    white-space: nowrap;
}

/* Color picker group */
.ruler-group-color {
    gap: 3px;
}
.ruler-controls input[type="color"] {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(6, 214, 160, 0.1);
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
    padding: 2px;
    transition: transform 0.15s ease;
}
.ruler-controls input[type="color"]:hover {
    transform: scale(1.1);
    border-color: rgba(6, 214, 160, 0.3);
}

/* Toggle button (linha central) */
.ruler-controls .ruler-btn-toggle {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: var(--neuro-text-secondary, #94a3b8);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.ruler-controls .ruler-btn-toggle.active {
    background: rgba(6, 214, 160, 0.15);
    color: var(--neuro-cyan, #06d6a0);
    border-color: rgba(6, 214, 160, 0.3);
}
.ruler-controls .ruler-btn-toggle:hover {
    background: rgba(6, 214, 160, 0.2);
}

/* Center button */
.ruler-controls .ruler-btn-center {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(6, 214, 160, 0.1);
    color: var(--neuro-cyan, #06d6a0);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
    border: 1px solid rgba(6, 214, 160, 0.15);
}
.ruler-controls .ruler-btn-center:hover {
    background: rgba(6, 214, 160, 0.2);
    box-shadow: 0 0 10px rgba(6, 214, 160, 0.2);
}

/* Close button */
.ruler-controls .ruler-btn-close {
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(239, 68, 68, 0.1);
    color: var(--neuro-text-secondary, #94a3b8);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.ruler-controls .ruler-btn-close:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* Hide FABs when ruler is active */
body.ruler-active .neuro-fab,
body.ruler-active .sniper-fab,
body.ruler-active .auto-select-fab,
body.ruler-active .smart-hover-fab {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease !important;
}

/* ---- Mobile adjustments ---- */
@media (max-width: 768px) {
    .ruler-controls {
        bottom: 82px;
        max-width: 360px;
    }
}

/* ---- Landscape compact ---- */
@media (max-height: 500px) and (orientation: landscape) {
    .ruler-controls {
        /* BUG landscape: top:8px punha o painel ATRÁS do header + outra media query
           (max-height:500 landscape, ~linha 4348) força bottom:70 → top+bottom os
           dois setados = painel esticado a ~295px (caixa preta vazia). Ancorar
           EMBAIXO (top:auto) resolve: fica compacto, acima da dock, longe do header. */
        bottom: 70px !important;
        top: auto !important;
        max-width: 520px;
        padding: 6px 12px !important;
    }
    /* NÃO esconder o header inteiro — o botão FECHAR (setinha) mora aqui e sumia
       em landscape. Some só o título; o header vira uma linha fininha com o ✕. */
    .ruler-header {
        display: flex !important;
        justify-content: flex-end;
        align-items: center;
        padding: 0 !important;
        margin-bottom: 2px !important;
    }
    .ruler-title { display: none !important; }
    .ruler-row {
        gap: 6px;
    }
    .ruler-group-label {
        display: none;
    }
    .ruler-controls .ruler-group-controls button {
        width: 28px;
        height: 28px;
    }
}

/* ---- Tablet landscape ---- */
@media (max-height: 600px) and (min-width: 700px) and (orientation: landscape) {
    .ruler-controls {
        /* Mesmo motivo do bloco acima: ancorar embaixo, nunca top (evita ficar
           atrás do header e o esticão top+bottom). */
        bottom: 70px !important;
        top: auto !important;
    }
}

/* ==================== MOBILE SELECT POPUP ==================== */
.mobile-select-popup {
    position: fixed;
    inset: 0;
    background: rgba(8, 11, 20, 0.7);
    z-index: 200;
    display: none;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
}
.mobile-select-popup.active { display: flex; }

.mobile-select-popup-content {
    background: var(--neuro-bg-raised);
    border-radius: 24px 24px 0 0;
    padding: 20px;
    padding-bottom: 30px;
    width: 100%;
    max-width: 400px;
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--neuro-border);
    border-bottom: none;
    color: var(--neuro-text-primary);
}
body.theme-dark .mobile-select-popup-content {
    background: var(--neuro-bg-raised);
}

.mobile-select-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border-radius: 12px;
    background: var(--neuro-bg-surface);
    margin-bottom: 10px;
    text-align: left;
    transition: all 0.2s;
    color: var(--neuro-text-primary);
    border: none;
    cursor: pointer;
}
body.theme-dark .mobile-select-option {
    background: var(--neuro-bg-surface);
    color: var(--neuro-text-primary);
}
.mobile-select-option:active {
    transform: scale(0.98);
    background: var(--neuro-bg-hover);
}
.mobile-select-option div { display: flex; flex-direction: column; }
.mobile-select-option i { color: var(--neuro-cyan); }

/* ==================== MODAL OVERLAY ==================== */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    /* Acima dos painéis (NeuroTutor z:9999) e dos modais de estudo (z:10000).
       Em z:100 o paywall/upgrade renderizava ATRÁS do painel NeuroTutor aberto
       e o usuário não conseguia assinar. Abaixo do loading global (99999). */
    z-index: 10050;
    background: rgba(8, 11, 20, 0.9);
    backdrop-filter: blur(8px);
    /* align-items:flex-start + margin-block:auto no card = centraliza quando
       cabe e alinha ao topo + rola quando o modal é mais alto que a tela.
       Com align-items:center o topo (onde fica o X) era cortado e ficava
       inacessível no celular ("não dá pra scrollar em algumas partes"). */
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.modal-overlay.active { display: flex; }
.modal-overlay > * { margin-block: auto; }

/* Paywall Modal Responsive */
#paywall-modal > div {
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 480px) {
    #paywall-modal {
        padding: 10px;
        align-items: flex-start;
    }
    #paywall-modal > div {
        padding: 20px 16px !important;
        border-radius: 20px !important;
        margin: 10px auto;
        max-height: calc(100vh - 20px);
    }
    #paywall-modal h2 {
        font-size: 1.25rem !important;
    }
    #paywall-modal .text-4xl {
        font-size: 2rem !important;
    }
    #paywall-modal .bg-gradient-to-br {
        padding: 12px !important;
    }
    #paywall-modal .bg-gray-100 {
        padding: 12px !important;
    }
    #paywall-modal a[href*="kiwify"] {
        padding: 14px !important;
        font-size: 14px !important;
    }
    #paywall-modal input {
        padding: 10px 12px !important;
        font-size: 12px !important;
    }
    #paywall-modal .flex.gap-2 button {
        padding: 10px 14px !important;
    }
}

/* Landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
    #paywall-modal {
        padding: 8px;
        align-items: flex-start;
    }
    #paywall-modal > div {
        padding: 16px !important;
        border-radius: 16px !important;
        max-width: 500px;
        max-height: calc(100vh - 16px);
    }
    #paywall-modal h2 {
        font-size: 1.1rem !important;
        margin-bottom: 8px !important;
    }
    #paywall-modal h2 br { display: none; }
    #paywall-modal .mb-4 { margin-bottom: 10px !important; }
    #paywall-modal .mb-2 { margin-bottom: 6px !important; }
    #paywall-modal .p-3 { padding: 8px !important; }
    #paywall-modal .p-4 { padding: 10px !important; }
    #paywall-modal .text-4xl { font-size: 1.75rem !important; }
    #paywall-modal a[href*="kiwify"] {
        padding: 10px !important;
        font-size: 13px !important;
        margin-bottom: 10px !important;
    }
    #paywall-modal .border-t { padding-top: 10px !important; }
    #paywall-modal input { padding: 8px 10px !important; }
}

/* ==================== TOAST NOTIFICATION ==================== */
#toast-notification {
    position: fixed;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--neuro-cyan);
    color: var(--neuro-bg-deep);
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 14px;
    font-family: 'Outfit', sans-serif;
    box-shadow: 0 4px 15px var(--neuro-cyan-glow);
    /* Acima de modais/painéis (≤10060) pra confirmações (validação de chave,
       status de salvamento) nunca ficarem escondidas. Antes era z:200. */
    z-index: 11000;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    text-align: center;
    max-width: 90%;
}
/* Toast type variants — antes o segundo arg era ignorado, agora aplica visual.
   Cores escolhidas pra contraste WCAG AA contra texto preto/branco. */
#toast-notification.toast-error {
    background: #ef4444;
    color: #ffffff;
    box-shadow: 0 4px 18px rgba(239, 68, 68, 0.45);
}
#toast-notification.toast-success {
    background: #06d6a0;
    color: #052e21;
    box-shadow: 0 4px 18px rgba(6, 214, 160, 0.45);
}
#toast-notification.toast-warning {
    background: #f59e0b;
    color: #1f1300;
    box-shadow: 0 4px 18px rgba(245, 158, 11, 0.45);
}
#toast-notification.toast-info {
    background: var(--neuro-cyan);
    color: var(--neuro-bg-deep);
    box-shadow: 0 4px 15px var(--neuro-cyan-glow);
}

.mode-btn-active { background: var(--neuro-cyan) !important; color: var(--neuro-bg-deep) !important; }

/* ==================== ONBOARDING ==================== */
.onboarding-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(8, 11, 20, 0.95);
    backdrop-filter: blur(12px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.onboarding-overlay.active { display: flex; }

.onboarding-card {
    background: var(--neuro-bg-raised);
    border-radius: 24px;
    padding: 40px;
    max-width: 500px;
    width: 100%;
    text-align: center;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--neuro-border);
    color: var(--neuro-text-primary);
    position: relative; /* anchor pro skip link */
}
/* Skip link discreto — power user que volta em outra máquina pula 3 telas */
.onboarding-skip-link {
    position: absolute;
    top: 14px;
    right: 18px;
    background: transparent;
    border: none;
    color: var(--neuro-text-muted, #8190a3);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    transition: color 0.15s, background 0.15s;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.onboarding-skip-link:hover,
.onboarding-skip-link:focus {
    color: var(--neuro-text-secondary, #94a3b8);
    background: rgba(255, 255, 255, 0.04);
    outline: none;
}

.onboarding-step { display: none; }
.onboarding-step.active { display: block; }

.onboarding-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, var(--neuro-cyan), var(--neuro-blue));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neuro-bg-deep);
    font-size: 36px;
    box-shadow: 0 0 30px var(--neuro-cyan-glow);
}

.onboarding-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 20px 0;
}
.onboarding-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--neuro-bg-surface);
    transition: all 0.3s;
}
.onboarding-dot.active {
    background: var(--neuro-cyan);
    width: 30px;
    border-radius: 5px;
}

/* ==================== PREMIUM BADGE ==================== */
.premium-badge {
    position: fixed;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, var(--neuro-gold), var(--neuro-amber));
    color: var(--neuro-bg-deep);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
    font-family: 'Space Grotesk', sans-serif;
    z-index: 60;
    display: none;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 10px rgba(217, 119, 6, 0.4);
}
.premium-badge.active { display: flex; }

/* ════════════════════════════════════════════════════════════════════
   EDITAL PANEL — overlay com import (empty state) ou coverage view (active)
   Diferenciador estratégico #1 do Sprint 2: concurseiro vê % cobertura
   por tópico do edital, transforma "leitor" em "gestor de aprovação".
   ════════════════════════════════════════════════════════════════════ */
#edital-panel-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease-out;
}
#edital-panel-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}
.edital-panel {
    width: min(94vw, 720px);
    max-height: min(86vh, 800px);
    display: flex;
    flex-direction: column;
    background: rgba(22, 26, 40, 0.96);
    border: 1px solid rgba(6, 214, 160, 0.18);
    border-radius: 16px;
    box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.7);
    overflow: hidden;
}
.edital-panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
}
.edital-panel-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.edital-panel-subtitle {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    flex: 0 1 auto;
}
.edital-panel-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 22px;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 6px;
    min-width: 44px;
    min-height: 44px;
    transition: background 120ms ease;
    -webkit-tap-highlight-color: transparent;
}
.edital-panel-close:hover,
.edital-panel-close:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    outline: none;
}
.edital-panel-body {
    padding: 16px 18px 18px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.edital-intro {
    margin: 0 0 16px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.5;
}
.edital-label {
    display: block;
    margin: 12px 0 4px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.edital-hint {
    text-transform: none;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 400;
}
.edital-input,
.edital-textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 12px;
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    -webkit-text-size-adjust: 100%;
}
.edital-input:focus,
.edital-textarea:focus {
    outline: none;
    border-color: var(--neuro-cyan, #06d6a0);
}
.edital-textarea {
    resize: vertical;
    min-height: 160px;
    line-height: 1.5;
    font-family: 'Space Grotesk', monospace;
    font-size: 13px;
}
.edital-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}
.edital-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    min-height: 44px;
    transition: background 120ms ease;
    -webkit-tap-highlight-color: transparent;
}
.edital-btn-primary {
    background: linear-gradient(135deg, var(--neuro-cyan, #06d6a0), var(--neuro-blue, #0ea5e9));
    border-color: transparent;
    color: #fff;
}
.edital-btn-primary:hover,
.edital-btn-primary:focus-visible {
    box-shadow: 0 4px 16px -4px rgba(6, 214, 160, 0.5);
    outline: none;
}
.edital-btn-danger {
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}
.edital-btn-danger:hover,
.edital-btn-danger:focus-visible {
    background: rgba(239, 68, 68, 0.12);
    outline: none;
}

/* Active view: summary + topic list */
.edital-summary {
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 8px 16px;
    align-items: center;
}
.edital-summary-percent {
    grid-row: span 2;
    font-size: 36px;
    font-weight: 800;
    color: var(--neuro-cyan, #06d6a0);
    font-family: 'Space Grotesk', monospace;
}
.edital-summary-bar {
    grid-column: 2;
    height: 8px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
}
.edital-summary-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--neuro-cyan, #06d6a0), var(--neuro-blue, #0ea5e9));
    border-radius: 999px;
    transition: width 240ms ease-out;
}
.edital-summary-counts {
    grid-column: 2;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
}
.edital-stat {
    color: rgba(255, 255, 255, 0.6);
}
.edital-stat[data-status="covered"] { color: var(--neuro-cyan, #06d6a0); }
.edital-stat[data-status="partial"] { color: #fbbf24; }
.edital-stat[data-status="untouched"] { color: rgba(255, 255, 255, 0.45); }

.edital-topic-list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    overflow-y: auto;
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
    max-height: 50vh;
}
.edital-topic-row {
    display: grid;
    /* col 1: pin · col 2: status · col 3: title (1fr) · col 4: time
       Pin antes do status pra que clique acidental no fim da row não dispare pin. */
    grid-template-columns: auto auto 1fr auto;
    /* row 1: pin/status/title/time · row 2: progress bar · row 3: chips */
    grid-template-rows: auto auto auto;
    gap: 4px 10px;
    align-items: center;
    padding: 8px 18px 8px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    -webkit-tap-highlight-color: transparent;
}
.edital-topic-row:last-child { border-bottom: none; }
.edital-topic-status {
    grid-row: 1;
    grid-column: 2;
    font-size: 14px;
}
.edital-topic-title {
    grid-row: 1;
    grid-column: 3;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.edital-topic-time {
    grid-row: 1;
    grid-column: 4;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    font-family: 'Space Grotesk', monospace;
}
.edital-topic-bar {
    grid-row: 2;
    grid-column: 3 / -1;
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    overflow: hidden;
}
.edital-topic-bar-fill {
    height: 100%;
    background: var(--neuro-cyan, #06d6a0);
    border-radius: 999px;
    transition: width 240ms ease-out;
}
.edital-topic-row[data-status="partial"] .edital-topic-bar-fill {
    background: #fbbf24;
}
.edital-topic-row[data-status="untouched"] .edital-topic-bar-fill {
    background: transparent;
}

/* Pin: marca como "tópico atual" pro auto-tracking futuro */
.edital-topic-pin {
    grid-row: 1;
    grid-column: 1;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    font-size: 14px;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    min-width: 32px;
    min-height: 32px;
    transition: color 120ms ease, background 120ms ease;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
}
.edital-topic-pin:hover,
.edital-topic-pin:focus-visible {
    background: rgba(6, 214, 160, 0.08);
    color: rgba(255, 255, 255, 0.7);
    outline: none;
}
.edital-topic-row[data-active="1"] .edital-topic-pin {
    color: var(--neuro-cyan, #06d6a0);
}
.edital-topic-row[data-active="1"] {
    background: linear-gradient(90deg, rgba(6, 214, 160, 0.06) 0%, transparent 60%);
    border-left: 3px solid var(--neuro-cyan, #06d6a0);
    /* compensa o border-left pra title não shift */
    padding-left: calc(var(--row-pad, 18px) - 3px);
}

/* Chips de tempo (+5min, +15min, +30min) — registro manual de tempo lido */
.edital-topic-chips {
    grid-row: 3;
    grid-column: 3 / -1;
    display: flex;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.edital-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.65);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 120ms ease, transform 120ms ease, border-color 120ms ease;
    /* WCAG 2.5.5 — hitbox ≥44px via min-height + padding mesmo com chip pequeno */
    min-height: 28px;
    -webkit-tap-highlight-color: transparent;
    font-family: 'Space Grotesk', monospace;
}
.edital-chip:hover,
.edital-chip:focus-visible {
    background: rgba(6, 214, 160, 0.12);
    border-color: rgba(6, 214, 160, 0.3);
    color: var(--neuro-cyan, #06d6a0);
    outline: none;
}
.edital-chip-clicked {
    animation: editalChipPulse 280ms ease-out;
}
@keyframes editalChipPulse {
    0%   { transform: scale(1);   background: rgba(6, 214, 160, 0.3); }
    50%  { transform: scale(1.1); background: rgba(6, 214, 160, 0.4); }
    100% { transform: scale(1);   background: rgba(255, 255, 255, 0.05); }
}
@media (prefers-reduced-motion: reduce) {
    .edital-chip-clicked { animation: none; }
}

.edital-panel-footer {
    padding: 12px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: flex-end;
}

@media (prefers-reduced-motion: reduce) {
    #edital-panel-overlay { transition: none; }
    .edital-summary-bar-fill,
    .edital-topic-bar-fill { transition: none; }
}

@media (max-width: 640px) {
    .edital-panel-header { gap: 8px; padding: 12px 14px; }
    .edital-panel-body { padding: 14px; }
    .edital-summary { padding: 14px; }
    .edital-summary-percent { font-size: 28px; }
    .edital-topic-row { padding: 8px 14px; }
}

/* ════════════════════════════════════════════════════════════════════
   OCR TEXT LAYER — overlay invisível selecionável sobre PDFs escaneados
   Espelha o text layer do PDF.js mas alimentado por Tesseract.js. Faz
   highlight / seleção / karaoke funcionarem em scanned PDFs.
   ════════════════════════════════════════════════════════════════════ */
.ocr-text-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    /* z-index acima do canvas mas abaixo de overlays (selection-point,
       regions, region-counter já em z 18-25). */
    z-index: 3;
    pointer-events: auto;
    /* Cursor de texto pra hint visual de "selecionável" */
    cursor: text;
    /* Line height tight — text de cada bbox deve ficar contido */
    line-height: 1;
}
.ocr-text-layer .ocr-word {
    position: absolute;
    /* TEXTO INVISÍVEL mas presente — Selection API funciona, browser
       desenha highlight nativo em cima. Mesma trick do PDF.js. */
    color: transparent;
    white-space: nowrap;
    transform-origin: 0% 0%;
    cursor: text;
    user-select: text;
    -webkit-user-select: text;
    /* Sem clique no browser-default outline */
    outline: none;
    /* Em scan ruim, palavras com confidence <50% ganham faded outline
       em dev/debug. Hidden por default. */
}
/* Debug: visualizar word boxes via body.ocr-debug */
body.ocr-debug .ocr-text-layer .ocr-word {
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.4);
    color: rgba(139, 92, 246, 0.6);
}
body.ocr-debug .ocr-text-layer .ocr-word[data-low-confidence="1"] {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.5);
}
/* Highlight nativo do browser fica visível mesmo em transparent */
.ocr-text-layer .ocr-word::selection {
    background: rgba(6, 214, 160, 0.35);
    color: transparent;
}
.ocr-text-layer .ocr-word::-moz-selection {
    background: rgba(6, 214, 160, 0.35);
    color: transparent;
}

/* ════════════════════════════════════════════════════════════════════
   OCR PANEL — modal com progresso live + textarea de resultado
   Tesseract.js (lazy CDN) extrai texto de PDFs escaneados.
   ════════════════════════════════════════════════════════════════════ */
#ocr-panel-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease-out;
}
#ocr-panel-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}
.ocr-panel {
    width: min(94vw, 560px);
    background: rgba(22, 26, 40, 0.96);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 16px;
    box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.7);
    overflow: hidden;
}
.ocr-panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
}
.ocr-panel-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    flex: 1 1 auto;
}
.ocr-panel-subtitle {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}
.ocr-panel-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 22px;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 6px;
    min-width: 44px;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}
.ocr-panel-close:hover,
.ocr-panel-close:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    outline: none;
}
.ocr-panel-body { padding: 18px; }
.ocr-hint {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    line-height: 1.5;
}
.ocr-progress { margin-bottom: 12px; }
.ocr-progress-track {
    height: 10px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 8px;
}
.ocr-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #8b5cf6, #06b6d4);
    border-radius: 999px;
    transition: width 240ms ease-out;
}
.ocr-progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Space Grotesk', monospace;
}
.ocr-progress-pct {
    color: var(--neuro-cyan, #06d6a0);
    font-weight: 700;
}
.ocr-result {
    width: 100%;
    min-height: 240px;
    max-height: 50vh;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 12px;
    color: #fff;
    font-size: 13px;
    font-family: 'Space Grotesk', monospace;
    line-height: 1.5;
    resize: vertical;
}
.ocr-result:focus { outline: none; border-color: rgba(139, 92, 246, 0.5); }
.ocr-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.ocr-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
    transition: background 120ms ease;
}
.ocr-btn-primary {
    background: linear-gradient(135deg, #8b5cf6, #06b6d4);
    border-color: transparent;
    color: #fff;
}
.ocr-btn-danger {
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}
.ocr-btn-danger:hover,
.ocr-btn-danger:focus-visible {
    background: rgba(239, 68, 68, 0.12);
    outline: none;
}
.ocr-batch-summary {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    margin-bottom: 12px;
}
.ocr-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 14px;
}
.ocr-summary-label {
    color: rgba(255, 255, 255, 0.65);
}
.ocr-summary-value {
    color: var(--neuro-cyan, #06d6a0);
    font-weight: 700;
    font-family: 'Space Grotesk', monospace;
}
.ocr-btn-primary:hover,
.ocr-btn-primary:focus-visible {
    box-shadow: 0 4px 16px -4px rgba(139, 92, 246, 0.5);
    outline: none;
}
@media (prefers-reduced-motion: reduce) {
    #ocr-panel-overlay { transition: none; }
    .ocr-progress-fill { transition: none; }
}
@media (max-width: 640px) {
    .ocr-panel-body { padding: 14px; }
    .ocr-result { min-height: 200px; }
}

/* ════════════════════════════════════════════════════════════════════
   SLEEP TIMER PANEL — overlay com picker de duração ou countdown ativo
   Sleep timer = padrão Spotify/Apple Music pra escutar antes de dormir.
   ════════════════════════════════════════════════════════════════════ */
#sleep-timer-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease-out;
}
#sleep-timer-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}
.sleep-panel {
    width: min(94vw, 420px);
    background: rgba(22, 26, 40, 0.96);
    border: 1px solid rgba(139, 92, 246, 0.28);
    border-radius: 16px;
    box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.7);
    overflow: hidden;
}
.sleep-panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sleep-panel-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    flex: 1 1 auto;
}
.sleep-panel-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 22px;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 6px;
    min-width: 44px;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}
.sleep-panel-close:hover,
.sleep-panel-close:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    outline: none;
}
.sleep-panel-body { padding: 18px; }
.sleep-hint {
    margin: 0 0 14px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    line-height: 1.5;
}
.sleep-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.sleep-quick-chip {
    background: rgba(139, 92, 246, 0.10);
    border: 1px solid rgba(139, 92, 246, 0.35);
    color: #c4b5fd;
    font-size: 16px;
    font-weight: 700;
    padding: 14px 16px;
    border-radius: 12px;
    cursor: pointer;
    min-height: 56px;
    transition: background 120ms ease, transform 120ms ease;
    font-family: 'Space Grotesk', monospace;
    -webkit-tap-highlight-color: transparent;
}
.sleep-quick-chip:hover,
.sleep-quick-chip:focus-visible {
    background: rgba(139, 92, 246, 0.22);
    transform: translateY(-1px);
    outline: none;
}
.sleep-quick-chip:active { transform: translateY(0) scale(0.98); }
.sleep-countdown {
    text-align: center;
    font-size: 48px;
    font-weight: 800;
    color: #c4b5fd;
    font-family: 'Space Grotesk', monospace;
    margin: 8px 0 16px;
    font-variant-numeric: tabular-nums;
}
.sleep-actions {
    display: flex;
    justify-content: center;
}
.sleep-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
    transition: background 120ms ease;
}
.sleep-btn-danger {
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}
.sleep-btn-danger:hover,
.sleep-btn-danger:focus-visible {
    background: rgba(239, 68, 68, 0.12);
    outline: none;
}
@media (prefers-reduced-motion: reduce) {
    #sleep-timer-overlay { transition: none; }
    .sleep-quick-chip { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════
   EDITAL TRACKING CHIP — indicator flutuante de tópico ativo + tempo live
   Top-center pra não conflitar com focus-toolkit (top-left) nem motor-mode
   badge (top-right). Click → abre edital panel pra detalhes.
   ════════════════════════════════════════════════════════════════════ */
#edital-tracking-chip {
    position: fixed;
    top: calc(72px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    z-index: 9990;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(22, 26, 40, 0.92);
    color: #fff;
    border: 1px solid rgba(6, 214, 160, 0.4);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 28px -8px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease-out, transform 200ms ease-out;
    max-width: min(90vw, 380px);
}
#edital-tracking-chip.is-visible {
    display: inline-flex;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
#edital-tracking-chip:hover,
#edital-tracking-chip:focus-visible {
    border-color: rgba(6, 214, 160, 0.7);
    outline: none;
}
#edital-tracking-chip .edital-chip-icon {
    font-size: 14px;
}
#edital-tracking-chip .edital-chip-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
#edital-tracking-chip .edital-chip-time {
    font-family: 'Space Grotesk', monospace;
    font-weight: 700;
    color: var(--neuro-cyan, #06d6a0);
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

/* Esconde durante zen-mode (zen é silêncio total) */
body.zen-mode #edital-tracking-chip { display: none !important; }

/* Mobile: header é mais fino, chip sobe um pouco */
@media (max-width: 640px) {
    #edital-tracking-chip {
        top: calc(64px + env(safe-area-inset-top, 0px));
        font-size: 11px;
        padding: 7px 12px;
    }
    #edital-tracking-chip .edital-chip-title {
        max-width: 140px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #edital-tracking-chip { transition: opacity 80ms linear; }
}

/* ════════════════════════════════════════════════════════════════════
   AUTO-HIDE CHROME — esconde FABs + dock após 5s ocioso em reader-active.
   Substitui o botão "esconder controles" (era redundante com Modo Zen).
   Volta com qualquer interação. Header mantém visível (orientação).
   ════════════════════════════════════════════════════════════════════ */
body.ui-auto-hidden .neuro-dock,
body.ui-auto-hidden .neuro-fab,
body.ui-auto-hidden .neurotutor-fab,
body.ui-auto-hidden .neuro-brain-fab,
body.ui-auto-hidden .selection-master-fab,
body.ui-auto-hidden .sniper-fab,
body.ui-auto-hidden .auto-select-fab,
body.ui-auto-hidden .smart-hover-fab {
    opacity: 0;
    pointer-events: none;
    transition: opacity 280ms ease-out, transform 280ms ease-out;
    transform: translateY(8px) scale(0.96);
}
/* Default state ganha mesma transition pra fade-in suave */
.neuro-dock,
.neuro-fab,
.neurotutor-fab,
.neuro-brain-fab,
.selection-master-fab,
.sniper-fab,
.auto-select-fab,
.smart-hover-fab {
    transition-property: opacity, transform;
    transition-duration: 220ms;
    transition-timing-function: ease-out;
}
@media (prefers-reduced-motion: reduce) {
    body.ui-auto-hidden .neuro-dock,
    body.ui-auto-hidden .neuro-fab,
    body.ui-auto-hidden .neurotutor-fab,
    body.ui-auto-hidden .neuro-brain-fab,
    body.ui-auto-hidden .selection-master-fab,
    body.ui-auto-hidden .sniper-fab,
    body.ui-auto-hidden .auto-select-fab,
    body.ui-auto-hidden .smart-hover-fab {
        transition: opacity 80ms linear;
        transform: none;
    }
}

/* Bug fix: premium-badge tinha top: 10px z-index: 60 — entrava na zona do
   header fixo (.neuro-reader-header top: 0 height: 56 z-index: 100) e ficava
   visualmente escondida atrás dele em reader-active. User premium "perdia"
   o badge.
   Solução: esconde em reader-active (foco prioritário; dashboard já tem
   indicador de plano). Mantém visível na landing/library. */
body.reader-active .premium-badge.active {
    display: none;
}

/* Premium badge landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .premium-badge {
        top: 5px;
        bottom: auto;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        padding: 3px 8px;
        font-size: 8px;
        opacity: 0.7;
    }
}

/* force-mobile premium badge */
body.force-mobile .premium-badge {
    top: 5px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    padding: 3px 8px;
    font-size: 8px;
    opacity: 0.7;
}

/* ==================== ZEN MODE ==================== */
.zen-mode .desktop-toolbar,
.zen-mode .mobile-controls,
.zen-mode .zoom-controls-mobile,
.zen-mode .page-navigator,
.zen-mode .ruler-controls,
.zen-mode .premium-badge,
.zen-mode #region-counter,
.zen-mode .selection-mode-bar {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Teleprompter stays visible in zen mode */
.zen-mode .teleprompter-show-btn {
    display: none !important;
}

/* Floating exit button for Zen Mode */
.zen-exit-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(12, 16, 33, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: var(--neuro-text-primary);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}
.zen-exit-btn:hover {
    background: rgba(12, 16, 33, 0.6);
    transform: scale(1.1);
    border-color: var(--neuro-cyan);
}
.zen-mode .zen-exit-btn {
    display: flex !important;
}

/* PDF container in Zen Mode */
.zen-mode #pdf-container {
    padding-bottom: 20px !important;
}

/* ==================== MOBILE CONTROLS ==================== */
.mobile-controls {
    display: none;
}

@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
    .mobile-controls {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--neuro-bg-raised);
        border-top: 1px solid var(--neuro-border);
        padding: 8px 8px 24px 8px;
        z-index: 50;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between;
        align-items: center;
        gap: 6px;
    }
    body.theme-dark .mobile-controls {
        background: var(--neuro-bg-raised);
        border-color: var(--neuro-border);
    }

    .mobile-controls button {
        padding: 10px 4px;
        border-radius: 12px;
        font-weight: 600;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        font-size: 10px;
        font-family: 'Outfit', sans-serif;
        background: var(--neuro-bg-surface);
        color: var(--neuro-text-primary);
        border: none;
        flex: 1 1 0;
        min-width: 0;
        max-width: 70px;
        height: 56px;
        cursor: pointer;
    }
    body.theme-dark .mobile-controls button {
        background: var(--neuro-bg-surface);
        color: var(--neuro-text-primary);
    }

    .mobile-controls button.active {
        background: var(--neuro-cyan);
        color: var(--neuro-bg-deep);
    }

    .mobile-controls button.play-btn {
        background: linear-gradient(135deg, var(--neuro-cyan), var(--neuro-green));
        color: var(--neuro-bg-deep);
        flex: 1.2 1 0;
        max-width: 80px;
        font-weight: 700;
    }

    .mobile-controls button.play-btn.playing {
        background: linear-gradient(135deg, var(--neuro-amber), #d97706);
    }

    /* PDF Container with horizontal scroll */
    #pdf-container {
        padding-bottom: 100px;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .desktop-toolbar { display: none !important; }
}

/* ==================== FORCE MOBILE ==================== */
body.force-mobile .mobile-controls {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--neuro-bg-raised);
    border-top: 1px solid var(--neuro-border);
    padding: 8px 8px 24px 8px;
    z-index: 50;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}
body.force-mobile.theme-dark .mobile-controls {
    background: var(--neuro-bg-raised);
    border-color: var(--neuro-border);
}

body.force-mobile .desktop-toolbar {
    display: none !important;
}

body.force-mobile .zoom-controls-mobile {
    display: flex !important;
}

/* Ghost mode in force-mobile — apenas para reflow/clipboard (texto visível) */
body.force-mobile .word-block.reflow-word.active {
    background-color: transparent !important;
    box-shadow: none !important;
    mix-blend-mode: normal !important;
    border-bottom: 2px solid var(--highlight-color, #06d6a0);
    border-radius: 0 !important;
    color: var(--highlight-color, #06d6a0) !important;
    text-shadow: 0 0 8px rgba(6, 214, 160, 0.4);
}
/* Matar overlay ::after no reflow (texto já é visível, não precisa de overlay) */
body.force-mobile .word-block.reflow-word.active::after {
    background-color: transparent !important;
    box-shadow: none !important;
    opacity: 0 !important;
}

body.force-mobile .word-block.reflow-word.active.rainbow-highlight {
    background-color: transparent !important;
    border-bottom: 2px solid currentColor;
    color: currentColor !important;
    text-shadow: 0 0 8px currentColor;
}
body.force-mobile .word-block.reflow-word.active.rainbow-highlight::after {
    opacity: 0 !important;
}

/* PDF word-blocks em force-mobile: mantém sublinhado via ::after (texto fica transparente) */
body.force-mobile .word-block.active:not(.reflow-word) {
    color: transparent !important;
    text-shadow: none !important;
    border-bottom: none;
}

body.force-mobile #reading-guide.active {
    opacity: 0.5 !important;
}

body.force-mobile .teleprompter-bar.active {
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
}

body.force-mobile .teleprompter-text .current-word {
    background: linear-gradient(135deg, var(--highlight-color, var(--neuro-gold)), color-mix(in srgb, var(--highlight-color, var(--neuro-gold)) 80%, black)) !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    font-weight: 800 !important;
    color: var(--neuro-bg-deep) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--highlight-color, var(--neuro-gold)) 50%, transparent);
}

@media (min-width: 769px) and (min-height: 501px) {
    body:not(.force-mobile) .mobile-controls { display: none !important; }
    body:not(.force-mobile) .zoom-controls-mobile { display: none !important; }
}

/* ==================== LANDSCAPE MOBILE ==================== */
@media (max-height: 500px) and (orientation: landscape) {
    /* Mobile controls compact */
    .mobile-controls, body.force-mobile .mobile-controls {
        padding: 4px 8px 8px 8px !important;
    }
    .mobile-controls button {
        height: 44px !important;
        padding: 6px 4px !important;
    }

    /* Zoom controls horizontal */
    .zoom-controls-mobile {
        top: 10px !important;
        left: 10px !important;
        flex-direction: row !important;
        transform: none !important;
        gap: 4px !important;
    }
    .zoom-controls-mobile button {
        width: 36px !important;
        height: 36px !important;
    }
    .zoom-controls-mobile .zoom-level {
        padding: 2px 6px !important;
        font-size: 10px !important;
    }

    /* Page navigator horizontal */
    .page-navigator {
        top: 10px !important;
        right: 10px !important;
        flex-direction: row !important;
        padding: 4px !important;
    }
    .page-nav-btn {
        width: 28px !important;
        height: 28px !important;
    }
    .page-nav-display {
        padding: 4px 8px !important;
        font-size: 0.7rem !important;
    }

    /* Ruler controls compact.
       right/padding REMOVIDOS: empurravam o painel pra direita (com max-width:520)
       e o botão FECHAR (setinha) saía da tela em landscape. O bloco landscape de
       cima (~l.2873) já ancora embaixo, centraliza e mantém o header/✕ visível. */
    .ruler-controls {
        bottom: 70px !important;
    }

    /* Show menu button compact */
    .show-menu-btn {
        bottom: 70px !important;
        padding: 8px 12px !important;
    }

    /* Region counter repositioned */
    #region-counter {
        bottom: 70px !important;
    }

    /* PDF container with less padding */
    #pdf-container {
        padding-bottom: 70px !important;
    }
}

/* ==================== PAGE NAVIGATOR ==================== */
.page-navigator {
    position: fixed;
    top: 80px;
    right: 16px;
    background: rgba(12, 16, 33, 0.95);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 6px;
    z-index: 50;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--neuro-border);
}
.page-navigator.active { display: flex; }
.page-nav-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: var(--neuro-text-primary);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-nav-btn:hover { background: rgba(255, 255, 255, 0.15); }
.page-nav-btn:active { transform: scale(0.95); }
.page-nav-display {
    color: var(--neuro-text-primary);
    font-size: 0.75rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
    background: rgba(255, 255, 255, 0.08);
    border: 1px dashed rgba(255, 255, 255, 0.2);
}
.page-nav-display:hover {
    background: rgba(255, 255, 255, 0.15);
    border-style: solid;
}
.page-nav-display:active { transform: scale(0.95); }

/* Page input modal */
.page-input-modal {
    position: fixed;
    inset: 0;
    background: rgba(8, 11, 20, 0.7);
    backdrop-filter: blur(8px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.page-input-modal.hidden { display: none; }
.page-input-content {
    background: var(--neuro-bg-raised);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    max-width: 280px;
    width: 100%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--neuro-border);
}
.page-input-content p {
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--neuro-text-primary);
    font-family: 'Space Grotesk', sans-serif;
}
.page-input-content input {
    width: 100%;
    padding: 12px 16px;
    font-size: 1.5rem;
    text-align: center;
    border: 2px solid var(--neuro-bg-surface);
    border-radius: 12px;
    margin-bottom: 16px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    background: var(--neuro-bg-surface);
    color: var(--neuro-text-primary);
}
.page-input-content input:focus {
    outline: none;
    border-color: var(--neuro-cyan);
}
.page-input-buttons {
    display: flex;
    gap: 10px;
}
.page-input-buttons button {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    border: none;
    cursor: pointer;
}
.page-input-buttons .btn-cancel {
    background: var(--neuro-bg-surface);
    color: var(--neuro-text-secondary);
}
.page-input-buttons .btn-confirm {
    background: var(--neuro-cyan);
    color: var(--neuro-bg-deep);
}

@media (max-width: 768px) {
    .page-navigator {
        top: 70px;
        bottom: auto;
        right: 10px;
    }
}

/* ==================== ZOOM CONTROLS MOBILE ==================== */
.zoom-controls-mobile {
    position: fixed;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    flex-direction: column;
    gap: 8px;
    z-index: 45;
}

@media (max-width: 768px) {
    .zoom-controls-mobile { display: flex; }
}

.zoom-controls-mobile button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--neuro-bg-raised);
    border: 2px solid var(--neuro-border);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    color: var(--neuro-text-primary);
    cursor: pointer;
}
.zoom-controls-mobile button.zen-toggle-btn {
    background: linear-gradient(135deg, var(--neuro-purple), #7c3aed);
    border-color: var(--neuro-purple);
    color: white;
}
body.theme-dark .zoom-controls-mobile button {
    background: var(--neuro-bg-raised);
    border-color: var(--neuro-border);
    color: var(--neuro-text-primary);
}
body.theme-dark .zoom-controls-mobile button.zen-toggle-btn {
    background: linear-gradient(135deg, var(--neuro-purple), #7c3aed);
    border-color: var(--neuro-purple);
    color: white;
}

.zoom-controls-mobile .zoom-level {
    background: var(--neuro-bg-deep);
    color: var(--neuro-text-primary);
    font-size: 11px;
    font-weight: bold;
    font-family: 'JetBrains Mono', monospace;
    padding: 4px 8px;
    border-radius: 20px;
    text-align: center;
}

/* Ruler/rainbow buttons in zoom-controls */
.zoom-controls-mobile .mobile-active-btn.hidden {
    display: none !important;
}
.zoom-controls-mobile .mobile-active-btn {
    animation: pulse-btn 2s infinite;
}
@keyframes pulse-btn {
    0%, 100% { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
    50% { box-shadow: 0 2px 15px var(--neuro-cyan-glow); }
}

/* Shimmer animation for next-phase button */
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

#victory-next-phase-btn:not(.hidden) {
    animation: shimmer 3s linear infinite;
    background-size: 200% 100%;
}

/* ==================== CLIPBOARD MODE - ZEN READING ==================== */
body.mode-clipboard #btn-select,
body.mode-clipboard #btn-sniper,
body.mode-clipboard #btn-1col,
body.mode-clipboard #btn-2col,
body.mode-clipboard #btn-3col,
body.mode-clipboard #btn-text-pure,
body.mode-clipboard #btn-sprint,
body.mode-clipboard .layout-selector,
body.mode-clipboard #zoom-display,
body.mode-clipboard .zoom-btns,
body.mode-clipboard #btn-prev-page,
body.mode-clipboard #btn-next-page,
body.mode-clipboard .page-nav-btns,
body.mode-clipboard #btn-eraser,
body.mode-clipboard #eraser-btn,
body.mode-clipboard .toolbar-section:has(#btn-select) {
    display: none !important;
}

/* Mobile: hide unnecessary buttons in clipboard mode */
body.mode-clipboard .mobile-select-option,
body.mode-clipboard [onclick*="toggleSelectMode"],
body.mode-clipboard .mobile-controls .area-btn {
    display: none !important;
}

/* Container optimized for text reading */
body.mode-clipboard #pdf-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background: var(--bg-color, var(--neuro-bg-deep));
}

body.mode-clipboard .reflow-container,
body.mode-clipboard .clipboard-reader-container {
    max-width: 800px !important;
    margin: 0 auto !important;
    font-family: 'Outfit', system-ui, -apple-system, sans-serif !important;
    line-height: 1.8 !important;
}

/* ==================== ACTIVATION INPUT ==================== */
.activation-input {
    width: 100%;
    padding: 15px;
    border: 2px solid var(--neuro-bg-surface);
    border-radius: 12px;
    font-size: 18px;
    text-align: center;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: bold;
    font-family: 'JetBrains Mono', monospace;
    margin: 15px 0;
    transition: border-color 0.3s;
    background: var(--neuro-bg-surface);
    color: var(--neuro-text-primary);
}
.activation-input:focus {
    outline: none;
    border-color: var(--neuro-cyan);
}
.activation-input.error {
    border-color: var(--neuro-red);
    animation: shake 0.5s;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

.animate-shake {
    animation: shake 0.5s;
}

/* ==================== INSTALL BUTTON ==================== */
.install-btn {
    position: fixed;
    bottom: 100px;
    left: 20px;
    background: var(--neuro-cyan);
    color: var(--neuro-bg-deep);
    padding: 12px 20px;
    border-radius: 50px;
    font-weight: bold;
    font-family: 'Space Grotesk', sans-serif;
    display: none;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px var(--neuro-cyan-glow);
    z-index: 60;
    cursor: pointer;
    transition: transform 0.2s;
    border: none;
}
.install-btn:hover { transform: scale(1.05); }
.install-btn.show { display: flex; }

/* Hide install button when in reader */
#reader-view.active ~ .install-btn,
body:has(#reader-view.active) .install-btn {
    display: none !important;
}

/* ==================== TELEPROMPTER ==================== */
.teleprompter-bar {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(150%);
    width: 94%;
    max-width: 600px;
    background: rgba(12, 16, 33, 0.96);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(6, 214, 160, 0.05);
    z-index: 45;
    display: none;
    overflow: hidden;
    transition: transform 0.3s ease;
    border: 1px solid var(--neuro-border);
}
.teleprompter-bar.active {
    display: block;
    transform: translateX(-50%) translateY(0);
}
.teleprompter-bar.minimized {
    transform: translateX(-50%) translateY(150%);
}

.tele-inner {
    display: flex;
    flex-direction: column;
}

.tele-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid var(--neuro-border);
    cursor: grab;
    touch-action: none;
}
.tele-header:active {
    cursor: grabbing;
}

.tele-drag-indicator {
    color: rgba(255, 255, 255, 0.3);
    font-size: 14px;
    margin-right: 4px;
    user-select: none;
}

.teleprompter-bar.dragging {
    transition: none !important;
}

.tele-btn {
    width: 36px;
    height: 32px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--neuro-text-primary);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tele-btn:active {
    background: rgba(255, 255, 255, 0.25);
}

.tele-size {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    min-width: 40px;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
}

.tele-close {
    margin-left: auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.2);
    border: none;
    color: var(--neuro-text-primary);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    position: relative;
}
.tele-close:active {
    background: rgba(239, 68, 68, 0.5);
    transform: scale(0.95);
}

.tele-content {
    padding: 12px 16px;
    max-height: min(25vh, 120px);
    overflow-y: auto;
    text-align: center;
}

.teleprompter-text {
    font-size: var(--teleprompter-font-size, 1.1rem);
    font-weight: 500;
    color: var(--neuro-text-primary);
    line-height: 1.6;
    font-family: 'Outfit', sans-serif;
}
.teleprompter-text .tele-word {
    display: inline;
    transition: all 0.15s ease;
}
.teleprompter-text .current-word {
    background: var(--highlight-color, var(--neuro-cyan));
    color: var(--neuro-bg-deep);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    box-shadow: 0 2px 8px var(--neuro-cyan-glow);
}
.teleprompter-text .read-word {
    color: rgba(255, 255, 255, 0.25);
}

/* Teleprompter progress bar */
.tele-progress-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}

.tele-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--neuro-cyan), var(--neuro-green));
    transition: width 0.3s ease;
    border-radius: 0 2px 0 0;
}

/* Word counter in header */
.tele-counter {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    margin-left: 8px;
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 8px;
    border-radius: 10px;
}

.tele-counter-current {
    color: var(--neuro-cyan);
    font-weight: 700;
}

/* Word pulse animation — usa filter em vez de scale para não causar layout shift */
.word-block.active-word {
    animation: word-pulse 0.8s ease-in-out;
}

@keyframes word-pulse {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.2); }
    100% { filter: brightness(1); }
}

/* Teleprompter Mobile */
@media (max-width: 768px) {
    .teleprompter-bar {
        bottom: 100px;
        width: 96%;
        border-radius: 12px;
    }
    .tele-header {
        padding: 6px 10px;
    }
    .tele-btn {
        width: 32px;
        height: 28px;
        font-size: 11px;
    }
    .tele-close {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }
    .tele-content {
        padding: 10px 12px;
        max-height: min(22vh, 100px);
    }
    .teleprompter-text {
        font-size: var(--teleprompter-font-size, 0.95rem);
    }
}

/* Teleprompter Landscape */
@media (max-height: 500px) {
    .teleprompter-bar {
        bottom: 55px;
        max-width: 500px;
    }
    .tele-header {
        padding: 4px 8px;
    }
    .tele-content {
        max-height: min(30vh, 80px);
        padding: 6px 10px;
    }
    .teleprompter-text {
        font-size: var(--teleprompter-font-size, 0.9rem);
    }
}

/* force-mobile teleprompter */
body.force-mobile .teleprompter-bar {
    bottom: 80px;
}

.teleprompter-show-btn {
    position: fixed;
    bottom: 180px;
    right: 20px;
    background: linear-gradient(135deg, var(--neuro-cyan), var(--neuro-blue));
    color: var(--neuro-bg-deep);
    border: none;
    padding: 10px 18px;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    z-index: 45;
    box-shadow: 0 8px 20px var(--neuro-cyan-glow);
    transition: transform 0.2s, box-shadow 0.2s;
}

/* Mobile: teleprompter show btn left side */
@media (max-width: 768px) {
    .teleprompter-show-btn {
        bottom: 100px;
        left: 12px;
        right: auto;
        padding: 8px 14px;
        font-size: 0.75rem;
    }
}
.teleprompter-show-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(6, 214, 160, 0.5);
}
.teleprompter-show-btn.hidden { display: none; }

/* ==================== REGION EDIT BAR ==================== */
.region-edit-bar {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--neuro-bg-raised), var(--neuro-bg-surface));
    padding: 12px 20px;
    border-radius: 16px;
    display: none;
    align-items: center;
    gap: 12px;
    z-index: 100;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--neuro-border);
}
.region-edit-bar.active { display: flex; }
.region-edit-bar span {
    color: var(--neuro-text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
}
.region-edit-bar button {
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.85rem;
    font-family: 'Outfit', sans-serif;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}
.region-edit-bar .btn-confirm {
    background: linear-gradient(135deg, var(--neuro-green), #16a34a);
    color: white;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}
.region-edit-bar .btn-confirm:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.5);
}
.region-edit-bar .btn-cancel {
    background: linear-gradient(135deg, var(--neuro-red), #dc2626);
    color: white;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}
.region-edit-bar .btn-cancel:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.5);
}
@media (max-width: 768px) {
    .region-edit-bar {
        bottom: 80px;
        padding: 10px 16px;
        gap: 8px;
        max-width: calc(100% - 32px);
    }
    .region-edit-bar span {
        font-size: 0.75rem;
    }
    .region-edit-bar button {
        padding: 8px 12px;
        font-size: 0.75rem;
    }
}

/* ==================== GHOST MODE MOBILE ==================== */
@media (max-width: 768px) {
    /* Sidebar scrollável + dvh — sem isso, em telas com PDF aberto a barra
       de URL mobile + bottom inset comem ~100px e o botão login some.
       100dvh respeita address bar dinâmica; fallback 100vh pra browsers antigos. */
    .neuro-sidebar {
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: env(safe-area-inset-bottom, 16px);
    }

    /* 1a. Modo SUBLINHAR (padrão, sem .highlight-full) — usa
       text-decoration: underline. Mais robusto que border-bottom em mobile
       porque acompanha a baseline do texto e não é clipado por line-height. */
    /* Mobile: a text-decoration:underline (fina, na baseline) sumia sobre o PDF.
       Voltamos pra uma BARRA ::after grossa + glow colada na base do bloco —
       robusta em qualquer render mobile e claramente visível (pedido do owner). */
    body:not(.highlight-full) .word-block.active {
        background-color: transparent !important;
        box-shadow: none !important;
        mix-blend-mode: normal !important;
        border-radius: 0 !important;
        color: inherit !important;
        text-shadow: none !important;
        text-decoration: none !important;
    }
    body:not(.highlight-full) .word-block.active::after {
        content: '' !important;
        position: absolute !important;
        inset: auto 0 -1px 0 !important;
        height: 4px !important;
        background: var(--highlight-color, #06d6a0) !important;
        opacity: 1 !important;
        border-radius: 2px !important;
        box-shadow: 0 0 7px var(--highlight-color, #06d6a0), 0 1px 3px rgba(0, 0, 0, 0.45) !important;
        mix-blend-mode: normal !important;
        text-decoration: none !important;
    }

    /* 1b. Modo DESTACAR PALAVRA (.highlight-full ativo) — background sólido
       + box-shadow pra ser bulletproof em qualquer renderização mobile. */
    body.highlight-full .word-block.active {
        background-color: rgba(6, 214, 160, 0.28) !important;
        box-shadow: 0 0 0 2px rgba(6, 214, 160, 0.6) !important;
        mix-blend-mode: normal !important;
        border-radius: 4px !important;
        color: inherit !important;
        text-shadow: none !important;
        text-decoration: none !important;
    }
    body.highlight-full .word-block.active::after {
        background-color: transparent !important;
        box-shadow: none !important;
        opacity: 0 !important;
    }

    /* 2. Rainbow mode also transparent */
    .word-block.active.rainbow-highlight {
        background-color: transparent !important;
        border-bottom: 2px solid currentColor;
        color: currentColor !important;
        text-shadow: 0 0 8px currentColor;
    }
    .word-block.active.rainbow-highlight::after {
        opacity: 0 !important;
    }

    /* 3. Ruler more subtle */
    #reading-guide.active {
        opacity: 0.5 !important;
    }

    /* 4. Teleprompter more prominent */
    .teleprompter-bar.active {
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
    }

    /* 5. Teleprompter text larger */
    .teleprompter-text {
        font-size: var(--teleprompter-font-size, 1.2rem);
        line-height: 1.6;
    }

    /* 6. Current word SUPER highlighted */
    .teleprompter-text .current-word {
        background: linear-gradient(135deg, var(--highlight-color, var(--neuro-cyan)), color-mix(in srgb, var(--highlight-color, var(--neuro-cyan)) 80%, black)) !important;
        padding: 4px 8px !important;
        border-radius: 6px !important;
        font-weight: 800 !important;
        color: var(--neuro-bg-deep) !important;
        box-shadow: 0 2px 8px color-mix(in srgb, var(--highlight-color, var(--neuro-cyan)) 50%, transparent);
    }
}

/* ==================== AUTO-HIDE MENU ==================== */
.mobile-controls.auto-hidden {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}
.mobile-controls {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Show menu button when hidden */
.show-menu-btn {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(6, 214, 160, 0.85);
    color: var(--neuro-bg-deep);
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    z-index: 60;
    display: none;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 15px var(--neuro-cyan-glow);
}
.show-menu-btn.visible {
    display: flex;
}

/* ==================== VICTORY SCREEN ==================== */
.victory-overlay {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: linear-gradient(135deg, var(--neuro-bg-deep) 0%, #0c1a3a 50%, #1a0c2e 100%);
    display: none;
    /* flex-start + margin-block:auto: centraliza quando cabe, rola do topo
       quando o card de vitória é mais alto que a tela (em retrato o card tem
       overflow:hidden e sem max-height, então center cortava o topo). */
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.victory-overlay.active { display: flex; }
.victory-overlay > * { margin-block: auto; }

.victory-card {
    background: var(--neuro-bg-raised);
    border-radius: 24px;
    padding: 32px 24px;
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 60px rgba(6, 214, 160, 0.08);
    position: relative;
    overflow: hidden;
    margin: auto;
    border: 1px solid var(--neuro-border);
    color: var(--neuro-text-primary);
}

.victory-stats-row {
    margin-bottom: 16px;
}

.victory-mini-stats {
    margin-top: 12px;
}

.victory-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.victory-share-btn,
.victory-close-btn {
    width: 100%;
}

/* Victory responsive - Mobile Portrait */
@media (max-width: 480px) {
    .victory-card {
        padding: 24px 20px;
        border-radius: 20px;
        max-width: 340px;
    }
    .victory-card h2 { font-size: 1.5rem !important; }
    .stat-number { font-size: 36px !important; }
    .stat-box { padding: 14px; margin: 10px 0; }
    .victory-mini-stats > div { padding: 10px !important; }
    .victory-mini-stats .text-2xl { font-size: 1.25rem !important; }
    .victory-buttons button { padding: 10px !important; font-size: 14px !important; }
}

/* Victory responsive - Landscape */
@media (max-height: 500px) and (orientation: landscape) {
    .victory-overlay {
        padding: 10px;
        align-items: flex-start;
    }
    .victory-card {
        padding: 16px 24px;
        border-radius: 16px;
        max-width: 600px;
        max-height: calc(100vh - 20px);
        overflow-y: auto;
    }

    .victory-icon { display: none; }

    .victory-card h2 {
        font-size: 1.1rem !important;
        margin-bottom: 4px !important;
    }
    .victory-card > p:first-of-type {
        font-size: 11px !important;
        margin-bottom: 10px !important;
    }

    .victory-stats-row {
        display: flex;
        gap: 12px;
        align-items: stretch;
        margin-bottom: 10px;
    }

    .stat-box {
        padding: 10px 16px;
        margin: 0;
        flex: 1.2;
    }
    .stat-number { font-size: 32px !important; }
    .stat-box p { font-size: 11px !important; margin: 0 !important; }

    .victory-mini-stats {
        flex: 1;
        margin-top: 0 !important;
        flex-direction: column !important;
        gap: 6px !important;
    }
    .victory-mini-stats > div {
        padding: 6px 10px !important;
        flex: none !important;
    }
    .victory-mini-stats .text-2xl {
        font-size: 1rem !important;
    }
    .victory-mini-stats .text-xs {
        font-size: 9px !important;
    }

    #victory-comparison {
        font-size: 11px !important;
        margin: 8px 0 !important;
    }

    .victory-buttons {
        flex-direction: row;
        gap: 10px;
    }
    .victory-buttons button {
        padding: 10px 20px !important;
        font-size: 12px !important;
        flex: 1;
    }

    .victory-card > p:last-child {
        margin-top: 10px !important;
        font-size: 10px !important;
    }
}

.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--neuro-amber);
    animation: confetti-fall 3s ease-out forwards;
}

@keyframes confetti-fall {
    0% { transform: translateY(-100px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(400px) rotate(720deg); opacity: 0; }
}

.stat-box {
    background: linear-gradient(135deg, rgba(6, 214, 160, 0.08) 0%, rgba(14, 165, 233, 0.08) 100%);
    border-radius: 16px;
    padding: 20px;
    margin: 15px 0;
    border: 1px solid var(--neuro-border);
}

.stat-number {
    font-size: 48px;
    font-weight: 900;
    font-family: 'Space Grotesk', sans-serif;
    background: linear-gradient(135deg, var(--neuro-cyan), var(--neuro-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.share-canvas {
    display: none;
}

/* ==================== WATERMARK ==================== */
.watermark {
    position: fixed;
    bottom: 8px;
    right: 12px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-color, var(--neuro-text-primary));
    opacity: 0.12;
    pointer-events: none;
    z-index: 999;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

body.theme-dark .watermark {
    color: #ffffff;
    opacity: 0.08;
}

.zen-mode .watermark {
    opacity: 0.05;
}

@media (max-width: 768px) {
    .watermark {
        font-size: 9px;
        bottom: 6px;
        right: 8px;
    }
}

/* ==================== NEUROSPRINT ==================== */
.neurosprint-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 11, 20, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 500;
    display: none;
    flex-direction: column;
}
.neurosprint-overlay.active {
    display: flex;
}

/* Header */
.neurosprint-header {
    background: linear-gradient(135deg, var(--neuro-cyan), var(--neuro-blue));
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.neurosprint-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--neuro-bg-deep);
    font-weight: 800;
    font-size: 1.1rem;
    font-family: 'Space Grotesk', sans-serif;
}

.neurosprint-phase-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: 'Space Grotesk', sans-serif;
}

/* Game Branding Watermark */
.game-branding {
    position: fixed;
    bottom: 220px;
    right: 16px;
    opacity: 0.4;
    pointer-events: none;
    z-index: 505;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    padding: 8px 12px;
    border-radius: 12px;
}

.game-branding-icon {
    font-size: 1.5rem;
}

.game-branding-text {
    text-align: right;
}

.game-branding-name {
    color: white;
    font-weight: 700;
    font-size: 0.85rem;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.02em;
}

.game-branding-url {
    color: var(--neuro-purple);
    font-size: 0.65rem;
    font-weight: 600;
}

@media (max-width: 640px) {
    .game-branding {
        bottom: 250px;
        right: 8px;
        padding: 6px 10px;
    }
    .game-branding-icon {
        font-size: 1.2rem;
    }
    .game-branding-name {
        font-size: 0.75rem;
    }
}

/* Stats */
.neurosprint-stats {
    display: flex;
    align-items: center;
    gap: 16px;
}

.neurosprint-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.3);
    padding: 6px 12px;
    border-radius: 20px;
}

.neurosprint-stat-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    font-family: 'Space Grotesk', sans-serif;
}

.neurosprint-stat-value {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--neuro-gold);
    font-family: 'JetBrains Mono', monospace;
}

.combo-fire {
    color: #f97316;
    animation: comboPulse 0.3s ease;
}

@keyframes comboPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

/* ===== PHASE 1: SPRINT ===== */
.sprint-phase {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Timer Bar */
.sprint-timer-container {
    padding: 16px 24px 0;
    flex-shrink: 0;
}

.sprint-timer-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.sprint-timer-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--neuro-green) 0%, var(--neuro-gold) 50%, var(--neuro-red) 100%);
    border-radius: 4px;
    transition: width 0.1s linear;
    width: 100%;
}

.sprint-timer-text {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    font-family: 'Outfit', sans-serif;
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.sprint-timer-text strong {
    color: var(--neuro-gold);
    font-size: 1.1rem;
    font-family: 'JetBrains Mono', monospace;
}

/* Sprint content */
.sprint-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.sprint-text {
    font-size: 1.3rem;
    line-height: 2.2;
    color: var(--neuro-text-primary);
    text-align: left;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 16px;
    font-family: 'Outfit', sans-serif;
}

/* Skip button */
.sprint-skip-container {
    padding: 16px 24px 24px;
    flex-shrink: 0;
}

.sprint-skip-btn {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
    font-size: 1rem;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sprint-skip-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Countdown Overlay */
.countdown-overlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 11, 20, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 520;
}

.countdown-number {
    font-size: 8rem;
    font-weight: 900;
    font-family: 'Space Grotesk', sans-serif;
    color: var(--neuro-gold);
    animation: countdownPulse 0.8s ease;
}

.countdown-text {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 16px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: 'Space Grotesk', sans-serif;
}

@keyframes countdownPulse {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

/* Transition Blur */
.transition-blur {
    position: absolute;
    inset: 0;
    background: rgba(8, 11, 20, 0.95);
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 520;
    opacity: 0;
    animation: fadeInBlur 0.5s ease forwards;
    padding: 20px;
    text-align: center;
}

@keyframes fadeInBlur {
    to { opacity: 1; }
}

.transition-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--neuro-purple), #ec4899);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    animation: bounceIn 0.5s ease;
    flex-shrink: 0;
}

.transition-title {
    font-size: 1.4rem;
    font-weight: 800;
    font-family: 'Space Grotesk', sans-serif;
    color: white;
    margin-bottom: 8px;
}

.transition-subtitle {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.95rem;
    max-width: 280px;
    line-height: 1.4;
    font-family: 'Outfit', sans-serif;
}

@media (min-width: 640px) {
    .transition-icon {
        width: 80px;
        height: 80px;
        margin-bottom: 24px;
    }
    .transition-title {
        font-size: 1.75rem;
    }
    .transition-subtitle {
        font-size: 1.1rem;
        max-width: 400px;
    }
}

/* ===== PHASE 2: ARCADE ===== */
.arcade-phase {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.arcade-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    padding-bottom: 220px;
}

.arcade-text {
    font-size: 1.3rem;
    line-height: 2.2;
    color: var(--neuro-text-primary);
    text-align: left;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 16px;
    font-family: 'Outfit', sans-serif;
}

.arcade-text strong {
    font-weight: 700;
}

.arcade-text .text-blue-400,
.arcade-text .structure-chapter {
    color: #60a5fa;
    font-weight: 700;
}

.arcade-text .text-yellow-400,
.arcade-text .structure-article {
    color: var(--neuro-gold);
    font-weight: 700;
}

.arcade-text .text-purple-400,
.arcade-text .structure-paragraph {
    color: #c084fc;
    font-weight: 600;
}

.arcade-text .text-cyan-400,
.arcade-text .structure-inciso {
    color: var(--neuro-cyan);
}

.arcade-text .text-green-400,
.arcade-text .structure-alinea {
    color: #4ade80;
}

/* Structure classes */
.structure-chapter {
    color: #60a5fa;
    font-weight: 700;
    font-size: 1.15em;
    display: inline;
}

.structure-article {
    color: var(--neuro-gold);
    font-weight: 700;
}

.structure-paragraph {
    color: #c084fc;
    font-weight: 600;
}

.structure-inciso {
    color: var(--neuro-cyan);
}

.structure-alinea {
    color: #4ade80;
}

/* Sprint text colors */
.sprint-text .text-blue-400,
.sprint-text .structure-chapter { color: #60a5fa; font-weight: 700; }
.sprint-text .text-yellow-400,
.sprint-text .structure-article { color: var(--neuro-gold); font-weight: 700; }
.sprint-text .text-purple-400 { color: #c084fc; }
.sprint-text .text-cyan-400 { color: var(--neuro-cyan); }
.sprint-text .text-green-400 { color: #4ade80; }

/* Arcade Gap */
.arcade-gap {
    display: inline-block;
    min-width: 80px;
    padding: 4px 16px;
    margin: 0 4px;
    background: rgba(6, 214, 160, 0.12);
    border: 2px dashed rgba(6, 214, 160, 0.5);
    border-radius: 8px;
    color: var(--neuro-cyan, #06d6a0);
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    text-align: center;
    transition: all 0.3s ease;
    vertical-align: baseline;
}

.arcade-gap.active {
    border-color: var(--neuro-gold);
    background: rgba(251, 191, 36, 0.15);
    box-shadow: 0 0 25px rgba(251, 191, 36, 0.3);
    animation: gapPulse 1.5s ease-in-out infinite;
    color: var(--neuro-gold);
}

@keyframes gapPulse {
    0%, 100% { box-shadow: 0 0 15px rgba(251, 191, 36, 0.2); }
    50% { box-shadow: 0 0 30px rgba(251, 191, 36, 0.5); }
}

.arcade-gap.correct {
    border-color: var(--neuro-green);
    border-style: solid;
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    animation: correctFly 0.5s ease;
}

@keyframes correctFly {
    0% { transform: scale(0.8); opacity: 0.6; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes highlightFade {
    0% { opacity: 1; background: rgba(6, 214, 160, 0.3); }
    70% { opacity: 0.8; background: rgba(6, 214, 160, 0.2); }
    100% { opacity: 0; background: rgba(6, 214, 160, 0); }
}

.arcade-gap.incorrect {
    border-color: var(--neuro-red, #ef4444);
    border-style: solid;
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    animation: shake 0.5s ease;
}

.arcade-gap.timeout {
    border-color: var(--neuro-amber, #f59e0b);
    border-style: solid;
    background: rgba(245, 158, 11, 0.15);
    color: var(--neuro-gold, #fbbf24);
    animation: timeoutPulse 0.5s ease;
}

@keyframes timeoutPulse {
    0% { transform: scale(0.95); opacity: 0.7; }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

/* Options Panel - Fixed at footer */
.arcade-options-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(8, 11, 20, 0.98) 0%, rgba(12, 16, 33, 0.95) 100%);
    border-top: 1px solid var(--neuro-border);
    padding: 16px 20px 24px;
    z-index: 510;
    backdrop-filter: blur(20px);
}

/* Gap timer */
.gap-timer-container {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    margin-bottom: 8px;
    overflow: hidden;
}

.gap-timer-bar {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--neuro-cyan), var(--neuro-blue));
    border-radius: 2px;
    transition: width 0.1s linear;
}

.gap-timer-bar.timer-warning {
    background: linear-gradient(90deg, var(--neuro-amber), var(--neuro-gold));
}

.gap-timer-bar.timer-critical {
    background: linear-gradient(90deg, var(--neuro-red), #f87171);
    animation: timerPulse 0.5s ease-in-out infinite;
}

@keyframes timerPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.options-progress {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    margin-bottom: 12px;
    overflow: hidden;
}

.options-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--neuro-green), #4ade80);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.options-instruction {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Outfit', sans-serif;
}

.options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-width: 500px;
    margin: 0 auto;
}

.option-btn {
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(6, 214, 160, 0.08), var(--neuro-bg-surface));
    border: 2px solid rgba(6, 214, 160, 0.2);
    border-radius: 16px;
    color: var(--neuro-text-primary);
    font-weight: 700;
    font-size: 1.1rem;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.option-btn:hover {
    background: linear-gradient(135deg, var(--neuro-cyan), var(--neuro-blue));
    border-color: var(--neuro-cyan);
    color: var(--neuro-bg-deep);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--neuro-cyan-glow);
}

.option-btn:active {
    transform: scale(0.98);
}

.option-btn.correct-flash {
    background: linear-gradient(135deg, var(--neuro-green), #16a34a) !important;
    border-color: var(--neuro-green) !important;
    color: white !important;
    animation: btnCorrect 0.4s ease;
}

.option-btn.incorrect-flash {
    background: linear-gradient(135deg, var(--neuro-red), #dc2626) !important;
    border-color: var(--neuro-red) !important;
    color: white !important;
    animation: shake 0.4s ease;
}

@keyframes btnCorrect {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ===== RESULT FINAL ===== */
.neurosprint-result {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 16px 16px;
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 30px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.result-icon-container {
    width: 60px;
    height: 60px;
    min-height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    margin-top: 10px;
    animation: resultBounce 0.6s ease;
    flex-shrink: 0;
}

.result-icon-container i {
    width: 28px !important;
    height: 28px !important;
}

@media (min-width: 640px) {
    .result-icon-container {
        width: 100px;
        height: 100px;
        min-height: 100px;
        margin-bottom: 24px;
        margin-top: 20px;
    }
    .result-icon-container i {
        width: 48px !important;
        height: 48px !important;
    }
    .neurosprint-result {
        padding: 40px 24px;
        justify-content: center;
    }
}

.result-icon-container.excellent {
    background: linear-gradient(135deg, var(--neuro-green), #16a34a);
}
.result-icon-container.good {
    background: linear-gradient(135deg, var(--neuro-cyan), var(--neuro-blue));
}
.result-icon-container.okay {
    background: linear-gradient(135deg, var(--neuro-amber), #d97706);
}
.result-icon-container.needs-work {
    background: linear-gradient(135deg, var(--neuro-purple), #7c3aed);
}

@keyframes resultBounce {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.result-title {
    font-size: 1.3rem;
    font-weight: 800;
    font-family: 'Space Grotesk', sans-serif;
    color: white;
    margin-bottom: 4px;
}

.result-subtitle {
    color: var(--neuro-text-secondary);
    font-size: 0.85rem;
    margin-bottom: 16px;
    max-width: 260px;
    line-height: 1.3;
    font-family: 'Outfit', sans-serif;
}

@media (min-width: 640px) {
    .result-title {
        font-size: 2rem;
        margin-bottom: 8px;
    }
    .result-subtitle {
        font-size: 1.1rem;
        margin-bottom: 32px;
        max-width: none;
    }
}

.result-stats {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

@media (min-width: 640px) {
    .result-stats {
        gap: 40px;
        margin-bottom: 32px;
    }
}

.result-stat {
    text-align: center;
}

.result-stat-value {
    font-size: 2rem;
    font-weight: 800;
    font-family: 'Space Grotesk', sans-serif;
    color: var(--neuro-gold);
}

@media (min-width: 640px) {
    .result-stat-value {
        font-size: 3rem;
    }
}

.result-stat-label {
    font-size: 0.75rem;
    color: var(--neuro-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: 'Space Grotesk', sans-serif;
}

@media (min-width: 640px) {
    .result-stat-label {
        font-size: 0.85rem;
    }
}

/* Result branding */
.result-branding {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 12px 0;
    padding: 8px 16px;
    background: rgba(167, 139, 250, 0.1);
    border-radius: 30px;
    border: 1px solid rgba(167, 139, 250, 0.2);
}

@media (min-width: 640px) {
    .result-branding {
        gap: 8px;
        margin: 20px 0;
        padding: 10px 20px;
    }
}

.result-branding-icon {
    font-size: 1rem;
}

@media (min-width: 640px) {
    .result-branding-icon {
        font-size: 1.2rem;
    }
}

.result-branding-name {
    font-weight: 800;
    color: var(--neuro-purple);
    font-size: 0.85rem;
    font-family: 'Space Grotesk', sans-serif;
}

@media (min-width: 640px) {
    .result-branding-name {
        font-size: 0.95rem;
    }
}

.result-branding-divider {
    color: rgba(167, 139, 250, 0.4);
}

.result-branding-url {
    font-weight: 600;
    color: #c4b5fd;
    font-size: 0.75rem;
}

@media (min-width: 640px) {
    .result-branding-url {
        font-size: 0.85rem;
    }
}

.result-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 320px;
}

@media (min-width: 640px) {
    .result-actions {
        gap: 12px;
        max-width: none;
    }
}

.neurosprint-btn {
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.9rem;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.neurosprint-btn-primary {
    background: linear-gradient(135deg, var(--neuro-cyan), var(--neuro-green));
    color: var(--neuro-bg-deep);
}

.neurosprint-btn-primary:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 20px var(--neuro-cyan-glow);
}

.neurosprint-btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    color: var(--neuro-text-secondary);
    border: 1px solid var(--neuro-border);
}

.neurosprint-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

@media (min-width: 640px) {
    .neurosprint-btn {
        padding: 14px 28px;
        border-radius: 14px;
        font-size: 1rem;
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .neurosprint-header {
        padding: 10px 16px;
    }
    .neurosprint-title {
        font-size: 0.95rem;
    }
    .neurosprint-stats {
        gap: 8px;
    }
    .neurosprint-stat {
        padding: 4px 8px;
    }
    .neurosprint-stat-value {
        font-size: 0.95rem;
    }
    .sprint-content, .arcade-content {
        padding: 16px;
    }
    .arcade-content {
        padding-bottom: 240px;
    }
    .sprint-text, .arcade-text {
        font-size: 1.1rem;
        line-height: 2;
    }
    .countdown-number {
        font-size: 6rem;
    }
    .arcade-options-panel {
        padding: 12px 16px 20px;
    }
    .options-grid {
        gap: 8px;
    }
    .option-btn {
        padding: 14px 12px;
        font-size: 1rem;
        min-height: 52px;
    }
    .result-stat-value {
        font-size: 2.5rem;
    }
    .result-actions {
        flex-direction: column;
        width: 100%;
        padding: 0 20px;
    }
    .neurosprint-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===== HARDCORE MODE (Pen & Paper Toggle + Checkpoint) ===== */
.hardcore-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 14px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hardcore-toggle:hover {
    background: rgba(0, 0, 0, 0.4);
}

.hardcore-toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.hardcore-toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hardcore-toggle.active .hardcore-toggle-switch {
    background: linear-gradient(135deg, var(--neuro-amber), #d97706);
}

.hardcore-toggle.active .hardcore-toggle-switch::after {
    left: 22px;
}

.hardcore-toggle-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hardcore-toggle-title {
    font-size: 0.8rem;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
    color: white;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hardcore-toggle-subtitle {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'Outfit', sans-serif;
}

/* Checkpoint Modal */
.checkpoint-modal {
    position: absolute;
    inset: 0;
    background: rgba(8, 11, 20, 0.97);
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 525;
    padding: 24px;
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
}

.checkpoint-icon {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, var(--neuro-amber), #d97706);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    animation: bounceIn 0.6s ease;
    box-shadow: 0 0 40px rgba(245, 158, 11, 0.3);
}

.checkpoint-title {
    font-size: 1.5rem;
    font-weight: 800;
    font-family: 'Space Grotesk', sans-serif;
    color: white;
    margin-bottom: 8px;
    text-align: center;
}

.checkpoint-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    text-align: center;
    max-width: 400px;
    margin-bottom: 16px;
    line-height: 1.5;
    font-family: 'Outfit', sans-serif;
}

.checkpoint-tip {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 32px;
    max-width: 400px;
}

.checkpoint-tip-title {
    font-size: 0.75rem;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
    color: var(--neuro-gold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.checkpoint-tip-text {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    font-family: 'Outfit', sans-serif;
}

.checkpoint-btn {
    padding: 18px 40px;
    background: linear-gradient(135deg, var(--neuro-cyan), var(--neuro-green));
    border: none;
    border-radius: 16px;
    color: var(--neuro-bg-deep);
    font-weight: 800;
    font-size: 1.1rem;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
    box-shadow: 0 8px 25px var(--neuro-cyan-glow);
}

.checkpoint-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 35px rgba(6, 214, 160, 0.4);
}

.checkpoint-btn:active {
    transform: scale(0.98);
}

.checkpoint-btn.confirmed {
    background: linear-gradient(135deg, var(--neuro-green), #16a34a);
    animation: confirmPulse 0.5s ease;
}

@keyframes confirmPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.checkpoint-skip {
    margin-top: 20px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.8rem;
    cursor: pointer;
    transition: color 0.2s ease;
    font-family: 'Outfit', sans-serif;
}

.checkpoint-skip:hover {
    color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 768px) {
    .hardcore-toggle {
        padding: 6px 10px;
    }
    .hardcore-toggle-title {
        font-size: 0.7rem;
    }
    .hardcore-toggle-subtitle {
        display: none;
    }
    .hardcore-toggle-switch {
        width: 36px;
        height: 20px;
    }
    .hardcore-toggle-switch::after {
        width: 16px;
        height: 16px;
    }
    .hardcore-toggle.active .hardcore-toggle-switch::after {
        left: 18px;
    }
    .checkpoint-icon {
        width: 80px;
        height: 80px;
    }
    .checkpoint-title {
        font-size: 1.3rem;
    }
    .checkpoint-subtitle {
        font-size: 0.9rem;
    }
}

/* ===== FLOATING SCORE (RPG Style) ===== */
.floating-score {
    position: fixed;
    color: var(--neuro-gold);
    font-weight: 900;
    font-size: 1.5rem;
    font-family: 'Space Grotesk', sans-serif;
    pointer-events: none;
    z-index: 9999;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 20px rgba(251, 191, 36, 0.4);
    animation: floatUp 1s ease-out forwards;
}

@keyframes floatUp {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    30% { opacity: 1; transform: translateY(-15px) scale(1.3); }
    100% { opacity: 0; transform: translateY(-50px) scale(1); }
}

/* Big score in header */
.neurosprint-score-big {
    font-size: 1.3rem;
    font-weight: 900;
    font-family: 'JetBrains Mono', monospace;
    color: var(--neuro-gold);
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
}

/* Round Indicator */
.round-indicator {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.08);
    padding: 3px 10px;
    border-radius: 12px;
    margin-left: 8px;
    font-family: 'JetBrains Mono', monospace;
}

/* Result stat label (duplicate override) */
.result-stat-label {
    font-size: 0.8rem;
    color: var(--neuro-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: 'Space Grotesk', sans-serif;
}

/* ===== DIFFICULTY SELECTION MODAL ===== */
.difficulty-modal {
    position: fixed;
    inset: 0;
    background: rgba(8, 11, 20, 0.97);
    backdrop-filter: blur(12px);
    z-index: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.difficulty-modal.active {
    opacity: 1;
    visibility: visible;
}

.difficulty-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 16px 40px;
    min-height: 100%;
    width: 100%;
    max-width: 500px;
}

.difficulty-title {
    font-size: 1.4rem;
    font-weight: 800;
    font-family: 'Space Grotesk', sans-serif;
    color: white;
    margin-bottom: 6px;
    text-align: center;
}

.difficulty-subtitle {
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 20px;
    text-align: center;
    font-size: 0.9rem;
    font-family: 'Outfit', sans-serif;
}

.difficulty-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.difficulty-card {
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.difficulty-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.difficulty-card:active {
    transform: scale(0.98);
}

.difficulty-card.selected {
    border-width: 3px;
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.06);
}

.difficulty-card.selected .difficulty-check {
    opacity: 1;
    transform: scale(1);
}

.difficulty-card.easy { border-color: var(--neuro-green); background: rgba(34, 197, 94, 0.08); }
.difficulty-card.easy.selected { box-shadow: 0 0 25px rgba(34, 197, 94, 0.2); }
.difficulty-card.easy .difficulty-icon { background: linear-gradient(135deg, var(--neuro-green), #16a34a); }

.difficulty-card.normal { border-color: var(--neuro-cyan); background: rgba(6, 214, 160, 0.08); }
.difficulty-card.normal.selected { box-shadow: 0 0 25px rgba(6, 214, 160, 0.2); }
.difficulty-card.normal .difficulty-icon { background: linear-gradient(135deg, var(--neuro-cyan), var(--neuro-blue)); }

.difficulty-card.hard { border-color: var(--neuro-purple); background: rgba(167, 139, 250, 0.08); }
.difficulty-card.hard.selected { box-shadow: 0 0 25px rgba(167, 139, 250, 0.2); }
.difficulty-card.hard .difficulty-icon { background: linear-gradient(135deg, var(--neuro-purple), #9333ea); }

.difficulty-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.difficulty-icon i { color: white; }

.difficulty-info {
    flex: 1;
    text-align: left;
}

.difficulty-label {
    font-size: 1.05rem;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
    color: white;
    margin-bottom: 2px;
}

.difficulty-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 0;
    font-family: 'Outfit', sans-serif;
}

.difficulty-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.difficulty-multiplier {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
}

.difficulty-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
}

.difficulty-card.easy .difficulty-check { color: #16a34a; }
.difficulty-card.normal .difficulty-check { color: var(--neuro-blue); }
.difficulty-card.hard .difficulty-check { color: #9333ea; }

.difficulty-card.easy .difficulty-multiplier { background: rgba(34, 197, 94, 0.2); color: #86efac; }
.difficulty-card.normal .difficulty-multiplier { background: rgba(6, 214, 160, 0.2); color: var(--neuro-cyan); }
.difficulty-card.hard .difficulty-multiplier { background: rgba(167, 139, 250, 0.2); color: #d8b4fe; }

.difficulty-start-btn {
    margin-top: 24px;
    padding: 16px 32px;
    background: linear-gradient(135deg, var(--neuro-cyan), var(--neuro-blue));
    border: none;
    border-radius: 14px;
    color: var(--neuro-bg-deep);
    font-weight: 700;
    font-size: 1rem;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    width: 100%;
    max-width: 300px;
}

.difficulty-start-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 30px var(--neuro-cyan-glow);
}

.difficulty-start-btn:active {
    transform: scale(0.98);
}

.difficulty-close {
    position: fixed;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
}

/* ===== PROFILE MODAL ===== */
.profile-modal {
    position: fixed;
    inset: 0;
    background: rgba(8, 11, 20, 0.97);
    backdrop-filter: blur(20px);
    z-index: 650;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.profile-modal.active {
    opacity: 1;
    visibility: visible;
}

.profile-card {
    background: linear-gradient(135deg, var(--neuro-bg-raised), var(--neuro-bg-deep));
    border: 2px solid var(--neuro-border);
    border-radius: 24px;
    padding: 32px;
    max-width: 400px;
    width: 100%;
    text-align: center;
}

.profile-badge {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--neuro-gold), var(--neuro-amber));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.3);
}

.profile-title {
    font-size: 1.5rem;
    font-weight: 800;
    font-family: 'Space Grotesk', sans-serif;
    color: white;
    margin-bottom: 8px;
}

.profile-subtitle {
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 24px;
    font-family: 'Outfit', sans-serif;
}

.profile-input-group {
    margin-bottom: 16px;
    text-align: left;
}

.profile-input-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 6px;
    display: block;
    font-family: 'Outfit', sans-serif;
}

.profile-input {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid var(--neuro-border);
    border-radius: 12px;
    color: white;
    font-size: 1rem;
    font-family: 'Outfit', sans-serif;
    transition: all 0.2s ease;
}

.profile-input:focus {
    outline: none;
    border-color: var(--neuro-gold);
    background: rgba(255, 255, 255, 0.06);
}

.profile-input::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

/* Inline validation: error visual próximo ao input + animação shake sutil
   pra chamar atenção sem ser invasiva. role="alert" do JS faz screen reader
   anunciar a mensagem automaticamente. */
.input-invalid,
input.input-invalid,
textarea.input-invalid {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.06) !important;
    animation: inputShakeError 0.32s ease-in-out;
}
.input-invalid:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}
.input-error-msg {
    margin-top: 6px;
    font-size: 12px;
    color: #ef4444;
    font-weight: 500;
}
@keyframes inputShakeError {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
    .input-invalid { animation: none; }
}

.profile-save-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--neuro-gold), var(--neuro-amber));
    border: none;
    border-radius: 12px;
    color: var(--neuro-bg-deep);
    font-weight: 800;
    font-size: 1rem;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    margin-top: 8px;
    transition: all 0.2s ease;
}

.profile-save-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(251, 191, 36, 0.3);
}

.profile-skip {
    margin-top: 16px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.85rem;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
}

/* ===== USER HUD ===== */
.user-hud {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.06), rgba(245, 158, 11, 0.03));
    border: 1px solid rgba(251, 191, 36, 0.15);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.user-hud:hover {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.06));
}

.user-avatar {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--neuro-gold), var(--neuro-amber));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-info {
    text-align: left;
}

.user-name {
    font-size: 0.85rem;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
    color: var(--neuro-text-primary);
}

.user-level {
    font-size: 0.7rem;
    color: var(--neuro-text-muted);
    font-family: 'JetBrains Mono', monospace;
}

.theme-dark .user-name { color: white; }
.theme-dark .user-level { color: rgba(255, 255, 255, 0.5); }

/* XP Bar on result screen */
.xp-progress-container {
    width: 100%;
    max-width: 300px;
    margin: 16px auto;
}

.xp-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--neuro-text-muted);
    margin-bottom: 6px;
    font-family: 'JetBrains Mono', monospace;
}

.xp-progress-bar {
    height: 8px;
    background: rgba(251, 191, 36, 0.15);
    border-radius: 4px;
    overflow: hidden;
}

.xp-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--neuro-gold), var(--neuro-amber));
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* Level Up Animation */
.level-up-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: linear-gradient(135deg, var(--neuro-gold), var(--neuro-amber));
    color: var(--neuro-bg-deep);
    padding: 24px 40px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 1.2rem;
    font-family: 'Space Grotesk', sans-serif;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 0 60px rgba(251, 191, 36, 0.5);
    text-align: center;
}

.level-up-toast.show {
    animation: levelUpPop 2s ease forwards;
}

/* ===== FINETUNE SELECTION MODAL ===== */
.finetune-modal {
    position: fixed;
    inset: 0;
    background: rgba(8, 11, 20, 0.8);
    backdrop-filter: blur(8px);
    z-index: 550;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.finetune-modal.active {
    opacity: 1;
    visibility: visible;
}

.finetune-card {
    background: var(--neuro-bg-raised);
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    border-radius: 20px 20px 0 0;
    padding: 20px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--neuro-border);
    border-bottom: none;
    color: var(--neuro-text-primary);
}

.finetune-modal.active .finetune-card {
    transform: translateY(0);
}

.finetune-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.finetune-title {
    font-size: 1.1rem;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
    color: var(--neuro-text-primary);
}

.finetune-close {
    background: var(--neuro-bg-surface);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--neuro-text-secondary);
}

.finetune-close:hover {
    background: rgba(239, 68, 68, 0.15);
    color: var(--neuro-red);
}

.finetune-instructions {
    font-size: 0.85rem;
    color: var(--neuro-text-secondary);
    margin-bottom: 16px;
    font-family: 'Outfit', sans-serif;
}

.finetune-words-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px;
    background: var(--neuro-bg-surface);
    border-radius: 12px;
    border: 1px solid var(--neuro-border);
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 16px;
}

.finetune-word {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: 'Outfit', sans-serif;
    border: 2px solid var(--neuro-border);
    background: var(--neuro-bg-raised);
    color: var(--neuro-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.finetune-word.selected {
    border-color: var(--neuro-cyan);
    background: rgba(6, 214, 160, 0.1);
    color: var(--neuro-text-primary);
}

.finetune-word:hover {
    border-color: var(--neuro-cyan);
}

.finetune-actions {
    display: flex;
    gap: 10px;
}

.finetune-actions button {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.finetune-actions .btn-cancel {
    background: var(--neuro-bg-surface);
    color: var(--neuro-text-secondary);
}

.finetune-actions .btn-confirm {
    background: var(--neuro-cyan);
    color: var(--neuro-bg-deep);
}

.finetune-actions .btn-confirm:hover {
    box-shadow: 0 4px 15px var(--neuro-cyan-glow);
}

/* ==================== END OF FIRST HALF ==================== */
/* ═══════════════════════════════════════════════════════════════════════
   LEITURA NEURO — Neuro-Futuristic Redesign — PART 2
   Covers: NeuroSprint phase 2, Difficulty, Fine-tune, Quest/Mastery HUDs,
   Scrollbar, Playing mode, Clipboard menu, Help modal, Image/Upload modals,
   Sniper/Auto-select FABs, Region counter, Desktop toolbar, Neuro Dock,
   Tutorial v3/v4, NeuroTutor panel
   ═══════════════════════════════════════════════════════════════════════ */

/* ===== TRANSITION ELEMENTS (continuation) ===== */

@keyframes bounceIn {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.transition-title {
    font-size: 1.4rem;
    font-weight: 800;
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    color: var(--neuro-text-primary, #e2e8f0);
    margin-bottom: 8px;
}

.transition-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    max-width: 280px;
    line-height: 1.4;
}

@media (min-width: 640px) {
    .transition-icon {
        width: 80px;
        height: 80px;
        margin-bottom: 24px;
    }

    .transition-title {
        font-size: 1.75rem;
    }

    .transition-subtitle {
        font-size: 1.1rem;
        max-width: 400px;
    }
}

/* ===== FASE 2: ARENA ARCADE ===== */
.arcade-phase {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.arcade-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    padding-bottom: 220px;
}

.arcade-text {
    font-size: 1.3rem;
    line-height: 2.2;
    color: var(--neuro-text-primary, #e2e8f0);
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    text-align: left;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Legal structure formatting in game */
.arcade-text strong {
    font-weight: 700;
}

.arcade-text .text-blue-400,
.arcade-text .structure-chapter {
    color: #60a5fa;
    font-weight: 700;
}

.arcade-text .text-yellow-400,
.arcade-text .structure-article {
    color: #facc15;
    font-weight: 700;
}

.arcade-text .text-purple-400,
.arcade-text .structure-paragraph {
    color: var(--neuro-purple, #a78bfa);
    font-weight: 600;
}

.arcade-text .text-cyan-400,
.arcade-text .structure-inciso {
    color: var(--neuro-cyan, #06d6a0);
}

.arcade-text .text-green-400,
.arcade-text .structure-alinea {
    color: #4ade80;
}

/* Structure classes */
.structure-chapter {
    color: #60a5fa;
    font-weight: 700;
    font-size: 1.15em;
    display: inline;
}

.structure-article {
    color: #facc15;
    font-weight: 700;
}

.structure-paragraph {
    color: var(--neuro-purple, #a78bfa);
    font-weight: 600;
}

.structure-inciso {
    color: var(--neuro-cyan, #06d6a0);
}

.structure-alinea {
    color: #4ade80;
}

/* Sprint text colors */
.sprint-text .text-blue-400,
.sprint-text .structure-chapter { color: #60a5fa; font-weight: 700; }
.sprint-text .text-yellow-400,
.sprint-text .structure-article { color: #facc15; font-weight: 700; }
.sprint-text .text-purple-400 { color: var(--neuro-purple, #a78bfa); }
.sprint-text .text-cyan-400 { color: var(--neuro-cyan, #06d6a0); }
.sprint-text .text-green-400 { color: #4ade80; }

/* Options Panel - FIXED at bottom */
.arcade-options-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(8, 10, 25, 0.98) 0%, rgba(12, 16, 33, 0.95) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 16px 20px 24px;
    z-index: 510;
    backdrop-filter: blur(20px) saturate(1.2);
}

/* Gap Timer Bar */
.gap-timer-container {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    margin-bottom: 8px;
    overflow: hidden;
}

.gap-timer-bar {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--neuro-cyan, #06d6a0), var(--neuro-blue, #0ea5e9));
    border-radius: 2px;
    transition: width 0.1s linear;
}

.gap-timer-bar.timer-warning {
    background: linear-gradient(90deg, var(--neuro-amber, #f59e0b), var(--neuro-gold, #fbbf24));
}

.gap-timer-bar.timer-critical {
    background: linear-gradient(90deg, var(--neuro-red, #ef4444), #f87171);
    animation: timerPulse 0.5s ease-in-out infinite;
}

@keyframes timerPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.options-progress {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    margin-bottom: 12px;
    overflow: hidden;
}

.options-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--neuro-green, #22c55e) 0%, #4ade80 100%);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.options-instruction {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-width: 500px;
    margin: 0 auto;
}

.option-btn {
    padding: 16px 20px;
    background: rgba(12, 16, 33, 0.75);
    border: 2px solid rgba(6, 214, 160, 0.2);
    border-radius: 16px;
    color: rgba(6, 214, 160, 0.8);
    font-weight: 700;
    font-size: 1.1rem;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(12px);
}

.option-btn:hover {
    background: linear-gradient(135deg, rgba(6, 214, 160, 0.2), rgba(14, 165, 233, 0.2));
    border-color: var(--neuro-cyan, #06d6a0);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(6, 214, 160, 0.25);
}

.option-btn:active {
    transform: scale(0.98);
}

.option-btn.correct-flash {
    background: linear-gradient(135deg, var(--neuro-green, #22c55e) 0%, #16a34a 100%) !important;
    border-color: var(--neuro-green, #22c55e) !important;
    color: white !important;
    animation: btnCorrect 0.4s ease;
}

.option-btn.incorrect-flash {
    background: linear-gradient(135deg, var(--neuro-red, #ef4444) 0%, #dc2626 100%) !important;
    border-color: var(--neuro-red, #ef4444) !important;
    color: white !important;
    animation: shake 0.4s ease;
}

@keyframes btnCorrect {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
}

/* ===== RESULTADO FINAL ===== */
.neurosprint-result {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 16px 16px;
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 30px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.result-icon-container {
    width: 60px;
    height: 60px;
    min-height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    margin-top: 10px;
    animation: resultBounce 0.6s ease;
    flex-shrink: 0;
}

.result-icon-container i {
    width: 28px !important;
    height: 28px !important;
}

@media (min-width: 640px) {
    .result-icon-container {
        width: 100px;
        height: 100px;
        min-height: 100px;
        margin-bottom: 24px;
        margin-top: 20px;
    }

    .result-icon-container i {
        width: 48px !important;
        height: 48px !important;
    }

    .neurosprint-result {
        padding: 40px 24px;
        justify-content: center;
    }
}

.result-icon-container.excellent {
    background: linear-gradient(135deg, var(--neuro-green, #22c55e) 0%, #16a34a 100%);
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.3);
}

.result-icon-container.good {
    background: linear-gradient(135deg, var(--neuro-blue, #0ea5e9) 0%, var(--neuro-cyan, #06d6a0) 100%);
    box-shadow: 0 0 30px rgba(6, 214, 160, 0.3);
}

.result-icon-container.okay {
    background: linear-gradient(135deg, var(--neuro-amber, #f59e0b) 0%, #d97706 100%);
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.3);
}

.result-icon-container.needs-work {
    background: linear-gradient(135deg, var(--neuro-purple, #a78bfa) 0%, #7c3aed 100%);
    box-shadow: 0 0 30px rgba(167, 139, 250, 0.3);
}

@keyframes resultBounce {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.result-title {
    font-size: 1.3rem;
    font-weight: 800;
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    color: var(--neuro-text-primary, #e2e8f0);
    margin-bottom: 4px;
}

.result-subtitle {
    color: var(--neuro-text-secondary, #94a3b8);
    font-size: 0.85rem;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    margin-bottom: 16px;
    max-width: 260px;
    line-height: 1.3;
}

@media (min-width: 640px) {
    .result-title {
        font-size: 2rem;
        margin-bottom: 8px;
    }

    .result-subtitle {
        font-size: 1.1rem;
        margin-bottom: 32px;
        max-width: none;
    }
}

.result-stats {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

@media (min-width: 640px) {
    .result-stats {
        gap: 40px;
        margin-bottom: 32px;
    }
}

.result-stat {
    text-align: center;
}

.result-stat-value {
    font-size: 2rem;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    color: var(--neuro-gold, #fbbf24);
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.4);
}

@media (min-width: 640px) {
    .result-stat-value {
        font-size: 3rem;
    }
}

.result-stat-label {
    font-size: 0.75rem;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    color: var(--neuro-text-secondary, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (min-width: 640px) {
    .result-stat-label {
        font-size: 0.85rem;
    }
}

/* Result branding */
.result-branding {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 12px 0;
    padding: 8px 16px;
    background: rgba(167, 139, 250, 0.1);
    border-radius: 30px;
    border: 1px solid rgba(167, 139, 250, 0.2);
    backdrop-filter: blur(8px);
}

@media (min-width: 640px) {
    .result-branding {
        gap: 8px;
        margin: 20px 0;
        padding: 10px 20px;
    }
}

.result-branding-icon {
    font-size: 1rem;
}

@media (min-width: 640px) {
    .result-branding-icon {
        font-size: 1.2rem;
    }
}

.result-branding-name {
    font-weight: 800;
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    color: var(--neuro-purple, #a78bfa);
    font-size: 0.85rem;
}

@media (min-width: 640px) {
    .result-branding-name {
        font-size: 0.95rem;
    }
}

.result-branding-divider {
    color: rgba(167, 139, 250, 0.5);
}

.result-branding-url {
    font-weight: 600;
    color: #c4b5fd;
    font-size: 0.75rem;
}

@media (min-width: 640px) {
    .result-branding-url {
        font-size: 0.85rem;
    }
}

.result-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 320px;
}

@media (min-width: 640px) {
    .result-actions {
        gap: 12px;
        max-width: none;
    }
}

.neurosprint-btn {
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.9rem;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.neurosprint-btn-primary {
    background: linear-gradient(135deg, var(--neuro-green, #22c55e) 0%, #16a34a 100%);
    color: white;
}

.neurosprint-btn-primary:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}

.neurosprint-btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    color: var(--neuro-text-secondary, #94a3b8);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.neurosprint-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

@media (min-width: 640px) {
    .neurosprint-btn {
        padding: 14px 28px;
        border-radius: 14px;
        font-size: 1rem;
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .neurosprint-header {
        padding: 10px 16px;
    }

    .neurosprint-title {
        font-size: 0.95rem;
    }

    .neurosprint-stats {
        gap: 8px;
    }

    .neurosprint-stat {
        padding: 4px 8px;
    }

    .neurosprint-stat-value {
        font-size: 0.95rem;
    }

    .sprint-content, .arcade-content {
        padding: 16px;
    }

    .arcade-content {
        padding-bottom: 240px;
    }

    .sprint-text, .arcade-text {
        font-size: 1.1rem;
        line-height: 2;
    }

    .countdown-number {
        font-size: 6rem;
    }

    .arcade-options-panel {
        padding: 12px 16px 20px;
    }

    .options-grid {
        gap: 8px;
    }

    .option-btn {
        padding: 14px 12px;
        font-size: 1rem;
        min-height: 52px;
    }

    .result-stat-value {
        font-size: 2.5rem;
    }

    .result-actions {
        flex-direction: column;
        width: 100%;
        padding: 0 20px;
    }

    .neurosprint-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===== MODO CANETA & PAPEL (Toggle + Checkpoint) ===== */
.hardcore-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 14px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hardcore-toggle:hover {
    background: rgba(0, 0, 0, 0.4);
}

.hardcore-toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.hardcore-toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.hardcore-toggle.active .hardcore-toggle-switch {
    background: linear-gradient(135deg, var(--neuro-amber, #f59e0b) 0%, #d97706 100%);
}

.hardcore-toggle.active .hardcore-toggle-switch::after {
    left: 22px;
}

.hardcore-toggle-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hardcore-toggle-title {
    font-size: 0.8rem;
    font-weight: 700;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    color: white;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hardcore-toggle-subtitle {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Checkpoint Modal */
.checkpoint-modal {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(20px) saturate(1.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 525;
    padding: 24px;
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

.checkpoint-icon {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, var(--neuro-amber, #f59e0b) 0%, #d97706 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    animation: bounceIn 0.6s ease;
    box-shadow: 0 0 40px rgba(245, 158, 11, 0.4);
}

.checkpoint-title {
    font-size: 1.5rem;
    font-weight: 800;
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    color: white;
    margin-bottom: 8px;
    text-align: center;
}

.checkpoint-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    text-align: center;
    max-width: 400px;
    margin-bottom: 16px;
    line-height: 1.5;
}

.checkpoint-tip {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 32px;
    max-width: 400px;
    backdrop-filter: blur(8px);
}

.checkpoint-tip-title {
    font-size: 0.75rem;
    font-weight: 700;
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    color: var(--neuro-gold, #fbbf24);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.checkpoint-tip-text {
    font-size: 0.9rem;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}

.checkpoint-btn {
    padding: 18px 40px;
    background: linear-gradient(135deg, var(--neuro-green, #22c55e) 0%, #16a34a 100%);
    border: none;
    border-radius: 16px;
    color: white;
    font-weight: 800;
    font-size: 1.1rem;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
    box-shadow: 0 8px 25px rgba(34, 197, 94, 0.3);
}

.checkpoint-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 35px rgba(34, 197, 94, 0.4);
}

.checkpoint-btn:active {
    transform: scale(0.98);
}

.checkpoint-btn.confirmed {
    background: linear-gradient(135deg, var(--neuro-green, #22c55e) 0%, #16a34a 100%);
    animation: confirmPulse 0.5s ease;
}

@keyframes confirmPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.checkpoint-skip {
    margin-top: 20px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.checkpoint-skip:hover {
    color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 768px) {
    .hardcore-toggle {
        padding: 6px 10px;
    }

    .hardcore-toggle-title {
        font-size: 0.7rem;
    }

    .hardcore-toggle-subtitle {
        display: none;
    }

    .hardcore-toggle-switch {
        width: 36px;
        height: 20px;
    }

    .hardcore-toggle-switch::after {
        width: 16px;
        height: 16px;
    }

    .hardcore-toggle.active .hardcore-toggle-switch::after {
        left: 18px;
    }

    .checkpoint-icon {
        width: 80px;
        height: 80px;
    }

    .checkpoint-title {
        font-size: 1.3rem;
    }

    .checkpoint-subtitle {
        font-size: 0.9rem;
    }
}

/* ===== FLOATING SCORE (RPG Style) ===== */
.floating-score {
    position: fixed;
    color: var(--neuro-gold, #fbbf24);
    font-weight: 900;
    font-size: 1.5rem;
    font-family: 'JetBrains Mono', monospace;
    pointer-events: none;
    z-index: 9999;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 20px rgba(251, 191, 36, 0.5);
    animation: floatUp 1s ease-out forwards;
}

@keyframes floatUp {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    30% { opacity: 1; transform: translateY(-15px) scale(1.3); }
    100% { opacity: 0; transform: translateY(-50px) scale(1); }
}

/* Score big in header */
.neurosprint-score-big {
    font-size: 1.3rem;
    font-weight: 900;
    font-family: 'JetBrains Mono', monospace;
    color: var(--neuro-gold, #fbbf24);
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

/* Round Indicator */
.round-indicator {
    font-size: 0.7rem;
    font-family: 'JetBrains Mono', monospace;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.08);
    padding: 3px 10px;
    border-radius: 12px;
    margin-left: 8px;
}

/* Dynamic result stat label */
.result-stat-label {
    font-size: 0.8rem;
    color: var(--neuro-text-secondary, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ===== MODAL DE SELECAO DE DIFICULDADE ===== */
.difficulty-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(16px) saturate(1.2);
    z-index: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.difficulty-modal.active {
    opacity: 1;
    visibility: visible;
}

.difficulty-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 16px 40px;
    min-height: 100%;
    width: 100%;
    max-width: 500px;
}

.difficulty-title {
    font-size: 1.4rem;
    font-weight: 800;
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    color: var(--neuro-text-primary, #e2e8f0);
    margin-bottom: 6px;
    text-align: center;
}

.difficulty-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    margin-bottom: 20px;
    text-align: center;
    font-size: 0.9rem;
}

.difficulty-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.difficulty-card {
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    backdrop-filter: blur(8px);
}

.difficulty-card:hover {
    border-color: rgba(255, 255, 255, 0.25);
}

.difficulty-card:active {
    transform: scale(0.98);
}

.difficulty-card.selected {
    border-width: 3px;
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.08);
}

.difficulty-card.selected .difficulty-check {
    opacity: 1;
    transform: scale(1);
}

.difficulty-card.easy { border-color: var(--neuro-green, #22c55e); background: rgba(34, 197, 94, 0.08); }
.difficulty-card.easy.selected { box-shadow: 0 0 25px rgba(34, 197, 94, 0.25); }
.difficulty-card.easy .difficulty-icon { background: linear-gradient(135deg, var(--neuro-green, #22c55e), #16a34a); }

.difficulty-card.normal { border-color: var(--neuro-cyan, #06d6a0); background: rgba(6, 214, 160, 0.08); }
.difficulty-card.normal.selected { box-shadow: 0 0 25px rgba(6, 214, 160, 0.25); }
.difficulty-card.normal .difficulty-icon { background: linear-gradient(135deg, var(--neuro-cyan, #06d6a0), var(--neuro-blue, #0ea5e9)); }

.difficulty-card.hard { border-color: var(--neuro-purple, #a78bfa); background: rgba(167, 139, 250, 0.08); }
.difficulty-card.hard.selected { box-shadow: 0 0 25px rgba(167, 139, 250, 0.25); }
.difficulty-card.hard .difficulty-icon { background: linear-gradient(135deg, var(--neuro-purple, #a78bfa), #9333ea); }

.difficulty-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.difficulty-icon i { color: white; }

.difficulty-info {
    flex: 1;
    text-align: left;
}

.difficulty-label {
    font-size: 1.05rem;
    font-weight: 700;
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    color: var(--neuro-text-primary, #e2e8f0);
    margin-bottom: 2px;
}

.difficulty-desc {
    font-size: 0.8rem;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0;
}

.difficulty-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.difficulty-multiplier {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
}

.difficulty-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
}

.difficulty-card.easy .difficulty-check { color: #16a34a; }
.difficulty-card.normal .difficulty-check { color: var(--neuro-cyan, #06d6a0); }
.difficulty-card.hard .difficulty-check { color: #9333ea; }

.difficulty-card.easy .difficulty-multiplier { background: rgba(34, 197, 94, 0.2); color: #86efac; }
.difficulty-card.normal .difficulty-multiplier { background: rgba(6, 214, 160, 0.2); color: #6ee7b7; }
.difficulty-card.hard .difficulty-multiplier { background: rgba(167, 139, 250, 0.2); color: #d8b4fe; }

.difficulty-start-btn {
    margin-top: 24px;
    padding: 16px 32px;
    background: linear-gradient(135deg, var(--neuro-cyan, #06d6a0), var(--neuro-blue, #0ea5e9));
    border: none;
    border-radius: 14px;
    color: white;
    font-weight: 700;
    font-size: 1rem;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    width: 100%;
    max-width: 300px;
}

.difficulty-start-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 30px rgba(6, 214, 160, 0.35);
}

.difficulty-start-btn:active {
    transform: scale(0.98);
}

.difficulty-close {
    position: fixed;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
}

/* ===== MODAL DE PERFIL ===== */
.profile-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(20px) saturate(1.2);
    z-index: 650;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.profile-modal.active {
    opacity: 1;
    visibility: visible;
}

.profile-card {
    background: rgba(12, 16, 33, 0.85);
    border: 2px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    padding: 32px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    backdrop-filter: blur(20px);
}

.profile-badge {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--neuro-gold, #fbbf24), var(--neuro-amber, #f59e0b));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.3);
}

.profile-title {
    font-size: 1.5rem;
    font-weight: 800;
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    color: var(--neuro-text-primary, #e2e8f0);
    margin-bottom: 8px;
}

.profile-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    margin-bottom: 24px;
}

.profile-input-group {
    margin-bottom: 16px;
    text-align: left;
}

.profile-input-label {
    font-size: 0.8rem;
    font-weight: 600;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 6px;
    display: block;
}

.profile-input {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: var(--neuro-text-primary, #e2e8f0);
    font-size: 1rem;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    transition: all 0.2s ease;
}

.profile-input:focus {
    outline: none;
    border-color: var(--neuro-gold, #fbbf24);
    background: rgba(255, 255, 255, 0.06);
}

.profile-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.profile-save-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--neuro-gold, #fbbf24), var(--neuro-amber, #f59e0b));
    border: none;
    border-radius: 12px;
    color: #0c1021;
    font-weight: 800;
    font-size: 1rem;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    cursor: pointer;
    margin-top: 8px;
    transition: all 0.2s ease;
}

.profile-save-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(251, 191, 36, 0.35);
}

.profile-skip {
    margin-top: 16px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    cursor: pointer;
}

/* ===== HUD DO USUARIO ===== */
.user-hud {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(245, 158, 11, 0.04));
    border: 1px solid rgba(251, 191, 36, 0.15);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.user-hud:hover {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(245, 158, 11, 0.08));
}

.user-avatar {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--neuro-gold, #fbbf24), var(--neuro-amber, #f59e0b));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-info {
    text-align: left;
}

.user-name {
    font-size: 0.85rem;
    font-weight: 700;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    color: var(--neuro-text-primary, #e2e8f0);
}

.user-level {
    font-size: 0.7rem;
    font-family: 'JetBrains Mono', monospace;
    color: var(--neuro-text-secondary, #94a3b8);
}

.theme-dark .user-name { color: white; }
.theme-dark .user-level { color: rgba(255, 255, 255, 0.6); }

/* XP Bar */
.xp-progress-container {
    width: 100%;
    max-width: 300px;
    margin: 16px auto;
}

.xp-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    font-family: 'JetBrains Mono', monospace;
    color: var(--neuro-text-secondary, #94a3b8);
    margin-bottom: 6px;
}

.xp-progress-bar {
    height: 8px;
    background: rgba(251, 191, 36, 0.15);
    border-radius: 4px;
    overflow: hidden;
}

.xp-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--neuro-gold, #fbbf24), var(--neuro-amber, #f59e0b));
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* Level Up Animation */
.level-up-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: linear-gradient(135deg, var(--neuro-gold, #fbbf24), var(--neuro-amber, #f59e0b));
    color: #0c1021;
    padding: 24px 40px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 1.2rem;
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 0 60px rgba(251, 191, 36, 0.5);
    text-align: center;
}

.level-up-toast.show {
    animation: levelUpPop 2s ease forwards;
}

@keyframes levelUpPop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
    30% { transform: translate(-50%, -50%) scale(1); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

/* ===== MODAL DE AJUSTE FINO DE SELECAO ===== */
.finetune-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 550;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.finetune-modal.active {
    opacity: 1;
    visibility: visible;
}

.finetune-card {
    background: var(--neuro-bg-raised, #111827);
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    border-radius: 20px 20px 0 0;
    padding: 20px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: none;
}

.finetune-modal.active .finetune-card {
    transform: translateY(0);
}

.finetune-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.finetune-title {
    font-size: 1.1rem;
    font-weight: 700;
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    color: var(--neuro-text-primary, #e2e8f0);
}

.finetune-close {
    background: rgba(255, 255, 255, 0.06);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--neuro-text-secondary, #94a3b8);
}

.finetune-close:hover {
    background: rgba(239, 68, 68, 0.15);
    color: var(--neuro-red, #ef4444);
}

.finetune-instructions {
    font-size: 0.85rem;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    color: var(--neuro-text-secondary, #94a3b8);
    margin-bottom: 16px;
}

.finetune-words-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px;
    background: var(--neuro-bg-surface, #1a2035);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 16px;
}

.finetune-word {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    border: 2px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: var(--neuro-text-secondary, #94a3b8);
    cursor: pointer;
    transition: all 0.15s ease;
}

.finetune-word:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
}

.finetune-word.selected {
    background: rgba(6, 214, 160, 0.15);
    border-color: var(--neuro-cyan, #06d6a0);
    color: var(--neuro-cyan, #06d6a0);
    font-weight: 600;
}

.finetune-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    font-size: 0.8rem;
    font-family: 'JetBrains Mono', monospace;
    color: var(--neuro-text-secondary, #94a3b8);
}

.finetune-stat {
    display: flex;
    align-items: center;
    gap: 4px;
}

.finetune-stat strong {
    color: var(--neuro-cyan, #06d6a0);
}

.finetune-actions {
    display: flex;
    gap: 12px;
}

.finetune-btn {
    flex: 1;
    padding: 14px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.finetune-btn-primary {
    background: linear-gradient(135deg, var(--neuro-cyan, #06d6a0), var(--neuro-blue, #0ea5e9));
    color: white;
    border: none;
}

.finetune-btn-primary:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(6, 214, 160, 0.35);
}

.finetune-btn-secondary {
    background: rgba(255, 255, 255, 0.04);
    color: var(--neuro-text-secondary, #94a3b8);
    border: 2px solid rgba(255, 255, 255, 0.08);
}

.finetune-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Fine-tune button on region */
.region-finetune-btn {
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--neuro-gold, #fbbf24), var(--neuro-amber, #f59e0b));
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.35);
    z-index: 35;
    opacity: 0;
    transition: all 0.2s ease;
}

.reading-region:hover .region-finetune-btn,
.reading-region.editing .region-finetune-btn {
    opacity: 1;
}

/* Lixeira rápida: 1 clique pra remover uma área de lixo (e-mails, margem, etc.)
   sem entrar no menu "⋯". Fica DENTRO da barra de controles (mesmo z-index dos
   outros botões — antes, num z-index baixo, sumia ATRÁS do "⋯"). Só aparece no
   hover da região; deleteRegion tem undo de 6s (clique acidental recuperável). */
/* SEMPRE visível na barra de controles (junto de play/⋯). Antes era hover-only,
   mas o corpo da .reading-region tem pointer-events:none (pra o clique passar
   pras palavras), então o :hover da região só disparava sobre os controles —
   a lixeira ficava quase inacessível. Agora é um botão fixo da barra. */
.reading-region .region-quick-del {
    display: inline-flex;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    border: none;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}
.reading-region .region-quick-del:hover { background: #dc2626; transform: scale(1.1); }

.region-finetune-btn:hover {
    transform: translateX(-50%) scale(1.1);
}

.region-finetune-btn i {
    color: white;
    width: 14px;
    height: 14px;
}

@media (min-width: 769px) {
    .finetune-card {
        border-radius: 20px;
        margin-bottom: 40px;
    }

    /* Desktop: cards in row */
    .difficulty-cards {
        flex-direction: row;
        gap: 16px;
    }

    .difficulty-card {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
        max-width: 180px;
    }

    .difficulty-info {
        text-align: center;
    }

    .difficulty-right {
        flex-direction: row;
        justify-content: center;
        margin-top: 12px;
    }

    .difficulty-icon {
        margin-bottom: 12px;
    }
}

@media (max-width: 768px) {
    .profile-card {
        padding: 24px 20px;
    }
}

/* ==================== MODO AVENTURA ==================== */
#progress-badge {
    position: fixed;
    top: 80px;
    right: 12px;
    background: rgba(6, 214, 160, 0.85);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    display: flex;
    gap: 8px;
    align-items: center;
    z-index: 100;
    opacity: 0.85;
    transition: opacity 0.3s;
    backdrop-filter: blur(8px);
}

#progress-badge:hover {
    opacity: 1;
}

.badge-level {
    background: rgba(255,255,255,0.2);
    padding: 2px 8px;
    border-radius: 10px;
}

.badge-streak {
    color: var(--neuro-gold, #fbbf24);
}

.badge-session {
    color: #86efac;
    font-size: 10px;
}

.adventure-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    color: var(--neuro-text-secondary, #94a3b8);
    transition: all 0.2s;
}

.adventure-toggle:hover {
    border-color: var(--neuro-cyan, #06d6a0);
    color: var(--neuro-cyan, #06d6a0);
}

.adventure-toggle.active {
    background: linear-gradient(135deg, var(--neuro-cyan, #06d6a0), var(--neuro-purple, #a78bfa));
    border-color: transparent;
    color: white;
}

/* ==================== QUEST SYSTEM - HUD ==================== */
#quest-hud {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(12, 16, 33, 0.92);
    backdrop-filter: blur(12px) saturate(1.2);
    border-radius: 12px;
    padding: 10px 16px;
    display: none;
    align-items: center;
    gap: 12px;
    z-index: 150;
    border: 1px solid rgba(6, 214, 160, 0.2);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    min-width: 280px;
}

#quest-hud.active {
    display: flex;
}

.quest-boss-icon {
    font-size: 24px;
    filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.5));
}

.quest-info {
    flex: 1;
}

.quest-title {
    font-size: 11px;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    color: var(--neuro-text-secondary, #94a3b8);
    margin-bottom: 4px;
}

.quest-hp-bar {
    width: 100%;
    height: 8px;
    background: var(--neuro-bg-surface, #1a2035);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.quest-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--neuro-green, #22c55e), #84cc16);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.quest-hp-fill.medium {
    background: linear-gradient(90deg, #eab308, #f97316);
}

.quest-hp-fill.low {
    background: linear-gradient(90deg, var(--neuro-red, #ef4444), #dc2626);
}

.quest-checkpoints {
    display: flex;
    gap: 3px;
    margin-top: 4px;
}

.quest-checkpoint {
    width: 8px;
    height: 8px;
    background: #334155;
    border-radius: 2px;
    transition: all 0.3s;
}

.quest-checkpoint.completed {
    background: var(--neuro-green, #22c55e);
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}

.quest-checkpoint.current {
    background: #eab308;
    animation: pulse-checkpoint 1s infinite;
}

@keyframes pulse-checkpoint {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.quest-stats {
    text-align: right;
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    color: #cbd5e1;
}

.quest-words {
    font-weight: 700;
    color: var(--neuro-cyan, #06d6a0);
}

.quest-close {
    background: none;
    border: none;
    color: var(--neuro-text-secondary, #94a3b8);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
}

.quest-close:hover {
    color: var(--neuro-red, #ef4444);
    background: rgba(239, 68, 68, 0.1);
}

.region-quest {
    background: linear-gradient(135deg, var(--neuro-cyan, #06d6a0), var(--neuro-purple, #a78bfa));
    color: white !important;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 3px;
}

.region-quest:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(6, 214, 160, 0.4);
}

/* ==================== RETENTION TEST MODAL ==================== */
#retention-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#retention-modal.active {
    display: flex;
}

.retention-card {
    background: var(--neuro-bg-raised, #111827);
    border-radius: 20px;
    padding: 20px;
    width: 100%;
    max-width: 500px;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.3s ease;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

@media (min-width: 640px) {
    #retention-modal {
        padding: 20px;
    }
    .retention-card {
        max-height: 90vh;
    }
}

.retention-header {
    text-align: center;
    margin-bottom: 12px;
    flex-shrink: 0;
    padding-top: 10px;
}

.retention-header h2,
.retention-header h3 {
    font-size: 20px;
    font-weight: 800;
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    color: var(--neuro-text-primary, #e2e8f0);
    margin-bottom: 4px;
}

.retention-header p {
    color: var(--neuro-text-secondary, #94a3b8);
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    font-size: 13px;
}

.retention-text {
    background: var(--neuro-bg-surface, #1a2035);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
    line-height: 1.6;
    font-size: 13px;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    color: var(--neuro-text-primary, #e2e8f0);
    flex: 1;
    overflow-y: auto;
    max-height: 35vh;
}

@media (min-width: 640px) {
    .retention-text {
        max-height: 250px;
        font-size: 15px;
    }
}

.retention-blank {
    display: inline-block;
    min-width: 60px;
    border-bottom: 2px dashed var(--neuro-cyan, #06d6a0);
    color: var(--neuro-cyan, #06d6a0);
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    text-align: center;
    padding: 2px 6px;
    margin: 0 2px;
    transition: all 0.2s;
    border-radius: 4px;
    background: rgba(6, 214, 160, 0.08);
}

.retention-blank.active {
    background: rgba(6, 214, 160, 0.2);
    border-color: var(--neuro-cyan, #06d6a0);
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(6, 214, 160, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(6, 214, 160, 0); }
}

.retention-blank.filled {
    background: rgba(34, 197, 94, 0.15);
    border-color: var(--neuro-green, #22c55e);
    color: #86efac;
    border-style: solid;
}

.retention-blank.wrong {
    background: rgba(239, 68, 68, 0.15);
    border-color: var(--neuro-red, #ef4444);
    color: #fca5a5;
}

/* Feedback de correção do Mastery/Quest test — `!important` vence os estilos
   inline (cor do território) aplicados por buildTestHTML. */
.retention-blank.blank-correct {
    background: rgba(34, 197, 94, 0.22) !important;
    border-color: #22c55e !important;
    border-style: solid !important;
    color: #86efac !important;
    animation: blankPop 0.3s ease-out;
}
.retention-blank.blank-wrong {
    background: rgba(239, 68, 68, 0.20) !important;
    border-color: #ef4444 !important;
    border-style: solid !important;
    color: #fca5a5 !important;
    animation: blankShake 0.35s ease-out;
}
.retention-blank.blank-wrong s { color: #fca5a5; }
.retention-blank.blank-wrong strong { color: #4ade80; }
@keyframes blankPop {
    0% { transform: scale(0.85); }
    60% { transform: scale(1.12); }
    100% { transform: scale(1); }
}
@keyframes blankShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* Banner central de transição entre territórios (avançar/voltar). */
.mastery-territory-transition {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 60;
    padding: 14px 28px;
    border-radius: 16px;
    font-weight: 800;
    font-size: 1.15rem;
    color: #fff;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
    animation: territoryBannerIn 1.4s ease-out forwards;
}
.mastery-territory-transition.is-forward {
    background: linear-gradient(135deg, #22c55e, #0ea5e9);
}
.mastery-territory-transition.is-back {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
}
@keyframes territoryBannerIn {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
    30% { transform: translate(-50%, -50%) scale(1); }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
    .retention-blank.blank-correct,
    .retention-blank.blank-wrong { animation: none; }
    .mastery-territory-transition { animation: territoryBannerReduced 1.4s linear forwards; }
}
@keyframes territoryBannerReduced {
    0%, 90% { opacity: 1; }
    100% { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   DESPEJO — minigame de evocação livre (despejo-game.js)
   ═══════════════════════════════════════════════════════════════ */
.despejo-fs {
    position: fixed; inset: 0; z-index: 10060;
    background: #0b101b; color: #e5e7eb;
    display: flex; flex-direction: column;
    animation: socAnchorFade 0.18s ease-out;
}
.despejo-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; border-bottom: 1px solid rgba(148,163,184,0.14);
}
.despejo-title { font-weight: 800; font-size: 1.05rem; }
.despejo-terr {
    background: rgba(56,189,248,0.18); color: #7dd3fc;
    font-size: 0.78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
}
.despejo-x {
    margin-left: auto; background: transparent; border: 0; color: #94a3b8;
    font-size: 1.15rem; cursor: pointer; padding: 4px 8px; border-radius: 8px;
}
.despejo-x:hover { background: rgba(148,163,184,0.12); color: #fff; }
.despejo-body {
    flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 18px 16px 28px;
    max-width: 640px; width: 100%; margin: 0 auto;
}
.despejo-step { font-size: 0.92rem; color: #cbd5e1; margin: 0 0 14px; line-height: 1.5; }
.despejo-text {
    background: rgba(148,163,184,0.06); border-left: 4px solid;
    border-radius: 10px; padding: 16px; font-size: 1.05rem; line-height: 1.7;
    color: #f1f5f9; margin-bottom: 18px;
}
.despejo-primary {
    display: block; width: 100%; border: 0; color: #0b101b; font-weight: 800;
    font-size: 1rem; padding: 14px; border-radius: 12px; cursor: pointer;
    transition: filter 0.15s;
}
.despejo-primary:hover { filter: brightness(1.08); }
.despejo-timer {
    font-size: 2rem; font-weight: 800; text-align: center; color: #38bdf8;
    margin-bottom: 12px; font-variant-numeric: tabular-nums;
}
.despejo-timer--urgent { color: #f87171; animation: pulse 0.6s infinite; }
.despejo-input {
    width: 100%; box-sizing: border-box; padding: 14px;
    background: #0d1320; border: 1.5px solid rgba(148,163,184,0.25);
    border-radius: 12px; color: #f1f5f9; font-size: 1rem; resize: vertical;
    line-height: 1.6; margin-bottom: 12px;
}
.despejo-input:focus { outline: none; border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56,189,248,0.2); }
.despejo-actions { display: flex; gap: 10px; }
.despejo-actions .despejo-primary { flex: 1; }
.despejo-voice {
    background: rgba(148,163,184,0.12); border: 0; color: #e5e7eb; cursor: pointer;
    font-weight: 700; padding: 14px 16px; border-radius: 12px; white-space: nowrap;
}
.despejo-voice:hover:not(:disabled) { background: rgba(148,163,184,0.2); }
.despejo-voice:disabled { opacity: 0.45; cursor: default; }
.despejo-score { font-size: 1.5rem; font-weight: 800; text-align: center; margin-bottom: 14px; }
.despejo-legend { font-size: 0.82rem; color: #94a3b8; margin: 0 0 10px; }
.despejo-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.despejo-chip {
    font-size: 0.85rem; font-weight: 600; padding: 5px 11px; border-radius: 999px;
}
.despejo-chip.hit { background: rgba(34,197,94,0.18); color: #86efac; border: 1px solid rgba(34,197,94,0.4); }
.despejo-chip.miss { background: rgba(100,116,139,0.14); color: #94a3b8; border: 1px solid rgba(100,116,139,0.3); }
.despejo-victory { text-align: center; padding: 30px 10px; }
.despejo-crown { font-size: 4rem; filter: drop-shadow(0 0 30px rgba(34,197,94,0.6)); }
.despejo-victory h2 { font-size: 2rem; font-weight: 900; color: #22c55e; margin: 10px 0 6px; }
.despejo-vstats { display: flex; justify-content: center; gap: 18px; margin: 22px 0; }
.despejo-vstats > div {
    background: rgba(148,163,184,0.08); border-radius: 12px; padding: 14px 22px;
    display: flex; flex-direction: column; gap: 2px;
}
.despejo-vstats b { font-size: 1.6rem; color: #22c55e; }
.despejo-vstats span { font-size: 0.75rem; color: #94a3b8; }
@media (prefers-reduced-motion: reduce) {
    .despejo-fs, .despejo-timer--urgent { animation: none !important; }
}
body.theme-light .despejo-fs { background: #f8fafc; color: #1e293b; }
body.theme-light .despejo-text { background: #eef2f7; color: #0f172a; }
body.theme-light .despejo-input { background: #fff; color: #0f172a; border-color: #cbd5e1; }

/* ═══════════════════════════════════════════════════════════════
   TRIBUNAL — minigame de elaboração (tribunal-game.js)
   ═══════════════════════════════════════════════════════════════ */
.tribunal-fs {
    position: fixed; inset: 0; z-index: 10060;
    background: #0b101b; color: #e5e7eb;
    display: flex; flex-direction: column;
    animation: socAnchorFade 0.18s ease-out;
}
.tribunal-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; border-bottom: 1px solid rgba(148,163,184,0.14);
}
.tribunal-title { font-weight: 800; font-size: 1.05rem; }
.tribunal-terr {
    background: rgba(168,85,247,0.2); color: #d8b4fe;
    font-size: 0.78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
}
.tribunal-x {
    margin-left: auto; background: transparent; border: 0; color: #94a3b8;
    font-size: 1.15rem; cursor: pointer; padding: 4px 8px; border-radius: 8px;
}
.tribunal-x:hover { background: rgba(148,163,184,0.12); color: #fff; }
.tribunal-body {
    flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 18px 16px 28px;
    max-width: 640px; width: 100%; margin: 0 auto;
}
.tribunal-step { font-size: 0.92rem; color: #cbd5e1; margin: 0 0 14px; line-height: 1.5; }
.tribunal-text {
    background: rgba(148,163,184,0.06); border-left: 4px solid;
    border-radius: 10px; padding: 14px 16px; margin: 0 0 16px;
    font-size: 1rem; line-height: 1.65; color: #f1f5f9; font-style: italic;
}
.tribunal-lens {
    display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
    padding: 12px 14px; border-radius: 12px;
    background: color-mix(in srgb, var(--lens) 14%, transparent);
    border: 1.5px solid var(--lens);
}
.tribunal-lens-icon { font-size: 1.35rem; }
.tribunal-lens-prompt { font-size: 0.98rem; font-weight: 700; color: #f1f5f9; }
.tribunal-input {
    width: 100%; box-sizing: border-box; padding: 13px;
    background: #0d1320; border: 1.5px solid rgba(148,163,184,0.25);
    border-radius: 12px; color: #f1f5f9; font-size: 1rem; resize: vertical;
    line-height: 1.6; margin-bottom: 12px;
}
.tribunal-input:focus { outline: none; border-color: #a855f7; box-shadow: 0 0 0 3px rgba(168,85,247,0.22); }
.tribunal-actions { display: flex; gap: 10px; }
.tribunal-primary {
    flex: 1; border: 0; color: #fff; font-weight: 800; font-size: 1rem;
    padding: 14px; border-radius: 12px; cursor: pointer; transition: filter 0.15s;
}
.tribunal-primary:hover { filter: brightness(1.08); }
.tribunal-voice {
    background: rgba(148,163,184,0.12); border: 0; color: #e5e7eb; cursor: pointer;
    font-weight: 700; padding: 14px 16px; border-radius: 12px; white-space: nowrap;
}
.tribunal-voice:hover:not(:disabled) { background: rgba(148,163,184,0.2); }
.tribunal-voice:disabled { opacity: 0.45; cursor: default; }
.tribunal-conquered { text-align: center; padding: 16px 6px; }
.tribunal-conq-icon { font-size: 3rem; }
.tribunal-conquered h3 { font-size: 1.4rem; font-weight: 800; color: var(--lens, #a855f7); margin: 8px 0 12px; }
.tribunal-conq-quote {
    background: rgba(148,163,184,0.08); border-left: 3px solid var(--lens, #a855f7);
    border-radius: 8px; padding: 12px; font-style: italic; color: #cbd5e1;
    text-align: left; margin: 0 0 12px;
}
.tribunal-conq-tip { font-size: 0.85rem; color: #94a3b8; margin: 0 0 18px; }
.tribunal-victory { text-align: center; padding: 30px 10px; }
.tribunal-crown { font-size: 4rem; filter: drop-shadow(0 0 30px rgba(168,85,247,0.6)); }
.tribunal-victory h2 { font-size: 2rem; font-weight: 900; color: #a855f7; margin: 10px 0 6px; }
.tribunal-vstats { display: flex; justify-content: center; gap: 18px; margin: 22px 0; }
.tribunal-vstats > div {
    background: rgba(148,163,184,0.08); border-radius: 12px; padding: 14px 22px;
    display: flex; flex-direction: column; gap: 2px;
}
.tribunal-vstats b { font-size: 1.6rem; color: #a855f7; }
.tribunal-vstats span { font-size: 0.75rem; color: #94a3b8; }
@media (prefers-reduced-motion: reduce) { .tribunal-fs { animation: none !important; } }
body.theme-light .tribunal-fs { background: #f8fafc; color: #1e293b; }
body.theme-light .tribunal-text { background: #eef2f7; color: #0f172a; }
body.theme-light .tribunal-input { background: #fff; color: #0f172a; border-color: #cbd5e1; }

/* Autoavaliação (self-assessment) — substitui a validação-placebo cega */
.tribunal-selfgrade { padding: 4px 2px; }
.tribunal-compare { display: flex; gap: 12px; margin: 6px 0 14px; }
.tribunal-compare-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tribunal-compare-label {
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
    color: #94a3b8;
}
.tribunal-your, .tribunal-source {
    background: rgba(148,163,184,0.08); border-left: 3px solid rgba(148,163,184,0.4);
    border-radius: 8px; padding: 11px 13px; margin: 0; font-size: 0.92rem; line-height: 1.55;
    color: #e2e8f0; font-style: italic; white-space: pre-wrap; word-break: break-word;
}
.tribunal-your { border-left-color: var(--lens, #a855f7); }
.tribunal-grade-q { font-size: 0.95rem; color: #cbd5e1; margin: 0 0 12px; line-height: 1.5; }
.tribunal-grade-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.tribunal-grade {
    flex: 1; min-width: 90px; border: 1.5px solid rgba(148,163,184,0.28);
    background: rgba(148,163,184,0.08); color: #e5e7eb; font-weight: 700; font-size: 0.9rem;
    padding: 12px 10px; border-radius: 12px; cursor: pointer; transition: filter 0.15s, border-color 0.15s;
}
.tribunal-grade:hover { border-color: var(--lens, #a855f7); filter: brightness(1.1); }
@media (max-width: 560px) {
    .tribunal-compare { flex-direction: column; gap: 10px; }
}
body.theme-light .tribunal-your, body.theme-light .tribunal-source {
    background: #eef2f7; color: #0f172a;
}
body.theme-light .tribunal-grade { background: #fff; color: #0f172a; border-color: #cbd5e1; }

/* Juiz de IA (PRO) — loading + veredito com precisão/sentença */
.tribunal-judging { text-align: center; padding: 28px 8px; }
.tribunal-gavel { font-size: 3rem; animation: tribunal-gavel-tap 0.9s ease-in-out infinite; }
@keyframes tribunal-gavel-tap { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(6deg); } }
.tribunal-judge-bars { display: flex; gap: 6px; justify-content: center; margin-top: 14px; }
.tribunal-judge-bars span {
    width: 8px; height: 22px; border-radius: 4px; background: var(--lens, #a855f7);
    animation: tribunal-bar 1s ease-in-out infinite;
}
.tribunal-judge-bars span:nth-child(2) { animation-delay: 0.15s; }
.tribunal-judge-bars span:nth-child(3) { animation-delay: 0.3s; }
@keyframes tribunal-bar { 0%,100% { transform: scaleY(0.5); opacity: 0.5; } 50% { transform: scaleY(1); opacity: 1; } }

.tribunal-veredito { text-align: center; padding: 16px 6px; }
.tribunal-verd-icon { font-size: 2.8rem; }
.tribunal-veredito h3 { font-size: 1.35rem; font-weight: 800; margin: 8px 0 14px; color: #f1f5f9; }
.tribunal-veredito.is-pass h3 { color: #22c55e; }
.tribunal-veredito.is-fail h3 { color: #f59e0b; }
.tribunal-precisao { margin: 0 auto 14px; max-width: 320px; }
.tribunal-precisao-bar {
    height: 10px; border-radius: 6px; background: rgba(148,163,184,0.18); overflow: hidden;
}
.tribunal-precisao-bar > span { display: block; height: 100%; border-radius: 6px; transition: width 0.6s ease; }
.tribunal-precisao-num { display: inline-block; margin-top: 6px; font-weight: 800; font-size: 0.95rem; }
.tribunal-sentenca {
    background: rgba(148,163,184,0.08); border-left: 3px solid var(--lens, #a855f7);
    border-radius: 8px; padding: 12px 14px; margin: 0 0 14px; text-align: left;
    font-style: italic; color: #e2e8f0; line-height: 1.55;
}
.tribunal-verd-source { text-align: left; margin: 0 0 16px; }
.tribunal-verd-source summary { cursor: pointer; color: #94a3b8; font-size: 0.85rem; font-weight: 700; }
.tribunal-verd-source blockquote { margin: 8px 0 0; }
.tribunal-shake { animation: tribunal-shake 0.5s; }
@keyframes tribunal-shake {
    0%,100% { transform: translateX(0); }
    20%,60% { transform: translateX(-9px); }
    40%,80% { transform: translateX(9px); }
}
@media (prefers-reduced-motion: reduce) {
    .tribunal-gavel, .tribunal-judge-bars span, .tribunal-shake { animation: none; }
}
body.theme-light .tribunal-veredito h3 { color: #0f172a; }
body.theme-light .tribunal-sentenca { background: #eef2f7; color: #0f172a; }

/* Ações do veredito (Tentar de novo + Próximo) lado a lado */
.tribunal-verd-actions { display: flex; gap: 10px; }
.tribunal-verd-actions .tribunal-primary { flex: 1; }
.tribunal-secondary {
    border: 1.5px solid var(--lens, #a855f7); background: transparent;
    color: #e5e7eb; font-weight: 700; font-size: 0.95rem;
    padding: 14px 16px; border-radius: 12px; cursor: pointer; white-space: nowrap;
    transition: filter 0.15s, background 0.15s;
}
.tribunal-secondary:hover { background: rgba(168,85,247,0.14); }
/* Dica de correção (Active Recall) no topo do textarea ao refazer */
.tribunal-retry-hint {
    background: rgba(245,158,11,0.12); border-left: 3px solid #f59e0b;
    border-radius: 8px; padding: 10px 12px; margin: 0 0 12px; font-size: 0.9rem;
    color: #fcd9a6; line-height: 1.5;
}
/* Atalho "‹ Rever casos anteriores" no topo da tela de defesa */
.tribunal-review-link {
    display: inline-block; background: none; border: 0; cursor: pointer;
    color: #94a3b8; font-size: 0.85rem; font-weight: 700; padding: 0 0 10px; margin: 0;
}
.tribunal-review-link:hover { color: var(--neuro-cyan, #06d6a0); }
/* Hub de revisão (rever/rejogar casos) */
.tribunal-review { text-align: center; padding: 8px 4px 4px; }
.tribunal-rev-title { font-size: 1.1rem; font-weight: 800; color: #f1f5f9; margin: 4px 0 14px; }
.tribunal-review-list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; text-align: left; }
.tribunal-rev-item {
    background: rgba(148,163,184,0.07); border-radius: 12px; padding: 12px 14px;
    border-left: 3px solid #64748b;
}
.tribunal-rev-item.ok { border-left-color: #22c55e; }
.tribunal-rev-item.no { border-left-color: #f59e0b; }
.tribunal-rev-head { display: flex; align-items: center; justify-content: space-between; color: #e2e8f0; margin-bottom: 6px; }
.tribunal-rev-score { font-weight: 800; font-size: 0.9rem; }
.tribunal-rev-defense { margin: 0 0 6px; font-style: italic; color: #cbd5e1; font-size: 0.92rem; line-height: 1.5; }
.tribunal-rev-note { margin: 0 0 8px; font-size: 0.85rem; color: #94a3b8; line-height: 1.45; }
.tribunal-rev-replay {
    background: rgba(6,214,160,0.12); border: 1px solid rgba(6,214,160,0.35); color: #7de3c3;
    font-weight: 700; font-size: 0.85rem; padding: 7px 12px; border-radius: 10px; cursor: pointer;
}
.tribunal-rev-replay:hover { background: rgba(6,214,160,0.2); }
body.theme-light .tribunal-rev-defense { color: #334155; }
body.theme-light .tribunal-rev-item { background: #eef2f7; }

/* ═══════════════════════════════════════════════════════════════
   CAÇA-PEGADINHA — minigame de aplicação/transferência (trap-game.js)
   ═══════════════════════════════════════════════════════════════ */
.trap-fs {
    position: fixed; inset: 0; z-index: 10060;
    background: #0b101b; color: #e5e7eb;
    display: flex; flex-direction: column;
    animation: socAnchorFade 0.18s ease-out;
}
.trap-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; border-bottom: 1px solid rgba(148,163,184,0.14);
}
.trap-title { font-weight: 800; font-size: 1.02rem; }
.trap-round {
    background: rgba(245,158,11,0.2); color: #fcd34d;
    font-size: 0.78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
}
.trap-combo { font-size: 0.82rem; font-weight: 800; color: #fb923c; }
.trap-x {
    margin-left: auto; background: transparent; border: 0; color: #94a3b8;
    font-size: 1.15rem; cursor: pointer; padding: 4px 8px; border-radius: 8px;
}
.trap-x:hover { background: rgba(148,163,184,0.12); color: #fff; }
.trap-body {
    flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 18px 16px 28px;
    max-width: 640px; width: 100%; margin: 0 auto;
}
.trap-step { font-size: 0.9rem; color: #cbd5e1; margin: 0 0 14px; line-height: 1.5; }
.trap-sentence {
    background: rgba(148,163,184,0.06); border-left: 4px solid #f59e0b;
    border-radius: 10px; padding: 16px; margin: 0 0 18px;
    font-size: 1.08rem; line-height: 1.8; color: #f1f5f9;
}
.trap-word { border-radius: 4px; padding: 0 1px; transition: background 0.2s; }
.trap-word--altered {
    background: rgba(239,68,68,0.3); color: #fecaca; font-weight: 800;
    box-shadow: 0 0 0 2px rgba(239,68,68,0.5); border-radius: 4px;
}
.trap-judge { display: flex; gap: 10px; }
.trap-btn {
    flex: 1; border: 0; color: #fff; font-weight: 800; font-size: 1rem;
    padding: 16px; border-radius: 12px; cursor: pointer; transition: filter 0.15s;
}
.trap-btn:hover:not(:disabled) { filter: brightness(1.1); }
.trap-btn--ok { background: #16a34a; }
.trap-btn--trap { background: #dc2626; }
.trap-result {
    margin-top: 18px; padding: 14px; border-radius: 12px;
    border: 1.5px solid;
}
.trap-result.is-right { background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.5); }
.trap-result.is-wrong { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.5); }
.trap-result-tag { font-weight: 800; margin-bottom: 6px; }
.trap-result.is-right .trap-result-tag { color: #22c55e; }
.trap-result.is-wrong .trap-result-tag { color: #f87171; }
.trap-verdict { font-size: 0.92rem; color: #e5e7eb; margin: 0 0 8px; line-height: 1.55; }
.trap-verdict s { color: #f87171; }
.trap-verdict b { color: #4ade80; }
.trap-combo-line { font-size: 0.85rem; color: #94a3b8; margin-bottom: 12px; }
.trap-combo-line b { color: #fcd34d; }
.trap-primary {
    display: block; width: 100%; border: 0; color: #0b101b; font-weight: 800;
    font-size: 1rem; padding: 13px; border-radius: 12px; cursor: pointer;
    background: #fcd34d;
}
.trap-primary:hover { filter: brightness(1.08); }
.trap-victory { text-align: center; padding: 30px 10px; }
.trap-crown { font-size: 4rem; filter: drop-shadow(0 0 30px rgba(245,158,11,0.6)); }
.trap-victory h2 { font-size: 2rem; font-weight: 900; color: #f59e0b; margin: 10px 0 6px; }
.trap-vstats { display: flex; justify-content: center; gap: 18px; margin: 22px 0; }
.trap-vstats > div {
    background: rgba(148,163,184,0.08); border-radius: 12px; padding: 14px 22px;
    display: flex; flex-direction: column; gap: 2px;
}
.trap-vstats b { font-size: 1.6rem; color: #f59e0b; }
.trap-vstats span { font-size: 0.75rem; color: #94a3b8; }
/* Tela final (Hook, TODOS os jogos): botão de INVESTIMENTO (erros →
   flashcards) + replay. .mg-* é a versão compartilhada (despejo/tribunal);
   .trap-* mantido por compat. */
.trap-secondary, .mg-secondary {
    display: block; width: 100%; cursor: pointer; margin-bottom: 10px;
    border: 1px solid rgba(6, 214, 160, 0.45); border-radius: 12px;
    background: rgba(6, 214, 160, 0.12); color: #06d6a0;
    font-weight: 800; font-size: 0.95rem; padding: 12px;
}
.trap-secondary:hover, .mg-secondary:hover { background: rgba(6, 214, 160, 0.2); }
.trap-secondary:disabled, .mg-secondary:disabled { opacity: 0.75; cursor: default; }
.trap-replay, .mg-replay {
    display: block; width: 100%; border: 0; background: transparent;
    color: #94a3b8; font-weight: 700; font-size: 0.9rem;
    padding: 10px; margin-top: 8px; cursor: pointer;
}
.trap-replay:hover, .mg-replay:hover { color: #e5e7eb; }

@media (prefers-reduced-motion: reduce) { .trap-fs { animation: none !important; } }
body.theme-light .trap-fs { background: #f8fafc; color: #1e293b; }
body.theme-light .trap-sentence { background: #eef2f7; color: #0f172a; }
body.theme-light .trap-primary { color: #0f172a; }
/* Contraste (tema claro): o veredito — o payload EDUCACIONAL do feedback —
   usava cores neon do escuro e ficava quase ilegível no claro. */
body.theme-light .trap-verdict { color: #1e293b; }
body.theme-light .trap-verdict s { color: #dc2626; }
body.theme-light .trap-verdict b { color: #15803d; }
body.theme-light .trap-combo-line { color: #475569; }
body.theme-light .trap-combo-line b { color: #b45309; }
body.theme-light .trap-result.is-wrong .trap-result-tag { color: #dc2626; }
body.theme-light .trap-result.is-right .trap-result-tag { color: #15803d; }
body.theme-light .trap-victory h2 { color: #b45309; }
body.theme-light .trap-vstats b { color: #b45309; }
body.theme-light .trap-secondary, body.theme-light .mg-secondary { color: #047857; border-color: rgba(4, 120, 87, 0.4); background: rgba(4, 120, 87, 0.08); }
body.theme-light .trap-replay, body.theme-light .mg-replay { color: #64748b; }
body.theme-light .trap-replay:hover, body.theme-light .mg-replay:hover { color: #1e293b; }

/* ═══════════════════════════════════════════════════════════════
   ANCORAGEM SOCRÁTICA — leitura ativa (socratic-anchor.js)
   ═══════════════════════════════════════════════════════════════ */

/* Botão da toolbar de seleção — destaque sutil pra diferenciar de "Destacar". */
.neuro-toolbar-btn--anchor .neuro-toolbar-icon { filter: saturate(1.2); }
body.socratic-anchor-off .neuro-toolbar-btn--anchor { display: none; }

/* ── Picker de lente (modal central) ── */
.soc-anchor-overlay {
    position: fixed; inset: 0; z-index: 10050;
    display: flex; align-items: center; justify-content: center;
    background: rgba(8, 11, 20, 0.62);
    backdrop-filter: blur(3px);
    padding: 16px;
    animation: socAnchorFade 0.18s ease-out;
}
@keyframes socAnchorFade { from { opacity: 0; } to { opacity: 1; } }
.soc-anchor-card {
    width: min(520px, 100%);
    background: #141a26;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    padding: 18px 18px 20px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
    color: #e5e7eb;
    animation: socAnchorPop 0.2s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes socAnchorPop { from { transform: translateY(8px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.soc-anchor-head { display: flex; align-items: center; gap: 8px; }
.soc-anchor-head h3 { font-size: 1.05rem; font-weight: 800; margin: 0; flex: 1; }
.soc-anchor-x, .soc-anchor-panel-x {
    background: transparent; border: 0; color: #94a3b8; font-size: 1.1rem;
    cursor: pointer; padding: 4px 8px; border-radius: 8px; line-height: 1;
}
.soc-anchor-x:hover, .soc-anchor-panel-x:hover { background: rgba(148,163,184,0.12); color: #e5e7eb; }
.soc-anchor-quote {
    margin: 12px 0 6px; padding: 10px 12px;
    background: rgba(148, 163, 184, 0.08);
    border-left: 3px solid rgba(148, 163, 184, 0.4);
    border-radius: 8px; font-size: 0.92rem; color: #cbd5e1; font-style: italic;
}
.soc-anchor-hint { font-size: 0.82rem; color: #94a3b8; margin: 10px 2px 8px; }
.soc-anchor-lenses { display: flex; flex-direction: column; gap: 8px; }
.soc-anchor-lens {
    display: flex; align-items: center; gap: 10px;
    width: 100%; text-align: left; cursor: pointer;
    background: rgba(148, 163, 184, 0.06);
    border: 1.5px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px; padding: 12px 14px; color: #e5e7eb;
    font-size: 0.95rem; font-weight: 600; transition: all 0.15s;
}
.soc-anchor-lens:hover { border-color: var(--lens); background: color-mix(in srgb, var(--lens) 12%, transparent); }
.soc-anchor-lens.is-active {
    border-color: var(--lens);
    background: color-mix(in srgb, var(--lens) 18%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lens) 22%, transparent);
}
.soc-anchor-lens-icon { font-size: 1.25rem; }
.soc-anchor-answer { margin-top: 14px; }
.soc-anchor-answer-label { display: block; font-size: 0.9rem; margin-bottom: 6px; color: #e5e7eb; }
.soc-anchor-input {
    width: 100%; box-sizing: border-box; padding: 11px 13px;
    background: #0d1320; border: 1.5px solid rgba(148, 163, 184, 0.25);
    border-radius: 10px; color: #f1f5f9; font-size: 0.95rem; outline: none;
}
.soc-anchor-input:focus { border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2); }
.soc-anchor-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.soc-anchor-skip {
    background: transparent; border: 0; color: #94a3b8; cursor: pointer;
    padding: 9px 14px; border-radius: 10px; font-weight: 600;
}
.soc-anchor-skip:hover { background: rgba(148,163,184,0.1); color: #e5e7eb; }
.soc-anchor-save {
    background: linear-gradient(135deg, #22c55e, #0ea5e9);
    border: 0; color: #fff; cursor: pointer; font-weight: 800;
    padding: 9px 18px; border-radius: 10px;
}
.soc-anchor-save:hover { filter: brightness(1.08); }

/* ── Painel lateral (revisão) ── */
.soc-anchor-panel-overlay {
    position: fixed; inset: 0; z-index: 10040;
    background: rgba(8, 11, 20, 0.5);
    display: flex; justify-content: flex-end;
    opacity: 0; transition: opacity 0.2s ease;
}
.soc-anchor-panel-overlay.is-open { opacity: 1; }
.soc-anchor-panel {
    width: min(420px, 92vw); height: 100%;
    background: #0f1521; border-left: 1px solid rgba(148, 163, 184, 0.18);
    display: flex; flex-direction: column; color: #e5e7eb;
    transform: translateX(100%); transition: transform 0.22s cubic-bezier(.2,.8,.2,1);
    box-shadow: -16px 0 48px rgba(0, 0, 0, 0.4);
}
.soc-anchor-panel-overlay.is-open .soc-anchor-panel { transform: none; }
.soc-anchor-panel-head {
    display: flex; align-items: center; gap: 8px;
    padding: 16px; border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}
.soc-anchor-panel-head h2 { font-size: 1.1rem; font-weight: 800; margin: 0; }
.soc-anchor-panel-count {
    background: rgba(56, 189, 248, 0.18); color: #7dd3fc;
    font-size: 0.78rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
}
.soc-anchor-panel-export {
    margin-left: auto; background: rgba(148,163,184,0.1); border: 0;
    color: #cbd5e1; cursor: pointer; font-size: 0.8rem; font-weight: 700;
    padding: 6px 10px; border-radius: 8px;
}
.soc-anchor-panel-export:hover { background: rgba(148,163,184,0.2); color: #fff; }
.soc-anchor-panel-body { flex: 1; overflow-y: auto; padding: 14px 16px 28px; }
.soc-anchor-group { margin-bottom: 18px; }
.soc-anchor-group-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.9rem; font-weight: 800; color: var(--lens, #94a3b8);
    margin: 0 0 8px; padding-bottom: 4px;
    border-bottom: 1px solid color-mix(in srgb, var(--lens) 30%, transparent);
}
.soc-anchor-group-n { margin-left: auto; font-size: 0.75rem; opacity: 0.7; }
.soc-anchor-item {
    background: rgba(148, 163, 184, 0.06);
    border-left: 3px solid var(--lens, #94a3b8);
    border-radius: 8px; padding: 10px 12px; margin-bottom: 8px;
}
.soc-anchor-item-text { margin: 0; font-size: 0.86rem; color: #cbd5e1; font-style: italic; }
.soc-anchor-item-note { margin: 6px 0 0; font-size: 0.9rem; color: #f1f5f9; font-weight: 600; }
.soc-anchor-item-note--empty { color: #64748b; font-weight: 400; font-style: italic; }
.soc-anchor-item-meta {
    display: flex; align-items: center; gap: 10px; margin-top: 8px;
    font-size: 0.72rem; color: #64748b;
}
.soc-anchor-item-del {
    margin-left: auto; background: transparent; border: 0; color: #64748b;
    cursor: pointer; font-size: 0.72rem; text-decoration: underline; padding: 2px 4px;
}
.soc-anchor-item-del:hover { color: #f87171; }
.soc-anchor-empty { text-align: center; padding: 40px 20px; color: #94a3b8; }
.soc-anchor-empty-icon { font-size: 2.4rem; margin-bottom: 10px; opacity: 0.5; }
.soc-anchor-empty-hint { font-size: 0.85rem; margin-top: 8px; }

/* ── Pill flutuante (bottom-left, fora dos FABs bottom-right) ── */
.soc-anchor-pill {
    position: fixed; left: 14px; bottom: 14px; z-index: 9000;
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(20, 26, 38, 0.92); color: #e5e7eb;
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 999px; padding: 8px 14px; cursor: pointer;
    font-weight: 800; font-size: 0.85rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
}
.soc-anchor-pill:hover { border-color: #38bdf8; transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
    .soc-anchor-overlay, .soc-anchor-card,
    .soc-anchor-panel, .soc-anchor-panel-overlay { animation: none !important; transition: none !important; }
}

/* Tema claro */
body.theme-light .soc-anchor-card { background: #ffffff; color: #1e293b; border-color: #e2e8f0; }
body.theme-light .soc-anchor-quote { color: #475569; background: #f1f5f9; }
body.theme-light .soc-anchor-lens { color: #1e293b; background: #f8fafc; border-color: #e2e8f0; }
body.theme-light .soc-anchor-input { background: #fff; color: #0f172a; border-color: #cbd5e1; }
body.theme-light .soc-anchor-panel { background: #ffffff; color: #1e293b; }
body.theme-light .soc-anchor-item-text { color: #475569; }
body.theme-light .soc-anchor-item-note { color: #0f172a; }
body.theme-light .soc-anchor-pill { background: rgba(255,255,255,0.95); color: #0f172a; }

.retention-options-wrapper {
    background: var(--neuro-bg-raised, #111827);
    padding: 16px 0;
    flex-shrink: 0;
}

.retention-options-label {
    font-size: 12px;
    font-weight: 600;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    color: var(--neuro-text-secondary, #94a3b8);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: center;
}

.retention-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
}

.retention-option {
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    color: var(--neuro-text-primary, #e2e8f0);
    cursor: pointer;
    transition: all 0.2s;
    min-width: 90px;
    text-align: center;
}

.retention-option:hover, .retention-option:active {
    border-color: var(--neuro-cyan, #06d6a0);
    background: rgba(6, 214, 160, 0.12);
    color: var(--neuro-cyan, #06d6a0);
    transform: scale(1.05);
}

.retention-option.used {
    opacity: 0.3;
    pointer-events: none;
    transform: scale(0.95);
}

.retention-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: auto;
    padding-bottom: 20px;
}

.retention-btn {
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.retention-btn-primary {
    background: linear-gradient(135deg, var(--neuro-green, #22c55e), #16a34a);
    color: white;
}

.retention-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

.retention-btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    color: var(--neuro-text-secondary, #94a3b8);
}

.retention-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

.retention-result {
    text-align: center;
    padding: 20px;
}

.retention-result-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.retention-result h4 {
    font-size: 18px;
    font-weight: 800;
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    margin-bottom: 8px;
}

.retention-result.success h4 { color: var(--neuro-green, #22c55e); }
.retention-result.partial h4 { color: #eab308; }
.retention-result.fail h4 { color: var(--neuro-red, #ef4444); }

/* ==================== MASTERY GATE - Territory Conquest ==================== */

:root {
    --mastery-gold: #D4AF37;
    --mastery-gold-glow: rgba(212, 175, 55, 0.3);
    --mastery-dark: #0a0812;
    --mastery-locked: rgba(10, 8, 18, 0.95);
}

#mastery-hud {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #0a0812 0%, #1a1625 100%);
    border: 1px solid var(--mastery-gold);
    border-radius: 16px;
    padding: 12px 20px;
    display: none;
    align-items: center;
    gap: 16px;
    z-index: 150;
    box-shadow: 0 4px 30px rgba(212, 175, 55, 0.2);
    min-width: 320px;
}

#mastery-hud.active {
    display: flex;
}

.mastery-icon {
    font-size: 28px;
    filter: drop-shadow(0 0 8px var(--mastery-gold));
}

.mastery-info {
    flex: 1;
}

.mastery-title {
    font-size: 11px;
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    color: var(--mastery-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.mastery-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
}

.mastery-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mastery-gold), #f4d03f);
    border-radius: 3px;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px var(--mastery-gold);
}

.mastery-gates {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

.mastery-gate {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: all 0.3s;
}

.mastery-gate.locked {
    background: rgba(255,255,255,0.06);
    color: var(--neuro-text-secondary, #94a3b8);
    border: 1px solid rgba(255,255,255,0.12);
}

.mastery-gate.fog {
    background: rgba(6, 214, 160, 0.2);
    color: var(--neuro-cyan, #06d6a0);
    border: 1px solid var(--neuro-cyan, #06d6a0);
    animation: gate-pulse 2s infinite;
}

.mastery-gate.conquered {
    background: linear-gradient(135deg, var(--mastery-gold), #f4d03f);
    color: #0a0812;
    border: 1px solid var(--mastery-gold);
    box-shadow: 0 0 8px var(--mastery-gold-glow);
}

@keyframes gate-pulse {
    0%, 100% { box-shadow: 0 0 4px rgba(6, 214, 160, 0.3); }
    50% { box-shadow: 0 0 12px rgba(6, 214, 160, 0.6); }
}

.mastery-stats {
    text-align: right;
    color: #cbd5e1;
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
}

.mastery-decay-bar {
    width: 60px;
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;
}

.mastery-decay-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--neuro-green, #22c55e), var(--neuro-red, #ef4444));
    transition: width 0.1s linear;
}

.mastery-close {
    background: none;
    border: none;
    color: var(--neuro-text-secondary, #94a3b8);
    cursor: pointer;
    padding: 4px;
}

.mastery-close:hover {
    color: var(--neuro-red, #ef4444);
}

/* Golden Seal Effect */
.golden-seal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, var(--mastery-gold) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 200;
    pointer-events: none;
    animation: seal-stamp 0.6s ease-out forwards;
}

.golden-seal::after {
    content: '\2713';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    color: #0a0812;
    font-weight: 900;
}

@keyframes seal-stamp {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

body.mastery-shake {
    animation: mastery-shake 0.3s ease;
}

@keyframes mastery-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.sparkle-particle {
    position: fixed;
    width: 8px;
    height: 8px;
    background: var(--mastery-gold);
    border-radius: 50%;
    pointer-events: none;
    z-index: 200;
    animation: sparkle-float 1s ease-out forwards;
}

@keyframes sparkle-float {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0) translateY(-50px); opacity: 0; }
}

/* Decay warning */
.decay-warning {
    position: fixed;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--neuro-red, #ef4444), #dc2626);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    z-index: 160;
    animation: decay-pulse 0.5s infinite;
    display: none;
}

.decay-warning.active,
#decay-warning.active {
    display: block;
}

@keyframes decay-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

#decay-warning {
    position: fixed;
    top: 140px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--neuro-red, #ef4444), #dc2626);
    color: white;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    z-index: 160;
    display: none;
    text-align: center;
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.4);
}

.decay-bar {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}

.decay-fill {
    height: 100%;
    background: white;
    border-radius: 2px;
    transition: width 0.2s ease;
}

.mastery-word-overlay {
    position: absolute;
    border-radius: 3px;
    pointer-events: none;
    z-index: 60;
    transition: opacity 0.2s ease;
}

/* ==================== QUEST FULLSCREEN ==================== */
#quest-fullscreen.active,
#mastery-fullscreen.active,
#retention-fullscreen.active {
    display: flex !important;
}

.mastery-gate-active {
    overscroll-behavior-y: contain;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}

/* Quest Text */
#quest-fs-text .quest-word {
    display: inline;
    padding: 2px 4px;
    margin: 1px;
    border-radius: 4px;
    transition: all 0.15s ease;
}

#quest-fs-text .quest-word.read {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
}

#quest-fs-text .quest-word.shatter {
    animation: shatterEffect 0.4s ease forwards;
}

@keyframes shatterEffect {
    0% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0);
    }
    50% {
        opacity: 0.6;
        transform: scale(0.9) rotate(-2deg);
        filter: blur(1px);
    }
    100% {
        opacity: 0.25;
        transform: scale(0.85) translateY(3px);
        filter: blur(0.5px);
        color: #4b5563;
        background: transparent;
    }
}

#quest-fs-text .quest-word.shattered {
    opacity: 0.25;
    transform: scale(0.85) translateY(3px);
    color: #4b5563;
    background: transparent;
    transition: none;
}

#quest-fs-text .quest-word.current {
    background: linear-gradient(135deg, #f97316, var(--neuro-red, #ef4444));
    color: white;
    font-weight: 700;
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.5);
    transform: scale(1.05);
}

#quest-fs-text .quest-word.unread {
    color: #9ca3af;
}

/* Quest Checkpoints */
.quest-fs-checkpoint {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.3s;
    border: 2px solid transparent;
}

.quest-fs-checkpoint.pending {
    background: #374151;
    color: #9ca3af;
    border-color: #4b5563;
}

.quest-fs-checkpoint.active {
    background: linear-gradient(135deg, #f97316, var(--neuro-red, #ef4444));
    color: white;
    border-color: #fb923c;
    animation: checkpoint-pulse 1s infinite;
}

.quest-fs-checkpoint.passed {
    background: var(--neuro-green, #22c55e);
    color: white;
    border-color: #4ade80;
}

@keyframes checkpoint-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(249, 115, 22, 0); }
}

/* ==================== MASTERY FULLSCREEN ==================== */
#mastery-fs-text .mastery-word {
    display: inline-block;
    padding: 4px 6px;
    margin: 2px;
    border-radius: 4px;
    transition: all 0.2s ease;
    position: relative;
}

#mastery-fs-text .mastery-word.hidden-word {
    background: var(--neuro-bg-surface, #1a2035);
    color: transparent;
    user-select: none;
}

#mastery-fs-text .mastery-word.locked-word {
    background: #0f0f14;
    color: transparent;
    user-select: none;
}

#mastery-fs-text .mastery-word.revealed-word {
    background: rgba(212, 175, 55, 0.12);
    color: #fef3c7;
    border: 1px solid rgba(212, 175, 55, 0.25);
    animation: word-reveal 0.3s ease;
}

#mastery-fs-text .mastery-word.conquered-word {
    color: var(--neuro-text-primary, #e2e8f0);
    background: transparent;
}

@keyframes word-reveal {
    0% { transform: scale(0.9); opacity: 0.5; }
    50% { transform: scale(1.1); box-shadow: 0 0 20px rgba(212, 175, 55, 0.6); }
    100% { transform: scale(1); opacity: 1; }
}

/* Mastery FS Gates */
.mastery-fs-gate {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.3s;
}

.mastery-fs-gate.locked {
    background: var(--neuro-bg-surface, #1a2035);
    color: var(--neuro-text-secondary, #94a3b8);
    border: 1px solid #374151;
}

.mastery-fs-gate.fog {
    background: linear-gradient(135deg, rgba(6, 214, 160, 0.3), rgba(14, 165, 233, 0.3));
    color: white;
    border: 1px solid var(--neuro-cyan, #06d6a0);
    animation: gate-active 1.5s infinite;
}

.mastery-fs-gate.conquered {
    background: linear-gradient(135deg, #d4af37, #f4d03f);
    color: var(--neuro-bg-surface, #1a2035);
    border: 1px solid #fcd34d;
}

@keyframes gate-active {
    0%, 100% { box-shadow: 0 0 0 0 rgba(6, 214, 160, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(6, 214, 160, 0); }
}

/* ==================== RETENTION FULLSCREEN ==================== */
#retention-fs-text .retention-word {
    display: inline;
}

#retention-fs-text .retention-blank {
    display: inline-block;
    min-width: 70px;
    padding: 4px 8px;
    margin: 2px 4px;
    background: rgba(6, 214, 160, 0.1);
    border: 2px dashed var(--neuro-cyan, #06d6a0);
    border-radius: 6px;
    color: rgba(6, 214, 160, 0.7);
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

#retention-fs-text .retention-blank.active-blank {
    background: rgba(6, 214, 160, 0.2);
    border-color: var(--neuro-cyan, #06d6a0);
    animation: blank-pulse 1s infinite;
}

#retention-fs-text .retention-blank.filled {
    background: rgba(34, 197, 94, 0.15);
    border-color: var(--neuro-green, #22c55e);
    border-style: solid;
    color: #86efac;
}

#retention-fs-text .retention-blank.wrong {
    background: rgba(239, 68, 68, 0.15);
    border-color: var(--neuro-red, #ef4444);
    border-style: solid;
    color: #fca5a5;
}

@keyframes blank-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(6, 214, 160, 0.5); }
    50% { box-shadow: 0 0 0 6px rgba(6, 214, 160, 0); }
}

/* Retention Options */
.retention-fs-option {
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: white;
    font-weight: 600;
    font-size: 14px;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
}

.retention-fs-option:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: scale(1.05);
}

.retention-fs-option.used {
    opacity: 0.4;
    pointer-events: none;
    text-decoration: line-through;
}

/* ==================== NEURO FLOATING DOCK ==================== */
.neuro-dock {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 20px;
    background: rgba(12, 16, 33, 0.75);
    backdrop-filter: blur(20px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.reader-active .neuro-dock {
    display: flex;
    /* Animation Hierarchy: fade-in suave em vez de hard appear ao abrir reader.
       view-section animation (rodada 32) cobre a view, mas dock estava hard-popping.
       Mesma duração 240ms ease-out pra consistência. */
    animation: dockFadeIn 0.24s ease-out;
}
@keyframes dockFadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    body.reader-active .neuro-dock { animation: none; }
}

.neuro-dock:hover {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(6, 214, 160, 0.15);
}

.neuro-dock .dock-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    transition: all 0.2s ease;
    color: var(--neuro-text-secondary, #94a3b8);
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.neuro-dock .dock-btn:hover {
    background: rgba(6, 214, 160, 0.1);
    color: var(--neuro-cyan, #06d6a0);
    transform: translateY(-2px);
}

.neuro-dock .dock-btn.active {
    background: rgba(6, 214, 160, 0.2);
    color: var(--neuro-cyan, #06d6a0);
    box-shadow: inset 0 -2px 0 var(--neuro-cyan, #06d6a0);
}

body.theme-dark .neuro-dock .dock-btn {
    color: var(--neuro-text-secondary, #94a3b8);
}

body.theme-dark .neuro-dock .dock-btn:hover {
    background: rgba(6, 214, 160, 0.15);
    color: var(--neuro-cyan, #06d6a0);
}

.neuro-dock .dock-play {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--neuro-cyan, #06d6a0), var(--neuro-blue, #0ea5e9));
    color: white;
    box-shadow: 0 4px 15px rgba(6, 214, 160, 0.35);
    margin: 0 4px;
}

.neuro-dock .dock-play:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(6, 214, 160, 0.5);
}

.neuro-dock .dock-play.playing {
    background: linear-gradient(135deg, #f97316, var(--neuro-red, #ef4444));
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
}

.neuro-dock .dock-divider {
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.06);
    margin: 0 4px;
}

body.theme-dark .neuro-dock .dock-divider {
    background: rgba(255, 255, 255, 0.06);
}

.neuro-dock .dock-emoji {
    font-size: 20px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

/* Chunk label (1x/3x/5x) */
.neuro-dock #chunk-label {
    font-size: 14px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    letter-spacing: -0.5px;
}
#dock-chunk-btn.active {
    background: rgba(6, 214, 160, 0.15) !important;
    color: var(--neuro-cyan, #06d6a0) !important;
}
#dock-chunk-btn.active #chunk-label {
    color: var(--neuro-cyan, #06d6a0);
}

.neuro-dock .dock-controls-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
}

.neuro-dock .dock-eye-btn {
    background: rgba(6, 214, 160, 0.15) !important;
    color: var(--neuro-cyan, #06d6a0) !important;
    flex-shrink: 0;
}

.neuro-dock .dock-eye-btn:hover {
    background: rgba(6, 214, 160, 0.25) !important;
    transform: translateY(-2px);
}

body.theme-dark .neuro-dock .dock-eye-btn {
    background: rgba(6, 214, 160, 0.12) !important;
    color: var(--neuro-cyan, #06d6a0) !important;
}

.neuro-dock.dock-hidden {
    padding: 8px 12px;
}

.neuro-dock.dock-hidden .dock-controls-wrapper {
    display: none;
}

/* Global UI hidden class */
body.ui-hidden #help-btn,
body.ui-hidden #btn-sniper-fab,
body.ui-hidden #btn-auto-select-fab,
body.ui-hidden #btn-smart-hover-fab,
body.ui-hidden #selection-mode-bar,
body.ui-hidden #ruler-controls,
body.ui-hidden .sniper-fab,
body.ui-hidden .auto-select-fab,
body.ui-hidden .smart-hover-fab {
    display: none !important;
}

/* Quando sidebar aberta: esconder FABs (sniper/auto-select/smart-hover/neurotutor)
   pra não sobrepor o conteúdo do menu lateral. */
body.neuro-sidebar-open .sniper-fab,
body.neuro-sidebar-open .auto-select-fab,
body.neuro-sidebar-open .smart-hover-fab,
body.neuro-sidebar-open .neuro-fab,
body.neuro-sidebar-open .neurotutor-fab,
body.neuro-sidebar-open #btn-sniper-fab,
body.neuro-sidebar-open #btn-auto-select-fab,
body.neuro-sidebar-open #btn-smart-hover-fab {
    display: none !important;
}

/* Hide old controls when dock is active */
body.reader-active .mobile-controls,
body.reader-active .desktop-toolbar {
    display: none !important;
}

/* Zen mode hides dock */
body.zen-mode .neuro-dock {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(100px);
}

/* ==================== MOBILE-ONLY BUTTONS (hidden on desktop) ==================== */
.dock-mobile-only,
#neuro-dock .dock-btn.dock-mobile-only {
    display: none !important;
}

/* ==================== ACTIVE TOOL BUTTON (all screen sizes) ==================== */
/* Hidden by default — shown via .dock-tool-visible class when a tool is active */
#neuro-dock .dock-btn.dock-active-tool {
    display: none !important;
}
#neuro-dock .dock-btn.dock-active-tool.dock-tool-visible {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    background: var(--active-tool-bg, rgba(6, 214, 160, 0.12)) !important;
    border: 1.5px solid var(--active-tool-color, #06d6a0) !important;
    color: var(--active-tool-color, #06d6a0) !important;
    animation: dock-tool-pulse 1.5s ease-in-out infinite !important;
    transition: all 0.2s ease !important;
}
#neuro-dock .dock-btn.dock-active-tool.dock-tool-visible:hover {
    filter: brightness(1.3) !important;
    transform: scale(1.08) !important;
}
@keyframes dock-tool-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(6, 214, 160, 0); }
    50% { box-shadow: 0 0 12px 2px rgba(6, 214, 160, 0.25); }
}

/* ==================== DOCK REGION NAV GROUP ==================== */
.dock-region-group {
    display: none; /* hidden by default (desktop + no regions) */
}
.dock-region-label {
    font-size: 11px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--neuro-cyan, #06d6a0);
    letter-spacing: 0.5px;
    white-space: nowrap;
    min-width: 28px;
    text-align: center;
}
.dock-region-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    /* WCAG 2.5.8 AA (24x24 min) e Apple HIG (44x44) — desktop usa 34px,
       mobile bumpa pra 44px via media query abaixo */
    width: 32px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--neuro-text-secondary, #94a3b8);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}
@media (max-width: 768px) {
    .dock-region-arrow {
        /* Mobile: alvo de 44px conforme Apple HIG / Material 48dp */
        min-width: 44px;
        min-height: 44px;
    }
}
.dock-region-arrow:hover,
.dock-region-arrow:active {
    color: var(--neuro-cyan, #06d6a0);
    background: rgba(6, 214, 160, 0.12);
}

/* ==================== MOBILE COMPACT DOCK (Hamburger Mode) ==================== */
@media (max-width: 768px) {
    .neuro-dock {
        bottom: 12px;
        padding: 6px 8px;
        gap: 6px;
        width: auto;
        /* Acesso rápido: régua/velocidade/zoom ficam NO dock (1 toque). Se não
           couberem, a barra rola na horizontal em vez de escondê-los no menu. */
        max-width: calc(100% - 16px);
        overflow-x: auto;
        overflow-y: visible;
        flex-wrap: nowrap;
        justify-content: flex-start;
        scrollbar-width: none;              /* Firefox */
        -webkit-overflow-scrolling: touch;
    }
    .neuro-dock::-webkit-scrollbar { display: none; }  /* WebKit */

    /* Hide regular dock buttons on mobile — MAS mantém os de acesso rápido
       (.dock-quick: régua, velocidade, zoom, chunk). */
    #neuro-dock .dock-eye-btn,
    #neuro-dock .dock-divider,
    #neuro-dock .dock-controls-wrapper > .dock-btn:not(.dock-play):not(.dock-quick),
    #neuro-dock .dock-controls-wrapper > .dock-divider,
    #neuro-dock .dock-hide-mobile,
    #neuro-dock .dock-btn.dock-hide-mobile {
        display: none !important;
    }

    /* Show ONLY mobile buttons + play (only .dock-btn, not region group) */
    #neuro-dock .dock-btn.dock-mobile-only {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Ferramentas de acesso rápido — sempre visíveis no dock (1 toque) */
    #neuro-dock .dock-btn.dock-quick {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 42px;
        min-width: 42px;
        height: 42px;
        flex-shrink: 0;
    }

    /* Hamburger button */
    #neuro-dock #dock-hamburger {
        width: 48px;
        height: 48px;
        min-width: 48px;
        border-radius: 14px;
        background: rgba(6, 214, 160, 0.08);
        border: 1px solid rgba(6, 214, 160, 0.15);
        color: var(--neuro-cyan, #06d6a0);
    }
    #neuro-dock #dock-hamburger i,
    #neuro-dock #dock-hamburger svg {
        width: 20px;
        height: 20px;
    }

    /* Play/Pause — keep large and centered */
    #neuro-dock .dock-play {
        width: 56px;
        height: 56px;
        min-width: 56px;
        flex-shrink: 0;
        border-radius: 50%;
        margin: 0 4px;
    }
    #neuro-dock .dock-play i,
    #neuro-dock .dock-play svg {
        width: 24px;
        height: 24px;
    }

    /* Region navigator group — hidden until regions exist */
    #neuro-dock #dock-region-nav {
        display: none !important;
    }
    #neuro-dock #dock-region-nav.dock-region-visible {
        display: flex !important;
        align-items: center !important;
        gap: 0 !important;
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
        height: 40px !important;
        background: rgba(6, 214, 160, 0.06) !important;
        border: 1px solid rgba(6, 214, 160, 0.12) !important;
        border-radius: 12px !important;
        padding: 2px !important;
    }

    /* Controls wrapper: only show the play button */
    #neuro-dock .dock-controls-wrapper {
        display: contents;
    }
}

/* ==================== DOCK GRID PANEL (Hamburger Expandable) ==================== */
.dock-grid-panel {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 61;
    width: calc(100% - 24px);
    max-width: min(420px, calc(100vw - 24px));
    /* Sem isto, em janela baixa / mobile horizontal as seções de baixo (Leitura,
       Estudo, Áreas) ficavam CORTADAS atrás da barra de play. Limita a altura ao
       espaço acima da barra e rola internamente. (vh como fallback do dvh.) */
    max-height: calc(100vh - 160px);
    max-height: calc(100dvh - 160px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: rgba(10, 13, 20, 0.97);
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    border: 1px solid rgba(6, 214, 160, 0.12);
    border-radius: 20px;
    padding: 12px;
    box-shadow:
        0 -8px 40px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.04),
        0 0 80px rgba(6, 214, 160, 0.06);
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.dock-grid-panel.dock-grid-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Hide FABs when grid panel is open to prevent overlap */
body.dock-grid-active .neuro-fab,
body.dock-grid-active .sniper-fab,
body.dock-grid-active .auto-select-fab,
body.dock-grid-active .smart-hover-fab {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease !important;
}

.dock-grid-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dock-grid-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.dock-grid-row-half {
    grid-template-columns: repeat(2, 1fr);
}

.dock-grid-row-third {
    grid-template-columns: repeat(3, 1fr);
}

.dock-grid-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 4px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    background: rgba(255, 255, 255, 0.03);
    color: var(--neuro-text-secondary, #94a3b8);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 60px;
    font-family: 'Outfit', sans-serif;
}

.dock-grid-btn:active {
    transform: scale(0.92);
    background: rgba(6, 214, 160, 0.15);
}

.dock-grid-btn.active {
    background: rgba(6, 214, 160, 0.2);
    color: var(--neuro-cyan, #06d6a0);
    border-color: rgba(6, 214, 160, 0.3);
    box-shadow: inset 0 -2px 0 var(--neuro-cyan, #06d6a0);
}

.dock-grid-btn span:last-child {
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    opacity: 0.7;
}

.dock-grid-btn i,
.dock-grid-btn svg {
    width: 20px;
    height: 20px;
}

.dock-grid-btn .dock-emoji {
    font-size: 20px;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
}

.dock-grid-chunk {
    font-size: 16px;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    color: var(--neuro-cyan, #06d6a0);
}

/* Game buttons — subtle highlight */
.dock-grid-btn.dock-grid-game {
    border-color: rgba(6, 214, 160, 0.08);
    background: rgba(6, 214, 160, 0.04);
}

/* Settings button */
.dock-grid-btn.dock-grid-settings {
    border-color: rgba(14, 165, 233, 0.12);
    background: rgba(14, 165, 233, 0.05);
    color: var(--neuro-blue, #0ea5e9);
}

/* Close button */
.dock-grid-btn.dock-grid-close {
    border-color: rgba(239, 68, 68, 0.1);
    background: rgba(239, 68, 68, 0.04);
    color: var(--neuro-red, #ef4444);
}

/* Reading container padding to avoid dock overlap */
body.reader-active #pdf-container,
body.reader-active .reflow-container {
    padding-bottom: 100px !important;
}

/* ==================== REGION COUNTER BADGE ==================== */
.region-counter-badge {
    position: fixed;
    bottom: 24px;
    left: 16px;
    background: linear-gradient(135deg, #06d6a0, #05b888);
    color: white;
    padding: 8px 16px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    display: none;
    backdrop-filter: blur(8px);
    z-index: 60;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 12px rgba(6, 214, 160, 0.3);
}
.region-counter-badge:hover {
    background: linear-gradient(135deg, #05b888, #049a72);
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(6, 214, 160, 0.4);
}

@media (min-width: 768px) {
    .region-counter-badge {
        bottom: 24px;
        left: 24px;
    }
}

/* ==================== SNIPER FAB ====================
   Stack mobile FAB (de baixo pra cima):
   - .neuro-fab (NeuroTutor brain, 72px): bottom 110 → ocupa 110→196
   - Sniper (56px): bottom 210 → ocupa 210→280
   - Auto (56px): bottom 286 → ocupa 286→356
   - Smart (56px): bottom 362 → ocupa 362→432
   Mais 14px gap entre cada. */
.sniper-fab {
    position: fixed;
    bottom: calc(195px + env(safe-area-inset-bottom, 0px));
    right: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f97316, #dc2626);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(249, 115, 22, 0.4);
    z-index: 55;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px) {
    .sniper-fab {
        bottom: 100px;
        left: 24px;
        right: auto;
    }
}

.sniper-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(249, 115, 22, 0.5);
}

.sniper-fab:active {
    transform: scale(0.95);
}

.sniper-fab.active {
    background: linear-gradient(135deg, #dc2626, #991b1b);
    animation: fab-pulse 1.5s ease-in-out infinite;
}

@keyframes fab-pulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(220, 38, 38, 0.4); }
    50% { box-shadow: 0 4px 30px rgba(220, 38, 38, 0.7); }
}

body.mode-clipboard .sniper-fab {
    display: none;
}

body:not(.reader-active) .sniper-fab {
    display: none;
}

/* ==================== CLEANUP: Hide duplicates ==================== */
body.reader-active .desktop-toolbar,
body.reader-active .mobile-controls,
body.reader-active .zoom-controls-mobile {
    display: none !important;
}

/* ==================== DESKTOP SCROLL FIX ==================== */
@media (min-width: 768px) {
    #pdf-container {
        overflow: scroll !important;
        /* scroll-behavior: smooth removido — conflitava com o zoom,
           causando animação de scroll para posição errada após reposicionar */
    }

    #pdf-container::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    #pdf-container::-webkit-scrollbar-track {
        background: var(--neuro-bg-surface, #1a2035);
        border-radius: 6px;
    }

    #pdf-container::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.12);
        border-radius: 6px;
        border: 3px solid var(--neuro-bg-surface, #1a2035);
    }

    #pdf-container::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.2);
    }

    body.theme-dark #pdf-container::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.1);
    }

    body.theme-dark #pdf-container::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.18);
    }

    #pdf-container::-webkit-scrollbar-corner {
        background: var(--neuro-bg-surface, #1a2035);
    }
}

/* ==================== HIDE ELEMENTS DURING PLAY ==================== */
body.playing .sniper-fab,
body.playing .auto-select-fab,
body.playing .smart-hover-fab,
body.playing .teleprompter-show-btn,
body.playing .page-navigator,
body.playing .region-counter,
body.playing .help-btn {
    display: none !important;
}

/* ==================== CLIPBOARD MORE MENU ==================== */
.clipboard-more-menu {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(12px);
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}

.clipboard-more-content {
    background: var(--neuro-bg-raised, #111827);
    border-radius: 24px 24px 0 0;
    width: 100%;
    max-width: 420px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: none;
}

body.theme-dark .clipboard-more-content {
    background: var(--neuro-bg-raised, #111827);
    color: var(--neuro-text-primary, #e2e8f0);
}

.clipboard-more-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

body.theme-dark .clipboard-more-header {
    border-color: rgba(255, 255, 255, 0.06);
}

.clipboard-more-close {
    background: rgba(255, 255, 255, 0.06);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    color: var(--neuro-text-secondary, #94a3b8);
}

body.theme-dark .clipboard-more-close {
    background: rgba(255, 255, 255, 0.06);
    color: var(--neuro-text-primary, #e2e8f0);
}

.clipboard-more-section {
    margin-bottom: 16px;
}

.clipboard-more-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    color: var(--neuro-text-secondary, #94a3b8);
    text-transform: uppercase;
    margin-bottom: 8px;
}

body.theme-dark .clipboard-more-label {
    color: var(--neuro-text-secondary, #94a3b8);
}

.clipboard-more-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.clipboard-more-btn {
    flex: 1;
    min-width: 60px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--neuro-text-primary, #e2e8f0);
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
}

body.theme-dark .clipboard-more-btn {
    background: rgba(255, 255, 255, 0.04);
    color: var(--neuro-text-primary, #e2e8f0);
}

body.theme-sepia .clipboard-more-btn {
    background: rgba(254, 243, 199, 0.15);
    color: #fef3c7;
}

.clipboard-more-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

body.theme-dark .clipboard-more-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

body.theme-sepia .clipboard-more-btn:hover {
    background: rgba(254, 243, 199, 0.25);
}

.clipboard-more-btn.active {
    background: var(--neuro-cyan, #06d6a0);
    color: #0c1021;
}

.clipboard-more-value {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    padding: 12px;
    font-weight: 700;
    font-size: 16px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--neuro-text-primary, #e2e8f0);
}

body.theme-dark .clipboard-more-value {
    color: var(--neuro-text-primary, #e2e8f0);
}

body.theme-sepia .clipboard-more-value {
    color: #fef3c7;
}

/* Menu de ferramentas do leitor de texto colado — grade de tiles agrupados
   (ícone em cima + rótulo embaixo), espelhando o dock em grade do leitor PDF. */
.clipboard-more-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.clipboard-more-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 400px) {
    .clipboard-more-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

.clipboard-more-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 66px;
    padding: 10px 6px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--neuro-text-primary, #e2e8f0);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    line-height: 1.1;
    text-align: center;
    cursor: pointer;
    transition: transform 0.12s, background 0.15s, border-color 0.15s;
}
.clipboard-more-tile .cmore-ico { font-size: 20px; line-height: 1; }
.clipboard-more-tile:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-1px); }
.clipboard-more-tile:active { transform: scale(0.94); }
.clipboard-more-tile.active {
    background: rgba(6, 214, 160, 0.16);
    border-color: rgba(6, 214, 160, 0.45);
    color: var(--neuro-cyan, #06d6a0);
}
body.theme-sepia .clipboard-more-tile { background: rgba(254, 243, 199, 0.12); color: #fef3c7; }

/* Botão de menu da zen-bar — leve destaque para sinalizar "abre ferramentas".
   Seletor de 3 classes (.zen-btn.zen-menu-btn) + !important para vencer o bloco
   de paridade `.clipboard-zen-bar .zen-btn { background:transparent!important }`,
   mesmo padrão usado pelo `.zen-btn.play-btn`. */
.clipboard-zen-bar .zen-btn.zen-menu-btn {
    background: rgba(6, 214, 160, 0.14) !important;
    color: var(--neuro-cyan) !important;
    flex-shrink: 0;
}
.clipboard-zen-bar .zen-btn.zen-menu-btn:hover { background: rgba(6, 214, 160, 0.24) !important; }

/* ==================== HELP MODAL ==================== */
.help-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(12px);
    z-index: 200;
    display: flex;
    /* flex-start + margin-block:auto + overflow-y:auto: nunca corta o topo
       e rola conteúdo de ajuda alto no celular (antes faltava overflow). */
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: fadeIn 0.2s ease;
}
.help-modal-overlay > * { margin-block: auto; }

.help-modal-content {
    background: var(--neuro-bg-raised, #111827);
    border-radius: 20px;
    width: 100%;
    max-width: 420px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

body.theme-dark .help-modal-content {
    background: var(--neuro-bg-raised, #111827);
    color: var(--neuro-text-primary, #e2e8f0);
}

.help-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--neuro-text-primary, #e2e8f0);
}

body.theme-dark .help-modal-header {
    border-color: rgba(255, 255, 255, 0.06);
}

.help-modal-close {
    background: rgba(255, 255, 255, 0.06);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    color: var(--neuro-text-secondary, #94a3b8);
}

body.theme-dark .help-modal-close {
    background: rgba(255, 255, 255, 0.06);
    color: var(--neuro-text-primary, #e2e8f0);
}

.help-modal-body {
    padding: 20px;
}

.help-section {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

body.theme-dark .help-section {
    border-color: rgba(255, 255, 255, 0.04);
}

.help-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.help-section h4 {
    font-size: 14px;
    font-weight: 700;
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    margin-bottom: 6px;
    color: var(--neuro-cyan, #06d6a0);
}

body.theme-dark .help-section h4 {
    color: var(--neuro-cyan, #06d6a0);
}

.help-section p {
    font-size: 13px;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    color: var(--neuro-text-secondary, #94a3b8);
    line-height: 1.5;
}

body.theme-dark .help-section p {
    color: var(--neuro-text-secondary, #94a3b8);
}

.help-modal-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

body.theme-dark .help-modal-footer {
    border-color: rgba(255, 255, 255, 0.06);
}

.help-tutorial-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--neuro-cyan, #06d6a0), var(--neuro-blue, #0ea5e9));
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
}

.help-tutorial-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(6, 214, 160, 0.35);
}

/* ==================== AUTO-SELECT FAB ==================== */
.auto-select-fab {
    position: fixed;
    bottom: calc(255px + env(safe-area-inset-bottom, 0px));
    right: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--neuro-purple, #a78bfa), var(--neuro-cyan, #06d6a0));
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 20px rgba(167, 139, 250, 0.35);
    z-index: 55;
    transition: all 0.3s ease;
}

.auto-select-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 30px rgba(167, 139, 250, 0.5);
}

@media (min-width: 768px) {
    .auto-select-fab {
        bottom: 170px;
        left: 24px;
        right: auto;
    }
}

/* ==================== SMART HOVER FAB ==================== */
.smart-hover-fab {
    position: fixed;
    bottom: calc(315px + env(safe-area-inset-bottom, 0px));
    right: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #06b6d4, #0284c7);
    color: white;
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 20px rgba(6, 182, 212, 0.35);
    z-index: 55;
    transition: all 0.3s ease;
}

.smart-hover-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 30px rgba(6, 182, 212, 0.5);
}

.smart-hover-fab:active {
    transform: scale(0.95);
}

.smart-hover-fab.active {
    background: linear-gradient(135deg, #0284c7, #1d4ed8);
    animation: fab-pulse 1.5s ease-in-out infinite;
}

@media (min-width: 768px) {
    .smart-hover-fab {
        bottom: 240px;
        left: 24px;
        right: auto;
    }
}

/* ==================== SMART HOVER HIGHLIGHT ==================== */
.smart-hover-highlight {
    position: absolute;
    background: rgba(6, 182, 212, 0.08);
    border: 2px solid rgba(6, 182, 212, 0.4);
    border-radius: 6px;
    pointer-events: none;
    z-index: 5;
    transition: all 0.15s ease-out;
    animation: smart-hover-fade-in 0.15s ease-out;
}

@keyframes smart-hover-fade-in {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

.smart-hover-label {
    position: absolute;
    top: -28px;
    right: 0;
    background: rgba(6, 182, 212, 0.9);
    color: white;
    font-size: 11px;
    font-family: 'Outfit', sans-serif;
    padding: 3px 8px;
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
    transition: background 0.2s ease;
}

/* Estado selecionado do Smart Hover */
.smart-hover-highlight.smart-hover-selected {
    background: rgba(6, 214, 160, 0.15);
    border-color: rgba(6, 214, 160, 0.6);
    box-shadow: 0 0 20px rgba(6, 214, 160, 0.2);
}

.smart-hover-highlight.smart-hover-selected .smart-hover-label {
    background: rgba(6, 214, 160, 0.9);
}

/* Theme variants */
body.theme-light .smart-hover-highlight {
    background: rgba(6, 182, 212, 0.06);
    border-color: rgba(6, 182, 212, 0.35);
}

body.theme-light .smart-hover-label {
    background: rgba(6, 182, 212, 0.95);
}

body.theme-sepia .smart-hover-highlight {
    background: rgba(6, 182, 212, 0.05);
    border-color: rgba(6, 182, 212, 0.3);
}

body.theme-sepia .smart-hover-label {
    background: rgba(6, 182, 212, 0.85);
}

/* Smart Hover Word Highlights (palavras individuais selecionadas para leitura) */
.smart-hover-word-highlight {
    position: absolute;
    background: rgba(6, 214, 160, 0.25);
    border-radius: 2px;
    pointer-events: none;
    z-index: 15;
}

@keyframes smartHoverWordFade {
    0% { opacity: 1; background: rgba(6, 214, 160, 0.35); }
    70% { opacity: 1; background: rgba(6, 214, 160, 0.25); }
    100% { opacity: 0; background: rgba(6, 214, 160, 0.1); }
}

/* Palavras marcadas como parte da região SmartHover (persistente) */
.word-block.smart-hover-in-region {
    background: rgba(6, 214, 160, 0.15) !important;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(6, 214, 160, 0.3);
}

/* Theme variants para word highlights */
body.theme-light .smart-hover-word-highlight {
    background: rgba(6, 214, 160, 0.2);
}

body.theme-light .word-block.smart-hover-in-region {
    background: rgba(6, 214, 160, 0.12) !important;
}

body.theme-sepia .smart-hover-word-highlight {
    background: rgba(6, 214, 160, 0.18);
}

body.theme-sepia .word-block.smart-hover-in-region {
    background: rgba(6, 214, 160, 0.1) !important;
}

/* ==================== PDF MORE MENU ==================== */
.pdf-more-menu {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(12px);
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}

.pdf-more-content {
    background: var(--neuro-bg-raised, #111827);
    border-radius: 24px 24px 0 0;
    width: 100%;
    max-width: 420px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: none;
}

body.theme-dark .pdf-more-content {
    background: var(--neuro-bg-raised, #111827);
    color: var(--neuro-text-primary, #e2e8f0);
}

.pdf-more-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

body.theme-dark .pdf-more-header {
    border-color: rgba(255, 255, 255, 0.06);
}

.pdf-more-close {
    background: rgba(255, 255, 255, 0.06);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    color: var(--neuro-text-secondary, #94a3b8);
}

body.theme-dark .pdf-more-close {
    background: rgba(255, 255, 255, 0.06);
    color: var(--neuro-text-primary, #e2e8f0);
}

.pdf-more-section {
    margin-bottom: 16px;
}

.pdf-more-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    color: var(--neuro-text-secondary, #94a3b8);
    text-transform: uppercase;
    margin-bottom: 8px;
}

body.theme-dark .pdf-more-label {
    color: var(--neuro-text-secondary, #94a3b8);
}

.pdf-more-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pdf-more-btn {
    flex: 1;
    min-width: 60px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--neuro-text-primary, #e2e8f0);
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
}

body.theme-dark .pdf-more-btn {
    background: rgba(255, 255, 255, 0.04);
    color: var(--neuro-text-primary, #e2e8f0);
}

body.theme-sepia .pdf-more-btn {
    background: rgba(254, 243, 199, 0.15);
    color: #fef3c7;
}

.pdf-more-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

body.theme-dark .pdf-more-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

body.theme-sepia .pdf-more-btn:hover {
    background: rgba(254, 243, 199, 0.25);
}

.pdf-more-btn.active {
    background: var(--neuro-cyan, #06d6a0);
    color: #0c1021;
}

.pdf-more-value {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    padding: 12px;
    font-weight: 700;
    font-size: 16px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--neuro-text-primary, #e2e8f0);
}

body.theme-dark .pdf-more-value {
    color: var(--neuro-text-primary, #e2e8f0);
}

body.theme-sepia .pdf-more-value {
    color: #fef3c7;
}

/* Hide dock in clipboard mode */
body.mode-clipboard .neuro-dock {
    display: none !important;
}

body.mode-clipboard .sniper-fab,
body.mode-clipboard .auto-select-fab,
body.mode-clipboard .smart-hover-fab {
    display: none !important;
}

/* FABs only visible when reader-active */
.sniper-fab,
.auto-select-fab,
.smart-hover-fab {
    display: none;
}

body.reader-active .sniper-fab,
body.reader-active .auto-select-fab,
body.reader-active .smart-hover-fab {
    display: flex;
}

/* ==================== CLIPBOARD PARAGRAPH STRUCTURE ==================== */
.clipboard-paragraph {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 4px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.clipboard-paragraph:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

body.theme-dark .clipboard-paragraph {
    border-color: rgba(255,255,255,0.04);
}

body.theme-sepia .clipboard-paragraph {
    border-color: rgba(120,53,15,0.1);
}

/* ==================== CLIPBOARD TEXT FORMATTING ==================== */

/* Título — linha curta em CAIXA ALTA (CAPÍTULO, TÍTULO, etc.) */
.clipboard-paragraph.clipboard-title {
    justify-content: center;
    margin-top: 28px;
    margin-bottom: 8px;
    padding-bottom: 14px;
    border-bottom: 2px solid rgba(6, 214, 160, 0.3);
}
.clipboard-paragraph.clipboard-title .word-block {
    font-weight: 800 !important;
    font-size: 1.3em !important;
    color: var(--neuro-cyan, #06d6a0) !important;
    text-shadow: 0 0 20px rgba(6, 214, 160, 0.2);
}
.clipboard-paragraph.clipboard-title:first-child {
    margin-top: 0;
}

/* Subtítulo — linha curta sem pontuação */
.clipboard-paragraph.clipboard-subtitle {
    margin-top: 20px;
    margin-bottom: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(6, 214, 160, 0.15);
}
.clipboard-paragraph.clipboard-subtitle .word-block {
    font-weight: 700 !important;
    font-size: 1.1em !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Artigo de lei (Art. X°, § X°) */
.clipboard-paragraph.clipboard-article {
    margin-top: 16px;
    padding-left: 0;
}
.clipboard-paragraph.clipboard-article .word-block:first-child,
.clipboard-paragraph.clipboard-article .word-block:nth-child(2) {
    font-weight: 700 !important;
    color: var(--neuro-cyan, #06d6a0) !important;
}

/* Inciso romano (I – , II — , III) */
.clipboard-paragraph.clipboard-inciso {
    padding-left: 28px;
    margin-bottom: 12px;
    border-bottom: none;
}
.clipboard-paragraph.clipboard-inciso .word-block:first-child {
    font-weight: 700 !important;
    color: rgba(6, 214, 160, 0.8) !important;
}

/* Alínea (a), b), c)) */
.clipboard-paragraph.clipboard-alinea {
    padding-left: 48px;
    margin-bottom: 10px;
    border-bottom: none;
}
.clipboard-paragraph.clipboard-alinea .word-block:first-child {
    font-weight: 600 !important;
    color: rgba(6, 214, 160, 0.7) !important;
}

/* Palavra em CAIXA ALTA (destaque) */
.word-block.reflow-word.word-caps {
    font-weight: 700 !important;
}

/* Theme light */
body.theme-light .clipboard-paragraph.clipboard-title .word-block {
    color: #0284c7 !important;
    text-shadow: none;
}
body.theme-light .clipboard-paragraph.clipboard-subtitle .word-block {
    color: #1e293b !important;
}
body.theme-light .clipboard-paragraph.clipboard-title {
    border-bottom-color: rgba(2, 132, 199, 0.3);
}

/* Theme sepia */
body.theme-sepia .clipboard-paragraph.clipboard-title .word-block {
    color: #92400e !important;
    text-shadow: none;
}
body.theme-sepia .clipboard-paragraph.clipboard-subtitle .word-block {
    color: #78350f !important;
}
body.theme-sepia .clipboard-paragraph.clipboard-title {
    border-bottom-color: rgba(146, 64, 14, 0.3);
}

/* ==================== MARKDOWN RICO (Formatador de Leitura IA) ====================
   A IA devolve a ESTRUTURA (Markdown: #, ##, ###, >, -); o app PINTA com as cores
   do Leitura Neuro. Fonte: neurotutor-classify.js (parseBlock) + micro-explicar.js.
   As classes .md-* saem em .clipboard-paragraph, então herdam o flex/wrap dos
   word-blocks (régua/marcador/karaokê continuam funcionando por cima). */

/* H1 — título principal: grande e centralizado */
.clipboard-paragraph.md-h1 {
    justify-content: center;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 10px;
    padding-bottom: 14px;
    border-bottom: 2px solid rgba(6, 214, 160, 0.35);
}
.clipboard-paragraph.md-h1 .word-block {
    font-weight: 800 !important;
    font-size: 1.55em !important;
    color: var(--neuro-cyan, #06d6a0) !important;
    text-shadow: 0 0 22px rgba(6, 214, 160, 0.22);
}
.clipboard-paragraph.md-h1:first-child { margin-top: 0; }

/* H2 — tema principal */
.clipboard-paragraph.md-h2 {
    margin-top: 26px;
    margin-bottom: 8px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(6, 214, 160, 0.25);
}
.clipboard-paragraph.md-h2 .word-block {
    font-weight: 800 !important;
    font-size: 1.3em !important;
    color: var(--neuro-cyan, #06d6a0) !important;
}

/* H3 — subtema */
.clipboard-paragraph.md-h3 {
    margin-top: 18px;
    margin-bottom: 6px;
    padding-bottom: 2px;
    border-bottom: none;
}
.clipboard-paragraph.md-h3 .word-block {
    font-weight: 700 !important;
    font-size: 1.12em !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Blockquote — caixa de atenção com barra lateral colorida */
.clipboard-paragraph.md-quote {
    border-left: 4px solid var(--neuro-cyan, #06d6a0);
    background: rgba(6, 214, 160, 0.07);
    border-bottom: none;
    border-radius: 0 10px 10px 0;
    padding: 12px 16px;
    margin: 14px 0;
    font-style: italic;
}
.clipboard-paragraph.md-quote .word-block { font-style: italic; }

/* Lista (não-ordenada • e ordenada) — recuo + bullet colorido */
.clipboard-paragraph.md-li,
.clipboard-paragraph.md-oli {
    border-bottom: none;
    margin-bottom: 8px;
    padding-left: 22px;
    align-items: baseline;
}
.clipboard-paragraph.md-li::before {
    content: "•";
    color: var(--neuro-cyan, #06d6a0);
    font-weight: 800;
    margin-right: 4px;
    flex: 0 0 auto;
}

/* Theme light */
body.theme-light .clipboard-paragraph.md-h1 .word-block,
body.theme-light .clipboard-paragraph.md-h2 .word-block { color: #0284c7 !important; text-shadow: none; }
body.theme-light .clipboard-paragraph.md-h3 .word-block { color: #1e293b !important; }
body.theme-light .clipboard-paragraph.md-h1,
body.theme-light .clipboard-paragraph.md-h2 { border-bottom-color: rgba(2, 132, 199, 0.3); }
body.theme-light .clipboard-paragraph.md-quote { border-left-color: #0284c7; background: rgba(2, 132, 199, 0.06); }
body.theme-light .clipboard-paragraph.md-li::before { color: #0284c7; }

/* Theme sepia */
body.theme-sepia .clipboard-paragraph.md-h1 .word-block,
body.theme-sepia .clipboard-paragraph.md-h2 .word-block { color: #92400e !important; text-shadow: none; }
body.theme-sepia .clipboard-paragraph.md-h3 .word-block { color: #78350f !important; }
body.theme-sepia .clipboard-paragraph.md-h1,
body.theme-sepia .clipboard-paragraph.md-h2 { border-bottom-color: rgba(146, 64, 14, 0.3); }
body.theme-sepia .clipboard-paragraph.md-quote { border-left-color: #b45309; background: rgba(180, 83, 9, 0.07); }
body.theme-sepia .clipboard-paragraph.md-li::before { color: #b45309; }

/* ==================== CLIPBOARD RULER FIX ==================== */
body.mode-clipboard #reading-guide {
    z-index: 90;
}
body.mode-clipboard #reading-guide.active {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ==================== NEUROTUTOR RULER FIX ==================== */
/* NeuroTutor page has z-index: 300, ruler needs to be above it */
body:has(.neurotutor-page.active) #reading-guide {
    z-index: 350 !important;
}
body:has(.neurotutor-page.active) #reading-guide.active {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
body:has(.neurotutor-page.active) #ruler-controls {
    z-index: 351 !important;
}

/* ==================== NEUROTUTOR ZEN-BAR DOCK ==================== */
/* Dock usa .clipboard-zen-bar mas precisa z-index acima da .neurotutor-page */
.neurotutor-page .clipboard-zen-bar {
    z-index: 310;
}
/* Menu More acima de tudo */
body:has(.neurotutor-page.active) .clipboard-more-menu {
    z-index: 400;
}

/* ==================== MOBILE FAB ALIGNMENT ====================
   Stack mobile (de baixo pra cima):
   - .neuro-fab (NeuroTutor brain ~72px): bottom 110 → ocupa 110→196
   - Sniper (52px):  bottom 210 → ocupa 210→276 (gap 14 sobre neuro)
   - Auto (52px):    bottom 280 → ocupa 280→346 (gap 14 sobre sniper)
   - Smart (52px):   bottom 350 → ocupa 350→416 (gap 14 sobre auto)
   safe-area-inset-bottom respeita notch (iPhone X+). */
@media (max-width: 767px) {
    .sniper-fab {
        bottom: calc(210px + env(safe-area-inset-bottom, 0px));
        right: 16px;
        left: auto;
        width: 52px;
        height: 52px;
    }

    .auto-select-fab {
        bottom: calc(280px + env(safe-area-inset-bottom, 0px));
        right: 16px;
        left: auto;
        width: 52px;
        height: 52px;
    }

    .smart-hover-fab {
        bottom: calc(350px + env(safe-area-inset-bottom, 0px));
        right: 16px;
        left: auto;
        width: 52px;
        height: 52px;
    }
}

/* ==================== TUTORIAL INTERATIVO v3 ==================== */
.tutorial-card-container {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    display: flex;
    justify-content: center;
    padding: 20px;
}

.tutorial-card-v3 {
    position: fixed;
    /* Posiciona ABAIXO do header (~56px) — evita sobrepor logo/Modo Zen toggle */
    top: calc(72px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 380px;
    /* Garante que nunca cubra o dock inferior — limita altura */
    max-height: calc(100vh - 200px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    background: var(--neuro-bg-raised, #111827);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    pointer-events: auto;
    animation: tutorial-card-appear 0.4s ease;
    z-index: 10010;
}

@keyframes tutorial-card-appear {
    from { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(0.9); }
    to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.tutorial-card-header-v3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 12px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--neuro-text-secondary, #94a3b8);
    font-weight: 600;
}

.tutorial-card-header-v3 button {
    background: rgba(255, 255, 255, 0.06);
    border: none;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    color: var(--neuro-text-secondary, #94a3b8);
    cursor: pointer;
    transition: all 0.2s;
}

.tutorial-card-header-v3 button:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--neuro-text-primary, #e2e8f0);
}

.tutorial-card-v3 h3 {
    font-size: 20px;
    font-weight: 800;
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    color: var(--neuro-text-primary, #e2e8f0);
    margin-bottom: 10px;
}

.tutorial-card-v3 p {
    font-size: 15px;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    color: var(--neuro-text-secondary, #94a3b8);
    line-height: 1.6;
    margin-bottom: 16px;
}

.tutorial-next-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--neuro-cyan, #06d6a0), var(--neuro-blue, #0ea5e9));
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
}

.tutorial-next-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(6, 214, 160, 0.35);
}

.tutorial-next-btn:active {
    transform: translateY(0);
}

.tutorial-card-v3::after {
    content: '\1F447';
    position: absolute;
    font-size: 40px;
    animation: arrow-bounce-down 1s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

@keyframes arrow-bounce-down {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(12px); }
}

.tutorial-card-v3.arrow-right-bottom::after {
    bottom: -60px;
    right: 20px;
    content: '\1F449';
    animation: arrow-bounce-right 1s ease-in-out infinite;
}

@keyframes arrow-bounce-right {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(12px); }
}

.tutorial-card-v3.arrow-bottom-center::after {
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    content: '\1F447';
}

.tutorial-card-v3.arrow-bottom-right::after {
    bottom: -60px;
    right: 40px;
    content: '\1F447';
}

.tutorial-target {
    position: relative !important;
    z-index: 10000 !important;
    animation: tutorial-target-glow 1.5s ease-in-out infinite;
}

@keyframes tutorial-target-glow {
    0%, 100% {
        filter: drop-shadow(0 0 10px rgba(6, 214, 160, 0.6));
    }
    50% {
        filter: drop-shadow(0 0 25px rgba(6, 214, 160, 0.9));
    }
}

@media (max-width: 767px) {
    .tutorial-card-v3 {
        /* Mobile: começa logo abaixo do header (header mobile ~ 56px) */
        top: calc(64px + env(safe-area-inset-top, 0px));
        width: calc(100% - 24px);
        padding: 16px;
        /* Limita altura no mobile considerando dock + safe-area */
        max-height: calc(100vh - 180px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    }

    .tutorial-card-v3 h3 {
        font-size: 18px;
    }

    .tutorial-card-v3 p {
        font-size: 14px;
    }

    .tutorial-card-v3::after {
        font-size: 32px;
        bottom: -50px;
    }
}

/* ==================== TUTORIAL: HIGHLIGHTED ELEMENTS ==================== */
body.reader-active .tutorial-target.sniper-fab,
body.reader-active .tutorial-target.auto-select-fab {
    z-index: 10001 !important;
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: none !important;
}

/* ==================== TUTORIAL v4 ==================== */
.tutorial-overlay-v4 {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    background: rgba(0,0,0,0.4);
}

.tutorial-card-v4 {
    position: fixed;
    width: calc(100% - 40px);
    max-width: 340px;
    background: var(--neuro-bg-raised, #111827);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 4px rgba(6, 214, 160, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.06);
    pointer-events: auto;
    animation: tutorial-card-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes tutorial-card-pop {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

.tutorial-card-header-v4 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.tutorial-step-counter {
    font-size: 12px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--neuro-cyan, #06d6a0);
    background: rgba(6, 214, 160, 0.1);
    padding: 4px 10px;
    border-radius: 20px;
}

.tutorial-skip-btn {
    background: rgba(255, 255, 255, 0.06);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 14px;
    color: var(--neuro-text-secondary, #94a3b8);
    cursor: pointer;
    transition: all 0.2s;
}

.tutorial-skip-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.tutorial-card-title {
    font-size: 18px;
    font-weight: 800;
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    color: var(--neuro-text-primary, #e2e8f0);
    margin-bottom: 8px;
}

.tutorial-card-text {
    font-size: 14px;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    color: var(--neuro-text-secondary, #94a3b8);
    line-height: 1.6;
    margin-bottom: 16px;
}

.tutorial-next-btn-v4 {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--neuro-cyan, #06d6a0), var(--neuro-blue, #0ea5e9));
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
}

.tutorial-next-btn-v4:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(6, 214, 160, 0.35);
}

.tutorial-arrow-v4 {
    position: absolute;
    font-size: 36px;
    animation: tutorial-arrow-bounce 1s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

@keyframes tutorial-arrow-bounce {
    0%, 100% { transform: translateY(0) translateX(0); }
    50% { transform: translateY(8px) translateX(8px); }
}

/* Target glow */
.tutorial-target {
    position: relative !important;
    z-index: 10000 !important;
    box-shadow: 0 0 0 4px var(--neuro-cyan, #06d6a0), 0 0 30px rgba(6, 214, 160, 0.5) !important;
    animation: tutorial-target-pulse 1.5s ease-in-out infinite !important;
}

@keyframes tutorial-target-pulse {
    0%, 100% { box-shadow: 0 0 0 4px var(--neuro-cyan, #06d6a0), 0 0 30px rgba(6, 214, 160, 0.5); }
    50% { box-shadow: 0 0 0 8px var(--neuro-cyan, #06d6a0), 0 0 50px rgba(6, 214, 160, 0.7); }
}

@media (max-width: 640px) {
    .tutorial-card-v4 {
        left: 10px !important;
        right: 10px !important;
        max-width: none;
        width: auto;
    }
}

/* ==================== TUTORIAL v4.2 (HOTSPOTS + SPOTLIGHT) ==================== */

#tutorial-overlay-v3 {
    position: fixed;
    inset: 0;
    background: transparent !important;
    z-index: 999996 !important;
    opacity: 0;
    pointer-events: none !important;
    transition: opacity 0.3s ease;
}

#tutorial-overlay-v3.active {
    opacity: 1;
    pointer-events: none !important;
}

#tutorial-overlay-v3.has-spotlight {
    /* mask set inline via JS */
}

/* ==================== HOTSPOTS ==================== */
.tutorial-hotspot {
    position: fixed;
    width: 60px;
    height: 60px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    z-index: 1000002 !important;
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 22px;
    color: white;
    background: linear-gradient(135deg, var(--neuro-cyan, #06d6a0), var(--neuro-blue, #0ea5e9));
    border: 4px solid white;
    box-shadow:
        0 0 0 6px rgba(6, 214, 160, 0.4),
        0 0 30px rgba(6, 214, 160, 0.6),
        0 15px 40px rgba(0,0,0,0.4);
    animation: hotspotBreathe 2s ease-in-out infinite;
    user-select: none;
    -webkit-user-select: none;
    outline: none;
    transform: translateZ(0);
    will-change: transform;
}

.tutorial-hotspot::before {
    content: '';
    position: absolute;
    inset: -20px;
    border-radius: 50%;
}

.tutorial-hotspot::after {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.6);
    animation: hotspotRipple 1.5s ease-out infinite;
    pointer-events: none;
}

.tutorial-hotspot:active {
    transform: scale(0.9) !important;
    animation: none !important;
    box-shadow:
        0 0 0 4px rgba(6, 214, 160, 0.6),
        0 0 20px rgba(6, 214, 160, 0.8),
        0 8px 25px rgba(0,0,0,0.3);
}

.tutorial-hotspot.shake {
    animation: hotspotShake 0.5s ease-in-out !important;
}

@keyframes hotspotShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
}

.tutorial-hotspot-label {
    position: fixed;
    z-index: 1000002 !important;
    pointer-events: none;
    font-size: 13px;
    font-weight: 800;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    color: white;
    background: rgba(12, 16, 33, 0.9);
    border: 2px solid rgba(255,255,255,0.15);
    padding: 8px 14px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    white-space: nowrap;
    backdrop-filter: blur(8px);
}

.tutorial-hotspot-label::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid rgba(12, 16, 33, 0.9);
}

@keyframes hotspotBreathe {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 0 0 6px rgba(6, 214, 160, 0.4),
            0 0 30px rgba(6, 214, 160, 0.6),
            0 15px 40px rgba(0,0,0,0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow:
            0 0 0 10px rgba(6, 214, 160, 0.3),
            0 0 50px rgba(6, 214, 160, 0.7),
            0 20px 50px rgba(0,0,0,0.35);
    }
}

@keyframes hotspotRipple {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }
    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

/* ==================== SPOTLIGHT RING ==================== */
.tutorial-spotlight-ring {
    position: fixed;
    z-index: 999998;
    border-radius: 12px;
    pointer-events: none;
    box-shadow:
        0 0 0 4px rgba(6, 214, 160, 0.9),
        0 0 0 9999px rgba(8, 10, 25, 0.45);
    transition: all 0.3s ease;
}

.tutorial-spotlight-ring.circular {
    border-radius: 50%;
}

.tutorial-spotlight-ring.pulsing {
    animation: spotlightPulse 2s ease-in-out infinite;
}

@keyframes spotlightPulse {
    0%, 100% {
        box-shadow:
            0 0 0 4px rgba(6, 214, 160, 0.9),
            0 0 0 9999px rgba(8, 10, 25, 0.45);
    }
    50% {
        box-shadow:
            0 0 0 8px rgba(6, 214, 160, 0.7),
            0 0 0 9999px rgba(8, 10, 25, 0.45);
    }
}

/* ==================== LEGACY COMPATIBILITY ==================== */
.tutorial-tap-marker {
    display: none !important;
}
.tutorial-tap-label {
    display: none !important;
}

.tutorial-target-fix {
    position: relative !important;
    z-index: 1000000 !important;
    box-shadow:
        0 0 0 4px var(--neuro-cyan, #06d6a0),
        0 0 30px rgba(6, 214, 160, 0.5) !important;
    transition: all 0.3s ease;
    border-radius: 12px;
    animation: tutorial-pulse-fix 1.5s ease-in-out infinite;
}

@keyframes tutorial-pulse-fix {
    0%, 100% { box-shadow: 0 0 0 4px var(--neuro-cyan, #06d6a0), 0 0 30px rgba(6, 214, 160, 0.5); }
    50% { box-shadow: 0 0 0 8px var(--neuro-cyan, #06d6a0), 0 0 50px rgba(6, 214, 160, 0.7); }
}

button.tutorial-target-fix {
    border-radius: 9999px !important;
}

.sniper-fab.tutorial-target-fix,
.auto-select-fab.tutorial-target-fix,
#btn-sniper-fab.tutorial-target-fix,
#btn-auto-select-fab.tutorial-target-fix {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 1000000 !important;
    position: fixed !important;
    background: linear-gradient(135deg, #f97316, #dc2626) !important;
}

.tutorial-parent-lift {
    z-index: 1000000 !important;
    position: fixed !important;
}

/* Tutorial Card v3 (ID-based) */
#tutorial-card-v3 {
    position: fixed;
    z-index: 1000001 !important;
    background: var(--neuro-bg-raised, #111827);
    width: 320px;
    max-width: calc(100vw - 32px);
    padding: 24px;
    border-radius: 20px;
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.3s ease;
    pointer-events: none;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

@media (max-width: 640px) {
    #tutorial-card-v3 {
        bottom: 88px !important;
        left: 12px !important;
        right: 12px !important;
        top: auto !important;
        width: auto !important;
        max-width: none !important;
        max-height: 40vh;
        overflow-y: auto;
        transform: translateY(20px);
        border-radius: 16px;
        padding: 16px;
    }

    #tutorial-card-v3.active {
        transform: translateY(0);
    }
}

body.theme-dark #tutorial-card-v3 {
    background: var(--neuro-bg-raised, #111827);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--neuro-text-primary, #e2e8f0);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

#tutorial-card-v3.active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* Close button */
#tut-v3-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    min-width: 44px;
    min-height: 44px;
    margin: -6px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--neuro-text-secondary, #94a3b8);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

#tut-v3-close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--neuro-text-primary, #e2e8f0);
}

#tut-v3-close:active {
    transform: scale(0.9);
}

body.theme-dark #tut-v3-close {
    color: var(--neuro-text-secondary, #94a3b8);
}

body.theme-dark #tut-v3-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--neuro-text-primary, #e2e8f0);
}

#tutorial-card-v3 .tut-icon {
    margin-bottom: 16px;
    padding: 12px;
    background: rgba(6, 214, 160, 0.1);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#tutorial-card-v3 .tut-title {
    font-size: 1.25rem;
    font-weight: 700;
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    color: var(--neuro-text-primary, #e2e8f0);
    margin-bottom: 8px;
    padding-right: 24px;
}

body.theme-dark #tutorial-card-v3 .tut-title {
    color: var(--neuro-text-primary, #e2e8f0);
}

#tutorial-card-v3 .tut-text {
    font-size: 0.875rem;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    color: var(--neuro-text-secondary, #94a3b8);
    line-height: 1.6;
    margin-bottom: 24px;
}

body.theme-dark #tutorial-card-v3 .tut-text {
    color: var(--neuro-text-secondary, #94a3b8);
}

#tutorial-card-v3 .tut-actions {
    display: flex;
    gap: 12px;
    width: 100%;
}

#tutorial-card-v3 .tut-skip {
    flex: 1;
    padding: 12px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: var(--neuro-text-secondary, #94a3b8);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 44px;
}

#tutorial-card-v3 .tut-skip:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

body.theme-dark #tutorial-card-v3 .tut-skip {
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--neuro-text-secondary, #94a3b8);
}

body.theme-dark #tutorial-card-v3 .tut-skip:hover {
    background: rgba(255, 255, 255, 0.04);
}

#tutorial-card-v3 .tut-next {
    flex: 2;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--neuro-cyan, #06d6a0), var(--neuro-blue, #0ea5e9));
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 0.875rem;
    font-weight: 700;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(6, 214, 160, 0.3);
    transition: all 0.2s;
    min-height: 44px;
}

#tutorial-card-v3 .tut-next:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(6, 214, 160, 0.4);
}

#tutorial-card-v3 .tut-next:active {
    transform: translateY(0);
}

/* ==================== MOBILE RESPONSIVE ==================== */
@media (max-width: 640px) {
    #tutorial-card-v3 {
        width: calc(100vw - 24px);
        max-width: none;
        left: 12px !important;
        right: 12px !important;
        bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
        top: auto !important;
        transform: none !important;
        padding: 20px;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
        max-height: 45vh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    #tutorial-card-v3.active {
        transform: none !important;
        animation: tutorialSlideUp 0.3s ease-out;
    }

    @keyframes tutorialSlideUp {
        from { opacity: 0; transform: translateY(30px); }
        to { opacity: 1; transform: translateY(0); }
    }

    #tutorial-card-v3 .tut-title {
        font-size: 1.125rem;
    }

    #tutorial-card-v3 .tut-text {
        font-size: 0.8125rem;
        margin-bottom: 20px;
    }

    #tutorial-card-v3 .tut-actions {
        flex-direction: column;
        gap: 10px;
    }

    #tutorial-card-v3 .tut-skip,
    #tutorial-card-v3 .tut-next {
        flex: none;
        width: 100%;
        padding: 14px;
    }

    .tutorial-hotspot {
        width: 70px;
        height: 70px;
        font-size: 24px;
    }

    .tutorial-hotspot-label {
        font-size: 15px;
        padding: 12px 18px;
    }
}

/* Legacy compat */
.tutorial-highlight {
    position: relative !important;
    z-index: 1000000 !important;
    box-shadow: 0 0 0 4px var(--neuro-cyan, #06d6a0), 0 0 100px rgba(0,0,0,0.8) !important;
}

/* ==================== V59 FIXES ==================== */
@keyframes arrowBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(10px); }
}

@media (max-width: 640px) {
    .sniper-fab {
        bottom: 90px;
        right: 16px;
        width: 52px;
        height: 52px;
        z-index: 56;
    }

    #tutorial-card-v3.tutorial-fab-target {
        top: 60px !important;
        bottom: auto !important;
    }
}

.region-edit-bar .btn-confirm i,
.region-edit-bar .btn-confirm svg,
.region-edit-bar .btn-cancel i,
.region-edit-bar .btn-cancel svg {
    color: white !important;
    width: 16px;
    height: 16px;
}

.reading-region.editing {
    z-index: 50;
}

.reading-region.editing .resize-handle {
    z-index: 201;
    background: linear-gradient(135deg, var(--neuro-green, #22c55e), #16a34a) !important;
    border: 4px solid white !important;
    box-shadow:
        0 0 0 3px rgba(34, 197, 94, 0.5),
        0 4px 15px rgba(0,0,0,0.5) !important;
    width: 32px !important;
    height: 32px !important;
}

.reading-region.editing .resize-handle:hover {
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
    transform: scale(calc(1.3 / var(--zoom-factor, 1))) !important;
}

body.tutorial-active .help-btn,
body.tutorial-active .teleprompter-show-btn,
body.tutorial-active #region-counter {
    display: none !important;
}

@media (max-width: 640px) {
    .help-btn {
        bottom: 160px !important;
        left: 12px !important;
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .teleprompter-show-btn {
        bottom: 160px !important;
        left: 60px !important;
        padding: 6px 10px !important;
        font-size: 0.7rem !important;
    }

    #region-counter {
        bottom: 90px !important;
        left: 12px !important;
        padding: 6px 12px !important;
        font-size: 0.65rem !important;
    }
}

/* Column mode selector */
.column-mode-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 12px 0;
}

.column-mode-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--neuro-text-primary, #e2e8f0);
}

.column-mode-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--neuro-cyan, #06d6a0);
}

.column-mode-btn.active {
    background: rgba(6, 214, 160, 0.1);
    border-color: var(--neuro-cyan, #06d6a0);
}

.column-mode-btn i,
.column-mode-btn svg {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
}

.column-mode-btn span {
    font-size: 10px;
    font-weight: 600;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
}

body.theme-dark .column-mode-btn {
    background: rgba(255, 255, 255, 0.04);
    color: var(--neuro-text-primary, #e2e8f0);
}

body.theme-dark .column-mode-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

body.theme-dark .column-mode-btn.active {
    background: rgba(6, 214, 160, 0.12);
}

.mobile-select-popup-content {
    padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
}

/* Dock small screens */
@media (max-width: 400px) {
    .neuro-dock {
        padding: 4px 6px;
        gap: 1px;
    }

    .neuro-dock .dock-btn {
        width: 34px;
        height: 34px;
        min-width: 34px;
        border-radius: 8px;
    }

    .neuro-dock .dock-btn i,
    .neuro-dock .dock-btn svg {
        width: 16px;
        height: 16px;
    }

    .neuro-dock .dock-play {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 12px;
    }

    .neuro-dock .dock-play i,
    .neuro-dock .dock-play svg {
        width: 20px;
        height: 20px;
    }
}

/* Tutorial card compact mobile */
@media (max-width: 640px) {
    #tutorial-card-v3 {
        max-height: calc(100vh - 200px);
        padding: 16px !important;
        width: calc(100% - 24px) !important;
        max-width: 320px !important;
    }

    #tutorial-card-v3 .tut-title {
        font-size: 1rem !important;
        margin-bottom: 4px !important;
    }

    #tutorial-card-v3 .tut-text {
        font-size: 0.8rem !important;
        margin-bottom: 12px !important;
        line-height: 1.4 !important;
    }

    #tutorial-card-v3 .tut-icon {
        display: none !important;
    }
}

.tutorial-spotlight-v43 + .tutorial-hotspot {
    /* Ensure hotspot visibility */
}

body.tutorial-active .sniper-fab:not(.tutorial-target-fix),
body.tutorial-active .auto-select-fab:not(.tutorial-target-fix) {
    opacity: 0.3 !important;
    pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD - Cockpit do Aluno
   Fullscreen overlay, tabs, cards, responsive
   ═══════════════════════════════════════════════════════════════ */

/* ── Avatar HUD Button (Header) ── */
.dash-hud-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 9999px;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.3), rgba(6, 214, 160, 0.3));
    border: 1px solid rgba(167, 139, 250, 0.3);
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    font-family: 'Outfit', sans-serif;
}

.dash-hud-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 20px rgba(167, 139, 250, 0.3);
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.4), rgba(6, 214, 160, 0.4));
}

.dash-hud-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a78bfa, #06d6a0);
    font-size: 12px;
    font-weight: 800;
    color: white;
    flex-shrink: 0;
}

.dash-hud-level {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.9;
    white-space: nowrap;
}

/* ── Dashboard Overlay ── */
.dash-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.dash-overlay.dash-visible {
    opacity: 1;
}

.dash-overlay.dash-closing {
    opacity: 0;
    transition: opacity 0.2s ease;
}

body.dash-open {
    overflow: hidden;
}

/* ── Dashboard Container ── */
.dash-container {
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    background: var(--neuro-bg-card, #0f172a);
    border-radius: 20px;
    border: 1px solid rgba(167, 139, 250, 0.15);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(167, 139, 250, 0.08);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    animation: dash-slide-up 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dash-slide-up {
    from { opacity: 0; transform: translateY(30px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Custom scrollbar */
.dash-container::-webkit-scrollbar { width: 6px; }
.dash-container::-webkit-scrollbar-track { background: transparent; }
.dash-container::-webkit-scrollbar-thumb {
    background: rgba(167, 139, 250, 0.2);
    border-radius: 3px;
}

/* ── Close Button ── */
.dash-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.2s ease;
}

.dash-close-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

/* ── Header ── */
.dash-header {
    position: relative;
    padding: 32px 24px 20px;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.1), rgba(6, 214, 160, 0.05));
    border-bottom: 1px solid rgba(167, 139, 250, 0.1);
}

.dash-profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.dash-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a78bfa, #06d6a0);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 20px rgba(167, 139, 250, 0.3);
}

.dash-avatar-initials {
    font-size: 22px;
    font-weight: 800;
    color: white;
    font-family: 'Space Grotesk', sans-serif;
}

.dash-avatar-loading {
    animation: dash-pulse 1.5s ease-in-out infinite;
}

@keyframes dash-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.dash-profile-info {
    flex: 1;
}

.dash-profile-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--neuro-text-primary, #e2e8f0);
    font-family: 'Space Grotesk', sans-serif;
}

.dash-profile-rank {
    font-size: 13px;
    color: var(--neuro-text-secondary, #94a3b8);
    margin-top: 2px;
}

/* ── Header XP Bar ── */
.dash-header-xp {
    margin-top: 16px;
}

.dash-header-xp-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    overflow: hidden;
}

.dash-header-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, #a78bfa, #06d6a0);
    border-radius: 4px;
    transition: width 0.5s ease;
    box-shadow: 0 0 12px rgba(167, 139, 250, 0.4);
}

.dash-header-xp-text {
    font-size: 11px;
    color: var(--neuro-text-secondary, #94a3b8);
    margin-top: 4px;
    text-align: right;
    font-family: 'JetBrains Mono', monospace;
}

/* ── Tabs ── */
.dash-tabs {
    display: flex;
    border-bottom: 1px solid rgba(167, 139, 250, 0.1);
    padding: 0 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.dash-tabs::-webkit-scrollbar { display: none; }

.dash-tab {
    flex-shrink: 0;
    padding: 12px 16px;
    border: none;
    background: none;
    color: var(--neuro-text-secondary, #94a3b8);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: 'Outfit', sans-serif;
}

.dash-tab:hover {
    color: var(--neuro-text-primary, #e2e8f0);
}

.dash-tab.active {
    color: #a78bfa;
    border-bottom-color: #a78bfa;
}

/* ── Tab Content ── */
.dash-content {
    flex: 1;
    overflow-y: auto;
    min-height: 300px;
}

.dash-tab-panel {
    display: none;
    padding: 20px;
    animation: dash-fade-in 0.2s ease;
}

.dash-tab-panel.active {
    display: block;
}

@keyframes dash-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Stats Grid ── */
.dash-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.dash-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 16px;
    transition: all 0.2s ease;
}

.dash-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(167, 139, 250, 0.15);
}

.dash-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.dash-card-icon {
    font-size: 18px;
}

.dash-card-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--neuro-text-secondary, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dash-card-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--neuro-text-primary, #e2e8f0);
    font-family: 'Space Grotesk', sans-serif;
    line-height: 1.1;
}

.dash-unit {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.6;
}

.dash-card-sub {
    font-size: 11px;
    color: var(--neuro-text-secondary, #94a3b8);
    margin-top: 6px;
}

/* XP Bar inside card */
.dash-xp-bar-wrap {
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 10px;
}

.dash-xp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #a78bfa, #06d6a0);
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* Warn card (low credits) */
.dash-card-warn {
    border-color: rgba(251, 191, 36, 0.3);
    background: rgba(251, 191, 36, 0.05);
}

.dash-warn-msg {
    font-size: 11px;
    color: #fbbf24;
    margin-top: 8px;
    font-weight: 600;
}

/* ── Weekly Activity Bars ── */
.dash-section {
    margin-top: 20px;
}

.dash-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--neuro-text-primary, #e2e8f0);
    margin-bottom: 12px;
}

.dash-weekly-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 100px;
    padding: 8px 0;
}

.dash-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.dash-bar-track {
    width: 100%;
    max-width: 32px;
    height: 70px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.dash-bar-fill {
    width: 100%;
    background: linear-gradient(180deg, #a78bfa, #6d28d9);
    border-radius: 4px 4px 0 0;
    transition: height 0.5s ease;
    min-height: 2px;
}

.dash-bar-active {
    background: linear-gradient(180deg, #06d6a0, #059669);
    box-shadow: 0 0 10px rgba(6, 214, 160, 0.3);
}

.dash-bar-label {
    font-size: 10px;
    color: var(--neuro-text-secondary, #94a3b8);
    font-weight: 500;
}

/* ── History ── */
.dash-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--neuro-text-secondary, #94a3b8);
}

.dash-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.dash-empty-state h3 {
    font-size: 16px;
    color: var(--neuro-text-primary, #e2e8f0);
    margin-bottom: 8px;
}

.dash-empty-state p {
    font-size: 13px;
}

.dash-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dash-history-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dash-history-item:hover {
    background: rgba(167, 139, 250, 0.06);
    border-color: rgba(167, 139, 250, 0.2);
    transform: translateX(4px);
}

.dash-history-q {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}

.dash-history-icon {
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 1px;
}

.dash-history-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--neuro-text-primary, #e2e8f0);
    line-height: 1.4;
}

.dash-history-badge {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(6, 214, 160, 0.15);
    color: #06d6a0;
    font-weight: 600;
    flex-shrink: 0;
}

.dash-history-a {
    font-size: 12px;
    color: var(--neuro-text-secondary, #94a3b8);
    line-height: 1.4;
    margin-left: 22px;
}
/* Resposta completa: escondida até expandir. Renderizada como markdown e
   SELECIONÁVEL (o usuário quer copiar) — cursor de texto, user-select ligado. */
.dash-history-a-full {
    display: none;
    font-size: 12.5px;
    color: var(--neuro-text-secondary, #cbd5e1);
    line-height: 1.6;
    margin-left: 22px;
    user-select: text;
    -webkit-user-select: text;
    cursor: text;
}
/* Tipografia do markdown renderizado dentro da resposta do histórico */
.dash-history-a-full > *:first-child { margin-top: 0; }
.dash-history-a-full > *:last-child { margin-bottom: 0; }
.dash-history-a-full p { margin: 0 0 8px; }
.dash-history-a-full h1, .dash-history-a-full h2, .dash-history-a-full h3, .dash-history-a-full h4 {
    color: var(--neuro-text-primary, #e2e8f0); font-weight: 700; margin: 12px 0 6px; line-height: 1.3;
}
.dash-history-a-full h1 { font-size: 1.15em; }
.dash-history-a-full h2 { font-size: 1.08em; }
.dash-history-a-full h3, .dash-history-a-full h4 { font-size: 1em; }
.dash-history-a-full ul, .dash-history-a-full ol { margin: 4px 0 8px; padding-left: 20px; }
.dash-history-a-full li { margin: 2px 0; }
.dash-history-a-full strong { color: var(--neuro-text-primary, #e2e8f0); }
.dash-history-a-full code {
    background: rgba(255,255,255,0.08); padding: 1px 5px; border-radius: 4px;
    font-family: ui-monospace, monospace; font-size: 0.9em;
}
.dash-history-a-full blockquote {
    margin: 6px 0; padding: 4px 10px; border-left: 2px solid var(--neuro-purple, #a855f7);
    background: rgba(168,85,247,0.06);
}
.dash-history-item.expanded .dash-history-a { display: none; }
.dash-history-item.expanded .dash-history-a-full { display: block; }
/* Dica visual de que a entrada de jogo expande (em vez de reabrir) */
.dash-history-item.is-game .dash-history-icon { opacity: 0.95; }

.dash-history-meta {
    font-size: 10px;
    color: var(--neuro-text-secondary, #64748b);
    margin-top: 6px;
    margin-left: 22px;
    font-family: 'JetBrains Mono', monospace;
}

/* ── Subscription ── */
.dash-sub-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dash-sub-plan {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
}

.dash-sub-icon {
    font-size: 40px;
}

.dash-sub-name {
    font-size: 20px;
    font-weight: 800;
    font-family: 'Space Grotesk', sans-serif;
}

.dash-sub-desc {
    font-size: 13px;
    color: var(--neuro-text-secondary, #94a3b8);
    margin-top: 2px;
}

.dash-sub-credits {
    text-align: center;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
}

.dash-sub-credits-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--neuro-text-secondary, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dash-sub-credits-value {
    font-size: 48px;
    font-weight: 900;
    color: #fbbf24;
    font-family: 'Space Grotesk', sans-serif;
    margin: 8px 0;
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
}

.dash-sub-credits-hint {
    font-size: 11px;
    color: var(--neuro-text-secondary, #64748b);
}

.dash-sub-upgrade {
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.08), rgba(6, 214, 160, 0.05));
    border: 1px solid rgba(167, 139, 250, 0.15);
    border-radius: 16px;
}

.dash-sub-upgrade-text {
    font-size: 14px;
    color: var(--neuro-text-primary, #e2e8f0);
    margin-bottom: 12px;
}

.dash-sub-upgrade-btn {
    padding: 12px 32px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #a78bfa, #06d6a0);
    color: white;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Outfit', sans-serif;
}

.dash-sub-upgrade-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(167, 139, 250, 0.35);
}

.dash-sub-active {
    text-align: center;
    padding: 16px;
}

.dash-sub-active-badge {
    font-size: 14px;
    font-weight: 600;
    color: #06d6a0;
}

/* ── Account ── */
.dash-account {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.dash-account-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dash-account-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
}

.dash-account-label {
    font-size: 13px;
    color: var(--neuro-text-secondary, #94a3b8);
    font-weight: 500;
}

.dash-account-value {
    font-size: 13px;
    color: var(--neuro-text-primary, #e2e8f0);
    font-weight: 600;
}

.dash-status-on { color: #06d6a0; }
.dash-status-off { color: #ef4444; }

.dash-account-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dash-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Outfit', sans-serif;
}

.dash-btn-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.dash-btn-danger:hover {
    background: rgba(239, 68, 68, 0.2);
}

.dash-btn-primary {
    background: linear-gradient(135deg, #a78bfa, #06d6a0);
    color: white;
}

.dash-btn-primary:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 20px rgba(167, 139, 250, 0.3);
}

.dash-account-footer {
    text-align: center;
    padding: 16px 0;
}

.dash-account-version {
    font-size: 11px;
    color: var(--neuro-text-secondary, #64748b);
}

/* ── Skeleton Loading ── */
.dash-skeleton {
    height: 16px;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.04) 100%
    );
    background-size: 200% 100%;
    border-radius: 8px;
    margin-bottom: 10px;
    animation: dash-shimmer 1.5s ease-in-out infinite;
}

@keyframes dash-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Mobile Responsive ── */
@media (max-width: 767px) {
    .dash-overlay {
        padding: 0;
        align-items: stretch;
    }

    .dash-container {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
        height: 100%;
    }

    .dash-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .dash-card {
        padding: 12px;
    }

    .dash-card-value {
        font-size: 22px;
    }

    .dash-tab {
        padding: 10px 12px;
        font-size: 12px;
    }

    .dash-header {
        padding: 24px 16px 16px;
    }

    .dash-tab-panel {
        padding: 16px;
    }

    .dash-sub-credits-value {
        font-size: 36px;
    }
}

@media (min-width: 768px) {
    .dash-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Theme Light ── */
body.theme-light .dash-container {
    background: rgba(255, 255, 255, 0.98);
    border-color: #e2e8f0;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15);
}

body.theme-light .dash-header {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.06), rgba(6, 214, 160, 0.03));
    border-bottom-color: #e2e8f0;
}

body.theme-light .dash-profile-name {
    color: #1e293b;
}

body.theme-light .dash-profile-rank {
    color: #64748b;
}

body.theme-light .dash-close-btn {
    background: rgba(0, 0, 0, 0.05);
    color: #64748b;
}

body.theme-light .dash-close-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

body.theme-light .dash-tabs {
    border-bottom-color: #e2e8f0;
}

body.theme-light .dash-tab {
    color: #64748b;
}

body.theme-light .dash-tab.active {
    color: #7c3aed;
    border-bottom-color: #7c3aed;
}

body.theme-light .dash-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: #e2e8f0;
}

body.theme-light .dash-card:hover {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(124, 58, 237, 0.2);
}

body.theme-light .dash-card-value {
    color: #1e293b;
}

body.theme-light .dash-card-title,
body.theme-light .dash-card-sub {
    color: #64748b;
}

body.theme-light .dash-history-item {
    background: rgba(0, 0, 0, 0.02);
    border-color: #e2e8f0;
}

body.theme-light .dash-history-item:hover {
    background: rgba(124, 58, 237, 0.04);
    border-color: rgba(124, 58, 237, 0.2);
}

body.theme-light .dash-history-text {
    color: #1e293b;
}

body.theme-light .dash-account-row {
    background: rgba(0, 0, 0, 0.02);
}

body.theme-light .dash-account-value {
    color: #1e293b;
}

body.theme-light .dash-btn-danger {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

body.theme-light .dash-section-title {
    color: #1e293b;
}

body.theme-light .dash-sub-plan {
    background: rgba(0, 0, 0, 0.02);
    border-color: #e2e8f0;
}

body.theme-light .dash-sub-credits {
    background: rgba(0, 0, 0, 0.02);
}

body.theme-light .dash-skeleton {
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.04) 0%,
        rgba(0, 0, 0, 0.08) 50%,
        rgba(0, 0, 0, 0.04) 100%
    );
    background-size: 200% 100%;
}

/* ── Theme Sepia ── */
body.theme-sepia .dash-container {
    background: rgba(253, 246, 227, 0.98);
    border-color: rgba(120, 53, 15, 0.15);
}

body.theme-sepia .dash-header {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.04), rgba(120, 53, 15, 0.03));
    border-bottom-color: rgba(120, 53, 15, 0.1);
}

body.theme-sepia .dash-profile-name { color: #451a03; }
body.theme-sepia .dash-profile-rank { color: #78350f; }
body.theme-sepia .dash-close-btn { background: rgba(120, 53, 15, 0.06); color: #78350f; }
body.theme-sepia .dash-tabs { border-bottom-color: rgba(120, 53, 15, 0.1); }
body.theme-sepia .dash-tab { color: #78350f; }
body.theme-sepia .dash-tab.active { color: #7c3aed; border-bottom-color: #7c3aed; }
body.theme-sepia .dash-card { background: rgba(120, 53, 15, 0.03); border-color: rgba(120, 53, 15, 0.08); }
body.theme-sepia .dash-card-value { color: #451a03; }
body.theme-sepia .dash-card-title,
body.theme-sepia .dash-card-sub { color: #78350f; }
body.theme-sepia .dash-history-item { background: rgba(120, 53, 15, 0.03); border-color: rgba(120, 53, 15, 0.08); }
body.theme-sepia .dash-history-text { color: #451a03; }
body.theme-sepia .dash-account-row { background: rgba(120, 53, 15, 0.03); }
body.theme-sepia .dash-account-value { color: #451a03; }
body.theme-sepia .dash-section-title { color: #451a03; }

/* ═══════════════════════════════════════════════════════════════
   LOGIN MODAL - Neuro-Futurista
   Email/Senha, Google OAuth, Magic Link
   ═══════════════════════════════════════════════════════════════ */

/* ── Overlay ── */
.login-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 11, 20, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
    padding: 16px;
}
.login-overlay.login-visible {
    opacity: 1;
}
.login-overlay.login-closing {
    opacity: 0;
    pointer-events: none;
}
body.login-open {
    overflow: hidden;
}

/* ── Container ── */
.login-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: var(--neuro-bg-raised, #111827);
    border: 1px solid var(--neuro-border-glow, rgba(6, 214, 160, 0.15));
    border-radius: 20px;
    padding: 36px 28px 28px;
    box-shadow:
        0 0 40px rgba(6, 214, 160, 0.08),
        0 24px 48px rgba(0, 0, 0, 0.4);
    transform: translateY(20px) scale(0.96);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.login-visible .login-container {
    transform: translateY(0) scale(1);
}
.login-closing .login-container {
    transform: translateY(20px) scale(0.96);
}

/* ── Close Button ── */
.login-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--neuro-text-secondary, #94a3b8);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 2;
}
.login-close-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
    transform: rotate(90deg);
}

/* ── Header ── */
.login-header {
    text-align: center;
    margin-bottom: 24px;
}
.login-logo {
    font-size: 42px;
    margin-bottom: 8px;
    animation: login-logo-float 3s ease-in-out infinite;
}
@keyframes login-logo-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.login-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--neuro-text-primary, #e2e8f0);
    margin: 0 0 6px;
    letter-spacing: -0.5px;
}
.login-subtitle {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    color: var(--neuro-text-secondary, #94a3b8);
    margin: 0;
    line-height: 1.4;
}

/* ── Error / Success Messages ── */
.login-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #fca5a5;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 16px;
    text-align: center;
    animation: login-shake 0.3s ease;
}
@keyframes login-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}
.login-success {
    background: rgba(6, 214, 160, 0.1);
    border: 1px solid rgba(6, 214, 160, 0.25);
    color: #6ee7b7;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 16px;
    text-align: center;
}

/* ── Form ── */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.login-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.login-field.hidden {
    display: none;
}
.login-label {
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--neuro-text-secondary, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.login-input {
    width: 100%;
    padding: 12px 14px;
    background: var(--neuro-bg-surface, #1a2035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: var(--neuro-text-primary, #e2e8f0);
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}
.login-input::placeholder {
    color: var(--neuro-text-muted, #475569);
}
.login-input:focus {
    border-color: var(--neuro-cyan, #06d6a0);
    box-shadow: 0 0 0 3px rgba(6, 214, 160, 0.12);
}

/* ── Buttons ── */
.login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    box-sizing: border-box;
}
.login-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* Primary (Login/Signup/Magic) */
.login-btn-primary {
    background: linear-gradient(135deg, var(--neuro-cyan, #06d6a0), #0ea5e9);
    color: #0c1021;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(6, 214, 160, 0.3);
}
.login-btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(6, 214, 160, 0.4);
}
.login-btn-primary:active:not(:disabled) {
    transform: translateY(0);
}

/* Google */
.login-btn-google {
    background: var(--neuro-bg-surface, #1a2035);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--neuro-text-primary, #e2e8f0);
    font-weight: 500;
}
.login-btn-google:hover:not(:disabled) {
    background: var(--neuro-bg-hover, #243049);
    border-color: rgba(255, 255, 255, 0.15);
}
.login-google-icon {
    flex-shrink: 0;
}

/* Google Large (Simplified layout - only Google auth) */
.login-btn-google-large {
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 600;
    gap: 14px;
    background: linear-gradient(135deg, #4285F4, #34A853);
    border: none;
    color: white;
    box-shadow: 0 4px 16px rgba(66, 133, 244, 0.35);
    transition: all 0.2s ease;
}
.login-btn-google-large:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(66, 133, 244, 0.5);
}
.login-btn-google-large:active:not(:disabled) {
    transform: translateY(0);
}
.login-btn-google-large .login-spinner {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: white;
}

/* Simplified Container (only Google auth) */
.login-container-simple {
    max-width: 380px;
    text-align: center;
}
.login-container-simple .login-subtitle {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 8px;
}

/* Info text */
.login-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    color: var(--neuro-text-muted, #64748b);
    line-height: 1.4;
}
.login-info-icon {
    width: 16px;
    height: 16px;
    color: var(--neuro-cyan, #06d6a0);
    flex-shrink: 0;
}

/* Terms text */
.login-terms {
    margin-top: 16px;
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    color: var(--neuro-text-muted, #475569);
    line-height: 1.4;
}
.login-terms a {
    color: var(--neuro-cyan, #06d6a0);
    text-decoration: none;
    transition: color 0.2s ease;
}
.login-terms a:hover {
    color: #34d399;
    text-decoration: underline;
}

/* Light theme for simplified login */
body.theme-light .login-btn-google-large {
    background: linear-gradient(135deg, #4285F4, #34A853);
    color: white;
}
body.theme-light .login-info {
    color: #64748b;
}
body.theme-light .login-terms {
    color: #94a3b8;
}

/* Sepia theme for simplified login */
body.theme-sepia .login-btn-google-large {
    background: linear-gradient(135deg, #4285F4, #34A853);
    color: white;
}
body.theme-sepia .login-info {
    color: #78350f;
}
body.theme-sepia .login-terms {
    color: #92400e;
}

/* ── Spinner ── */
.login-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(12, 16, 33, 0.2);
    border-top-color: #0c1021;
    border-radius: 50%;
    animation: login-spin 0.6s linear infinite;
}
.login-spinner.hidden {
    display: none;
}
@keyframes login-spin {
    to { transform: rotate(360deg); }
}

/* ── Button text ── */
.login-btn-text.hidden {
    display: none;
}

/* ── Divider ── */
.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
}
.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}
.login-divider span {
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    color: var(--neuro-text-muted, #475569);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ── Toggle (Login/Signup switch) ── */
.login-toggle {
    text-align: center;
    margin-top: 20px;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    color: var(--neuro-text-secondary, #94a3b8);
}
.login-toggle-btn {
    background: none;
    border: none;
    color: var(--neuro-cyan, #06d6a0);
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-left: 4px;
    transition: color 0.2s ease;
}
.login-toggle-btn:hover {
    color: #34d399;
    text-decoration: underline;
}

/* ── Theme: Light ── */
body.theme-light .login-overlay {
    background: rgba(255, 255, 255, 0.8);
}
body.theme-light .login-container {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12);
}
body.theme-light .login-close-btn {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
    color: #64748b;
}
body.theme-light .login-close-btn:hover {
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
}
body.theme-light .login-title {
    color: #0f172a;
}
body.theme-light .login-subtitle {
    color: #64748b;
}
body.theme-light .login-label {
    color: #64748b;
}
body.theme-light .login-input {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #0f172a;
}
body.theme-light .login-input::placeholder {
    color: #94a3b8;
}
body.theme-light .login-input:focus {
    border-color: #06d6a0;
    box-shadow: 0 0 0 3px rgba(6, 214, 160, 0.1);
}
body.theme-light .login-btn-google {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #0f172a;
}
body.theme-light .login-btn-google:hover:not(:disabled) {
    background: #f1f5f9;
}
body.theme-light .login-error {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}
body.theme-light .login-success {
    background: rgba(6, 214, 160, 0.06);
    border-color: rgba(6, 214, 160, 0.15);
    color: #059669;
}
body.theme-light .login-divider::before,
body.theme-light .login-divider::after {
    background: #e2e8f0;
}
body.theme-light .login-divider span {
    color: #94a3b8;
}
body.theme-light .login-toggle {
    color: #64748b;
}

/* ── Theme: Sepia ── */
body.theme-sepia .login-overlay {
    background: rgba(254, 243, 199, 0.8);
}
body.theme-sepia .login-container {
    background: #fffbf0;
    border-color: rgba(120, 53, 15, 0.1);
    box-shadow: 0 24px 48px rgba(120, 53, 15, 0.1);
}
body.theme-sepia .login-close-btn {
    background: rgba(120, 53, 15, 0.04);
    border-color: rgba(120, 53, 15, 0.08);
    color: #92400e;
}
body.theme-sepia .login-title {
    color: #451a03;
}
body.theme-sepia .login-subtitle,
body.theme-sepia .login-label {
    color: #78350f;
}
body.theme-sepia .login-input {
    background: rgba(120, 53, 15, 0.03);
    border-color: rgba(120, 53, 15, 0.1);
    color: #451a03;
}
body.theme-sepia .login-btn-google {
    background: rgba(120, 53, 15, 0.03);
    border-color: rgba(120, 53, 15, 0.1);
    color: #451a03;
}
body.theme-sepia .login-error {
    color: #b91c1c;
}
body.theme-sepia .login-success {
    color: #047857;
}
body.theme-sepia .login-toggle {
    color: #78350f;
}

/* ── Mobile ── */
@media (max-width: 480px) {
    .login-container {
        padding: 28px 20px 20px;
        border-radius: 16px;
        max-width: 100%;
    }
    .login-logo {
        font-size: 36px;
    }
    .login-title {
        font-size: 20px;
    }
    .login-btn {
        padding: 14px 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   NEUROTUTOR PANEL - Leitura Neuro v6.0
   Sliding panel, Curtain Effect, optimistic feedback, chat
   ═══════════════════════════════════════════════════════════════ */

/* FAB (Floating Action Button) */
.neurotutor-fab {
    position: fixed;
    /* Antes: bottom: 24px → sobrepunha ao dock (bottom:0, ~70px alto) no mobile.
       Agora: 90px = acima do dock + safe-area pra notch devices. */
    bottom: calc(90px + env(safe-area-inset-bottom, 0px));
    right: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--neuro-cyan, #06d6a0), var(--neuro-purple, #a78bfa));
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(6, 214, 160, 0.35);
    z-index: 9998;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Desktop: pode voltar pra cantinho inferior porque dock fica diferente */
@media (min-width: 768px) {
    .neurotutor-fab {
        bottom: 24px;
        right: 24px;
    }
}

.neurotutor-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(6, 214, 160, 0.5);
}

.neurotutor-fab-icon {
    font-size: 24px;
    line-height: 1;
}

.neurotutor-fab-hidden {
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
}

/* Panel */
.neurotutor-panel {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    max-width: 100vw;
    height: 100vh;
    background: rgba(12, 16, 33, 0.95);
    backdrop-filter: blur(20px) saturate(1.2);
    color: var(--neuro-text-primary, #e2e8f0);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    font-size: 14px;
}

.neurotutor-panel-open {
    right: 0;
}

/* Overlay para fechar ao clicar fora */
.neurotutor-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9998;
    display: none;
    backdrop-filter: blur(2px);
    transition: opacity 0.3s ease;
    opacity: 0;
}
.neurotutor-overlay.active {
    display: block;
    opacity: 1;
}

/* Header */
.neurotutor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(8, 10, 25, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.neurotutor-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.neurotutor-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
    z-index: 100;
    position: relative;
}

.neurotutor-logo {
    font-size: 20px;
}

.neurotutor-title {
    font-weight: 600;
    font-size: 15px;
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    color: var(--neuro-cyan, #06d6a0);
}

.neurotutor-credits {
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    padding: 2px 8px;
    border-radius: 12px;
    background: rgba(6, 214, 160, 0.15);
    color: var(--neuro-cyan, #06d6a0);
}

.neurotutor-credits-unlimited {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
}

.neurotutor-credits-low {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

.neurotutor-select {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--neuro-text-primary, #e2e8f0);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    cursor: pointer;
}

.neurotutor-btn-icon {
    background: none;
    border: none;
    color: var(--neuro-text-secondary, #94a3b8);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
}

.neurotutor-btn-icon:hover {
    color: var(--neuro-text-primary, #e2e8f0);
    background: rgba(255, 255, 255, 0.06);
}

/* Botão fechar: maior, mais acessível, z-index alto */
.neurotutor-close-btn {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    position: relative;
    z-index: 9999;
    color: var(--neuro-text-primary, #e2e8f0);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    pointer-events: auto !important;
    cursor: pointer;
}

.neurotutor-close-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

.neurotutor-close-btn:active {
    background: rgba(239, 68, 68, 0.3);
    transform: scale(0.9);
}

/* Body */
.neurotutor-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Welcome */
.neurotutor-welcome {
    text-align: center;
    padding: 32px 16px;
    opacity: 0.7;
}

.neurotutor-welcome-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.neurotutor-welcome h3 {
    font-size: 18px;
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    margin-bottom: 8px;
    color: var(--neuro-cyan, #06d6a0);
}

.neurotutor-welcome p {
    font-size: 13px;
    color: var(--neuro-text-secondary, #94a3b8);
    line-height: 1.5;
}

/* Input Area */
.neurotutor-input-area textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: var(--neuro-text-primary, #e2e8f0);
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    min-height: 80px;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    transition: border-color 0.2s;
}

.neurotutor-input-area textarea:focus {
    outline: none;
    border-color: var(--neuro-cyan, #06d6a0);
}

.neurotutor-input-area textarea::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

/* Ocultar placeholder quando textarea tem conteúdo (fix para texto programático) */
.neurotutor-input-area textarea:not(:placeholder-shown)::placeholder {
    opacity: 0;
}

/* Classe auxiliar para forçar ocultação do placeholder */
.neurotutor-input-area textarea.has-content::placeholder {
    display: none !important;
    opacity: 0 !important;
}

.neurotutor-input-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

/* Buttons */
.neurotutor-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.neurotutor-btn-primary {
    background: linear-gradient(135deg, var(--neuro-cyan, #06d6a0), var(--neuro-blue, #0ea5e9));
    color: white;
    flex: 1;
}

.neurotutor-btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.neurotutor-btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    color: var(--neuro-text-secondary, #94a3b8);
}

.neurotutor-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

.neurotutor-btn-small {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--neuro-cyan, #06d6a0);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.neurotutor-btn-small:hover {
    background: rgba(6, 214, 160, 0.15);
}

/* Botão de Leitura Assistiva */
.neurotutor-btn-read {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(6, 214, 160, 0.2)) !important;
    border-color: var(--neuro-cyan) !important;
    position: relative;
    overflow: hidden;
}

.neurotutor-btn-read:hover {
    background: linear-gradient(135deg, var(--neuro-cyan), var(--neuro-blue)) !important;
    color: var(--neuro-bg-deep) !important;
}

.neurotutor-btn-read.reading-active {
    background: linear-gradient(135deg, var(--neuro-cyan), var(--neuro-blue)) !important;
    color: var(--neuro-bg-deep) !important;
    animation: readingPulse 1.5s ease-in-out infinite;
}

@keyframes readingPulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--neuro-cyan-glow); }
    50% { box-shadow: 0 0 15px 5px var(--neuro-cyan-glow); }
}

/* Progress indicator */
.neurotutor-reading-progress {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--neuro-cyan);
    min-width: 40px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.neurotutor-btn-read.reading-active ~ .neurotutor-reading-progress {
    opacity: 1;
}

/* Progress Bar */
.neurotutor-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}

.neurotutor-progress-bar {
    flex: 1;
    height: 3px;
    background: rgba(6, 214, 160, 0.15);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.neurotutor-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--progress, 0%);
    background: linear-gradient(90deg, var(--neuro-cyan, #06d6a0), var(--neuro-blue, #0ea5e9));
    border-radius: 2px;
    transition: width 0.3s ease;
}

.neurotutor-progress-text {
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--neuro-text-secondary, #94a3b8);
    white-space: nowrap;
}

/* Skeleton Loader */
.neurotutor-skeleton {
    padding: 16px 0;
}

.skeleton-line {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    margin-bottom: 8px;
}

.skeleton-line-long { width: 100%; }
.skeleton-line-medium { width: 75%; }
.skeleton-line-short { width: 50%; }

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Explanation */
.neurotutor-explanation {
    line-height: 1.7;
}

.neurotutor-answer {
    padding: 12px;
    background: rgba(6, 214, 160, 0.06);
    border-radius: 8px;
    border-left: 3px solid var(--neuro-cyan, #06d6a0);
    margin-bottom: 12px;
}
/* Streaming: preserva quebras do texto CRU enquanto datilografa (o render final
   em markdown remove a classe e volta ao white-space normal). */
.neurotutor-answer.nt-streaming { white-space: pre-wrap; }
/* Cursor piscando durante o streaming de tokens (efeito "datilografando"). */
.neurotutor-answer.nt-streaming::after {
    content: '▋';
    display: inline-block;
    margin-left: 1px;
    color: var(--neuro-cyan, #06d6a0);
    animation: nt-caret-blink 1s steps(2, start) infinite;
}
@keyframes nt-caret-blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
    .neurotutor-answer.nt-streaming::after { animation: none; }
}

.neurotutor-answer h1, .neurotutor-answer h2, .neurotutor-answer h3 {
    font-size: 14px;
    font-weight: 600;
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    color: var(--neuro-cyan, #06d6a0);
    margin-bottom: 4px;
}

.neurotutor-answer strong {
    color: var(--neuro-cyan, #06d6a0);
}

.neurotutor-answer code {
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 12px;
    font-family: 'JetBrains Mono', monospace;
}

/* Curtain Effect */
.neurotutor-curtain {
    margin-top: 8px;
}

.neurotutor-curtain-toggle {
    width: 100%;
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--neuro-text-secondary, #94a3b8);
    cursor: pointer;
    font-size: 13px;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    transition: all 0.2s;
}

.neurotutor-curtain-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--neuro-text-primary, #e2e8f0);
}

.neurotutor-curtain-content {
    padding: 16px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    margin-top: 8px;
    line-height: 1.7;
}

.neurotutor-curtain-reveal {
    animation: curtain-reveal 0.5s ease-out;
}

@keyframes curtain-reveal {
    from { opacity: 0; max-height: 0; transform: translateY(-10px); }
    to { opacity: 1; max-height: 2000px; transform: translateY(0); }
}

/* Actions */
.neurotutor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.neurotutor-votes {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

.neurotutor-vote {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.neurotutor-vote:hover {
    background: rgba(255, 255, 255, 0.06);
}

.neurotutor-vote-active {
    background: rgba(6, 214, 160, 0.15);
    border-color: var(--neuro-cyan, #06d6a0);
}

/* Cache Badge */
.neurotutor-cache-badge {
    display: inline-block;
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--neuro-text-secondary, #94a3b8);
}

.neurotutor-cache-hit {
    background: rgba(34, 197, 94, 0.12);
    color: #86efac;
}

/* Chat */
.neurotutor-chat {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding-top: 12px;
}

.neurotutor-chat-messages {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.neurotutor-chat-msg {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    max-width: 85%;
    word-wrap: break-word;
}

.neurotutor-chat-user {
    background: rgba(6, 214, 160, 0.12);
    align-self: flex-end;
    border-bottom-right-radius: 2px;
}

.neurotutor-chat-assistant {
    background: rgba(255, 255, 255, 0.04);
    align-self: flex-start;
    border-bottom-left-radius: 2px;
}

.neurotutor-chat-system {
    background: rgba(239, 68, 68, 0.08);
    color: #fca5a5;
    align-self: center;
    font-size: 12px;
}

.neurotutor-chat-input {
    display: flex;
    gap: 6px;
}

.neurotutor-chat-input input {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: var(--neuro-text-primary, #e2e8f0);
    padding: 8px 12px;
    font-size: 13px;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
}

.neurotutor-chat-input input:focus {
    outline: none;
    border-color: var(--neuro-cyan, #06d6a0);
}

.neurotutor-chat-input input::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

/* Messages */
.neurotutor-message {
    padding: 12px;
    border-radius: 8px;
    font-size: 13px;
}

/* Caixas de mensagem AUTOCONTIDAS (fundo opaco + texto escuro contrastante):
   antes o texto era claro (#fca5a5 etc.), feito pro painel ESCURO. No tema
   claro/sépia o painel é BRANCO → texto claro sumia (o "retângulo com texto
   ilegível" relatado). Fundo opaco próprio garante leitura em QUALQUER tema. */
.neurotutor-message-error {
    background: #fee2e2;
    border-left: 3px solid #ef4444;
    color: #991b1b;
}

.neurotutor-message-warning {
    background: #fef3c7;
    border-left: 3px solid #f59e0b;
    color: #92400e;
}

.neurotutor-message-info {
    background: #e0f2fe;
    border-left: 3px solid #0ea5e9;
    color: #075985;
}

/* Selection Tooltip */
.neurotutor-tooltip {
    position: fixed;
    z-index: 10000;
    background: rgba(12, 16, 33, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    display: flex;
    gap: 4px;
    padding: 4px;
    animation: tooltip-in 0.2s ease-out;
    backdrop-filter: blur(12px);
}

.neurotutor-tooltip-btn {
    background: none;
    border: none;
    color: var(--neuro-cyan, #06d6a0);
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    transition: all 0.15s;
    white-space: nowrap;
}

.neurotutor-tooltip-btn:hover {
    background: rgba(6, 214, 160, 0.15);
}

@keyframes tooltip-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Toast */
.neurotutor-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(12, 16, 33, 0.95);
    color: var(--neuro-text-primary, #e2e8f0);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    z-index: 10001;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
}

.neurotutor-toast-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Markdown rendering inside panel */
.neurotutor-explanation h1,
.neurotutor-explanation h2,
.neurotutor-explanation h3,
.neurotutor-curtain-content h1,
.neurotutor-curtain-content h2,
.neurotutor-curtain-content h3,
.neurotutor-chat-assistant h1,
.neurotutor-chat-assistant h2,
.neurotutor-chat-assistant h3 {
    font-size: 14px;
    font-weight: 600;
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    color: var(--neuro-cyan, #06d6a0);
    margin: 8px 0 4px;
}

.neurotutor-explanation ul,
.neurotutor-curtain-content ul,
.neurotutor-chat-assistant ul {
    padding-left: 16px;
    margin: 4px 0;
}

.neurotutor-explanation li,
.neurotutor-curtain-content li,
.neurotutor-chat-assistant li {
    margin-bottom: 4px;
}

.neurotutor-explanation p,
.neurotutor-curtain-content p,
.neurotutor-chat-assistant p {
    margin-bottom: 8px;
}

.neurotutor-explanation strong,
.neurotutor-curtain-content strong,
.neurotutor-chat-assistant strong {
    color: var(--neuro-cyan, #06d6a0);
}

/* Responsive — handled by mobile-first block at end of file */

/* Hide panel during tutorial */
body.tutorial-active .neurotutor-fab,
body.tutorial-active .neurotutor-panel {
    display: none !important;
}

/* ==================== NEUROTUTOR STANDALONE ==================== */
.neurotutor-standalone {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: 90%;
    max-width: 600px;
    max-height: 85vh;
    background: var(--neuro-bg-raised, #111827);
    border-radius: 20px;
    border: 1px solid var(--neuro-border, rgba(255,255,255,0.1));
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 40px rgba(6, 214, 160, 0.1);
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.neurotutor-standalone.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.neurotutor-standalone__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(6,214,160,0.1), rgba(14,165,233,0.1));
    border-bottom: 1px solid var(--neuro-border, rgba(255,255,255,0.1));
}
.neurotutor-standalone__title {
    display: flex;
    align-items: center;
    gap: 10px;
}
.neurotutor-standalone__title h2 {
    font-size: 18px;
    font-weight: 700;
    color: white;
    margin: 0;
}
.neurotutor-standalone__icon {
    font-size: 24px;
    animation: brain-pulse 2s ease-in-out infinite;
}
@keyframes brain-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
.neurotutor-standalone__credits {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(6, 214, 160, 0.15);
    border-radius: 20px;
    font-size: 13px;
    color: var(--neuro-cyan, #06d6a0);
    font-weight: 600;
}
.neurotutor-standalone__close {
    background: none;
    border: none;
    color: var(--neuro-text-secondary, #94a3b8);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s;
}
.neurotutor-standalone__close:hover {
    background: rgba(255,255,255,0.1);
    color: white;
}

.neurotutor-standalone__body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.neurotutor-standalone__input-area {
    margin-bottom: 16px;
}
.neurotutor-standalone__label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--neuro-text-primary, #e2e8f0);
    margin-bottom: 8px;
}
.neurotutor-standalone__textarea {
    width: 100%;
    padding: 14px;
    background: var(--neuro-bg-surface, #0a0f1a);
    border: 2px solid var(--neuro-border, rgba(255,255,255,0.1));
    border-radius: 12px;
    color: var(--neuro-text-primary, #e2e8f0);
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    min-height: 120px;
    transition: all 0.2s;
    font-family: inherit;
}
.neurotutor-standalone__textarea:focus {
    outline: none;
    border-color: var(--neuro-cyan, #06d6a0);
    box-shadow: 0 0 0 3px rgba(6, 214, 160, 0.15);
}
.neurotutor-standalone__textarea::placeholder {
    color: var(--neuro-text-muted, #64748b);
}
.neurotutor-standalone__char-count {
    text-align: right;
    font-size: 12px;
    color: var(--neuro-text-muted, #64748b);
    margin-top: 6px;
}

.neurotutor-standalone__actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.neurotutor-standalone__action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    background: var(--neuro-bg-surface, #0a0f1a);
    border: 1px solid var(--neuro-border, rgba(255,255,255,0.1));
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.neurotutor-standalone__action:hover {
    background: rgba(6, 214, 160, 0.1);
    border-color: var(--neuro-cyan, #06d6a0);
    transform: translateY(-2px);
}
.neurotutor-standalone__action .action-icon {
    font-size: 22px;
}
.neurotutor-standalone__action .action-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--neuro-text-secondary, #94a3b8);
}
.neurotutor-standalone__action:hover .action-label {
    color: var(--neuro-cyan, #06d6a0);
}

/* ════ Fluxo por ação: tabs + cabeçalho + opções + CTA ════ */
.standalone-action-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 12px;
    scrollbar-width: thin;
}
.standalone-action-tab {
    --act-accent: #8b5cf6;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--neuro-bg-surface, #0a0f1a);
    border: 1px solid var(--neuro-border, rgba(255,255,255,0.1));
    color: var(--neuro-text-secondary, #94a3b8);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.standalone-action-tab:hover {
    border-color: var(--act-accent);
    color: var(--neuro-text-primary, #e2e8f0);
}
.standalone-action-tab.is-active {
    background: color-mix(in srgb, var(--act-accent) 18%, transparent);
    border-color: var(--act-accent);
    color: #fff;
}
.standalone-action-tab__icon { font-size: 15px; }

.standalone-action-head {
    --act-accent: #8b5cf6;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--act-accent) 10%, transparent);
    border-left: 3px solid var(--act-accent);
}
.standalone-action-head__icon { font-size: 24px; line-height: 1; }
.standalone-action-head__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--neuro-text-primary, #e2e8f0);
}
.standalone-action-head__desc {
    font-size: 12.5px;
    color: var(--neuro-text-secondary, #94a3b8);
    margin-top: 2px;
}

.standalone-action-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 12px 0 16px;
}
.standalone-action-options:empty { display: none; }
.standalone-opt-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.standalone-opt-row__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--neuro-text-secondary, #94a3b8);
    min-width: 92px;
}
.standalone-opt-row__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.standalone-opt-chip {
    --act-accent: #8b5cf6;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--neuro-bg-surface, #0a0f1a);
    border: 1px solid var(--neuro-border, rgba(255,255,255,0.1));
    color: var(--neuro-text-secondary, #94a3b8);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.standalone-opt-chip:hover { border-color: var(--act-accent); }
.standalone-opt-chip.is-active {
    background: color-mix(in srgb, var(--act-accent) 20%, transparent);
    border-color: var(--act-accent);
    color: #fff;
}

.neurotutor-standalone__run {
    --act-accent: #8b5cf6;
    width: 100%;
    padding: 14px;
    margin-bottom: 16px;
    border: none;
    border-radius: 12px;
    background: var(--act-accent);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
}
.neurotutor-standalone__run:hover { filter: brightness(1.08); transform: translateY(-1px); }
.neurotutor-standalone__run:active { transform: translateY(0); }

.standalone-result-head {
    --act-accent: #8b5cf6;
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: var(--act-accent);
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--act-accent) 14%, transparent);
    margin-bottom: 10px;
}

.neurotutor-standalone__chat-input {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}
.neurotutor-standalone__chat-input input {
    flex: 1;
    padding: 12px 16px;
    background: var(--neuro-bg-surface, #0a0f1a);
    border: 2px solid var(--neuro-border, rgba(255,255,255,0.1));
    border-radius: 12px;
    color: var(--neuro-text-primary, #e2e8f0);
    font-size: 14px;
}
.neurotutor-standalone__chat-input input:focus {
    outline: none;
    border-color: var(--neuro-cyan, #06d6a0);
}
.neurotutor-standalone__chat-input input::placeholder {
    color: var(--neuro-text-muted, #64748b);
}
.neurotutor-standalone__send {
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--neuro-cyan, #06d6a0), var(--neuro-blue, #0ea5e9));
    border: none;
    border-radius: 12px;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
}
.neurotutor-standalone__send:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(6, 214, 160, 0.4);
}

.neurotutor-standalone__response {
    background: var(--neuro-bg-surface, #0a0f1a);
    border: 1px solid var(--neuro-border, rgba(255,255,255,0.1));
    border-radius: 12px;
    overflow: hidden;
}
.neurotutor-standalone__response-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(6, 214, 160, 0.1);
    border-bottom: 1px solid var(--neuro-border, rgba(255,255,255,0.1));
    font-weight: 600;
    font-size: 14px;
    color: var(--neuro-cyan, #06d6a0);
}
.neurotutor-standalone__response-header button {
    background: none;
    border: none;
    color: var(--neuro-text-secondary, #94a3b8);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
}
.neurotutor-standalone__response-header button:hover {
    color: white;
    background: rgba(255,255,255,0.1);
}
.neurotutor-standalone__response-content {
    padding: 16px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--neuro-text-primary, #e2e8f0);
    max-height: 250px;
    overflow-y: auto;
}

.neurotutor-standalone__loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
}
.neurotutor-standalone__loader-brain {
    font-size: 48px;
    animation: brain-pulse 1s ease-in-out infinite;
}
.neurotutor-standalone__loader p {
    margin-top: 12px;
    color: var(--neuro-text-secondary, #94a3b8);
    font-size: 14px;
}
.neurotutor-standalone__loader-dots {
    display: flex;
    gap: 6px;
    margin-top: 16px;
}
.neurotutor-standalone__loader-dots span {
    width: 8px;
    height: 8px;
    background: var(--neuro-cyan, #06d6a0);
    border-radius: 50%;
    animation: loader-bounce 1.4s ease-in-out infinite;
}
.neurotutor-standalone__loader-dots span:nth-child(2) { animation-delay: 0.2s; }
.neurotutor-standalone__loader-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes loader-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

/* Mobile responsive */
@media (max-width: 640px) {
    .neurotutor-standalone {
        width: 95%;
        max-height: 90vh;
    }
    .neurotutor-standalone__actions {
        grid-template-columns: repeat(2, 1fr);
    }
    .neurotutor-standalone__credits {
        display: none;
    }
}

/* ==================== NEUROTUTOR PAGE (Full Reader Mode) ==================== */
.neurotutor-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--neuro-bg-primary, #0a0f1a);
    z-index: 300;
    display: none;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.neurotutor-page.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

/* ═══════════════════════════════════════════════════════════════ */
/* HEADER                                                          */
/* ═══════════════════════════════════════════════════════════════ */
.neurotutor-page__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
    border-bottom: 1px solid var(--neuro-border, rgba(255,255,255,0.1));
    flex-shrink: 0;
    gap: 12px;
}
.neurotutor-page__back {
    background: rgba(255,255,255,0.1);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
.neurotutor-page__back:hover {
    background: rgba(255,255,255,0.2);
}
.neurotutor-page__tools {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.neurotutor-page__tool-btn {
    background: rgba(255,255,255,0.1);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.neurotutor-page__tool-btn:hover {
    background: rgba(139, 92, 246, 0.3);
}

/* Login Button */
.neurotutor-page__login-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 10px rgba(139, 92, 246, 0.3);
}
.neurotutor-page__login-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}
.neurotutor-page__login-btn.logged-in {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 2px 10px rgba(34, 197, 94, 0.3);
}
.neurotutor-page__login-btn.logged-in:hover {
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
}

/* Mode Toggle (Leitura / IA) */
.neurotutor-page__mode-toggle {
    display: flex;
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
}
.mode-toggle-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--neuro-text-secondary, #94a3b8);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.mode-toggle-btn:hover {
    color: white;
}
.mode-toggle-btn.active {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: white;
    box-shadow: 0 2px 10px rgba(139, 92, 246, 0.3);
}

/* ═══════════════════════════════════════════════════════════════ */
/* INPUT MODE - Entrada inicial                                    */
/* ═══════════════════════════════════════════════════════════════ */
.neurotutor-page__input-mode {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}
.neurotutor-page__input-container {
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.neurotutor-page__input-header {
    text-align: center;
}
.neurotutor-page__input-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
}
.neurotutor-page__input-header h2 {
    font-size: 28px;
    font-weight: 800;
    color: white;
    margin: 0 0 8px;
    background: linear-gradient(135deg, #8b5cf6, #06d6a0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.neurotutor-page__input-header p {
    font-size: 14px;
    color: var(--neuro-text-secondary, #94a3b8);
    margin: 0;
}

/* Textarea wrapper */
.neurotutor-page__textarea-wrapper {
    background: var(--neuro-bg-surface, rgba(15, 23, 42, 0.8));
    border: 1px solid var(--neuro-border, rgba(255,255,255,0.1));
    border-radius: 16px;
    overflow: hidden;
}
.neurotutor-page__textarea {
    width: 100%;
    min-height: 180px;
    padding: 16px;
    background: transparent;
    border: none;
    color: var(--neuro-text-primary, #e2e8f0);
    font-size: 15px;
    line-height: 1.7;
    resize: none;
    font-family: inherit;
}
.neurotutor-page__textarea:focus {
    outline: none;
}
.neurotutor-page__textarea::placeholder {
    color: var(--neuro-text-muted, #64748b);
}
.neurotutor-page__textarea-footer {
    padding: 8px 16px;
    border-top: 1px solid var(--neuro-border, rgba(255,255,255,0.05));
    font-size: 12px;
    color: var(--neuro-text-muted, #64748b);
}

/* Quick Actions */
.neurotutor-page__quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.neurotutor-page__action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    background: var(--neuro-bg-surface, rgba(15, 23, 42, 0.6));
    border: 1px solid var(--neuro-border, rgba(255,255,255,0.1));
    border-radius: 12px;
    color: var(--neuro-text-secondary, #94a3b8);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.neurotutor-page__action-btn:hover {
    background: rgba(139, 92, 246, 0.15);
    border-color: #8b5cf6;
    color: white;
}
.neurotutor-page__action-btn--premium {
    border-color: rgba(251, 191, 36, 0.3);
}
.neurotutor-page__action-btn--premium .premium-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    font-size: 8px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
}

/* Start Button */
.neurotutor-page__start-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border: none;
    border-radius: 14px;
    color: white;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.neurotutor-page__start-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4);
}
.neurotutor-page__start-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ═══════════════════════════════════════════════════════════════ */
/* READER MODE - Leitura com ferramentas                           */
/* ═══════════════════════════════════════════════════════════════ */
.neurotutor-page__reader-mode {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.neurotutor-page__content {
    flex: 1;
    overflow-y: auto;
    padding: 30px 20px 140px;
    font-size: 18px;
    line-height: 2;
    color: var(--neuro-text-primary, #e2e8f0);
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}
.neurotutor-page__content .word {
    display: inline;
    cursor: pointer;
    padding: 2px 1px;
    border-radius: 3px;
    transition: color 0.15s ease, background 0.15s ease, text-shadow 0.15s ease, border-color 0.15s ease;
    border-bottom: 2px solid transparent;  /* Reserva espaço — evita layout shift */
}
.neurotutor-page__content .word:hover {
    background: rgba(139, 92, 246, 0.2);
}
.neurotutor-page__content .word.active {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: white;
    padding: 2px 4px;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(139, 92, 246, 0.4);
}
/* word-block.active — alto contraste, sem overlay difference */
.neurotutor-page__content .word-block.active {
    color: var(--highlight-color, #06d6a0) !important;
    text-shadow: 0 0 8px rgba(6, 214, 160, 0.4);
    border-bottom: 2px solid var(--highlight-color, #06d6a0);
}
.neurotutor-page__content .word-block.active::after {
    background-color: transparent !important;
    box-shadow: none !important;
    opacity: 0 !important;
}
.neurotutor-page__content .word.read {
    color: var(--neuro-text-muted, #64748b);
}
.neurotutor-page__content .word-block.read {
    color: var(--neuro-text-muted, #64748b) !important;
}
/* Rainbow: reading-engine muda --highlight-color via JS (updateRainbow) */
.neurotutor-page__content.rainbow .word.active,
.neurotutor-page__content.rainbow .word-block.active {
    color: var(--highlight-color, #06d6a0) !important;
    text-shadow: 0 0 8px currentColor;
}
.neurotutor-page__content.rainbow .word-block.active::after {
    opacity: 0 !important;
}

/* Teleprompter */
.neurotutor-page__teleprompter {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    padding: 14px 28px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.95), rgba(99, 102, 241, 0.95));
    border-radius: 14px;
    font-size: 26px;
    font-weight: 700;
    color: white;
    text-align: center;
    min-width: 180px;
    box-shadow: 0 10px 40px rgba(139, 92, 246, 0.4);
    z-index: 320;
    display: none;
}
.neurotutor-page__teleprompter.visible {
    display: block;
    animation: teleprompter-pop 0.2s ease-out;
}

/* Dock */
.neurotutor-page__dock {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid var(--neuro-border, rgba(255,255,255,0.1));
    border-radius: 18px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    z-index: 310;
}
.neurotutor-page__dock .dock-btn {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: rgba(255,255,255,0.05);
    border: none;
    color: var(--neuro-text-secondary, #94a3b8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.neurotutor-page__dock .dock-btn:hover {
    background: rgba(139, 92, 246, 0.2);
    color: white;
}
.neurotutor-page__dock .dock-btn.active {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: white;
}
.neurotutor-page__dock .dock-play {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: white;
    border-radius: 50%;
}
.neurotutor-page__dock .dock-play:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.5);
}
.neurotutor-page__dock .dock-divider {
    width: 1px;
    height: 28px;
    background: var(--neuro-border, rgba(255,255,255,0.1));
    margin: 0 2px;
}
.neurotutor-page__dock .dock-emoji {
    font-size: 17px;
}

/* ═══════════════════════════════════════════════════════════════ */
/* AI MODE - Chat e Questões                                       */
/* ═══════════════════════════════════════════════════════════════ */
.neurotutor-page__ai-mode {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

/* Context Preview */
.neurotutor-page__ai-context {
    background: var(--neuro-bg-surface, rgba(15, 23, 42, 0.6));
    border: 1px solid var(--neuro-border, rgba(255,255,255,0.1));
    border-radius: 12px;
    overflow: hidden;
}
.ai-context__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(6, 214, 160, 0.1);
    border-bottom: 1px solid var(--neuro-border, rgba(255,255,255,0.05));
    font-size: 12px;
    font-weight: 600;
    color: var(--neuro-cyan, #06d6a0);
}
.ai-context__chars {
    margin-left: auto;
    font-weight: 400;
    color: var(--neuro-text-muted, #64748b);
}
.ai-context__preview {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--neuro-text-secondary, #94a3b8);
    line-height: 1.5;
    max-height: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* AI Section */
.neurotutor-page__ai-section {
    background: var(--neuro-bg-surface, rgba(15, 23, 42, 0.6));
    border: 1px solid var(--neuro-border, rgba(255,255,255,0.1));
    border-radius: 14px;
    padding: 16px;
}
.ai-section__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.ai-section__icon {
    font-size: 20px;
}
.ai-section__header h3 {
    font-size: 15px;
    font-weight: 700;
    color: white;
    margin: 0;
}
.neurotutor-page__ai-textarea {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    background: var(--neuro-bg-primary, #0a0f1a);
    border: 1px solid var(--neuro-border, rgba(255,255,255,0.1));
    border-radius: 10px;
    color: var(--neuro-text-primary, #e2e8f0);
    font-size: 14px;
    line-height: 1.6;
    resize: none;
    font-family: inherit;
}
.neurotutor-page__ai-textarea:focus {
    outline: none;
    border-color: #8b5cf6;
}

/* Gabarito */
.neurotutor-page__gabarito {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--neuro-border, rgba(255,255,255,0.05));
}
.gabarito__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--neuro-text-secondary, #94a3b8);
    margin-bottom: 8px;
}
.gabarito__options {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.gabarito__btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--neuro-border, rgba(255,255,255,0.1));
    color: var(--neuro-text-secondary, #94a3b8);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}
.gabarito__btn:hover {
    background: rgba(139, 92, 246, 0.2);
    border-color: #8b5cf6;
    color: white;
}
.gabarito__btn.active {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border-color: transparent;
    color: white;
}
.gabarito__selected {
    margin-left: 10px;
    font-size: 12px;
    color: var(--neuro-cyan, #06d6a0);
    font-weight: 600;
}

/* AI Buttons */
.neurotutor-page__ai-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 12px;
}
.neurotutor-page__ai-btn--primary {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border: none;
    color: white;
}
.neurotutor-page__ai-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}

/* Chat History */
.neurotutor-page__chat-history {
    min-height: 120px;
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 12px;
    padding: 8px;
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
}
.chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    color: var(--neuro-text-muted, #64748b);
    gap: 8px;
}
.chat-empty p {
    font-size: 13px;
    margin: 0;
}
.chat-message {
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.5;
}
.chat-message--user {
    background: rgba(139, 92, 246, 0.2);
    color: white;
    margin-left: 20%;
}
.chat-message--ai {
    background: var(--neuro-bg-surface, rgba(15, 23, 42, 0.8));
    color: var(--neuro-text-primary, #e2e8f0);
    margin-right: 20%;
}

/* Chat Input */
.neurotutor-page__chat-input-wrapper {
    display: flex;
    gap: 8px;
}
.neurotutor-page__chat-input {
    flex: 1;
    padding: 12px 14px;
    background: var(--neuro-bg-primary, #0a0f1a);
    border: 1px solid var(--neuro-border, rgba(255,255,255,0.1));
    border-radius: 10px;
    color: var(--neuro-text-primary, #e2e8f0);
    font-size: 14px;
}
.neurotutor-page__chat-input:focus {
    outline: none;
    border-color: #8b5cf6;
}
.neurotutor-page__chat-send {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border: none;
    border-radius: 10px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.neurotutor-page__chat-send:hover {
    transform: scale(1.05);
}

/* Chat Suggestions */
.neurotutor-page__chat-suggestions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.chat-suggestion {
    padding: 6px 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--neuro-border, rgba(255,255,255,0.1));
    border-radius: 20px;
    color: var(--neuro-text-secondary, #94a3b8);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}
.chat-suggestion:hover {
    background: rgba(139, 92, 246, 0.15);
    border-color: #8b5cf6;
    color: white;
}

/* AI Response */
.neurotutor-page__ai-response {
    background: var(--neuro-bg-surface, rgba(15, 23, 42, 0.8));
    border: 1px solid rgba(6, 214, 160, 0.2);
    border-radius: 14px;
    overflow: hidden;
}
.ai-response__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: rgba(6, 214, 160, 0.1);
    border-bottom: 1px solid var(--neuro-border, rgba(255,255,255,0.05));
    font-size: 13px;
    font-weight: 600;
    color: var(--neuro-cyan, #06d6a0);
}
.ai-response__icon {
    font-size: 18px;
}
.ai-response__copy {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--neuro-text-muted, #64748b);
    cursor: pointer;
    padding: 4px;
}
.ai-response__copy:hover {
    color: white;
}
.ai-response__content {
    padding: 16px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--neuro-text-primary, #e2e8f0);
}
.ai-response__actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--neuro-border, rgba(255,255,255,0.05));
    flex-wrap: wrap;
}
.ai-response__action {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--neuro-border, rgba(255,255,255,0.1));
    border-radius: 8px;
    color: var(--neuro-text-secondary, #94a3b8);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}
.ai-response__action:hover {
    background: rgba(139, 92, 246, 0.15);
    color: white;
}

/* ═══════════════════════════════════════════════════════════════ */
/* AI MODE - ESTILO NEURO FUTURISTA                                */
/* ═══════════════════════════════════════════════════════════════ */

/* Scrollable container */
.neurotutor-page__ai-scroll {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 40px;
}

/* ─────────────────────────────────────────────────────────────── */
/* HERO HEADER                                                     */
/* ─────────────────────────────────────────────────────────────── */
.neuro-ai-hero {
    position: relative;
    text-align: center;
    padding: 24px 20px 20px;
    margin: -20px -20px 0;
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.12) 0%, transparent 100%);
    overflow: hidden;
}
.neuro-ai-hero__glow {
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 200px;
    background: radial-gradient(ellipse, rgba(139, 92, 246, 0.3) 0%, transparent 70%);
    pointer-events: none;
}
.neuro-ai-hero__icon {
    font-size: 40px;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.5));
}
.neuro-ai-hero__title {
    font-size: 24px;
    font-weight: 800;
    background: linear-gradient(135deg, #fff 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 4px;
    letter-spacing: -0.02em;
}
.neuro-ai-hero__subtitle {
    font-size: 13px;
    color: var(--neuro-text-muted, #64748b);
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────── */
/* CARDS                                                           */
/* ─────────────────────────────────────────────────────────────── */
.neuro-card {
    background: var(--neuro-bg-surface, rgba(15, 23, 42, 0.7));
    border: 1px solid var(--neuro-border, rgba(255,255,255,0.08));
    border-radius: 16px;
    padding: 16px;
    backdrop-filter: blur(10px);
}
.neuro-card--highlight {
    border-color: rgba(139, 92, 246, 0.2);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, transparent 50%);
}
.neuro-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.neuro-card__header h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--neuro-text-primary, #e2e8f0);
    margin: 0;
    flex: 1;
}
.neuro-card__icon {
    width: 18px;
    height: 18px;
    color: #8b5cf6;
}
.neuro-card__icon--green {
    color: #22c55e;
}

/* ─────────────────────────────────────────────────────────────── */
/* BADGES                                                          */
/* ─────────────────────────────────────────────────────────────── */
.neuro-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.03em;
}
.neuro-badge--muted {
    background: rgba(100, 116, 139, 0.2);
    color: #64748b;
}
.neuro-badge--green {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}
.neuro-badge--purple {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}
/* Tema claro: os tons neon (verde/roxo) foram calibrados pro fundo escuro e
   ficam fracos no claro (~2:1). Escurece só a COR do texto (fundo mantém). */
body.theme-light .neuro-badge--green { color: #15803d; }
body.theme-light .neuro-badge--purple { color: #6d28d9; }

/* ─────────────────────────────────────────────────────────────── */
/* CHIPS (Bancas)                                                  */
/* ─────────────────────────────────────────────────────────────── */
.neuro-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.neuro-chip {
    padding: 8px 14px;
    border-radius: 20px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--neuro-border, rgba(255,255,255,0.1));
    color: var(--neuro-text-secondary, #94a3b8);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.neuro-chip:hover {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.3);
}
.neuro-chip.active {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.35);
}

/* ─────────────────────────────────────────────────────────────── */
/* INPUTS                                                          */
/* ─────────────────────────────────────────────────────────────── */
.neuro-input {
    width: 100%;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--neuro-border, rgba(255,255,255,0.1));
    border-radius: 10px;
    color: var(--neuro-text-primary, #e2e8f0);
    font-size: 14px;
    transition: all 0.2s;
}
.neuro-input:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}
.neuro-input::placeholder {
    color: var(--neuro-text-muted, #64748b);
}

/* ─────────────────────────────────────────────────────────────── */
/* TABS                                                            */
/* ─────────────────────────────────────────────────────────────── */
.neuro-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.neuro-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--neuro-border, rgba(255,255,255,0.1));
    color: var(--neuro-text-secondary, #94a3b8);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.neuro-tab:hover {
    background: rgba(139, 92, 246, 0.1);
}
.neuro-tab.active {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: white;
    border-color: transparent;
}
.neuro-tab-content { }

/* ─────────────────────────────────────────────────────────────── */
/* TEXTAREA                                                        */
/* ─────────────────────────────────────────────────────────────── */
.neuro-textarea {
    width: 100%;
    min-height: 120px;
    padding: 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--neuro-border, rgba(255,255,255,0.1));
    border-radius: 12px;
    color: var(--neuro-text-primary, #e2e8f0);
    font-size: 14px;
    line-height: 1.6;
    resize: none;
    font-family: inherit;
    transition: all 0.2s;
}
.neuro-textarea:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}
.neuro-textarea::placeholder {
    color: var(--neuro-text-muted, #64748b);
}
.neuro-textarea--small {
    min-height: 60px;
}
.neuro-textarea__footer {
    text-align: right;
    font-size: 11px;
    color: var(--neuro-text-muted, #64748b);
    margin-top: 6px;
}

/* ─────────────────────────────────────────────────────────────── */
/* DROPZONE                                                        */
/* ─────────────────────────────────────────────────────────────── */
.neuro-dropzone {
    border: 2px dashed var(--neuro-border, rgba(255,255,255,0.15));
    border-radius: 14px;
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: rgba(0, 0, 0, 0.2);
}
.neuro-dropzone:hover {
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.05);
}
.neuro-dropzone__icon {
    font-size: 36px;
    margin-bottom: 8px;
}
.neuro-dropzone__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--neuro-text-primary, #e2e8f0);
    margin: 0 0 4px;
}
.neuro-dropzone__hint {
    font-size: 11px;
    color: var(--neuro-text-muted, #64748b);
    margin: 0;
}

/* Image Preview */
.neuro-image-preview {
    position: relative;
    display: inline-block;
    margin-top: 12px;
}
.neuro-image-preview img {
    max-height: 180px;
    border-radius: 12px;
    border: 2px solid var(--neuro-border, rgba(255,255,255,0.1));
}
.neuro-image-preview__remove {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ef4444;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s;
}
.neuro-image-preview__remove:hover {
    transform: scale(1.1);
}

/* ─────────────────────────────────────────────────────────────── */
/* RADIO GROUP                                                     */
/* ─────────────────────────────────────────────────────────────── */
.neuro-radio-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
/* 4 colunas só a partir de 520px: em celulares (≤519px) os 4 tipos de gabarito
   ficam num 2×2 folgado em vez de espremidos em 4 colunas estreitas. */
@media (min-width: 520px) {
    .neuro-radio-group {
        grid-template-columns: repeat(4, 1fr);
    }
}
.neuro-radio {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--neuro-border, rgba(255,255,255,0.1));
    cursor: pointer;
    transition: all 0.2s;
    font-size: 12px;
    font-weight: 600;
    color: var(--neuro-text-secondary, #94a3b8);
}
.neuro-radio:hover {
    background: rgba(139, 92, 246, 0.1);
}
.neuro-radio:has(input:checked) {
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.15);
    /* var em vez de white fixo: no tema claro o fundo lavanda é CLARO e o
       branco sumia (1.1:1) — ex.: "🤷 Não sei" marcado no card Gabarito. */
    color: var(--neuro-text-primary, #fff);
}
.neuro-radio input { display: none; }
.neuro-radio__mark {
    width: 14px;
    height: 14px;
    border: 2px solid var(--neuro-text-muted, #64748b);
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}
.neuro-radio:has(input:checked) .neuro-radio__mark {
    border-color: #8b5cf6;
}
.neuro-radio:has(input:checked) .neuro-radio__mark::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background: #8b5cf6;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.neuro-radio__label { }

/* ─────────────────────────────────────────────────────────────── */
/* INFO BOX                                                        */
/* ─────────────────────────────────────────────────────────────── */
.neuro-info-box {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 10px;
    font-size: 12px;
    color: var(--neuro-text-secondary, #94a3b8);
    margin-top: 10px;
}
.neuro-info-box--success {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

/* ─────────────────────────────────────────────────────────────── */
/* GABARITO OPTIONS                                                */
/* ─────────────────────────────────────────────────────────────── */
.neuro-gabarito-options {
    margin-top: 12px;
}
.neuro-toggle-pair {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.neuro-toggle-option {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 2px solid var(--neuro-border, rgba(255,255,255,0.1));
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 700;
    font-size: 14px;
}
.neuro-toggle-option input { display: none; }
.neuro-toggle-option--green {
    color: #22c55e;
}
.neuro-toggle-option--red {
    color: #ef4444;
}
.neuro-toggle-option:has(input:checked).neuro-toggle-option--green {
    background: rgba(34, 197, 94, 0.15);
    border-color: #22c55e;
}
.neuro-toggle-option:has(input:checked).neuro-toggle-option--red {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
}

/* Alternativas A-E */
.neuro-alt-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
.neuro-alt-option {
    cursor: pointer;
}
.neuro-alt-option input { display: none; }
.neuro-alt-option span {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 2px solid var(--neuro-border, rgba(255,255,255,0.1));
    font-weight: 800;
    font-size: 16px;
    color: var(--neuro-text-primary, #e2e8f0);
    transition: all 0.2s;
}
.neuro-alt-option:hover span {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.3);
}
.neuro-alt-option:has(input:checked) span {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.35);
}

/* ─────────────────────────────────────────────────────────────── */
/* PRIMARY BUTTON                                                  */
/* ─────────────────────────────────────────────────────────────── */
.neuro-btn-primary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border: none;
    border-radius: 14px;
    color: white;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s;
    overflow: hidden;
}
.neuro-btn-primary__glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}
.neuro-btn-primary:hover .neuro-btn-primary__glow {
    left: 100%;
}
.neuro-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(139, 92, 246, 0.45);
}
.neuro-btn-primary:active {
    transform: translateY(0);
}

/* Icon Button */
.neuro-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.08);
    border: none;
    border-radius: 8px;
    color: var(--neuro-text-secondary, #94a3b8);
    cursor: pointer;
    transition: all 0.15s;
}
.neuro-btn-icon:hover {
    background: rgba(139, 92, 246, 0.2);
    color: white;
}

/* ─────────────────────────────────────────────────────────────── */
/* RESULT CARD                                                     */
/* ─────────────────────────────────────────────────────────────── */
.neuro-result {
    background: var(--neuro-bg-surface, rgba(15, 23, 42, 0.8));
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 16px;
    overflow: hidden;
}
.neuro-result__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(6, 182, 212, 0.1));
    border-bottom: 1px solid var(--neuro-border, rgba(255,255,255,0.05));
}
.neuro-result__title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    font-size: 14px;
    font-weight: 700;
    color: #22c55e;
}
.neuro-result__icon {
    font-size: 20px;
}
.neuro-result__content {
    padding: 18px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--neuro-text-primary, #e2e8f0);
}

/* "Salvar como flashcard" — transforma a questão resolvida em revisão espaçada.
   Aparece no fim da resposta do NeuroTutor (página). */
.neuro-save-flashcard {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 16px 0 0;
    padding: 10px 16px; border-radius: 12px;
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.3);
    color: var(--neuro-purple, #a855f7);
    font-size: 14px; font-weight: 700; cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
/* "Ler com régua e marcador" — abre a resposta no leitor (régua/karaokê). */
.neuro-read-response {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 16px 8px 0 0;
    padding: 10px 16px; border-radius: 12px;
    background: rgba(6, 214, 160, 0.12);
    border: 1px solid rgba(6, 214, 160, 0.3);
    color: var(--neuro-cyan, #06d6a0);
    font-size: 14px; font-weight: 700; cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.neuro-read-response:hover { background: rgba(6, 214, 160, 0.2); }
.neuro-read-response:active { transform: scale(0.98); }

/* #2: histórico inline da ferramenta (NeuroTutor) — reabre direto aqui */
.neuro-tool-history { margin: 12px 0; }
.neuro-tool-history__toggle {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    color: var(--neuro-text-secondary, #94a3b8); font-size: 13px; font-weight: 600;
    padding: 8px 14px; border-radius: 10px; cursor: pointer; transition: background 0.15s ease;
}
.neuro-tool-history__toggle:hover { background: rgba(255,255,255,0.08); }
.neuro-tool-history__list {
    margin-top: 8px; display: flex; flex-direction: column; gap: 6px;
    max-height: 260px; overflow-y: auto;
}
.neuro-tool-history__item {
    text-align: left; background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06); border-radius: 10px;
    padding: 10px 12px; color: var(--neuro-text-primary, #e2e8f0);
    font-size: 13px; cursor: pointer; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; transition: background 0.15s ease;
}
.neuro-tool-history__item:hover { background: rgba(6,214,160,0.08); border-color: rgba(6,214,160,0.2); }
.neuro-tool-history__empty { color: var(--neuro-text-muted, #64748b); font-size: 13px; padding: 8px 4px; }

/* Selo "🪙 usa créditos" nas ações que disparam IA — diferencia visualmente das
   ações grátis (Definir/dicionário, Flashcard cloze local, Destacar, Copiar). */
.ai-credit-coin {
    font-size: 0.82em;
    margin-left: 1px;
    vertical-align: baseline;
    white-space: nowrap;
    filter: saturate(1.1);
}
/* Coach: microcopy esclarecendo chips grátis vs texto livre (créditos) */
.coach-credit-hint {
    font-size: 11.5px;
    color: var(--neuro-text-muted, #94a3b8);
    padding: 8px 12px 2px;
    line-height: 1.4;
}
.neuro-save-flashcard:hover:not(:disabled) { background: rgba(168, 85, 247, 0.2); }
.neuro-save-flashcard:active:not(:disabled) { transform: scale(0.98); }
.neuro-save-flashcard:disabled {
    cursor: default; opacity: 0.85;
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.3);
    color: var(--neuro-green, #10b981);
}

/* "Revelar resposta" — gabarito escondido atrás de um <details> nativo.
   Mantém o raciocínio guiado (anti-ansiedade) mas a resposta fica a 1 toque. */
.neuro-gabarito {
    margin: 16px 0 0;
    border: 1px solid var(--neuro-border, rgba(148, 163, 184, 0.18));
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.06);
    overflow: hidden;
}
.neuro-gabarito__toggle {
    list-style: none;
    cursor: pointer;
    user-select: none;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--neuro-accent, #34d399);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s ease;
}
.neuro-gabarito__toggle::-webkit-details-marker { display: none; }
.neuro-gabarito__toggle::after {
    content: '▾';
    margin-left: auto;
    transition: transform 0.2s ease;
    opacity: 0.7;
}
.neuro-gabarito[open] .neuro-gabarito__toggle::after { transform: rotate(180deg); }
.neuro-gabarito__toggle:hover { background: rgba(16, 185, 129, 0.10); }
.neuro-gabarito__body {
    padding: 4px 16px 16px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--neuro-text-primary, #e2e8f0);
    border-top: 1px solid var(--neuro-border, rgba(148, 163, 184, 0.14));
}

/* Tipografia das respostas do NeuroTutor (renderer rico via marked): headers,
   listas, citações e código agora saem estruturados — antes era só bold/br.
   Escopado ao container da resposta e ao corpo do gabarito. */
#neuro-ai-response-content h1, .neuro-gabarito__body h1,
#neuro-ai-response-content h2, .neuro-gabarito__body h2,
#neuro-ai-response-content h3, .neuro-gabarito__body h3,
#neuro-ai-response-content h4, .neuro-gabarito__body h4 {
    color: var(--neuro-text-primary, #e2e8f0);
    font-weight: 800; line-height: 1.3; margin: 18px 0 8px;
}
#neuro-ai-response-content h1, .neuro-gabarito__body h1 { font-size: 1.35em; }
#neuro-ai-response-content h2, .neuro-gabarito__body h2 { font-size: 1.2em; }
#neuro-ai-response-content h3, .neuro-gabarito__body h3 { font-size: 1.08em; }
#neuro-ai-response-content h4, .neuro-gabarito__body h4 { font-size: 1em; color: var(--neuro-cyan, #06d6a0); }
#neuro-ai-response-content > *:first-child, .neuro-gabarito__body > *:first-child { margin-top: 0; }
#neuro-ai-response-content p, .neuro-gabarito__body p { margin: 0 0 10px; line-height: 1.7; }
#neuro-ai-response-content ul, #neuro-ai-response-content ol,
.neuro-gabarito__body ul, .neuro-gabarito__body ol { margin: 6px 0 12px; padding-left: 24px; }
#neuro-ai-response-content li, .neuro-gabarito__body li { margin: 4px 0; line-height: 1.6; }
#neuro-ai-response-content strong, .neuro-gabarito__body strong { color: var(--neuro-text-primary, #fff); font-weight: 700; }
#neuro-ai-response-content code, .neuro-gabarito__body code {
    background: rgba(255,255,255,0.08); padding: 1px 6px; border-radius: 5px;
    font-size: 0.9em; font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
#neuro-ai-response-content blockquote, .neuro-gabarito__body blockquote {
    margin: 10px 0; padding: 8px 14px; border-left: 3px solid var(--neuro-purple, #a855f7);
    background: rgba(168,85,247,0.08); border-radius: 0 8px 8px 0; color: var(--neuro-text-secondary, #cbd5e1);
}
#neuro-ai-response-content table, .neuro-gabarito__body table {
    border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 0.92em;
}
#neuro-ai-response-content th, #neuro-ai-response-content td,
.neuro-gabarito__body th, .neuro-gabarito__body td {
    border: 1px solid var(--neuro-border, rgba(148,163,184,0.18)); padding: 6px 10px; text-align: left;
}
#neuro-ai-response-content th, .neuro-gabarito__body th { background: rgba(255,255,255,0.04); font-weight: 700; }

/* Result Actions */
.neuro-result__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid var(--neuro-border, rgba(255,255,255,0.05));
    flex-wrap: wrap;
}
.neuro-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--neuro-border, rgba(255,255,255,0.1));
    border-radius: 10px;
    color: var(--neuro-text-secondary, #94a3b8);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.neuro-action-btn:hover {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.3);
    color: white;
}
.neuro-action-btn--primary {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border-color: transparent;
    color: white;
}
.neuro-action-btn--primary:hover {
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.35);
}

/* Desempate: o leitor define mais abaixo um .neuro-action-btn circular 48x48
   que, por vir depois no arquivo, vencia e esmagava os botões de TEXTO do
   resultado do NeuroTutor ("Tirar Dúvida"/"Nova Questão"). Aqui reafirmamos a
   pílula com mais especificidade (escopo em .neuro-result__actions). */
.neuro-result__actions .neuro-action-btn {
    width: auto;
    height: auto;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--neuro-border, rgba(255,255,255,0.1));
    color: var(--neuro-text-secondary, #94a3b8);
}
.neuro-result__actions .neuro-action-btn--primary {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border-color: transparent;
    color: white;
}
@media (max-width: 480px) {
    /* Mobile: cada botão ocupa o espaço disponível e centraliza, em vez de
       ficar espremido num canto. */
    .neuro-result__actions .neuro-action-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
    .neuro-result__actions .neuro-feedback {
        margin-left: 0;
    }
}

/* Feedback Buttons */
.neuro-feedback {
    display: flex;
    gap: 6px;
    margin-left: auto;
}
.neuro-feedback-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--neuro-border, rgba(255,255,255,0.1));
    border-radius: 8px;
    color: var(--neuro-text-muted, #64748b);
    cursor: pointer;
    transition: all 0.2s;
}
.neuro-feedback-btn--up:hover {
    background: rgba(34, 197, 94, 0.15);
    border-color: #22c55e;
    color: #22c55e;
}
.neuro-feedback-btn--down:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
    color: #ef4444;
}

/* ─────────────────────────────────────────────────────────────── */
/* CHAT                                                            */
/* ─────────────────────────────────────────────────────────────── */
.neuro-chat {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--neuro-border, rgba(255,255,255,0.08));
}
.neuro-chat__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--neuro-text-primary, #e2e8f0);
}
.neuro-chat__messages {
    min-height: 100px;
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 12px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
}
.neuro-chat__input-wrapper {
    display: flex;
    gap: 8px;
}
.neuro-chat__input {
    flex: 1;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--neuro-border, rgba(255,255,255,0.1));
    border-radius: 12px;
    color: var(--neuro-text-primary, #e2e8f0);
    font-size: 14px;
}
.neuro-chat__input:focus {
    outline: none;
    border-color: #8b5cf6;
}
.neuro-chat__send {
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border: none;
    border-radius: 12px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.neuro-chat__send:hover {
    transform: scale(1.05);
}
.neuro-chat__suggestions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.neuro-suggestion {
    padding: 6px 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--neuro-border, rgba(255,255,255,0.1));
    border-radius: 20px;
    color: var(--neuro-text-secondary, #94a3b8);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}
.neuro-suggestion:hover {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.3);
    color: white;
}

/* LEGACY - mantendo compatibilidade com classes JS */
.banca-chip { /* Alias para neuro-chip - seletor JS usa esta classe */ }

/* Chat Section dentro do Response */
.ai-chat-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--neuro-border, rgba(255,255,255,0.1));
}
.ai-chat-section__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.ai-chat-section__header span:first-child {
    font-size: 18px;
}
.ai-chat-section__header h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--neuro-text-primary, #e2e8f0);
    margin: 0;
}
.ai-chat-badge {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    letter-spacing: 0.05em;
}
.ai-chat-quote-tip {
    padding: 10px;
    background: rgba(249, 158, 11, 0.1);
    border: 1px solid rgba(249, 158, 11, 0.2);
    border-radius: 10px;
    font-size: 12px;
    color: var(--neuro-orange, #f59e0b);
    margin-bottom: 12px;
}
.ai-chat-quote {
    padding: 10px;
    background: var(--neuro-bg-primary, #0a0f1a);
    border-left: 3px solid var(--neuro-green, #22c55e);
    border-radius: 0 10px 10px 0;
    margin-bottom: 12px;
}
.ai-chat-quote__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.ai-chat-quote__header span {
    font-size: 11px;
    font-weight: 600;
    color: var(--neuro-text-muted, #64748b);
}
.ai-chat-quote__header button {
    background: none;
    border: none;
    color: var(--neuro-text-muted, #64748b);
    cursor: pointer;
    padding: 2px;
}
.ai-chat-quote p {
    font-size: 12px;
    font-style: italic;
    color: var(--neuro-text-secondary, #94a3b8);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ai-chat-cost {
    font-size: 11px;
    color: var(--neuro-text-muted, #64748b);
    text-align: center;
    margin-top: 10px;
}

/* ═══════════════════════════════════════════════════════════════ */
/* SETTINGS PANEL                                                  */
/* ═══════════════════════════════════════════════════════════════ */
.neurotutor-page__settings {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 330;
}
.neurotutor-page__settings-card {
    width: 90%;
    max-width: 400px;
    background: var(--neuro-bg-surface, #0f172a);
    border: 1px solid var(--neuro-border, rgba(255,255,255,0.1));
    border-radius: 20px;
    overflow: hidden;
}
.neurotutor-page__settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(99, 102, 241, 0.15));
    border-bottom: 1px solid var(--neuro-border, rgba(255,255,255,0.1));
}
.neurotutor-page__settings-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: white;
    margin: 0;
}
.neurotutor-page__settings-header button {
    background: none;
    border: none;
    color: var(--neuro-text-secondary, #94a3b8);
    cursor: pointer;
    padding: 4px;
}
.neurotutor-page__settings-body {
    padding: 20px;
}
.neurotutor-page__setting {
    margin-bottom: 20px;
}
.neurotutor-page__setting:last-child {
    margin-bottom: 0;
}
.neurotutor-page__setting label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--neuro-text-secondary, #94a3b8);
    margin-bottom: 10px;
}
.neurotutor-page__speed-control,
.neurotutor-page__font-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.neurotutor-page__speed-control button,
.neurotutor-page__font-control button {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255,255,255,0.1);
    border: none;
    color: white;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}
.neurotutor-page__speed-control button:hover,
.neurotutor-page__font-control button:hover {
    background: rgba(139, 92, 246, 0.3);
}
.neurotutor-page__speed-control span,
.neurotutor-page__font-control span {
    font-size: 24px;
    font-weight: 700;
    color: white;
    min-width: 80px;
    text-align: center;
}
.neurotutor-page__theme-buttons {
    display: flex;
    gap: 10px;
}
.neurotutor-page__theme-buttons .theme-btn {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    border: 2px solid var(--neuro-border, rgba(255,255,255,0.1));
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.neurotutor-page__theme-buttons .theme-light {
    background: #f8fafc;
    color: #1e293b;
}
.neurotutor-page__theme-buttons .theme-dark {
    background: #1e293b;
    color: #e2e8f0;
}
.neurotutor-page__theme-buttons .theme-sepia {
    background: #fef3c7;
    color: #78350f;
}
.neurotutor-page__theme-buttons .theme-btn:hover {
    transform: translateY(-2px);
    border-color: #8b5cf6;
}
.neurotutor-page__theme-buttons .theme-btn.active {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3);
}

/* Loading Overlay */
.neurotutor-page__loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 15, 26, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    /* Acima do chrome do modo neuro-page (régua 350/351, more-menu 400) pra o
       overlay de carregamento nunca ficar escondido atrás desses controles. */
    z-index: 401;
}
.neurotutor-page__loading .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--neuro-border, rgba(255,255,255,0.1));
    border-top-color: #8b5cf6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
.neurotutor-page__loading span {
    color: var(--neuro-text-secondary, #94a3b8);
    font-size: 14px;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
@keyframes teleprompter-pop {
    from { transform: translateX(-50%) scale(0.9); opacity: 0; }
    to { transform: translateX(-50%) scale(1); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════ */
/* MOBILE RESPONSIVE                                               */
/* ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .neurotutor-page__header {
        padding: 10px 12px;
    }
    .mode-toggle-btn {
        padding: 6px 12px;
        font-size: 12px;
    }
    .mode-toggle-btn span {
        display: none;
    }
    .neurotutor-page__input-container {
        max-width: 100%;
    }
    .neurotutor-page__input-header h2 {
        font-size: 24px;
    }
    .neurotutor-page__quick-actions {
        grid-template-columns: repeat(2, 1fr);
    }
    .neurotutor-page__content {
        padding: 20px 16px 120px;
        font-size: 16px;
    }
    .neurotutor-page__dock {
        bottom: 12px;
        padding: 8px 10px;
        gap: 4px;
    }
    .neurotutor-page__dock .dock-btn {
        width: 38px;
        height: 38px;
    }
    .neurotutor-page__dock .dock-play {
        width: 44px;
        height: 44px;
    }
    .neurotutor-page__dock .dock-divider {
        height: 24px;
    }
    .neurotutor-page__teleprompter {
        font-size: 22px;
        padding: 12px 20px;
        min-width: 150px;
    }
    .neurotutor-page__ai-mode {
        padding: 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════ */
/* THEME VARIATIONS                                                */
/* ═══════════════════════════════════════════════════════════════ */
body.theme-light .neurotutor-page {
    background: #f8fafc;
}
body.theme-light .neurotutor-page__header {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
}
body.theme-light .neurotutor-page__textarea-wrapper,
body.theme-light .neurotutor-page__ai-section,
body.theme-light .neurotutor-page__ai-context {
    background: white;
    border-color: #e2e8f0;
}
body.theme-light .neurotutor-page__textarea,
body.theme-light .neurotutor-page__ai-textarea,
body.theme-light .neurotutor-page__chat-input {
    background: #f1f5f9;
    color: #1e293b;
}
body.theme-light .neurotutor-page__content {
    color: #1e293b;
}
body.theme-light .neurotutor-page__dock {
    background: rgba(255, 255, 255, 0.95);
    border-color: #e2e8f0;
}
body.theme-light .neurotutor-page__dock .dock-btn {
    background: #f1f5f9;
    color: #64748b;
}
body.theme-sepia .neurotutor-page {
    background: #fef9e7;
}
body.theme-sepia .neurotutor-page__content {
    color: #5d4037;
}
body.theme-sepia .neurotutor-page__dock {
    background: rgba(254, 249, 231, 0.95);
    border-color: #d4a574;
}

/* ==================== THEME-LIGHT INVERSIONS ==================== */
/* Since dark IS the default, body.theme-light inverts to light mode */
body.theme-light .difficulty-modal { background: rgba(255, 255, 255, 0.95); }
body.theme-light .difficulty-title { color: #1e293b; }
body.theme-light .difficulty-subtitle { color: #64748b; }
body.theme-light .difficulty-card { background: rgba(0, 0, 0, 0.03); border-color: #e2e8f0; }
body.theme-light .difficulty-label { color: #1e293b; }
body.theme-light .difficulty-desc { color: #6b7280; }

body.theme-light .finetune-card { background: white; border-color: #e2e8f0; }
body.theme-light .finetune-title { color: #1e293b; }
body.theme-light .finetune-close { background: #f1f5f9; color: #64748b; }
body.theme-light .finetune-instructions { color: #64748b; }
body.theme-light .finetune-words-container { background: #f8fafc; border-color: #e2e8f0; }
body.theme-light .finetune-word { border-color: #e2e8f0; background: white; color: #94a3b8; }
body.theme-light .finetune-word.selected { background: #dcfce7; border-color: #22c55e; color: #166534; }
body.theme-light .finetune-stats { color: #64748b; }
body.theme-light .finetune-stat strong { color: #0ea5e9; }
body.theme-light .finetune-btn-secondary { background: white; border-color: #e2e8f0; color: #64748b; }

body.theme-light .retention-card { background: white; border-color: #e2e8f0; }
body.theme-light .retention-header h2,
body.theme-light .retention-header h3 { color: #1e293b; }
body.theme-light .retention-header p { color: #64748b; }
body.theme-light .retention-text { background: #f8fafc; border-color: #e2e8f0; color: #334155; }
body.theme-light .retention-blank { background: #eef2ff; border-color: #6366f1; color: #6366f1; }
body.theme-light .retention-option { background: linear-gradient(135deg, #f1f5f9, #e2e8f0); border-color: #cbd5e1; color: #334155; }
body.theme-light .retention-options-wrapper { background: white; }
body.theme-light .retention-btn-secondary { background: #f1f5f9; color: #64748b; }

body.theme-light .help-modal-content { background: white; color: #1e293b; }
body.theme-light .help-modal-header { border-color: #e5e7eb; color: #1e293b; }
body.theme-light .help-modal-close { background: #f3f4f6; color: #64748b; }
body.theme-light .help-section { border-color: #f3f4f6; }
body.theme-light .help-section h4 { color: #4f46e5; }
body.theme-light .help-section p { color: #6b7280; }
body.theme-light .help-modal-footer { border-color: #e5e7eb; }

body.theme-light .clipboard-more-content { background: white; color: #1e293b; }
body.theme-light .clipboard-more-header { border-color: #e5e7eb; }
body.theme-light .clipboard-more-close { background: #f3f4f6; color: #64748b; }
body.theme-light .clipboard-more-label { color: #6b7280; }
body.theme-light .clipboard-more-btn { background: #f3f4f6; color: #1f2937; }
body.theme-light .clipboard-more-btn:hover { background: #e5e7eb; }
body.theme-light .clipboard-more-value { color: #1f2937; }

body.theme-light .pdf-more-content { background: white; color: #1e293b; }
body.theme-light .pdf-more-header { border-color: #e5e7eb; }
body.theme-light .pdf-more-close { background: #f3f4f6; color: #64748b; }
body.theme-light .pdf-more-label { color: #6b7280; }
body.theme-light .pdf-more-btn { background: #f3f4f6; color: #1f2937; }
body.theme-light .pdf-more-btn:hover { background: #e5e7eb; }
body.theme-light .pdf-more-value { color: #1f2937; }

body.theme-light .neuro-dock { background: rgba(255, 255, 255, 0.85); border-color: #e2e8f0; }
body.theme-light .neuro-dock .dock-btn { color: #64748b; }
body.theme-light .neuro-dock .dock-btn:hover { background: rgba(6, 214, 160, 0.08); color: #0ea5e9; }
body.theme-light .neuro-dock .dock-divider { background: #e2e8f0; }

body.theme-light .tutorial-card-v3 { background: white; }
body.theme-light .tutorial-card-v3 h3 { color: #1e293b; }
body.theme-light .tutorial-card-v3 p { color: #6b7280; }
body.theme-light .tutorial-card-header-v3 button { background: #f3f4f6; color: #6b7280; }

body.theme-light #tutorial-card-v3 { background: white; border-color: #e2e8f0; color: #1e293b; }
body.theme-light #tutorial-card-v3 .tut-title { color: #1e293b; }
body.theme-light #tutorial-card-v3 .tut-text { color: #64748b; }
body.theme-light #tutorial-card-v3 .tut-skip { border-color: #e2e8f0; color: #64748b; }
body.theme-light #tutorial-card-v3 .tut-icon { background: linear-gradient(135deg, #eef2ff, #e0e7ff); }
body.theme-light #tut-v3-close { color: #94a3b8; }
body.theme-light #tut-v3-close:hover { background: rgba(0, 0, 0, 0.05); color: #64748b; }

body.theme-light .column-mode-btn { background: #f3f4f6; color: #1e293b; }
body.theme-light .column-mode-btn:hover { background: #e5e7eb; }
body.theme-light .column-mode-btn.active { background: #eef2ff; }

body.theme-light .tutorial-card-v4 { background: white; border-color: #e2e8f0; }
body.theme-light .tutorial-card-title { color: #1e293b; }
body.theme-light .tutorial-card-text { color: #6b7280; }
body.theme-light .tutorial-step-counter { background: #fff7ed; color: #f97316; }
body.theme-light .tutorial-skip-btn { background: #f3f4f6; color: #6b7280; }
body.theme-light .tutorial-hotspot-label { background: linear-gradient(135deg, #1e293b, #334155); }

body.theme-light .user-name { color: #1e293b; }
body.theme-light .user-level { color: #64748b; }

/* Theme light: Text selection tooltip */
body.theme-light .neuro-explain-btn {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(5, 150, 105, 0.2);
    color: #1e293b;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 0 12px rgba(5, 150, 105, 0.15);
}
body.theme-light .neuro-explain-btn:hover {
    background: rgba(240, 245, 255, 0.98);
    border-color: #059669;
    color: #059669;
}
body.theme-light .neuro-explain-label {
    background: linear-gradient(135deg, #059669, #0284c7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Theme light: Region counter badge */
body.theme-light .region-counter-badge {
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 2px 12px rgba(5, 150, 105, 0.25);
}

/* Theme light: selection highlight */
body.theme-light .word-block::selection,
body.theme-light .word-block *::selection {
    background: rgba(5, 150, 105, 0.3);
}
body.theme-light .word-block.reflow-word::selection {
    background: rgba(5, 150, 105, 0.3);
    color: #1e293b;
}

/* Theme sepia: Text selection tooltip */
body.theme-sepia .neuro-explain-btn {
    background: rgba(254, 243, 199, 0.95);
    border-color: rgba(217, 119, 6, 0.2);
    color: #78350f;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 0 12px rgba(217, 119, 6, 0.1);
}
body.theme-sepia .neuro-explain-btn:hover {
    background: rgba(254, 243, 199, 1);
    border-color: #d97706;
    color: #d97706;
}
body.theme-sepia .neuro-explain-label {
    background: linear-gradient(135deg, #d97706, #b45309);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Theme sepia: selection highlight */
body.theme-sepia .word-block::selection,
body.theme-sepia .word-block *::selection {
    background: rgba(217, 119, 6, 0.25);
}
body.theme-sepia .word-block.reflow-word::selection {
    background: rgba(217, 119, 6, 0.25);
    color: #78350f;
}

/* Theme light: Clipboard zen bar */
body.theme-light .clipboard-zen-bar {
    background: rgba(255, 255, 255, 0.9);
    border-color: #e2e8f0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
body.theme-light .clipboard-zen-bar .zen-btn {
    color: #64748b;
    background: #f8fafc;
}
body.theme-light .clipboard-zen-bar .zen-btn:hover {
    background: #f1f5f9;
    color: #059669;
}
body.theme-light .clipboard-zen-bar .zen-divider {
    background: #e2e8f0;
}

/* Theme sepia: Clipboard zen bar */
body.theme-sepia .clipboard-zen-bar {
    background: rgba(254, 243, 199, 0.9);
    border-color: rgba(217, 119, 6, 0.15);
}
body.theme-sepia .clipboard-zen-bar .zen-btn {
    color: #78350f;
    background: rgba(254, 243, 199, 0.5);
}
body.theme-sepia .clipboard-zen-bar .zen-btn:hover {
    background: rgba(217, 119, 6, 0.1);
    color: #d97706;
}

/* ==================== THEME-LIGHT: Elementos com bg hardcoded escuro ==================== */

/* Page Navigator */
body.theme-light .page-navigator {
    background: rgba(255, 255, 255, 0.95);
    border-color: #e2e8f0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
body.theme-light .page-nav-btn {
    background: #f1f5f9;
    color: #334155;
}
body.theme-light .page-nav-btn:hover {
    background: #e2e8f0;
    color: #059669;
}
body.theme-light .page-nav-display {
    color: #1e293b;
    background: #f8fafc;
    border-color: #cbd5e1;
}
body.theme-light .page-nav-display:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

/* Ruler Controls */
body.theme-light .ruler-controls {
    background: rgba(255, 255, 255, 0.95);
    border-color: #e2e8f0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
body.theme-light .ruler-controls button {
    background: #f1f5f9;
    color: #334155;
}
body.theme-light .ruler-controls button:hover {
    background: #e2e8f0;
    color: #059669;
}
body.theme-light .ruler-controls .ruler-size {
    color: #64748b;
}
body.theme-light .ruler-controls .ruler-separator {
    border-color: #e2e8f0;
}
body.theme-light .ruler-controls .ruler-btn-close {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #dc2626 !important;
}
body.theme-light .ruler-controls .ruler-btn-close:hover {
    background: rgba(239, 68, 68, 0.2) !important;
}

/* Page Input Modal */
body.theme-light .page-input-modal {
    background: rgba(255, 255, 255, 0.5);
}
body.theme-light .page-input-content {
    background: white;
    border-color: #e2e8f0;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Selection Mode Bar (Sniper) — keep orange gradient for visibility */

/* NeuroTutor tooltip (neuro-glass) */
body.theme-light .neurotutor-tooltip.neuro-glass {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}
body.theme-light .neurotutor-tooltip.neuro-glass .neurotutor-tooltip-btn {
    color: #334155;
}
body.theme-light .neurotutor-tooltip.neuro-glass .neurotutor-tooltip-btn:hover {
    background: #f1f5f9;
    color: #059669;
}

/* NeuroTutor Panel — light theme */
body.theme-light .neurotutor-header {
    background: rgba(248, 250, 252, 0.9);
    border-color: #e2e8f0;
}
body.theme-light .neurotutor-title {
    color: #059669;
}
body.theme-light .neurotutor-btn-icon {
    color: #64748b;
}
body.theme-light .neurotutor-btn-icon:hover {
    color: #1e293b;
    background: rgba(0, 0, 0, 0.05);
}
body.theme-light .neurotutor-close-btn {
    color: #334155;
    background: rgba(0, 0, 0, 0.05);
}
body.theme-light .neurotutor-close-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}
body.theme-light .neurotutor-select {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #1e293b;
}
body.theme-light .neurotutor-body {
    color: #1e293b;
}
body.theme-light .neurotutor-welcome {
    color: #64748b;
}
body.theme-light .neurotutor-welcome h3 {
    color: #1e293b;
}
body.theme-light #nt-question-input {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #1e293b;
}
body.theme-light #nt-chat-input {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #1e293b;
}
body.theme-light .nt-mode-tabs {
    background: #f8fafc;
    border-color: #e2e8f0;
}
body.theme-light .nt-tab {
    color: #94a3b8;
}
body.theme-light .nt-tab:hover {
    background: #f1f5f9;
    color: #64748b;
}
body.theme-light .nt-tab.active {
    background: white;
    color: #059669;
    border-color: rgba(5, 150, 105, 0.2);
}
body.theme-light .nt-tldr {
    background: rgba(5, 150, 105, 0.05);
    border-color: rgba(5, 150, 105, 0.12);
}
body.theme-light .nt-analogy {
    background: rgba(14, 165, 233, 0.05);
    border-color: rgba(14, 165, 233, 0.1);
}
body.theme-light .neurotutor-overlay {
    background: rgba(0, 0, 0, 0.15);
}

/* ==================== THEME-SEPIA: Elementos com bg hardcoded escuro ==================== */

body.theme-sepia .page-navigator {
    background: rgba(254, 243, 199, 0.95);
    border-color: rgba(217, 119, 6, 0.15);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
body.theme-sepia .page-nav-btn {
    background: rgba(254, 243, 199, 0.5);
    color: #78350f;
}
body.theme-sepia .page-nav-btn:hover {
    background: rgba(217, 119, 6, 0.1);
    color: #d97706;
}
body.theme-sepia .page-nav-display {
    color: #78350f;
    background: rgba(254, 243, 199, 0.5);
    border-color: rgba(217, 119, 6, 0.2);
}

body.theme-sepia .ruler-controls {
    background: rgba(254, 243, 199, 0.95);
    border-color: rgba(217, 119, 6, 0.15);
}
body.theme-sepia .ruler-controls button {
    background: rgba(254, 243, 199, 0.5);
    color: #78350f;
}
body.theme-sepia .ruler-controls button:hover {
    background: rgba(217, 119, 6, 0.1);
    color: #d97706;
}
body.theme-sepia .ruler-controls .ruler-size {
    color: #92400e;
}
body.theme-sepia .ruler-controls .ruler-separator {
    border-color: rgba(217, 119, 6, 0.15);
}

body.theme-sepia .page-input-modal {
    background: rgba(254, 243, 199, 0.5);
}

body.theme-sepia .neurotutor-tooltip.neuro-glass {
    background: rgba(254, 243, 199, 0.95) !important;
    border-color: rgba(217, 119, 6, 0.2) !important;
}
body.theme-sepia .neurotutor-tooltip.neuro-glass .neurotutor-tooltip-btn {
    color: #78350f;
}
body.theme-sepia .neurotutor-tooltip.neuro-glass .neurotutor-tooltip-btn:hover {
    background: rgba(217, 119, 6, 0.1);
    color: #d97706;
}

body.theme-sepia .neurotutor-header {
    background: rgba(254, 243, 199, 0.8);
    border-color: rgba(217, 119, 6, 0.1);
}
body.theme-sepia .neurotutor-title {
    color: #d97706;
}
body.theme-sepia .neurotutor-body {
    color: #78350f;
}
body.theme-sepia .nt-mode-tabs {
    background: rgba(254, 243, 199, 0.7);
    border-color: rgba(217, 119, 6, 0.1);
}
body.theme-sepia .nt-tab {
    color: #92400e;
}
body.theme-sepia .nt-tab.active {
    background: rgba(254, 243, 199, 0.9);
    color: #d97706;
    border-color: rgba(217, 119, 6, 0.2);
}
body.theme-sepia #nt-question-input {
    background: rgba(254, 243, 199, 0.5);
    border: 1px solid rgba(217, 119, 6, 0.15);
    color: #78350f;
}
body.theme-sepia #nt-chat-input {
    background: rgba(254, 243, 199, 0.5);
    border: 1px solid rgba(217, 119, 6, 0.15);
    color: #78350f;
}

/* Theme light: Handle bar + Bottom Sheet */
body.theme-light .neurotutor-handle-bar::before {
    background: rgba(0, 0, 0, 0.15);
}
body.theme-light .neurotutor-handle-bar:active::before {
    background: #059669;
}
body.theme-light .neurotutor-panel {
    background: rgba(255, 255, 255, 0.98);
    color: #1e293b;
    border-left: 1px solid #e2e8f0;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1);
}

body.theme-sepia .neurotutor-handle-bar::before {
    background: rgba(120, 53, 15, 0.15);
}
body.theme-sepia .neurotutor-handle-bar:active::before {
    background: #d97706;
}
body.theme-sepia .neurotutor-panel {
    background: rgba(254, 243, 199, 0.98);
    color: #78350f;
    border-left: 1px solid rgba(217, 119, 6, 0.15);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1);
}

/* ==================== NEUROTUTOR UPGRADE — MODE TABS ==================== */

.nt-mode-tabs {
    display: flex;
    gap: 2px;
    padding: 0 12px 8px;
    background: var(--neuro-bg-deep);
    border-bottom: 1px solid var(--neuro-border);
}

.nt-tab {
    flex: 1;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--neuro-text-muted);
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
    text-align: center;
}

.nt-tab:hover {
    background: var(--neuro-bg-surface);
    color: var(--neuro-text-secondary);
}

.nt-tab.active {
    background: var(--neuro-bg-surface);
    color: var(--neuro-cyan);
    border: 1px solid var(--neuro-border-glow);
    font-weight: 600;
}

/* ==================== NEUROTUTOR — ADHD RESPONSE FORMAT ==================== */

.nt-adhd-response {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}

.nt-tldr {
    background: rgba(6, 214, 160, 0.08);
    border: 1px solid rgba(6, 214, 160, 0.15);
    border-radius: 12px;
    padding: 12px 16px;
}

.nt-tldr p {
    color: var(--neuro-text-primary);
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 500;
    margin: 8px 0 0 0;
    line-height: 1.5;
}

.nt-bullets {
    padding: 0 4px;
}

.nt-bullets h4 {
    color: var(--neuro-text-secondary);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.nt-bullets ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nt-bullets li {
    color: var(--neuro-text-primary);
    font-size: 14px;
    line-height: 1.5;
    padding-left: 20px;
    position: relative;
}

.nt-bullets li::before {
    content: "▸";
    position: absolute;
    left: 4px;
    color: var(--neuro-cyan);
    font-weight: bold;
}

.nt-analogy {
    background: rgba(14, 165, 233, 0.08);
    border: 1px solid rgba(14, 165, 233, 0.15);
    border-radius: 12px;
    padding: 12px 16px;
}

.nt-analogy p {
    color: var(--neuro-text-primary);
    font-style: italic;
    font-size: 14px;
    line-height: 1.5;
    margin: 8px 0 0 0;
}

.nt-badge {
    display: inline-block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--neuro-bg-surface);
    color: var(--neuro-cyan);
    border: 1px solid var(--neuro-border-glow);
}

.nt-analogy .nt-badge {
    color: var(--neuro-blue);
    border-color: rgba(14, 165, 233, 0.2);
}

/* ==================== NEUROTUTOR — QUIZ UI ==================== */

.nt-quiz {
    padding: 16px;
    animation: neuro-reveal 0.3s ease;
}

.nt-quiz-question {
    color: var(--neuro-text-primary);
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    padding: 16px;
    background: var(--neuro-bg-raised);
    border-radius: 12px;
    border: 1px solid var(--neuro-border);
    margin-bottom: 16px;
}

.nt-quiz-question p {
    margin: 0 0 8px 0;
}

.nt-quiz-question p:last-child {
    margin-bottom: 0;
}

.nt-quiz-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.nt-quiz-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: var(--neuro-bg-surface);
    border: 1px solid var(--neuro-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    width: 100%;
    color: var(--neuro-text-primary);
    font-family: 'Outfit', sans-serif;
}

.nt-quiz-option:hover:not(:disabled) {
    background: var(--neuro-bg-hover);
    border-color: var(--neuro-border-glow);
    transform: translateX(4px);
}

.nt-quiz-option.selected {
    border-color: var(--neuro-blue);
    background: rgba(14, 165, 233, 0.1);
}

.nt-quiz-option.correct {
    border-color: var(--neuro-green) !important;
    background: rgba(34, 197, 94, 0.12) !important;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.2);
}

.nt-quiz-option.wrong {
    border-color: var(--neuro-red) !important;
    background: rgba(239, 68, 68, 0.12) !important;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.2);
}

.nt-quiz-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 8px;
    background: var(--neuro-bg-raised);
    border: 1px solid var(--neuro-border);
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--neuro-cyan);
    transition: all 0.2s;
}

.nt-quiz-option:hover:not(:disabled) .nt-quiz-letter {
    background: var(--neuro-cyan);
    color: var(--neuro-bg-deep);
    border-color: var(--neuro-cyan);
}

.nt-quiz-option.correct .nt-quiz-letter {
    background: var(--neuro-green);
    color: white;
    border-color: var(--neuro-green);
}

.nt-quiz-option.wrong .nt-quiz-letter {
    background: var(--neuro-red);
    color: white;
    border-color: var(--neuro-red);
}

.nt-quiz-text {
    font-size: 14px;
    line-height: 1.5;
    padding-top: 3px;
}

.nt-quiz-actions {
    text-align: center;
    margin-bottom: 16px;
}

.nt-quiz-panic {
    background: transparent;
    border: 1px dashed var(--neuro-text-muted);
    color: var(--neuro-text-secondary);
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    transition: all 0.2s;
}

.nt-quiz-panic:hover {
    border-color: var(--neuro-amber);
    color: var(--neuro-amber);
    background: rgba(245, 158, 11, 0.05);
}

.nt-quiz-feedback {
    animation: neuro-reveal 0.3s ease;
    margin-top: 16px;
}

.nt-quiz-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 12px;
}

.nt-quiz-result.correct {
    background: rgba(34, 197, 94, 0.12);
    color: var(--neuro-green);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.nt-quiz-result.wrong {
    background: rgba(239, 68, 68, 0.12);
    color: var(--neuro-red);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.nt-quiz-xp {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--neuro-gold);
    animation: neuro-float-up 1.5s ease forwards;
}

.nt-quiz-explanation {
    padding: 16px;
    background: var(--neuro-bg-raised);
    border-radius: 12px;
    border: 1px solid var(--neuro-border);
    color: var(--neuro-text-primary);
    font-size: 14px;
    line-height: 1.6;
}

.nt-quiz-explanation p {
    margin: 0 0 8px 0;
}

.nt-quiz-explanation strong {
    color: var(--neuro-cyan);
}

/* ==================== NEUROTUTOR — PRIVACY BADGE ==================== */

.nt-privacy-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    color: var(--neuro-text-muted);
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 20px;
    border: 1px solid var(--neuro-border);
    margin-top: 8px;
}

/* ==================== NEUROTUTOR — IMPROVED TOOLTIP ==================== */

.neurotutor-tooltip.neuro-glass {
    background: rgba(12, 16, 33, 0.9) !important;
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border: 1px solid var(--neuro-border-glow) !important;
    border-radius: 12px !important;
    padding: 6px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px var(--neuro-cyan-glow) !important;
    display: flex;
    gap: 4px;
    animation: neuro-reveal 0.2s ease;
}

.neurotutor-tooltip.neuro-glass .neurotutor-tooltip-btn {
    background: transparent;
    border: none;
    color: var(--neuro-text-primary);
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s;
    white-space: nowrap;
}

.neurotutor-tooltip.neuro-glass .neurotutor-tooltip-btn:hover {
    background: var(--neuro-bg-surface);
    color: var(--neuro-cyan);
}

/* ==================== NEUROTUTOR — BRAIN BUTTON (Zen Bar / Reflow) ==================== */

.nt-brain-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    background: var(--neuro-bg-surface);
    border: 1px solid var(--neuro-border-glow);
    cursor: pointer;
    font-size: 20px;
    transition: all 0.2s;
    animation: neuro-pulse 3s infinite;
}

.nt-brain-btn:hover {
    background: var(--neuro-bg-hover);
    border-color: var(--neuro-cyan);
    box-shadow: 0 0 16px var(--neuro-cyan-glow);
    transform: scale(1.05);
}

.nt-brain-btn:active {
    transform: scale(0.95);
}

/* ==================== TEXT SELECTION TOOLTIP — Neuro-Futurista ==================== */

.neuro-selection-tooltip {
    position: fixed;
    z-index: 10000;
    display: none;
    opacity: 0;
    transform: translateY(4px) scale(0.95);
    transition: opacity 0.12s ease, transform 0.12s ease;
    pointer-events: none;
    filter: drop-shadow(0 4px 20px rgba(124, 58, 237, 0.3));
}

.neuro-selection-tooltip.visible {
    display: block;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.neuro-explain-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--neuro-border-glow);
    border-radius: 12px;
    background: rgba(12, 16, 33, 0.92);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    color: var(--neuro-text-primary, #e2e8f0);
    font-size: 13px;
    font-weight: 600;
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    cursor: pointer;
    white-space: nowrap;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.4),
        0 0 20px var(--neuro-cyan-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: all 0.2s ease;
    animation: neuro-reveal 0.25s ease;
}

.neuro-explain-btn:hover {
    background: rgba(20, 26, 50, 0.95);
    border-color: var(--neuro-cyan);
    color: var(--neuro-cyan);
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.5),
        0 0 30px var(--neuro-cyan-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.neuro-explain-btn:active {
    transform: scale(0.96);
}

.neuro-explain-icon {
    font-size: 16px;
    line-height: 1;
    filter: drop-shadow(0 0 4px var(--neuro-cyan-glow));
}

.neuro-explain-label {
    background: linear-gradient(135deg, var(--neuro-cyan), var(--neuro-purple, #a78bfa));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ==================== SELECTION TOOLBAR — Nova barra expandida ==================== */

.neuro-selection-toolbar {
    display: flex;
    /* Permite wrap em telas estreitas — antes era 1 linha forçada, 5
       botões × min 60px + gaps = 328px mínimo, cortava labels Flashcard
       e Destacar fora da tela em iPhone SE/Galaxy 320-360px. Bug
       reportado por user ("nomes dos itens de seleção fora da tela"). */
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    padding: 6px;
    background: rgba(12, 16, 33, 0.95);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border: 1px solid var(--neuro-border-glow);
    border-radius: 14px;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.4),
        0 0 20px var(--neuro-cyan-glow);
    /* Cap pra não ficar 1 botão por linha em telas muito estreitas */
    max-width: min(420px, calc(100vw - 24px));
}

.neuro-toolbar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--neuro-text-secondary);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 60px;
    /* Touch target ≥ 44×44 (WCAG 2.5.5). Antes era ~44 com padding,
       formal min-height garante mesmo se texto encolher. */
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}
/* Telas muito estreitas (<360px): encolhe padding pra caber 3 por linha */
@media (max-width: 360px) {
    .neuro-toolbar-btn {
        padding: 6px 8px;
        min-width: 56px;
    }
    .neuro-toolbar-label {
        font-size: 9px;
    }
}

.neuro-toolbar-btn:hover {
    background: rgba(139, 92, 246, 0.15);
    color: var(--neuro-text-primary);
}

.neuro-toolbar-btn:active {
    transform: scale(0.95);
}

.neuro-toolbar-icon {
    font-size: 18px;
    line-height: 1;
}

.neuro-toolbar-label {
    font-size: 10px;
    white-space: nowrap;
}

/* ==================== SELECTION PANEL — Painel de questões ==================== */

.neuro-selection-panel {
    /* Antes era width: 300px fixo. Em viewports < 320px (iPhone SE 1ª gen
       em browsers que renderizam <320), panel cortava na borda. min() garante
       respiro de 12px cada lado em qualquer largura. */
    width: min(300px, calc(100vw - 24px));
    background: rgba(12, 16, 33, 0.98);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border: 1px solid var(--neuro-border-glow);
    border-radius: 16px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 30px var(--neuro-cyan-glow);
    overflow: hidden;
}

.neuro-selection-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(99, 102, 241, 0.1));
    border-bottom: 1px solid var(--neuro-border);
    font-weight: 600;
    font-size: 14px;
    color: var(--neuro-text-primary);
}

.neuro-selection-panel__close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--neuro-text-muted);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.neuro-selection-panel__close:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.neuro-selection-panel__content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.neuro-selection-panel__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.neuro-selection-panel__field label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--neuro-text-muted);
}

.neuro-selection-panel__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.neuro-panel-chip {
    padding: 6px 12px;
    border: 1px solid var(--neuro-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--neuro-text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.neuro-panel-chip:hover {
    border-color: rgba(139, 92, 246, 0.4);
    background: rgba(139, 92, 246, 0.1);
}

.neuro-panel-chip.active {
    border-color: var(--neuro-cyan);
    background: rgba(6, 214, 160, 0.15);
    color: var(--neuro-cyan);
}

/* Gabarito toggle pair */
.neuro-selection-panel__toggle-pair {
    display: flex;
    gap: 8px;
}

.neuro-toggle-btn {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--neuro-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--neuro-text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.neuro-toggle-btn--green:hover,
.neuro-toggle-btn--green.active {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.neuro-toggle-btn--red:hover,
.neuro-toggle-btn--red.active {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* Gabarito alternativas grid */
.neuro-selection-panel__alt-grid {
    display: flex;
    gap: 8px;
}

.neuro-alt-btn {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--neuro-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--neuro-text-secondary);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.neuro-alt-btn:hover {
    border-color: rgba(139, 92, 246, 0.4);
    background: rgba(139, 92, 246, 0.1);
}

.neuro-alt-btn.active {
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
}

/* Submit button */
.neuro-selection-panel__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: white;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.neuro-selection-panel__submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}

.neuro-selection-panel__submit:active {
    transform: scale(0.98);
}

/* ── Dict Popup Inline (1 palavra) ─────────────────────────── */
.neuro-dict-popup {
    padding: 14px 16px;
    max-width: 320px;
    min-width: 220px;
    background: rgba(12, 16, 33, 0.95);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border: 1px solid var(--neuro-border-glow, rgba(6, 214, 160, 0.15));
    border-radius: 14px;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.5),
        0 0 20px var(--neuro-cyan-glow, rgba(6, 214, 160, 0.08));
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
}

.neuro-dict-popup__loading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--neuro-text-secondary, #94a3b8);
    font-size: 13px;
    padding: 4px 0;
}

.neuro-dict-popup__spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(6, 214, 160, 0.3);
    border-top-color: var(--neuro-cyan, #06d6a0);
    border-radius: 50%;
    animation: neuro-dict-spin 0.6s linear infinite;
    flex-shrink: 0;
}

@keyframes neuro-dict-spin {
    to { transform: rotate(360deg); }
}

.neuro-dict-popup__word {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--neuro-cyan, #06d6a0);
    margin-bottom: 8px;
}

.neuro-dict-popup__defs {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--neuro-text-primary, #e2e8f0);
    max-height: 180px;
    overflow-y: auto;
}

.neuro-dict-popup__defs li {
    margin-bottom: 4px;
}

.neuro-dict-popup__empty {
    font-size: 13px;
    color: var(--neuro-text-secondary, #94a3b8);
    margin: 4px 0 8px;
}

.neuro-dict-popup__actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.neuro-dict-popup__btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    padding: 4px;
    border-radius: 6px;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.neuro-dict-popup__btn:hover {
    opacity: 1;
}

.neuro-dict-popup__more {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(6, 214, 160, 0.1);
    border: 1px solid rgba(6, 214, 160, 0.2);
    border-radius: 8px;
    color: var(--neuro-cyan, #06d6a0);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s, transform 0.1s;
}

.neuro-dict-popup__more:hover {
    background: rgba(6, 214, 160, 0.2);
}

.neuro-dict-popup__more:active {
    transform: scale(0.98);
}

.neuro-dict-popup__more--ia {
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(124, 58, 237, 0.25);
    color: var(--neuro-purple, #7c3aed);
}

.neuro-dict-popup__more--ia:hover {
    background: rgba(124, 58, 237, 0.2);
}

/* Mobile responsive */
@media (max-width: 480px) {
    .neuro-selection-toolbar {
        gap: 2px;
        padding: 4px;
    }

    .neuro-toolbar-btn {
        padding: 6px 8px;
        min-width: 50px;
    }

    .neuro-toolbar-icon {
        font-size: 16px;
    }

    .neuro-toolbar-label {
        font-size: 9px;
    }

    .neuro-selection-panel {
        width: calc(100vw - 32px);
        max-width: 320px;
    }

    .neuro-dict-popup {
        max-width: calc(100vw - 32px);
        min-width: 180px;
    }
}

/* Light theme */
body.theme-light .neuro-selection-toolbar,
body.theme-light .neuro-selection-panel {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

body.theme-light .neuro-toolbar-btn {
    color: #64748b;
}

body.theme-light .neuro-toolbar-btn:hover {
    background: rgba(139, 92, 246, 0.1);
    color: #1e293b;
}

body.theme-light .neuro-selection-panel__header {
    color: #1e293b;
}

body.theme-light .neuro-panel-chip,
body.theme-light .neuro-toggle-btn,
body.theme-light .neuro-alt-btn {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #64748b;
}

/* Light theme: dict popup */
body.theme-light .neuro-dict-popup {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

body.theme-light .neuro-dict-popup__word {
    color: #059669;
}

body.theme-light .neuro-dict-popup__defs {
    color: var(--neuro-text-primary, #1e293b);
}

body.theme-light .neuro-dict-popup__loading {
    color: #64748b;
}

body.theme-light .neuro-dict-popup__empty {
    color: #64748b;
}

body.theme-light .neuro-dict-popup__actions {
    border-top-color: rgba(0, 0, 0, 0.08);
}

body.theme-light .neuro-dict-popup__empty {
    color: #64748b;
}

/* ==================== TEXT SELECTION — Permitir seleção nos containers de leitura ==================== */

/* Clipboard/Reflow: permitir seleção de texto para IA */
#reflow-container,
#clipboard-content,
.clipboard-reader-container,
.reflow-container,
.words-wrapper {
    user-select: text !important;
    -webkit-user-select: text !important;
}

/* Word blocks no clipboard: permitir seleção */
.word-block.reflow-word {
    user-select: text !important;
    -webkit-user-select: text !important;
}

/* Credits badge animation */
.credits-updated {
    animation: credits-pulse 0.6s ease;
}

@keyframes credits-pulse {
    0% { transform: scale(1); }
    30% { transform: scale(1.3); color: var(--neuro-cyan); }
    100% { transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE-FIRST RESPONSIVE — NeuroTutor Bottom Sheet + FAB + PDF
   Breakpoint: 768px
   ═══════════════════════════════════════════════════════════════ */

/* Safe areas para iPhone notch/Dynamic Island */
:root {
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
}

/* Handle bar do Bottom Sheet (oculta no desktop) */
.neurotutor-handle-bar {
    display: none;
}

@media (max-width: 768px) {

    /* ==================== NEUROTUTOR BOTTOM SHEET ==================== */

    /* Handle bar visível no mobile */
    .neurotutor-handle-bar {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 0 4px;
        cursor: grab;
        touch-action: none;
        flex-shrink: 0;
    }

    .neurotutor-handle-bar::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.25);
        transition: background 0.2s, width 0.2s;
    }

    .neurotutor-handle-bar:active::before {
        width: 50px;
        background: var(--neuro-cyan, #06d6a0);
    }

    /* Painel transforma-se em Bottom Sheet */
    .neurotutor-panel {
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 85vh !important;
        max-height: calc(100vh - var(--safe-area-top) - 20px) !important;
        border-radius: 20px 20px 0 0 !important;
        border-left: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5) !important;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
        transform: translateY(100%) !important;
        padding-bottom: var(--safe-area-bottom) !important;
    }

    .neurotutor-panel-open {
        right: 0 !important;
        transform: translateY(0) !important;
    }

    /* Header compacto no mobile */
    .neurotutor-header {
        padding: 8px 16px !important;
    }

    .neurotutor-logo {
        font-size: 18px !important;
    }

    .neurotutor-title {
        font-size: 14px !important;
    }

    /* Tabs compactas */
    .nt-mode-tabs {
        padding: 0 8px 6px !important;
    }

    .nt-tab {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }

    /* Body com scroll suave */
    .neurotutor-body {
        padding: 12px !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    /* Input area — font >= 16px evita zoom no iOS */
    #nt-question-input {
        font-size: 16px !important;
    }

    #nt-chat-input {
        font-size: 16px !important;
    }

    .neurotutor-select {
        font-size: 14px !important;
    }

    /* Overlay adaptado para bottom sheet */
    .neurotutor-overlay.active {
        background: rgba(0, 0, 0, 0.5) !important;
    }

    /* ==================== FABs MOBILE — escalonados verticalmente ==================== */
    /* Stack: NeuroTutor (bottom) → Sniper (middle) → Auto-Select (top) */

    .neurotutor-fab {
        bottom: calc(80px + var(--safe-area-bottom)) !important;
        right: 16px !important;
        width: 48px !important;
        height: 48px !important;
        z-index: 55 !important;
    }

    .neurotutor-fab-icon {
        font-size: 20px !important;
    }

    .sniper-fab {
        /* Speed-dial sobe ACIMA do gatilho .selection-master-fab (bottom 200,
           56px → topo em 256). Antes Sniper ficava em 210 e SOBREPUNHA o gatilho
           (~46px de overlap). Stack: Sniper(270→318), Auto(340→388), Smart(410→458). */
        bottom: calc(270px + var(--safe-area-bottom)) !important;
        right: 16px !important;
        left: auto !important;
        width: 48px !important;
        height: 48px !important;
    }

    .auto-select-fab {
        bottom: calc(340px + var(--safe-area-bottom)) !important;
        right: 16px !important;
        left: auto !important;
        width: 48px !important;
        height: 48px !important;
    }

    .smart-hover-fab {
        bottom: calc(410px + var(--safe-area-bottom)) !important;
        right: 16px !important;
        left: auto !important;
        width: 48px !important;
        height: 48px !important;
    }

    /* ==================== SELECTION TOOLTIP MOBILE ==================== */

    /* Tooltip neuro-selection: max-width no mobile (posição inline via JS) */
    .neuro-selection-tooltip {
        max-width: calc(100vw - 32px);
    }

    /* Touch targets mínimo 44x44px */
    .neuro-explain-btn {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 10px 20px !important;
        font-size: 14px !important;
    }

    /* Tooltip do NeuroTutor centralizado */
    .neurotutor-tooltip.neuro-glass {
        left: 50% !important;
        transform: translateX(-50%) !important;
        max-width: calc(100vw - 32px);
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .neurotutor-tooltip-btn {
        min-height: 44px !important;
        padding: 10px 14px !important;
        font-size: 13px !important;
    }

    /* ==================== PDF VIEWER MOBILE ==================== */

    /* Permitir scroll horizontal quando o usuário aplicar zoom — sem ele,
       o canvas fica clipado e o conteúdo da direita some.
       overflow-y mantido em auto (vertical scroll padrão). */
    #pdf-container {
        overflow-x: auto !important;
        overflow-y: auto !important;
        padding: 4px !important;
        padding-bottom: calc(100px + var(--safe-area-bottom)) !important;
        -webkit-overflow-scrolling: touch;
    }

    #pdf-wrapper {
        min-width: unset !important;
        /* Sem width:100%/max-width:100% para que CSS transform: scale() não seja
           anulado pelo container. O wrapper pode crescer além do viewport
           quando o usuário aplica zoom; o overflow-x:auto do container permite
           que ele faça scroll horizontal. */
    }

    .page-wrapper {
        /* max-width removido: deixa o canvas renderizar no tamanho real do viewport
           dado pelo pdf-renderer (já calcula fit-width). Quando o usuário aplica
           zoom via transform, o page-wrapper escala junto sem clipar. */
    }

    .page-wrapper canvas {
        /* max-width removido: o pdf-renderer já dimensiona o canvas via style.width
           para fit-width. Forçar 100% aqui distorce o aspect-ratio quando o
           wrapper é escalado por transform: scale() (zoom). */
        height: auto !important;
    }

    /* Placeholder menor no mobile */
    .page-placeholder {
        min-height: 500px !important;
    }

    /* ==================== REGION COUNTER MOBILE ==================== */
    .region-counter-badge {
        bottom: calc(85px + var(--safe-area-bottom)) !important;
        left: 12px !important;
        font-size: 11px !important;
    }

    /* SNIPER / SELECT FABs — posições já definidas acima nos FABs MOBILE */

    /* ==================== MOBILE CONTROLS safe area ==================== */
    .mobile-controls {
        padding-bottom: calc(8px + var(--safe-area-bottom)) !important;
    }

    /* ==================== QUIZ OPTIONS MOBILE ==================== */
    .nt-quiz-option {
        padding: 14px 16px !important;
        min-height: 48px !important;
    }

    .nt-quiz-panic {
        min-height: 44px !important;
        padding: 12px 20px !important;
    }

    /* ==================== WELCOME COMPACT MOBILE ==================== */
    .neurotutor-welcome {
        padding: 20px 12px !important;
    }

    .neurotutor-welcome-icon {
        font-size: 36px !important;
    }

    /* ==================== CHAT MOBILE ==================== */
    .neurotutor-chat-input {
        padding: 8px !important;
    }

    .neurotutor-chat-input input {
        font-size: 16px !important;
    }
}

/* Smaller phones (< 480px) — extra compactness */
@media (max-width: 480px) {
    .neurotutor-panel {
        height: 90vh !important;
        border-radius: 16px 16px 0 0 !important;
    }

    .nt-tab {
        font-size: 10px !important;
        padding: 5px 6px !important;
    }

    .neurotutor-header-left {
        gap: 4px !important;
    }

    .neurotutor-credits {
        font-size: 10px !important;
        padding: 1px 6px !important;
    }

    /* Tooltip full width */
    .neurotutor-tooltip.neuro-glass {
        left: 8px !important;
        right: 8px !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
    }
}

/* ==================== BOTTOM SHEET DRAG STATES ==================== */
.neurotutor-panel.dragging {
    transition: none !important;
}

.neurotutor-panel.half-open {
    transform: translateY(55%) !important;
}

/* Snap points indicator (visual guide) */
@media (max-width: 768px) {
    .neurotutor-panel::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 40px;
        z-index: 1;
        /* Gradient sutil para indicar área "grabbable" */
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.03), transparent);
        border-radius: 20px 20px 0 0;
        pointer-events: none;
    }
}

/* ==================== LANDSCAPE MOBILE ==================== */
@media (max-height: 500px) and (orientation: landscape) {
    .neurotutor-panel {
        height: 95vh !important;
        max-height: 95vh !important;
    }

    .neurotutor-welcome {
        padding: 8px !important;
    }

    .neurotutor-welcome-icon {
        font-size: 24px !important;
        margin-bottom: 4px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   DEBUG MODE - Visual Z-Index & Layout Debugging
   Ativar: document.body.classList.add('debug-ui')
   Desativar: document.body.classList.remove('debug-ui')
   ═══════════════════════════════════════════════════════════════ */

/* Outline all elements */
body.debug-ui * {
    outline: 1px solid rgba(255, 0, 0, 0.08) !important;
}

/* Containers de Layout - Borda Vermelha */
body.debug-ui .pdf-container,
body.debug-ui #pdf-container,
body.debug-ui .app-layout,
body.debug-ui .header,
body.debug-ui .main-content,
body.debug-ui .sidebar {
    outline: 2px dashed red !important;
    outline-offset: -2px;
}

/* Botoes e Elementos Clicaveis - Borda Verde */
body.debug-ui button,
body.debug-ui [role="button"],
body.debug-ui .fab,
body.debug-ui [onclick],
body.debug-ui .neurotutor-fab,
body.debug-ui .sniper-fab,
body.debug-ui .auto-select-fab,
body.debug-ui .smart-hover-fab,
body.debug-ui #dash-avatar-btn {
    outline: 2px solid lime !important;
    outline-offset: -1px;
}

/* Elementos com Z-Index Alto - Fundo Amarelo Transparente */
body.debug-ui .neurotutor-panel,
body.debug-ui .dash-overlay,
body.debug-ui .login-overlay,
body.debug-ui .modal,
body.debug-ui [class*="-modal"],
body.debug-ui [class*="-overlay"] {
    background-color: rgba(255, 255, 0, 0.1) !important;
}

/* Backdrops - Fundo Roxo */
body.debug-ui .backdrop,
body.debug-ui [class*="backdrop"],
body.debug-ui .neurotutor-backdrop {
    background-color: rgba(128, 0, 255, 0.3) !important;
}

/* Labels de Camada - Mostrar Z-Index */
body.debug-ui .neurotutor-panel::after,
body.debug-ui .dash-overlay::after,
body.debug-ui .login-overlay::after {
    position: fixed;
    top: 4px;
    left: 4px;
    background: rgba(0, 0, 0, 0.9);
    color: #ffff00;
    font-family: monospace;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 999999;
    pointer-events: none;
}

body.debug-ui .neurotutor-panel::after {
    content: "PANEL z:9001";
}

body.debug-ui .dash-overlay::after {
    content: "DASHBOARD z:10001";
}

body.debug-ui .login-overlay::after {
    content: "LOGIN z:10050";
}

/* FABs - Mostrar nome */
body.debug-ui .neurotutor-fab::after {
    content: "FAB-BRAIN z:9998";
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    background: black;
    color: lime;
    padding: 1px 4px;
    border-radius: 2px;
    white-space: nowrap;
}

body.debug-ui .sniper-fab::after {
    content: "FAB-SNIPER z:56";
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    background: black;
    color: lime;
    padding: 1px 4px;
    border-radius: 2px;
    white-space: nowrap;
}

body.debug-ui .smart-hover-fab::after {
    content: "FAB-HOVER z:58";
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    background: black;
    color: lime;
    padding: 1px 4px;
    border-radius: 2px;
    white-space: nowrap;
}

/* Highlight interacao bloqueada */
body.debug-ui .neurotutor-panel.open ~ #pdf-container {
    filter: grayscale(0.5) !important;
    opacity: 0.5 !important;
}

body.debug-ui .dash-overlay.visible ~ * {
    filter: grayscale(0.3) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOLOGRAPHIC MODE (TEST MODE) - Visual QA sem custos de API
   Ativado via: ?test_mode=true na URL
   ═══════════════════════════════════════════════════════════════════════════ */

.holographic-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 36px;
    background: linear-gradient(
        90deg,
        rgba(124, 58, 237, 0.95) 0%,
        rgba(168, 85, 247, 0.95) 50%,
        rgba(124, 58, 237, 0.95) 100%
    );
    background-size: 200% 100%;
    animation: holographicGradient 3s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 99999;
    font-family: 'Space Grotesk', sans-serif;
    box-shadow:
        0 2px 20px rgba(124, 58, 237, 0.5),
        inset 0 -1px 0 rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@keyframes holographicGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.holographic-icon {
    font-size: 18px;
    animation: holographicPulse 2s ease-in-out infinite;
}

@keyframes holographicPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

.holographic-text {
    color: white;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.holographic-desc {
    color: rgba(255, 255, 255, 0.75);
    font-size: 11px;
    font-weight: 400;
    font-family: 'Outfit', sans-serif;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.holographic-close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.holographic-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.1);
}

/*
 * TEST MODE: Visualmente idêntico ao modo real.
 * O banner é um overlay fixo no topo.
 * A única diferença são as chamadas de API mockadas.
 */

/* Mobile responsiveness para o banner */
@media (max-width: 640px) {
    .holographic-banner {
        height: 32px;
        gap: 8px;
    }

    .holographic-text {
        font-size: 11px;
        letter-spacing: 0.05em;
    }

    .holographic-desc {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ASSISTIVE TEXT - Leitura Karaoke no NeuroTutor
   Suporta régua, highlight palavra-a-palavra, controles de velocidade
   ═══════════════════════════════════════════════════════════════════════════ */

/* Container principal */
.neuro-assistive-text {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--neuro-text-primary);
}

/* Cada palavra processada */
.neuro-word {
    display: inline;
    padding: 2px 0;
    border-radius: 3px;
    transition: all 0.15s ease;
    cursor: default;
}

/* Palavra ativa (karaoke highlight) */
.neuro-word-active {
    background: linear-gradient(135deg, var(--neuro-cyan), var(--neuro-blue)) !important;
    color: var(--neuro-bg-deep) !important;
    font-weight: 600;
    padding: 2px 4px;
    border-radius: 4px;
    box-shadow: 0 0 12px var(--neuro-cyan-glow), 0 2px 8px rgba(0, 0, 0, 0.3);
    animation: neuroWordPulse 0.3s ease-out;
}

@keyframes neuroWordPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Chunk ativo (múltiplas palavras) */
.neuro-word-chunk {
    background: rgba(6, 214, 160, 0.15);
    border-radius: 3px;
}

/* Palavra preservada (code, pre) */
.neuro-word-preserved {
    font-family: 'JetBrains Mono', monospace;
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

/* Formatação inline */
.neuro-format-strong,
.neuro-format-b {
    font-weight: 700;
}

.neuro-format-em,
.neuro-format-i {
    font-style: italic;
}

.neuro-format-u {
    text-decoration: underline;
}

.neuro-format-mark {
    background: rgba(251, 191, 36, 0.3);
    padding: 1px 2px;
    border-radius: 2px;
}

/* Blocos (parágrafos, listas) */
.neuro-block {
    margin-bottom: 0.5em;
}

.neuro-block-h1,
.neuro-block-h2,
.neuro-block-h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    color: var(--neuro-cyan);
    margin-top: 1em;
}

.neuro-block-h1 { font-size: 1.4em; }
.neuro-block-h2 { font-size: 1.2em; }
.neuro-block-h3 { font-size: 1.1em; }

.neuro-block-li {
    padding-left: 1.5em;
    position: relative;
}

.neuro-block-li::before {
    content: "•";
    position: absolute;
    left: 0.5em;
    color: var(--neuro-cyan);
}

.neuro-block-blockquote {
    border-left: 3px solid var(--neuro-cyan);
    padding-left: 1em;
    margin-left: 0;
    font-style: italic;
    color: var(--neuro-text-secondary);
}

.neuro-block-break {
    height: 0.8em;
}

/* Links */
.neuro-link {
    color: var(--neuro-blue);
    text-decoration: none;
}

.neuro-link:hover {
    text-decoration: underline;
}

/* Pausas visuais (pontuação) */
.neuro-word-punctuation {
    color: var(--neuro-text-muted);
}

/* Container durante leitura */
.neuro-assistive-reading {
    position: relative;
}

.neuro-assistive-reading::after {
    content: "🎯 Leitura Assistiva";
    position: absolute;
    top: -24px;
    right: 0;
    font-size: 10px;
    color: var(--neuro-cyan);
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
}

/* ===== CONTROLES DE LEITURA ===== */
.neuro-reading-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--neuro-bg-surface);
    border-radius: 12px;
    margin-bottom: 16px;
    border: 1px solid var(--neuro-border);
}

.neuro-reading-controls button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--neuro-cyan), var(--neuro-blue));
    color: var(--neuro-bg-deep);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.neuro-reading-controls button:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px var(--neuro-cyan-glow);
}

.neuro-reading-controls button:active {
    transform: scale(0.95);
}

.neuro-ctrl-stop {
    background: linear-gradient(135deg, var(--neuro-red), #dc2626) !important;
}

.neuro-ctrl-progress {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--neuro-text-secondary);
    min-width: 60px;
}

.neuro-ctrl-current {
    color: var(--neuro-cyan);
    font-weight: 600;
}

.neuro-ctrl-wpm {
    flex: 1;
    max-width: 120px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--neuro-bg-hover);
    border-radius: 2px;
    cursor: pointer;
}

.neuro-ctrl-wpm::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--neuro-cyan);
    cursor: pointer;
    box-shadow: 0 2px 8px var(--neuro-cyan-glow);
}

.neuro-ctrl-wpm-label {
    font-size: 11px;
    color: var(--neuro-text-muted);
    font-family: 'JetBrains Mono', monospace;
    min-width: 65px;
}

/* ===== RÉGUA PARA NEUROTUTOR ===== */
.neuro-assistive-text.ruler-active .neuro-word:not(.neuro-word-active):not(.neuro-word-chunk) {
    opacity: 0.3;
    filter: blur(0.5px);
}

.neuro-assistive-text.ruler-active .neuro-word-active,
.neuro-assistive-text.ruler-active .neuro-word-chunk {
    opacity: 1;
    filter: none;
}

/* ===== HOVER PARA CLICK-TO-JUMP ===== */
.neuro-assistive-reading .neuro-word:hover {
    background: rgba(6, 214, 160, 0.1);
    cursor: pointer;
}

/* ===== TEMAS ===== */
body.theme-light .neuro-assistive-text {
    color: #1f2937;
}

body.theme-light .neuro-word-active {
    background: linear-gradient(135deg, #06d6a0, #0ea5e9) !important;
    color: white !important;
}

body.theme-light .neuro-word-chunk {
    background: rgba(6, 214, 160, 0.2);
}

body.theme-light .neuro-reading-controls {
    background: #f3f4f6;
    border-color: #e5e7eb;
}

body.theme-sepia .neuro-assistive-text {
    color: #3d2914;
}

body.theme-sepia .neuro-word-active {
    background: linear-gradient(135deg, #d97706, #ea580c) !important;
    color: white !important;
}

body.theme-sepia .neuro-reading-controls {
    background: #f5ebe0;
    border-color: #ddd6c8;
}

/* ===== MOBILE ===== */
@media (max-width: 640px) {
    .neuro-reading-controls {
        flex-wrap: wrap;
        padding: 10px 12px;
        gap: 8px;
    }

    .neuro-reading-controls button {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .neuro-ctrl-wpm {
        order: 10;
        flex: 100%;
        max-width: none;
    }

    .neuro-ctrl-wpm-label {
        order: 11;
    }

    .neuro-assistive-text {
        font-size: 0.95rem;
        line-height: 1.7;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   NEURO-FUTURISTA COMPONENT LIBRARY
   Dashboard Gamificado & NeuroTutor Panel Components
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   GLASSMORPHISM BASE
   ═══════════════════════════════════════════════════════════════ */
.neuro-glass-panel {
    background: rgba(12, 16, 33, 0.6);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border: 1px solid rgba(6, 214, 160, 0.15);
    border-radius: 20px;
    box-shadow:
        0 0 30px rgba(6, 214, 160, 0.08),
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.neuro-glass-panel-purple {
    background: rgba(12, 16, 33, 0.7);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border: 1px solid rgba(168, 85, 247, 0.25);
    border-radius: 20px;
    box-shadow:
        0 0 30px rgba(168, 85, 247, 0.12),
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ═══════════════════════════════════════════════════════════════
   LEVEL RING COMPONENT
   Círculo de nível com glow neon
   ═══════════════════════════════════════════════════════════════ */
.neuro-level-ring {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.neuro-level-ring-bg {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 4px solid rgba(6, 214, 160, 0.15);
}

.neuro-level-ring-progress {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 4px solid transparent;
    border-top-color: var(--neuro-cyan);
    border-right-color: var(--neuro-cyan);
    filter: drop-shadow(0 0 8px var(--neuro-cyan-glow));
    animation: neuro-ring-glow 2s ease-in-out infinite;
}

@keyframes neuro-ring-glow {
    0%, 100% { filter: drop-shadow(0 0 8px var(--neuro-cyan-glow)); }
    50% { filter: drop-shadow(0 0 16px rgba(6, 214, 160, 0.6)); }
}

.neuro-level-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--neuro-cyan);
    text-shadow: 0 0 20px var(--neuro-cyan-glow);
}

/* ═══════════════════════════════════════════════════════════════
   XP BAR - LIQUID GLOW EFFECT
   Barra de XP com efeito líquido brilhante
   ═══════════════════════════════════════════════════════════════ */
.neuro-xp-bar-container {
    position: relative;
    width: 100%;
    height: 28px;
    background: rgba(6, 214, 160, 0.08);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(6, 214, 160, 0.15);
}

.neuro-xp-bar-fill {
    position: relative;
    height: 100%;
    background: linear-gradient(90deg,
        #06d6a0 0%,
        #22c55e 50%,
        #06d6a0 100%
    );
    background-size: 200% 100%;
    border-radius: 14px;
    animation: neuro-xp-flow 3s ease-in-out infinite;
    box-shadow:
        0 0 20px rgba(6, 214, 160, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.3);
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes neuro-xp-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Liquid bubbles effect */
.neuro-xp-bar-fill::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.3) 0%, transparent 30%),
        radial-gradient(circle at 40% 30%, rgba(255, 255, 255, 0.2) 0%, transparent 25%),
        radial-gradient(circle at 60% 70%, rgba(255, 255, 255, 0.25) 0%, transparent 28%),
        radial-gradient(circle at 80% 40%, rgba(255, 255, 255, 0.2) 0%, transparent 22%);
    animation: neuro-bubbles 4s linear infinite;
}

@keyframes neuro-bubbles {
    0% { transform: translateX(-20px); }
    100% { transform: translateX(20px); }
}

/* Shine effect */
.neuro-xp-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: neuro-xp-shine 3s ease-in-out infinite;
}

@keyframes neuro-xp-shine {
    0% { left: -100%; }
    50%, 100% { left: 150%; }
}

/* ═══════════════════════════════════════════════════════════════
   STREAK BADGE
   Badge de streak com ícone de fogo
   ═══════════════════════════════════════════════════════════════ */
.neuro-streak-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(249, 115, 22, 0.15));
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 20px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    color: var(--neuro-gold);
    animation: neuro-streak-pulse 2s ease-in-out infinite;
}

@keyframes neuro-streak-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(251, 191, 36, 0.2); }
    50% { box-shadow: 0 0 20px rgba(251, 191, 36, 0.4); }
}

.neuro-streak-icon {
    font-size: 1.2rem;
    animation: neuro-fire-flicker 0.5s ease-in-out infinite alternate;
}

@keyframes neuro-fire-flicker {
    0% { transform: scale(1) rotate(-3deg); }
    100% { transform: scale(1.1) rotate(3deg); }
}

/* ═══════════════════════════════════════════════════════════════
   STAT CARDS
   Cards de estatísticas com borda gradiente
   ═══════════════════════════════════════════════════════════════ */
.neuro-stat-card {
    position: relative;
    padding: 20px;
    background: rgba(12, 16, 33, 0.5);
    border-radius: 16px;
    overflow: hidden;
}

.neuro-stat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(135deg,
        rgba(168, 85, 247, 0.5) 0%,
        rgba(6, 214, 160, 0.3) 50%,
        rgba(168, 85, 247, 0.5) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: neuro-border-flow 4s linear infinite;
}

@keyframes neuro-border-flow {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.neuro-stat-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--neuro-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.neuro-stat-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--neuro-text-primary);
}

.neuro-stat-icon {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 1.5rem;
    color: var(--neuro-text-muted);
    opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════
   NEUROTUTOR PANEL
   Panel de explicações da IA
   ═══════════════════════════════════════════════════════════════ */
.neurotutor-panel-v2 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 480px;
    max-height: 85vh;
    background: rgba(12, 16, 33, 0.85);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 24px;
    box-shadow:
        0 0 40px rgba(168, 85, 247, 0.15),
        0 25px 50px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
    z-index: var(--z-neurotutor-panel);
}

.neurotutor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(168, 85, 247, 0.15);
}

.neurotutor-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--neuro-text-primary);
}

.neurotutor-credits {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(6, 214, 160, 0.1);
    border: 1px solid rgba(6, 214, 160, 0.2);
    border-radius: 20px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--neuro-cyan);
}

.neurotutor-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--neuro-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.neurotutor-close:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--neuro-red);
}

.neurotutor-quote {
    padding: 0 24px;
    margin: 20px 0;
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    font-style: italic;
    color: var(--neuro-text-secondary);
    line-height: 1.6;
}

.neurotutor-quote::before {
    content: '"';
    color: var(--neuro-purple);
    font-size: 1.5rem;
}

.neurotutor-quote::after {
    content: '"';
    color: var(--neuro-purple);
    font-size: 1.5rem;
}

.neurotutor-content {
    padding: 0 24px 24px;
}

.neurotutor-loader {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(6, 214, 160, 0.05);
    border-radius: 12px;
    margin-bottom: 16px;
}

.neurotutor-loader-text {
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    color: var(--neuro-text-muted);
}

.neurotutor-loader-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.neurotutor-loader-bar {
    height: 8px;
    background: linear-gradient(90deg,
        rgba(6, 214, 160, 0.2),
        rgba(6, 214, 160, 0.4),
        rgba(6, 214, 160, 0.2)
    );
    background-size: 200% 100%;
    border-radius: 4px;
    animation: neuro-loader-shimmer 1.5s ease-in-out infinite;
}

.neurotutor-loader-bar:nth-child(2) {
    width: 80%;
    animation-delay: 0.2s;
}

.neurotutor-loader-bar:nth-child(3) {
    width: 60%;
    animation-delay: 0.4s;
}

@keyframes neuro-loader-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.neurotutor-explanation {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--neuro-text-primary);
}

.neurotutor-explanation ul {
    margin: 16px 0;
    padding-left: 0;
    list-style: none;
}

.neurotutor-explanation li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 12px;
    color: var(--neuro-text-secondary);
}

.neurotutor-explanation li::before {
    content: '•';
    position: absolute;
    left: 8px;
    color: var(--neuro-cyan);
    font-weight: bold;
}

.neurotutor-actions {
    display: flex;
    gap: 12px;
    padding: 0 24px 20px;
}

.neurotutor-btn {
    flex: 1;
    padding: 14px 20px;
    border-radius: 12px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.neurotutor-btn-primary {
    background: linear-gradient(135deg, var(--neuro-cyan), #0ea5e9);
    color: white;
    box-shadow: 0 0 20px rgba(6, 214, 160, 0.3);
}

.neurotutor-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(6, 214, 160, 0.5);
}

.neurotutor-btn-secondary {
    background: linear-gradient(135deg, var(--neuro-purple), #ec4899);
    color: white;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
}

.neurotutor-btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.5);
}

.neurotutor-input-container {
    padding: 0 24px 24px;
}

.neurotutor-input-wrapper {
    display: flex;
    gap: 8px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

.neurotutor-input {
    flex: 1;
    padding: 10px 16px;
    background: transparent;
    border: none;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    color: var(--neuro-text-primary);
    outline: none;
}

.neurotutor-input::placeholder {
    color: var(--neuro-text-muted);
}

.neurotutor-send {
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--neuro-cyan), #0ea5e9);
    border: none;
    border-radius: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.neurotutor-send:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(6, 214, 160, 0.4);
}

/* ═══════════════════════════════════════════════════════════════
   CTA BUTTON - GOLD VARIANT
   ═══════════════════════════════════════════════════════════════ */
.neuro-btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border: none;
    border-radius: 12px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a2e;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow:
        0 4px 15px rgba(251, 191, 36, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.2);
}

.neuro-btn-gold:hover {
    transform: translateY(-3px);
    box-shadow:
        0 8px 25px rgba(251, 191, 36, 0.4),
        inset 0 2px 0 rgba(255, 255, 255, 0.3);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   MOCKUP EXACT STYLES - NEURO-FUTURISTA UI
   Replicando EXATAMENTE o design das imagens de referência
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
   NEURO READER HEADER - Mockup Exact
   Barra superior: hamburger | filename | Page X/Y (linha cyan) | Zen Mode toggle
   ═══════════════════════════════════════════════════════════════════════════════ */

.neuro-reader-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: rgba(18, 22, 36, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 100;
    border-bottom: 1px solid rgba(6, 214, 160, 0.1);
}

body.reader-active .neuro-reader-header {
    display: flex;
}

body.zen-mode .neuro-reader-header {
    display: none !important;
}

/* Header Left: Hamburger + Filename */
.neuro-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.neuro-menu-btn {
    width: 24px;
    height: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.neuro-menu-btn .hamburger-line {
    width: 100%;
    height: 2px;
    background: #06d6a0;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.neuro-menu-btn:hover .hamburger-line {
    background: #0ef0b0;
    box-shadow: 0 0 8px rgba(6, 214, 160, 0.5);
}

.neuro-filename {
    font-family: 'Space Grotesk', -apple-system, sans-serif;
    font-weight: 500;
    font-size: 1rem;
    color: #ffffff;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Header Center: Page X/Y with cyan underline */
.neuro-header-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.neuro-page-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    color: #8b9cb8;
    margin-right: 8px;
}

.neuro-page-numbers {
    font-family: 'JetBrains Mono', 'Outfit', monospace;
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
}

.neuro-header-line {
    width: 120px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #06d6a0, transparent);
    border-radius: 2px;
    margin-top: 2px;
}

/* Header Right: Zen Mode Toggle */
.neuro-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.neuro-zen-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    color: #8b9cb8;
}

/* Toggle Switch - Cyan style */
.neuro-toggle {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
}

.neuro-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.neuro-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(6, 214, 160, 0.3);
    border-radius: 28px;
    transition: all 0.3s ease;
}

.neuro-toggle-slider::before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background: #8b9cb8;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.neuro-toggle input:checked + .neuro-toggle-slider {
    background: rgba(6, 214, 160, 0.2);
    border-color: #06d6a0;
}

.neuro-toggle input:checked + .neuro-toggle-slider::before {
    transform: translateX(24px);
    background: #06d6a0;
    box-shadow: 0 0 10px rgba(6, 214, 160, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   NEURO SIDEBAR - Mockup Exact
   Menu lateral escuro com ícones outline cyan
   ═══════════════════════════════════════════════════════════════════════════════ */

.neuro-sidebar {
    position: fixed;
    top: 56px;
    left: 0;
    width: 180px;
    height: calc(100vh - 56px);
    background: rgba(18, 22, 36, 0.98);
    border-right: 1px solid rgba(6, 214, 160, 0.15);
    z-index: 99;
    display: none;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.reader-active .neuro-sidebar {
    display: flex;
}

.neuro-sidebar.open {
    transform: translateX(0);
}

.neuro-sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 24px 0;
}

.neuro-sidebar-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    background: none;
}

.neuro-sidebar-item:hover {
    background: rgba(6, 214, 160, 0.08);
}

.neuro-sidebar-item .sidebar-icon {
    width: 22px;
    height: 22px;
    color: #06d6a0;
    stroke-width: 1.5;
}

.neuro-sidebar-item.has-submenu {
    justify-content: space-between;
}

.neuro-sidebar-item .sidebar-arrow {
    width: 16px;
    height: 16px;
    color: #06d6a0;
    margin-left: auto;
}

/* Sidebar Overlay */
.neuro-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 98;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.neuro-sidebar-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   NEURO BRAIN FAB - Mockup Exact
   Botão circular com cérebro roxo 3D e anel gradiente cyan/roxo
   ═══════════════════════════════════════════════════════════════════════════════ */

.neuro-brain-fab {
    position: fixed;
    bottom: 100px;
    right: 24px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #2d1f4e 0%, #1a1a2e 70%, #0f0f1a 100%);
    border: 2px solid transparent;
    background-clip: padding-box;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9050;
    transition: all 0.3s ease;
    box-shadow:
        0 0 30px rgba(168, 85, 247, 0.3),
        0 8px 32px rgba(0, 0, 0, 0.4);
}

body.reader-active .neuro-brain-fab {
    display: flex;
}

body.zen-mode .neuro-brain-fab,
body.ui-hidden .neuro-brain-fab {
    display: none !important;
}

/* Gradient ring around FAB */
.neuro-brain-fab::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #06d6a0 0%, #a855f7 50%, #06d6a0 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: ring-rotate 4s linear infinite;
}

@keyframes ring-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.neuro-brain-fab:hover {
    transform: scale(1.1);
    box-shadow:
        0 0 50px rgba(168, 85, 247, 0.5),
        0 12px 40px rgba(0, 0, 0, 0.5);
}

.neuro-brain-fab .brain-icon {
    font-size: 32px;
    filter: drop-shadow(0 0 15px rgba(168, 85, 247, 0.8));
    z-index: 2;
}

.neuro-brain-fab .brain-ring {
    display: none; /* Already handled by ::before */
}

/* ═══════════════════════════════════════════════════════════════════════════════
   NEUROTUTOR PANEL - Mockup Exact
   Painel com borda roxa neon brilhante, Credits badge, botões Simplify/Create Question
   ═══════════════════════════════════════════════════════════════════════════════ */

.neurotutor-panel-v2 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 480px;
    background: rgba(18, 22, 36, 0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 20px;
    z-index: 9100;
    overflow: hidden;
    display: none;
    /* Purple neon glow border */
    box-shadow:
        0 0 0 2px rgba(168, 85, 247, 0.8),
        0 0 40px rgba(168, 85, 247, 0.4),
        0 0 80px rgba(168, 85, 247, 0.2),
        inset 0 0 60px rgba(168, 85, 247, 0.05);
}

.neurotutor-panel-v2.active {
    display: block;
    animation: panel-appear 0.3s ease-out;
}

@keyframes panel-appear {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.neurotutor-header-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
}

.neurotutor-title-v2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
}

.neurotutor-credits-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(6, 214, 160, 0.15);
    border: 1px solid #06d6a0;
    border-radius: 20px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #06d6a0;
}

.neurotutor-close-v2 {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: #8b9cb8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.neurotutor-close-v2:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.neurotutor-body-v2 {
    padding: 0 24px 24px;
}

.neurotutor-quote {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 20px;
    line-height: 1.4;
}

.neurotutor-quote::before {
    content: '"';
    color: #a855f7;
}

.neurotutor-quote::after {
    content: '"';
    color: #a855f7;
}

.neurotutor-content-v2 {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.neurotutor-loader {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    color: #8b9cb8;
    margin-bottom: 12px;
}

.neurotutor-loader-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.neurotutor-loader-bar {
    height: 8px;
    background: linear-gradient(90deg, rgba(6, 214, 160, 0.3), rgba(6, 214, 160, 0.1));
    border-radius: 4px;
    animation: loader-pulse 1.5s ease-in-out infinite;
}

.neurotutor-loader-bar:nth-child(1) { width: 100%; animation-delay: 0s; }
.neurotutor-loader-bar:nth-child(2) { width: 85%; animation-delay: 0.2s; }
.neurotutor-loader-bar:nth-child(3) { width: 70%; animation-delay: 0.4s; }

@keyframes loader-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

.neurotutor-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
}

.neurotutor-bullets li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    color: #c4d0e4;
    line-height: 1.5;
}

.neurotutor-bullets li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #06d6a0;
    font-size: 1.2rem;
}

.neurotutor-actions-v2 {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.neurotutor-btn-simplify {
    flex: 1;
    padding: 14px 24px;
    background: linear-gradient(135deg, #06d6a0, #0ea5e9);
    border: none;
    border-radius: 12px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.neurotutor-btn-simplify:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(6, 214, 160, 0.3);
}

.neurotutor-btn-question {
    flex: 1;
    padding: 14px 24px;
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    border: none;
    border-radius: 12px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.neurotutor-btn-question:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(168, 85, 247, 0.3);
}

.neurotutor-input-v2 {
    width: 100%;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    color: #ffffff;
    outline: none;
    transition: border-color 0.2s ease;
}

.neurotutor-input-v2::placeholder {
    color: #64748b;
}

.neurotutor-input-v2:focus {
    border-color: rgba(168, 85, 247, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FOCUS RULER - Mockup Exact
   Régua cyan translúcida com marcações de medida
   ═══════════════════════════════════════════════════════════════════════════════ */

.neuro-focus-ruler-mockup {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    max-width: 500px;
    height: 40px;
    background: rgba(6, 214, 160, 0.15);
    border: 2px solid #06d6a0;
    border-radius: 8px;
    z-index: 30;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 20px rgba(6, 214, 160, 0.3),
        inset 0 0 15px rgba(6, 214, 160, 0.1);
}

.neuro-focus-ruler-mockup.active {
    display: flex;
}

/* Ruler tick marks */
.neuro-focus-ruler-mockup::before {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 10px;
    right: 10px;
    height: 12px;
    background: repeating-linear-gradient(
        90deg,
        #06d6a0 0px,
        #06d6a0 1px,
        transparent 1px,
        transparent 10px
    );
    opacity: 0.6;
}

/* Small tick marks */
.neuro-focus-ruler-mockup::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 10px;
    right: 10px;
    height: 6px;
    background: repeating-linear-gradient(
        90deg,
        rgba(6, 214, 160, 0.4) 0px,
        rgba(6, 214, 160, 0.4) 1px,
        transparent 1px,
        transparent 5px
    );
}

/* Handle grips on sides */
.neuro-ruler-grip {
    position: absolute;
    width: 16px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.neuro-ruler-grip-left { left: 4px; }
.neuro-ruler-grip-right { right: 4px; }

.neuro-ruler-grip-lines {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.neuro-ruler-grip-lines span {
    width: 8px;
    height: 2px;
    background: #06d6a0;
    border-radius: 1px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ACTION BAR FLUTUANTE - Mockup Exact
   Pill shape com borda cyan, ícones: Explain (cérebro), highlight, copy, share
   ═══════════════════════════════════════════════════════════════════════════════ */

.neuro-action-bar {
    position: fixed;
    bottom: 200px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    align-items: center;
    gap: 0;
    padding: 12px 8px;
    background: rgba(18, 22, 36, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid #06d6a0;
    border-radius: 50px;
    z-index: 9000;
    box-shadow:
        0 0 30px rgba(6, 214, 160, 0.3),
        0 8px 32px rgba(0, 0, 0, 0.4);
}

.neuro-action-bar.active {
    display: flex;
    animation: action-bar-appear 0.3s ease-out;
}

@keyframes action-bar-appear {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.neuro-action-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.neuro-action-btn:hover {
    background: rgba(6, 214, 160, 0.1);
}

.neuro-action-btn.explain-btn {
    background: rgba(168, 85, 247, 0.1);
    margin-right: 8px;
}

.neuro-action-btn.explain-btn .action-icon {
    font-size: 24px;
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.6));
}

.neuro-action-btn .action-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: #06d6a0;
    margin-left: 4px;
}

.neuro-action-btn i {
    width: 22px;
    height: 22px;
    color: #06d6a0;
}

.neuro-action-btn.highlight-btn i {
    color: #fbbf24;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DASHBOARD GAMIFICADO - Mockup Exact
   Level ring cyan, XP bar verde líquido, stat cards com borda gradiente
   ═══════════════════════════════════════════════════════════════════════════════ */

.neuro-dashboard-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 520px;
    background: rgba(18, 22, 36, 0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    z-index: 9100;
    padding: 32px;
    display: none;
}

.neuro-dashboard-panel.active {
    display: block;
    animation: panel-appear 0.3s ease-out;
}

/* Level Ring - Cyan circle */
.neuro-level-ring-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
}

.neuro-level-ring {
    position: relative;
    width: 120px;
    height: 120px;
}

.neuro-level-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.neuro-level-ring-bg {
    fill: none;
    stroke: rgba(6, 214, 160, 0.2);
    stroke-width: 8;
}

.neuro-level-ring-progress {
    fill: none;
    stroke: #06d6a0;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 339.292;
    stroke-dashoffset: 84.823; /* 75% progress example */
    filter: drop-shadow(0 0 10px rgba(6, 214, 160, 0.5));
    transition: stroke-dashoffset 0.5s ease;
}

.neuro-level-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.neuro-level-number span {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #06d6a0;
    text-shadow: 0 0 20px rgba(6, 214, 160, 0.5);
}

.neuro-level-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    color: #8b9cb8;
}

/* Streak Badge */
.neuro-streak-badge-v2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.neuro-streak-icon {
    font-size: 1.5rem;
}

.neuro-streak-text {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f97316;
}

/* XP Progress Bar - Liquid style */
.neuro-xp-section {
    margin-bottom: 28px;
}

.neuro-xp-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    color: #c4d0e4;
    margin-bottom: 10px;
}

.neuro-xp-bar-container {
    position: relative;
    width: 100%;
    height: 32px;
    background: rgba(34, 197, 94, 0.15);
    border: 2px solid rgba(34, 197, 94, 0.3);
    border-radius: 16px;
    overflow: hidden;
}

.neuro-xp-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 60%; /* Example progress */
    background: linear-gradient(90deg, #22c55e, #4ade80);
    border-radius: 14px;
    transition: width 0.5s ease;
}

/* Liquid bubbles effect */
.neuro-xp-bubbles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.neuro-xp-bubble {
    position: absolute;
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: bubble-float 2s ease-in-out infinite;
}

.neuro-xp-bubble:nth-child(1) { left: 10%; animation-delay: 0s; }
.neuro-xp-bubble:nth-child(2) { left: 25%; animation-delay: 0.3s; }
.neuro-xp-bubble:nth-child(3) { left: 40%; animation-delay: 0.6s; }
.neuro-xp-bubble:nth-child(4) { left: 55%; animation-delay: 0.9s; }

@keyframes bubble-float {
    0%, 100% { transform: translateY(8px); opacity: 0.3; }
    50% { transform: translateY(-4px); opacity: 0.8; }
}

/* Stat Cards - Gradient border */
.neuro-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 28px;
}

.neuro-stat-card-v2 {
    position: relative;
    padding: 20px;
    background: rgba(18, 22, 36, 0.8);
    border-radius: 16px;
    overflow: hidden;
}

/* Gradient border effect */
.neuro-stat-card-v2::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    background: linear-gradient(135deg, #a855f7 0%, #06d6a0 100%);
    border-radius: 16px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.neuro-stat-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    color: #8b9cb8;
    margin-bottom: 8px;
}

.neuro-stat-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
}

.neuro-stat-icon {
    position: absolute;
    top: 16px;
    right: 16px;
    color: #64748b;
}

/* Gold CTA Button */
.neuro-btn-gold-v2 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 18px 32px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border: none;
    border-radius: 14px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a2e;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow:
        0 4px 15px rgba(251, 191, 36, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.2);
}

.neuro-btn-gold-v2:hover {
    transform: translateY(-3px);
    box-shadow:
        0 8px 30px rgba(251, 191, 36, 0.4),
        inset 0 2px 0 rgba(255, 255, 255, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .neuro-reader-header {
        padding: 0 12px;
    }

    .neuro-filename {
        max-width: 150px;
        font-size: 0.9rem;
    }

    .neuro-header-center {
        display: none;
    }

    .neuro-sidebar {
        width: 240px;
    }

    .neuro-brain-fab {
        bottom: 80px;
        right: 16px;
        width: 60px;
        height: 60px;
    }

    .neuro-brain-fab .brain-icon {
        font-size: 26px;
    }

    .neurotutor-panel-v2,
    .neuro-dashboard-panel {
        width: 95%;
        max-width: none;
        padding: 20px;
    }

    .neuro-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LEGACY COMPATIBILITY - Keep old class names working
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Old sidebar classes still work */
.neuro-sidebar-header,
.neuro-sidebar-logo,
.neuro-sidebar-title,
.neuro-sidebar-footer,
.neuro-sidebar-divider {
    display: none; /* Hide old structure */
}

/* Old header classes redirect */
.neuro-reader-header-left { display: none; }
.neuro-reader-header-center { display: none; }
.neuro-reader-header-right { display: none; }
.neuro-file-info { display: none; }
.neuro-page-info { display: none; }
.neuro-progress-mini { display: none; }
.neuro-zen-toggle:not(.neuro-toggle) { display: none; }

/* END MOCKUP STYLES */

/* ═══════════════════════════════════════════════════════════════════════════════
   NEURO SIDEBAR - GLASSMORPHISM NAVIGATION
   Menu lateral com estilo das imagens de referência
   ═══════════════════════════════════════════════════════════════════════════════ */

.neuro-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 220px;
    height: 100vh;
    background: rgba(12, 16, 33, 0.85);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border-right: 1px solid var(--neuro-border-glow);
    z-index: var(--z-floating-dock, 50);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.neuro-sidebar.open {
    transform: translateX(0);
}

.neuro-sidebar-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 16px;
    border-bottom: 1px solid var(--neuro-border);
}

.neuro-sidebar-logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--neuro-cyan), var(--neuro-blue));
    box-shadow: 0 0 15px var(--neuro-cyan-glow);
}

.neuro-sidebar-logo i {
    color: white;
}

.neuro-sidebar-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--neuro-text-primary);
}

.neuro-sidebar-nav {
    flex: 1;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.neuro-sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    color: var(--neuro-text-secondary);
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    cursor: pointer;
    border: 1px solid transparent;
}

.neuro-sidebar-item:hover {
    background: rgba(6, 214, 160, 0.08);
    color: var(--neuro-text-primary);
}

.neuro-sidebar-item.active {
    background: rgba(6, 214, 160, 0.12);
    color: var(--neuro-cyan);
    border-color: rgba(6, 214, 160, 0.2);
}

.neuro-sidebar-item i {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.neuro-sidebar-item .sidebar-arrow {
    margin-left: auto;
    opacity: 0.5;
}

.neuro-sidebar-divider {
    height: 1px;
    background: var(--neuro-border);
    margin: 8px 0;
}

.neuro-sidebar-footer {
    padding: 16px 12px;
    border-top: 1px solid var(--neuro-border);
}

.neuro-sidebar-footer .neuro-sidebar-item {
    font-size: 13px;
    color: var(--neuro-text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   NEURO READER HEADER
   Barra superior do leitor com info do PDF
   ═══════════════════════════════════════════════════════════════ */

.neuro-reader-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: rgba(8, 11, 20, 0.9);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border-bottom: 1px solid var(--neuro-border-glow);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: var(--z-floating-dock, 50);
}

.neuro-reader-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.neuro-header-menu-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: transparent;
    border: 1px solid var(--neuro-border);
    color: var(--neuro-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.neuro-header-menu-btn:hover {
    background: rgba(6, 214, 160, 0.1);
    border-color: var(--neuro-border-glow);
    color: var(--neuro-cyan);
}

.neuro-header-filename {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--neuro-text-primary);
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.neuro-reader-header-center {
    display: flex;
    align-items: center;
    gap: 24px;
}

.neuro-header-page-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
}

.neuro-header-page-label {
    color: var(--neuro-text-muted);
}

.neuro-header-page-number {
    color: var(--neuro-text-primary);
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

.neuro-header-progress {
    width: 120px;
    height: 4px;
    background: rgba(6, 214, 160, 0.15);
    border-radius: 2px;
    overflow: hidden;
}

.neuro-header-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--neuro-cyan), var(--neuro-blue));
    border-radius: 2px;
    transition: width 0.3s ease;
}

.neuro-reader-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.neuro-zen-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    background: rgba(6, 214, 160, 0.1);
    border: 1px solid rgba(6, 214, 160, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
}

.neuro-zen-toggle:hover {
    background: rgba(6, 214, 160, 0.15);
}

.neuro-zen-toggle-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--neuro-text-secondary);
}

.neuro-zen-toggle-switch {
    width: 44px;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    position: relative;
    transition: background 0.2s ease;
}

.neuro-zen-toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: var(--neuro-text-muted);
    border-radius: 50%;
    transition: all 0.2s ease;
}

.neuro-zen-toggle.active .neuro-zen-toggle-switch {
    background: var(--neuro-cyan);
}

.neuro-zen-toggle.active .neuro-zen-toggle-switch::after {
    left: 22px;
    background: white;
}

/* Additional classes for HTML structure */
.neuro-menu-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: transparent;
    border: 1px solid var(--neuro-border);
    color: var(--neuro-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.neuro-menu-btn:hover {
    background: rgba(6, 214, 160, 0.1);
    border-color: var(--neuro-border-glow);
    color: var(--neuro-cyan);
}

.neuro-file-info {
    display: flex;
    flex-direction: column;
}

.neuro-file-name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--neuro-text-primary);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.neuro-page-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', 'Outfit', monospace;
    font-size: 0.85rem;
}

.neuro-page-label {
    color: var(--neuro-text-muted);
}

.neuro-page-current {
    color: var(--neuro-text-primary);
    font-weight: 600;
}

.neuro-page-divider {
    color: var(--neuro-text-muted);
}

.neuro-page-total {
    color: var(--neuro-text-secondary);
}

.neuro-progress-mini {
    width: 100px;
    height: 4px;
    background: rgba(6, 214, 160, 0.15);
    border-radius: 2px;
    overflow: hidden;
}

.neuro-progress-mini-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--neuro-cyan), var(--neuro-blue));
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Zen Mode Toggle - Checkbox hidden */
.neuro-zen-toggle input[type="checkbox"] {
    display: none;
}

.neuro-zen-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 20px;
    background: rgba(6, 214, 160, 0.08);
    border: 1px solid rgba(6, 214, 160, 0.2);
    transition: all 0.2s ease;
}

.neuro-zen-label:hover {
    background: rgba(6, 214, 160, 0.12);
}

.neuro-zen-text {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--neuro-text-secondary);
}

.neuro-zen-switch {
    width: 44px;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    position: relative;
    transition: background 0.2s ease;
}

.neuro-zen-switch-handle {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: var(--neuro-text-muted);
    border-radius: 50%;
    transition: all 0.2s ease;
}

.neuro-zen-toggle input:checked + .neuro-zen-label .neuro-zen-switch {
    background: var(--neuro-cyan);
}

.neuro-zen-toggle input:checked + .neuro-zen-label .neuro-zen-switch-handle {
    left: 22px;
    background: white;
}

/* Reader Header visibility */
.neuro-reader-header {
    display: none;
}

body.reader-active .neuro-reader-header {
    display: flex;
}

body.zen-mode .neuro-reader-header {
    display: none !important;
}

/* Sidebar visibility */
.neuro-sidebar {
    display: none;
}

body.reader-active .neuro-sidebar,
body.sidebar-open .neuro-sidebar {
    display: flex;
    flex-direction: column;
}

/* Brain FAB visibility */
.neuro-brain-fab {
    display: none;
}

body.reader-active .neuro-brain-fab {
    display: flex;
}

body.zen-mode .neuro-brain-fab,
body.playing .neuro-brain-fab,
body.ui-hidden .neuro-brain-fab {
    display: none !important;
}

/* Adjust reader content when header is visible */
body.reader-active #reader-view {
    padding-top: 56px;
}

/* ═══════════════════════════════════════════════════════════════
   NEURO FAB - BRAIN BUTTON (NeuroTutor)
   Botão flutuante com cérebro neon
   ═══════════════════════════════════════════════════════════════ */

.neuro-brain-fab {
    position: fixed;
    bottom: 100px;
    right: 24px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a1a2e, #2d1f4e);
    border: 2px solid rgba(168, 85, 247, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: var(--z-neurotutor-fab, 9050);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 0 30px rgba(168, 85, 247, 0.3),
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 0 20px rgba(168, 85, 247, 0.1);
}

.neuro-brain-fab::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--neuro-purple), var(--neuro-cyan));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.neuro-brain-fab:hover::before {
    opacity: 1;
    animation: neuro-fab-pulse 2s ease-in-out infinite;
}

@keyframes neuro-fab-pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.neuro-brain-fab:hover {
    transform: scale(1.1);
    border-color: rgba(168, 85, 247, 0.6);
    box-shadow:
        0 0 50px rgba(168, 85, 247, 0.5),
        0 12px 40px rgba(0, 0, 0, 0.5),
        inset 0 0 30px rgba(168, 85, 247, 0.2);
}

.neuro-brain-fab .brain-icon {
    font-size: 28px;
    filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.8));
    animation: neuro-brain-glow 3s ease-in-out infinite;
}

@keyframes neuro-brain-glow {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.6)); }
    50% { filter: drop-shadow(0 0 20px rgba(168, 85, 247, 1)); }
}

.neuro-brain-fab .brain-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--neuro-cyan);
    border-right-color: var(--neuro-purple);
    animation: neuro-ring-spin 4s linear infinite;
}

@keyframes neuro-ring-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════
   FOCUS RULER - CYAN STYLE
   Régua de foco com estilo cyan translúcido
   ═══════════════════════════════════════════════════════════════ */

.neuro-focus-ruler {
    position: absolute;
    left: 0;
    right: 0;
    height: var(--ruler-height, 40px);
    pointer-events: none;
    z-index: var(--z-ruler, 60);
}

.neuro-focus-ruler-overlay-top,
.neuro-focus-ruler-overlay-bottom {
    position: absolute;
    left: 0;
    right: 0;
    background: rgba(8, 11, 20, 0.85);
    pointer-events: none;
}

.neuro-focus-ruler-overlay-top {
    top: 0;
    height: var(--ruler-top, 200px);
}

.neuro-focus-ruler-overlay-bottom {
    bottom: 0;
    height: calc(100% - var(--ruler-top, 200px) - var(--ruler-height, 40px));
}

.neuro-focus-ruler-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 700px;
    top: var(--ruler-top, 200px);
    height: var(--ruler-height, 40px);
    background: rgba(6, 214, 160, 0.05);
    border: 2px solid var(--neuro-cyan);
    border-radius: 8px;
    box-shadow:
        0 0 20px rgba(6, 214, 160, 0.3),
        inset 0 0 30px rgba(6, 214, 160, 0.05);
}

.neuro-focus-ruler-line::before,
.neuro-focus-ruler-line::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: var(--neuro-cyan);
    border-radius: 2px;
}

.neuro-focus-ruler-line::before {
    left: -4px;
}

.neuro-focus-ruler-line::after {
    right: -4px;
}

/* Ruler marks */
.neuro-focus-ruler-marks {
    position: absolute;
    top: var(--ruler-top, 200px);
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 700px;
    height: var(--ruler-height, 40px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    pointer-events: none;
}

.neuro-focus-ruler-mark {
    width: 1px;
    height: 12px;
    background: rgba(6, 214, 160, 0.3);
}

.neuro-focus-ruler-mark:nth-child(5n) {
    height: 16px;
    background: rgba(6, 214, 160, 0.5);
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR OVERLAY (mobile)
   ═══════════════════════════════════════════════════════════════ */

.neuro-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: calc(var(--z-floating-dock, 50) - 1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.neuro-sidebar-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE: Hide sidebar on mobile by default
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .neuro-sidebar {
        width: 280px;
    }

    .neuro-reader-header {
        padding: 0 12px;
    }

    .neuro-header-filename {
        max-width: 150px;
        font-size: 0.85rem;
    }

    .neuro-header-progress {
        display: none;
    }

    .neuro-brain-fab {
        bottom: 80px;
        right: 16px;
        width: 56px;
        height: 56px;
    }

    .neuro-brain-fab .brain-icon {
        font-size: 24px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   HOLOFOTE MODE (Bionic Focus)
   ═══════════════════════════════════════════════════════════════ */
.word-block.holofote-read {
    opacity: 0.4 !important;
    transition: opacity 0.35s ease;
}
.word-block.holofote-future {
    opacity: 0.7 !important;
    transition: opacity 0.35s ease;
}
/* Palavra ativa sempre com brilho total */
.word-block.active.holofote-read,
.word-block.active.holofote-future {
    opacity: 1 !important;
}
/* Não sobrescrever outside-region */
.word-block.outside-region.holofote-read,
.word-block.outside-region.holofote-future {
    opacity: 0.15 !important;
}

/* Botão Holofote no dock */
body.theme-dark .neuro-dock #btn-holofote.active,
.neuro-dock #btn-holofote.active {
    background: rgba(234, 179, 8, 0.15) !important;
    border-color: rgba(234, 179, 8, 0.5) !important;
    color: #eab308 !important;
}

/* ═══════════════════════════════════════════════════════════════
   CHECKPOINT LINE (Você parou aqui)
   ═══════════════════════════════════════════════════════════════ */
.checkpoint-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #06b6d4 0%, #06b6d4 60px, rgba(6, 182, 212, 0.3) 150px, transparent 250px);
    pointer-events: none;
    z-index: 50;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.checkpoint-line.visible {
    opacity: 1;
}
.checkpoint-line.fading {
    opacity: 0;
    transition: opacity 0.5s ease;
}
.checkpoint-label {
    position: absolute;
    left: 4px;
    top: -22px;
    font-size: 11px;
    font-weight: 600;
    color: #06b6d4;
    white-space: nowrap;
    font-family: 'Outfit', sans-serif;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    letter-spacing: 0.03em;
}

/* ═══════════════════════════════════════════════════════════════
   USER HIGHLIGHTS (Destaque Neon)
   ═══════════════════════════════════════════════════════════════ */
.word-block.user-highlight {
    z-index: 16;
}
.word-block.user-highlight::after {
    background-color: var(--user-highlight-color, #06b6d4) !important;
    opacity: 0.35 !important;
    mix-blend-mode: normal !important;
    box-shadow: 0 0 8px var(--user-highlight-color, #06b6d4),
                0 0 2px var(--user-highlight-color, #06b6d4) !important;
}
/* Quando também está ativo (sendo lido), boost */
.word-block.user-highlight.active::after {
    opacity: 0.55 !important;
    box-shadow: 0 0 16px var(--user-highlight-color, #06b6d4),
                0 0 4px var(--highlight-color) !important;
}

/* ── Highlight Context Menu ── */
.highlight-context-menu {
    position: fixed;
    z-index: 10000;
    background: var(--neuro-surface-2, #1e293b);
    border: 1px solid var(--neuro-border, #334155);
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    min-width: 170px;
    animation: neuro-reveal 0.15s ease-out;
}
.highlight-ctx-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    color: var(--neuro-text-primary, #e2e8f0);
    font-size: 13px;
    font-family: 'Outfit', sans-serif;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}
.highlight-ctx-btn:hover {
    background: rgba(255, 255, 255, 0.06);
}
.highlight-ctx-remove {
    color: #ef4444;
}
.highlight-ctx-divider {
    height: 1px;
    background: var(--neuro-border, #334155);
    margin: 4px 0;
}
.highlight-ctx-colors {
    display: flex;
    gap: 8px;
    padding: 6px 4px;
    justify-content: center;
}
.highlight-color-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.15s;
}
.highlight-color-dot:hover {
    border-color: white;
    transform: scale(1.2);
}


/* ═══════════════════════════════════════════════════════════════
   PLANNER OVERLAY (Cockpit de Estudos)
   ═══════════════════════════════════════════════════════════════ */

/* ── Overlay & Container ── */

.plan-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.plan-overlay.plan-visible {
    opacity: 1;
    pointer-events: auto;
}

.plan-overlay.plan-closing {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

body.plan-open {
    overflow: hidden;
}

.plan-container {
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    background: #0f172a;
    border: 1px solid rgba(6, 214, 160, 0.15);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: plan-slide-up 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes plan-slide-up {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ── Close Button ── */

.plan-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #94a3b8;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 2;
}

.plan-close-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

/* ── Header ── */

.plan-header {
    position: relative;
    padding: 32px 24px 20px;
    background: linear-gradient(135deg, rgba(6, 214, 160, 0.1), rgba(14, 165, 233, 0.05));
    border-bottom: 1px solid rgba(6, 214, 160, 0.1);
}

.plan-header-title {
    font-size: 22px;
    font-weight: 800;
    font-family: 'Space Grotesk', sans-serif;
    background: linear-gradient(135deg, #06d6a0, #0ea5e9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.plan-header-subtitle {
    font-size: 13px;
    color: #94a3b8;
    margin-top: 2px;
}

.plan-quick-stats {
    display: flex;
    gap: 24px;
    margin-top: 16px;
}

.plan-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.plan-stat-value {
    font-size: 24px;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    background: linear-gradient(135deg, #06d6a0, #0ea5e9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.plan-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    margin-top: 2px;
}

/* ── Tabs ── */

.plan-tabs {
    display: flex;
    border-bottom: 1px solid rgba(6, 214, 160, 0.1);
    padding: 0 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.plan-tabs::-webkit-scrollbar {
    display: none;
}

.plan-tab {
    flex-shrink: 0;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
}

.plan-tab:hover {
    color: #e2e8f0;
}

.plan-tab.active {
    color: #06d6a0;
    border-bottom-color: #06d6a0;
}

/* ── Tab Content ── */

.plan-content {
    flex: 1;
    overflow-y: auto;
    min-height: 300px;
}

.plan-tab-panel {
    display: none;
    padding: 20px;
    animation: plan-fade-in 0.2s ease;
}

.plan-tab-panel.active {
    display: block;
}

@keyframes plan-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Session Cards ── */

.plan-sessions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.plan-session-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
}

.plan-session-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(6, 214, 160, 0.2);
}

.plan-session-card.completed {
    opacity: 0.5;
}

.plan-session-left {
    flex: 1;
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 0;
}

.plan-session-book-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    background: rgba(6, 214, 160, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #06d6a0;
}

.plan-session-info {
    flex: 1;
    min-width: 0;
}

.plan-session-title {
    font-weight: 600;
    color: #e2e8f0;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plan-session-meta {
    font-size: 12px;
    color: #94a3b8;
    font-family: 'JetBrains Mono', monospace;
    margin-top: 2px;
}

.plan-session-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.plan-session-progress {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    margin-top: 6px;
    overflow: hidden;
}

.plan-session-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #06d6a0, #0ea5e9);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.plan-session-play {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(6, 214, 160, 0.15);
    border: 1px solid rgba(6, 214, 160, 0.3);
    color: #06d6a0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.plan-session-play:hover {
    background: rgba(6, 214, 160, 0.25);
    box-shadow: 0 0 12px rgba(6, 214, 160, 0.3);
}

.plan-session-complete {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.plan-session-complete:hover {
    background: rgba(34, 197, 94, 0.2);
}

.plan-session-delete {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.plan-session-delete:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

/* ── Add Session Button & Form ── */

.plan-add-session-btn {
    width: 100%;
    padding: 14px;
    border: 2px dashed rgba(6, 214, 160, 0.3);
    border-radius: 14px;
    background: transparent;
    color: #06d6a0;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 12px;
}

.plan-add-session-btn:hover {
    background: rgba(6, 214, 160, 0.05);
    border-color: rgba(6, 214, 160, 0.5);
}

.plan-add-form {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px;
    margin-top: 12px;
}

.plan-select {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #e2e8f0;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.plan-select:focus {
    outline: none;
    border-color: rgba(6, 214, 160, 0.4);
}

.plan-select option {
    background: #1a2035;
    color: #e2e8f0;
}

.plan-duration-row {
    display: flex;
    gap: 8px;
    margin: 12px 0;
}

.plan-duration-btn {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #94a3b8;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.plan-duration-btn:hover {
    border-color: rgba(6, 214, 160, 0.3);
    color: #e2e8f0;
}

.plan-duration-btn.active {
    border-color: #06d6a0;
    background: rgba(6, 214, 160, 0.1);
    color: #06d6a0;
}

.plan-duration-custom {
    width: 70px;
    padding: 10px 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    color: #e2e8f0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    text-align: center;
}

.plan-duration-custom:focus {
    outline: none;
    border-color: rgba(6, 214, 160, 0.4);
}

.plan-form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
}

.plan-btn {
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.plan-btn-primary {
    background: linear-gradient(135deg, #06d6a0, #0ea5e9);
    color: white;
    box-shadow: 0 2px 10px rgba(6, 214, 160, 0.2);
}

.plan-btn-primary:hover {
    box-shadow: 0 4px 20px rgba(6, 214, 160, 0.4);
    transform: translateY(-1px);
}

.plan-btn-ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}

.plan-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
}

/* ── Week Chart ── */

.plan-week-chart {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    height: 180px;
    align-items: flex-end;
    padding: 16px 0;
}

.plan-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.plan-bar-track {
    width: 100%;
    max-width: 32px;
    height: 140px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.plan-bar-fill {
    width: 100%;
    background: linear-gradient(180deg, #06d6a0, #0ea5e9);
    border-radius: 6px;
    transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    min-height: 0;
}

.plan-bar-fill.plan-bar-today {
    box-shadow: 0 0 12px rgba(6, 214, 160, 0.4);
}

.plan-bar-label {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
}

.plan-bar-value {
    font-size: 10px;
    color: #94a3b8;
    font-family: 'JetBrains Mono', monospace;
}

/* ── Week Summary & Top Books ── */

.plan-week-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
}

.plan-week-stat {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.plan-week-stat-value {
    font-size: 28px;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    background: linear-gradient(135deg, #06d6a0, #0ea5e9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.plan-week-stat-label {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 4px;
}

.plan-section {
    margin-top: 20px;
}

.plan-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #e2e8f0;
    margin-bottom: 12px;
    font-family: 'Space Grotesk', sans-serif;
}

.plan-top-books {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.plan-top-book-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    transition: background 0.2s ease;
}

.plan-top-book-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.plan-top-book-rank {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(6, 214, 160, 0.15);
    color: #06d6a0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}

.plan-top-book-title {
    flex: 1;
    font-size: 13px;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plan-top-book-time {
    font-size: 12px;
    color: #94a3b8;
    font-family: 'JetBrains Mono', monospace;
    flex-shrink: 0;
}

/* ── Goals ── */

.plan-goals-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.plan-goal-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 16px;
    transition: all 0.2s ease;
}

.plan-goal-card:hover {
    border-color: rgba(6, 214, 160, 0.2);
}

.plan-goal-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.plan-goal-title {
    font-weight: 600;
    font-size: 14px;
    color: #e2e8f0;
}

.plan-goal-meta {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 4px;
}

.plan-goal-progress {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    margin-top: 12px;
    overflow: hidden;
}

.plan-goal-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #06d6a0, #0ea5e9);
    border-radius: 6px;
    transition: width 0.5s ease;
}

.plan-goal-delete {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.plan-goal-delete:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

.plan-add-goal-btn {
    width: 100%;
    padding: 14px;
    border: 2px dashed rgba(6, 214, 160, 0.3);
    border-radius: 14px;
    background: transparent;
    color: #06d6a0;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 12px;
}

.plan-add-goal-btn:hover {
    background: rgba(6, 214, 160, 0.05);
    border-color: rgba(6, 214, 160, 0.5);
}

.plan-goal-form {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px;
    margin-top: 12px;
}

.plan-goal-fields {
    margin-top: 12px;
}

.plan-input {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #e2e8f0;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
}

.plan-input:focus {
    outline: none;
    border-color: rgba(6, 214, 160, 0.4);
}

.plan-input-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.plan-input-label {
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 4px;
    display: block;
}

/* ── Empty State ── */

.plan-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #94a3b8;
}

.plan-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.plan-empty-state h3 {
    font-size: 16px;
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 4px;
}

.plan-empty-state p {
    font-size: 13px;
    color: #64748b;
}

/* ── Pomodoro Floating Timer ── */

.plan-pomodoro {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9500;
    background: #0f172a;
    border: 1px solid rgba(6, 214, 160, 0.3);
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(6, 214, 160, 0.1);
    min-width: 200px;
    text-align: center;
}

.plan-pomo-title {
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plan-pomo-timer {
    font-size: 36px;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    color: #06d6a0;
    text-shadow: 0 0 20px rgba(6, 214, 160, 0.3);
}

.plan-pomo-controls {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    justify-content: center;
}

.plan-pomo-btn {
    padding: 6px 16px;
    border-radius: 8px;
    background: rgba(6, 214, 160, 0.1);
    border: 1px solid rgba(6, 214, 160, 0.2);
    color: #06d6a0;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.plan-pomo-btn:hover {
    background: rgba(6, 214, 160, 0.2);
}

.plan-pomo-btn-stop {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

.plan-pomo-btn-stop:hover {
    background: rgba(239, 68, 68, 0.2);
}

/* ── Skeleton Loading ── */

.plan-skeleton {
    padding: 20px;
}

.plan-skeleton-line {
    height: 14px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    margin-bottom: 12px;
    animation: plan-shimmer 1.5s infinite;
}

.plan-skeleton-line:nth-child(1) {
    width: 60%;
}

.plan-skeleton-line:nth-child(2) {
    width: 80%;
}

.plan-skeleton-line:nth-child(3) {
    width: 45%;
}

.plan-skeleton-line:nth-child(4) {
    width: 70%;
}

@keyframes plan-shimmer {
    0% { opacity: 0.3; }
    50% { opacity: 0.6; }
    100% { opacity: 0.3; }
}

/* ── Responsive ── */

@media (max-width: 640px) {
    .plan-container {
        max-height: 100vh;
        border-radius: 0;
        max-width: 100%;
    }

    .plan-header {
        padding: 24px 16px 16px;
    }

    .plan-quick-stats {
        gap: 12px;
    }

    .plan-stat-value {
        font-size: 18px;
    }

    .plan-tab-panel {
        padding: 16px;
    }

    .plan-duration-row {
        flex-wrap: wrap;
    }

    .plan-duration-btn {
        flex: 0 0 calc(50% - 4px);
    }

    .plan-week-chart {
        height: 140px;
    }

    .plan-bar-track {
        height: 100px;
    }

    .plan-week-summary {
        grid-template-columns: 1fr;
    }

    .plan-pomodoro {
        bottom: 16px;
        right: 16px;
        left: 16px;
        min-width: auto;
    }
}

/* ── Light Theme ── */

body.theme-light .plan-container {
    background: rgba(255, 255, 255, 0.98);
    border-color: #e2e8f0;
}

body.theme-light .plan-header {
    background: linear-gradient(135deg, rgba(6, 214, 160, 0.05), rgba(14, 165, 233, 0.03));
    border-bottom-color: #e2e8f0;
}

body.theme-light .plan-close-btn {
    background: rgba(0, 0, 0, 0.05);
    border-color: #e2e8f0;
    color: #64748b;
}

body.theme-light .plan-tabs {
    border-bottom-color: #e2e8f0;
}

body.theme-light .plan-tab {
    color: #64748b;
}

body.theme-light .plan-tab.active {
    color: #06d6a0;
    border-bottom-color: #06d6a0;
}

body.theme-light .plan-session-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: #e2e8f0;
}

body.theme-light .plan-session-title {
    color: #1e293b;
}

body.theme-light .plan-select {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #1e293b;
}

body.theme-light .plan-select option {
    background: #ffffff;
    color: #1e293b;
}

body.theme-light .plan-duration-btn {
    background: rgba(0, 0, 0, 0.02);
    border-color: #e2e8f0;
    color: #64748b;
}

body.theme-light .plan-bar-track {
    background: rgba(0, 0, 0, 0.04);
}

body.theme-light .plan-week-stat {
    background: rgba(0, 0, 0, 0.02);
    border-color: #e2e8f0;
}

body.theme-light .plan-goal-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: #e2e8f0;
}

body.theme-light .plan-add-form {
    background: rgba(0, 0, 0, 0.02);
    border-color: #e2e8f0;
}

body.theme-light .plan-input {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #1e293b;
}

body.theme-light .plan-pomodoro {
    background: #ffffff;
    border-color: rgba(6, 214, 160, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

body.theme-light .plan-skeleton-line {
    background: rgba(0, 0, 0, 0.06);
}

/* ── Sepia Theme ── */

body.theme-sepia .plan-container {
    background: #2c2418;
    border-color: rgba(217, 169, 99, 0.15);
}

body.theme-sepia .plan-header {
    background: linear-gradient(135deg, rgba(217, 169, 99, 0.1), rgba(6, 214, 160, 0.05));
    border-bottom-color: rgba(217, 169, 99, 0.1);
}

body.theme-sepia .plan-tab.active {
    color: #d9a963;
    border-bottom-color: #d9a963;
}

body.theme-sepia .plan-session-card {
    background: rgba(217, 169, 99, 0.03);
    border-color: rgba(217, 169, 99, 0.1);
}

body.theme-sepia .plan-stat-value {
    background: linear-gradient(135deg, #d9a963, #06d6a0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ═══════════════════════════════════════════════════════════════
   REGION MANAGER PANEL (rgn-*)
   ═══════════════════════════════════════════════════════════════ */

/* Panel Header */
.rgn-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0 12px;
    border-bottom: 1px solid var(--neuro-border, rgba(255,255,255,0.08));
    margin-bottom: 12px;
}
.rgn-header-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--neuro-text-primary, #e2e8f0);
}
.rgn-header-count {
    font-size: 12px;
    color: var(--neuro-text-muted, #64748b);
    background: var(--neuro-bg-hover, rgba(255,255,255,0.06));
    padding: 4px 10px;
    border-radius: 12px;
}

/* Region Item Card */
.rgn-item {
    background: var(--neuro-bg-surface, rgba(255,255,255,0.04));
    border: 1px solid var(--neuro-border, rgba(255,255,255,0.08));
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 8px;
    transition: border-color 0.2s, background 0.2s;
}
.rgn-item--current {
    border-color: var(--neuro-cyan, #06d6a0);
    background: rgba(6, 214, 160, 0.06);
}

/* Item Header: badge + info */
.rgn-item-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.rgn-badge {
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--neuro-bg-hover, rgba(255,255,255,0.08));
    color: var(--neuro-text-secondary, #94a3b8);
    font-weight: 700;
    font-size: 13px;
}
.rgn-badge--active {
    background: var(--neuro-cyan, #06d6a0);
    color: var(--neuro-bg-deep, #080b14);
}
.rgn-item-info {
    flex: 1;
    min-width: 0;
}
.rgn-item-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--neuro-text-primary, #e2e8f0);
    display: block;
}
.rgn-item-meta {
    font-size: 11px;
    color: var(--neuro-text-muted, #64748b);
    display: block;
    margin-top: 1px;
}

/* Progress Bar */
.rgn-progress-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--neuro-bg-hover, rgba(255,255,255,0.06));
    margin-bottom: 8px;
    overflow: hidden;
}
.rgn-progress-fill {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--neuro-cyan, #06d6a0), var(--neuro-blue, #3b82f6));
    transition: width 0.3s ease;
    min-width: 0;
}

/* Action Buttons Row */
.rgn-item-actions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.rgn-action {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--neuro-bg-hover, rgba(255,255,255,0.06));
    border: none;
    cursor: pointer;
    color: var(--neuro-text-secondary, #94a3b8);
    transition: all 0.15s ease;
    padding: 0;
}
.rgn-action:hover {
    background: var(--neuro-cyan, #06d6a0);
    color: var(--neuro-bg-deep, #080b14);
    transform: scale(1.08);
}
.rgn-action:active {
    transform: scale(0.95);
}
.rgn-action--play:hover {
    background: var(--neuro-green, #22c55e);
}
.rgn-action--restart:hover {
    background: var(--neuro-blue, #3b82f6);
    color: white;
}
.rgn-action--game:hover {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: white;
}
.rgn-action--danger:hover {
    background: var(--neuro-red, #ef4444);
    color: white;
}

/* ── Minigame Picker ── */
.rgn-picker-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    background: var(--neuro-bg-surface, rgba(255,255,255,0.04));
    border: 1px solid var(--neuro-border, rgba(255,255,255,0.08));
    color: var(--neuro-text-primary, #e2e8f0);
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 6px;
    font-size: 14px;
}
.rgn-picker-option:hover {
    border-color: var(--neuro-cyan, #06d6a0);
    background: rgba(6, 214, 160, 0.06);
}
.rgn-picker-all {
    border-color: var(--neuro-cyan, #06d6a0);
    background: rgba(6, 214, 160, 0.04);
}
.rgn-picker-label {
    flex: 1;
    font-weight: 500;
}
/* Selos no picker de jogos: PRO (exclusivo) + "usa créditos" (consome IA).
   Nome próprio (.rgn-tag*) pra NÃO colidir com .rgn-badge (badge circular de
   região, que tem override por tema e vira 24px no mobile). */
.rgn-tag {
    display: inline-block; vertical-align: middle;
    margin-left: 6px; padding: 1px 6px; border-radius: 6px;
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.03em;
    text-transform: uppercase; white-space: nowrap; line-height: 1.5;
}
.rgn-tag-pro {
    background: linear-gradient(135deg, #f59e0b, #f97316); color: #1a1206;
}
.rgn-tag-ai {
    background: rgba(6, 214, 160, 0.14); color: var(--neuro-cyan, #06d6a0);
    border: 1px solid rgba(6, 214, 160, 0.3); text-transform: none; letter-spacing: 0;
}
/* Contraste em temas claros: ciano sobre fundo claro precisa de texto mais escuro */
body.theme-light .rgn-tag-ai { background: rgba(6, 214, 160, 0.12); color: #047857; border-color: rgba(4, 120, 87, 0.35); }
body.theme-sepia .rgn-tag-ai { background: rgba(6, 148, 110, 0.12); color: #05614a; border-color: rgba(5, 97, 74, 0.35); }
/* Game picker: grouped lineup (active-recall games first, classics below) */
.rgn-picker-group {
    font-size: 12px;
    font-weight: 700;
    color: var(--neuro-text-muted, #94a3b8);
    padding: 12px 2px 4px;
    letter-spacing: 0.2px;
}
.rgn-picker-group:first-of-type { padding-top: 2px; }
.rgn-picker-emoji {
    font-size: 20px;
    line-height: 1;
    width: 26px;
    text-align: center;
    flex-shrink: 0;
}
.rgn-picker-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    text-align: left;
}
.rgn-picker-sub {
    font-size: 11.5px;
    font-weight: 400;
    color: var(--neuro-text-muted, #94a3b8);
    line-height: 1.3;
}

/* ── Light Theme ── */
body.theme-light .rgn-header-title { color: #1e293b; }
body.theme-light .rgn-header-count { background: #f1f5f9; color: #475569; }
body.theme-light .rgn-item { background: #f8fafc; border-color: #e2e8f0; }
body.theme-light .rgn-item--current { background: rgba(6, 214, 160, 0.06); border-color: #059669; }
body.theme-light .rgn-badge { background: #e2e8f0; color: #475569; }
body.theme-light .rgn-badge--active { background: #059669; color: white; }
body.theme-light .rgn-item-title { color: #1e293b; }
body.theme-light .rgn-item-meta { color: #64748b; }
body.theme-light .rgn-progress-bar { background: #e2e8f0; }
body.theme-light .rgn-action { background: #f1f5f9; color: #475569; }
body.theme-light .rgn-picker-option { background: #f8fafc; border-color: #e2e8f0; color: #1e293b; }
body.theme-light .rgn-picker-option:hover { background: rgba(6, 214, 160, 0.06); border-color: #059669; }
body.theme-light .rgn-picker-all { background: rgba(6, 214, 160, 0.04); border-color: #059669; }

/* ── Sepia Theme ── */
body.theme-sepia .rgn-header-title { color: #3d2e1c; }
body.theme-sepia .rgn-header-count { background: #e8dcc8; color: #6b5b47; }
body.theme-sepia .rgn-item { background: #faf5eb; border-color: #d4c5a0; }
body.theme-sepia .rgn-item--current { background: rgba(6, 214, 160, 0.06); border-color: #059669; }
body.theme-sepia .rgn-badge { background: #e8dcc8; color: #6b5b47; }
body.theme-sepia .rgn-badge--active { background: #059669; color: white; }
body.theme-sepia .rgn-item-title { color: #3d2e1c; }
body.theme-sepia .rgn-item-meta { color: #8b7355; }
body.theme-sepia .rgn-progress-bar { background: #e8dcc8; }
body.theme-sepia .rgn-action { background: #e8dcc8; color: #6b5b47; }
body.theme-sepia .rgn-picker-option { background: #faf5eb; border-color: #d4c5a0; color: #3d2e1c; }

/* ── Responsive ── */
@media (max-width: 640px) {
    .rgn-item { padding: 10px; }
    .rgn-item-actions { gap: 3px; }
    .rgn-action { width: 28px; height: 28px; border-radius: 6px; }
    .rgn-badge { width: 24px; height: 24px; min-width: 24px; font-size: 11px; }
    .rgn-item-title { font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════════
   REFLOW MODAL — Responsive (Modo Texto Puro)
   ═══════════════════════════════════════════════════════════════ */

/* Barra de controles scrollável horizontal */
.reflow-controls-row {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
.reflow-controls-row::-webkit-scrollbar { display: none; }

/* Mobile: ajustes de padding e texto */
@media (max-width: 640px) {
    #reflow-modal .reflow-header { padding: 0; }
    #reflow-modal .reflow-controls-row {
        gap: 6px;
        padding-left: 12px;
        padding-right: 12px;
        padding-bottom: 8px;
    }
    #reflow-content { padding: 12px !important; }
    #reflow-text-container { font-size: 18px; /* sem !important — permite ajuste dinâmico via JS */ }
    /* Footer compacto */
    #reflow-modal > div:last-child { padding: 8px 12px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MINIGAME POLISH — feedback tátil + microinteração + a11y
   Research: gamification com micro-rewards + spaced rep boosts retention
   ═══════════════════════════════════════════════════════════════ */

/* Botão de opção: hover mais suave + active tátil + foco a11y */
.option-btn:focus-visible {
    outline: 3px solid var(--neuro-cyan, #06d6a0) !important;
    outline-offset: 3px !important;
}

/* Feedback correto: pulso + check icon + glow verde */
@keyframes optionCorrectPulse {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    50%  { transform: scale(1.06); box-shadow: 0 0 0 16px rgba(34, 197, 94, 0); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.option-btn.correct-flash {
    animation: optionCorrectPulse 0.6s ease-out !important;
    position: relative;
}
.option-btn.correct-flash::after {
    content: "✓";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 800;
    opacity: 0;
    animation: fadeInScale 0.3s 0.15s forwards;
}

/* Feedback incorreto: shake + X icon + glow vermelho */
@keyframes optionIncorrectShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
.option-btn.incorrect-flash {
    animation: optionIncorrectShake 0.45s ease-out !important;
    position: relative;
}
.option-btn.incorrect-flash::after {
    content: "✕";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 800;
    opacity: 0;
    animation: fadeInScale 0.3s 0.15s forwards;
}

@keyframes fadeInScale {
    from { opacity: 0; transform: translateY(-50%) scale(0.5); }
    to   { opacity: 1; transform: translateY(-50%) scale(1); }
}

/* Combo indicator: cresce com intensidade — dopamina visual */
.combo-fire {
    animation: comboFire 0.5s ease-out;
    background: linear-gradient(135deg, #fb923c, #f59e0b, #fde047);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 20px rgba(251, 146, 60, 0.6);
}
@keyframes comboFire {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.4) rotate(-5deg); }
    60%  { transform: scale(1.2) rotate(3deg); }
    100% { transform: scale(1)   rotate(0); }
}

/* Floating points: sobe + fade pra dar feedback sensorial */
.floating-points {
    pointer-events: none;
    position: fixed;
    z-index: 10100;
    font-size: 24px;
    font-weight: 800;
    color: var(--neuro-cyan, #06d6a0);
    text-shadow: 0 0 12px rgba(6, 214, 160, 0.6);
    animation: floatUp 1s ease-out forwards;
}
@keyframes floatUp {
    0%   { opacity: 0; transform: translateY(0) scale(0.6); }
    20%  { opacity: 1; transform: translateY(-12px) scale(1.1); }
    100% { opacity: 0; transform: translateY(-60px) scale(0.9); }
}

/* ═══════════════════════════════════════════════════════════════
   READING EFFICIENCY — BeeLine-style line gradient
   Research: BeeLine demonstrou melhora de 20-30% na velocidade de leitura.
   Mais robusto que Bionic Reading. Activate via body.beeline-mode toggle.
   ═══════════════════════════════════════════════════════════════ */
body.beeline-mode .word-block:nth-child(5n+1)  { color: #ef4444; }
body.beeline-mode .word-block:nth-child(5n+2)  { color: #f97316; }
body.beeline-mode .word-block:nth-child(5n+3)  { color: #eab308; }
body.beeline-mode .word-block:nth-child(5n+4)  { color: #22c55e; }
body.beeline-mode .word-block:nth-child(5n+5)  { color: #3b82f6; }
body.beeline-mode .word-block.active {
    color: var(--highlight-color, #00ffff) !important;
    background: rgba(0, 255, 255, 0.15);
}

/* ═══════════════════════════════════════════════════════════════
   DYSLEXIA-FRIENDLY MODE — one-tap preset
   Lexend font + line-height generoso + cream bg + character spacing.
   Ativa via body.dyslexia-mode (toggle no menu de Ajustes).
   ═══════════════════════════════════════════════════════════════ */
/* Cream/off-white de conforto da dislexia SÓ no tema Claro (default grátis).
   Antes ficava em body.dyslexia-mode (sem o tema) e, por vir depois no CSS,
   SOBRESCREVIA Escuro/Sépia — então "alternar tema não funcionava" com a
   dislexia ligada. Escopando em .theme-light, o tema Escuro/Sépia vence e a
   troca de tema passa a funcionar; a FONTE da dislexia continua universal. */
body.dyslexia-mode.theme-light {
    --neuro-bg-base: #fbf6e9;        /* cream — reduz halation pra dislexia */
    --neuro-bg-deep: #f5efde;
    --neuro-bg-raised: #f0e9d2;
    --neuro-bg-surface: #ebe2c4;
    --neuro-text-primary: #2a2520;
    --neuro-text-secondary: #5a5347;
    background: var(--neuro-bg-base) !important;
}
body.dyslexia-mode,
body.dyslexia-mode * {
    font-family: 'Lexend', 'Atkinson Hyperlegible', 'Outfit', system-ui, sans-serif !important;
    letter-spacing: 0.04em;
    word-spacing: 0.16em;
}
body.dyslexia-mode p,
body.dyslexia-mode .word-block,
body.dyslexia-mode #pdf-container,
body.dyslexia-mode #reflow-text-container {
    line-height: 1.8;
}
body.dyslexia-mode .page-wrapper canvas {
    /* Reduz contraste do PDF pra menos cansaço visual */
    filter: contrast(0.95) brightness(0.97);
}

/* Toast de erro — visual mais agressivo (vermelho + ícone) */
.toast.error,
.toast.toast-error {
    background: linear-gradient(135deg, #dc2626, #991b1b) !important;
    border-left: 4px solid #fef2f2 !important;
}
.toast.warning,
.toast.toast-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    border-left: 4px solid #fef3c7 !important;
}

/* ═══════════════════════════════════════════════════════════════
   ACTION BAR + Floating socratic — suprimidos quando ferramenta de seleção ativa
   Bug reportado: "ao usar ferramenta e clicar, popup aparece automaticamente"
   ═══════════════════════════════════════════════════════════════ */
body.select-mode #neuro-action-bar,
body.sniper-active #neuro-action-bar,
body.smart-hover-active #neuro-action-bar,
body.holofote-active #neuro-action-bar,
body.ruler-active #neuro-action-bar,
body.birds-eye-active #neuro-action-bar,
body.playing #neuro-action-bar,
body.zen-mode #neuro-action-bar {
    display: none !important;
}
body.select-mode #socratic-floating-btn,
body.sniper-active #socratic-floating-btn,
body.smart-hover-active #socratic-floating-btn,
body.holofote-active #socratic-floating-btn,
body.ruler-active #socratic-floating-btn,
body.playing #socratic-floating-btn,
body.zen-mode #socratic-floating-btn {
    display: none !important;
}

/* Base: action-bar buttons (genérico — Decifrar/Destacar/Copiar/Compartilhar)
   Antes só havia rules pras variants (--read, --flashcard); botões "neutros"
   pegavam estilo default do browser. Microinteractions: hover + active + focus. */
.neuro-action-bar__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--neuro-text-primary, #e2e8f0);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.12s ease-out, background 0.18s, border-color 0.18s;
    outline: none;
}
.neuro-action-bar__btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(6, 214, 160, 0.3);
}
.neuro-action-bar__btn:active {
    /* Tactile feedback: button "afunda" levemente quando clicado */
    transform: scale(0.95);
}
.neuro-action-bar__btn:focus-visible {
    /* Keyboard nav: outline cyan claro pra teclistas */
    outline: 2px solid var(--neuro-cyan, #06d6a0);
    outline-offset: 2px;
}
.neuro-action-bar__btn-icon {
    display: inline-flex;
    align-items: center;
}
.neuro-action-bar__btn-label {
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Botão "Ler aqui" — primary action verde com play icon */
.neuro-action-bar__btn--read {
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
    color: white !important;
    font-weight: 700 !important;
}
.neuro-action-bar__btn--read .neuro-action-bar__btn-icon { color: white; }

/* Botão "Flashcard" — active learning hook (cyan→indigo, sub-primary) */
.neuro-action-bar__btn--flashcard {
    background: linear-gradient(135deg, #06b6d4, #4f46e5) !important;
    color: white !important;
    font-weight: 700 !important;
}
.neuro-action-bar__btn--flashcard .neuro-action-bar__btn-icon { color: white; font-size: 16px; }

/* Floating socratic button — pequeno, contextual */
.socratic-floating-btn {
    z-index: 9000;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--neuro-purple, #a855f7), #7c3aed);
    color: white;
    border: none;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.4);
    animation: socFloat 0.25s ease-out;
}
@keyframes socFloat {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Socratic modal */
.socratic-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); /* Safari iOS quirk */
    animation: socModalFade 0.2s ease-out;
}
@keyframes socModalFade { from { opacity: 0; } to { opacity: 1; } }
.socratic-card {
    max-width: 480px;
    width: 100%;
    background: var(--neuro-bg-raised, #0f1629);
    border-radius: 20px;
    padding: 24px;
    border: 1px solid rgba(168, 85, 247, 0.3);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    color: var(--neuro-text-primary, #e8e6e3);
}
.socratic-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.socratic-icon { font-size: 28px; }
.socratic-header h3 { flex: 1; margin: 0; font-size: 18px; font-weight: 700; }
.socratic-close {
    background: rgba(255,255,255,0.06); border: none; color: var(--neuro-text-secondary);
    width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 20px; line-height: 1;
}
.socratic-context {
    font-size: 13px; color: var(--neuro-text-secondary); font-style: italic;
    background: rgba(255,255,255,0.03); padding: 8px 12px; border-radius: 8px;
    border-left: 3px solid var(--neuro-purple, #a855f7); margin: 8px 0 16px;
}
.socratic-questions { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 12px; }
.socratic-q { display: flex; gap: 12px; align-items: flex-start; }
.socratic-q-num {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(168, 85, 247, 0.15); color: var(--neuro-purple, #a855f7);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; flex-shrink: 0;
}
.socratic-q-text { font-size: 15px; line-height: 1.5; padding-top: 4px; }
.socratic-tip { font-size: 12px; color: var(--neuro-text-secondary); margin: 12px 0 16px; opacity: 0.85; }
.socratic-actions { display: flex; gap: 12px; }
.socratic-skip {
    flex: 0 0 auto; padding: 10px 14px; border-radius: 10px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    color: var(--neuro-text-secondary); font-weight: 600; cursor: pointer;
}
.socratic-flashcard {
    flex: 1; padding: 10px 14px; border-radius: 10px;
    background: linear-gradient(135deg, var(--neuro-purple, #a855f7), #7c3aed);
    border: none; color: white; font-weight: 700; cursor: pointer;
}

/* Review Queue — badge no header + modal */
.review-queue-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 12px; margin-left: 8px;
    background: linear-gradient(135deg, rgba(6, 214, 160, 0.18), rgba(14, 165, 233, 0.12));
    border: 1px solid rgba(6, 214, 160, 0.3);
    color: var(--neuro-cyan, #06d6a0);
    font-size: 13px; font-weight: 700;
    cursor: pointer; transition: transform 0.15s, opacity 0.3s;
}
.review-queue-badge:hover { transform: scale(1.05); }
/* Cognitive Load: durante a leitura ativa o badge SOME (opacity 0 + sem clique)
   pra não incomodar/competir com o highlight — reaparece suave ao pausar. Antes
   ficava em 0.35 (ainda distraía). transition no .review-queue-badge base. */
body.playing .review-queue-badge {
    opacity: 0;
    pointer-events: none;
}
.review-queue-modal {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px; background: rgba(0,0,0,0.75); backdrop-filter: blur(8px);
}
.rq-card {
    max-width: 520px; width: 100%; background: var(--neuro-bg-raised, #0f1629);
    border-radius: 20px; padding: 24px; color: var(--neuro-text-primary, #e8e6e3);
    border: 1px solid rgba(6, 214, 160, 0.25);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    /* Sem isto, um card com frente/verso longos (ex.: gabarito de IA) estoura a
       viewport e "cobre a tela toda". Limita a altura e rola por dentro. */
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* "Meus Flashcards" — lista de todos os cards (ReviewQueue.openBrowser) */
.rq-browse-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
/* Agrupamento por origem (documento/texto) */
.rq-browse-group { display: flex; flex-direction: column; gap: 8px; }
.rq-browse-group + .rq-browse-group { margin-top: 14px; }
.rq-browse-group-head {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 700; color: var(--neuro-text-secondary, #94a3b8);
    text-transform: none; letter-spacing: 0; padding: 2px 2px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.rq-browse-group-count {
    margin-left: auto; font-size: 11px; font-weight: 700;
    background: rgba(148,163,184,0.15); color: #94a3b8;
    padding: 1px 8px; border-radius: 10px;
}
.rq-browse-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 12px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
}
.rq-browse-texts { flex: 1; min-width: 0; cursor: pointer; border-radius: 8px; }
.rq-browse-texts:hover { background: rgba(255,255,255,0.04); }
.rq-browse-front { font-weight: 700; font-size: 13px; color: var(--neuro-text-primary, #e8e6e3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rq-browse-back { font-size: 12px; color: var(--neuro-text-secondary, #94a3b8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.rq-browse-due { flex-shrink: 0; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: rgba(148,163,184,0.15); color: #94a3b8; }
.rq-browse-due.is-due { background: rgba(6,214,160,0.16); color: var(--neuro-cyan, #06d6a0); }
.rq-browse-del { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; border: none; background: rgba(255,255,255,0.05); color: #94a3b8; cursor: pointer; font-size: 14px; }
.rq-browse-del:hover { background: rgba(239,68,68,0.15); color: #ef4444; }
.rq-browse-empty { text-align: center; color: var(--neuro-text-secondary, #94a3b8); font-size: 14px; padding: 24px 8px; line-height: 1.6; }

/* Aviso "créditos congelados" no painel de assinatura (PRO cancelado/vencido) */
.dash-sub-frozen {
    background: rgba(56,189,248,0.10);
    border: 1px solid rgba(56,189,248,0.28);
    color: #7dd3fc;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 12px;
}
.dash-sub-frozen strong { color: #e0f2fe; }

/* ==================== COACH DE LEITURA ==================== */
.coach-modal {
    position: fixed; inset: 0; z-index: 10050;
    display: none; align-items: flex-end; justify-content: center;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
}
.coach-modal.open { display: flex; }
@media (min-width: 640px) { .coach-modal { align-items: center; padding: 20px; } }

.coach-card {
    width: 100%; max-width: 480px; max-height: 88dvh;
    display: flex; flex-direction: column;
    background: var(--neuro-bg-raised, #0f1629);
    border: 1px solid rgba(6,214,160,0.25);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 50px rgba(0,0,0,0.5);
    overflow: hidden;
}
@media (min-width: 640px) { .coach-card { border-radius: 20px; } }

.coach-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0;
}
.coach-head-title { font-weight: 800; font-family: 'Space Grotesk','Outfit',sans-serif; color: var(--neuro-text-primary, #e8e6e3); font-size: 16px; }
.coach-close { background: rgba(255,255,255,0.06); border: none; color: var(--neuro-text-secondary,#94a3b8); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 15px; }
.coach-close:hover { background: rgba(255,255,255,0.12); }

.coach-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.coach-msg { max-width: 92%; font-size: 14px; line-height: 1.55; }
.coach-msg--coach {
    align-self: flex-start;
    background: rgba(6,214,160,0.08); border: 1px solid rgba(6,214,160,0.16);
    color: var(--neuro-text-primary, #e8e6e3);
    border-radius: 14px 14px 14px 4px; padding: 12px 14px;
}
.coach-msg--user {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--neuro-cyan,#06d6a0), var(--neuro-blue,#0ea5e9));
    color: #04241a; font-weight: 600;
    border-radius: 14px 14px 4px 14px; padding: 10px 14px;
}
.coach-answer-title { font-weight: 700; margin: 0 0 6px; color: #fff; }
.coach-tips { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.coach-tips li { margin: 0; }
.coach-tips strong, .coach-msg strong { color: #fff; }

.coach-chips-label { font-size: 12px; color: var(--neuro-text-secondary,#94a3b8); margin-bottom: 8px; }
.coach-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.coach-chip {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    color: var(--neuro-text-primary,#e8e6e3); border-radius: 999px;
    padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s;
}
.coach-chip:hover { background: rgba(6,214,160,0.14); border-color: rgba(6,214,160,0.4); }

.coach-tools { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.coach-tool-btn {
    text-align: left; background: rgba(6,214,160,0.12); border: 1px solid rgba(6,214,160,0.3);
    color: var(--neuro-cyan,#06d6a0); border-radius: 12px; padding: 10px 14px;
    font-size: 13px; font-weight: 700; cursor: pointer; transition: all .15s;
}
.coach-tool-btn:hover { background: rgba(6,214,160,0.22); }
.coach-typing { color: var(--neuro-text-secondary,#94a3b8); font-style: italic; }

.coach-input-area {
    display: flex; gap: 8px; padding: 12px; flex-shrink: 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.coach-input-area input {
    flex: 1; min-width: 0; background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 12px;
    padding: 11px 14px; color: var(--neuro-text-primary,#e8e6e3); font-size: 14px; outline: none;
}
.coach-input-area input:focus { border-color: rgba(6,214,160,0.5); }
.coach-send {
    flex-shrink: 0; background: linear-gradient(135deg, var(--neuro-cyan,#06d6a0), var(--neuro-blue,#0ea5e9));
    color: #04241a; font-weight: 800; border: none; border-radius: 12px; padding: 11px 16px; cursor: pointer;
}
.coach-send:hover { filter: brightness(1.05); }

body.theme-light .coach-card { background: #fff; }
body.theme-light .coach-head-title, body.theme-light .coach-answer-title { color: #0f172a; }
body.theme-light .coach-msg--coach { color: #1e293b; }

/* ==================== FIM DE SESSÃO (session-summary) ==================== */
.ss-modal {
    position: fixed; inset: 0; z-index: 10040;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(6px);
    padding: 20px;
    animation: ssFade 0.22s ease-out;
}
@keyframes ssFade { from { opacity: 0; } to { opacity: 1; } }
.ss-card {
    width: 100%; max-width: 380px; text-align: center;
    background: var(--neuro-bg-raised, #0f1629);
    border: 1px solid rgba(6, 214, 160, 0.25);
    border-radius: 20px; padding: 26px 22px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.ss-icon { font-size: 3rem; }
.ss-title {
    font-family: 'Space Grotesk', 'Outfit', sans-serif; font-weight: 800;
    font-size: 1.35rem; color: var(--neuro-text-primary, #e8e6e3); margin: 8px 0 16px;
}
.ss-stats { display: flex; justify-content: center; gap: 12px; margin-bottom: 14px; }
.ss-stat {
    background: rgba(148, 163, 184, 0.08); border-radius: 12px; padding: 10px 14px;
    display: flex; flex-direction: column; gap: 2px; min-width: 76px;
}
.ss-stat b { font-size: 1.1rem; color: var(--neuro-cyan, #06d6a0); }
.ss-stat span { font-size: 0.7rem; color: var(--neuro-text-secondary, #94a3b8); }
.ss-stat--due b { color: #fbbf24; }
.ss-hint { font-size: 0.85rem; color: var(--neuro-text-secondary, #94a3b8); margin: 0 0 16px; line-height: 1.5; }
.ss-primary {
    display: block; width: 100%; border: 0; cursor: pointer; margin-bottom: 10px;
    background: linear-gradient(135deg, var(--neuro-cyan, #06d6a0), var(--neuro-blue, #0ea5e9));
    color: #04241a; font-weight: 800; font-size: 0.95rem; padding: 13px; border-radius: 12px;
}
.ss-primary:hover { filter: brightness(1.05); }
.ss-secondary {
    display: block; width: 100%; cursor: pointer; margin-bottom: 10px;
    border: 1px solid rgba(6, 214, 160, 0.4); border-radius: 12px;
    background: rgba(6, 214, 160, 0.1); color: var(--neuro-cyan, #06d6a0);
    font-weight: 700; font-size: 0.92rem; padding: 12px;
}
.ss-secondary:hover { background: rgba(6, 214, 160, 0.18); }
.ss-ghost {
    display: block; width: 100%; border: 0; background: transparent; cursor: pointer;
    color: var(--neuro-text-secondary, #94a3b8); font-weight: 600; font-size: 0.85rem; padding: 8px;
}
.ss-ghost:hover { color: var(--neuro-text-primary, #e8e6e3); }
body.theme-light .ss-card { background: #fff; }
body.theme-light .ss-stat b { color: #047857; }
body.theme-light .ss-stat--due b { color: #b45309; }
body.theme-light .ss-secondary { color: #047857; border-color: rgba(4, 120, 87, 0.4); background: rgba(4, 120, 87, 0.08); }

/* ==================== BIBLIOTECA VAZIA (1ª tela) — CONTRASTE ==================== */
/* Auditoria visual 2026-07-01: os títulos usavam inline color:white e ficavam
   INVISÍVEIS no tema claro (branco sobre #F0F2F5 = 1.1:1; WCAG pede 4.5:1) —
   na PRIMEIRA tela que um usuário novo vê. Classe temável resolve. */
.empty-lib-heading { color: #fff; }
body.theme-light .empty-lib-heading { color: #0f172a; }

/* Cards de demo e zona de upload: fundos translúcidos brancos desenhados pro
   tema escuro somem no claro — vira cartão branco com sombra. !important
   porque o background vem inline no template. */
body.theme-light .demo-card {
    background: #ffffff !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}
body.theme-light .upload-zone {
    background: rgba(6, 214, 160, 0.05) !important;
}

/* Varredura de contraste (tema claro) — cores neon inline calibradas pro
   escuro. !important porque as cores vêm inline nos templates. */
body.theme-light #sidebar-socratic-state {
    color: #15803d !important;              /* "Ligado" verde 2.3:1 → 4.8:1 */
    background: rgba(34, 197, 94, 0.14) !important;
}
body.theme-light .colar-texto-label { color: #6d28d9 !important; } /* roxo a78bfa 2.4:1 → 7:1 */

.rq-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.rq-header h3 { flex: 1; margin: 0; font-size: 18px; }
.rq-progress {
    background: rgba(6,214,160,0.15); color: var(--neuro-cyan, #06d6a0);
    padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
}
.rq-close {
    background: rgba(255,255,255,0.06); border: none; color: var(--neuro-text-secondary);
    width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 20px;
}
/* Origem do card (de qual documento/texto veio) — mostrada na revisão */
.rq-deck {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600; color: var(--neuro-text-secondary, #94a3b8);
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
    padding: 3px 9px; border-radius: 8px; margin-bottom: 10px; max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rq-tags { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.rq-tag {
    padding: 2px 8px; border-radius: 8px; background: rgba(168, 85, 247, 0.15);
    color: var(--neuro-purple, #a855f7); font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.rq-front {
    font-size: 17px; line-height: 1.5; padding: 16px;
    background: rgba(255,255,255,0.03); border-radius: 12px; margin-bottom: 16px;
}
.rq-show-answer {
    width: 100%; padding: 14px;
    background: linear-gradient(135deg, var(--neuro-cyan, #06d6a0), var(--neuro-blue, #0ea5e9));
    color: white; border: none; border-radius: 12px;
    font-weight: 700; font-size: 15px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
/* kbd hint inline (Espaço, 1-4) — sinaliza atalho de teclado pra heavy users */
.rq-kbd {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 6px;
    font-size: 11px; font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: 0.04em;
}
.rq-kbd-small {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 5px;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 4px;
    font-size: 10px; font-weight: 700;
    color: var(--neuro-text-secondary, #94a3b8);
    font-family: 'Space Grotesk', sans-serif;
}
.rq-back-text {
    font-size: 17px; font-weight: 700; padding: 16px;
    background: rgba(6,214,160,0.08); border: 1px solid rgba(6,214,160,0.2);
    border-radius: 12px; margin-bottom: 16px; text-align: center;
}
.rq-rate-prompt { text-align: center; margin: 0 0 12px; color: var(--neuro-text-secondary); }
.rq-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rq-rate {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 10px 4px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04); color: var(--neuro-text-primary);
    cursor: pointer; transition: all 0.15s;
}
.rq-rate:hover { transform: translateY(-2px); }
.rq-rate[data-rating="0"]:hover { border-color: #ef4444; background: rgba(239,68,68,0.12); }
.rq-rate[data-rating="1"]:hover { border-color: #f59e0b; background: rgba(245,158,11,0.12); }
.rq-rate[data-rating="2"]:hover { border-color: #06d6a0; background: rgba(6,214,160,0.12); }
.rq-rate[data-rating="3"]:hover { border-color: #22c55e; background: rgba(34,197,94,0.12); }
.rq-rate-label { font-weight: 700; font-size: 13px; }
.rq-rate-time { font-size: 10px; opacity: 0.7; font-family: 'JetBrains Mono', monospace; }

/* Pre-Questions modal — Pan & Carpenter 2023 (g=0.54) */
.pre-questions-modal {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px; background: rgba(0,0,0,0.75); backdrop-filter: blur(8px);
    animation: pqFade 0.2s ease-out;
}
@keyframes pqFade { from { opacity: 0; } to { opacity: 1; } }
.pq-card {
    max-width: 480px; width: 100%;
    background: var(--neuro-bg-raised, #0f1629);
    border-radius: 20px; padding: 24px;
    border: 1px solid rgba(251, 191, 36, 0.3);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    color: var(--neuro-text-primary, #e8e6e3);
}
.pq-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pq-icon { font-size: 28px; }
.pq-header h3 { flex: 1; margin: 0; font-size: 18px; }
.pq-skip {
    padding: 4px 10px; border-radius: 8px; font-size: 12px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    color: var(--neuro-text-secondary); cursor: pointer;
}
.pq-prompt { font-size: 13px; color: var(--neuro-text-secondary); margin-bottom: 12px; }
.pq-context {
    font-size: 12px; color: var(--neuro-text-secondary); font-style: italic;
    background: rgba(255,255,255,0.03); padding: 8px 12px; border-radius: 8px;
    border-left: 3px solid var(--neuro-gold, #fbbf24); margin-bottom: 16px;
    max-height: 80px; overflow-y: auto;
}
.pq-questions { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.pq-q-label { display: block; font-size: 13px; margin-bottom: 4px; }
.pq-input {
    width: 100%; padding: 10px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
    color: var(--neuro-text-primary); font-size: 14px;
}
.pq-input:focus { outline: 2px solid var(--neuro-cyan, #06d6a0); outline-offset: 1px; }
.pq-tip { font-size: 11px; color: var(--neuro-text-muted); margin: 12px 0 16px; opacity: 0.8; }
.pq-tip-secondary { font-size: 11px; color: var(--neuro-text-muted); margin: 8px 0 0; text-align: center; opacity: 0.65; }
.pq-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.pq-mental {
    flex: 1; padding: 10px; border-radius: 10px; min-width: 140px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    color: var(--neuro-text-primary); font-weight: 600; cursor: pointer;
}
.pq-submit {
    flex: 1; padding: 10px; border-radius: 10px; min-width: 140px;
    background: linear-gradient(135deg, var(--neuro-gold, #fbbf24), #f59e0b);
    border: none; color: #1a1611; font-weight: 700; cursor: pointer;
}

/* Voice input no Socratic */
.socratic-voice {
    margin: 12px 0 16px;
    padding: 12px;
    background: rgba(168, 85, 247, 0.06);
    border-radius: 12px;
}
.socratic-voice-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 10px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(168, 85, 247, 0.25);
    color: var(--neuro-text-primary); font-weight: 600; cursor: pointer;
    transition: all 0.15s;
}
.socratic-voice-btn:hover { transform: translateY(-1px); border-color: var(--neuro-purple); }
.socratic-voice-btn.recording {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    animation: voicePulse 1s ease-in-out infinite;
}
@keyframes voicePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
    50%      { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
}
.socratic-voice-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.socratic-voice-transcript {
    margin: 8px 0 0; padding: 8px 12px; border-radius: 8px;
    background: rgba(255,255,255,0.04); font-size: 13px;
    color: var(--neuro-text-primary); font-style: italic;
}

/* Confidence slider — Metacognitive Calibration (PMC11570305 2024) */
.rq-confidence {
    background: rgba(168, 85, 247, 0.06);
    border: 1px solid rgba(168, 85, 247, 0.15);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
}
.rq-conf-label {
    display: block;
    font-size: 12px;
    color: var(--neuro-text-secondary, #94a3b8);
    margin-bottom: 8px;
}
.rq-conf-slider {
    width: 100%;
    accent-color: var(--neuro-purple, #a855f7);
}
.rq-conf-value {
    text-align: center;
    font-weight: 700;
    color: var(--neuro-purple, #a855f7);
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    margin-top: 4px;
}
.rq-calibration {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    margin-bottom: 12px;
    text-align: center;
}
.rq-cal-overconfident {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.25);
}
.rq-cal-underconfident {
    background: rgba(34, 197, 94, 0.12);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.25);
}
.rq-cal-ok {
    background: rgba(6, 214, 160, 0.1);
    color: var(--neuro-cyan, #06d6a0);
    border: 1px solid rgba(6, 214, 160, 0.2);
}
.rq-done-icon { font-size: 56px; text-align: center; }
.rq-card[data-state="done"] { text-align: center; }
.rq-done-tip { font-size: 13px; color: var(--neuro-text-secondary); margin-top: 8px; }

/* ═══════════════════════════════════════════════════════════════
   UNDO-DELETE TOAST (Recovery pattern, estilo Gmail)
   Click "Desfazer" em 8s reverte exclusão de livro. Tira ansiedade
   do click acidental — feature crítica pra confiança no app.
   ═══════════════════════════════════════════════════════════════ */
.undo-delete-toast {
    position: fixed;
    bottom: calc(120px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 10001;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px); /* Safari iOS quirk */
    border: 1px solid rgba(248, 113, 113, 0.35);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
    color: var(--neuro-text-primary, #e2e8f0);
    font-size: 14px;
    font-weight: 500;
    max-width: calc(100vw - 24px);
    animation: undoSlideUp 0.22s ease-out;
}
@keyframes undoSlideUp {
    from { opacity: 0; transform: translate(-50%, 16px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.undo-delete-btn {
    padding: 6px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, #06d6a0, #0ea5e9);
    color: white;
    border: none;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
}
.undo-delete-btn:hover { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
    .undo-delete-toast { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   HIGHLIGHT-TO-FLASHCARD TOAST — Lente 4 (Neuro-Pedagogo)
   Não-intrusivo: pequeno, canto inferior, dismissível, auto-some
   ═══════════════════════════════════════════════════════════════ */
.h2f-offer-toast {
    position: fixed;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 9500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 16px;
    background: rgba(12, 16, 33, 0.96);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(6, 214, 160, 0.3);
    box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.4));
    color: var(--neuro-text-primary, #e8e6e3);
    font-size: 13px;
    font-weight: 600;
    animation: h2fSlideUp 0.25s ease-out;
    max-width: calc(100vw - 24px);
}
@keyframes h2fSlideUp {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.h2f-offer-text { white-space: nowrap; }
.h2f-offer-yes {
    padding: 6px 12px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--neuro-cyan, #06d6a0), var(--neuro-blue, #0ea5e9));
    color: white;
    border: none;
    font-weight: 700;
    cursor: pointer;
    font-size: 13px;
}
.h2f-offer-no {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: var(--neuro-text-secondary, #94a3b8);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════
   NEURO TUTOR — Krug-revised
   - Empty state quando não há texto selecionado
   - Header reorganizado (créditos com ícone)
   - Actions só visíveis quando há contexto
   ═══════════════════════════════════════════════════════════════ */
.neuro-tutor__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 20px;
    gap: 8px;
}
.neuro-tutor__empty-icon {
    font-size: 56px;
    opacity: 0.7;
    margin-bottom: 4px;
}
.neuro-tutor__empty-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--neuro-text-primary, #e8e6e3);
    margin: 0;
}
.neuro-tutor__empty-hint {
    font-size: 14px;
    line-height: 1.5;
    color: var(--neuro-text-secondary, #94a3b8);
    max-width: 280px;
    margin: 0;
}
.neuro-tutor__empty-or {
    font-size: 12px;
    color: var(--neuro-text-muted, #64748b);
    margin: 8px 0 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.neuro-tutor__paste-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 12px;
    background: rgba(6, 214, 160, 0.12);
    color: var(--neuro-cyan, #06d6a0);
    border: 1px solid rgba(6, 214, 160, 0.25);
    font-weight: 600;
    cursor: pointer;
    margin-top: 4px;
    transition: transform 0.15s, background 0.15s;
}
.neuro-tutor__paste-btn:hover {
    transform: translateY(-1px);
    background: rgba(6, 214, 160, 0.2);
}

/* Header reorganizado: créditos com ícone, layout mais limpo */
.neuro-tutor__credits {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--neuro-gold, #fbbf24);
    font-weight: 700;
    font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════
   SELECTION SPEEDDIAL — Krug Lens: consolidar 4 FABs em 1 (mindless choices)
   Antes: 4 FABs coloridos (Sniper laranja, Auto roxo, Smart-hover cyan,
   NeuroTutor rosa) competindo por atenção = "shouting" + "anguished choice"
   Agora: 1 FAB principal (Selecionar) que abre fan-out com 3 opções claras
   ═══════════════════════════════════════════════════════════════ */
body.reader-active .sniper-fab,
body.reader-active .auto-select-fab,
body.reader-active .smart-hover-fab {
    /* Mantém posição calculada anteriormente (210/280/350) — só esconde
       visualmente quando NÃO está em modo "showing-selection-options". */
    display: none !important;
}
body.reader-active.showing-selection-options .sniper-fab,
body.reader-active.showing-selection-options .auto-select-fab,
body.reader-active.showing-selection-options .smart-hover-fab {
    display: flex !important;
    animation: speedDialFanOut 0.25s ease-out;
}
@keyframes speedDialFanOut {
    from { opacity: 0; transform: translateY(20px) scale(0.6); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Único FAB principal "Selecionar" — substitui o stack.
   Bug fix (screenshot user): selection-master quase tocava .neuro-fab
   (NeuroTutor brain, neuro-design.css). Real positions:
   - Desktop (>768px): neuro-fab bottom 110, right 24, 72×72 → top 182
   - Mobile (≤768px): neuro-fab bottom 100, right 16, 60×60 → top 160
   Bug 1: master a bottom 180 tinha gap só 20px (mobile) / -2px overlap
          (desktop) com shadow 30px da brain invadindo.
   Bug 2: master a right 16 vs brain right 24 (desktop) → desalinhamento.
   Solução: bump bottom + media query pra match right de cada breakpoint. */
.selection-master-fab {
    position: fixed;
    bottom: calc(200px + env(safe-area-inset-bottom, 0px));
    right: 16px; /* default = mobile, matches neuro-fab mobile right: 16 */
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--neuro-cyan, #06d6a0), var(--neuro-blue, #0ea5e9));
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    z-index: 56;
    box-shadow: 0 4px 20px rgba(6, 214, 160, 0.4);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.selection-master-fab:hover { transform: scale(1.08); }
body:not(.reader-active) .selection-master-fab,
body.dock-grid-active .selection-master-fab,
body.neuro-sidebar-open .selection-master-fab,
body.zen-mode .selection-master-fab,
body.tutorial-active .selection-master-fab,
body.playing .selection-master-fab,
body.mode-clipboard .selection-master-fab {
    display: none !important;
}
body.reader-active.showing-selection-options .selection-master-fab {
    transform: rotate(135deg);
    background: linear-gradient(135deg, #ef4444, #dc2626);
}
/* Desktop (>768px): neuro-fab usa bottom 110 + right 24 + 72×72.
   Master precisa de mais clearance vertical (brain top está em 182, e
   shadow 30px atinge ~212) E right alinhado com brain. */
@media (min-width: 769px) {
    .selection-master-fab {
        bottom: calc(220px + env(safe-area-inset-bottom, 0px));
        right: 24px;
    }
}

/* Label tooltip que aparece à esquerda dos FABs no fan-out */
body.showing-selection-options .sniper-fab::before,
body.showing-selection-options .auto-select-fab::before,
body.showing-selection-options .smart-hover-fab::before {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(12, 16, 33, 0.95);
    backdrop-filter: blur(8px);
    color: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}
body.showing-selection-options .sniper-fab::before { content: "Selecionar área"; }
body.showing-selection-options .auto-select-fab::before { content: "Página inteira"; }
body.showing-selection-options .smart-hover-fab::before { content: "Detectar parágrafo"; }

/* Bug fix: em desktop (>=768px), FABs movem pro lado ESQUERDO (left: 24px).
   Labels com `right: calc(100% + 12px)` ficavam fora da tela à esquerda
   (FAB left: 24, label width ~130px → label left edge: ~-118px viewport).
   Solução: em desktop, label vai pra DIREITA do FAB ao invés. Mobile mantém
   esquerda porque FABs ficam no canto direito da tela. */
@media (min-width: 768px) {
    body.showing-selection-options .sniper-fab::before,
    body.showing-selection-options .auto-select-fab::before,
    body.showing-selection-options .smart-hover-fab::before {
        right: auto;
        left: calc(100% + 12px);
    }
}

/* ═══════════════════════════════════════════════════════════════
   FOCUS TOOLKIT — Pomodoro + Sound + TTS + Tab Tracking (research-backed)
   OPT-IN: só aparece quando body.focus-toolkit-enabled E body.reader-active.
   Padrão = escondido pra não poluir. Usuário ativa via sidebar > Configurações.
   ═══════════════════════════════════════════════════════════════ */
.focus-toolkit {
    display: none; /* hidden by default — opt-in */
    position: fixed;
    top: calc(72px + env(safe-area-inset-top, 0px));
    left: 12px;
    flex-direction: column;
    gap: 6px;
    z-index: 60;
    padding: 6px;
    border-radius: var(--radius-lg, 16px);
    background: rgba(12, 16, 33, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.25));
}
body.focus-toolkit-enabled.reader-active .focus-toolkit {
    display: flex;
}
/* Esconde quando sidebar aberta ou modal sobreposto */
body.neuro-sidebar-open .focus-toolkit,
body.dock-grid-active .focus-toolkit,
body.zen-mode .focus-toolkit,
body.tutorial-active .focus-toolkit {
    display: none !important;
}
.focus-toolkit .ft-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.04);
    color: var(--neuro-text-primary, #e8e6e3);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, background 0.15s, border-color 0.15s;
    position: relative;
}
.focus-toolkit .ft-btn:hover {
    transform: scale(1.08);
    background: rgba(6, 214, 160, 0.15);
    border-color: rgba(6, 214, 160, 0.4);
}
.focus-toolkit .ft-btn.active,
.focus-toolkit .ft-btn[aria-pressed="true"] {
    background: linear-gradient(135deg, var(--neuro-cyan, #06d6a0), var(--neuro-blue, #0ea5e9));
    border-color: transparent;
    box-shadow: 0 0 20px rgba(6, 214, 160, 0.4);
}
.ft-timer {
    position: absolute;
    bottom: -4px;
    right: -4px;
    font-size: 9px;
    font-weight: 800;
    background: var(--neuro-cyan, #06d6a0);
    color: var(--neuro-bg-deep, #050810);
    padding: 2px 4px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    pointer-events: none;
}
@media (max-width: 480px) {
    /* Mobile: mantém vertical no top-left, mas mais compacto */
    .focus-toolkit {
        top: calc(64px + env(safe-area-inset-top, 0px));
        left: 8px;
        padding: 4px;
        gap: 4px;
    }
    .focus-toolkit .ft-btn { width: 36px; height: 36px; font-size: 16px; }
}

/* Focus session — body classes pra dim e celebração */
body.focus-session-active #pdf-container {
    /* Subtil: foca atenção sem distração */
    transition: filter 0.5s ease;
}
body.focus-session-phase-break #pdf-container {
    filter: blur(2px) brightness(0.7);
    pointer-events: none;
}
body.focus-session-phase-break::before {
    content: "☕ Pausa em curso — alongue, beba água, olhe pra longe";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    background: var(--neuro-bg-raised, #0f1629);
    padding: 24px 32px;
    border-radius: 20px;
    color: var(--neuro-cyan, #06d6a0);
    font-weight: 700;
    font-size: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    border: 1px solid rgba(6, 214, 160, 0.3);
    text-align: center;
    max-width: 90vw;
}
body.focus-session-celebrate {
    animation: celebrateFlash 0.6s ease-out;
}
@keyframes celebrateFlash {
    0%   { box-shadow: inset 0 0 0 0 rgba(6, 214, 160, 0); }
    50%  { box-shadow: inset 0 0 0 20px rgba(6, 214, 160, 0.3); }
    100% { box-shadow: inset 0 0 0 0 rgba(6, 214, 160, 0); }
}
body.daily-goal-hit::after {
    content: "🏆 Meta diária!";
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    padding: 12px 24px;
    border-radius: 20px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: white;
    font-weight: 800;
    font-size: 16px;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4);
    animation: goalCelebrate 4s ease-out forwards;
}
@keyframes goalCelebrate {
    0%   { transform: translate(-50%, -100%); opacity: 0; }
    20%  { transform: translate(-50%, 0); opacity: 1; }
    80%  { transform: translate(-50%, 0); opacity: 1; }
    100% { transform: translate(-50%, -100%); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   ACTIVE RECALL MODAL — d=0.70 effect size (Karpicke)
   ═══════════════════════════════════════════════════════════════ */
.active-recall-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    animation: recallFadeIn 0.2s ease-out;
}
.active-recall-modal.closing { animation: recallFadeOut 0.2s ease-in; }
@keyframes recallFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes recallFadeOut { from { opacity: 1; } to { opacity: 0; } }
.active-recall-card {
    max-width: 480px;
    width: 100%;
    background: var(--neuro-bg-raised, #0f1629);
    border-radius: 20px;
    padding: 24px;
    border: 1px solid rgba(6, 214, 160, 0.2);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    color: var(--neuro-text-primary, #e8e6e3);
}
.active-recall-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.active-recall-icon { font-size: 28px; }
.active-recall-header h3 {
    flex: 1;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}
.active-recall-timer {
    background: rgba(6, 214, 160, 0.15);
    color: var(--neuro-cyan, #06d6a0);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
}
.active-recall-prompt {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 8px;
}
.active-recall-context {
    font-size: 12px;
    color: var(--neuro-text-secondary, #94a3b8);
    background: rgba(255, 255, 255, 0.03);
    padding: 8px 12px;
    border-radius: 8px;
    border-left: 3px solid var(--neuro-cyan, #06d6a0);
    margin: 8px 0 16px;
    font-style: italic;
}
.active-recall-input {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: var(--neuro-text-primary, #e8e6e3);
    font-size: 15px;
    font-family: inherit;
    resize: vertical;
    min-height: 60px;
}
.active-recall-input:focus {
    outline: none;
    border-color: var(--neuro-cyan, #06d6a0);
    box-shadow: 0 0 0 3px rgba(6, 214, 160, 0.2);
}
.active-recall-input.shake {
    animation: shake 0.4s ease-out;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}
.active-recall-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}
.active-recall-skip {
    flex: 0 0 auto;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--neuro-text-secondary, #94a3b8);
    font-weight: 600;
    cursor: pointer;
}
.active-recall-submit {
    flex: 1;
    padding: 12px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--neuro-cyan, #06d6a0), var(--neuro-blue, #0ea5e9));
    border: none;
    color: white;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: transform 0.15s;
}
.active-recall-submit:hover { transform: translateY(-1px); }
.active-recall-tip {
    font-size: 11px;
    color: var(--neuro-text-secondary, #94a3b8);
    text-align: center;
    margin: 12px 0 0;
    opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════
   STREAK BADGE — gamificação visível (research: Duolingo retention)
   ═══════════════════════════════════════════════════════════════ */
.neuro-streak-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.18), rgba(245, 158, 11, 0.12));
    border: 1px solid rgba(251, 146, 60, 0.3);
    font-size: 13px;
    font-weight: 700;
    color: #fb923c;
    margin-left: 12px;
    cursor: default;
    user-select: none;
    transition: transform 0.2s ease;
}
.neuro-streak-badge:hover {
    transform: scale(1.05);
    border-color: rgba(251, 146, 60, 0.5);
}
/* Wallpaper Distractor: durante leitura ativa, streak badge fade pra não competir
   com o highlight word visual. Mesmo padrão do review-queue-badge.
   User pausa → badge volta normal. */
body.playing .neuro-streak-badge {
    opacity: 0.4;
    transition: opacity 0.3s;
}
body.playing .neuro-streak-badge:hover { opacity: 1; }

@media (max-width: 480px) {
    /* No mobile compacto, só mostra o número (sem emoji) pra economizar espaço */
    .neuro-streak-badge { font-size: 12px; padding: 3px 8px; margin-left: 6px; }
}

/* ═══════════════════════════════════════════════════════════════
   OFFLINE INDICATOR — UX PWA (avisar perda de conexão)
   ═══════════════════════════════════════════════════════════════ */
.neuro-offline-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.15);
    color: #fca5a5;
    margin-left: 8px;
    animation: offlinePulse 2s ease-in-out infinite;
}
@keyframes offlinePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
    50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
}

/* ════════════════════════════════════════════════════════════════════
   BRAIN DUMP (Estacionamento de Pensamentos)
   Modal glassmorphism full-screen. Apenas 1 input gigante.
   Trigger: Ctrl/Cmd+K ou `/`. Enter salva, Esc fecha.
   ════════════════════════════════════════════════════════════════════ */
#brain-dump-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease-out;
    will-change: opacity;
}
#brain-dump-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}
#brain-dump-overlay .brain-dump-stack {
    position: relative;
    width: min(92vw, 820px);
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
#brain-dump-overlay .brain-dump-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: clamp(22px, 4.8vw, 44px);
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    text-align: center;
    caret-color: var(--neuro-cyan, #06d6a0);
    border-bottom: 2px solid rgba(255, 255, 255, 0.18);
    padding: 14px 8px;
    transition: border-color 200ms ease;
    /* iOS: evita zoom indesejado no foco em font-size pequeno */
    -webkit-text-size-adjust: 100%;
}
#brain-dump-overlay .brain-dump-input:focus {
    border-color: var(--neuro-cyan, #06d6a0);
    box-shadow: 0 8px 24px -12px rgba(6, 214, 160, 0.4);
}
#brain-dump-overlay .brain-dump-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
}
#brain-dump-overlay .brain-dump-hint {
    font-size: 12px;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    user-select: none;
}
#brain-dump-overlay .brain-dump-hint kbd {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-family: inherit;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 2px;
}
@media (prefers-reduced-motion: reduce) {
    #brain-dump-overlay { transition: none; }
}
/* Mobile: input não pode ficar centrado verticalmente — quando teclado abre,
   ele cobre metade inferior da viewport e o input (centrado em ~50% da tela)
   fica parcial ou totalmente escondido por baixo do teclado em landscape.
   Solução: align-items: flex-start + padding-top dá folga pra teclado overlay.
   Tudo isso só em telas <=768px, desktop continua centralizado. */
@media (max-width: 768px) {
    #brain-dump-overlay {
        align-items: flex-start;
        padding-top: max(18vh, 60px);
    }
}

/* ════════════════════════════════════════════════════════════════════
   MOTOR MODE (Fricção Rítmica / Dead Man's Switch)
   Texto borra por padrão; usuário segura SPACE pra revelar.
   ════════════════════════════════════════════════════════════════════ */
body.motor-mode-active .textLayer,
body.motor-mode-active #pdf-wrapper,
body.motor-mode-active .reflow-container,
body.motor-mode-active .clipboard-paragraph,
body.motor-mode-active #neuro-page-content {
    filter: blur(8px);
    opacity: 0.4;
    transition: filter 150ms ease, opacity 150ms ease;
    will-change: filter, opacity;
}
body.motor-mode-active.motor-mode-revealed .textLayer,
body.motor-mode-active.motor-mode-revealed #pdf-wrapper,
body.motor-mode-active.motor-mode-revealed .reflow-container,
body.motor-mode-active.motor-mode-revealed .clipboard-paragraph,
body.motor-mode-active.motor-mode-revealed #neuro-page-content {
    filter: blur(0);
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    body.motor-mode-active .textLayer,
    body.motor-mode-active #pdf-wrapper,
    body.motor-mode-active .reflow-container,
    body.motor-mode-active .clipboard-paragraph,
    body.motor-mode-active #neuro-page-content {
        /* Antes era transition: none — flip instantâneo causava flicker em
           usuários fotosenstíveis. Cross-fades <100ms são WCAG-safe mesmo com
           reduced-motion (não acionam vestibular). 50ms é o mínimo perceptual
           que ainda elimina o flicker sem ser "animação". */
        transition: filter 50ms linear, opacity 50ms linear;
    }
}

/* sr-only (caso style.css ainda não tenha) — usado pelo label do Brain Dump */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Motor Mode — badge fixo "⚡ Motor Mode".
   POSITIONING: top-right ao invés de bottom-right pra não colidir com a
   pilha de FABs (neurotutor/sniper/auto-select/smart-hover) e dock que
   ocupam o canto inferior. Antes do fix, badge sobrepunha neurotutor-fab
   em todos os breakpoints. Top-right está livre (só header lá, e badge
   tem z-index 9998 — passa por cima do header se houver overlap).
   Clicável pra desativar — user esquece que ativou e fica perdido com blur. */
#motor-mode-badge {
    position: fixed;
    top: 72px; /* abaixo do header (~56-64px) com gap */
    right: 16px;
    z-index: 9998;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--neuro-cyan, #06d6a0), var(--neuro-blue, #0ea5e9));
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 24px -8px rgba(6, 214, 160, 0.5);
    user-select: none;
    transition: transform 150ms ease, box-shadow 150ms ease;
}
#motor-mode-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px -8px rgba(6, 214, 160, 0.6);
}
#motor-mode-badge:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
@media (max-width: 640px) {
    #motor-mode-badge {
        top: 64px; /* header mobile é mais fino */
        right: 12px;
        padding: 7px 12px;
        font-size: 12px;
    }
}
/* Safe-area pra notch devices (iPhone 14+ etc.) */
@supports (top: env(safe-area-inset-top)) {
    #motor-mode-badge {
        top: calc(72px + env(safe-area-inset-top, 0px));
    }
    @media (max-width: 640px) {
        #motor-mode-badge {
            top: calc(64px + env(safe-area-inset-top, 0px));
        }
    }
}

/* Botão grande "SEGURE PARA LER" — touch devices não têm Space.
   Sem isso, Motor Mode é completamente inacessível em mobile.
   touch-action: none impede o browser de interpretar o gesto como scroll.
   user-select: none + -webkit-touch-callout: none evita selection/menu
   nativo em hold longo no iOS. */
#motor-mode-reveal-btn {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 24px;
    z-index: 9998;
    display: none; /* CSS abaixo libera só em touch */
    align-items: center;
    gap: 10px;
    padding: 18px 36px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--neuro-cyan, #06d6a0), var(--neuro-blue, #0ea5e9));
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.4px;
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 32px -10px rgba(6, 214, 160, 0.55);
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
    transition: transform 100ms ease, box-shadow 100ms ease;
}
/* Visível apenas em devices touch — desktop usa Space, não precisa do botão. */
@media (hover: none) and (pointer: coarse) {
    body.motor-mode-active #motor-mode-reveal-btn {
        display: inline-flex;
    }
}
#motor-mode-reveal-btn:active {
    transform: translateX(-50%) scale(0.97);
    box-shadow: 0 4px 16px -4px rgba(6, 214, 160, 0.7);
}
#motor-mode-reveal-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}
@media (max-width: 640px) {
    #motor-mode-reveal-btn {
        bottom: 84px; /* acima do dock mobile */
        padding: 16px 28px;
        font-size: 14px;
        /* Cap de largura — FABs ocupam right: 16px + 48px = 64px de cada lado
           (esquerdo apenas em alguns breakpoints). Sem cap, botão central
           sobrepunha FABs em telas <380px. max-width respeitando 16px de gap
           cada lado: viewport - 2*(16+48+10) = viewport - 148px. */
        max-width: calc(100vw - 160px);
        /* Trunca texto longo sem quebrar layout em telas muito estreitas */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
/* Telas muito estreitas (iPhone SE 1ª gen, ~320px): texto encolhe pra "Segure" */
@media (max-width: 360px) {
    #motor-mode-reveal-btn span {
        /* Mostra só "Segure" + ícone — "para ler" é redundante quando button
           visivelmente espera press. Mantém touch target ≥44px (padding cuida). */
        font-size: 13px;
    }
    #motor-mode-reveal-btn {
        padding: 14px 22px;
    }
}

/* ════════════════════════════════════════════════════════════════════
   BRAIN DUMP VIEWER — lista revisável de pensamentos estacionados
   Cognitive accessibility: TDAH precisa de PROVA visual que o dump
   funcionou. Painel separado do capture overlay pra não acoplar UX.
   ════════════════════════════════════════════════════════════════════ */
#brain-dump-list-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease-out;
}
#brain-dump-list-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}
.brain-dump-list-panel {
    width: min(94vw, 560px);
    max-height: min(80vh, 720px);
    display: flex;
    flex-direction: column;
    background: rgba(22, 26, 40, 0.96);
    border: 1px solid rgba(6, 214, 160, 0.18);
    border-radius: 16px;
    box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.7);
    overflow: hidden;
}
.brain-dump-list-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.brain-dump-list-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    /* Trunca elegante em telas estreitas pra dar espaço pros 3 botões.
       Antes ficava forçando layout que empurrava "+ Novo" e "×" pra fora. */
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brain-dump-list-count {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    /* shrink-only, sem grow — o espaço extra vai pro h2 (mais informativo) */
    flex: 0 1 auto;
    white-space: nowrap;
}
/* Telas <=420px (smartphones): esconde count (redundante com lista visível)
   e encolhe gap pra header caber 4 elementos confortavelmente. */
@media (max-width: 420px) {
    .brain-dump-list-header {
        gap: 8px;
        padding: 12px 14px;
    }
    .brain-dump-list-count {
        display: none;
    }
}
.brain-dump-list-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 22px;
    line-height: 1;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 120ms ease, color 120ms ease;
    min-width: 44px;
    min-height: 44px;
}
/* Botão "+ Novo" no header — abre o capture overlay direto do viewer.
   Sem isto, mobile users sem teclado físico só conseguiriam estacionar via
   sidebar (que fecha o viewer + tem ciclo de tap pesado). */
.brain-dump-list-new {
    background: rgba(6, 214, 160, 0.14);
    border: 1px solid rgba(6, 214, 160, 0.35);
    color: var(--neuro-cyan, #06d6a0);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    padding: 0 14px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 120ms ease;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.brain-dump-list-new:hover,
.brain-dump-list-new:focus-visible {
    background: rgba(6, 214, 160, 0.22);
    outline: none;
}
.brain-dump-list-close:hover,
.brain-dump-list-close:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    outline: none;
}
.brain-dump-list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    overflow-y: auto;
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
}
.brain-dump-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    line-height: 1.4;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    /* iOS long-press triggers nativo de selection/share menu — não queremos
       isso na lista, só no row-text se user explicitamente quiser copiar.
       Mantém callout off no row inteiro; row-text re-libera abaixo. */
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
.brain-dump-row:last-child { border-bottom: none; }
.brain-dump-row-text {
    min-width: 0;
    word-break: break-word;
    /* Libera seleção só no texto — user pode querer copiar 1 pensamento. */
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    user-select: text;
}
.brain-dump-row-ts {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
    user-select: none;
}
.brain-dump-row-del {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.35);
    font-size: 20px;
    line-height: 1;
    padding: 10px 14px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 120ms ease, color 120ms ease;
    /* WCAG 2.1 AA SC 2.5.5: targets ≥ 44×44px. Era 36×36 — fail em touch.
       Iconinho × pequeno é OK visualmente, hitbox grande é o que importa. */
    min-width: 44px;
    min-height: 44px;
    /* Evita dupla acionação no iOS via :hover sticky pós-tap. */
    -webkit-tap-highlight-color: transparent;
}
.brain-dump-row-del:hover,
.brain-dump-row-del:focus-visible {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
    outline: none;
}
/* Notice quando lista truncada — explica cap de 100 + aponta export */
.brain-dump-truncated {
    list-style: none;
    padding: 10px 18px;
    background: rgba(6, 214, 160, 0.06);
    border-bottom: 1px solid rgba(6, 214, 160, 0.18);
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    line-height: 1.4;
}
.brain-dump-truncated strong {
    color: var(--neuro-cyan, #06d6a0);
    font-weight: 700;
}
.brain-dump-empty-text {
    margin-bottom: 16px;
}
.brain-dump-empty-cta {
    background: linear-gradient(135deg, var(--neuro-cyan, #06d6a0), var(--neuro-blue, #0ea5e9));
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 999px;
    cursor: pointer;
    min-height: 44px;
    transition: transform 120ms ease, box-shadow 120ms ease;
    -webkit-tap-highlight-color: transparent;
}
.brain-dump-empty-cta:hover,
.brain-dump-empty-cta:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px -4px rgba(6, 214, 160, 0.5);
    outline: none;
}
.brain-dump-empty-cta:active {
    transform: translateY(0) scale(0.98);
}
.brain-dump-empty {
    list-style: none;
    padding: 40px 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
    line-height: 1.6;
}
.brain-dump-empty kbd {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-family: inherit;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
}
.brain-dump-list-footer {
    padding: 12px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.brain-dump-list-export {
    background: transparent;
    border: 1px solid rgba(6, 214, 160, 0.35);
    color: var(--neuro-cyan, #06d6a0);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 120ms ease;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}
.brain-dump-list-export:hover,
.brain-dump-list-export:focus-visible {
    background: rgba(6, 214, 160, 0.12);
    outline: none;
}
.brain-dump-list-clear {
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fca5a5;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 120ms ease;
    min-height: 44px;
}
.brain-dump-list-clear:hover,
.brain-dump-list-clear:focus-visible {
    background: rgba(239, 68, 68, 0.12);
    outline: none;
}
.brain-dump-list-clear[data-confirming="1"] {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.6);
}
@media (prefers-reduced-motion: reduce) {
    #brain-dump-list-overlay { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   WCAG 2.5.5 — ALVOS DE TOQUE >=44px (remediação consolidada)
   Apêndice no fim do arquivo: vence na ordem de fonte sem editar in-place.
   Usa min-width/min-height (não width/height fixos): como min-* e width são
   propriedades independentes combinadas no used-value, o piso de 44px vale em
   QUALQUER viewport mesmo com overrides mobile menores — então não precisa
   caçar os ~8 overrides de @media. Só cresce a ÁREA DE TOQUE; o glifo/ícone
   visual e o background/margin existentes ficam intactos (apenas adiciono).
   Controles de região têm seção própria (redesign declutter mais abaixo).
   ════════════════════════════════════════════════════════════════════════ */

/* (1) Backstop em touch: o filtro global @media(pointer:coarse) exclui
   [class*="-close"] e [class*="neuro-"]; re-incluo os closers e o <select>. */
@media (pointer: coarse) {
    [class*="-close"]:not(.no-touch-min),
    [class*="__close"]:not(.no-touch-min),
    .neuro-tab,
    .neurotutor-select {
        min-width: 44px;
        min-height: 44px;
    }
}

/* (2) Closers '✕' de modais/popups — cobre fine-pointer (mouse) também.
   Size-only + centragem flex; background/posição existentes preservados. */
.pdf-more-close,
.help-modal-close,
.clipboard-more-close,
.login-close-btn,
.plan-close-btn,
.dash-close-btn,
.difficulty-close,
.finetune-close,
.quest-close,
.tele-close,
.neuro-selection-panel__close,
.socratic-close,
.ruler-controls .ruler-btn-close,
.despejo-x,
.trap-x,
.mastery-close,
.soc-anchor-x,
.soc-anchor-panel-x {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* (10) Teleprompter floating bar */
.tele-btn {
    min-width: 44px;
    min-height: 44px;
}

/* (11) Auditoria de tamanho de botões: o piso global (style.css:165) exclui
   [class*="neuro-"] e .dock-btn, e estas classes não tinham backstop — ficavam
   abaixo de 44px no CELULAR (e no desktop). Painel "Resolver Questão" (chips de
   banca CESPE/FGV/FCC e botões CERTO/ERRADO), popup de pular palavra e botões
   do NeuroSprint. */
.neuro-panel-chip,
.neuro-toggle-btn,
.word-jump-popup__btn,
.neurosprint-btn {
    min-height: 44px;
}
.neuro-panel-chip,
.word-jump-popup__btn {
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
/* Chips de banca podem quebrar linha no celular — folga maior evita mis-tap. */
@media (max-width: 480px) {
    .neuro-selection-panel__chips { gap: 8px; }
}
/* <=400px o dock encolhe os botões pra 34px; o "Desativar ferramenta" fica
   SEMPRE visível quando há ferramenta ativa, então mantém o alvo de 44px. */
@media (max-width: 400px) {
    #neuro-dock .dock-btn.dock-active-tool.dock-tool-visible {
        width: 44px; height: 44px; min-width: 44px;
    }
}
/* Sobreposição: #quest-hud e #edital-tracking-chip são ambos fixed, centrados,
   na mesma faixa (~70px abaixo do header). Quando a quest está ativa, empurra
   o chip de edital pra baixo do HUD. (#edital-tracking-chip é criado via
   document.body.appendChild → sibling posterior de #quest-hud, então o
   combinador ~ casa.) */
#quest-hud.active ~ #edital-tracking-chip {
    top: calc(150px + env(safe-area-inset-top, 0px)) !important;
}

/* (11) Régua de Foco — steppers (−/+), centralizar, color picker */
.ruler-controls .ruler-group-controls button,
.ruler-controls .ruler-btn-center {
    min-width: 44px;
    min-height: 44px;
}
.ruler-controls input[type="color"] {
    min-width: 44px;
    min-height: 44px;
    box-sizing: border-box;
}

/* (12) Clipboard zen-bar + ações do navegador de regiões */
.clipboard-zen-bar .zen-btn {
    min-width: 44px;
    min-height: 44px;
}
.rgn-action {
    min-width: 44px;
    min-height: 44px;
}
.rgn-item-actions {
    gap: 8px;
}

/* (13) Abas — só o eixo vertical falha */
.nt-tab {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.neuro-tab {
    min-height: 44px;
}

/* (14) Botões de texto/pill socráticos — crescem só na vertical, label centrado */
.socratic-skip,
.socratic-flashcard,
.socratic-voice-btn,
.soc-anchor-save,
.soc-anchor-skip,
.soc-anchor-pill {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.neurotutor-select {
    min-height: 44px;
    box-sizing: border-box;
}
.soc-anchor-panel-export {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* (16) Link 'apagar' por item da Ancoragem — área de toque via padding +
   margem negativa pra não crescer a linha visualmente. */
.soc-anchor-item-del {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 15px 10px;
    margin: -15px -6px -15px auto;
    box-sizing: border-box;
    line-height: 1;
}

/* ════════════════════════════════════════════════════════════════════════
   CONTROLES DE REGIÃO — redesign declutter + alvos de toque >=44px
   Antes: 5 ícones sempre visíveis (play/restart/ai/editar/remover) + finetune.
   Agora: só Play + "⋯" (44px cada); o resto virou item do menu (.region-menu).
   ════════════════════════════════════════════════════════════════════════ */
.reading-region .region-controls {
    top: -52px;   /* a linha de 44px precisa limpar a borda de cima da região */
    gap: 8px;     /* >=8px entre os dois alvos de 44px */
}
@media (max-width: 640px) {
    .reading-region .region-controls {
        top: -52px;
        gap: 8px;
    }
}
.reading-region .region-play,
.reading-region .region-menu-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
}
.reading-region .region-menu-btn {
    background: var(--neuro-bg-raised, #1a1625);
    color: var(--neuro-text-primary, #e2e8f0);
    border: 1px solid var(--neuro-border, rgba(255,255,255,0.12));
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto !important;
    z-index: 111;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.15s ease;
}
.reading-region .region-menu-btn:hover { background: var(--neuro-bg-hover, #2a2438); transform: scale(1.05); }
.reading-region .region-menu-btn:active { transform: scale(0.95); }

/* Popover do menu "⋯" (ações secundárias) */
.region-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    display: none;
    flex-direction: column;
    gap: 2px;
    min-width: 190px;
    max-width: 78vw;
    padding: 6px;
    background: var(--neuro-bg-raised, #1a1625);
    border: 1px solid var(--neuro-border, rgba(255, 255, 255, 0.12));
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    z-index: 320;
    pointer-events: auto !important;
}
.region-menu.open { display: flex; }
.region-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--neuro-text-primary, #e2e8f0);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    pointer-events: auto !important;
    transition: background 0.12s ease;
}
.region-menu-item:hover { background: var(--neuro-bg-hover, rgba(255, 255, 255, 0.08)); }
.region-menu-item i { width: 16px; height: 16px; flex-shrink: 0; }
.region-menu-item--danger { color: #f87171; }
.region-menu-item--danger:hover { background: rgba(239, 68, 68, 0.15); }

/* Hit-area expanders: mantêm o visual pequeno, ampliam o toque pra >=44px.
   Clicar no ::before dispara o onclick do elemento (pseudo faz parte dele). */
.reading-region .region-label {
    position: absolute; /* garante o contexto pro ::before */
}
.reading-region .region-label::before {
    content: "";
    position: absolute;
    top: -11px;
    bottom: -11px;
    left: -2px;
    right: -2px;
}
.reading-region .resize-handle::before {
    content: "";
    position: absolute;
    inset: -12px;
}
.region-finetune-btn::before {
    content: "";
    position: absolute;
    inset: -8px;
}

/* ════════════════════════════════════════════════════════════════════════
   DOCK DECLUTTER — barra de navegação enxuta (menos botões = menos perdido)
   O dock inline mostra só o essencial (Home · ◀ · play · ▶ · "mais"); os
   secundários (Reiniciar/Zoom/Chunk/Holofote/Régua/Pássaro/Estudo) ficam
   escondidos no dock e acessíveis no "Menu de Controles" (grid), onde já
   existem. Mantidos no DOM (não removidos) p/ o JS de estado continuar válido.
   Precisa de #id + !important pra vencer `#neuro-dock .dock-btn{display:flex!important}`.
   ════════════════════════════════════════════════════════════════════════ */
#neuro-dock .dock-btn.dock-btn--more {
    display: none !important;
}
/* EXCEÇÃO: ferramentas de ACESSO RÁPIDO (régua, velocidade, zoom, chunk) ficam
   sempre no dock = 1 toque (antes eram 2: menu → ferramenta). Seletor com 3
   classes (.dock-btn.dock-btn--more.dock-quick) vence o hide acima (2 classes),
   independente da ordem. Vale em desktop e mobile; no mobile o dock rola na
   horizontal (regra na media query) se não couber. */
#neuro-dock .dock-btn.dock-btn--more.dock-quick {
    display: flex !important;
}
/* Régua ATIVA: esconde o botão INDIVIDUAL da régua na dock — o contextual
   #dock-active-tool ("Desativar") assume. Senão apareciam DOIS "desativar régua".
   2 ids (#neuro-dock #dock-mask-btn) vencem o force-show de .dock-quick acima.
   É a rede de segurança em CSS além do JS (setProperty em main-dock.js): não
   depende de showDockActiveTool ter rodado. body.ruler-active é setado sempre
   em toggleMask (ruler.js). */
body.ruler-active #neuro-dock #dock-mask-btn { display: none !important; }

/* ════════════════════════════════════════════════════════════════════════
   MINIGAMES SEGUEM O TEMA + FONTE DE DISLEXIA
   Antes os jogos hardcodavam #0b101b/#f1f5f9 e ignoravam o tema (sépia
   ficava ilegível). Estas regras (seletor simples, anexadas no fim → vencem
   o default hardcoded; o override body.theme-light de cada jogo, mais
   específico, segue valendo no light). Com vars, dark + sépia + dislexia
   (body.dyslexia-mode reescreve --neuro-bg-*) passam a funcionar nos jogos.
   ════════════════════════════════════════════════════════════════════════ */
.despejo-fs, .tribunal-fs, .trap-fs {
    background: var(--neuro-bg-base);
    color: var(--neuro-text-primary);
}
.despejo-text, .tribunal-text, .trap-sentence {
    background: var(--neuro-bg-raised);
    color: var(--neuro-text-primary);
}
.despejo-step, .tribunal-step, .trap-step,
.tribunal-lens-prompt {
    color: var(--neuro-text-secondary);
}
.despejo-input, .tribunal-input {
    background: var(--neuro-bg-raised);
    color: var(--neuro-text-primary);
    border-color: var(--neuro-border);
}
/* NeuroSprint força 'Outfit' nesses elementos; garante a fonte de dislexia. */
body.dyslexia-mode .sprint-text,
body.dyslexia-mode .arcade-text,
body.dyslexia-mode .option-btn {
    font-family: 'Lexend', 'Atkinson Hyperlegible', sans-serif !important;
}

/* ════════════════════════════════════════════════════════════════════════
   MENU DE CONTROLES (dock-grid) — categorizado + Jogos em destaque
   Rótulos de seção (Navegar/Foco/Leitura/Estilo/Estudo) + botão de Jogos
   grande no topo. Painel rola se ficar alto. Atende "separar por categorias
   e deixar Jogos mais acessível".
   ════════════════════════════════════════════════════════════════════════ */
.dock-grid-panel {
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.dock-grid-section {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--neuro-text-muted, #94a3b8);
    margin: 8px 2px 0;
}
.dock-grid-game-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(6, 214, 160, 0.35);
    background: linear-gradient(135deg, rgba(6, 214, 160, 0.18), rgba(2, 132, 199, 0.18));
    color: var(--neuro-text-primary, #e2e8f0);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease;
}
.dock-grid-game-hero .dock-emoji { font-size: 22px; line-height: 1; }
.dock-grid-game-hero:hover { border-color: var(--neuro-cyan, #06d6a0); }
.dock-grid-game-hero:active { transform: scale(0.97); }
.dock-grid-close-full {
    width: 100%;
    margin-top: 6px;
    padding: 10px;
    border-radius: 12px;
    border: none;
    background: var(--neuro-bg-surface, rgba(255, 255, 255, 0.05));
    color: var(--neuro-text-muted, #94a3b8);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.dock-grid-close-full:active { transform: scale(0.97); }

/* ---- Dock grid: MOBILE LANDSCAPE aproveita a largura ----
   Bug relatado: em landscape o painel ficava 420px de largura num viewport de
   812px (metade vazia dos dois lados), 4 colunas, altura travada em ~300px →
   os minigames e as seções de baixo caíam num scroll apertado ("cortados").
   Fix: ancora abaixo do header, alarga o painel e vai a 6 colunas → usa o espaço
   horizontal, encurta a altura, mostra ~tudo de uma vez com scroll mínimo. */
@media (max-height: 560px) and (orientation: landscape) {
    /* Com o menu ABERTO, esconde a barra superior: ela não é necessária enquanto
       o menu cobre a tela, e assim o painel sobe pro topo e NUNCA fica atrás dela
       — não importa a altura real do header nem o notch. (top:58 fixo falhava em
       celular com safe-area-inset-top > 0, que o viewport-fit=cover expõe.) */
    body.dock-grid-active .neuro-header,
    body.dock-grid-active header.neuro-header {
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.15s ease !important;
    }
    .dock-grid-panel {
        top: calc(8px + env(safe-area-inset-top, 0px)) !important;  /* topo real, respeita notch */
        bottom: auto !important;
        max-width: min(94vw, 800px) !important;
        max-height: calc(100vh - 80px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
        max-height: calc(100dvh - 80px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    }
    /* Mantém as colunas naturais (4/3/2) — o painel largo já dá botões folgados e
       as linhas preenchem sem buracos. A altura cai pelos botões horizontais. */
    .dock-grid-content  { gap: 4px !important; }
    .dock-grid-section  { margin-top: 2px !important; font-size: 9px !important; }
    .dock-grid-game-hero { min-height: 34px !important; padding: 6px !important; font-size: 13px !important; }
    .dock-grid-game-hero .dock-emoji { font-size: 17px !important; }
    /* Botões horizontais e baixos (ícone ao lado do rótulo) → metade da altura da
       versão empilhada, então cabe MUITO mais na tela em landscape. */
    .dock-grid-btn {
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 5px !important;
        min-height: 32px !important;
        padding: 5px 4px !important;
    }
    .dock-grid-btn span:last-child { font-size: 10.5px !important; }
    .dock-grid-btn i, .dock-grid-btn svg { width: 15px !important; height: 15px !important; }
    .dock-grid-btn .dock-emoji { font-size: 14px !important; }
    .dock-grid-close-full { margin-top: 4px !important; padding: 7px !important; }
}

/* ---- Dock grid: MOBILE PORTRAIT — menu não pode esconder o topo ----
   Bug relatado ("o menu da dock continua escondendo o topo no mobile"): em
   RETRATO o topo do painel (Jogos + 1ª seção) ficava atrás da barra superior —
   o fix de landscape acima nunca alcançava o retrato. Mesma solução: enquanto o
   menu cobre a tela, some com o header (o painel tem seu próprio botão Fechar) e
   limita a altura ao espaço entre o notch e a barra de play, rolando por dentro.
   O painel segue ancorado embaixo (bottom-sheet), mas nunca sobe atrás do header. */
@media (orientation: portrait) and (max-width: 640px) {
    body.dock-grid-active .neuro-header,
    body.dock-grid-active header.neuro-header {
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.15s ease !important;
    }
    .dock-grid-panel {
        /* 80px da barra de play + 16px de folga + safe-areas → topo do painel
           sempre abaixo do notch e acima do dock, sem cortar o Jogos no topo. */
        max-height: calc(100vh - 96px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
        max-height: calc(100dvh - 96px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ---- Zoom + Tela Cheia SÓ na BARRA SUPERIOR (pedido do owner) ----
   Zoom vive APENAS no header, em TODOS os tamanhos. Nem a dock nem o menu
   dock-grid mostram zoom, pra não duplicar. */
.neuro-header__tools { display: flex; align-items: center; gap: 2px; margin-right: 8px; }
.neuro-header__tool {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; border-radius: 8px;
    color: var(--neuro-text-secondary, #94a3b8); cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.neuro-header__tool:hover { background: rgba(6, 214, 160, 0.12); color: var(--neuro-cyan, #06d6a0); }
.neuro-header__tool:active { transform: scale(0.92); }
/* Zoom fora da dock em TODOS os tamanhos (só no header agora). Precisa dos 4
   .classes + #neuro-dock pra VENCER a regra de acesso-rápido (l.26127:
   `#neuro-dock .dock-btn.dock-btn--more.dock-quick{display:flex!important}`) —
   senão o zoom continuava na dock apesar do hide (guerra de especificidade, o
   mesmo bug dos 2 botões de régua). */
#neuro-dock .dock-btn.dock-btn--more.dock-quick.dock-zoom-btn { display: none !important; }
/* TTS ("falar" / ler em voz alta) DESATIVADO por enquanto — estava repetindo a
   mesma palavra. Botão escondido + speak() no-op (tts-reader.js/neurotutor-chat.js).
   Reativar = remover esta regra + os TTS_DISABLED_TEMP nos 2 módulos. */
#ft-tts { display: none !important; }

/* ESTRUTURAL (todos os tamanhos): a DIREITA (zoom + Modo Zen) nunca encolhe →
   nunca é cortada nem empurrada pra fora da tela; a ESQUERDA cede espaço e o nome
   do arquivo trunca. Corrige "tudo do lado direito da barra sumia" no portrait. */
.neuro-header__right { flex-shrink: 0; }
.neuro-header__left { min-width: 0; }
.neuro-header__filename { min-width: 0; }

/* Mobile ≤768: header apertado. Com o zoom no header (v221) a direita CORTAVA.
   Poda leve: botões menores, esconde o rótulo "Modo Zen" (o toggle continua),
   aperta padding/gaps. */
@media (max-width: 768px) {
    .neuro-header__tool { width: 30px; height: 30px; }
    .neuro-header__tools { margin-right: 4px; }
    .neuro-header { padding: 0 10px !important; }
    .neuro-header__left { gap: 10px !important; }
    .neuro-header__right { gap: 8px !important; }
    .neuro-header__zen-label { display: none !important; }
}
/* Portrait estreito ≤480: precisa podar mais pra caber ☰ + nome + 🔥 + Revisar +
   zoom + Modo Zen num celular ~360-430px. Esconde o fullscreen (pouca serventia no
   mobile), Revisar vira só 🎯+número, nome curto, gaps/padding mínimos. */
@media (max-width: 480px) {
    .neuro-header { padding: 0 8px !important; }
    .neuro-header__left { gap: 8px !important; }
    .neuro-header__right { gap: 6px !important; }
    .neuro-header__filename { max-width: 72px !important; }
    .neuro-header__tools .neuro-header__tool:nth-child(3) { display: none !important; } /* fullscreen */
    .neuro-header .rq-badge-text { display: none !important; } /* "Revisar" some, fica "🎯 N" */
}
/* Celular em LANDSCAPE (largura > 768 mas tela baixa): mesma poda do "Modo Zen". */
@media (max-height: 500px) and (orientation: landscape) {
    .neuro-header__tool { width: 30px; height: 30px; }
    .neuro-header { padding: 0 12px !important; }
    .neuro-header__right { gap: 8px !important; }
    .neuro-header__left { gap: 10px !important; }
    .neuro-header__zen-label { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   Régua de Foco — responsivo no mobile (<=430px). Antes .ruler-row era
   flex-wrap:nowrap + botões com min 44px → estourava ~420px num box de ~308px
   e cortava os controles. Aqui a linha quebra e os alvos relaxam pra 40px.
   Vem DEPOIS do bloco (11) no arquivo, então vence os floors sem !important.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 430px) {
    .ruler-controls {
        left: 50% !important;
        right: auto !important;                 /* mata o right:10px do override landscape */
        width: calc(100% - 16px) !important;
        max-width: none !important;
        padding: 10px 12px !important;
        box-sizing: border-box;
    }
    .ruler-row {
        flex-wrap: wrap;                         /* fix central: permite 2ª linha */
        justify-content: space-around;
        gap: 8px 6px;
        max-height: 45vh;
        overflow-y: auto;                        /* rede de segurança */
    }
    .ruler-controls .ruler-group-controls button,
    .ruler-controls .ruler-btn-center,
    .ruler-controls .ruler-btn-toggle,
    .ruler-controls input[type="color"] {
        min-width: 40px;
        min-height: 40px;
        width: 40px;
        height: 40px;
    }
    .ruler-value { min-width: 34px; font-size: 0.7rem; }
    .ruler-group-label { font-size: 0.58rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   NeuroTutor (página) — abas Texto/Foto acima do "colar texto". Antes
   .neuro-tabs era display:flex SEM flex-wrap nem overflow-x → a barra cortava
   no mobile. Deixa quebrar/rolar e divide as abas igualmente.
   ════════════════════════════════════════════════════════════════════════ */
.neuro-tabs { flex-wrap: wrap; }
@media (max-width: 480px) {
    .neuro-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .neuro-tab {
        flex: 1 1 0;
        justify-content: center;
        padding: 10px 10px;
        min-width: 0;                            /* neutraliza o floor de 44px que empurra a largura */
        white-space: nowrap;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   MODO CLARO — contraste. O header e o sidebar (neuro-design.css) tinham fundo
   ESCURO fixo SEM override de tema, mas o texto usa var(--neuro-text-*) que
   fica ESCURA no claro → escuro-no-escuro, ilegível. Vários inputs/botões
   fixavam color:#fff → branco-no-branco. Como o claro é o padrão GRÁTIS, isso
   atinge a maioria. Aqui: fundo claro no chrome + texto/fundo dos inputs.
   (style.css carrega DEPOIS do neuro-design.css, então estes overrides vencem.)
   ════════════════════════════════════════════════════════════════════════ */
body.theme-light .neuro-header {
    background: rgba(255, 255, 255, 0.96);
    border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.theme-light .neuro-sidebar {
    background: rgba(255, 255, 255, 0.98);
    border-right-color: rgba(0, 0, 0, 0.08);
}
body.theme-light .neuro-sidebar__user {
    border-top-color: rgba(0, 0, 0, 0.08);
}
/* Inputs/áreas de texto com color hardcoded → texto do tema + fundo claro */
body.theme-light .edital-textarea,
body.theme-light .neurotutor-input-v2,
body.theme-light .profile-input,
body.theme-light .ocr-result {
    background: #ffffff;
    color: var(--neuro-text-primary, #1a1a2e);
    border-color: #cbd5e1;
}
/* Botões/ícones com color:white sobre superfície que clareia no modo claro */
body.theme-light .retention-fs-option,
body.theme-light .neurotutor-page__back,
body.theme-light .neurotutor-page__tool-btn,
body.theme-light .difficulty-close,
body.theme-light .holographic-close,
body.theme-light .difficulty-icon i {
    color: var(--neuro-text-primary, #1a1a2e);
}
body.theme-light .retention-fs-option {
    background: #ffffff;
    border-color: #cbd5e1;
}
/* Opção do dropdown de plano fica escura no claro */
body.theme-light .plan-select option {
    background: #ffffff;
    color: #1a1a2e;
}

/* Cancelamento de assinatura (requisito CDC) — visível mas secundário. */
.dash-sub-cancel { margin-top: 14px; text-align: center; }
.dash-sub-cancel-btn {
    background: transparent;
    border: 1px solid var(--neuro-border, rgba(255, 255, 255, 0.15));
    color: var(--neuro-text-secondary, #94a3b8);
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.dash-sub-cancel-btn:hover { border-color: #f87171; color: #f87171; }
.dash-sub-cancel-note {
    font-size: 11.5px;
    color: var(--neuro-text-muted, #718096);
    margin-top: 8px;
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════
   LEITOR DE TEXTO (NeuroTutor / colar texto) — alinha a barra
   (#neuro-page-dock / .clipboard-zen-bar) ao visual limpo do dock do
   PDF (#neuro-dock): botões CHAPADOS (transparentes) em vez de "chips"
   preenchidos, play QUADRADO em vez de pílula larga, e espaçamento/altura
   iguais. Antes os botões pareciam caixinhas soltas e o play uma barra larga
   — "não tava legal" perto do leitor de PDF. Override no fim do arquivo pra
   vencer as regras originais.
   ═══════════════════════════════════════════════════════════════ */
.clipboard-zen-bar {
    padding: 8px 12px !important;
    gap: 6px !important;
    border-radius: 16px !important;
    border: 1px solid var(--neuro-border-cyan, rgba(6,214,160,0.25)) !important;
    box-shadow: 0 0 20px rgba(6,214,160,0.15), 0 8px 32px rgba(0,0,0,0.4) !important;
}
.clipboard-zen-bar .zen-controls-wrapper { gap: 6px !important; }
.clipboard-zen-bar .zen-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;   /* chapado, como o dock do PDF */
    color: var(--neuro-text-secondary, #94a3b8) !important;
    box-shadow: none !important;
}
.clipboard-zen-bar .zen-btn:hover {
    background: rgba(6,214,160,0.10) !important;
    color: var(--neuro-cyan, #06d6a0) !important;
    transform: none !important;           /* sem o "pulo" que destoava */
    box-shadow: none !important;
}
/* Play: quadrado 52x52 com o mesmo gradiente do dock do PDF */
.clipboard-zen-bar .play-btn,
.clipboard-zen-bar .zen-btn.play-btn {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, var(--neuro-cyan, #06d6a0), var(--neuro-purple, #a855f7)) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(6,214,160,0.35) !important;
}
.clipboard-zen-bar .play-btn.playing,
.clipboard-zen-bar .zen-btn.play-btn.playing {
    background: linear-gradient(135deg, var(--neuro-amber, #f59e0b), #d97706) !important;
}
.clipboard-zen-bar .play-btn:hover { transform: scale(1.05) !important; }

/* "Extrair pegadinha": barra flutuante ao selecionar texto no leitor colado */
.neuro-extract-bar {
    position: fixed; z-index: 10050; display: none; gap: 6px;
    background: rgba(10,13,20,0.97);
    border: 1px solid var(--neuro-border-cyan, rgba(6,214,160,0.30));
    border-radius: 12px; padding: 6px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.45);
    /* 4 botões (Explicar/Simplificar/Flashcard/Flashcard IA): quebra em telas
       estreitas em vez de vazar da viewport. */
    flex-wrap: wrap; justify-content: center; max-width: min(94vw, 460px);
}
.neuro-extract-bar button {
    border: 0; cursor: pointer; font-weight: 700; font-size: 0.85rem;
    padding: 8px 12px; border-radius: 8px; white-space: nowrap; transition: filter 0.15s;
}
.neuro-extract-bar button[data-act="local"] {
    background: linear-gradient(135deg, var(--neuro-cyan, #06d6a0), var(--neuro-purple, #a855f7));
    color: #fff;
}
.neuro-extract-bar button[data-act="ai"] { background: rgba(148,163,184,0.16); color: #e5e7eb; }
.neuro-extract-bar button:hover { filter: brightness(1.1); }

/* Palavras-chave em negrito do formatador de IA (🪄 Formatar p/ leitura).
   Escopado ao leitor de texto colado pra não afetar o reflow do PDF.
   Além do peso, ganham COR (ciano) pra sair da monotonia "só negrito branco" e
   guiar o olho pros termos-chave — assistência de leitura, não enfeite. Não
   colore a palavra ATIVA (karaokê) pra não competir com o highlight de leitura. */
.neurotutor-page__content .word-block.word-bold { font-weight: 800; }
/* Cor via ID + !important: as .word-block.reflow-word têm
   `color: var(--neuro-text-primary) !important`, então precisa de !important
   (e o ID dá especificidade maior) pra colorir a keyword. Não afeta a palavra
   ATIVA do karaokê (:not(.active)), que mantém o highlight de leitura. */
#neuro-page-content .word-block.word-bold:not(.active) { color: var(--neuro-cyan, #06d6a0) !important; }
body.theme-light #neuro-page-content .word-block.word-bold:not(.active) { color: #0e7490 !important; }
body.theme-sepia #neuro-page-content .word-block.word-bold:not(.active) { color: #b45309 !important; }

/* Resultado visível da extração (o showToast ficava atrás do overlay do leitor) */
.neuro-extract-result {
    position: fixed; z-index: 10060; left: 50%; bottom: 92px;
    transform: translateX(-50%) translateY(8px);
    max-width: min(92vw, 380px);
    background: rgba(10,13,20,0.98);
    border: 1px solid var(--neuro-border-cyan, rgba(6,214,160,0.35));
    border-radius: 14px; padding: 12px 14px;
    box-shadow: 0 10px 34px rgba(0,0,0,0.5);
    opacity: 0; transition: opacity 0.2s, transform 0.2s;
}
.neuro-extract-result.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.neuro-extract-result__head { font-weight: 800; color: #f1f5f9; font-size: 0.95rem; }
.neuro-extract-result__detail {
    margin-top: 4px; font-size: 0.85rem; color: #94a3b8; font-style: italic; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.neuro-extract-result__actions { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-top: 10px; }
.neuro-extract-result__actions [data-act="review"] {
    background: linear-gradient(135deg, var(--neuro-cyan, #06d6a0), var(--neuro-purple, #a855f7));
    color: #fff; border: 0; border-radius: 9px; padding: 8px 12px; font-weight: 700; font-size: 0.85rem; cursor: pointer;
}
.neuro-extract-result__actions [data-act="close"] { background: transparent; border: 0; color: #94a3b8; font-size: 1rem; cursor: pointer; padding: 4px 8px; }

/* Painel de resultado de Explicar/Simplificar no leitor de texto colado */
.neuro-extract-panel {
    position: fixed; z-index: 10061; left: 50%; bottom: 90px;
    transform: translateX(-50%) translateY(8px);
    width: min(94vw, 460px); max-height: 60vh; display: flex; flex-direction: column;
    background: rgba(10,13,20,0.98);
    border: 1px solid var(--neuro-border-cyan, rgba(6,214,160,0.35));
    border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.55);
    opacity: 0; transition: opacity 0.2s, transform 0.2s;
}
.neuro-extract-panel.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.neuro-extract-panel__head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 12px 14px; border-bottom: 1px solid rgba(148,163,184,0.15);
    font-weight: 800; color: #f1f5f9; font-size: 0.95rem;
}
.neuro-extract-panel__head [data-act="close"] { background: transparent; border: 0; color: #94a3b8; font-size: 1.1rem; cursor: pointer; line-height: 1; }
.neuro-extract-panel__body {
    padding: 14px; overflow-y: auto; color: #e2e8f0; font-size: 0.95rem;
    line-height: 1.6; white-space: pre-wrap; word-break: break-word;
}
.neuro-extract-panel__body strong { color: #fff; }
body.theme-light .neuro-extract-panel { background: #fff; }
body.theme-light .neuro-extract-panel__head { color: #0f172a; }
body.theme-light .neuro-extract-panel__body { color: #1e293b; }
body.theme-light .neuro-extract-panel__body strong { color: #0f172a; }

/* FAB "perguntar à IA" no leitor de texto colado (como o botão flutuante do PDF).
   Canto inferior direito, acima da dock central; some fora do modo leitura. */
.neuro-page-chat-fab {
    position: fixed; right: 16px; bottom: 96px; z-index: 101;
    width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center; color: #fff;
    background: linear-gradient(135deg, var(--neuro-cyan, #06d6a0), var(--neuro-purple, #a855f7));
    box-shadow: 0 6px 20px rgba(6,214,160,0.4), 0 2px 8px rgba(0,0,0,0.4);
    transition: transform 0.15s, box-shadow 0.15s;
}
.neuro-page-chat-fab:hover { transform: scale(1.06); box-shadow: 0 0 24px var(--neuro-cyan-glow, rgba(6,214,160,0.5)); }
@media (max-width: 430px) { .neuro-page-chat-fab { width: 52px; height: 52px; bottom: 88px; } }

/* Holofote + Visão de Pássaro DESATIVADOS na interface (a pedido): efeitos
   sutis/situacionais demais no uso real, geravam a sensação de "não faz nada".
   As funções continuam no código (e o atalho Z foi neutralizado em
   keyboard-shortcuts.js) — pra reativar, é só remover este bloco. */
#btn-holofote,
#btn-birds-eye,
.dock-grid-btn[aria-label="Holofote"],
.dock-grid-btn[aria-label="Visão de Pássaro"] {
    display: none !important;
}

/* Bate-pronto: texto colado curto (< ~500 palavras) DE-EMFATIZA os minigames —
   continuam disponíveis (clicáveis), só saem do foco principal (mais apagados e
   um tico menores); voltam ao normal no hover/foco. NÃO some (o usuário pediu
   pra não remover, só não deixar como foco). */
#neuro-page-dock.neuro-page-dock--short-text button[onclick*="StartDespejo"],
#neuro-page-dock.neuro-page-dock--short-text button[onclick*="StartTribunal"],
#neuro-page-dock.neuro-page-dock--short-text button[onclick*="StartTrap"],
#neuro-page-dock.neuro-page-dock--short-text button[onclick*="StartSprint"] {
    opacity: 0.4;
    transform: scale(0.9);
    transition: opacity 0.15s, transform 0.15s;
}
#neuro-page-dock.neuro-page-dock--short-text button[onclick*="StartDespejo"]:hover,
#neuro-page-dock.neuro-page-dock--short-text button[onclick*="StartTribunal"]:hover,
#neuro-page-dock.neuro-page-dock--short-text button[onclick*="StartTrap"]:hover,
#neuro-page-dock.neuro-page-dock--short-text button[onclick*="StartSprint"]:hover,
#neuro-page-dock.neuro-page-dock--short-text button[onclick*="StartDespejo"]:focus,
#neuro-page-dock.neuro-page-dock--short-text button[onclick*="StartTribunal"]:focus,
#neuro-page-dock.neuro-page-dock--short-text button[onclick*="StartTrap"]:focus,
#neuro-page-dock.neuro-page-dock--short-text button[onclick*="StartSprint"]:focus {
    opacity: 1;
    transform: none;
}

/* NeuroTutor: seletor "usar uma área do documento" na tela de colar texto */
.neurotutor-page__region-picker {
    margin: 4px 0 14px;
    display: flex; flex-direction: column; gap: 6px;
    text-align: left;
}
.neurotutor-page__region-picker label {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.85rem; font-weight: 600;
    color: var(--neuro-text-secondary, #94a3b8);
}
.neurotutor-page__region-picker select {
    width: 100%; box-sizing: border-box; padding: 11px 12px;
    background: var(--neuro-bg-raised, #0d1320);
    color: var(--neuro-text-primary, #f1f5f9);
    border: 1.5px solid var(--neuro-border, rgba(148,163,184,0.25));
    border-radius: 12px; font-size: 0.95rem; cursor: pointer;
}
.neurotutor-page__region-picker select:focus {
    outline: none; border-color: var(--neuro-cyan, #06d6a0);
    box-shadow: 0 0 0 3px rgba(6,214,160,0.18);
}
body.theme-light .neurotutor-page__region-picker select {
    background: #fff; color: #0f172a; border-color: #cbd5e1;
}