/* ===================================================================
   PSYCH QUEST — folha de estilos
   Layout: hub central (dashboard) + trilha de módulos + quiz em tela
   cheia por pergunta + telas de resultado. Temas por disciplina
   aplicados via [data-subject] sobre tokens de cor globais.
   =================================================================== */

:root{
  /* ---- Paleta neutra (modo claro) ---- */
  --bg: #f4f6f7;
  --surface: #ffffff;
  --surface-2: #eef1f2;
  --border: #dde3e4;
  --text: #10201f;
  --text-muted: #55696a;
  --text-faint: #829697;

  /* ---- Identidade padrão (neutra, fora de um módulo) ---- */
  --accent: #0f766e;
  --accent-2: #14b8a6;
  --accent-tint: #ccfbf1;
  --accent-contrast: #ffffff;

  /* ---- Semânticos ---- */
  --success: #15803d;
  --success-bg: #e7f6ec;
  --danger: #b91c1c;
  --danger-bg: #fdecec;
  --warning: #b45309;
  --warning-bg: #fdf1de;

  --focus-ring: #2563eb;
  --shadow-sm: 0 1px 2px rgba(16,32,31,.06), 0 1px 1px rgba(16,32,31,.04);
  --shadow-md: 0 6px 20px rgba(16,32,31,.08), 0 2px 6px rgba(16,32,31,.05);
  --shadow-lg: 0 18px 44px rgba(16,32,31,.14), 0 6px 14px rgba(16,32,31,.08);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---- Tipografia (mesma família usada em iOS/iPadOS/macOS) ---- */
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Rounded', 'Helvetica Neue', Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  --font-rounded: ui-rounded, -apple-system, BlinkMacSystemFont, 'SF Pro Rounded', 'SF Pro Text', Arial, sans-serif;

  /* ---- Curvas de animação (estilo "spring" usado nas interfaces da Apple) ---- */
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-standard: cubic-bezier(.4,0,.2,1);

  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: #0d1414;
    --surface: #141e1e;
    --surface-2: #1a2626;
    --border: #263434;
    --text: #eaf2f1;
    --text-muted: #a3b6b5;
    --text-faint: #6d8180;

    --accent: #2dd4bf;
    --accent-2: #14b8a6;
    --accent-tint: #10302c;
    --accent-contrast: #04221e;

    --success: #4ade80;
    --success-bg: #0f2a1c;
    --danger: #fb7185;
    --danger-bg: #331419;
    --warning: #fbbf24;
    --warning-bg: #302109;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 6px 20px rgba(0,0,0,.45);
    --shadow-lg: 0 18px 44px rgba(0,0,0,.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg: #0d1414;
  --surface: #141e1e;
  --surface-2: #1a2626;
  --border: #263434;
  --text: #eaf2f1;
  --text-muted: #a3b6b5;
  --text-faint: #6d8180;

  --accent: #2dd4bf;
  --accent-2: #14b8a6;
  --accent-tint: #10302c;
  --accent-contrast: #04221e;

  --success: #4ade80;
  --success-bg: #0f2a1c;
  --danger: #fb7185;
  --danger-bg: #331419;
  --warning: #fbbf24;
  --warning-bg: #302109;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 20px rgba(0,0,0,.45);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.55);
  color-scheme: dark;
}

/* ---- Temas por módulo (claro) ---- */
[data-subject="terapiaSistemica"]{ --accent:#0f766e; --accent-2:#14b8a6; --accent-tint:#ccfbf1; --accent-contrast:#ffffff; }
[data-subject="medidasAvaliativas"]{ --accent:#6d28d9; --accent-2:#8b5cf6; --accent-tint:#ede9fe; --accent-contrast:#ffffff; }
[data-subject="psicopatologia"]{ --accent:#881337; --accent-2:#be123c; --accent-tint:#ffe4e6; --accent-contrast:#ffffff; }

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) [data-subject="terapiaSistemica"]{ --accent:#2dd4bf; --accent-2:#0f766e; --accent-tint:#0f2e2b; --accent-contrast:#03211d; }
  :root:not([data-theme="light"]) [data-subject="medidasAvaliativas"]{ --accent:#a78bfa; --accent-2:#6d28d9; --accent-tint:#241a3d; --accent-contrast:#1c1030; }
  :root:not([data-theme="light"]) [data-subject="psicopatologia"]{ --accent:#fb7185; --accent-2:#881337; --accent-tint:#33121b; --accent-contrast:#2a0e15; }
}
:root[data-theme="dark"] [data-subject="terapiaSistemica"]{ --accent:#2dd4bf; --accent-2:#0f766e; --accent-tint:#0f2e2b; --accent-contrast:#03211d; }
:root[data-theme="dark"] [data-subject="medidasAvaliativas"]{ --accent:#a78bfa; --accent-2:#6d28d9; --accent-tint:#241a3d; --accent-contrast:#1c1030; }
:root[data-theme="dark"] [data-subject="psicopatologia"]{ --accent:#fb7185; --accent-2:#881337; --accent-tint:#33121b; --accent-contrast:#2a0e15; }

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:15.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  transition:background-color .3s var(--ease-out), color .3s var(--ease-out);
}
img{ max-width:100%; }
svg{ width:1em; height:1em; flex:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; text-wrap:balance; margin:0; color:var(--text); }
p{ margin:0; }
button{ font-family:inherit; }
::selection{ background:var(--accent-tint); color:var(--text); }

.visually-hidden{
  position:absolute !important; width:1px;height:1px; padding:0;margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

a{ color:var(--accent); }

/* focus visibility everywhere, keyboard-first */
#main-content:focus{ outline:none; }
#main-content{ animation:screenFade .35s var(--ease-out); }
@keyframes screenFade{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:translateY(0); } }
:focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:2px;
  border-radius:6px;
}

button{ cursor:pointer; }
button:disabled{ cursor:not-allowed; opacity:.55; }

.app-shell{
  min-height:100%;
  padding-bottom:24px;
}

.container{
  width:100%;
  max-width:1080px;
  margin:0 auto;
  padding-inline:20px;
}

[hidden]{ display:none !important; }

/* =========================== TOPBAR =========================== */
.topbar{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:40;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding-block:14px;
}
.brand{ display:flex; align-items:center; gap:10px; min-width:0; flex:1; overflow:hidden; }
.brand-mark{
  width:34px;height:34px;border-radius:10px; flex:none;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);
  font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--accent-contrast);
}
.brand-mark svg{ width:18px;height:18px; }
.brand-mark img{ width:100%; height:100%; object-fit:cover; display:block; }
.brand-name{
  font-family:var(--font-display); font-weight:700; font-size:1.08rem; letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.brand-name .accent{ color:var(--accent); }
@media (max-width:420px){
  .brand-name{ font-size:.92rem; }
}
.topbar-actions{ display:flex; align-items:center; gap:8px; }

.icon-btn{
  width:40px;height:40px; border-radius:var(--radius-pill);
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm); transition:transform .3s var(--ease-spring), box-shadow .25s var(--ease-out), background .2s;
}
.icon-btn:hover{ transform:translateY(-1px) scale(1.04); box-shadow:var(--shadow-md); }
.icon-btn:active{ transform:scale(.92); transition-duration:.12s; }
.icon-btn svg{ width:18px;height:18px; }

/* =========================== BUTTONS =========================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--radius-pill);
  padding:13px 24px;
  font-weight:700; font-size:.95rem;
  border:1px solid transparent;
  transition:transform .28s var(--ease-spring), box-shadow .25s var(--ease-out), background .2s ease, border-color .2s ease, opacity .15s ease;
  white-space:nowrap;
}
.btn:active{ transform:scale(.96); transition-duration:.12s; }
.btn-primary{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:var(--accent-contrast);
  box-shadow:var(--shadow-md);
}
.btn-primary:hover{ transform:translateY(-1px) scale(1.015); box-shadow:var(--shadow-lg); }
.btn-secondary{
  background:var(--surface); color:var(--text); border-color:var(--border);
  box-shadow:var(--shadow-sm);
}
.btn-secondary:hover{ border-color:var(--accent); color:var(--accent); }
.btn-ghost{
  background:transparent; color:var(--text-muted); border-color:transparent;
}
.btn-ghost:hover{ background:var(--surface-2); color:var(--text); }
.btn-danger{ background:var(--danger-bg); color:var(--danger); border-color:transparent; }
.btn-danger:hover{ filter:brightness(0.97); }
.btn-danger-text{ color:var(--danger); }
.btn-danger-text:hover{ background:var(--danger-bg); color:var(--danger); }
.btn-block{ width:100%; }
.btn-lg{ padding:16px 30px; font-size:1.02rem; }
.btn[disabled]{ transform:none !important; }

/* =========================== HERO =========================== */
.hero{
  padding-block:40px 8px;
  display:grid; gap:18px;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); font-weight:800;
}
.hero h1{
  font-size:clamp(1.9rem, 4.2vw, 2.9rem);
  line-height:1.05;
}
.hero p.lead{
  color:var(--text-muted); font-size:1.05rem; max-width:56ch;
}
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:4px; }

/* =========================== CARDS / STATS =========================== */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  animation:cardIn .4s var(--ease-out) both;
}
@keyframes cardIn{ from{ opacity:0; transform:translateY(8px) scale(.985); } to{ opacity:1; transform:translateY(0) scale(1); } }
.section{ padding-block:26px; }
.section-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-bottom:16px; flex-wrap:wrap;
}
.section-head h2{ font-size:1.3rem; }
.section-head .hint{ color:var(--text-muted); font-size:.88rem; }
.eyebrow-label{
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; font-weight:800;
  color:var(--text-muted);
}

