/* ============================================================
   EVN — estilo compartilhado (Fase 4)
   Mesma identidade visual do protótipo: fundo verde-escuro,
   serif Georgia nos títulos/perguntas, acento verde.
   ============================================================ */

:root{
  --verde:#2EE89A; --verde-fundo:#0d1f19; --verde-esc:#0E7A52;
  --bg:#0a0f0d; --card:#111a16; --card2:#16211c;
  --linha:#20302a; --txt:#e8f2ee; --txt2:#9ab4a8; --txt3:#7a9186;
  --amarelo:#ffd166; --erro:#ff6b6b; --acerto:#2EE89A;
  --serif:'Georgia',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)!important;color-scheme:dark}
body{background:var(--bg)!important;color:var(--txt)!important;font-family:var(--sans);
  line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100dvh}
::selection{background:var(--verde);color:#04120b}
a{color:var(--verde)}
:focus-visible{outline:2px solid var(--verde);outline-offset:2px}

/* ---- layout genérico ---- */
.tela{min-height:100dvh;display:flex;flex-direction:column}
.centro{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}

/* ---- header ---- */
header{position:sticky;top:0;z-index:40;background:rgba(10,15,13,.86);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--linha)}
.header-inner{max-width:720px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:12px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-mark{width:30px;height:30px;border-radius:8px;background:var(--verde);
  display:grid;place-items:center;font-family:var(--serif);font-weight:700;color:#04120b;flex-shrink:0}
.logo-txt{font-family:var(--serif);font-size:15px;color:var(--txt);line-height:1.1}
.logo-txt span{color:var(--txt3);font-size:11px;display:block;margin-top:1px}
.header-acoes{margin-left:auto;display:flex;gap:10px;align-items:center}

/* ---- cartão / formulário (login, troca de senha) ---- */
.cartao{background:var(--card);border:1px solid var(--linha);border-radius:16px;
  padding:36px 30px;width:100%;max-width:380px}
.cartao-eyebrow{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--verde);
  font-weight:700;margin-bottom:10px}
.cartao h1{font-family:var(--serif);font-size:26px;font-weight:400;margin-bottom:8px;line-height:1.2}
.cartao p.sub{color:var(--txt2);font-size:14px;margin-bottom:26px}

.campo{margin-bottom:16px}
.campo label{display:block;font-size:12px;color:var(--txt2);margin-bottom:6px;text-transform:uppercase;
  letter-spacing:.5px}
.campo input{width:100%;background:var(--card2);border:1px solid var(--linha);border-radius:10px;
  padding:13px 14px;color:var(--txt);font-size:15px;font-family:var(--sans)}
.campo input:focus{border-color:var(--verde-esc)}
.campo input::placeholder{color:var(--txt3)}

.botao{display:block;width:100%;padding:14px;border-radius:10px;font-size:15px;font-weight:700;
  cursor:pointer;border:none;font-family:var(--sans);text-align:center;text-decoration:none}
.botao-primario{background:var(--verde);color:#04120b}
.botao-primario:hover{box-shadow:0 8px 24px rgba(46,232,154,.25)}
.botao-primario:disabled{opacity:.55;cursor:default;box-shadow:none}
.botao-fantasma{background:transparent;color:var(--txt2);border:1px solid var(--linha)}
.botao-fantasma:hover{border-color:var(--verde-esc);color:var(--txt)}

.aviso{border-radius:10px;padding:12px 14px;font-size:13.5px;margin-bottom:18px;display:none}
.aviso.mostrar{display:block}
.aviso-erro{background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.3);color:#ffb3b3}
.aviso-ok{background:rgba(46,232,154,.1);border:1px solid var(--verde-esc);color:var(--verde)}

/* ---- app (tela de estudo) ---- */
.app{max-width:720px;margin:0 auto;padding:20px 20px 100px;width:100%}

.resumo-topo{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:12px;flex-wrap:wrap}
.resumo-topo h1{font-family:var(--serif);font-size:22px;font-weight:400}
.resumo-chips{display:flex;gap:8px;font-size:12px;color:var(--txt3)}
.chip{background:var(--card2);border:1px solid var(--linha);border-radius:20px;padding:5px 12px}
.chip b{color:var(--txt)}

.progress-wrap{margin-bottom:26px}
.progress-bar{height:6px;background:var(--card2);border-radius:10px;overflow:hidden}
.progress-fill{height:100%;background:var(--verde);border-radius:10px;transition:.3s;width:0}
.progress-txt{font-size:12px;color:var(--txt3);margin-top:6px}

/* ---- flashcard (flip 3D) ---- */
.fc-stage{perspective:1600px;margin:0 auto;max-width:640px}
.fc{position:relative;width:100%;min-height:340px;transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);cursor:pointer}
.fc.flip{transform:rotateY(180deg)}
.fc-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:18px;
  padding:32px 28px;display:flex;flex-direction:column;border:1px solid var(--linha);
  overflow-y:auto}
