@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ==================== NEURO DESIGN SYSTEM v2 ==================== */

/* Glassmorphism */
.glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.4);
}
.dark .glass,
body.theme-dark .glass {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

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

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

/* 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 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(0,0,0,0.8);
    backdrop-filter: blur(8px);
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.welcome-bonus-modal {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 24px;
    padding: 40px;
    text-align: center;
    color: white;
    max-width: 400px;
    margin: 20px;
    box-shadow: 0 20px 60px rgba(99,102,241,0.5);
    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, #fbbf24, #f59e0b);
    color: #1f2937;
    padding: 30px 50px;
    border-radius: 20px;
    font-size: 32px;
    font-weight: 900;
    z-index: 99999;
    box-shadow: 0 20px 60px rgba(251,191,36,0.5);
    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; }
}

:root {
    --bg-body: #f3f4f6; --bg-container: #525659;
    --highlight-color: #facc15; --highlight-opacity: 0.5;
    --blend-mode: multiply; --canvas-filter: none;
    --text-color: #1f2937;
    --pdf-scale: 1.0;
    --zoom-factor: 1; /* Contra-escala inicial */
}

body.theme-dark {
    --bg-body: #111827; --bg-container: #000000;
    --canvas-filter: invert(1) hue-rotate(180deg) contrast(0.9);
    --text-color: #f3f4f6; --blend-mode: difference; --highlight-color: #00ffff; 
}
body.theme-sepia {
    --bg-body: #f5e6d3; --bg-container: #5c554b;
    --highlight-color: #ff9900; --blend-mode: multiply;
    --canvas-filter: sepia(0.5) contrast(0.95) brightness(0.95); --text-color: #433422;
}

/* ==================== HOME DARK MODE ==================== */
body.home-dark {
    --bg-body: #0f172a;
    --text-color: #f1f5f9;
}
body.home-dark #library-view {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
}
body.home-dark .book-card {
    background: #1e293b;
    border: 1px solid rgba(255,255,255,0.1);
}
body.home-dark .book-card h3 {
    color: #f1f5f9;
}
body.home-dark .book-card span {
    color: #94a3b8;
}
body.home-dark #pdf-search {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}
body.home-dark #pdf-search::placeholder {
    color: #64748b;
}
body.home-dark #home-theme-toggle {
    background: #334155;
}
body.home-dark .text-gray-400,
body.home-dark .text-gray-500 {
    color: #94a3b8 !important;
}
body.home-dark footer,
body.home-dark .text-xs.text-gray-400 {
    color: #64748b !important;
}
body.home-dark a:hover {
    color: #a78bfa !important;
}

body { 
    background-color: var(--bg-body); 
    color: var(--text-color); 
    overflow: hidden; 
    user-select: none; 
    transition: background 0.3s; 
    font-family: 'Inter', sans-serif; 
    -webkit-tap-highlight-color: transparent;
    /* Garantir que o body ocupe toda a tela */
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 0;
}

.view-section { 
    display: none; 
    height: 100vh; 
    height: 100dvh; /* Fallback para mobile */
    width: 100vw; 
}
.view-section.active { 
    display: flex; 
    flex-direction: column; 
}

#library-view { overflow-y: auto; padding: 0; align-items: center; }
#library-view.active { overflow-y: auto; }

/* Reader view: estrutura flex para pdf-container crescer */
#reader-view { 
    overflow: hidden; /* Container principal não faz scroll */
}
#reader-view.active { 
    overflow: hidden; 
}
.book-grid { 
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); 
    gap: 20px; width: 100%; max-width: 800px; padding: 0 20px 100px 20px;
    margin: 0 auto;
}
.book-card {
    background: white; border-radius: 12px; padding: 15px;
    display: flex; flex-direction: column; align-items: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); cursor: pointer;
    transition: transform 0.2s; position: relative;
}
body.theme-dark .book-card { background: #1f2937; color: white; }
.book-card:hover { transform: translateY(-5px); }
.book-card:active { transform: scale(0.98); }
.book-cover {
    width: 100px; height: 140px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
    border-radius: 8px; margin-bottom: 10px; 
    display: flex; align-items: center; justify-content: center; 
    color: white; font-size: 32px;
}
.book-progress-bar { width: 100%; height: 4px; background: #e5e7eb; border-radius: 2px; margin-top: 8px; overflow: hidden; }
.book-progress-fill { height: 100%; background: #3b82f6; width: 0%; transition: width 0.5s; }
.delete-btn {
    position: absolute; top: 5px; right: 5px; background: rgba(255,0,0,0.1); color: 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;
}
.book-card:hover .delete-btn, .book-card:active .delete-btn { opacity: 1; }

#pdf-container {
    position: relative; 
    background-color: var(--bg-container);
    flex: 1; 
    overflow: scroll !important; /* Força ambos scrolls */
    display: block; /* Block para permitir scroll horizontal */
    padding: 10px; 
    padding-bottom: 150px;
    scroll-behavior: auto; 
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
    overscroll-behavior: contain;
    /* Essencial para flexbox funcionar */
    min-height: 0;
    /* Força altura */
    height: 100%;
}

#pdf-wrapper {
    /* Zoom a partir do topo esquerdo permite scroll horizontal */
    transform-origin: top left;
    transition: transform 0.1s ease-out;
    padding-bottom: 500px; /* Margem extra para scroll */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: fit-content;
    /* Garantir que o wrapper não seja comprimido */
    width: max-content;
    margin: 0 auto; /* Centraliza quando zoom é normal */
}

.page-wrapper { 
    position: relative; 
    margin-bottom: 20px; 
    box-shadow: 0 4px 25px rgba(0,0,0,0.5); 
    background: white;
    flex-shrink: 0;
}

/* Placeholder para páginas não carregadas (Lazy Loading) */
.page-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 800px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: 2px dashed #cbd5e1;
    animation: placeholder-pulse 2s infinite;
}
@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; }

/* v98: CSS para TextLayer nativa do PDF.js */
.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;
}

/* v99: Highlight via pseudo-element (inset) para precisão visual */
.word-block { 
    position: absolute; 
    border-radius: 4px; 
    box-sizing: border-box;
    pointer-events: auto;
    padding: 0; /* Sem padding - caixa exata do Range */
    margin: 0;
    background: transparent; /* Não pinta o próprio box */
}

/* Modo Clipboard/Reflow: palavras fluem normalmente */
.word-block.reflow-word {
    position: relative !important;
    display: inline-block !important;
    padding: 4px 8px !important;
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.5 !important;
    color: #1f2937 !important;
    background: transparent !important;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s;
}

.word-block.reflow-word:hover {
    background: rgba(139, 92, 246, 0.1) !important;
}

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

/* ==================== MODO CLIPBOARD: UI LIMPA ==================== */

/* Background do body no modo clipboard com tema escuro */
body.mode-clipboard.theme-dark {
    background: #111827 !important;
}

body.mode-clipboard.theme-dark #clipboard-section {
    background: #111827 !important;
}

body.mode-clipboard.theme-dark #clipboard-section * {
    border-color: rgba(255,255,255,0.1) !important;
}

body.mode-clipboard.theme-dark .clipboard-reader-container {
    background: #111827 !important;
    border: none !important;
}

body.mode-clipboard.theme-sepia {
    background: #fef3c7 !important;
}

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

body.mode-clipboard.theme-light {
    background: #f3f4f6 !important;
}

body.mode-clipboard.theme-light #clipboard-section {
    background: #f3f4f6 !important;
}

/* Esconde controles de PDF quando estiver no modo texto */
body.mode-clipboard .desktop-toolbar {
    display: none !important;
}

body.mode-clipboard .mobile-controls {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Mostra barra Zen no lugar dos 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;
}

/* Mostra barra de controle zen no modo clipboard */
.clipboard-zen-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    border-radius: 9999px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 100;
}

body.theme-dark .clipboard-zen-bar {
    background: rgba(31,41,55,0.95);
    border-color: rgba(255,255,255,0.1);
}

body.theme-sepia .clipboard-zen-bar {
    background: rgba(254,243,199,0.95);
    border-color: rgba(120,53,15,0.2);
}

/* Botões da zen bar - Acessibilidade Fitts' Law */
.clipboard-zen-bar .zen-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #f3f4f6;
    color: #374151;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

.clipboard-zen-bar .zen-btn:hover {
    background: #e5e7eb;
    transform: translateY(-2px);
}

.clipboard-zen-bar .zen-btn:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

body.theme-dark .clipboard-zen-bar .zen-btn {
    background: #374151;
    color: #f3f4f6;
}

body.theme-dark .clipboard-zen-bar .zen-btn:hover {
    background: #4b5563;
}

/* Botão Play especial */
.clipboard-zen-bar .play-btn {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    color: white !important;
    padding: 12px 20px;
    min-width: 100px;
}

.clipboard-zen-bar .play-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(34,197,94,0.4);
}

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

/* Botões de navegação de fase */
.clipboard-zen-bar .zen-btn-nav {
    min-width: auto;
    padding: 10px 16px;
}

/* Divisores */
.clipboard-zen-bar .zen-divider {
    height: 24px;
    width: 1px;
    background: rgba(0,0,0,0.1);
    flex-shrink: 0;
}

body.theme-dark .clipboard-zen-bar .zen-divider {
    background: rgba(255,255,255,0.1);
}

/* WPM Display */
.clipboard-zen-bar .zen-wpm {
    font-weight: 700;
    min-width: 70px;
    text-align: center;
    color: #1f2937;
    font-size: 13px;
}

body.theme-dark .clipboard-zen-bar .zen-wpm {
    color: #f3f4f6;
}

/* Indicador de fase */
.clipboard-zen-bar .zen-phase-indicator {
    font-size: 13px;
    color: #6b7280;
    font-weight: 700;
    white-space: nowrap;
    padding: 6px 12px;
    background: #e5e7eb;
    border-radius: 20px;
}

body.theme-dark .clipboard-zen-bar .zen-phase-indicator {
    background: #374151;
    color: #d1d5db;
}