.stat-grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
}
.stat-grid .progress-hero-card{
  grid-column: span 2;
  min-width:260px;
}
@media (max-width:560px){
  .stat-grid .progress-hero-card{ grid-column: 1 / -1; }
}
.stat-tile{
  padding:16px 18px; display:flex; flex-direction:column; gap:6px;
}
.stat-tile .stat-value{
  font-family:var(--font-display); font-weight:700; font-size:1.6rem;
  font-variant-numeric:tabular-nums;
}
.stat-tile .stat-label{ font-size:.8rem; color:var(--text-muted); font-weight:600; }
.stat-tile .stat-icon{ width:30px;height:30px;border-radius:9px; display:flex;align-items:center;justify-content:center; background:var(--accent-tint); color:var(--accent); margin-bottom:2px;}
.stat-tile .stat-icon svg{ width:16px;height:16px; }

.progress-hero-card{
  padding:22px; display:grid; gap:14px;
  grid-template-columns: auto 1fr; align-items:center;
}
.ring{
  --pct:0;
  width:84px;height:84px;border-radius:50%;
  background:conic-gradient(var(--accent) calc(var(--pct)*1%), var(--surface-2) 0);
  display:flex;align-items:center;justify-content:center;
  flex:none;
}
.ring::after{
  content:attr(data-label);
  width:64px;height:64px;border-radius:50%;background:var(--surface);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1rem;
  box-shadow:inset 0 0 0 1px var(--border);
}

/* =========================== JOURNEY MAP =========================== */
.journey{
  display:flex; flex-direction:column; gap:0;
}
.journey-row{ display:flex; flex-direction:column; gap:0; }
.journey-node{
  display:grid; grid-template-columns:52px 1fr; gap:16px; align-items:stretch;
}
.journey-node .track{
  display:flex; flex-direction:column; align-items:center;
}
.journey-node .dot{
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1.15rem;
  background:var(--surface-2); color:var(--text-muted);
  border:2px solid var(--border);
  flex:none;
}
.journey-node.is-done .dot{ background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:var(--accent-contrast); border-color:transparent; }
.journey-node.is-active .dot{ border-color:var(--accent); color:var(--accent); background:var(--accent-tint); box-shadow:0 0 0 5px var(--accent-tint); animation:dotPulse 2.4s var(--ease-standard) infinite; }
@keyframes dotPulse{ 0%,100%{ box-shadow:0 0 0 5px var(--accent-tint); } 50%{ box-shadow:0 0 0 9px var(--accent-tint); } }
.journey-node .line{ width:2px; flex:1; background:var(--border); margin-block:2px; min-height:20px; }
.journey-node.is-done .line{ background:var(--accent); }
.journey-card{
  padding:18px 20px; margin-bottom:20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  transition:transform .3s var(--ease-spring), box-shadow .25s var(--ease-out);
}
.journey-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.journey-card:active{ transform:scale(.99); transition-duration:.12s; }
.journey-card .jc-title{ font-family:var(--font-display); font-weight:600; font-size:1.08rem; }
.journey-card .jc-meta{ color:var(--text-muted); font-size:.85rem; margin-top:3px; }
.journey-card .jc-status{
  font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 11px; border-radius:var(--radius-pill);
}
.jc-status.done{ background:var(--success-bg); color:var(--success); }
.jc-status.active{ background:var(--accent-tint); color:var(--accent); }
.jc-status.locked{ background:var(--surface-2); color:var(--text-faint); }
.jc-progress-mini{ width:120px; }