.fc-front{background:linear-gradient(160deg,var(--card2),var(--card))}
.fc-back{background:linear-gradient(160deg,#0f2119,#0c1a14);transform:rotateY(180deg);border-color:var(--verde-esc)}
.fc-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:700;margin-bottom:auto}
.fc-front .fc-label{color:var(--txt3)}
.fc-back .fc-label{color:var(--verde)}
.fc-q{font-family:var(--serif);font-size:22px;line-height:1.35;margin:18px 0 auto;font-weight:400}
.fc-a{font-size:16.5px;line-height:1.55;margin:18px 0 auto;color:var(--txt)}
.fc-ref{font-size:12px;color:var(--txt3);margin-top:18px;padding-top:14px;border-top:1px solid var(--linha)}
.fc-hint{text-align:center;font-size:13px;color:var(--txt3);margin-top:16px}

.tipo-badge{font-size:11px;font-weight:700;letter-spacing:.5px;padding:5px 11px;border-radius:8px;
  border:1px solid var(--linha);align-self:flex-start}
.tipo-basico{background:var(--card2);color:var(--txt2)}
.tipo-cloze{background:rgba(255,209,102,.12);color:var(--amarelo);border-color:#5a4a1e}
.tipo-lista{background:rgba(46,232,154,.1);color:var(--verde);border-color:var(--verde-esc)}

.cloze-txt{font-family:var(--serif);font-size:20px;line-height:1.6;margin:18px 0 auto}
.blank{display:inline-block;min-width:52px;text-align:center;padding:1px 12px;margin:0 2px;
  border-radius:6px;background:rgba(255,209,102,.16);color:var(--amarelo);
  border-bottom:2px solid var(--amarelo);font-weight:700}

.fc-list{list-style:none;margin:16px 0 auto;display:flex;flex-direction:column;gap:8px}
.fc-list li{font-family:var(--sans);font-size:16px;padding:10px 14px;border-radius:10px;
  background:var(--card2);border:1px solid var(--linha)}
.fc-list li.oculto{color:var(--txt3);font-style:italic}
.fc-list li.revelado{border-color:var(--verde-esc);color:var(--txt)}

/* ---- ações de resposta ---- */
.reveal-btn{display:block;margin:22px auto 0;padding:14px 40px;border-radius:12px;
  background:var(--verde);color:#04120b;font-weight:700;font-size:15px;border:none;cursor:pointer;
  font-family:var(--sans)}
.reveal-btn:hover{box-shadow:0 8px 24px rgba(46,232,154,.2)}

.fc-actions{display:flex;gap:10px;margin-top:22px;max-width:640px;margin-left:auto;margin-right:auto}
.fc-btn{flex:1;padding:14px 6px;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;
  background:var(--card2);border:1px solid var(--linha);color:var(--txt);font-family:var(--sans);
  display:flex;flex-direction:column;gap:2px;align-items:center}
.fc-btn:hover{transform:translateY(-1px)}
.fc-btn small{font-weight:500;color:var(--txt3);font-size:10.5px}
.fc-btn.errei:hover{border-color:var(--erro);color:var(--erro)}
.fc-btn.dificil:hover{border-color:var(--amarelo);color:var(--amarelo)}
.fc-btn.bom:hover{border-color:var(--acerto);color:var(--acerto)}
.fc-btn.facil:hover{border-color:var(--verde);color:var(--verde);background:var(--verde-fundo)}

/* ---- estado vazio / carregando ---- */
.estado-vazio{text-align:center;padding:60px 20px}
.estado-vazio .icone{font-size:44px;margin-bottom:14px}
.estado-vazio h2{font-family:var(--serif);font-weight:400;font-size:22px;margin-bottom:8px}
.estado-vazio p{color:var(--txt2);font-size:14px;max-width:380px;margin:0 auto}

.girando{width:28px;height:28px;border:3px solid var(--linha);border-top-color:var(--verde);
  border-radius:50%;animation:girar .7s linear infinite;margin:40px auto}
@keyframes girar{to{transform:rotate(360deg)}}

/* ---- responsivo ---- */
@media (max-width:600px){
  .cartao{padding:28px 22px;border-radius:14px}
  .fc-stage{min-height:340px}
  .fc-face{padding:22px 18px}
  .fc-q{font-size:19px}
  .cloze-txt{font-size:18px}
  .fc-actions{position:sticky;bottom:0;background:linear-gradient(180deg,transparent,var(--bg) 25%);
    padding:12px 0 calc(6px + env(safe-area-inset-bottom,0))}
  .fc-btn{min-height:56px;font-size:13px}
  .fc-btn small{font-size:9.5px}
  .app{padding:16px 16px 90px}
}

@media (prefers-reduced-motion: reduce){
  .fc, .girando{transition:none;animation:none}
}