/* Mobile responsive - Zen Bar compacta */
@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;
        /* v60.11: Previne overflow horizontal */
        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;
    }
    
    /* v60.11: Esconde botões menos importantes quando overflow */
    .clipboard-zen-bar .zen-btn[title="Diminuir fonte"],
    .clipboard-zen-bar .zen-btn[title="Aumentar fonte"] {
        display: none;
    }
    
    /* v60.19: Wrapper no mobile */
    .clipboard-zen-bar .zen-controls-wrapper {
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* v60.19: Wrapper dos controles da zen-bar */
.clipboard-zen-bar .zen-controls-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* v60.19: Botão olhinho sempre visível */
.clipboard-zen-bar .zen-eye-btn {
    background: #e0e7ff !important;
    color: #4f46e5 !important;
    flex-shrink: 0;
}

.clipboard-zen-bar .zen-eye-btn:hover {
    background: #c7d2fe !important;
}

body.theme-dark .clipboard-zen-bar .zen-eye-btn {
    background: #312e81 !important;
    color: #a5b4fc !important;
}

/* v60.19: Quando zen-bar está escondida */
.clipboard-zen-bar.zen-bar-hidden {
    padding: 8px 12px;
}

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

/* v60.19: Modo Texto Puro */
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(99, 102, 241, 0.15) !important;
    text-decoration: underline;
    text-decoration-color: #6366f1;
}

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

/* Container do texto colado - tipografia de livro */
.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: #f3f4f6;
}

body.theme-dark .clipboard-reader-container {
    background: #111827;
}

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

/* Container do texto (reflow) */
.reflow-container {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    line-height: 2;
    color: #374151;
}

body.theme-dark .reflow-container {
    background: #1f2937;
    color: #e5e7eb;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

body.theme-sepia .reflow-container {
    background: #fffbeb;
    color: #78350f;
    box-shadow: 0 4px 20px rgba(120,53,15,0.1);
}

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

/* Palavras no modo clipboard */
.word-block.reflow-word {
    display: inline-block;
    padding: 4px 2px;
    border-radius: 4px;
    transition: all 0.15s ease;
    position: relative;
    cursor: default;
}

body.theme-dark .word-block.reflow-word {
    color: #e5e7eb;
}

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

/* O highlight VISUAL é um overlay interno (inset) */
.word-block::after {
    content: "";
    position: absolute;
    /* Inset compensado pelo zoom */
    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(0,0,255,0.15); }
.word-block.in-region:hover { z-index: 50; }

.word-block.active::after {
    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);
}
.word-block.active { z-index: 30; outline: none; }
body.theme-dark .word-block.active::after { mix-blend-mode: difference; }
.word-block.outside-region { opacity: 0.15; }

/* WORD HIGHLIGHT - Feedback visual das palavras detectadas */
.word-highlight {
    position: absolute;
    background-color: rgba(251, 191, 36, 0.35);
    border-radius: 3px;
    pointer-events: none;
    z-index: 18;
    transition: all 0.2s ease;
}

.word-highlight.preview {
    background-color: rgba(59, 130, 246, 0.25);
    border: 1px dashed rgba(59, 130, 246, 0.5);
}

/* PERFORMANCE: Desativa palavras durante seleção */
body.select-mode .word-block {
    pointer-events: none !important;
}

.reading-region {
    position: absolute;
    /* CONTRA-ESCALA: Borda não cresce com zoom */
    border: calc(3px / var(--zoom-factor, 1)) solid #3b82f6;
    background: rgba(59, 130, 246, 0.1);
    z-index: 25; /* Acima do text-layer (z-index: 20) */
    pointer-events: none;
    border-radius: 8px;
}
.reading-region.editing {
    pointer-events: auto;
    cursor: move;
    border-style: dashed;
    background: rgba(59, 130, 246, 0.25);
    z-index: 100; /* BEM acima do texto durante edição */
}
.reading-region .region-label {
    position: absolute;
    top: -32px;
    left: 0;
    background: #3b82f6;
    color: white;
    padding: 4px 12px;
    border-radius: 6px 6px 0 0;
    font-size: 12px;
    font-weight: bold;
    /* CONTRA-ESCALA: Label não cresce com zoom */
    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;
    /* CONTRA-ESCALA: Controles não crescem com zoom */
    transform: scale(calc(1 / var(--zoom-factor, 1)));
    transform-origin: bottom right;
    z-index: 110; /* BEM acima das palavras */
    pointer-events: auto !important;
    flex-wrap: wrap;
    max-width: 100%;
}

/* Mobile: Esconde minigames nos controles da região (usar menu Mais) */
@media (max-width: 640px) {
    .reading-region .region-controls {
        top: -32px;
        gap: 2px;
    }
    .reading-region .region-controls .region-quest {
        display: none; /* Esconde Quest/Mastery no mobile - usar menu Mais */
    }
    .reading-region .region-play,
    .reading-region .region-edit,
    .reading-region .region-delete {
        width: 28px;
        height: 28px;
    }
}
/* v107: Botão Play na região */
.reading-region .region-play {
    background: #22c55e;
    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;
}
.reading-region .region-play:hover { background: #16a34a; transform: scale(1.1); }
.reading-region .region-play:active { transform: scale(0.95); }

/* v107: Estado "playing" - região sendo lida */
.reading-region.playing {
    border-color: #22c55e !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: #22c55e !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: #f59e0b;
    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);
}
.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: #ef4444;
    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);
}
.reading-region .region-delete:hover { background: #dc2626; transform: scale(1.1); }
.reading-region .region-delete:active { transform: scale(0.95); }

/* Handles de redimensionamento */
.reading-region .resize-handle {
    position: absolute;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border: 3px solid white;
    border-radius: 50%;
    pointer-events: auto;
    cursor: pointer;
    display: none;
    z-index: 200;
    /* CONTRA-ESCALA: Handles não crescem com zoom */
    transform: scale(calc(1 / var(--zoom-factor, 1)));
    box-shadow: 0 2px 12px rgba(0,0,0,0.5), 0 0 0 3px rgba(59, 130, 246, 0.4);
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.reading-region .resize-handle:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    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(59, 130, 246, 0.5);
}
.reading-region .resize-handle:active {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
}
.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(59, 130, 246, 0.3); }
    50% { box-shadow: 0 2px 16px rgba(59, 130, 246, 0.6), 0 0 0 4px rgba(59, 130, 246, 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; }

/* Speed Setup Modal */
.speed-setup-overlay {
    position: fixed; inset: 0; z-index: 300;
    background: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 100%);
    display: none; align-items: center; justify-content: center;
    padding: 20px;
}
.speed-setup-overlay.active { display: flex; }

.speed-card {
    background: white; border-radius: 24px; padding: 30px;
    max-width: 400px; width: 100%; text-align: center;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}

.speed-option {
    width: 100%;
    padding: 16px;
    margin: 8px 0;
    border: 3px solid #e5e7eb;
    border-radius: 16px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 15px;
}
.speed-option:hover { border-color: #3b82f6; background: #eff6ff; }
.speed-option:active { transform: scale(0.98); }
.speed-option.selected { border-color: #3b82f6; background: #eff6ff; }

.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: #1f2937; margin-bottom: 2px; }
.speed-option-text p { font-size: 12px; color: #6b7280; }

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

.tutorial-card {
    background: white; 
    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;
}

.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: #e5e7eb;
    transition: all 0.3s;
}
.tutorial-progress-dot.active {
    background: #3b82f6;
    width: 30px;
    border-radius: 5px;
}
.tutorial-progress-dot.done {
    background: #22c55e;
}

.tutorial-demo {
    background: #f3f4f6;
    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 #3b82f6;
    border-radius: 12px;
    background: rgba(59, 130, 246, 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 rgba(59, 130, 246, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
}

/* Botão de Ajuda Flutuante */
.help-btn {
    position: fixed;
    bottom: 100px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
    cursor: pointer;
    z-index: 55;
    transition: transform 0.2s;
}
.help-btn:hover { transform: scale(1.1); }
.help-btn:active { transform: scale(0.95); }

/* Mobile: help-btn fica ao lado esquerdo para não sobrepor FABs */
@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;
    }
}

/* Modo seleção - MOBILE OPTIMIZADO */
body.select-mode #pdf-container { cursor: crosshair; }
body.select-mode .page-wrapper { cursor: crosshair; }

#selection-box { 
    position: fixed; 
    border: 3px dashed #3b82f6; 
    background: rgba(59, 130, 246, 0.2); 
    z-index: 9999; 
    display: none; 
    pointer-events: none;
    border-radius: 8px;
}

/* Marcador de ponto de seleção - OTIMIZADO MOBILE */
.selection-point {
    position: absolute;
    width: 50px;
    height: 50px;
    background: rgba(59, 130, 246, 0.9);
    border: 4px solid white;
    border-radius: 50%;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 18px;
    /* Área de toque transparente gigante ao redor (15px extra) */
    box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 0 15px rgba(59, 130, 246, 0.2);
    /* CONTRA-ESCALA + centralização */
    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))); }
}

/* Barra de modo 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);
}
.selection-mode-bar.active { display: flex; }

/* Mobile: barra do Sniper fica embaixo, no lugar dos controles */
@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);
}

/* Esconde controles mobile quando Sniper ativo */
body.select-mode .mobile-controls {
    display: none !important;
}

#reading-guide { 
    position: fixed; left: 0; width: 100%; 
    top: 50%; /* Começa no centro */
    transform: translateY(-50%);
    height: var(--ruler-height, 60px);
    /* Área escura ao redor - SEMPRE preta */
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, var(--ruler-opacity, 0.85)); 
    /* Borda colorida na janela de leitura */
    border-top: 3px solid var(--ruler-border-color, #3b82f6);
    border-bottom: 3px solid var(--ruler-border-color, #3b82f6);
    z-index: 25; 
    opacity: 0;
    visibility: hidden;
    display: none; /* ESCONDE COMPLETAMENTE */
    /* v60.12: Transição suave quando move (cooldown impede chamadas frequentes) */
    transition: opacity 0.3s, top 0.25s ease-out;
    cursor: ns-resize;
    pointer-events: none;
}

#reading-guide.active {
    display: block; /* Mostra */
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none; /* Remove transform quando ativada para posicionamento preciso */
}

#reading-guide.dragging {
    transition: none !important; /* Remove transição durante arrasto */
}