.trophy-node .dot{ background:linear-gradient(135deg,#f59e0b,#fbbf24); color:#3a2405; border-color:transparent; }

/* A partir do tablet, a jornada vira uma grade que se ajusta (quebra em
   várias linhas) em vez de uma única fileira sem quebra — com poucas
   matérias funciona bem das duas formas, mas com muitas (um aluno pode
   ter dezenas inscritas) uma fileira única ficava espremida e feia. A
   linha de conexão entre os pontos não faz sentido numa grade que quebra,
   então ela é escondida aqui; o número/selo do módulo continua visível
   no topo de cada cartão. */
@media (min-width: 760px){
  .journey{
    display:grid; flex-direction:unset;
    grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
    gap:18px; align-items:stretch;
  }
  .journey-node{ display:flex; flex-direction:column; grid-template-columns:none; gap:0; }
  .journey-node .track{ flex-direction:row; width:auto; }
  .journey-node .line{ display:none; }
  .journey-card{ flex-direction:column; align-items:flex-start; text-align:left; margin-bottom:0; margin-top:12px; height:100%; }
}

/* =========================== SUBJECT CARDS =========================== */
.subject-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); }
.subject-card{
  padding:22px; display:flex; flex-direction:column; gap:12px;
  border-top:4px solid var(--accent);
  transition:transform .3s var(--ease-spring), box-shadow .25s var(--ease-out);
}
.subject-card:hover{ transform:translateY(-4px) scale(1.01); box-shadow:var(--shadow-md); }
.subject-card:active{ transform:translateY(-1px) scale(.99); transition-duration:.12s; }
.subject-card .sc-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.subject-card .sc-icon{
  width:44px;height:44px;border-radius:12px; background:var(--accent-tint); color:var(--accent);
  display:flex;align-items:center;justify-content:center;
}
.subject-card .sc-icon svg{ width:22px;height:22px; }
.subject-card h3{ font-size:1.12rem; }
.subject-card .sc-desc{ color:var(--text-muted); font-size:.86rem; }
.subject-card .sc-progress-row{ display:flex; align-items:center; gap:10px; font-size:.82rem; color:var(--text-muted); }
.subject-card .sc-footer{ margin-top:auto; display:flex; gap:8px; flex-wrap:wrap; }

/* generic progress bar */
.progress-bar{ height:8px; border-radius:var(--radius-pill); background:var(--surface-2); overflow:hidden; flex:1; }
.progress-bar > span{
  display:block; height:100%; border-radius:var(--radius-pill);
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  transition:width .5s var(--ease-standard);
}
.progress-bar.thin{ height:6px; }

/* =========================== REVIEW LIST =========================== */
.review-list{ display:grid; gap:10px; }
.review-item{
  display:flex; align-items:center; gap:12px; padding:14px 16px;
}
.review-item .ri-bar{ flex:1; }
.review-item .ri-pct{ font-weight:800; font-variant-numeric:tabular-nums; min-width:44px; text-align:right; }
.review-item .ri-name{ min-width:170px; font-weight:600; font-size:.92rem; }
.empty-note{ color:var(--text-muted); font-size:.9rem; padding:18px; text-align:center; }

/* =========================== QUIZ SCREEN =========================== */
.quiz-shell{ min-height:100%; display:flex; flex-direction:column; }
.quiz-header{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:30;
  background:var(--bg); border-bottom:1px solid var(--border);
  padding-block:14px;
}
.quiz-header-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.quiz-meta-left{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.quiz-subject-badge{
  font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-tint); padding:5px 11px; border-radius:var(--radius-pill);
}
.quiz-progress-text{ font-size:.85rem; color:var(--text-muted); font-weight:600; font-variant-numeric:tabular-nums;}
.diff-badge{
  font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 10px; border-radius:var(--radius-pill); border:1px solid var(--border);
}
.diff-badge.facil{ color:var(--success); border-color:var(--success); background:var(--success-bg); }
.diff-badge.intermediaria{ color:var(--warning); border-color:var(--warning); background:var(--warning-bg); }
.diff-badge.dificil{ color:var(--danger); border-color:var(--danger); background:var(--danger-bg); }

.timer-chip{
  font-variant-numeric:tabular-nums; font-weight:700; font-size:.85rem;
  padding:5px 12px; border-radius:var(--radius-pill); background:var(--surface-2); border:1px solid var(--border);
  display:inline-flex; align-items:center; gap:6px;
}

.combo-toast{
  position:fixed; top:calc(env(safe-area-inset-top,0px) + 78px); left:50%;
  transform:translateX(-50%) translateY(-10px); opacity:0;
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:var(--accent-contrast);
  padding:9px 18px; border-radius:var(--radius-pill); font-weight:800; font-size:.88rem;
  box-shadow:var(--shadow-lg); z-index:60; pointer-events:none;
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.combo-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); animation:comboPop .5s var(--ease-spring); }
@keyframes comboPop{
  0%{ opacity:0; transform:translateX(-50%) translateY(6px) scale(.7) rotate(-2deg); }
  55%{ opacity:1; transform:translateX(-50%) translateY(-4px) scale(1.08) rotate(1.5deg); }
  100%{ opacity:1; transform:translateX(-50%) translateY(0) scale(1) rotate(0deg); }
}

