@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@700;800;900&display=swap');
/* ===== Paleta Academia Digital ===== */
:root { --navy:#0b2454; --primary:#1565c0; --primary-d:#0e3f7a; --orange:#f07a00; --orange-d:#d96a00; --ok:#10b981; --bad:#ef4444; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { font-family:'Inter',system-ui,sans-serif; margin:0; background:#f5f7fb; color:#0f172a; -webkit-font-smoothing:antialiased; }
.dark body { background:#071733; color:#e2e8f0; }
.font-brand { font-family:'Montserrat','Inter',sans-serif; letter-spacing:.01em; }
button { user-select:none; }
:focus-visible { outline:3px solid #ff9a3c; outline-offset:2px; border-radius:8px; }
.custom-scrollbar::-webkit-scrollbar { width:6px; height:6px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:10px; }
.dark .custom-scrollbar::-webkit-scrollbar-thumb { background:#1e3a6b; }
.no-scrollbar::-webkit-scrollbar { display:none; } .no-scrollbar { scrollbar-width:none; }
.fade-in { animation:fadeIn .35s cubic-bezier(.4,0,.2,1) both; }
@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
.shake { animation:shake .35s; } @keyframes shake { 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.pop { animation:pop .3s; } @keyframes pop { 50%{transform:scale(1.06)} }

/* Logo: fundo branco no modo escuro para manter as cores originais */
.logo-wrap { display:inline-flex; align-items:center; justify-content:center; }
.dark .logo-wrap { background:#fff; border-radius:16px; padding:6px 10px; }
.brand-gradient { background:linear-gradient(135deg,#0b2454 0%,#1565c0 60%,#2577d4 100%); }
.brand-orange { background:linear-gradient(135deg,#f07a00,#ff9a3c); }
.pixels { position:relative; }
.pixels::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:.18;
  background-image:radial-gradient(#fff 1.5px, transparent 1.5px); background-size:18px 18px; }

.card { background:#fff; border:1px solid #e3e8f1; border-radius:18px; }
.dark .card { background:#0d1f45; border-color:#1a3466; }

/* ---------- CURSO ---------- */
.level-tab { padding:10px 16px; border-radius:14px; font-weight:700; font-size:14px; white-space:nowrap; border:1px solid #e3e8f1; background:#fff; color:#475569; transition:.2s; display:flex; align-items:center; gap:8px; }
.dark .level-tab { background:#0d1f45; border-color:#1a3466; color:#94a3b8; }
.level-tab:hover { border-color:#86b8ec; }
.level-tab.active { background:var(--navy); color:#fff; border-color:var(--navy); }
.dark .level-tab.active { background:var(--orange); border-color:var(--orange); color:#fff; }
.cefr { font-size:11px; font-weight:800; padding:2px 7px; border-radius:6px; background:rgba(240,122,0,.14); color:#d96a00; }
.level-tab.active .cefr { background:var(--orange); color:#fff; }
.dark .level-tab.active .cefr { background:rgba(255,255,255,.25); }

.module-banner { position:relative; overflow:hidden; border-radius:24px; color:#fff; padding:28px; }
.module-banner::after { content:''; position:absolute; right:-60px; top:-60px; width:240px; height:240px; border-radius:50%; background:rgba(255,255,255,.08); }
.module-banner::before { content:''; position:absolute; right:60px; bottom:-90px; width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,.06); }

.lesson-card { position:relative; display:flex; flex-direction:column; text-align:left; width:100%; background:#fff; border:1px solid #e3e8f1; border-radius:20px; padding:18px; transition:transform .2s, box-shadow .2s, border-color .2s; overflow:hidden; }
.dark .lesson-card { background:#0d1f45; border-color:#1a3466; }
.lesson-card:not(.locked):hover { transform:translateY(-3px); box-shadow:0 14px 30px -12px rgba(11,36,84,.25); border-color:#86b8ec; }
.lesson-card.locked { opacity:.55; cursor:not-allowed; }
.lesson-card.next { border:2px solid var(--orange); box-shadow:0 0 0 4px rgba(240,122,0,.12); }
.lesson-card .accent { position:absolute; left:0; top:0; bottom:0; width:5px; }
.lesson-icon { width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; }
.lesson-num { font-size:12px; font-weight:800; letter-spacing:.06em; color:#94a3b8; }
.chip { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:4px 8px; border-radius:999px; background:#f1f5f9; color:#475569; }
.dark .chip { background:#132a57; color:#94a3b8; }
.ring { --p:0; width:64px; height:64px; border-radius:50%; background:conic-gradient(#fff calc(var(--p)*1%), rgba(255,255,255,.25) 0); display:flex; align-items:center; justify-content:center; }
.ring > span { width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; }

.interact-card { background:#fff; border:2px solid #e3e8f1; border-radius:14px; transition:all .2s; cursor:pointer; }
.dark .interact-card { background:#0d1f45; border-color:#1a3466; }
.interact-card:hover { border-color:#4f95e0; } .interact-card:active { transform:scale(.98); }
.card-selected { border-color:var(--primary)!important; background:#eef5fd!important; color:#0b2454!important; }
.dark .card-selected { background:rgba(37,119,212,.2)!important; color:#d8e8fa!important; }
.card-correct { border-color:var(--ok)!important; background:#ecfdf5!important; color:#065f46!important; }
.card-wrong { border-color:var(--bad)!important; background:#fef2f2!important; color:#991b1b!important; }
.dark .card-correct { background:rgba(16,185,129,.15)!important; color:#6ee7b7!important; }
.dark .card-wrong { background:rgba(239,68,68,.15)!important; color:#fca5a5!important; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700; border-radius:12px; padding:12px 18px; transition:all .2s; border:0; cursor:pointer; }
.btn:disabled { opacity:.45; cursor:not-allowed; } .btn:active:not(:disabled) { transform:scale(.98); }
.btn-primary { background:var(--primary); color:#fff; } .btn-primary:hover:not(:disabled) { background:var(--navy); }
.btn-orange { background:var(--orange); color:#fff; } .btn-orange:hover:not(:disabled) { background:var(--orange-d); }
.btn-success { background:var(--ok); color:#fff; } .btn-success:hover { background:#059669; }
.btn-danger { background:var(--bad); color:#fff; } .btn-danger:hover { background:#dc2626; }
.btn-secondary { background:#fff; border:1px solid #e3e8f1; color:#334155; } .btn-secondary:hover { background:#f1f5f9; }
.dark .btn-secondary { background:#0d1f45; border-color:#1a3466; color:#cbd5e1; }
.input { width:100%; padding:12px 14px; border-radius:12px; border:1px solid #cbd5e1; background:#fff; color:inherit; font-size:15px; }
.dark .input { background:#071733; border-color:#1a3466; }
.input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(21,101,192,.18); }

.nav-item { display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:12px; font-weight:600; color:#b6c6e3; cursor:pointer; transition:.2s; width:100%; text-align:left; background:none; border:0; }
.nav-item:hover { background:rgba(255,255,255,.08); color:#fff; }
.nav-item.active { background:var(--orange); color:#fff; box-shadow:0 6px 16px -6px rgba(240,122,0,.6); }

.word-chip { padding:10px 14px; border-radius:12px; border:2px solid #e3e8f1; border-bottom-width:4px; background:#fff; font-weight:600; cursor:pointer; transition:.15s; }
.dark .word-chip { background:#0d1f45; border-color:#1a3466; }
.word-chip:active { transform:translateY(2px); border-bottom-width:2px; }
.word-chip.used { opacity:.25; pointer-events:none; }
.progress-bar { height:12px; background:#e3e8f1; border-radius:99px; overflow:hidden; } .dark .progress-bar { background:#1a3466; }
.progress-bar > div { height:100%; background:linear-gradient(90deg,#1565c0,#f07a00); border-radius:99px; transition:width .4s; }
.flip { perspective:1000px; cursor:pointer; }
.flip-inner { position:relative; transition:transform .5s; transform-style:preserve-3d; min-height:200px; }
.flip.flipped .flip-inner { transform:rotateY(180deg); }
.flip-face { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:20px; padding:20px; }
.flip-back { transform:rotateY(180deg); background:linear-gradient(135deg,#0b2454,#1565c0); color:#fff; }
.toast { position:fixed; left:50%; bottom:90px; transform:translateX(-50%); background:#0b2454; color:#fff; padding:12px 20px; border-radius:12px; font-weight:600; z-index:100; box-shadow:0 10px 30px rgba(0,0,0,.25); max-width:90vw; border-left:4px solid #f07a00; }
@media (prefers-reduced-motion: reduce) { *{animation:none!important;transition:none!important} }
/* ===== Reforços visuais Academia Digital (v11) ===== */
/* Pré-carregador */
#academia-preloader { backdrop-filter: blur(8px); }
#academia-preloader img { filter: drop-shadow(0 0 14px rgba(240,122,0,0.35)); }
/* Fundo IA: fica atrás de tudo, sem interceptar cliques */
#ai-bg { z-index: -1 !important; }
/* Cards com leve efeito vidro */
.card { backdrop-filter: blur(12px); background: rgba(255,255,255,0.88); border: 1px solid rgba(227,232,241,0.92); }
.dark .card { background: rgba(13,31,69,0.8); border-color: rgba(26,52,102,0.75); }
/* Botões mais refinados */
.btn { box-shadow: 0 4px 14px -6px rgba(0,0,0,0.10); }
.btn-primary { box-shadow: 0 4px 16px -6px rgba(21,101,192,0.45); }
.btn-orange { box-shadow: 0 4px 16px -6px rgba(240,122,0,0.5); }
/* Aulas mais modernas */
.lesson-card { border: 1px solid rgba(227,232,241,0.92); }
.dark .lesson-card { border-color: rgba(26,52,102,0.75); }
.lesson-card:not(.locked):hover { box-shadow: 0 22px 44px -16px rgba(11,36,84,0.32); }
/* Brilho sutil nos destaques laranja */
.brand-orange { box-shadow: 0 0 26px rgba(240,122,0,0.3); }
/* Scrollbar mais elegante */
::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#1565c0,#f07a00); border-radius: 10px; }
.dark ::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#3b82f6,#f07a00); }
/* Texto gradiente da marca */
.text-gradient-brand {
  background: linear-gradient(135deg,#0b2454 0%,#1565c0 55%,#f07a00 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ===== Contraste e legibilidade sobre fundo animado (v12) ===== */
body { text-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.dark body { text-shadow: 0 1px 2px rgba(0,0,0,0.45); }
.card { background: rgba(255,255,255,0.94) !important; border: 1px solid rgba(227,232,241,0.95); }
.dark .card { background: rgba(13,31,69,0.94) !important; border-color: rgba(26,52,102,0.85); }
.module-banner { background: rgba(11,36,84,0.88) !important; }
.dark .module-banner { background: rgba(7,23,51,0.88) !important; }
h1, h2, h3 { text-shadow: 0 2px 4px rgba(0,0,0,0.30); }
.dark h1, .dark h2, .dark h3 { text-shadow: 0 2px 4px rgba(0,0,0,0.60); }
.nav-item { color: #e2e8f0 !important; }
.dark .nav-item { color: #e2e8f0 !important; }
.word-chip { color: #0f172a !important; }
.dark .word-chip { color: #e2e8f0 !important; }

/* ===== CONTRASTE FORÇADO - texto não some no fundo (v13) ===== */
body { text-shadow: 0 2px 4px rgba(0,0,0,0.55); }
.dark body { text-shadow: 0 2px 4px rgba(0,0,0,0.85); }

/* Títulos bem escuros com sombra forte */
h1, h2, h3, h4, h5, h6 { text-shadow: 0 3px 6px rgba(0,0,0,0.70) !important; }
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 { text-shadow: 0 3px 6px rgba(0,0,0,0.90) !important; }

/* Qualquer texto comum ganha sombra de leitura */
p, span, div, label, li, td, th, button, a, input, select, textarea {
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
.dark p, .dark span, .dark div, .dark label, .dark li, .dark td, .dark th, .dark button, .dark a, .dark input, .dark select, .dark textarea {
  text-shadow: 0 1px 2px rgba(0,0,0,0.75);
}

/* Cards: fundo sólido para não deixar ver as bolhas por dentro */
.card { background: rgba(255,255,255,0.97) !important; border: 1px solid rgba(227,232,241,0.98); }
.dark .card { background: rgba(13,31,69,0.96) !important; border-color: rgba(26,52,102,0.90); }

/* Módulos e banners */
.module-banner { background: rgba(11,36,84,0.94) !important; }
.dark .module-banner { background: rgba(7,23,51,0.94) !important; }

/* Nav items: cor de texto sólida */
.nav-item { color: #f8fafc !important; text-shadow: 0 1px 2px rgba(0,0,0,0.60); }
.dark .nav-item { color: #f8fafc !important; }

/* Word chips e texto em cards */
.word-chip { color: #0f172a !important; font-weight: 700; }
.dark .word-chip { color: #e2e8f0 !important; }

/* Texto dentro de cards e banners em modo escuro */
.dark .card, .dark .lesson-card, .dark .module-banner {
  color: #e2e8f0 !important;
}

/* Garante que qualquer texto dentro de elementos escuros seja legível */
.dark .text-slate-500, .dark .text-slate-400, .dark .text-gray-500 { color: #cbd5e1 !important; }
.dark .text-slate-600, .dark .text-gray-600 { color: #94a3b8 !important; }

/* Links e botões: sombra forte */
.btn { text-shadow: 0 1px 2px rgba(0,0,0,0.40); }