#reading-guide.manual-position {
    transition: opacity 0.3s; /* Sem transição de top quando posicionado manualmente */
}

/* Controles da Régua */
.ruler-controls {
    position: fixed;
    bottom: 180px;
    right: 16px;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 8px;
    z-index: 55;
    display: none;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.ruler-controls.active { display: flex; }
.ruler-controls button {
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255,255,255,0.1);
    color: white;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    flex-shrink: 0;
}
.ruler-controls button:hover { background: rgba(255,255,255,0.2); }
.ruler-controls .ruler-size { 
    text-align: center; 
    color: #94a3b8; 
    font-size: 0.7rem;
    padding: 4px 0;
}
.ruler-controls .ruler-separator {
    border-left: 1px solid rgba(255,255,255,0.2);
    height: 20px;
    margin: 0 4px;
}
.ruler-controls .ruler-btn-close {
    background: rgba(239,68,68,0.3) !important;
}
.ruler-controls .ruler-btn-close:hover {
    background: rgba(239,68,68,0.5) !important;
}
.ruler-controls input[type="color"] {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
}

@media (max-width: 768px) {
    .ruler-controls { bottom: 170px; }
}

/* Ruler controls em landscape - layout horizontal compacto no topo */
@media (max-height: 500px) and (orientation: landscape) {
    .ruler-controls {
        bottom: auto !important;
        top: 8px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        flex-direction: row !important;
        padding: 8px 16px !important;
        gap: 10px !important;
        max-width: fit-content !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        border-radius: 30px;
    }
    .ruler-controls button {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
        font-size: 1rem !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
    }
    .ruler-controls .ruler-size {
        padding: 0 8px !important;
        white-space: nowrap;
        font-size: 0.8rem !important;
        min-width: auto !important;
        width: auto !important;
        height: auto !important;
    }
    /* Esconde COMPLETAMENTE elementos secundários em landscape */
    .ruler-controls .ruler-separator,
    .ruler-controls .ruler-hide-landscape {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
}

/* Tablet landscape */
@media (max-height: 600px) and (min-width: 700px) and (orientation: landscape) {
    .ruler-controls {
        bottom: auto !important;
        top: 10px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        flex-direction: row !important;
        max-width: fit-content !important;
    }
    .ruler-controls .ruler-separator {
        display: none !important;
    }
}

/* Mobile Select Popup */
.mobile-select-popup {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    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: white;
    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;
}
body.theme-dark .mobile-select-popup-content { background: #1f2937; }

.mobile-select-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border-radius: 12px;
    background: #f3f4f6;
    margin-bottom: 10px;
    text-align: left;
    transition: all 0.2s;
}
body.theme-dark .mobile-select-option { background: #374151; color: white; }
.mobile-select-option:active { transform: scale(0.98); background: #e5e7eb; }
.mobile-select-option div { display: flex; flex-direction: column; }
.mobile-select-option i { color: #3b82f6; }

.modal-overlay { 
    display: none; position: fixed; inset: 0; z-index: 100; 
    background: rgba(0,0,0,0.9); backdrop-filter: blur(5px);
    align-items: center; justify-content: center;
    padding: 20px;
    overflow-y: auto; /* Permite scroll */
}
.modal-overlay.active { display: flex; }

/* Paywall Modal Responsivo */
#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; /* Começa do topo no mobile */
    }
    #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 {
    position: fixed; top: 90px; left: 50%; transform: translateX(-50%);
    background: #3b82f6; color: white; padding: 10px 20px; border-radius: 50px; 
    font-weight: bold; font-size: 14px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); 
    z-index: 200; opacity: 0; transition: opacity 0.3s; pointer-events: none;
    text-align: center; max-width: 90%;
}

.mode-btn-active { background: #3b82f6 !important; color: white !important; }

/* Instrução de seleção - MELHORADA */
#select-instruction {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: white;
    padding: 15px 24px;
    border-radius: 16px;
    font-size: 14px;
    z-index: 200;
    display: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    text-align: center;
    max-width: 90%;
    line-height: 1.5;
}
body.select-mode #select-instruction { display: block; }

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

.onboarding-card {
    background: white; border-radius: 24px; padding: 40px;
    max-width: 500px; width: 100%; text-align: center;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
}

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

.onboarding-icon {
    width: 80px; height: 80px; margin: 0 auto 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: white; font-size: 36px;
}

.onboarding-dots {
    display: flex; justify-content: center; gap: 8px; margin: 20px 0;
}
.onboarding-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: #e5e7eb; transition: all 0.3s;
}
.onboarding-dot.active { background: #3b82f6; width: 30px; border-radius: 5px; }

.premium-badge {
    position: fixed; top: 10px; right: 10px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white; padding: 6px 12px; border-radius: 20px;
    font-size: 11px; font-weight: bold; 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; }

/* Premium badge no landscape mobile - reposiciona para não atrapalhar */
@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 também ajusta o badge */
body.force-mobile .premium-badge {
    top: 5px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    padding: 3px 8px;
    font-size: 8px;
    opacity: 0.7;
}

/* ==================== MODO ZEN (Interface Limpa) ==================== */
.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 permanece visível no Modo Zen se estiver ativo */
.zen-mode .teleprompter-show-btn {
    display: none !important;
}

/* Botão flutuante para sair do Modo Zen */
.zen-exit-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    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(0, 0, 0, 0.5);
    transform: scale(1.1);
}
.zen-mode .zen-exit-btn {
    display: flex !important;
}

/* Ajustes do PDF container no Modo Zen */
.zen-mode #pdf-container {
    padding-bottom: 20px !important;
}

/* MOBILE CONTROLS - REDESENHADO */
.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: white;
        border-top: 1px solid #e5e7eb;
        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: #1f2937; border-color: #374151; }
    
    .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;
        background: #f3f4f6;
        color: #374151;
        border: none;
        flex: 1 1 0;
        min-width: 0;
        max-width: 70px;
        height: 56px;
    }
    body.theme-dark .mobile-controls button { background: #374151; color: #e5e7eb; }
    
    .mobile-controls button.active {
        background: #3b82f6;
        color: white;
    }
    
    .mobile-controls button.play-btn {
        background: #22c55e;
        color: white;
        flex: 1.2 1 0;
        max-width: 80px;
    }
    
    .mobile-controls button.play-btn.playing {
        background: #f97316;
    }
    
    /* PDF Container com scroll horizontal */
    #pdf-container { 
        padding-bottom: 100px; 
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    
    .desktop-toolbar { display: none !important; }
}

/* ==================== INDICADORES REMOVIDOS ==================== */
/* Botões de régua/arco-íris agora ficam no zoom-controls-mobile */

/* Classe forçada para mobile (via JS) */
body.force-mobile .mobile-controls {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid #e5e7eb;
    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: #1f2937; border-color: #374151; }

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

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

/* Modo Fantasma também no force-mobile */
body.force-mobile .word-block.active {
    background-color: transparent !important;
    box-shadow: none !important;
    mix-blend-mode: normal !important;
    border-bottom: 2px solid rgba(255, 200, 0, 0.4);
    border-radius: 0 !important;
}

body.force-mobile .word-block.active.rainbow-highlight {
    background-color: transparent !important;
    border-bottom: 2px solid currentColor;
}

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.4);
}

body.force-mobile .teleprompter-text .current-word {
    background: linear-gradient(135deg, var(--highlight-color, #fbbf24), color-mix(in srgb, var(--highlight-color, #fbbf24) 80%, black)) !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    font-weight: 800 !important;
    color: #1f2937 !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--highlight-color, #fbbf24) 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 (Horizontal) ==================== */
@media (max-height: 500px) and (orientation: landscape) {
    /* Mobile controls mais compactos */
    .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 compactos */
    .ruler-controls {
        bottom: 70px !important;
        right: 10px !important;
        padding: 4px !important;
    }
    
    /* Show menu button compacto */
    .show-menu-btn {
        bottom: 70px !important;
        padding: 8px 12px !important;
    }
    
    /* Region counter reposicionado */
    #region-counter {
        bottom: 70px !important;
    }
    
    /* PDF container com menos padding */
    #pdf-container {
        padding-bottom: 70px !important;
    }
}

/* ==================== NAVEGADOR DE PÁGINAS ==================== */
.page-navigator {
    position: fixed;
    top: 80px;
    right: 16px;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(8px);
    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.3);
}
.page-navigator.active { display: flex; }
.page-nav-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255,255,255,0.1);
    color: white;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-nav-btn:hover { background: rgba(255,255,255,0.2); }
.page-nav-btn:active { transform: scale(0.95); }
.page-nav-display {
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
    background: rgba(255,255,255,0.1);
    border: 1px dashed rgba(255,255,255,0.3);
}
.page-nav-display:hover { 
    background: rgba(255,255,255,0.2); 
    border-style: solid;
}
.page-nav-display:active { transform: scale(0.95); }

/* Modal de input de página */
.page-input-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.page-input-modal.hidden { display: none; }
.page-input-content {
    background: white;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    max-width: 280px;
    width: 100%;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.page-input-content p {
    font-weight: 600;
    margin-bottom: 16px;
    color: #1f2937;
}
.page-input-content input {
    width: 100%;
    padding: 12px 16px;
    font-size: 1.5rem;
    text-align: center;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 16px;
    font-weight: 600;
}
.page-input-content input:focus {
    outline: none;
    border-color: #3b82f6;
}
.page-input-buttons {
    display: flex;
    gap: 10px;
}
.page-input-buttons button {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    font-weight: 600;
    border: none;
    cursor: pointer;
}
.page-input-buttons .btn-cancel {
    background: #f3f4f6;
    color: #6b7280;
}
.page-input-buttons .btn-confirm {
    background: #3b82f6;
    color: white;
}

@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: white;
    border: 2px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    color: #374151;
}
.zoom-controls-mobile button.zen-toggle-btn {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    border-color: #7c3aed;
    color: white;
}
body.theme-dark .zoom-controls-mobile button { 
    background: #374151; 
    border-color: #4b5563;
    color: white;
}
body.theme-dark .zoom-controls-mobile button.zen-toggle-btn {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    border-color: #7c3aed;
    color: white;
}

.zoom-controls-mobile .zoom-level {
    background: #1f2937;
    color: white;
    font-size: 11px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 20px;
    text-align: center;
}