.quiz-body{ flex:1; display:flex; align-items:flex-start; justify-content:center; padding-block:26px; }
.quiz-card{
  width:100%; max-width:720px; padding:28px;
  display:flex; flex-direction:column; gap:20px;
  animation:qfade .38s var(--ease-out);
}
@keyframes qfade{ from{ opacity:0; transform:translateY(10px) scale(.985);} to{opacity:1; transform:translateY(0) scale(1);} }
.question-tema{ font-size:.78rem; color:var(--text-muted); font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.question-text{ font-size:1.28rem; line-height:1.42; font-family:var(--font-display); font-weight:600; white-space:pre-line; }

.options{ display:grid; gap:10px; }
.option{
  display:flex; align-items:center; gap:14px; text-align:left;
  padding:15px 16px; border-radius:var(--radius-md);
  border:1.5px solid var(--border); background:var(--surface);
  transition:border-color .2s ease, background .2s ease, transform .25s var(--ease-spring), box-shadow .2s ease;
  font-size:.98rem; line-height:1.4;
}
.option:hover:not(:disabled){ border-color:var(--accent); background:var(--accent-tint); transform:translateY(-1px); }
.option:active:not(:disabled){ transform:scale(.98); transition-duration:.1s; }
.option .opt-letter{
  flex:none; width:32px;height:32px;border-radius:50%;
  background:var(--surface-2); color:var(--text-muted);
  display:flex;align-items:center;justify-content:center; font-weight:800; font-size:.86rem;
  border:1.5px solid var(--border);
  transition:transform .3s var(--ease-spring), background .2s ease, color .2s ease, border-color .2s ease;
}
.option.selected{ border-color:var(--accent); background:var(--accent-tint); animation:optionPick .32s var(--ease-spring); }
.option.selected .opt-letter{ background:var(--accent); color:var(--accent-contrast); border-color:transparent; transform:scale(1.08); }
.option .opt-status-icon{ margin-left:auto; flex:none; width:20px;height:20px; display:none; }
.option .opt-status-icon svg{ width:20px;height:20px; }
@keyframes optionPick{ 0%{ transform:scale(.97); } 55%{ transform:scale(1.015); } 100%{ transform:scale(1); } }

.option.is-correct{ border-color:var(--success); background:var(--success-bg); animation:optionCorrect .5s var(--ease-spring); }
.option.is-correct .opt-letter{ background:var(--success); color:#fff; border-color:transparent; }
.option.is-correct .opt-status-icon{ display:block; color:var(--success); }
.option.is-wrong{ border-color:var(--danger); background:var(--danger-bg); animation:optionWrong .4s var(--ease-out); }
.option.is-wrong .opt-letter{ background:var(--danger); color:#fff; border-color:transparent; }
.option.is-wrong .opt-status-icon{ display:block; color:var(--danger); }
.option:disabled{ cursor:default; opacity:1; }
@keyframes optionCorrect{ 0%{ transform:scale(.98); } 45%{ transform:scale(1.02); } 100%{ transform:scale(1); } }
@keyframes optionWrong{ 0%,100%{ transform:translateX(0); } 22%{ transform:translateX(-5px); } 44%{ transform:translateX(4px); } 66%{ transform:translateX(-2px); } 88%{ transform:translateX(1px); } }
.option-sr-status{ position:absolute; width:1px;height:1px; overflow:hidden; }

.quiz-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:4px; }
.star-toggle{
  display:flex; align-items:center; gap:6px; font-size:.82rem; font-weight:700; color:var(--text-muted);
  border:1px solid var(--border); background:var(--surface); padding:9px 14px; border-radius:var(--radius-pill);
}
.star-toggle svg{ width:16px;height:16px; }
.star-toggle.active{ color:#b45309; border-color:#f2c14e; background:var(--warning-bg); }
.quiz-actions-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }

.feedback-panel{
  border-radius:var(--radius-md); padding:18px 20px; display:flex; flex-direction:column; gap:10px;
  animation:qfade .25s ease;
  border:1.5px solid;
}
.feedback-panel.correct{ background:var(--success-bg); border-color:var(--success); }
.feedback-panel.wrong{ background:var(--danger-bg); border-color:var(--danger); }
.feedback-title{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:1rem; }
.feedback-title.correct{ color:var(--success); }
.feedback-title.wrong{ color:var(--danger); }
.feedback-title svg{ width:20px;height:20px; }
.feedback-text{ color:var(--text); font-size:.95rem; line-height:1.55; }
.xp-pill{
  align-self:flex-start; font-size:.78rem; font-weight:800; padding:4px 11px; border-radius:var(--radius-pill);
  background:var(--surface); border:1px solid var(--border);
}

.details-toggle{
  align-self:flex-start; font-size:.85rem; font-weight:700; color:var(--accent);
  background:none; border:none; padding:4px 0; text-decoration:underline; text-underline-offset:3px;
}
.alt-explanations{ display:grid; gap:8px; margin-top:4px; }
.alt-explain-item{ font-size:.88rem; padding:10px 12px; border-radius:10px; background:var(--surface); border:1px solid var(--border); }
.alt-explain-item b{ font-variant-numeric:tabular-nums; }

/* =========================== RESULT SCREENS =========================== */
.result-hero{ text-align:center; padding-block:34px 10px; display:grid; gap:10px; justify-items:center; }
.result-badge{
  width:76px;height:76px;border-radius:50%; display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:var(--accent-contrast);
  box-shadow:var(--shadow-lg); margin-bottom:6px;
}
.result-badge svg{ width:36px;height:36px; }
.result-score{ font-family:var(--font-display); font-weight:700; font-size:clamp(2.4rem,7vw,3.4rem); font-variant-numeric:tabular-nums; }
.result-score small{ font-size:1.4rem; color:var(--text-muted); font-weight:500; }
.result-message{ color:var(--text-muted); max-width:52ch; }

.kpi-grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); }