/* Botões de régua/arco-íris no zoom-controls-mobile */
.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.15); }
    50% { box-shadow: 0 2px 15px rgba(59, 130, 246, 0.5); }
}

/* Animação shimmer para botão próxima fase */
@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%;
}

/* ==================== MODO CLIPBOARD - LEITURA ZEN ==================== */
/* Esconde controles de PDF quando estiver no modo texto */
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: Esconde botões desnecessários no modo clipboard */
body.mode-clipboard .mobile-select-option,
body.mode-clipboard [onclick*="toggleSelectMode"],
body.mode-clipboard .mobile-controls .area-btn {
    display: none !important;
}

/* Container otimizado para leitura de texto */
body.mode-clipboard #pdf-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background: var(--bg-color, #4a5568);
}

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

.activation-input {
    width: 100%;
    padding: 15px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 18px;
    text-align: center;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: bold;
    margin: 15px 0;
    transition: border-color 0.3s;
}
.activation-input:focus {
    outline: none;
    border-color: #3b82f6;
}
.activation-input.error {
    border-color: #ef4444;
    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-btn {
    position: fixed;
    bottom: 100px;
    left: 20px;
    background: #3b82f6;
    color: white;
    padding: 12px 20px;
    border-radius: 50px;
    font-weight: bold;
    display: none;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
    z-index: 60;
    cursor: pointer;
    transition: transform 0.2s;
}
.install-btn:hover { transform: scale(1.05); }
.install-btn.show { display: flex; }

/* Esconde botão instalar quando estiver no leitor */
#reader-view.active ~ .install-btn,
body:has(#reader-view.active) .install-btn {
    display: none !important;
}

/* ==================== TELEPROMPTER - SIMPLIFICADO ==================== */
.teleprompter-bar {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(150%);
    width: 94%;
    max-width: 600px;
    background: rgba(15, 23, 42, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    z-index: 45;
    display: none;
    overflow: hidden;
    transition: transform 0.3s ease;
}
.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 rgba(255,255,255,0.1);
    cursor: grab;
    touch-action: none;
}
.tele-header:active {
    cursor: grabbing;
}

.tele-drag-indicator {
    color: rgba(255,255,255,0.4);
    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.15);
    border: none;
    color: white;
    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.3);
}

.tele-size {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    min-width: 40px;
    text-align: center;
}

.tele-close {
    margin-left: auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.3);
    border: none;
    color: white;
    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.7);
    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: white;
    line-height: 1.6;
}
.teleprompter-text .tele-word {
    display: inline;
    transition: all 0.15s ease;
}
.teleprompter-text .current-word {
    background: var(--highlight-color, #facc15);
    color: #000;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(250, 204, 21, 0.4);
}
.teleprompter-text .read-word {
    color: rgba(255,255,255,0.35);
}

/* Barra de progresso no teleprompter */
.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, #22c55e, #16a34a);
    transition: width 0.3s ease;
    border-radius: 0 2px 0 0;
}

/* Contador de palavras no header */
.tele-counter {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    font-weight: 600;
    margin-left: 8px;
    background: rgba(255,255,255,0.1);
    padding: 2px 8px;
    border-radius: 10px;
}

.tele-counter-current {
    color: #22c55e;
    font-weight: 700;
}

/* Animação pulse para palavra atual no PDF */
.word-block.active-word {
    animation: word-pulse 0.8s ease-in-out;
}

@keyframes word-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* Mobile */
@media (max-width: 768px) {
    .teleprompter-bar {
        bottom: 100px; /* Aumentado para ficar acima do neuro-dock */
        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);
    }
}

/* 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 */
body.force-mobile .teleprompter-bar {
    bottom: 80px;
}

.teleprompter-show-btn {
    position: fixed;
    bottom: 180px; /* Mais alto para não cobrir dock */
    right: 20px;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    z-index: 45; /* Abaixo do FAB e dock */
    box-shadow: 0 8px 20px rgba(59,130,246,0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}

/* Mobile: posição diferente - lado ESQUERDO para não sobrepor FABs */
@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(59,130,246,0.5);
}
.teleprompter-show-btn.hidden { display: none; }

/* ==================== BARRA DE EDIÇÃO DE REGIÃO ==================== */
.region-edit-bar {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #1e293b, #334155);
    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.4), 0 0 0 1px rgba(255,255,255,0.1);
}
.region-edit-bar.active { display: flex; }
.region-edit-bar span {
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
}
.region-edit-bar button {
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.85rem;
    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, #22c55e, #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, #ef4444, #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;
    }
}

/* ==================== MODO FANTASMA MOBILE ==================== */
/* No celular: esconde o karaokê amarelo, foco total no Teleprompter */
@media (max-width: 768px) {
    /* 1. Marcador amarelo invisível (mas código continua rodando para scroll) */
    .word-block.active {
        background-color: transparent !important;
        box-shadow: none !important;
        mix-blend-mode: normal !important;
        /* Sublinhado sutil para referência mínima */
        border-bottom: 2px solid rgba(255, 200, 0, 0.4);
        border-radius: 0 !important;
    }
    
    /* 2. Modo arco-íris também fica transparente */
    .word-block.active.rainbow-highlight {
        background-color: transparent !important;
        border-bottom: 2px solid currentColor;
    }
    
    /* 3. Régua de foco mais sutil (só quando ativa) */
    #reading-guide.active {
        opacity: 0.5 !important;
    }
    
    /* 4. Teleprompter ganha mais destaque */
    .teleprompter-bar.active {
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4);
    }
    
    /* 5. Texto do teleprompter maior e mais legível */
    .teleprompter-text {
        font-size: var(--teleprompter-font-size, 1.2rem);
        line-height: 1.6;
    }
    
    /* 6. Palavra atual no teleprompter SUPER destacada */
    .teleprompter-text .current-word {
        background: linear-gradient(135deg, var(--highlight-color, #fbbf24), color-mix(in srgb, var(--highlight-color, #fbbf24) 80%, black)) !important;
        padding: 4px 8px !important;
        border-radius: 6px !important;
        font-weight: 800 !important;
        color: #1f2937 !important;
        box-shadow: 0 2px 8px color-mix(in srgb, var(--highlight-color, #fbbf24) 50%, transparent);
    }
}

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

/* Botão de mostrar menu quando escondido */
.show-menu-btn {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(59, 130, 246, 0.9);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    z-index: 60;
    display: none;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.show-menu-btn.visible {
    display: flex;
}

/* VICTORY SCREEN */
.victory-overlay {
    position: fixed; inset: 0; z-index: 150;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: none; align-items: center; justify-content: center;
    padding: 20px;
    overflow-y: auto;
}
.victory-overlay.active { display: flex; }

.victory-card {
    background: white; 
    border-radius: 24px; 
    padding: 32px 24px;
    max-width: 380px; 
    width: 100%; 
    text-align: center;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden;
    margin: auto;
}

.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%;
}

/* Vitória responsiva - 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; }
}

/* Vitória responsiva - 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; } /* Esconde ícone troféu */
    
    .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: #f59e0b;
    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, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 16px;
    padding: 20px;
    margin: 15px 0;
}

.stat-number {
    font-size: 48px;
    font-weight: 900;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.share-canvas {
    display: none;
}

/* ==================== MARCA D'ÁGUA FANTASMA ==================== */
.watermark {
    position: fixed;
    bottom: 8px;
    right: 12px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-color, #1f2937);
    opacity: 0.12;
    pointer-events: none;
    z-index: 999;
    font-family: 'Inter', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Ajuste para tema escuro */
body.theme-dark .watermark {
    color: #ffffff;
    opacity: 0.08;
}

/* Esconde no modo Zen para não distrair */
.zen-mode .watermark {
    opacity: 0.05;
}

/* Mobile: um pouco maior para aparecer em prints */
@media (max-width: 768px) {
    .watermark {
        font-size: 9px;
        bottom: 6px;
        right: 8px;
    }
}

/* ==================== NEUROSPRINT - MODO COMPLETO ==================== */
.neurosprint-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 500;
    display: none;
    flex-direction: column;
}
.neurosprint-overlay.active {
    display: flex;
}

/* Header compacto */
.neurosprint-header {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    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: white;
    font-weight: 800;
    font-size: 1.1rem;
}

.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;
}

/* 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;
    letter-spacing: -0.02em;
}

.game-branding-url {
    color: #a78bfa;
    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.6);
    text-transform: uppercase;
}

.neurosprint-stat-value {
    font-weight: 800;
    font-size: 1.1rem;
    color: #fbbf24;
}

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

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

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

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

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

.sprint-timer-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e 0%, #fbbf24 50%, #ef4444 100%);
    border-radius: 4px;
    transition: width 0.1s linear;
    width: 100%;
}

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

.sprint-timer-text strong {
    color: #fbbf24;
    font-size: 1.1rem;
}

/* Conteúdo de leitura */
.sprint-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.sprint-text {
    font-size: 1.3rem;
    line-height: 2.2;
    color: #e2e8f0;
    text-align: left;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Botão "Já decorei" */
.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.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

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

.countdown-number {
    font-size: 8rem;
    font-weight: 900;
    color: #fbbf24;
    animation: countdownPulse 0.8s ease;
}

.countdown-text {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 16px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

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

/* Transição Blur */
.transition-blur {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    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, #8b5cf6 0%, #ec4899 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    animation: bounceIn 0.5s ease;
    flex-shrink: 0;
}

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

.transition-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: white;
    margin-bottom: 8px;
}

.transition-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    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: #e2e8f0;
    text-align: left;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Formatação de estruturas legais no jogo */
.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: #c084fc;
    font-weight: 600;
}

.arcade-text .text-cyan-400,
.arcade-text .structure-inciso {
    color: #22d3ee;
}

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

/* Classes de estrutura para formatação legível */
.structure-chapter {
    color: #60a5fa;
    font-weight: 700;
    font-size: 1.15em;
    display: inline;
}

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

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

.structure-inciso {
    color: #22d3ee;
}

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

/* Sprint text (fase de leitura) também usa cores */
.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: #c084fc; }
.sprint-text .text-cyan-400 { color: #22d3ee; }
.sprint-text .text-green-400 { color: #4ade80; }

/* Lacuna (gap) */
.arcade-gap {
    display: inline-block;
    min-width: 80px;
    padding: 4px 16px;
    margin: 0 4px;
    background: rgba(59, 130, 246, 0.15);
    border: 2px dashed rgba(59, 130, 246, 0.5);
    border-radius: 8px;
    color: rgba(96, 165, 250, 0.5);
    font-weight: 700;
    text-align: center;
    transition: all 0.3s ease;
    vertical-align: baseline;
}

.arcade-gap.active {
    border-color: #fbbf24;
    background: rgba(251, 191, 36, 0.2);
    box-shadow: 0 0 25px rgba(251, 191, 36, 0.4);
    animation: gapPulse 1.5s ease-in-out infinite;
    color: #fbbf24;
}

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

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

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

@keyframes highlightFade {
    0% { opacity: 1; background: rgba(59, 130, 246, 0.4); }
    70% { opacity: 0.8; background: rgba(59, 130, 246, 0.3); }
    100% { opacity: 0; background: rgba(59, 130, 246, 0); }
}

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

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

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

/* Painel de Opções - FIXO no rodapé */
.arcade-options-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.98) 0%, rgba(30, 41, 59, 0.95) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 16px 20px 24px;
    z-index: 510;
    backdrop-filter: blur(20px);
}

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

.gap-timer-bar {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    border-radius: 2px;
    transition: width 0.1s linear;
}

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

.gap-timer-bar.timer-critical {
    background: linear-gradient(90deg, #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.1);
    border-radius: 3px;
    margin-bottom: 12px;
    overflow: hidden;
}

.options-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #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;
    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: linear-gradient(135deg, #1e3a5f 0%, #1e293b 100%);
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-radius: 16px;
    color: #93c5fd;
    font-weight: 700;
    font-size: 1.1rem;
    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, #2563eb 0%, #3b82f6 100%);
    border-color: #3b82f6;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

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

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

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

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

/* Animações */
@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, #22c55e 0%, #16a34a 100%);
}

.result-icon-container.good {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.result-icon-container.okay {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.result-icon-container.needs-work {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

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

.result-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: white;
    margin-bottom: 4px;
}

.result-subtitle {
    color: #94a3b8;
    font-size: 0.85rem;
    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;
    color: #fbbf24;
}

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

.result-stat-label {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

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

/* Branding na tela de resultado */
.result-branding {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 12px 0;
    padding: 8px 16px;
    background: rgba(139, 92, 246, 0.15);
    border-radius: 30px;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

@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: #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;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.neurosprint-btn-primary {
    background: linear-gradient(135deg, #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.1);
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

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

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

/* Mobile responsivo */
@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.2);
    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, #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;
    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);
    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, #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;
    color: white;
    margin-bottom: 8px;
    text-align: center;
}

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

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

.checkpoint-tip-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #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;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}

.checkpoint-btn {
    padding: 18px 40px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: none;
    border-radius: 16px;
    color: white;
    font-weight: 800;
    font-size: 1.1rem;
    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, #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;
    }
}

/* ===== PONTUAÇÃO FLUTUANTE (RPG Style) ===== */
.floating-score {
    position: fixed;
    color: #fbbf24;
    font-weight: 900;
    font-size: 1.5rem;
    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 grande no header */
.neurosprint-score-big {
    font-size: 1.3rem;
    font-weight: 900;
    color: #fbbf24;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

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

/* Resultado com stats dinâmicos */
.result-stat-label {
    font-size: 0.8rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ===== MODAL DE SELEÇÃO DE DIFICULDADE ===== */
.difficulty-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    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;
    color: white;
    margin-bottom: 6px;
    text-align: center;
}

.difficulty-subtitle {
    color: rgba(255, 255, 255, 0.6);
    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.05);
    border: 2px solid rgba(255, 255, 255, 0.15);
    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.3);
}

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

/* Estados de seleção com animação */
.difficulty-card.selected {
    border-width: 3px;
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

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

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

.difficulty-card.normal { border-color: #3b82f6; background: rgba(59, 130, 246, 0.15); }
.difficulty-card.normal.selected { box-shadow: 0 0 25px rgba(59, 130, 246, 0.3); }
.difficulty-card.normal .difficulty-icon { background: linear-gradient(135deg, #3b82f6, #2563eb); }

.difficulty-card.hard { border-color: #a855f7; background: rgba(168, 85, 247, 0.15); }
.difficulty-card.hard.selected { box-shadow: 0 0 25px rgba(168, 85, 247, 0.3); }
.difficulty-card.hard .difficulty-icon { background: linear-gradient(135deg, #a855f7, #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;
    color: white;
    margin-bottom: 2px;
}

.difficulty-desc {
    font-size: 0.8rem;
    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;
}

.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: #2563eb; }
.difficulty-card.hard .difficulty-check { color: #9333ea; }

.difficulty-card.easy .difficulty-multiplier { background: rgba(34, 197, 94, 0.3); color: #86efac; }
.difficulty-card.normal .difficulty-multiplier { background: rgba(59, 130, 246, 0.3); color: #93c5fd; }
.difficulty-card.hard .difficulty-multiplier { background: rgba(168, 85, 247, 0.3); color: #d8b4fe; }

.difficulty-start-btn {
    margin-top: 24px;
    padding: 16px 32px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border: none;
    border-radius: 14px;
    color: white;
    font-weight: 700;
    font-size: 1rem;
    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(59, 130, 246, 0.4);
}

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

.difficulty-close {
    position: fixed;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.1);
    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);
    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, #1e293b 0%, #0f172a 100%);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 32px;
    max-width: 400px;
    width: 100%;
    text-align: center;
}

.profile-badge {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #fbbf24, #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.4);
}

.profile-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
    margin-bottom: 8px;
}

.profile-subtitle {
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 24px;
}

.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.7);
    margin-bottom: 6px;
    display: block;
}

.profile-input {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: white;
    font-size: 1rem;
    transition: all 0.2s ease;
}

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

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

.profile-save-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border: none;
    border-radius: 12px;
    color: #1e293b;
    font-weight: 800;
    font-size: 1rem;
    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.4);
}

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

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

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

.user-avatar {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #fbbf24, #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;
    color: #1e293b;
}

.user-level {
    font-size: 0.7rem;
    color: #64748b;
}

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

/* XP Bar na tela de resultado */
.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: #64748b;
    margin-bottom: 6px;
}

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

.xp-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #fbbf24, #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, #fbbf24, #f59e0b);
    color: #1e293b;
    padding: 24px 40px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 1.2rem;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 0 60px rgba(251, 191, 36, 0.6);
    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 SELEÇÃO ===== */
.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: white;
    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;
}

.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;
    color: #1e293b;
}

.finetune-close {
    background: #f1f5f9;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #64748b;
}

.finetune-close:hover {
    background: #fee2e2;
    color: #ef4444;
}

.finetune-instructions {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 16px;
}

.finetune-words-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 16px;
}

.finetune-word {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    border: 2px solid #e2e8f0;
    background: white;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.15s ease;
}

.finetune-word:hover {
    border-color: #cbd5e1;
    background: #f1f5f9;
}

.finetune-word.selected {
    background: #dbeafe;
    border-color: #3b82f6;
    color: #1e40af;
    font-weight: 600;
}

.finetune-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    font-size: 0.8rem;
    color: #64748b;
}

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

.finetune-stat strong {
    color: #3b82f6;
}

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

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

.finetune-btn-primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border: none;
}

.finetune-btn-primary:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.finetune-btn-secondary {
    background: white;
    color: #64748b;
    border: 2px solid #e2e8f0;
}

.finetune-btn-secondary:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

/* Botão de ajuste fino na região */
.region-finetune-btn {
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #fbbf24, #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.4);
    z-index: 35;
    opacity: 0;
    transition: all 0.2s ease;
}

.reading-region:hover .region-finetune-btn,
.reading-region.editing .region-finetune-btn {
    opacity: 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 em 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 (Opcional) ==================== */
#progress-badge {
    position: fixed;
    top: 80px;
    right: 12px;
    background: rgba(99, 102, 241, 0.9);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    gap: 8px;
    align-items: center;
    z-index: 100;
    opacity: 0.85;
    transition: opacity 0.3s;
}

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

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

.badge-streak {
    color: #fbbf24;
}

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

/* Botão de toggle do modo aventura */
.adventure-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #6b7280;
    transition: all 0.2s;
}

.adventure-toggle:hover {
    border-color: #6366f1;
    color: #6366f1;
}

.adventure-toggle.active {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-color: transparent;
    color: white;
}

/* ==================== QUEST SYSTEM - HUD Minimalista ==================== */
#quest-hud {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 10px 16px;
    display: none;
    align-items: center;
    gap: 12px;
    z-index: 150;
    border: 1px solid rgba(99, 102, 241, 0.3);
    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;
    color: #94a3b8;
    margin-bottom: 4px;
}

.quest-hp-bar {
    width: 100%;
    height: 8px;
    background: #1e293b;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.quest-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, #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, #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: #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;
    color: #cbd5e1;
}

.quest-words {
    font-weight: 700;
    color: #a5b4fc;
}

.quest-close {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
}

.quest-close:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* Botão Quest na região */
.region-quest {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    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(99, 102, 241, 0.4);
}

/* ==================== RETENTION TEST MODAL ==================== */
#retention-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(4px);
    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: white;
    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;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@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 h3 {
    font-size: 20px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 4px;
}

.retention-header p {
    color: #64748b;
    font-size: 13px;
}

.retention-text {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
    line-height: 1.6;
    font-size: 13px;
    color: #334155;
    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 #6366f1;
    color: #6366f1;
    font-weight: 700;
    text-align: center;
    padding: 2px 6px;
    margin: 0 2px;
    transition: all 0.2s;
    border-radius: 4px;
    background: #eef2ff;
}

.retention-blank.active {
    background: #c7d2fe;
    border-color: #4f46e5;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(99, 102, 241, 0); }
}

.retention-blank.filled {
    background: #dcfce7;
    border-color: #22c55e;
    color: #166534;
    border-style: solid;
}

.retention-blank.wrong {
    background: #fee2e2;
    border-color: #ef4444;
    color: #dc2626;
}