.theme-bars{ display:grid; gap:12px; }
.theme-bar-row{ display:grid; grid-template-columns:1fr auto; gap:6px 12px; align-items:center; }
.theme-bar-row .tb-name{ font-size:.88rem; font-weight:600; }
.theme-bar-row .tb-pct{ font-size:.85rem; font-weight:800; font-variant-numeric:tabular-nums; }
.theme-bar-row .progress-bar{ grid-column:1 / -1; }

.pill-list{ display:flex; flex-wrap:wrap; gap:8px; }
.pill{ font-size:.82rem; font-weight:700; padding:6px 13px; border-radius:var(--radius-pill); background:var(--accent-tint); color:var(--accent); }

.result-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; padding-block:22px 8px; }

.compare-chart{ display:grid; gap:14px; }
.compare-row{ display:grid; grid-template-columns:170px 1fr 52px; align-items:center; gap:12px; }
.compare-row .cr-label{ font-size:.88rem; font-weight:700; }
.compare-row .cr-track{ height:22px; border-radius:8px; background:var(--surface-2); overflow:hidden; position:relative; }
.compare-row .cr-fill{ height:100%; border-radius:8px; transition:width .6s var(--ease-standard); }
.compare-row .cr-pct{ font-weight:800; font-variant-numeric:tabular-nums; text-align:right; }

.insight-list{ display:grid; gap:10px; }
.insight-item{ display:flex; gap:12px; padding:14px 16px; align-items:flex-start; }
.insight-item .ii-icon{ flex:none; width:30px;height:30px;border-radius:9px; background:var(--accent-tint); color:var(--accent); display:flex;align-items:center;justify-content:center; }
.insight-item .ii-icon svg{ width:16px;height:16px; }
.insight-item p{ font-size:.92rem; }

/* =========================== ATTEMPTS HISTORY =========================== */
.attempt-track{ display:flex; gap:10px; flex-wrap:wrap; }
.attempt-chip{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:10px 14px; border-radius:12px; background:var(--surface-2); min-width:74px;
}
.attempt-chip .ac-n{ font-size:.68rem; color:var(--text-muted); font-weight:700; text-transform:uppercase; }
.attempt-chip .ac-pct{ font-weight:800; font-family:var(--font-display); }

/* =========================== MODES / SETTINGS =========================== */
.mode-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.mode-card{ padding:20px; display:flex; flex-direction:column; gap:8px; transition:transform .3s var(--ease-spring), box-shadow .25s var(--ease-out); }
.mode-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.mode-card:active{ transform:scale(.99); transition-duration:.12s; }
.mode-card .mc-icon{ width:40px;height:40px;border-radius:11px; background:var(--accent-tint); color:var(--accent); display:flex;align-items:center;justify-content:center; }
.mode-card .mc-icon svg{ width:20px;height:20px; }
.mode-card h3{ font-size:1.02rem; }
.mode-card p{ color:var(--text-muted); font-size:.85rem; }

.settings-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 0; border-bottom:1px solid var(--border);
}
.settings-row:last-child{ border-bottom:none; }
.settings-row .sr-title{ font-weight:700; font-size:.95rem; }
.settings-row .sr-desc{ font-size:.82rem; color:var(--text-muted); margin-top:2px; }

.switch{
  width:46px;height:26px;border-radius:var(--radius-pill);
  background:var(--surface-2); border:1px solid var(--border);
  position:relative; flex:none;
}
.switch::after{
  content:''; position:absolute; top:2px; left:2px; width:20px;height:20px;border-radius:50%;
  background:var(--surface); box-shadow:var(--shadow-sm); transition:transform .2s ease;
}
.switch.on{ background:var(--accent); border-color:var(--accent); }
.switch.on::after{ transform:translateX(20px); background:#fff; }

.segmented{ display:inline-flex; border:1px solid var(--border); border-radius:var(--radius-pill); padding:3px; gap:2px; background:var(--surface); }
.segmented button{
  border:none; background:transparent; padding:7px 15px; border-radius:var(--radius-pill);
  font-size:.82rem; font-weight:700; color:var(--text-muted);
}
.segmented button.active{ background:var(--accent); color:var(--accent-contrast); }

/* =========================== EMPTY / MODAL =========================== */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(8,14,13,.55); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; z-index:90; padding:20px;
  animation:backdropFade .3s var(--ease-out);
}
@keyframes backdropFade{ from{ opacity:0; } to{ opacity:1; } }
.modal{
  width:100%; max-width:420px; padding:26px; display:grid; gap:14px;
  animation:modalPop .4s var(--ease-spring);
  transform-origin:center;
}
@keyframes modalPop{ from{ opacity:0; transform:scale(.9) translateY(16px); } to{ opacity:1; transform:scale(1) translateY(0); } }
.modal h3{ font-size:1.1rem; }
.modal p{ color:var(--text-muted); font-size:.9rem; }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:6px; }

/* Em telas estreitas o popup se comporta como uma folha (sheet) que sobe da
   base, no mesmo espírito dos menus de ação do iOS. */
@media (max-width:560px){
  .modal-backdrop{ align-items:flex-end; padding:0; }
  .modal{
    max-width:none; width:100%; border-radius:22px 22px 0 0;
    padding:30px 20px calc(env(safe-area-inset-bottom, 0px) + 22px);
    animation:sheetUp .38s var(--ease-spring); position:relative;
  }
  .modal::before{
    content:''; position:absolute; top:10px; left:50%; width:36px; height:5px;
    border-radius:3px; background:var(--border); transform:translateX(-50%);
  }
  @keyframes sheetUp{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:translateY(0); } }
}

.badge-row{ display:flex; gap:8px; flex-wrap:wrap; }
.achv{
  display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:14px;
  background:var(--surface-2); opacity:.5; filter:grayscale(.6);
  transition:opacity .3s var(--ease-out), filter .3s var(--ease-out), transform .3s var(--ease-spring);
}
.achv.unlocked{ opacity:1; filter:none; background:var(--accent-tint); animation:achvUnlock .5s var(--ease-spring); }
@keyframes achvUnlock{ 0%{ transform:scale(.92); } 55%{ transform:scale(1.04); } 100%{ transform:scale(1); } }
.achv .a-icon{ width:32px;height:32px;border-radius:9px; background:var(--surface); display:flex;align-items:center;justify-content:center; flex:none; }
.achv .a-icon svg{ width:17px;height:17px; color:var(--accent); }
.achv .a-name{ font-weight:700; font-size:.85rem; }
.achv .a-desc{ font-size:.74rem; color:var(--text-muted); }