.retention-options-wrapper {
    background: white;
    padding: 16px 0;
    flex-shrink: 0;
}

.retention-options-label {
    font-size: 12px;
    font-weight: 600;
    color: #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: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    border: 2px solid #cbd5e1;
    border-radius: 12px;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 90px;
    text-align: center;
}

.retention-option:hover, .retention-option:active {
    border-color: #6366f1;
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    color: #4f46e5;
    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;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.retention-btn-primary {
    background: linear-gradient(135deg, #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: #f1f5f9;
    color: #64748b;
}

.retention-btn-secondary:hover {
    background: #e2e8f0;
}

.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;
    margin-bottom: 8px;
}

.retention-result.success h4 { color: #22c55e; }
.retention-result.partial h4 { color: #eab308; }
.retention-result.fail h4 { color: #ef4444; }

/* ==================== MASTERY GATE - Territory Conquest Mode ==================== */

/* Cores Premium */
:root {
    --mastery-gold: #D4AF37;
    --mastery-gold-glow: rgba(212, 175, 55, 0.3);
    --mastery-dark: #0a0812;
    --mastery-locked: rgba(10, 8, 18, 0.95);
}

/* HUD do Mastery Gate */
#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;
    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.1);
    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.1);
    color: #64748b;
    border: 1px solid rgba(255,255,255,0.2);
}

.mastery-gate.fog {
    background: rgba(99, 102, 241, 0.3);
    color: #a5b4fc;
    border: 1px solid #6366f1;
    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(99, 102, 241, 0.3); }
    50% { box-shadow: 0 0 12px rgba(99, 102, 241, 0.6); }
}

.mastery-stats {
    text-align: right;
    color: #cbd5e1;
    font-size: 11px;
}

.mastery-decay-bar {
    width: 60px;
    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;
}

.mastery-decay-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #ef4444);
    transition: width 0.1s linear;
}

.mastery-close {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 4px;
}

.mastery-close:hover {
    color: #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: '✓';
    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; }
}

/* Screen shake on conquest */
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 particles */
.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, #ef4444, #dc2626);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    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, #ef4444, #dc2626);
    color: white;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    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 */
.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;
}

/* v24: CSS para melhorar experiência de toque no Mastery Gate */
.mastery-gate-active {
    /* Impede pull-to-refresh mas permite scroll normal */
    overscroll-behavior-y: contain;
    /* Evita seleção de texto enquanto pinta */
    user-select: none;
    -webkit-user-select: none;
    /* Desativa zoom de duplo-toque */
    touch-action: pan-y;
}

/* Quest Texto */
#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.2);
    color: #86efac;
}

/* v26: Efeito de "shatter" (quebrar/dissolver) para palavras lidas */
#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;
    }
}

/* Palavras lidas após shatter ficam mais sutis */
#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, #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, #ef4444);
    color: white;
    border-color: #fb923c;
    animation: checkpoint-pulse 1s infinite;
}

.quest-fs-checkpoint.passed {
    background: #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: #1f2937;
    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.15);
    color: #fef3c7;
    border: 1px solid rgba(212, 175, 55, 0.3);
    animation: word-reveal 0.3s ease;
}

#mastery-fs-text .mastery-word.conquered-word {
    color: #e5e7eb;
    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 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: #1f2937;
    color: #6b7280;
    border: 1px solid #374151;
}

.mastery-fs-gate.fog {
    background: linear-gradient(135deg, #4338ca, #6366f1);
    color: white;
    border: 1px solid #818cf8;
    animation: gate-active 1.5s infinite;
}

.mastery-fs-gate.conquered {
    background: linear-gradient(135deg, #d4af37, #f4d03f);
    color: #1f2937;
    border: 1px solid #fcd34d;
}

@keyframes gate-active {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(99, 102, 241, 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: #312e81;
    border: 2px dashed #6366f1;
    border-radius: 6px;
    color: #a5b4fc;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

#retention-fs-text .retention-blank.active-blank {
    background: #4338ca;
    border-color: #818cf8;
    animation: blank-pulse 1s infinite;
}

#retention-fs-text .retention-blank.filled {
    background: #166534;
    border-color: #22c55e;
    border-style: solid;
    color: #86efac;
}

#retention-fs-text .retention-blank.wrong {
    background: #991b1b;
    border-color: #ef4444;
    border-style: solid;
    color: #fca5a5;
}

@keyframes blank-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.5); }
    50% { box-shadow: 0 0 0 6px rgba(99, 102, 241, 0); }
}

/* Retention Options */
.retention-fs-option {
    padding: 10px 16px;
    background: linear-gradient(135deg, #374151, #1f2937);
    border: 2px solid #4b5563;
    border-radius: 10px;
    color: white;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.retention-fs-option:hover {
    background: linear-gradient(135deg, #4b5563, #374151);
    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; /* Hidden by default, shown when reader-active */
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.reader-active .neuro-dock {
    display: flex;
}

.neuro-dock:hover {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 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: #64748b;
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.neuro-dock .dock-btn:hover {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    transform: translateY(-2px);
}

.neuro-dock .dock-btn.active {
    background: rgba(99, 102, 241, 0.15);
    color: #6366f1;
}

body.theme-dark .neuro-dock .dock-btn {
    color: #94a3b8;
}

body.theme-dark .neuro-dock .dock-btn:hover {
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
}

.neuro-dock .dock-play {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
    margin: 0 4px;
}

.neuro-dock .dock-play:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5);
}

.neuro-dock .dock-play.playing {
    background: linear-gradient(135deg, #f97316, #ef4444);
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
}

.neuro-dock .dock-divider {
    width: 1px;
    height: 32px;
    background: rgba(148, 163, 184, 0.3);
    margin: 0 4px;
}

body.theme-dark .neuro-dock .dock-divider {
    background: rgba(255, 255, 255, 0.1);
}

.neuro-dock .dock-emoji {
    font-size: 20px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

/* v60.20: Wrapper dos controles da neuro-dock */
.neuro-dock .dock-controls-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* v60.20: Botão olhinho sempre visível */
.neuro-dock .dock-eye-btn {
    background: #e0e7ff !important;
    color: #4f46e5 !important;
    flex-shrink: 0;
}

.neuro-dock .dock-eye-btn:hover {
    background: #c7d2fe !important;
    transform: translateY(-2px);
}

body.theme-dark .neuro-dock .dock-eye-btn {
    background: #312e81 !important;
    color: #a5b4fc !important;
}

/* v60.20: Quando neuro-dock está escondida */
.neuro-dock.dock-hidden {
    padding: 8px 12px;
}

.neuro-dock.dock-hidden .dock-controls-wrapper {
    display: none;
}

/* v60.21: Classe global para esconder toda a UI */
body.ui-hidden #help-btn,
body.ui-hidden #btn-sniper-fab,
body.ui-hidden #btn-auto-select-fab,
body.ui-hidden #selection-mode-bar,
body.ui-hidden #ruler-controls,
body.ui-hidden .sniper-fab,
body.ui-hidden .auto-select-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 responsive dock - SEM SCROLL */
@media (max-width: 640px) {
    .neuro-dock {
        bottom: 16px;
        padding: 6px 8px;
        gap: 2px;
        width: auto;
        max-width: calc(100% - 24px);
        /* REMOVIDO overflow-x: auto - barra não deve scrollar */
        overflow: visible;
        flex-wrap: nowrap;
        justify-content: center;
    }
    .neuro-dock .dock-btn {
        width: 38px;
        height: 38px;
        min-width: 38px;
        flex-shrink: 0;
        border-radius: 10px;
    }
    .neuro-dock .dock-btn i,
    .neuro-dock .dock-btn svg {
        width: 18px;
        height: 18px;
    }
    .neuro-dock .dock-play {
        width: 48px;
        height: 48px;
        min-width: 48px;
        flex-shrink: 0;
        border-radius: 14px;
        margin: 0 2px;
    }
    .neuro-dock .dock-play i,
    .neuro-dock .dock-play svg {
        width: 22px;
        height: 22px;
    }
    .neuro-dock .dock-divider {
        display: none; /* Esconde divisores no mobile para economizar espaço */
    }
    .neuro-dock .dock-hide-mobile {
        display: none;
    }
}

/* Reading container padding to avoid dock overlap */
body.reader-active #pdf-container,
body.reader-active .reflow-container {
    padding-bottom: 100px !important;
}

/* ==================== SNIPER FAB (Floating Action Button) ==================== */
.sniper-fab {
    position: fixed;
    bottom: 100px;
    right: 20px;
    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);
}

/* Desktop: FAB à esquerda para não cobrir teleprompter btn */
@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); }
}

/* Esconder FAB no modo clipboard */
body.mode-clipboard .sniper-fab {
    display: none;
}

/* Esconder FAB na home */
body:not(.reader-active) .sniper-fab {
    display: none;
}

/* ==================== LIMPEZA: Esconder elementos duplicados ==================== */
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; /* Força ambas scrollbars */
        scroll-behavior: smooth;
    }
    
    #pdf-container::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }
    
    #pdf-container::-webkit-scrollbar-track {
        background: var(--bg-container);
        border-radius: 6px;
    }
    
    #pdf-container::-webkit-scrollbar-thumb {
        background: #94a3b8;
        border-radius: 6px;
        border: 3px solid var(--bg-container);
    }
    
    #pdf-container::-webkit-scrollbar-thumb:hover {
        background: #64748b;
    }
    
    body.theme-dark #pdf-container::-webkit-scrollbar-thumb {
        background: #475569;
    }
    
    body.theme-dark #pdf-container::-webkit-scrollbar-thumb:hover {
        background: #64748b;
    }
    
    /* Scrollbar horizontal também */
    #pdf-container::-webkit-scrollbar-corner {
        background: var(--bg-container);
    }
}

/* ==================== ESCONDER ELEMENTOS DURANTE PLAY ==================== */
body.playing .sniper-fab,
body.playing .auto-select-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(8px);
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}

.clipboard-more-content {
    background: white;
    border-radius: 24px 24px 0 0;
    width: 100%;
    max-width: 420px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 20px;
}

body.theme-dark .clipboard-more-content {
    background: #1f2937;
    color: white;
}

.clipboard-more-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

body.theme-dark .clipboard-more-header {
    border-color: #374151;
}

.clipboard-more-close {
    background: #f3f4f6;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
}

body.theme-dark .clipboard-more-close {
    background: #374151;
    color: white;
}

.clipboard-more-section {
    margin-bottom: 16px;
}

.clipboard-more-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    margin-bottom: 8px;
}

body.theme-dark .clipboard-more-label {
    color: #9ca3af;
}

.clipboard-more-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.clipboard-more-btn {
    flex: 1;
    min-width: 60px;
    padding: 12px 16px;
    background: #f3f4f6;
    color: #1f2937;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

body.theme-dark .clipboard-more-btn {
    background: #374151;
    color: white;
}

body.theme-sepia .clipboard-more-btn {
    background: #fef3c7;
    color: #78350f;
}

.clipboard-more-btn:hover {
    background: #e5e7eb;
}

body.theme-dark .clipboard-more-btn:hover {
    background: #4b5563;
}

body.theme-sepia .clipboard-more-btn:hover {
    background: #fde68a;
}

.clipboard-more-btn.active {
    background: #3b82f6;
    color: white;
}

.clipboard-more-value {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    padding: 12px;
    font-weight: 700;
    font-size: 16px;
    color: #1f2937;
}

body.theme-dark .clipboard-more-value {
    color: white;
}

body.theme-sepia .clipboard-more-value {
    color: #78350f;
}

/* ==================== HELP MODAL ==================== */
.help-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}

.help-modal-content {
    background: white;
    border-radius: 20px;
    width: 100%;
    max-width: 420px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}

body.theme-dark .help-modal-content {
    background: #1f2937;
    color: white;
}

.help-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
}

body.theme-dark .help-modal-header {
    border-color: #374151;
}

.help-modal-close {
    background: #f3f4f6;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
}

body.theme-dark .help-modal-close {
    background: #374151;
    color: white;
}

.help-modal-body {
    padding: 20px;
}

.help-section {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f3f4f6;
}

body.theme-dark .help-section {
    border-color: #374151;
}

.help-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.help-section h4 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #4f46e5;
}

body.theme-dark .help-section h4 {
    color: #818cf8;
}

.help-section p {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
}

body.theme-dark .help-section p {
    color: #9ca3af;
}

.help-modal-footer {
    padding: 16px 20px;
    border-top: 1px solid #e5e7eb;
}

body.theme-dark .help-modal-footer {
    border-color: #374151;
}

.help-tutorial-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.help-tutorial-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(79,70,229,0.4);
}

/* ==================== AUTO-SELECT FAB ==================== */
.auto-select-fab {
    position: fixed;
    /* Mobile: à direita, acima do sniper */
    bottom: 170px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 20px rgba(139,92,246,0.4);
    z-index: 55;
    transition: all 0.3s ease;
}

.auto-select-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 30px rgba(139,92,246,0.5);
}

/* Desktop: à esquerda, alinhado com sniper */
@media (min-width: 768px) {
    .auto-select-fab {
        bottom: 170px;
        left: 24px;
        right: auto;
    }
}

/* ==================== PDF MORE MENU (mesmo layout do clipboard) ==================== */
.pdf-more-menu {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}

.pdf-more-content {
    background: white;
    border-radius: 24px 24px 0 0;
    width: 100%;
    max-width: 420px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 20px;
}

body.theme-dark .pdf-more-content {
    background: #1f2937;
    color: white;
}

.pdf-more-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

body.theme-dark .pdf-more-header {
    border-color: #374151;
}

.pdf-more-close {
    background: #f3f4f6;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
}

body.theme-dark .pdf-more-close {
    background: #374151;
    color: white;
}

.pdf-more-section {
    margin-bottom: 16px;
}

.pdf-more-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    margin-bottom: 8px;
}

body.theme-dark .pdf-more-label {
    color: #9ca3af;
}

.pdf-more-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pdf-more-btn {
    flex: 1;
    min-width: 60px;
    padding: 12px 16px;
    background: #f3f4f6;
    color: #1f2937;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

body.theme-dark .pdf-more-btn {
    background: #374151;
    color: white;
}

body.theme-sepia .pdf-more-btn {
    background: #fef3c7;
    color: #78350f;
}

.pdf-more-btn:hover {
    background: #e5e7eb;
}

body.theme-dark .pdf-more-btn:hover {
    background: #4b5563;
}

body.theme-sepia .pdf-more-btn:hover {
    background: #fde68a;
}

.pdf-more-btn.active {
    background: #3b82f6;
    color: white;
}

.pdf-more-value {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    padding: 12px;
    font-weight: 700;
    font-size: 16px;
    color: #1f2937;
}

body.theme-dark .pdf-more-value {
    color: white;
}

body.theme-sepia .pdf-more-value {
    color: #78350f;
}

/* Esconder neuro-dock no modo clipboard (usa zen-bar em vez) */
body.mode-clipboard .neuro-dock {
    display: none !important;
}

/* Esconder FABs no modo clipboard */
body.mode-clipboard .sniper-fab,
body.mode-clipboard .auto-select-fab {
    display: none !important;
}

/* FABs só aparecem quando reader-active (PDF aberto) */
.sniper-fab,
.auto-select-fab {
    display: none;
}

body.reader-active .sniper-fab,
body.reader-active .auto-select-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(0,0,0,0.05);
}

.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.05);
}

body.theme-sepia .clipboard-paragraph {
    border-color: rgba(120,53,15,0.1);
}

/* ==================== MOBILE FAB ALIGNMENT ==================== */
@media (max-width: 767px) {
    .sniper-fab {
        bottom: 100px;
        right: 16px;
        left: auto;
        width: 52px;
        height: 52px;
    }
    
    .auto-select-fab {
        bottom: 165px;
        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;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 380px;
    background: white;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    pointer-events: auto;
    animation: tutorial-card-appear 0.4s ease;
}

@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;
    color: #9ca3af;
    font-weight: 600;
}

.tutorial-card-header-v3 button {
    background: #f3f4f6;
    border: none;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
}

.tutorial-card-header-v3 button:hover {
    background: #e5e7eb;
    color: #374151;
}

.tutorial-card-v3 h3 {
    font-size: 20px;
    font-weight: 800;
    color: #1f2937;
    margin-bottom: 10px;
}

.tutorial-card-v3 p {
    font-size: 15px;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 16px;
}

.tutorial-next-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.tutorial-next-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4);
}

.tutorial-next-btn:active {
    transform: translateY(0);
}

/* Setas indicando direção */
.tutorial-card-v3::after {
    content: '👇';
    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); }
}

/* Seta para canto inferior direito (FABs) */
.tutorial-card-v3.arrow-right-bottom::after {
    bottom: -60px;
    right: 20px;
    content: '👉';
    animation: arrow-bounce-right 1s ease-in-out infinite;
}

@keyframes arrow-bounce-right {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(12px); }
}

/* Seta para centro inferior (Dock) */
.tutorial-card-v3.arrow-bottom-center::after {
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    content: '👇';
}

/* Seta para canto inferior direito (Config) */
.tutorial-card-v3.arrow-bottom-right::after {
    bottom: -60px;
    right: 40px;
    content: '👇';
}

/* Elemento alvo destacado */
.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(249, 115, 22, 0.6));
    }
    50% { 
        filter: drop-shadow(0 0 25px rgba(249, 115, 22, 0.9));
    }
}

/* Mobile */
@media (max-width: 767px) {
    .tutorial-card-v3 {
        top: 10px;
        width: calc(100% - 24px);
        padding: 16px;
    }
    
    .tutorial-card-v3 h3 {
        font-size: 18px;
    }
    
    .tutorial-card-v3 p {
        font-size: 14px;
    }
    
    .tutorial-card-v3::after {
        font-size: 32px;
        bottom: -50px;
    }
}

/* ==================== TUTORIAL: ELEMENTOS DESTACADOS ==================== */
/* Garantir que FABs fiquem acima do overlay do tutorial */
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 INTERATIVO 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: white;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 0 4px rgba(249, 115, 22, 0.3);
    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;
    color: #f97316;
    background: #fff7ed;
    padding: 4px 10px;
    border-radius: 20px;
}

.tutorial-skip-btn {
    background: #f3f4f6;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 14px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
}

.tutorial-skip-btn:hover {
    background: #fee2e2;
    color: #dc2626;
}

.tutorial-card-title {
    font-size: 18px;
    font-weight: 800;
    color: #1f2937;
    margin-bottom: 8px;
}

.tutorial-card-text {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 16px;
}

.tutorial-next-btn-v4 {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.tutorial-next-btn-v4:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4);
}

.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 mais visível */
.tutorial-target {
    position: relative !important;
    z-index: 10000 !important;
    box-shadow: 0 0 0 4px #f97316, 0 0 30px rgba(249, 115, 22, 0.6) !important;
    animation: tutorial-target-pulse 1.5s ease-in-out infinite !important;
}

@keyframes tutorial-target-pulse {
    0%, 100% { box-shadow: 0 0 0 4px #f97316, 0 0 30px rgba(249, 115, 22, 0.6); }
    50% { box-shadow: 0 0 0 8px #f97316, 0 0 50px rgba(249, 115, 22, 0.8); }
}

/* Mobile ajustes */
@media (max-width: 640px) {
    .tutorial-card-v4 {
        left: 10px !important;
        right: 10px !important;
        max-width: none;
        width: auto;
    }
}

/* ==================== TUTORIAL SYSTEM V4.2 (HOTSPOTS + SPOTLIGHT) ==================== */

/* O fundo escuro com suporte a spotlight via mask */
/* v4.4: Overlay TRANSPARENTE E NÃO BLOQUEANTE - spotlight faz o escurecimento */
#tutorial-overlay-v3 {
    position: fixed;
    inset: 0;
    background: transparent !important; /* TRANSPARENTE - não bloqueia visão */
    z-index: 999996 !important;
    opacity: 0;
    pointer-events: none !important; /* CRÍTICO: NÃO bloqueia cliques no PDF */
    transition: opacity 0.3s ease;
}

#tutorial-overlay-v3.active {
    opacity: 1;
    pointer-events: none !important; /* Mesmo ativo, não bloqueia */
}