.toast-xp{
  position:fixed; bottom:calc(env(safe-area-inset-bottom, 0px) + 24px); left:50%; transform:translateX(-50%) translateY(20px); opacity:0;
  background:var(--text); color:var(--bg); padding:10px 20px; border-radius:var(--radius-pill);
  font-weight:800; font-size:.85rem; z-index:70; box-shadow:var(--shadow-lg);
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out); pointer-events:none;
}
.toast-xp.show{ opacity:1; transform:translateX(-50%) translateY(0); animation:toastPop .45s var(--ease-spring); }
@keyframes toastPop{
  0%{ opacity:0; transform:translateX(-50%) translateY(16px) scale(.85); }
  60%{ opacity:1; transform:translateX(-50%) translateY(-3px) scale(1.04); }
  100%{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
}

footer.app-footer{ text-align:center; color:var(--text-faint); font-size:.78rem; padding:30px 20px 10px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* Phone tweaks */
@media (max-width:480px){
  .quiz-card{ padding:20px 18px; }
  .question-text{ font-size:1.12rem; }
  .option{ padding:14px; font-size:.94rem; }
  .btn-lg{ width:100%; }
  .result-actions .btn{ width:100%; }
  .hero-actions .btn{ width:100%; }
  .journey-card{ flex-direction:column; align-items:flex-start; }
  .compare-row{ grid-template-columns:1fr; row-gap:6px; }
  .compare-row .cr-pct{ text-align:left; }
}

/* =========================================================
   23. AUTENTICAÇÃO (login / cadastro)
   ========================================================= */
.auth-wrap{
  min-height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:32px 16px;
}
.auth-card{
  width:100%; max-width:480px; padding:32px 28px;
  display:grid; gap:18px;
}
.auth-brand{ display:flex; align-items:center; gap:12px; justify-content:center; margin-bottom:2px; }
.auth-brand .brand-mark{ width:42px;height:42px;border-radius:12px;font-size:1.2rem; }
.auth-title{ text-align:center; }
.auth-title h1{ font-size:1.4rem; }
.auth-title p{ color:var(--text-muted); font-size:.9rem; margin-top:6px; }
.auth-tabs{
  display:flex; border:1px solid var(--border); border-radius:var(--radius-pill); padding:3px; gap:2px; background:var(--surface-2);
}
.auth-tabs button{
  flex:1; border:none; background:transparent; padding:10px 14px; border-radius:var(--radius-pill);
  font-weight:700; font-size:.9rem; color:var(--text-muted); transition:background .2s,color .2s;
}
.auth-tabs button.active{ background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm); }
.field{ display:grid; gap:6px; }
.field label{ font-weight:700; font-size:.85rem; }
.field .hint-text{ font-size:.76rem; color:var(--text-muted); margin-top:-2px; }
.field input, .field textarea, .field select{
  width:100%; border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:12px 14px; font-size:.95rem; font-family:inherit; background:var(--surface); color:var(--text);
  transition:border-color .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint);
}
.field textarea{ min-height:90px; resize:vertical; }
.auth-error{
  background:var(--danger-bg); color:var(--danger); border-radius:var(--radius-sm);
  padding:10px 14px; font-size:.85rem; font-weight:600;
}
.auth-form{ display:grid; gap:14px; }
.subject-check-grid{ display:grid; gap:10px; }
.subject-check{
  display:flex; align-items:flex-start; gap:12px; border:1px solid var(--border);
  border-radius:var(--radius-md); padding:12px 14px; cursor:pointer; transition:border-color .2s, background .2s;
}
.subject-check:hover{ border-color:var(--accent); }
.subject-check input{ margin-top:3px; width:18px;height:18px; flex:none; accent-color:var(--accent); }
.subject-check .sc-name{ font-weight:700; font-size:.9rem; }
.subject-check .sc-desc{ font-size:.78rem; color:var(--text-muted); margin-top:2px; }
.auth-switch{ text-align:center; font-size:.86rem; color:var(--text-muted); }
.auth-switch button{ background:none; border:none; color:var(--accent); font-weight:700; padding:0; }

/* =========================================================
   24. ADICIONAR MATÉRIA
   ========================================================= */
.addsubject-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.addsubject-card{
  padding:18px; display:flex; flex-direction:column; gap:8px;
}
.addsubject-card .as-name{ font-weight:700; font-size:.95rem; }
.addsubject-card .as-desc{ font-size:.8rem; color:var(--text-muted); flex:1; }
.request-list{ display:grid; gap:10px; margin-top:6px; }
.request-item{
  padding:14px 16px; display:flex; flex-direction:column; gap:4px;
}
.request-item-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.request-item .ri-name{ font-weight:700; font-size:.9rem; }
.status-tag{
  display:inline-block; padding:3px 11px; border-radius:var(--radius-pill); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em;
}
.status-tag.pending{ background:var(--warning-bg); color:var(--warning); }
.status-tag.fulfilled{ background:var(--success-bg); color:var(--success); }
.status-tag.rejected{ background:var(--danger-bg); color:var(--danger); }
.request-item .ri-note{ font-size:.8rem; color:var(--text-muted); }
.divider-line{ height:1px; background:var(--border); margin:22px 0; border:none; }

@media (max-width:480px){
  .auth-card{ padding:24px 18px; }
}

/* =========================================================
   25. ANOTAÇÕES (RASCUNHOS) — botão flutuante + painel
   ========================================================= */
.notes-fab{
  position:fixed; right:calc(env(safe-area-inset-right,0px) + 20px); bottom:calc(env(safe-area-inset-bottom,0px) + 20px);
  width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:var(--accent-contrast);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg); z-index:55;
  transition:transform .3s var(--ease-spring), box-shadow .25s var(--ease-out);
}
.notes-fab svg{ width:24px; height:24px; }
.notes-fab:hover{ transform:translateY(-2px) scale(1.05); box-shadow:var(--shadow-lg), 0 0 0 6px var(--accent-tint); }
.notes-fab:active{ transform:scale(.95); transition-duration:.12s; }

.notes-backdrop{
  position:fixed; inset:0; background:rgba(8,14,13,.5); backdrop-filter:blur(4px);
  display:flex; justify-content:flex-end; z-index:82;
  animation:backdropFade .3s var(--ease-out);
}
.notes-panel{
  width:min(420px, 100%); height:100%; background:var(--surface);
  box-shadow:var(--shadow-lg); display:flex; flex-direction:column;
  animation:notesSlideIn .32s var(--ease-spring);
  transition:transform .28s var(--ease-spring);
}
@keyframes notesSlideIn{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }

/* Alça para arrastar o painel para baixo e fechá-lo (toque). */
.notes-drag-handle{ flex:none; display:flex; justify-content:center; padding:10px 0 0; cursor:grab; touch-action:none; }
.notes-drag-handle::before{ content:""; width:40px; height:5px; border-radius:3px; background:var(--border); }
.notes-panel-dragging{ transition:none !important; }
.notes-panel-dismissing{ transition:transform .22s var(--ease-out) !important; }

.notes-header{
  flex:none; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:18px 18px 16px; border-bottom:1px solid var(--border); touch-action:none;
}
.notes-header h3{
  display:flex; align-items:center; gap:10px; font-size:1.02rem; margin:0; flex:1; min-width:0;
}
.notes-header h3 svg{ width:20px; height:20px; color:var(--accent); flex:none; }
.icon-btn-spacer{ width:40px; height:40px; flex:none; }

.notes-body{
  flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:14px;
}
.notes-new-btn{ display:flex; align-items:center; justify-content:center; gap:8px; }
.notes-new-btn svg{ width:18px; height:18px; }
.notes-loading{ color:var(--text-muted); text-align:center; padding:30px 0; }

.notes-empty{ text-align:center; padding:26px 10px; display:grid; gap:8px; justify-items:center; }
.notes-empty-icon{ width:34px; height:34px; color:var(--text-faint); }
.notes-empty-title{ font-weight:700; }
.notes-empty-hint{ color:var(--text-muted); font-size:.85rem; max-width:34ch; }

.notes-list{ display:grid; gap:10px; }
.note-item{
  border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 14px 12px;
  cursor:pointer; background:var(--surface); transition:border-color .2s, box-shadow .2s, transform .2s var(--ease-spring);
}
.note-item:hover{ border-color:var(--accent); box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.note-item-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.note-item-context{
  font-size:.72rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-tint); padding:3px 10px; border-radius:var(--radius-pill);
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.note-item-del{
  flex:none; border:none; background:transparent; color:var(--text-faint); padding:4px; cursor:pointer; border-radius:8px;
  display:flex; align-items:center; justify-content:center; transition:color .2s, background .2s;
}
.note-item-del svg{ width:16px; height:16px; }
.note-item-del:hover{ color:var(--danger); background:var(--danger-bg); }
.note-item-preview{ font-size:.88rem; color:var(--text); margin:8px 0 6px; line-height:1.4; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.note-item-date{ font-size:.74rem; color:var(--text-muted); font-weight:600; }

.note-editor{ flex:1; display:flex; flex-direction:column; gap:12px; }
.note-editor-context{
  display:flex; align-items:flex-start; gap:8px; font-size:.8rem; font-weight:700; color:var(--text-muted);
  background:var(--surface-2); padding:8px 12px; border-radius:var(--radius-sm); align-self:flex-start;
  max-width:100%; box-sizing:border-box;
}
.note-editor-context svg{ width:15px; height:15px; flex:none; margin-top:1px; }
.note-editor-context span{ min-width:0; overflow-wrap:break-word; word-break:break-word; line-height:1.4; }
.note-editor-textarea{
  flex:1; min-height:220px; width:100%; resize:none; border:1px solid var(--border); border-radius:var(--radius-md);
  padding:14px; font-size:.95rem; line-height:1.55; font-family:inherit; background:var(--surface); color:var(--text);
}
.note-editor-textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint); }
.note-editor-footer{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:18px; }
.note-save-status{ font-size:.78rem; color:var(--text-muted); font-weight:600; }
.note-save-status.saving{ color:var(--accent); }
.note-save-status.error{ color:var(--danger); }
.note-editor-meta{ font-size:.76rem; color:var(--text-faint); }