/* Quando spotlight está ativo, usa mask para criar "buraco" */
#tutorial-overlay-v3.has-spotlight {
    /* O mask é setado inline via JS */
}

/* ==================== HOTSPOTS CLICÁVEIS (TOUCH-FRIENDLY) v4.3 ==================== */

/* Hotspot principal - DEVE ser clicável no mobile */
.tutorial-hotspot {
    position: fixed;
    width: 60px;
    height: 60px;
    min-width: 44px; /* Mínimo para tocabilidade WCAG */
    min-height: 44px;
    border-radius: 50%;
    z-index: 1000002 !important; /* ACIMA do overlay e card */
    pointer-events: auto !important; /* CRÍTICO: deve receber cliques */
    touch-action: manipulation; /* Otimiza para touch */
    -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, #3b82f6, #6366f1);
    border: 4px solid white;
    box-shadow: 
        0 0 0 6px rgba(59,130,246,0.4),
        0 0 30px rgba(59,130,246,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); /* Força GPU */
    will-change: transform;
}

/* Área de toque expandida (hit area maior) */
.tutorial-hotspot::before {
    content: '';
    position: absolute;
    inset: -20px; /* Expande área clicável em 20px */
    border-radius: 50%;
    /* Invisível mas clicável */
}

/* Ripple animado ao redor */
.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;
}

/* Estado pressionado */
.tutorial-hotspot:active {
    transform: scale(0.9) !important;
    animation: none !important;
    box-shadow: 
        0 0 0 4px rgba(59,130,246,0.6),
        0 0 20px rgba(59,130,246,0.8),
        0 8px 25px rgba(0,0,0,0.3);
}

/* Animação de shake quando toca fora */
.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); }
}

/* Label do hotspot */
.tutorial-hotspot-label {
    position: fixed;
    z-index: 1000002 !important;
    pointer-events: none;
    font-size: 13px;
    font-weight: 800;
    color: white;
    background: linear-gradient(135deg, #1e293b, #334155);
    border: 2px solid rgba(255,255,255,0.2);
    padding: 8px 14px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    white-space: nowrap;
}

/* Seta apontando para o hotspot */
.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 #334155;
}

@keyframes hotspotBreathe {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 
            0 0 0 6px rgba(59,130,246,0.4),
            0 0 30px rgba(59,130,246,0.6),
            0 15px 40px rgba(0,0,0,0.4);
    }
    50% { 
        transform: scale(1.05);
        box-shadow: 
            0 0 0 10px rgba(59,130,246,0.3),
            0 0 50px rgba(59,130,246,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 (alternativa ao mask) ==================== */

/* Ring de destaque ao redor do alvo - ESCURECIMENTO REDUZIDO */
.tutorial-spotlight-ring {
    position: fixed;
    z-index: 999998; /* Logo abaixo do overlay */
    border-radius: 12px;
    pointer-events: none;
    box-shadow: 
        0 0 0 4px rgba(59, 130, 246, 0.9),
        0 0 0 9999px rgba(15, 23, 42, 0.45); /* REDUZIDO: 0.45 para ver o PDF */
    transition: all 0.3s ease;
}

/* Variante circular para hotspots */
.tutorial-spotlight-ring.circular {
    border-radius: 50%;
}

/* Animação de pulse no spotlight */
.tutorial-spotlight-ring.pulsing {
    animation: spotlightPulse 2s ease-in-out infinite;
}

@keyframes spotlightPulse {
    0%, 100% { 
        box-shadow: 
            0 0 0 4px rgba(59, 130, 246, 0.9),
            0 0 0 9999px rgba(15, 23, 42, 0.45);
    }
    50% { 
        box-shadow: 
            0 0 0 8px rgba(59, 130, 246, 0.7),
            0 0 0 9999px rgba(15, 23, 42, 0.45);
    }
}

/* ==================== ESTILOS ANTIGOS (MANTIDOS POR COMPATIBILIDADE) ==================== */

/* Marcadores antigos - agora substituídos por hotspots */
.tutorial-tap-marker {
    display: none !important; /* Desativado - usar .tutorial-hotspot */
}
.tutorial-tap-label {
    display: none !important; /* Desativado - usar .tutorial-hotspot-label */
}

/* O Elemento Alvo (Destaque) - 1 MILHÃO */
.tutorial-target-fix {
    position: relative !important;
    z-index: 1000000 !important;
    /* REMOVIDO: background-color: white - causava botões brancos */
    box-shadow: 
        0 0 0 4px #6366f1, 
        0 0 30px rgba(99, 102, 241, 0.6) !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 #6366f1, 0 0 30px rgba(99, 102, 241, 0.6); }
    50% { box-shadow: 0 0 0 8px #6366f1, 0 0 50px rgba(99, 102, 241, 0.8); }
}

/* REMOVIDO: body.theme-dark .tutorial-target-fix background-color */

/* Fix para botão redondo (Play) */
button.tutorial-target-fix {
    border-radius: 9999px !important;
}

/* Fix ESPECÍFICO para FABs (Sniper e Auto-Select) */
.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;
}

/* Fix CRÍTICO: Elevar o pai (Dock) inteiro - quebra stacking context */
.tutorial-parent-lift {
    z-index: 1000000 !important; 
    position: fixed !important;
}

/* Card de Texto - ACIMA DE TUDO */
#tutorial-card-v3 {
    position: fixed;
    z-index: 1000001 !important;
    background: white;
    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.3);
    border: 1px solid rgba(226, 232, 240, 0.8);
}

/* MOBILE: Bottom-sheet style */
@media (max-width: 640px) {
    #tutorial-card-v3 {
        bottom: 88px !important; /* Acima do dock */
        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: #1e293b;
    border: 1px solid #334155;
    color: white;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

#tutorial-card-v3.active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* ==================== BOTÃO FECHAR (X) ==================== */
#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: #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(0, 0, 0, 0.08);
    color: #64748b;
}

#tut-v3-close:active {
    transform: scale(0.9);
}

body.theme-dark #tut-v3-close {
    color: #64748b;
}

body.theme-dark #tut-v3-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}

#tutorial-card-v3 .tut-icon {
    margin-bottom: 16px;
    padding: 12px;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#tutorial-card-v3 .tut-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
    padding-right: 24px; /* Espaço para o botão X */
}

body.theme-dark #tutorial-card-v3 .tut-title {
    color: #f1f5f9;
}

#tutorial-card-v3 .tut-text {
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 24px;
}

body.theme-dark #tutorial-card-v3 .tut-text {
    color: #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 #e2e8f0;
    border-radius: 12px;
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 44px;
}

#tutorial-card-v3 .tut-skip:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

body.theme-dark #tutorial-card-v3 .tut-skip {
    border-color: #475569;
    color: #94a3b8;
}

body.theme-dark #tutorial-card-v3 .tut-skip:hover {
    background: rgba(255, 255, 255, 0.05);
}

#tutorial-card-v3 .tut-next {
    flex: 2;
    padding: 12px 20px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
    transition: all 0.2s;
    min-height: 44px;
}

#tutorial-card-v3 .tut-next:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

#tutorial-card-v3 .tut-next:active {
    transform: translateY(0);
}

/* ==================== MOBILE RESPONSIVO ==================== */
@media (max-width: 640px) {
    #tutorial-card-v3 {
        /* Bottom-sheet style no mobile */
        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;
    }
    
    /* Hotspot maior no mobile */
    .tutorial-hotspot {
        width: 70px;
        height: 70px;
        font-size: 24px;
    }
    
    .tutorial-hotspot-label {
        font-size: 15px;
        padding: 12px 18px;
    }
}

/* Manter compatibilidade com classes antigas */
.tutorial-highlight {
    position: relative !important;
    z-index: 1000000 !important;
    box-shadow: 0 0 0 4px #6366f1, 0 0 100px rgba(0,0,0,0.8) !important;
}

/* ==================== V59 FIXES ==================== */

/* Animação da seta indicadora do tutorial */
@keyframes arrowBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(10px); }
}

/* Fix: Sniper FAB no mobile - não sobreposto pelo tutorial */
@media (max-width: 640px) {
    .sniper-fab {
        bottom: 90px;
        right: 16px;
        width: 52px;
        height: 52px;
        z-index: 56;
    }
    
    /* Tutorial card deve ficar acima quando targeting FAB */
    #tutorial-card-v3.tutorial-fab-target {
        top: 60px !important;
        bottom: auto !important;
    }
}

/* Fix: Region edit bar - garantir visibilidade dos botões */
.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;
}

/* Fix: Resize handles com MUITO mais contraste */
.reading-region.editing {
    z-index: 50;
}

.reading-region.editing .resize-handle {
    z-index: 201;
    background: linear-gradient(135deg, #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;
}

/* Fix: Tutorial ativo - esconder elementos que atrapalham */
body.tutorial-active .help-btn,
body.tutorial-active .teleprompter-show-btn,
body.tutorial-active #region-counter {
    display: none !important;
}

/* Fix: Mobile - reorganizar elementos flutuantes para não sobrepor */
@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;
    }
}

/* Fix: Menu de configurações com opções de coluna */
.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: #f3f4f6;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.column-mode-btn:hover {
    background: #e5e7eb;
    border-color: #6366f1;
}

.column-mode-btn.active {
    background: #eef2ff;
    border-color: #6366f1;
}

.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;
}

body.theme-dark .column-mode-btn {
    background: #374151;
    color: white;
}

body.theme-dark .column-mode-btn:hover {
    background: #4b5563;
}

body.theme-dark .column-mode-btn.active {
    background: #4338ca;
}

/* Fix: Settings panel scroll interno */
.mobile-select-popup-content {
    padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
}

/* Fix: Garantir que botões do dock não sejam cortados */
@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;
    }
}

/* Fix: Tutorial card mais compacto no mobile */
@media (max-width: 640px) {
    #tutorial-card-v3 {
        /* Garantir que não fique muito baixo */
        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;
    }
}

/* Fix: Spotlight com mensagem clara - CLIQUE AQUI */
.tutorial-spotlight-v43 + .tutorial-hotspot {
    /* Garantir visibilidade do hotspot */
}

/* Fix: Durante tutorial, esconder FABs que não são o target */
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;
}