/* No celular o painel ocupa a tela toda, como uma folha. */
@media (max-width:680px){
  .notes-backdrop{ align-items:flex-end; }
  .notes-panel{ width:100%; height:92vh; border-radius:20px 20px 0 0; animation:notesSheetUp .32s var(--ease-spring); }
  @keyframes notesSheetUp{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
  .notes-fab{ right:calc(env(safe-area-inset-right,0px) + 16px); bottom:calc(env(safe-area-inset-bottom,0px) + 16px); width:52px; height:52px; }
  .notes-fab svg{ width:22px; height:22px; }
  .note-editor-textarea{ min-height:160px; }
}

/* Em tablet/desktop o painel fica com largura confortável, sem esticar demais. */
@media (min-width:900px){
  .notes-panel{ width:440px; }
}

/* =========================================================
   26. MOEDINHAS / LOJA DE BÔNUS
   ========================================================= */
.coin-pill{
  display:flex; align-items:center; gap:6px; height:40px; padding:0 14px; border-radius:var(--radius-pill);
  border:1px solid var(--border); background:var(--surface); color:var(--text); font-weight:800; font-size:.9rem;
  font-variant-numeric:tabular-nums; cursor:pointer; box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease-spring), box-shadow .25s var(--ease-out);
}
.coin-pill svg{ width:18px;height:18px; color:#b45309; }
.coin-pill:hover{ transform:translateY(-1px) scale(1.04); box-shadow:var(--shadow-md); }
.coin-pill:active{ transform:scale(.94); transition-duration:.12s; }

.stat-tile-action{ border:none; cursor:pointer; text-align:left; font:inherit; color:inherit; width:100%; }
.stat-tile-action:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.stat-tile-action:active{ transform:scale(.98); transition-duration:.12s; }

.rewards-balance-card{
  display:flex; align-items:center; gap:16px; padding:20px 22px;
  background:linear-gradient(135deg, var(--accent-tint), var(--surface));
}
.rewards-balance-icon{
  width:52px;height:52px;border-radius:50%; flex:none;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#f2c14e,#b45309); color:#fff; box-shadow:var(--shadow-md);
}
.rewards-balance-icon svg{ width:26px;height:26px; }
.rewards-balance-value{ font-family:var(--font-display); font-weight:700; font-size:2rem; font-variant-numeric:tabular-nums; line-height:1.1; }
.rewards-balance-label{ color:var(--text-muted); font-size:.85rem; font-weight:600; }

.reward-card{ position:relative; }
.reward-icon{
  background:var(--accent-tint); color:var(--accent);
  border-radius:11px; display:flex; align-items:center; justify-content:center;
}
.reward-icon svg{ width:20px;height:20px; }
.reward-stock{ align-self:flex-start; }
.reward-price{ display:flex; flex-direction:column; gap:2px; margin:4px 0 2px; }
.reward-price-ref{ font-size:.78rem; color:var(--text-faint); text-decoration:line-through; }
.reward-price-cost{ display:flex; align-items:center; gap:6px; font-weight:800; font-size:1rem; color:#b45309; }
.reward-price-cost svg{ width:17px;height:17px; }

/* =========== POP-UP DE SESSÃO CONCLUÍDA (XP + moedinhas + tempo) =========== */
.session-modal{
  max-width:440px; text-align:center; position:relative; overflow:hidden;
  padding-top:34px;
}
.session-modal-icon{
  width:64px;height:64px;border-radius:50%; margin:0 auto 6px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:var(--accent-contrast);
  box-shadow:var(--shadow-lg); animation:sessionIconPop .55s var(--ease-spring);
}
.session-modal-icon svg{ width:32px;height:32px; }
@keyframes sessionIconPop{
  0%{ transform:scale(.4) rotate(-12deg); opacity:0; }
  60%{ transform:scale(1.12) rotate(4deg); opacity:1; }
  100%{ transform:scale(1) rotate(0); }
}
.session-modal h3{ text-align:center; }
.session-modal-sub{ text-align:center; color:var(--text-muted); font-weight:600; }
.session-modal-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:10px 0 4px;
}
.session-stat{
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:14px 8px; border-radius:var(--radius-md);
  background:var(--surface-2); animation:sessionStatPop .45s var(--ease-spring) backwards;
}
.session-stat:nth-child(1){ animation-delay:.05s; }
.session-stat:nth-child(2){ animation-delay:.15s; }
.session-stat:nth-child(3){ animation-delay:.25s; }
@keyframes sessionStatPop{
  0%{ transform:scale(.7) translateY(8px); opacity:0; }
  100%{ transform:scale(1) translateY(0); opacity:1; }
}
.session-stat-value{ font-family:var(--font-display); font-weight:700; font-size:1.3rem; font-variant-numeric:tabular-nums; }
.session-stat.coins .session-stat-value{ color:#b45309; }
.session-stat.xp .session-stat-value{ color:var(--accent); }
.session-stat-label{ display:flex; align-items:center; gap:4px; font-size:.72rem; color:var(--text-muted); font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.session-stat-label svg{ width:13px;height:13px; }

.confetti-burst{ position:absolute; inset:0 0 auto 0; height:0; pointer-events:none; }
.confetti-piece{
  position:absolute; top:28px; left:50%; width:8px;height:8px; border-radius:2px;
  background:var(--accent); opacity:0;
  animation:confettiBurst 1.1s var(--ease-out) forwards;
  animation-delay:calc(var(--i) * 0.025s);
}
.confetti-piece.cp-0{ background:#0f766e; }
.confetti-piece.cp-1{ background:#f2c14e; }
.confetti-piece.cp-2{ background:#b45309; }
.confetti-piece.cp-3{ background:#8b5cf6; }
.confetti-piece.cp-4{ background:#14b8a6; }
.confetti-piece.cp-5{ background:#be123c; }
.confetti-piece.cp-6{ background:#15803d; }
@keyframes confettiBurst{
  0%{ transform:translate(-50%,0) rotate(0deg) scale(.6); opacity:0; }
  12%{ opacity:1; }
  100%{
    transform:translate(calc(-50% + (var(--i) - 7) * 16px), 190px) rotate(calc(var(--i) * 47deg)) scale(1);
    opacity:0;
  }
}
@media (prefers-reduced-motion: reduce){
  .confetti-piece{ display:none; }
}

@media (max-width:480px){
  .session-modal-stats{ grid-template-columns:repeat(3,1fr); gap:6px; }
  .session-stat{ padding:10px 4px; }
  .session-stat-value{ font-size:1.05rem; }
  .coin-pill{
    flex-direction:column; width:46px; height:46px; min-width:46px;
    padding:6px 2px 5px; gap:2px; justify-content:center; border-radius:16px;
  }
  .coin-pill svg{ width:16px; height:16px; }
  .coin-pill span{
    display:block; font-size:.6rem; line-height:1; font-weight:800;
    color:#b45309; max-width:42px; overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap;
  }
}

/* =========================================================
   27. MINI APOSTILAS — conteúdo de estudo por matéria
   ========================================================= */
.apostila-content{
  max-width:720px;
  line-height:1.7;
  font-size:.98rem;
  padding:28px 26px;
}
.apostila-content h3{
  margin:22px 0 10px;
  font-size:1.08rem;
  color:var(--accent);
}
.apostila-content h3:first-child{ margin-top:0; }
.apostila-content p{
  margin:0 0 14px;
  color:var(--text);
}
.apostila-content ul{
  margin:0 0 14px;
  padding-left:22px;
}
.apostila-content li{
  margin-bottom:6px;
  color:var(--text);
}
.apostila-content strong{ color:var(--text); font-weight:700; }

@media (max-width:560px){
  .apostila-content{ padding:20px 18px; }
}