/* iStudi — Stories de duelo. Campos de cor chapada, placar de sete segmentos, bolinhas de gabarito. */

:root {
  --canvas: #ECEAF3;
  --ink-950: #ECEAF3;
  --ink-900: #F6F5FA;
  --ink-800: #FFFFFF;
  --ink-700: #E9E6F2;
  --panel: #170A36;
  --nav: #FFFFFF;
  --violet-700: #3F0B85;
  --violet-600: #5B10B8;
  --violet-500: #7A4DD8;
  --violet-400: #A88BEB;
  --violet-tint: #FFFFFF;

  --zap: #FFE14D;
  --zap-ink: #1B1200;
  --hit: #2FE682;
  --hit-ink: #03361C;
  --miss: #FF4D8D;
  --miss-ink: #4A0522;
  --multi: #FF6FB5;
  --focus: #22D3EE;

  --danger: #C22A69;
  --gold: #C99A00;
  --success: #0B6B3A;
  --error: #B3124F;

  --text: #150A2E;
  --text-2: #55496F;
  --text-3: #625775;
  --line: rgba(21, 10, 46, 0.12);

  --verde: var(--hit);
  --rosa: var(--miss);
  --amarelo: var(--zap);

  --font-display: 'Archivo', 'Arial Narrow', sans-serif;
  --font-body: 'Figtree', system-ui, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html {
  color-scheme: light;
  background: var(--canvas);
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--ink-700) var(--ink-950);
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--canvas);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

::selection { background: var(--zap); color: var(--zap-ink); }
:focus-visible { outline: 3px solid var(--violet-700); outline-offset: 3px; }
.tela-amigos :focus-visible, .folha-caixa .botao-primario:focus-visible { outline-color: #fff; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
button { font-family: inherit; touch-action: manipulation; }
img { display: block; }

/* ---------- Splash screen ---------- */
.splash {
  position: fixed; inset: 0; z-index: 999;
  display: grid; place-items: center;
  background: #fff;
  transition: opacity 0.5s ease, visibility 0.5s;
}
.splash.saindo { opacity: 0; visibility: hidden; }
.splash img { animation: splash-pulsa 1.4s ease-in-out infinite alternate; }
@keyframes splash-pulsa { from { opacity: 0.55; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

.oculta { display: none !important; }
.ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--ink-900);
  position: relative;
  overflow-x: clip;
}
@media (min-width: 520px) {
  #app { box-shadow: 0 0 0 1px var(--line), 0 20px 80px rgba(21, 10, 46, 0.14); }
}

/* ---------- Telas ---------- */
.tela {
  display: none;
  flex-direction: column;
  flex: 1;
  padding: 20px 20px 32px;
}
.tela.ativa { display: flex; animation: entra 0.4s var(--ease-out); }
@keyframes entra {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Tipografia ---------- */
.titulo-grande {
  font: 800 clamp(28px, 8.4vw, 34px) / 1.06 var(--font-display);
  font-variation-settings: "wdth" 92;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  text-wrap: balance;
}
.subtitulo { font: 500 16px / 1.45 var(--font-body); color: var(--text-2); margin: 0 0 22px; max-width: 42ch; }

label { display: block; font: 700 14px var(--font-body); color: var(--text-2); margin: 0 0 8px; }

/* ---------- Dígitos de sete segmentos ---------- */
.seg-slot { display: inline-flex; }
.seg {
  display: inline-flex;
  align-items: stretch;
  height: 1em;
  font-size: var(--seg, 28px);
  gap: 0.09em;
  color: var(--zap);
  transform: skewX(-7deg);
}
.seg svg { height: 1em; width: 0.6em; display: block; overflow: visible; }
.seg .on { fill: currentColor; }
.seg .off { fill: currentColor; opacity: 0.13; }
.seg.rosa { color: var(--multi); }
.seg.slam { animation: slam 0.42s var(--ease-out); }
@keyframes slam { 0% { transform: skewX(-7deg) scale(1.28); filter: brightness(1.6); } 100% { transform: skewX(-7deg) scale(1); filter: none; } }
.seg.branco { color: #fff; }

/* ---------- Cabeçalho do app ---------- */
.topo-app {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 20px 10px;
  background: var(--ink-900);
  border-bottom: 1px solid var(--line);
}
.topo-marca-app { display: flex; align-items: center; gap: 8px; }
.topo-marca-app img { width: 30px; height: 30px; }
.topo-streak { display: flex; align-items: center; gap: 8px; color: var(--zap); min-height: 44px; }
.topo-streak .ic { width: 22px; height: 22px; }
.topo-streak .seg { --seg: 22px; }

/* ---------- Botões ---------- */
.botao-primario, .botao-secundario, .botao-perigo {
  width: 100%; min-height: 56px; padding: 0 24px;
  border: 0; border-radius: 999px;
  font: 800 17px / 1 var(--font-body);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer;
  transition: transform 0.14s var(--ease-out), box-shadow 0.14s var(--ease-out), background 0.14s, filter 0.14s;
}
.botao-primario { background: var(--zap); color: var(--zap-ink); box-shadow: 0 10px 24px -10px rgba(255, 225, 77, 0.6); }
.botao-primario:hover { filter: brightness(1.06); }
.botao-primario:active { transform: translateY(2px) scale(0.985); box-shadow: 0 4px 10px -6px rgba(255, 225, 77, 0.5); }
.botao-primario:disabled { background: var(--ink-700); color: var(--text-3); box-shadow: none; cursor: not-allowed; }
.botao-secundario { background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28); }
.botao-secundario:hover { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55); }
.botao-secundario:active { transform: scale(0.985); }
.botao-secundario:disabled { opacity: 0.5; cursor: not-allowed; }
.botao-perigo { background: rgba(255, 77, 141, 0.12); color: var(--miss); box-shadow: inset 0 0 0 2px rgba(255, 77, 141, 0.5); margin-top: auto; }
.botao-perigo:hover { opacity: 0.8; }
.botao-perigo:active { transform: scale(0.985); }

.voltar {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--ink-800); color: var(--text);
  display: grid; place-items: center; cursor: pointer; margin-bottom: 18px; flex: none;
  transition: transform 0.14s var(--ease-out), background 0.14s;
}
.voltar:hover { background: var(--ink-700); }
.voltar:active { transform: scale(0.92); }

.pilula {
  font: 700 12px / 1 var(--font-body); color: var(--text-2);
  background: var(--ink-800); padding: 9px 12px; border-radius: 999px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Campos ---------- */
input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="search"] {
  width: 100%; min-height: 54px; padding: 0 16px;
  border-radius: 16px; border: 2px solid transparent;
  background: var(--ink-800); color: var(--text);
  font: 600 16px var(--font-body);
  margin-bottom: 16px;
  transition: border-color 0.15s, background 0.15s;
}
input::placeholder { color: var(--text-3); }
input:hover { border-color: rgba(255, 255, 255, 0.16); }
input:focus, input:focus-visible { outline: none; border-color: var(--zap); }

.campo-senha { position: relative; }
.campo-senha input { padding-right: 54px; }
.botao-mostrar-senha {
  position: absolute; right: 4px; top: 5px; width: 44px; height: 44px;
  background: none; border: 0; border-radius: 50%; color: var(--text-2);
  display: grid; place-items: center; cursor: pointer;
}
.botao-mostrar-senha.ativo { color: var(--zap); }

.link-esqueci-senha {
  background: none; border: 0; padding: 0; margin: -6px 0 14px; min-height: 44px;
  font: 700 14px var(--font-body); color: var(--zap); cursor: pointer; text-align: left; align-self: flex-start;
}

.erro-auth {
  font: 700 14px / 1.35 var(--font-body); color: #FFB3CF;
  background: rgba(255, 77, 141, 0.16); padding: 11px 14px; border-radius: 14px; margin: -4px 0 16px;
}
.erro-auth.ok { color: #A6F5CB; background: rgba(47, 230, 130, 0.14); }

.auth-marca { display: flex; align-items: center; gap: 10px; }
.auth-form { display: flex; flex-direction: column; }
.tela-convite .auth-sub strong { color: var(--zap); }
.tela-convite .botao-primario { margin-bottom: 12px; }

/* ---------- Escolha de objetivo ---------- */
.tela-objetivo { padding-top: 22px; }

.continuar {
  margin-top: 12px; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 68px;
  padding: 12px 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--ink-800);
  color: var(--text); text-align: left; cursor: pointer; transition: transform 0.14s var(--ease-out), background 0.14s;
}
.continuar:hover { background: var(--ink-700); }
.continuar:active { transform: scale(0.985); }
.continuar-icone { width: 44px; height: 44px; border-radius: 50%; background: var(--zap); color: var(--zap-ink); display: grid; place-items: center; flex: none; }
.continuar-icone .ic { fill: currentColor; stroke: none; width: 18px; height: 18px; margin-left: 2px; }
.continuar-texto { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.continuar-texto strong { font: 800 16px / 1.2 var(--font-body); }
.continuar-texto span { font: 500 13px var(--font-body); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.continuar .seta { color: var(--text-3); }

/* ---------- Listas (série, matéria, assunto) ---------- */
.lista-materias { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.item-materia {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 64px;
  padding: 12px 4px; border: 0; border-bottom: 1px solid var(--line); background: none;
  color: var(--text); font: 700 17px / 1.25 var(--font-body); text-align: left; cursor: pointer;
  transition: background 0.15s;
}
.item-materia:hover { background: rgba(21, 10, 46, 0.03); }
.item-materia:active { background: rgba(21, 10, 46, 0.06); }
.item-materia .selo {
  flex: none; font: 700 13px var(--font-body); color: var(--text-2); background: var(--ink-800);
  padding: 6px 12px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.item-materia.vazia { opacity: 0.45; cursor: not-allowed; }
.item-materia.vazia:hover { background: none; }

/* ---------- Hub de jogos ---------- */
.tela-hub { padding-top: 16px; }
.pilula-selecao {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; max-width: 100%; min-height: 44px;
  padding: 0 16px 0 10px; border-radius: 999px; background: var(--ink-800); border: 1px solid var(--line);
  color: var(--text); font: 700 14px var(--font-body); cursor: pointer; margin-bottom: 16px;
}
.pilula-selecao .ic { width: 20px; height: 20px; }
.pilula-selecao span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.filtro-jogos { display: flex; gap: 8px; margin: 24px 0 8px; flex-wrap: wrap; }
.filtro-chip {
  min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--text-2); font: 700 14px var(--font-body); cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.filtro-chip:hover { color: var(--text); }
.filtro-chip.ativo { background: var(--text); color: var(--ink-950); border-color: var(--text); }

.lista-jogos { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.linha-jogo {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 80px; padding: 12px 2px;
  border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); text-align: left; cursor: pointer;
  transition: background 0.15s;
}
.linha-jogo:hover { background: rgba(21, 10, 46, 0.03); }
.linha-jogo:active { background: rgba(21, 10, 46, 0.06); }
.anel { flex: none; width: 56px; height: 56px; padding: 3px; border-radius: 50%; background: var(--line); }
.anel.multi { background: conic-gradient(from 200deg, #FFE14D, #FF4D8D, #7F3FF0, #FFE14D); }
.miolo { width: 100%; height: 100%; border-radius: 50%; background: var(--ink-900); display: grid; place-items: center; color: var(--zap); }
.anel.multi .miolo { color: var(--multi); }
.linha-jogo-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.linha-jogo-nome { font: 800 17px / 1.15 var(--font-body); }
.linha-jogo-desc { font: 500 14px / 1.35 var(--font-body); color: var(--text-2); }
.linha-jogo-tag { font: 700 12px var(--font-body); color: var(--text-3); flex: none; }

/* ---------- Perfil ---------- */
.perfil-cartao { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin: 0 0 26px; }
.avatar-anel { width: 132px; height: 132px; padding: 5px; border-radius: 50%; background: conic-gradient(from 200deg, #FFE14D, #FF4D8D, #7F3FF0, #FFE14D); }
.avatar-circulo {
  border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--violet-600);
  font: 900 20px var(--font-display); text-transform: uppercase;
}
.perfil-avatar-grande { width: 100%; height: 100%; font-size: 56px; border: 5px solid var(--ink-900); }
.perfil-nome { font: 800 28px / 1.05 var(--font-display); font-variation-settings: "wdth" 90; max-width: 100%; overflow-wrap: anywhere; }
.perfil-sub { color: var(--text-2); font: 500 14px var(--font-body); margin: 0; }
.perfil-vazio { text-align: center; margin-top: 16px; }
.perfil-vazio[hidden] { display: none; }

.tela-perfil .botao-primario { margin-top: auto; }

/* ---------- Configurações ---------- */
.bloco-config { padding: 18px 0 20px; border-bottom: 1px solid var(--line); }
.bloco-config input { margin-bottom: 12px; }
.bloco-config .campo-senha input { margin-bottom: 12px; }

/* ---------- Amigos ---------- */
.tela-amigos { background: var(--violet-600); position: relative; overflow: hidden; }
.tela-amigos .subtitulo { color: var(--violet-tint); }
.tela-amigos .titulo-grande { font-weight: 900; font-size: clamp(40px, 12vw, 52px); font-variation-settings: "wdth" 74; text-transform: uppercase; line-height: 0.94; }
.tela-amigos .botao-primario { margin-top: auto; }
.tela-amigos .erro-auth { margin: 14px 0 0; }

/* ---------- Quadro de jogo (story) ---------- */
.tela-quadro { padding-top: 14px; }
.quadro-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; min-width: 0; }
.quadro-topo .voltar { margin: 0; width: 44px; height: 44px; }
.segmentos { display: flex; gap: 4px; margin-bottom: 14px; }
.segmentos span { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.2); transition: background 0.3s; }
.segmentos span.feito { background: #fff; }
.segmentos span.acabou { animation: pontinho-feito 0.4s var(--ease-out); }
.segmentos span.atual { background: var(--zap); animation: pontinho-pulsa 1.2s ease-in-out infinite; }
@keyframes pontinho-feito { 0% { transform: scaleY(1); } 40% { transform: scaleY(2.8); background: var(--zap); } 100% { transform: scaleY(1); } }
@keyframes pontinho-pulsa { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.duelistas { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 4px 0 12px; }
.duelista { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.duelista .avatar-circulo { width: 48px; height: 48px; font-size: 20px; border: 3px solid var(--ink-900); box-shadow: 0 0 0 2px var(--violet-400); }
#duelista-b-avatar { background: var(--ink-700); box-shadow: 0 0 0 2px var(--multi); }
.nome-duelista { font: 700 13px var(--font-body); color: var(--text-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pontos-duelista .seg { --seg: 34px; }
.pontos-duelista.b .seg { color: var(--multi); }
.vs-texto { font: 900 26px var(--font-display); font-variation-settings: "wdth" 70; color: var(--text-3); }
.placar-solo { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 4px 0 10px; }
.placar-solo { text-align: center; }
.placar-solo .pontos-duelista { display: inline-flex; }
.placar-solo .seg { --seg: 34px; }

.barra-progresso { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); overflow: hidden; margin: 6px 0 6px; }
.barra-progresso > div { width: 100%; height: 100%; background: var(--zap); border-radius: 3px; transform-origin: left center; transition: transform 1s linear; }
.texto-tempo { font: 700 13px var(--font-body); color: var(--text-2); margin-bottom: 14px; font-variant-numeric: tabular-nums; }

.cartao-pergunta { flex: 1; display: flex; flex-direction: column; gap: 18px; }
.rotulo-pergunta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.texto-pergunta { font: 600 clamp(18px, 5vw, 21px) / 1.42 var(--font-body); color: #fff; text-wrap: pretty; }

.opcoes-duelo { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 8px; }
.opcao-duelo {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 10px 16px 10px 12px;
  border-radius: 18px; border: 2px solid var(--line); background: var(--ink-800); color: var(--text);
  text-align: left; font: 600 16px / 1.3 var(--font-body); cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.14s var(--ease-out);
}
.opcao-duelo:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.35); }
.opcao-duelo:active:not(:disabled) { transform: scale(0.985); }
.opcao-duelo:disabled { cursor: default; }
.letra {
  flex: none; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--text-3);
  display: grid; place-items: center; font: 800 15px var(--font-display); color: var(--text-2);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.letra::before { content: attr(data-l); }
.opcao-texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.opcao-duelo.correta { border-color: var(--hit); background: rgba(47, 230, 130, 0.13); animation: pulo 0.4s var(--ease-out); }
.opcao-duelo.correta .letra { background: var(--hit); border-color: var(--hit); color: var(--hit-ink); }
.opcao-duelo.errada { border-color: var(--miss); background: rgba(255, 77, 141, 0.13); animation: treme 0.35s var(--ease-out); }
.opcao-duelo.errada .letra { background: var(--miss); border-color: var(--miss); color: var(--miss-ink); }
.opcao-duelo.correta .letra::before, .opcao-duelo.errada .letra::before {
  content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--marca) center / contain no-repeat; mask: var(--marca) center / contain no-repeat;
}
.opcao-duelo.correta { --marca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.opcao-duelo.errada { --marca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }
@keyframes pulo { 0% { transform: scale(1); } 40% { transform: scale(1.025); } 100% { transform: scale(1); } }
@keyframes treme { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* ---------- Componentes compartilhados dos formatos ---------- */
.jogo-secao { display: flex; flex-direction: column; flex: 1; }
#jogo-conteudo { display: flex; flex-direction: column; flex: 1; }
.jogo-tarja { font: 700 13px var(--font-body); color: var(--text-2); margin-bottom: 10px; }
.jogo-placar-linha { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--ink-950); margin-bottom: 18px; }
.jogo-placar-item { padding: 12px 6px 10px; text-align: center; border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 4px; justify-content: center; min-width: 0; }
.jogo-placar-item:last-child { border-right: 0; }
.jogo-placar-item span { display: block; }
.jogo-placar-valor { font: 900 24px / 1 var(--font-display); font-variation-settings: "wdth" 85; color: var(--zap); font-variant-numeric: tabular-nums; display: inline-flex !important; align-items: center; gap: 6px; }
.jogo-placar-valor .ic { width: 20px; height: 20px; }
.jogo-placar-rotulo { font: 700 11px var(--font-body); color: var(--text-2); }
.jogo-cartao { display: flex; flex-direction: column; gap: 18px; flex: 1; }
.jogo-pergunta { font: 600 clamp(18px, 5vw, 21px) / 1.42 var(--font-body); color: #fff; text-wrap: pretty; }
.jogo-explicacao { border-radius: 16px; padding: 14px 16px; font: 600 14px / 1.4 var(--font-body); display: flex; gap: 8px; align-items: flex-start; animation: entra 0.3s var(--ease-out); }
.jogo-explicacao.certa { background: rgba(47, 230, 130, 0.14); color: #A6F5CB; }
.jogo-explicacao.errada { background: rgba(255, 77, 141, 0.16); color: #FFB3CF; }

/* V ou F */
.vf-afirmacao-bloco { background: var(--ink-800); border-radius: 20px; padding: 18px; }
.vf-resposta-proposta { font: 800 20px / 1.3 var(--font-body); margin-top: 6px; color: #fff; overflow-wrap: anywhere; }
.vf-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: auto; padding-top: 12px; }
.vf-botao { border: 0; border-radius: 22px; min-height: 96px; font: 900 22px var(--font-display); font-variation-settings: "wdth" 80; text-transform: uppercase; cursor: pointer; transition: transform 0.14s var(--ease-out); }
.vf-botao:active:not(:disabled) { transform: scale(0.97); }
.vf-botao.verdadeiro { background: var(--hit); color: var(--hit-ink); }
.vf-botao.falso { background: var(--miss); color: var(--miss-ink); }
.vf-botao:disabled { opacity: 0.45; }

/* Sobrevivência */
.vidas-linha { display: flex; gap: 6px; }
.coracao { width: 24px; height: 24px; }
.coracao.cheio { fill: var(--miss); stroke: var(--miss); }
.coracao.vazio { fill: none; stroke: var(--text-3); }

/* Corrida */
.pista-linha { margin-bottom: 12px; }
.pista-nome { font: 700 13px var(--font-body); color: var(--text-2); margin-bottom: 8px; }
.pista-trilha { position: relative; height: 44px; background: var(--ink-800); border-radius: 999px; }
.pista-avatar {
  position: absolute; top: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--violet-600); color: #fff; font: 900 15px var(--font-display);
  transition: left 0.6s var(--ease-out); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}
.pista-avatar img { width: 22px; height: 22px; }
.pista-bandeira { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--zap); display: flex; }
.pista-bandeira .ic { width: 20px; height: 20px; }

/* Memória */
.memoria-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.memoria-carta {
  aspect-ratio: 1; border-radius: 16px; border: 0; padding: 8px; cursor: pointer;
  background: var(--violet-600) url("assets/simbolo-branco.png") center / 36% no-repeat;
  color: var(--text); font: 700 12px / 1.25 var(--font-body); text-align: center; display: flex; align-items: center; justify-content: center;
  transition: transform 0.16s var(--ease-out);
}
.memoria-carta:active:not(:disabled) { transform: scale(0.95); }
.memoria-carta.revelada { background: var(--ink-800); box-shadow: inset 0 0 0 2px var(--violet-400); }
.memoria-carta.acertada { background: rgba(47, 230, 130, 0.14); box-shadow: inset 0 0 0 2px var(--hit); color: #A6F5CB; }

/* Roleta */
.roleta-container { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.roleta-seta { width: 26px; height: 22px; background: var(--zap); clip-path: polygon(0 0, 100% 0, 50% 100%); margin-bottom: -8px; z-index: 2; }
.roleta-roda {
  width: 240px; height: 240px; border-radius: 50%; position: relative; transition: transform 3.5s cubic-bezier(0.15, 0.7, 0.2, 1);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px var(--ink-800), 0 14px 30px -10px rgba(0, 0, 0, 0.6);
}
.roleta-centro { width: 72px; height: 72px; border-radius: 50%; background: var(--ink-900); display: grid; place-items: center; box-shadow: 0 0 0 4px var(--ink-800); }
.roleta-centro img { width: 44px; height: 44px; }
.roleta-legenda { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.roleta-legenda span { font: 700 12px var(--font-body); padding: 6px 12px; border-radius: 999px; color: var(--text); }

/* Cooperativo */
.meta-time-bloco { margin-bottom: 16px; }
.meta-time-barra { height: 10px; background: rgba(255, 255, 255, 0.14); border-radius: 999px; overflow: hidden; margin-top: 6px; }
.meta-time-barra > div { width: 100%; height: 100%; background: var(--hit); border-radius: 999px; transform-origin: left center; transition: transform 0.5s var(--ease-out); }
.vez-de-tarja { background: var(--zap); color: var(--zap-ink); font: 800 14px var(--font-body); padding: 9px 16px; border-radius: 999px; width: fit-content; margin: 0 0 16px; }

/* Fim de jogo */
.jogo-fim { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; flex: 1; justify-content: center; }
.fim-icone { width: 88px; height: 88px; border-radius: 50%; background: var(--zap); color: var(--zap-ink); display: grid; place-items: center; }
.fim-icone .ic { width: 42px; height: 42px; }
.jogo-fim-titulo { font: 900 clamp(30px, 9vw, 38px) / 0.98 var(--font-display); font-variation-settings: "wdth" 80; text-transform: uppercase; }
.jogo-fim .subtitulo { margin: 0; }
.jogo-fim-stats { display: flex; gap: 0; margin: 14px 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--ink-950); width: 100%; }
.jogo-fim-stats .jogo-placar-item { flex: 1; padding: 16px 6px 12px; }
.jogo-fim-stats .seg { --seg: 40px; }
.jogo-fim-acoes { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: 8px; }

/* ---------- Resultado (campo de cor cheio) ---------- */
.tela-resultado { background: var(--ink-900); position: relative; overflow: hidden; color: var(--text); }
.resultado-titulo { font: 900 clamp(36px, 10.5vw, 46px) / 0.94 var(--font-display); font-variation-settings: "wdth" 74; text-transform: uppercase; margin: 0 0 22px; text-wrap: balance; color: var(--text); }
.comparativo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.comparativo .lado { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.comparativo .nome-duelista { color: var(--text-2); font-size: 14px; }
.comparativo .vs-texto { color: var(--text-3); }
.comparativo .placar .seg { --seg: 52px; color: var(--text); }
.comparativo .placar.b .seg { color: var(--text-2); }
.streak-linha { display: flex; align-items: center; gap: 4px; align-self: center; background: var(--ink-950); color: var(--text); padding: 11px 18px; border-radius: 999px; font: 800 15px var(--font-body); margin-bottom: 24px; }
.streak-linha .ic { width: 20px; height: 20px; }
.acoes-resultado { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.acoes-bloco { display: flex; flex-direction: column; gap: 12px; }
.tela-resultado .botao-secundario { color: var(--text-2); box-shadow: inset 0 0 0 2px var(--line); }

/* ---------- Navegação principal ---------- */
.nav-abas {
  position: sticky; bottom: 0; z-index: 30; display: flex;
  background: var(--ink-950); border-top: 1px solid var(--line);
  padding: 4px 8px calc(4px + env(safe-area-inset-bottom));
}
.nav-aba {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 62px;
  background: none; border: 0; color: var(--text-3); font: 700 11px var(--font-body); position: relative; cursor: pointer;
  transition: color 0.15s;
}
.nav-aba .ic { width: 26px; height: 26px; }
.nav-aba:hover { color: var(--text-2); }
.nav-aba.ativa { color: var(--zap); }
.nav-aba.ativa::before { content: ""; position: absolute; top: 0; width: 30px; height: 3px; border-radius: 0 0 3px 3px; background: var(--zap); }
.nav-aba.ativa .ic { fill: currentColor; }
/* ---------- Tema claro (ar de app leve; cor só em doses) ---------- */
.topo-app { background: var(--nav); }
.topo-streak { background: none; padding: 0; border-radius: 0; min-height: 38px; color: var(--text-2); }
.nav-abas { background: var(--nav); }
.nav-aba { color: var(--text-3); }
.nav-aba:hover { color: var(--text-2); }
.nav-aba.ativa { color: var(--text); }
.nav-aba.ativa::before { background: var(--text); }

.botao-primario { background: var(--violet-600); color: #fff; box-shadow: 0 10px 22px -10px rgba(91, 16, 184, 0.7); }
.botao-primario:active { box-shadow: 0 4px 10px -6px rgba(91, 16, 184, 0.55); }
.botao-primario:disabled { background: var(--ink-700); color: var(--text-3); box-shadow: none; }
.tela-amigos .botao-primario {
  background: var(--zap); color: var(--zap-ink); box-shadow: 0 10px 24px -10px rgba(255, 225, 77, 0.6);
}
.botao-secundario { color: var(--violet-700); box-shadow: inset 0 0 0 2px rgba(91, 16, 184, 0.4); }
.botao-secundario:hover { box-shadow: inset 0 0 0 2px rgba(91, 16, 184, 0.75); }
.tela-amigos .botao-secundario { color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45); }
.botao-perigo { color: var(--text-2); background: transparent; box-shadow: inset 0 0 0 2px var(--line); }

.tela-amigos { color: #fff; }
input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="search"] { border-color: rgba(21, 10, 46, 0.12); }
input:hover { border-color: rgba(91, 16, 184, 0.4); }
input:focus, input:focus-visible { border-color: var(--violet-600); }
.link-esqueci-senha { color: var(--violet-700); }
.erro-auth { color: var(--error); background: rgba(255, 77, 141, 0.14); }
.erro-auth.ok { color: var(--success); background: rgba(47, 230, 130, 0.16); }
.tela-amigos .erro-auth.ok { color: #B7F7D4; background: rgba(21, 11, 46, 0.35); }

.jogo-placar-linha, .jogo-fim-stats { background: var(--panel); border-color: rgba(255, 255, 255, 0.06); }
.jogo-placar-item { border-right-color: rgba(255, 255, 255, 0.12); }
.jogo-placar-rotulo, .placar-rotulo { color: #CDBFF7; }
.streak-linha { background: var(--panel); }
.pontos-duelista { background: var(--panel); padding: 6px 14px; border-radius: 14px; }

.texto-pergunta, .jogo-pergunta, .vf-resposta-proposta { color: var(--text); }
.opcao-duelo { box-shadow: 0 1px 0 rgba(21, 10, 46, 0.05); }
.opcao-duelo:hover:not(:disabled) { border-color: rgba(91, 16, 184, 0.5); }
.letra { border-color: #B9AEDD; }
.opcao-duelo.correta { border-color: #1FBF6B; background: rgba(47, 230, 130, 0.16); }
.opcao-duelo.errada { border-color: #E23A7A; background: rgba(255, 77, 141, 0.12); }
.segmentos span { background: rgba(21, 10, 46, 0.14); }
.segmentos span.feito { background: var(--violet-600); }
.segmentos span.atual { background: var(--violet-400); }
.barra-progresso { background: rgba(21, 10, 46, 0.1); }
.barra-progresso > div { background: var(--violet-600); }
.meta-time-barra { background: rgba(21, 10, 46, 0.1); }
.jogo-explicacao.certa { color: var(--success); background: rgba(47, 230, 130, 0.18); }
.jogo-explicacao.errada { color: var(--error); background: rgba(255, 77, 141, 0.14); }
.memoria-carta.acertada { color: var(--success); background: rgba(47, 230, 130, 0.18); }
.vf-afirmacao-bloco { box-shadow: 0 0 0 1px var(--line); }
.pista-trilha { box-shadow: inset 0 0 0 1px var(--line); }
.pista-bandeira { color: var(--violet-600); }
.vez-de-tarja { background: var(--violet-600); color: #fff; }

.pilula, .pilula-selecao, .voltar, .continuar, .filtro-chip { box-shadow: 0 1px 0 rgba(21, 10, 46, 0.05); }
.filtro-chip.ativo { background: var(--text); border-color: var(--text); color: #fff; }
.anel { background: var(--ink-700); }
.miolo { background: var(--ink-800); color: var(--violet-600); }
.anel.multi .miolo { color: #D2409F; }
.item-materia .selo { box-shadow: 0 0 0 1px var(--line); }

.perfil-nome { color: var(--text); }

/* ---------- Tablet ---------- */
@media (min-width: 600px) and (max-width: 899px) {
  #app { max-width: 620px; }
  .tela { padding-left: 32px; padding-right: 32px; }
}

/* ---------- Desktop: barra lateral, conteúdo largo ---------- */
@media (min-width: 900px) {
  body { background: var(--ink-900); }
  #app { max-width: none; box-shadow: none; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; background: var(--ink-900); }
  #app.com-nav { grid-template-columns: 272px 1fr; }
  #app > .tela { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
  #app.com-nav > .tela { grid-column: 2; }

  .topo-app { grid-column: 1 / -1; grid-row: 1; padding: 14px 40px; }
  .topo-marca-app img { width: 36px; height: 36px; }
  .topo-streak .seg { --seg: 26px; }

  .nav-abas {
    grid-column: 1; grid-row: 2; position: sticky; top: 69px; align-self: start; height: calc(100dvh - 69px);
    flex-direction: column; justify-content: flex-start; gap: 6px; padding: 24px 16px;
    border-top: 0; border-right: 0; background: var(--violet-600);
  }
  .nav-aba { flex: none; flex-direction: row; justify-content: flex-start; gap: 14px; min-height: 54px; padding: 0 18px; border-radius: 16px; font-size: 16px; color: rgba(255, 255, 255, 0.7); }
  .nav-aba .ic { width: 24px; height: 24px; }
  .nav-aba:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
  .nav-aba.ativa { background: var(--ink-800); color: var(--text); }
  .nav-aba.ativa::before { display: none; }

  .tela { padding: 40px 48px 64px; }
  .tela-objetivo, .tela-hub, .tela-perfil, #tela-serie, #tela-materias, #tela-assuntos, #tela-configuracoes { max-width: 1120px; width: 100%; margin: 0 auto; }
  .titulo-grande { font-size: clamp(34px, 3.2vw, 44px); }
  .subtitulo { font-size: 18px; }

  .tela-objetivo .titulo-grande { font-size: clamp(38px, 3.6vw, 52px); margin-bottom: 28px; }
  .continuar { max-width: 560px; margin-top: 20px; }

  #tela-configuracoes { max-width: 640px; }
  #tela-serie, #tela-materias, #tela-assuntos { max-width: 760px; }

  /* amigos */
  .tela-amigos { align-items: flex-start; justify-content: center; padding: 48px 8vw; }
  .tela-amigos > * { max-width: 520px; width: 100%; }
  .tela-amigos .titulo-grande { font-size: clamp(54px, 5vw, 72px); }
  .tela-amigos .botao-primario { margin-top: 12px; }

  /* jogo, duelo e resultado: quadro central mais largo */
  .tela-quadro { max-width: 760px; width: 100%; margin: 0 auto; padding-top: 28px; }
  .texto-pergunta, .jogo-pergunta { font-size: clamp(21px, 1.9vw, 26px); }
  .opcao-duelo { min-height: 66px; font-size: 17px; }
  .pontos-duelista .seg { --seg: 44px; }
  .tela-resultado { align-items: center; justify-content: center; }
  .tela-resultado > * { width: 100%; max-width: 640px; }
  .comparativo .placar .seg { --seg: 72px; }
  .resultado-titulo { font-size: clamp(44px, 4vw, 60px); }
}

/* ---------- Desktop: cores da barra lateral (depois do bloco desktop, pra vencer) ---------- */
@media (min-width: 900px) {
  .nav-aba { color: #fff; }
  .nav-abas :focus-visible { outline-color: #fff; }
  .nav-aba:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
  .nav-aba.ativa { background: rgba(255, 255, 255, 0.24); color: #fff; }
}

/* ---------- Tempo acabando ---------- */
.barra-progresso.urgente > div { background: var(--danger); }
.texto-tempo.urgente { color: var(--danger); font-weight: 800; animation: pulsa 0.5s ease-in-out infinite alternate; }
.jogo-placar-valor.urgente { color: #FF8DBB; animation: pulsa 0.5s ease-in-out infinite alternate; }
@keyframes pulsa { from { opacity: 1; } to { opacity: 0.55; } }

/* ---------- Folha de confirmação (no lugar do confirm nativo) ---------- */
.folha { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; background: rgba(30, 17, 69, 0.45); animation: entra-folha 0.2s ease-out; }
.folha-caixa { width: 100%; max-width: 480px; background: var(--ink-800); color: var(--text); border-radius: 28px 28px 0 0; padding: 26px 22px calc(22px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; animation: sobe-folha 0.3s var(--ease-out); }
.folha-caixa h2 { font: 800 24px / 1.12 var(--font-display); font-variation-settings: "wdth" 92; margin: 0; }
.folha-caixa p { margin: 0 0 8px; color: var(--text-2); font: 500 16px / 1.4 var(--font-body); }
.folha-caixa .botao-primario.perigo { background: var(--danger); color: #fff; box-shadow: none; }
@media (min-width: 600px) { .folha { align-items: center; } .folha-caixa { border-radius: 28px; max-width: 420px; } }
@keyframes entra-folha { from { opacity: 0; } to { opacity: 1; } }
@keyframes sobe-folha { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- XP e níveis ---------- */
.nivel-selo { background: var(--violet-600); color: #fff; font: 800 14px / 1 var(--font-body); padding: 8px 14px; border-radius: 999px; }
.xp-trilho { width: min(260px, 80%); height: 10px; border-radius: 999px; background: var(--ink-700); overflow: hidden; }
.xp-trilho > div { height: 100%; width: 100%; background: var(--violet-600); border-radius: 999px; transform-origin: left; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.xp-selo { display: inline-block; margin: 6px auto 0; padding: 8px 16px; border-radius: 999px; font: 800 15px / 1 var(--font-body); background: var(--panel); color: var(--zap); }
.xp-selo.subiu { background: var(--zap); color: var(--zap-ink); animation: pulsa 0.9s ease 2; }
.tela-resultado .xp-selo { display: block; width: max-content; margin: 10px auto; background: var(--violet-600); color: #fff; }

/* ---------- Social ---------- */
.perfil-arroba { color: var(--text-2); font: 700 15px var(--font-body); margin-top: -4px; }
.perfil-arroba:empty { display: none; }
.avatar-circulo { overflow: hidden; }
.avatar-circulo img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.3s ease; }
.avatar-circulo img.ok { opacity: 1; }
.avatar-circulo.mini { width: 46px; height: 46px; font-size: 19px; flex: none; }
.social-contagem { display: flex; justify-content: center; gap: 22px; margin: -8px 0 18px; color: var(--text-2); font: 600 14px var(--font-body); }
.social-contagem button { background: none; border: 0; color: inherit; font: inherit; min-height: 44px; padding: 0 6px; cursor: pointer; }
.social-contagem b { color: var(--text); font-weight: 800; }
.tela-social .botao-primario, .tela-social .botao-secundario { margin-top: auto; }
.abas-social { display: flex; gap: 8px; margin: 4px 0 14px; flex-wrap: wrap; }
.busca-usuario { margin-bottom: 12px; }
.busca-usuario[hidden] { display: none; }
.lista-social { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.linha-usuario { display: flex; align-items: center; gap: 10px; background: var(--ink-800); border-radius: 18px; padding: 8px 10px 8px 8px; box-shadow: 0 0 0 1px var(--line); }
.linha-usuario-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; background: none; border: 0; text-align: left; color: var(--text); cursor: pointer; min-height: 48px; }
.linha-usuario-txt { display: flex; flex-direction: column; min-width: 0; }
.linha-usuario-txt b { font: 800 15px var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-usuario-txt small { color: var(--text-2); font: 600 12px var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.botao-seguir { flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--violet-600); color: #fff; font: 800 13px var(--font-body); cursor: pointer; }
.botao-seguir.seguindo { background: transparent; color: var(--violet-700); box-shadow: inset 0 0 0 2px rgba(91, 16, 184, 0.4); }
.botao-seguir:hover { opacity: 0.85; }
.botao-seguir:active { transform: scale(0.95); }
.botao-seguir:disabled { opacity: 0.6; }
.social-vazio { color: var(--text-2); text-align: center; font: 500 14px / 1.4 var(--font-body); padding: 28px 12px; }
@media (min-width: 900px) { .tela-social { max-width: 640px; margin-inline: auto; width: 100%; } .tela-legal { max-width: 720px; margin-inline: auto; width: 100%; } }

/* ---------- Social 2 ---------- */
.link-trocar-foto { background: none; border: 0; color: var(--violet-700); font: 700 14px var(--font-body); min-height: 44px; padding: 0 12px; cursor: pointer; text-decoration: underline; }
.linha-usuario.eu { box-shadow: 0 0 0 2px var(--violet-600); }
.linha-usuario.desafio { padding: 14px 14px; }
.linha-usuario.desafio .linha-usuario-txt { flex: 1; }
.linha-usuario.desafio.pendente { box-shadow: 0 0 0 2px var(--violet-400); }
.mais-opcoes { margin-top: 22px; color: var(--text-2); }
.mais-opcoes summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font: 700 14px var(--font-body); }
.mais-opcoes[hidden] { display: none; }
.mais-opcoes label { display: block; font: 700 13px var(--font-body); margin: 8px 0 6px; }
.mais-opcoes select { width: 100%; min-height: 48px; border-radius: 14px; border: 2px solid var(--line); background: var(--ink-800); color: var(--text); font: 600 15px var(--font-body); padding: 0 12px; margin-bottom: 12px; }
.mais-opcoes .botao-secundario, .mais-opcoes .botao-perigo { margin-bottom: 10px; margin-top: 0; }
.link-excluir { display: block; margin: 18px auto 0; background: none; border: 0; color: var(--text-3); font: 600 13px var(--font-body); text-decoration: underline; min-height: 44px; cursor: pointer; }
.link-excluir:hover { color: var(--miss); }
.escolher { max-height: 46vh; overflow-y: auto; margin: 12px 0; }
.escolher-item { width: 100%; text-align: left; cursor: pointer; border: 0; color: var(--text); }
#bloco-compartilhar { flex-direction: column; gap: 10px; }

/* ---------- Cartão de story ---------- */
.story-previa { align-self: center; max-height: 46vh; width: auto; aspect-ratio: 9 / 16; border-radius: 18px; box-shadow: 0 0 0 1px var(--line); }
.tela-perfil .botao-secundario { margin-top: 16px; }
.tela-perfil #btn-perfil-story + .botao-primario { margin-top: 12px; }

/* ---------- Legal e campo da folha ---------- */
.tela-legal h2 { font: 800 18px var(--font-body); margin: 22px 0 6px; }
.tela-legal p { color: var(--text-2); font: 500 15px / 1.5 var(--font-body); margin: 0 0 6px; }
.tela-legal .legal-data { color: var(--text-3); font-size: 13px; }
.legal-aviso { color: var(--violet-tint); font: 500 13px / 1.5 var(--font-body); margin: 16px 0 4px; text-align: center; }
.link-legal { background: none; border: 0; padding: 0; min-height: 44px; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.legal-aviso .link-legal { min-height: 0; display: inline; line-height: 1.5; }
.links-legais { display: flex; justify-content: center; gap: 22px; margin-top: 18px; }
.links-legais .link-legal { color: var(--text-2); font-size: 13px; }
.folha-input { min-height: 52px; }
.folha-caixa .botao-secundario { margin-top: 0; }

/* ---------- Topo: lupa, som ---------- */
.topo-acoes { display: flex; align-items: center; gap: 6px; }
.topo-icone { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
.topo-icone:hover { background: var(--ink-700); }
.topo-icone .ic { width: 22px; height: 22px; }
.nav-aba.novo::after { content: ""; position: absolute; top: 6px; left: calc(50% + 10px); width: 10px; height: 10px; border-radius: 50%; background: var(--miss); box-shadow: 0 0 0 2px var(--nav); }


/* ---------- Busca ---------- */
.busca-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.busca-topo .voltar { margin-bottom: 0; flex: none; }
.busca-topo input { flex: 1; margin: 0; }
.sugestoes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sugestoes[hidden] { display: none; }
.resultado-busca { background: var(--ink-800); border-radius: 18px; padding: 14px; box-shadow: 0 0 0 1px var(--line); margin-bottom: 8px; }
.resultado-busca small { color: var(--violet-700); font: 700 12px var(--font-body); }
.resultado-busca p { margin: 6px 0 8px; font: 600 15px / 1.4 var(--font-body); color: var(--text); }
.resultado-busca summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--violet-700); font: 700 14px var(--font-body); }
.resultado-busca details b { display: block; color: var(--success); font: 700 15px var(--font-body); padding-bottom: 4px; }
.treinar-assunto { margin: 0 0 8px; min-height: 48px; font-size: 14px; }
.card-ia { display: flex; align-items: center; gap: 14px; background: var(--violet-600); color: #fff; border-radius: 22px; padding: 16px; margin: 18px 0; }
.card-ia[hidden] { display: none; }
.card-ia img { width: 54px; height: 54px; flex: none; }
.card-ia div { flex: 1; min-width: 0; }
.card-ia b { display: block; font: 800 16px var(--font-body); }
.card-ia small { color: rgba(255, 255, 255, 0.78); font: 500 13px / 1.3 var(--font-body); }
.card-ia .botao-primario { width: auto; min-height: 44px; padding: 0 16px; margin: 0; background: var(--zap); color: var(--zap-ink); box-shadow: none; font-size: 14px; }
.resposta-ia { background: var(--ink-800); border-radius: 18px; padding: 16px; box-shadow: 0 0 0 1px var(--line); font: 500 15px / 1.5 var(--font-body); white-space: pre-wrap; }
.resposta-ia[hidden] { display: none; }

/* ---------- Game feel: combo, confete, tremida ---------- */
.combo-pop { position: fixed; top: 26%; left: 50%; z-index: 95; transform: translateX(-50%); pointer-events: none; background: var(--zap); color: var(--zap-ink); font: 900 30px var(--font-display); font-variation-settings: "wdth" 80; text-transform: uppercase; padding: 10px 22px; border-radius: 999px; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.35); animation: combo-sobe 1s ease-out forwards; }
@keyframes combo-sobe { 0% { opacity: 0; transform: translateX(-50%) scale(0.5); } 20% { opacity: 1; transform: translateX(-50%) scale(1.18); } 35% { transform: translateX(-50%) scale(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-40px) scale(1); } }
.confete { position: fixed; inset: 0; z-index: 96; pointer-events: none; overflow: hidden; }
.confete i { position: absolute; top: -14px; width: 9px; height: 15px; border-radius: 2px; animation: confete-cai linear forwards; }
@keyframes confete-cai { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--desvio), 105vh) rotate(var(--gira)); opacity: 0.9; } }
.tela.treme { animation: tremer 0.3s ease; }
@keyframes tremer { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.seg.slam { animation: seg-slam 0.35s var(--ease-out); }
@keyframes seg-slam { 0% { transform: scale(0.7); opacity: 0.4; } 50% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.jogo-fim.perfeito .fim-icone { background: linear-gradient(135deg, var(--zap), #FF4D8D); animation: giro-perfeito 2s linear infinite; }
@keyframes giro-perfeito { 0% { box-shadow: 0 0 20px rgba(255, 225, 77, 0.5); } 50% { box-shadow: 0 0 35px rgba(255, 77, 141, 0.5); } 100% { box-shadow: 0 0 20px rgba(255, 225, 77, 0.5); } }
.jogo-fim.perfeito .jogo-fim-titulo { background: linear-gradient(90deg, var(--zap), #FF4D8D, var(--zap)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: brilho-texto 2s linear infinite; }
@keyframes brilho-texto { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

/* ---------- Feed e cronômetro ---------- */
.lista-feed { display: flex; flex-direction: column; gap: 10px; }
.post { background: var(--ink-800); border-radius: 22px; padding: 14px; box-shadow: 0 0 0 1px var(--line); }
.post-topo { display: flex; align-items: center; gap: 12px; background: none; border: 0; padding: 0; color: var(--text); text-align: left; cursor: pointer; min-height: 48px; width: 100%; }
.kudos { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--ink-700); color: var(--text-2); font: 800 14px var(--font-body); cursor: pointer; }
.kudos .ic { width: 20px; height: 20px; }
.kudos.ativo { background: var(--violet-600); color: #fff; }
.kudos:hover { opacity: 0.8; }
.kudos:active { transform: scale(0.95); }
.kudos:disabled { opacity: 0.6; }
@media (min-width: 900px) { .tela-feed { max-width: 640px; margin-inline: auto; width: 100%; } }

/* ---------- Marca ---------- */
.wordmark, .topo-marca-app img.wordmark, .auth-marca img.wordmark { display: block; width: auto; height: 24px; max-width: none; }
.wordmark.grande, .auth-marca img.wordmark.grande { height: 40px; }
.pino { display: block; width: 16px; height: 16px; border-radius: 50%; background: #fff; }

/* ---------- Fase 1: nav, semana, explorar ---------- */
.nav-registrar { flex: 1; }
.nav-registrar::before { display: none; }
.nav-mais { width: 52px; height: 52px; border-radius: 50%; background: var(--violet-600); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 22px -10px rgba(91, 16, 184, 0.7); transform: translateY(-8px); }
.nav-mais .ic { width: 26px; height: 26px; }
.nav-rotulo-reg { display: none; }
@media (min-width: 900px) {
  .nav-registrar { flex: none; flex-direction: row; justify-content: flex-start; gap: 14px; }
  .nav-mais { width: 34px; height: 34px; transform: none; background: var(--zap); color: var(--zap-ink); box-shadow: none; }
  .nav-mais .ic { width: 20px; height: 20px; }
  .nav-rotulo-reg { display: inline; }
}
.perfil-bio { max-width: 34ch; color: var(--text-2); font: 500 15px / 1.4 var(--font-body); margin: 0; }
.semana-card { background: var(--ink-800); border-radius: 22px; padding: 16px; box-shadow: 0 0 0 1px var(--line); margin-bottom: 12px; }
.semana-resumo { margin: 0 0 14px; color: var(--text-2); font: 600 14px var(--font-body); }
.semana-resumo b { color: var(--text); }
.semana-grafico { display: flex; gap: 8px; align-items: flex-end; height: 110px; }
.barra-dia { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.barra-dia-col { flex: 1; width: 100%; display: flex; align-items: flex-end; background: var(--ink-700); border-radius: 8px; overflow: hidden; }
.barra-dia-col i { display: block; width: 100%; background: var(--violet-600); border-radius: 8px; }
.barra-dia-col i.vazia { background: transparent; }
.barra-dia span { color: var(--text-3); font: 700 11px var(--font-body); }
.busca-falsa { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; margin-bottom: 12px; background: var(--ink-800); border: 0; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); color: var(--text-3); font: 600 16px var(--font-body); text-align: left; cursor: pointer; }
.busca-falsa:hover { box-shadow: 0 0 0 1px var(--text-3); }
.busca-falsa:active { transform: scale(0.99); }
.busca-falsa .ic { width: 22px; height: 22px; }
.sub-titulo { font: 800 18px var(--font-body); margin: 22px 0 10px; }
.opcao-registrar { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 14px; background: var(--ink-900); border: 0; border-radius: 18px; color: var(--text); text-align: left; cursor: pointer; }
.opcao-registrar .ic { width: 30px; height: 30px; color: var(--violet-600); flex: none; }
.opcao-registrar b { display: block; font: 800 16px var(--font-body); }
.opcao-registrar:hover { background: var(--ink-950); }
.opcao-registrar:active { transform: scale(0.98); }
.opcao-registrar small { color: var(--text-2); font: 500 13px var(--font-body); }
textarea { width: 100%; border: 2px solid var(--line); border-radius: 14px; background: var(--ink-800); color: var(--text); font: 500 16px / 1.4 var(--font-body); padding: 12px 14px; resize: vertical; margin-bottom: 12px; }
textarea:focus-visible { border-color: var(--violet-600); }
input[type="date"], input[type="number"] { min-height: 52px; }
.linha-check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 12px; font: 600 14px / 1.4 var(--font-body); color: var(--text-2); }
.linha-check[hidden] { display: none; }
.linha-check input { width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; flex: none; }
@media (min-width: 900px) { .tela-clubes { max-width: 640px; margin-inline: auto; width: 100%; } }

.linha-usuario.denuncia { padding: 14px; }
.linha-usuario.denuncia.suspenso { opacity: 0.7; }
#btn-abrir-admin[hidden] { display: none; }
.tela-admin .linha-usuario-txt { flex: 1; }

.clubes-acoes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.clubes-acoes .botao-primario, .clubes-acoes .botao-secundario { margin-top: 0; }
.clube-icone { width: 46px; height: 46px; border-radius: 14px; background: var(--ink-700); color: var(--violet-600); display: grid; place-items: center; flex: none; }
.clube-icone .ic { width: 24px; height: 24px; }
.clube-codigo { display: flex; align-items: center; gap: 10px; background: var(--ink-800); border-radius: 18px; padding: 12px 14px; box-shadow: 0 0 0 1px var(--line); margin: 6px 0 14px; }
.clube-codigo span { color: var(--text-2); font: 600 13px var(--font-body); }
.clube-codigo b { flex: 1; font: 900 22px var(--font-display); letter-spacing: 0.12em; color: var(--violet-600); }
#tela-clube .link-excluir { margin-top: 24px; }
.tela-clubes h1 { overflow-wrap: anywhere; }

/* ---------- Onboarding ---------- */
.onb-passos { display: flex; gap: 8px; margin-bottom: 26px; }
.onb-passos i { flex: 1; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.25); }
.onb-passos i.feito { background: #fff; }
.onb-passo[hidden] { display: none; }
.onb-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 24px; }
.onb-chip { min-height: 48px; padding: 0 20px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.4); background: transparent; color: #fff; font: 700 15px var(--font-body); cursor: pointer; }
.onb-chip.sel { background: #fff; color: var(--violet-700); border-color: #fff; }
#tela-onboarding .botao-primario { margin-top: auto; }
#tela-onboarding .botao-secundario { margin-bottom: 10px; }

/* ---------- Detalhe e ao vivo ---------- */
.post[data-detalhe] { cursor: pointer; }
.tela-atividade .post-topo { margin-bottom: 8px; }
.tela-atividade .kudos { margin-bottom: 10px; }
@keyframes pulsa-vivo { 50% { opacity: 0.35; } }
@media (min-width: 900px) { .tela-atividade { max-width: 640px; margin-inline: auto; width: 100%; } }

/* ---------- Desafios do clube ---------- */
.linha-titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.linha-titulo .botao-seguir[hidden] { display: none; }
.desafio-clube { background: var(--ink-800); border-radius: 18px; padding: 14px; box-shadow: 0 0 0 1px var(--line); }
.desafio-clube.encerrado { opacity: 0.6; }
.desafio-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.desafio-topo b { font: 800 16px var(--font-body); }
.desafio-x { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--ink-700); color: var(--text-2); font: 700 18px var(--font-body); cursor: pointer; }
.desafio-x:hover { background: var(--ink-950); color: var(--text); }
.desafio-clube small { display: block; color: var(--text-2); font: 600 12px / 1.4 var(--font-body); margin: 4px 0 10px; }
.desafio-barra { width: 100%; height: 10px; }
.desafio-meu { display: block; margin-top: 8px; color: var(--violet-700); font: 800 13px var(--font-body); }
select.folha-input { width: 100%; border: 2px solid var(--line); border-radius: 14px; background: var(--ink-800); color: var(--text); font: 600 16px var(--font-body); padding: 0 12px; }

/* ---------- Prova, métricas, offline ---------- */
.prova-faixa { background: var(--violet-600); color: #fff; border-radius: 18px; padding: 12px 14px; margin-bottom: 14px; font: 500 14px / 1.4 var(--font-body); }
.prova-faixa[hidden] { display: none; }
.prova-faixa b { font-weight: 800; }
.metricas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 8px; }
.metrica { background: var(--ink-800); border-radius: 16px; padding: 14px; box-shadow: 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 4px; }
.metrica b { font: 900 28px var(--font-display); color: var(--violet-600); }
.metrica span { color: var(--text-2); font: 600 12px var(--font-body); }
.aviso-offline { position: fixed; top: 0; left: 0; right: 0; z-index: 120; background: var(--text); color: #fff; text-align: center; padding: 10px 14px; font: 600 13px var(--font-body); }
.aviso-offline[hidden] { display: none; }

/* ---------- XP toast flutuante ---------- */
.xp-toast { position: fixed; top: 72px; left: 50%; transform: translateX(-50%); z-index: 200; pointer-events: none; display: flex; align-items: center; gap: 8px; background: var(--text); color: #fff; padding: 8px 18px; border-radius: 999px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); animation: xp-toast-anim 2s ease-out forwards; }
.xp-toast-valor { font: 800 15px var(--font-body); color: #fff; text-shadow: none; }
.xp-toast-nivel { font: 700 13px var(--font-body); color: rgba(255, 255, 255, 0.8); background: none; padding: 0; border-radius: 0; }
@keyframes xp-toast-anim {
  0% { opacity: 0; transform: translateX(-50%) translateY(-12px); }
  12% { opacity: 1; transform: translateX(-50%) translateY(0); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-8px); }
}

/* ---------- Toast geral (não-bloqueante) ---------- */
.app-toast { position: fixed; bottom: calc(76px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 200; padding: 10px 20px; border-radius: 12px; font: 600 14px / 1.3 var(--font-body); color: #fff; background: var(--text); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); animation: toast-entra 0.3s ease-out; pointer-events: none; max-width: calc(100% - 40px); text-align: center; }
.app-toast.saindo { animation: toast-sai 0.3s ease-in forwards; }
@keyframes toast-entra { from { opacity: 0; transform: translateX(-50%) translateY(12px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes toast-sai { to { opacity: 0; transform: translateX(-50%) translateY(12px); } }

/* ---------- Resumo do dia (tela fim de jogo) ---------- */
.resumo-dia { background: var(--ink-950); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-top: 4px; width: 100%; }
.resumo-dia-titulo { font: 800 11px var(--font-body); color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; text-align: center; }
.resumo-dia-items { display: flex; justify-content: space-around; }
.resumo-dia-item { text-align: center; display: flex; flex-direction: column; gap: 2px; }
.resumo-dia-item b { font: 900 20px var(--font-display); color: var(--text); display: flex; align-items: center; justify-content: center; gap: 4px; }
.resumo-dia-item b .ic { width: 18px; height: 18px; }
.resumo-dia-item small { color: var(--text-2); font: 500 11px var(--font-body); }
.meta-semanal { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.meta-semanal-titulo { font: 800 11px var(--font-body); color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; display: flex; align-items: center; gap: 4px; justify-content: center; }
.meta-semanal-titulo .ic { width: 14px; height: 14px; }
.meta-semanal-barra { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.meta-semanal-progresso { height: 100%; border-radius: 4px; background: var(--violet-600); transition: width 0.6s var(--ease-out); min-width: 2px; }
.meta-semanal-texto { font: 700 12px var(--font-body); color: var(--text-2); text-align: center; margin-top: 4px; }

/* ---------- Estados vazios com CTA ---------- */
.social-vazio .vazio-cta { display: flex; gap: 10px; margin-top: 8px; justify-content: center; flex-wrap: wrap; }
.social-vazio .vazio-cta .botao-primario, .social-vazio .vazio-cta .botao-secundario { font-size: 13px; padding: 10px 18px; min-height: 40px; }

/* ---------- Hub Treinar (novo) ---------- */
.card-duelo { width: 100%; display: flex; align-items: center; gap: 14px; background: var(--violet-600); color: #fff; border: 0; border-radius: 22px; padding: 18px 16px; text-align: left; cursor: pointer; margin: 6px 0 4px; }
.card-duelo-icone { width: 46px; height: 46px; border-radius: 14px; background: rgba(255, 255, 255, 0.16); display: grid; place-items: center; flex: none; color: var(--zap); }
.card-duelo-icone .ic { width: 26px; height: 26px; }
.card-duelo-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.card-duelo-texto b { font: 800 18px var(--font-body); }
.card-duelo-texto small { color: rgba(255, 255, 255, 0.78); font: 500 13px / 1.35 var(--font-body); }
.card-duelo:hover { opacity: 0.9; }
.card-duelo:active { transform: scale(0.98); }
.card-duelo-seta .ic { width: 22px; height: 22px; }
.tela-hub .sub-titulo { margin: 22px 0 6px; color: var(--text-3); font: 800 12px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.tela-hub .grade-jogos { display: block; }
@media (min-width: 900px) {
  .tela-hub.ativa { display: block; max-width: 640px; margin-inline: auto; width: 100%; }
}

/* ---------- Configurações em menu ---------- */
.config-resumo { display: flex; align-items: center; gap: 12px; background: var(--ink-800); border-radius: 20px; padding: 14px; box-shadow: 0 0 0 1px var(--line); margin: 4px 0 16px; }
.menu-config { display: flex; flex-direction: column; background: var(--ink-800); border-radius: 22px; box-shadow: 0 0 0 1px var(--line); overflow: hidden; margin-bottom: 18px; }
.menu-linha { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 16px; background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; color: var(--text); cursor: pointer; }
.menu-linha:last-child { border-bottom: 0; }
.menu-linha[hidden] { display: none; }
.menu-linha > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.menu-linha b { font: 800 16px var(--font-body); }
.menu-linha small { color: var(--text-2); font: 500 13px / 1.3 var(--font-body); }
.menu-linha:hover { background: var(--ink-950); }
.menu-linha:active { background: var(--ink-700); }
.menu-linha .seta { width: 20px; height: 20px; color: var(--text-3); flex: none; }
[data-grupo][hidden] { display: none !important; }
.info-conta { display: flex; flex-direction: column; gap: 10px; }
.info-linha { display: flex; justify-content: space-between; gap: 12px; font: 600 14px var(--font-body); color: var(--text-2); }
.info-linha b { color: var(--text); font-weight: 700; overflow-wrap: anywhere; text-align: right; }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { min-height: 52px; display: flex; align-items: center; cursor: pointer; font: 700 15px var(--font-body); color: var(--text); }
.faq p { margin: 0 0 14px; color: var(--text-2); font: 500 14px / 1.5 var(--font-body); }
#tela-config-menu .botao-perigo { margin-top: 0; }
@media (min-width: 900px) { .tela-config-menu, #tela-configuracoes { max-width: 640px; margin-inline: auto; width: 100%; } }
.reduzir-mov *, .reduzir-mov *::before, .reduzir-mov *::after { animation: none !important; transition: none !important; }

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .sk, .combo-pop, .confete i, .ao-vivo .ponto, .tela.treme, .tela.ativa, .jogo-explicacao, .opcao-duelo.correta, .opcao-duelo.errada, .seg.slam, .folha, .folha-caixa, .texto-tempo.urgente, .jogo-placar-valor.urgente, .lista-feed .post { animation: none; }
  .roleta-roda, .pista-avatar, .barra-progresso > div, .meta-time-barra > div, .item-materia { transition: none; }
}

.explicacao-duelo { margin-top: 14px; }
.explicacao-duelo b { font-weight: 800; }
.explicacao-continuar { margin-top: 12px; }

.atv-linha { width: 100%; text-align: left; cursor: pointer; border: 0; color: var(--text); }
.atv-linha .clube-icone { width: 40px; height: 40px; }
@media (min-width: 900px) {
  .tela-perfil.ativa { display: block; max-width: 640px; margin-inline: auto; width: 100%; }
  .tela-perfil .perfil-cartao { margin: 0 0 22px; }
}

/* ---------- Conquistas ---------- */
.selo { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 4px 0; cursor: pointer; color: var(--text); }
.selo-icone { width: 56px; height: 56px; border-radius: 50%; background: var(--violet-600); color: #fff; display: grid; place-items: center; box-shadow: inset 0 0 0 3px rgba(255, 225, 77, 0.55); transition: transform 0.15s var(--ease-out); }
.selo-icone .ic { width: 26px; height: 26px; }
.selo small { font: 700 11px / 1.2 var(--font-body); text-align: center; color: var(--text-2); }
.selo.bloqueado .selo-icone { background: var(--ink-700); color: var(--text-3); box-shadow: none; }
.selo:hover .selo-icone { transform: scale(1.08); }
.selo.bloqueado small { color: var(--text-3); }
.destaques { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.destaques:empty { display: none; }
.destaque-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--ink-700); color: var(--violet-700); border-radius: 999px; padding: 6px 12px 6px 8px; font: 800 12px var(--font-body); }
.destaque-chip .ic { width: 16px; height: 16px; color: var(--violet-600); }

/* ---------- Avisos ---------- */
.topo-icone { position: relative; }
.badge-aviso { position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--miss); color: #fff; font: 800 11px / 18px var(--font-body); text-align: center; }
.badge-aviso[hidden] { display: none; }
.aviso { width: 100%; text-align: left; cursor: pointer; border: 0; color: var(--text); padding: 12px 14px; }
.aviso.novo { box-shadow: 0 0 0 2px var(--violet-400); }
.aviso .aviso-txt { font: 600 14px / 1.35 var(--font-body); white-space: normal; }
.aviso .aviso-txt b { font-weight: 800; }
.atv-trofeu { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--violet-600); color: var(--zap); margin: 0 auto; }
.atv-trofeu .ic { width: 44px; height: 44px; }
@media (max-width: 520px) { #btn-som { display: none; } }
@media (min-width: 900px) { .tela-avisos, .tela-admin { max-width: 640px; margin-inline: auto; width: 100%; } }

/* ---------- Esqueletos de carregamento ---------- */
.esqueleto { pointer-events: none; }
.sk { display: block; border-radius: 10px; background: linear-gradient(90deg, var(--ink-700) 25%, var(--ink-900) 50%, var(--ink-700) 75%); background-size: 200% 100%; animation: brilho-sk 1.3s linear infinite; }
.sk-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sk-topo > span { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.sk-avatar { width: 46px; height: 46px; border-radius: 50%; flex: none; }
.sk-linha { height: 16px; width: 90%; margin-bottom: 10px; }
.sk-linha.curta { width: 45%; margin: 0; }
.sk-linha.mini { width: 30%; height: 12px; margin: 0; }
.sk-botao { width: 84px; height: 44px; border-radius: 999px; }
@keyframes brilho-sk { to { background-position: -200% 0; } }
#btn-feed-mais { margin-top: 6px; }
.explic-txt { display: block; line-height: 1.45; }

/* ---------- Revisão de perguntas ---------- */
.lista-rascunhos { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.rascunho { background: var(--ink-800); border-radius: 18px; padding: 14px; box-shadow: 0 0 0 1px var(--line); }
.rascunho small { color: var(--violet-700); font: 700 12px var(--font-body); }
.rascunho-q { margin: 6px 0 8px; font: 700 15px / 1.4 var(--font-body); }
.rascunho-op { margin: 0 0 8px; padding-left: 22px; color: var(--text-2); font: 500 14px / 1.5 var(--font-body); }
.rascunho-op li.certa { color: var(--success); font-weight: 800; }
.rascunho-ex { margin: 0 0 10px; padding: 10px; background: var(--ink-900); border-radius: 12px; color: var(--text-2); font: 500 13px / 1.45 var(--font-body); }
.rascunho-acoes { display: flex; gap: 8px; }

/* ---------- Polimento: estados vazios, chips, toque ---------- */
.social-vazio { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 26px 16px; }
.social-vazio p { margin: 0; max-width: 34ch; color: var(--text-2); font: 500 14px / 1.45 var(--font-body); }
.vazio-ico { width: 56px; height: 56px; border-radius: 50%; background: var(--ink-700); color: var(--violet-600); display: grid; place-items: center; }
.vazio-ico .ic { width: 26px; height: 26px; }
.desafio-x { width: 44px; height: 44px; margin: -6px -6px -6px 0; font-size: 22px; }

/* ---------- Publicar texto ---------- */
.compor { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; margin-bottom: 14px; background: var(--ink-800); border: 0; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); color: var(--text-3); font: 600 15px var(--font-body); text-align: left; cursor: pointer; }
.compor .ic { width: 22px; height: 22px; color: var(--violet-600); flex: none; }
.compor-cont { color: var(--text-3); font: 600 12px var(--font-body); }
.folha-caixa textarea { margin-bottom: 4px; }
.linha-usuario-txt small.trecho { font-style: italic; color: var(--text); white-space: normal; }

.story-abas { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.story-abas::-webkit-scrollbar { display: none; }
.story-abas .filtro-chip { flex: none; }

.comentarios { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 12px; }
.comentario { display: flex; gap: 10px; align-items: flex-start; }
.comentario-corpo { flex: 1; min-width: 0; }
.comentario-topo { display: flex; gap: 8px; align-items: baseline; }
.comentario-topo b { font: 800 14px var(--font-body); color: var(--text); }
.comentario-topo small { color: var(--text-3); font: 600 12px var(--font-body); }
.comentario p { margin: 2px 0 0; color: var(--text-2); font: 500 15px / 1.4 var(--font-body); overflow-wrap: anywhere; }
.comentario-acoes { display: flex; gap: 14px; }
.comentario-acoes .link-excluir { min-height: 32px; margin: 0; font-size: 13px; }
.form-comentario { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.form-comentario input { flex: 1; min-width: 0; }
.form-comentario .botao-primario { width: auto; min-height: 48px; padding: 0 20px; margin: 0; }
.erro-comentario { color: var(--danger); margin-top: 8px; }
.comentario .avatar-circulo.mini { width: 36px; height: 36px; font-size: 15px; }
[hidden] { display: none !important; }
h1[tabindex="-1"]:focus { outline: none; }
.tela[tabindex="-1"]:focus { outline: none; }

.stories-faixa { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 12px; margin-bottom: 4px; scrollbar-width: none; }
.stories-faixa::-webkit-scrollbar { display: none; }
.story-bolha { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 68px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--text-2); }
.story-bolha:hover { opacity: 0.75; }
.story-bolha:active { transform: scale(0.95); }
.story-bolha small { font: 700 12px var(--font-body); max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-anel { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; padding: 3px; background: var(--line); }
.story-anel.novo { background: linear-gradient(135deg, var(--violet-600), #FFE14D); }
.story-anel .avatar-circulo { width: 100%; height: 100%; border: 3px solid #fff; font-size: 20px; }
.story-mais { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; background: var(--violet-600); color: #fff; font: 800 15px / 18px var(--font-body); text-align: center; font-style: normal; border: 2px solid #fff; }
.story-viewer { position: fixed; inset: 0; z-index: 90; background: #0d0620; display: flex; align-items: center; justify-content: center; }
.story-img { max-height: 100dvh; max-width: 100vw; aspect-ratio: 9 / 16; object-fit: contain; }
.story-barras { position: absolute; top: 10px; left: 12px; right: 12px; display: flex; gap: 4px; z-index: 3; }
.story-barras i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.3); overflow: hidden; position: relative; }
.story-barras i.feito { background: #fff; }
.story-barras i.atual::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: story-tempo 5s linear forwards; }
@keyframes story-tempo { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.story-topo { position: absolute; top: 22px; left: 12px; right: 12px; display: flex; align-items: center; gap: 10px; z-index: 3; color: #fff; }
.story-quem { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.story-quem .avatar-circulo { width: 34px; height: 34px; font-size: 14px; }
.story-quem small { opacity: 0.75; font: 600 12px var(--font-body); }
.story-apagar, .story-fechar { min-height: 44px; min-width: 44px; border: 0; border-radius: 22px; background: rgba(255, 255, 255, 0.16); color: #fff; font: 800 14px var(--font-body); padding: 0 14px; cursor: pointer; }
.story-ant, .story-prox { position: absolute; top: 80px; bottom: 0; width: 35%; background: none; border: 0; z-index: 2; cursor: pointer; }
.story-ant { left: 0; }
.story-prox { right: 0; width: 65%; }
@media (prefers-reduced-motion: reduce) { .story-barras i.atual::after { animation: none; transform: scaleX(1); } }

.auth-convite { margin: 0 0 16px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 225, 77, 0.18); color: #fff; font: 700 14px / 1.35 var(--font-body); border: 1px solid rgba(255, 225, 77, 0.55); }

/* ================= Início premium (2026-09-21): vibe de rede social, limpo ================= */
.tela-feed h1.titulo-grande { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* cabeçalho mínimo: logo à esquerda; busca, avisos e sequência à direita */
.topo-app { border-bottom: 1px solid var(--line); padding-block: 6px; }
.topo-acoes { gap: 2px; }
.topo-icone .ic { width: 24px; height: 24px; }
.topo-streak { padding: 0; margin-left: 4px; min-height: 34px; }

/* abas Seguindo / Para você: texto com sublinhado, sem pílulas */
.tela-feed .abas-social { gap: 26px; margin: 2px 0 18px; border-bottom: 1px solid var(--line); flex-wrap: nowrap; }
.tela-feed .abas-social .filtro-chip { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 12px 0; min-height: 44px; color: var(--text-3); font: 800 15px var(--font-body); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tela-feed .abas-social .filtro-chip.ativo { background: none; color: var(--text); border-bottom-color: var(--text); }

/* stories */
.stories-faixa { padding: 2px 0 14px; gap: 16px; }
.story-anel { width: 66px; height: 66px; }

/* posts: sem caixa, o destaque visual é o protagonista */
.lista-feed { gap: 0; }
.lista-feed .post { padding: 16px 0; border-bottom: 1px solid var(--line); animation: entra-post 0.4s var(--ease-out) backwards; }
.lista-feed .post:nth-child(2) { animation-delay: 0.05s; }
.lista-feed .post:nth-child(3) { animation-delay: 0.1s; }
.lista-feed .post:nth-child(4) { animation-delay: 0.15s; }
@keyframes entra-post { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.post { background: none; border-radius: 0; box-shadow: none; padding: 0; }
.post-topo { min-height: 44px; margin-bottom: 8px; gap: 10px; }
.post-topo .avatar-circulo.mini { width: 38px; height: 38px; font-size: 15px; }
.post-topo .linha-usuario-txt b { font: 800 14px var(--font-body); }
.post-topo .linha-usuario-txt small { font: 500 12px var(--font-body); color: var(--text-3); }
.post-midia { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; gap: 4px; aspect-ratio: auto; border-radius: 16px; padding: 20px 22px; overflow: hidden; color: var(--text); background: var(--ink-950); }
.post-midia::after { display: none; }
.post-midia .pm-rotulo { font: 800 18px / 1.3 var(--font-body); letter-spacing: normal; text-transform: none; color: var(--text); }
.post-midia .pm-valor { font: 800 18px / 1 var(--font-display); color: var(--text); }
.post-midia .pm-sub { font: 600 14px var(--font-body); color: var(--text-2); max-width: 90%; overflow-wrap: anywhere; }
.post-midia.jogo { background: var(--ink-950); }
.post-midia.estudo { background: var(--ink-950); }
.post-midia.marco { background: #FFF8E1; }
.post-midia.marco .atv-trofeu, .post-midia.marco svg { width: 32px; height: 32px; color: #E8A800; }
.post-midia.texto { min-height: 80px; background: var(--ink-950); align-items: flex-start; text-align: left; padding: 22px; }
.post-midia.texto .pm-texto { font: 600 19px / 1.4 var(--font-body); color: var(--text); overflow-wrap: anywhere; }
.post-acoes { display: flex; align-items: center; gap: 4px; padding-top: 6px; }
.post .kudos { background: none; padding: 0 10px 0 0; min-height: 44px; color: var(--text); gap: 7px; font: 800 14px var(--font-body); }
.post .kudos .ic { width: 26px; height: 26px; }
.post .kudos.ativo { background: none; color: var(--violet-600); }
.post .kudos.ativo .ic { fill: currentColor; }

/* barra de baixo no celular: só ícones, linha fina, botão + discreto */
@media (max-width: 899px) {
  .nav-abas { border-top: 1px solid var(--line); padding-top: 2px; }
  .nav-aba { min-height: 52px; gap: 0; }
  .nav-aba > span:not(.nav-mais) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nav-aba .ic { width: 27px; height: 27px; }
  .nav-aba.ativa::before { top: 0; width: 22px; height: 2px; }
  .nav-mais { width: 30px; height: 30px; border-radius: 9px; background: none; color: var(--text-3); border: 2px solid currentColor; box-shadow: none; transform: none; }
  .nav-mais .ic { width: 18px; height: 18px; }
  .nav-aba.ativa .nav-mais { color: var(--violet-700); }
}

/* ================= Explorar e listas premium (2026-09-21) ================= */
.abas-texto { gap: 26px; margin: 2px 0 14px; border-bottom: 1px solid var(--line); flex-wrap: nowrap; }
.abas-texto .filtro-chip { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 12px 0; min-height: 44px; color: var(--text-3); font: 800 15px var(--font-body); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.abas-texto .filtro-chip.ativo { background: none; color: var(--text); border-bottom-color: var(--text); }
.explorar-barra { display: flex; align-items: center; gap: 4px; margin-bottom: 20px; }
.explorar-barra .busca-falsa { flex: 1; min-width: 0; min-height: 44px; margin: 0; padding: 0 14px; border-radius: 12px; background: var(--ink-700); box-shadow: none; color: var(--text-3); font: 600 15px var(--font-body); text-align: left; }
.explorar-barra .busca-falsa .ic { width: 20px; height: 20px; }
.explorar-pessoas .ic { width: 26px; height: 26px; }
.rotulo-secao { margin: 4px 0 0; color: var(--text-3); font: 800 12px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }

/* listas de pessoas, clubes e avisos: linhas com fio fino, sem caixas */
.lista-social { gap: 0; }
.linha-usuario { background: none; border-radius: 0; box-shadow: none; padding: 10px 0; border-bottom: 1px solid var(--line); }
button.linha-usuario { width: 100%; border: 0; border-bottom: 1px solid var(--line); text-align: left; color: var(--text); cursor: pointer; }
.linha-usuario.eu, .linha-usuario.desafio.pendente, .aviso.novo { background: rgba(91, 16, 184, 0.07); box-shadow: none; border-radius: 12px; padding-inline: 12px; margin-inline: -12px; width: calc(100% + 24px); border-bottom-color: transparent; }
.linha-usuario.desafio { padding-block: 12px; }
.tela-admin .linha-usuario { background: var(--ink-800); border-radius: 18px; box-shadow: 0 0 0 1px var(--line); padding: 8px 10px; border-bottom: 0; margin-bottom: 8px; }

/* Clubes premium */
.tela-clubes > h1.titulo-grande { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tela-clubes > .subtitulo { display: none; }
.tela-clubes .clubes-acoes { display: flex; gap: 8px; margin: 4px 0 20px; }
.tela-clubes .clubes-acoes .botao-primario, .tela-clubes .clubes-acoes .botao-secundario { flex: 1; width: auto; min-height: 44px; padding: 0 12px; border-radius: 12px; font: 800 14px var(--font-body); box-shadow: none; margin: 0; }
.tela-clubes .sub-titulo { margin: 18px 0 4px; color: var(--text-3); font: 800 12px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.tela-clubes .clubes-acoes { flex-direction: row; }
.tela-clubes .clubes-acoes .botao-secundario { box-shadow: inset 0 0 0 1.5px var(--line-strong, rgba(91, 16, 184, 0.35)); background: none; }

/* ================= Perfil estilo rede social (2026-09-21) ================= */
.perfil-cartao { display: block; text-align: left; margin: 0 0 18px; }
.perfil-linha { display: flex; align-items: center; gap: 22px; margin-bottom: 14px; }
.perfil-linha .avatar-anel { width: 92px; height: 92px; padding: 3px; flex: none; }
.perfil-linha .perfil-avatar-grande { font-size: 34px; border-width: 3px; }
.social-contagem { flex: 1; display: flex; justify-content: space-around; gap: 4px; margin: 0; }
.social-contagem .contador { display: flex; flex-direction: column; align-items: center; gap: 0; background: none; border: 0; padding: 4px 6px; min-height: 44px; color: var(--text); font: inherit; cursor: default; }
.social-contagem button.contador { cursor: pointer; }
.social-contagem .contador b { font: 800 19px var(--font-body); color: var(--text); }
.social-contagem .contador span { font: 500 13px var(--font-body); color: var(--text-2); }
.perfil-ident { display: flex; flex-direction: column; gap: 4px; }
.perfil-nome { font: 800 17px var(--font-body); font-variation-settings: normal; }
.perfil-linha-arroba { display: flex; align-items: center; gap: 8px; }
.perfil-linha-arroba .perfil-arroba { margin: 0; font: 600 14px var(--font-body); color: var(--text-3); }
.perfil-linha-arroba .nivel-selo { padding: 4px 9px; font: 800 11px / 1 var(--font-body); }
.perfil-ident .xp-trilho { height: 4px; margin-top: 4px; }
.perfil-ident .perfil-sub { font: 500 12px var(--font-body); color: var(--text-3); }
.perfil-bio { max-width: none; margin-top: 4px; color: var(--text); }
.destaques { justify-content: flex-start; margin-top: 6px; }
.perfil-botoes { display: flex; gap: 8px; margin-top: 14px; }
.perfil-botoes .botao-secundario { flex: 1; width: auto; min-height: 40px; padding: 0 10px; border-radius: 10px; font: 800 14px var(--font-body); margin: 0; box-shadow: none; background: var(--ink-700); color: var(--text); }
.semana-card { background: none; box-shadow: none; border-radius: 0; padding: 14px 0; margin: 0; border-top: 1px solid var(--line); }
.semana-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.semana-cab .semana-resumo { margin: 0; }
.link-mini { background: none; border: 0; color: var(--violet-700); font: 800 13px var(--font-body); min-height: 36px; padding: 0 4px; cursor: pointer; }
.link-mini:hover { opacity: 0.7; }
.semana-grafico { height: 64px; gap: 6px; }
.barra-dia-col { border-radius: 6px; }
.perfil-stats { margin-top: 8px; font: 500 12px var(--font-body); color: var(--text-3); }
.perfil-stats:empty { display: none; }
.tela-perfil .sub-titulo { margin: 18px 0 8px; color: var(--text-3); font: 800 12px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.perfil-legado { display: none; }
.perfil-ident .xp-trilho { width: 100%; }

/* Perfil: acabamento (2026-09-21) */
.perfil-nome-linha { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.perfil-nome-linha .topo-icone { margin: -6px -8px -6px 0; }
.perfil-linha .avatar-anel { background: var(--line); }
.selo-icone { box-shadow: none; }
.semana-resumo .meta-txt { color: var(--text-3); font-weight: 600; }
.semana-grafico { height: 56px; }
.barra-dia-col { background: none; border-radius: 0; border-bottom: 2px solid var(--line); }
.barra-dia-col i { border-radius: 6px 6px 0 0; }
#btn-conq-todas { display: block; margin: 4px auto 8px; }

/* Perfil público: mesmo padrão do Você */
.tela-social .perfil-cartao { margin-bottom: 14px; }
.perfil-botoes .botao-primario { flex: 1; width: auto; min-height: 40px; padding: 0 10px; border-radius: 10px; font: 800 14px var(--font-body); margin: 0; box-shadow: none; }
#tela-perfil-publico .sub-titulo { margin: 18px 0 8px; color: var(--text-3); font: 800 12px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }

/* post de texto: fundo neutro claro */
.post-midia.texto .pm-texto.curto { font: 800 26px / 1.25 var(--font-body); }

/* Escolha de área: lista única, limpa (2026-09-21) */
.tela-objetivo .saudacao { margin: 0 0 2px; color: var(--text-3); font: 700 14px var(--font-body); }
.tela-objetivo .titulo-grande { font-size: 28px; margin-bottom: 16px; }
.lista-objetivos .linha-jogo .seta { width: 20px; height: 20px; color: var(--text-3); flex: none; }
.lista-objetivos.sem-borda-topo { border-top: 0; }
.lista-objetivos .anel { background: var(--line); }
.lista-objetivos .miolo { background: #fff; color: var(--violet-600); }
.tela-objetivo .continuar { background: none; box-shadow: none; border: 0; border-radius: 12px; background: rgba(91, 16, 184, 0.07); padding: 12px; margin: 0 0 14px; min-height: 0; }
.tela-objetivo .continuar-icone { background: var(--violet-600); color: #fff; width: 40px; height: 40px; }

/* Estudar (cronômetro) premium (2026-09-21) */

/* Perfil em abas (2026-09-21): um bloco por vez */
.perfil-linha .avatar-anel { cursor: pointer; }
.perfil-botoes .botao-secundario { display: flex; align-items: center; justify-content: center; gap: 8px; position: relative; }
.perfil-botoes .botao-secundario .ic { width: 18px; height: 18px; }
.abas-perfil { margin: 16px 0 14px; justify-content: space-around; gap: 0; }
.abas-perfil .filtro-chip { flex: 1; text-align: center; }
[data-ppainel] .semana-cab { margin-top: 4px; }
.painel-xp-rotulo { margin-top: 22px; }
.painel-xp { margin-top: 6px; color: var(--text-3); font: 500 12px var(--font-body); }

/* Story: fundo (cartão, foto, só números) */
.story-fundos { margin-top: -2px; }
.story-fundos .filtro-chip { background: var(--ink-700); border: 0; box-shadow: none; }
.story-fundos .filtro-chip.ativo { background: var(--text); color: #fff; }
.story-previa.transp { background: repeating-conic-gradient(#4a4a5e 0% 25%, #383848 0% 50%) 0 0 / 22px 22px; }
.story-dica { margin: -2px 0 2px; color: var(--text-3); font: 500 12px / 1.35 var(--font-body); text-align: center; }
.story-abas .filtro-chip { background: var(--ink-700); border: 0; box-shadow: none; }
.story-abas .filtro-chip.ativo { background: var(--text); color: #fff; }

/* ================= Entrada (cadastro, login, onboarding…) premium e clara (2026-09-21) ================= */
.tela-auth { background: #fff; color: var(--text); overflow: visible; align-items: center; justify-content: flex-start; padding: 28px 20px 40px; }
.tela-auth::before { display: none; }
.tela-auth > * { width: 100%; max-width: 380px; margin-inline: auto; }
.tela-auth :focus-visible { outline-color: var(--violet-600); }
.auth-marca { justify-content: center; margin: 24px 0 18px; }
.tela-auth > .wordmark.grande, .auth-marca img.wordmark.grande, .tela-auth .wordmark.grande { height: 34px; margin: 24px auto 18px; }
.auth-titulo { font: 800 24px / 1.2 var(--font-body); font-variation-settings: normal; letter-spacing: 0; text-transform: none; text-align: center; color: var(--text); margin: 0 0 8px; }
.auth-sub { font: 500 15px / 1.4 var(--font-body); color: var(--text-3); text-align: center; max-width: none; margin: 0 auto 24px; }
.auth-form label, .tela-auth label { color: var(--text-2); font: 700 13px var(--font-body); }
.tela-auth input { background: var(--ink-700); color: var(--text); border: 1px solid transparent; border-radius: 12px; min-height: 48px; }
.tela-auth input::placeholder { color: var(--text-3); }
.tela-auth input:hover { border-color: var(--line); }
.tela-auth input:focus, .tela-auth input:focus-visible { border-color: var(--violet-600); }
.tela-auth .botao-primario { background: var(--violet-600); color: #fff; box-shadow: none; border-radius: 12px; min-height: 48px; }
.tela-auth .botao-secundario { color: var(--violet-700); background: none; box-shadow: inset 0 0 0 1.5px rgba(91, 16, 184, 0.3); border-radius: 12px; min-height: 46px; }
#tela-cadastro .botao-secundario, #tela-login .botao-secundario { box-shadow: none; font-weight: 800; }
.tela-auth .voltar { background: var(--ink-700); color: var(--text); border-color: transparent; }
.tela-auth .erro-auth { color: var(--error); background: rgba(255, 77, 141, 0.14); }
.tela-auth .erro-auth.ok { color: var(--success); background: rgba(47, 230, 130, 0.16); }
.tela-auth .link-esqueci-senha { color: var(--violet-700); text-decoration: none; font: 700 13px var(--font-body); align-self: flex-end; }
.tela-auth .link-legal, .tela-auth a { color: var(--violet-700); }
.tela-auth .botao-mostrar-senha { color: var(--text-3); }
.tela-auth .botao-mostrar-senha.ativo { color: var(--violet-600); }
.tela-convite .auth-sub strong { color: var(--violet-600); }
.onb-passos i { background: var(--line); }
.onb-passos i.feito { background: var(--violet-600); }
.onb-chip { border: 1.5px solid var(--line); color: var(--text); }
.onb-chip.sel { background: var(--text); color: #fff; border-color: var(--text); }
.auth-convite { background: rgba(91, 16, 184, 0.08); color: var(--text); border: 1px solid rgba(91, 16, 184, 0.25); text-align: center; }
@media (min-width: 900px) {
  .tela-auth { align-items: center; justify-content: center; padding: 48px 20px; }
  .tela-auth > * { max-width: 380px; }
  .auth-titulo { font-size: 24px; }
}
.tela-auth .legal-aviso { color: var(--text-3); }
.tela-auth .legal-aviso .link-legal { min-height: 0; display: inline; }
.tela-auth > img.wordmark { width: auto; max-width: none; height: 34px; display: block; margin: 24px auto 18px; }
.tela-auth input[type="date"] { padding: 0 16px; margin-bottom: 14px; }
.tela-auth form .botao-primario { margin-top: 12px; }

/* Detalhe da publicação premium (2026-09-21) */
.atv-topo { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px; }
.atv-titulo-peq { margin: 0; font: 800 17px var(--font-body); }
.atv-mais { font-size: 26px; line-height: 1; color: var(--text); padding-bottom: 6px; }
.atv-opcoes { background: var(--ink-700); border-radius: 14px; padding: 12px 14px; margin: 0 0 12px; }
.atv-opcoes .link-excluir { margin: 4px 0; }
.tela-atividade .post-midia { margin: 4px 0 0; }
.tela-atividade .post-acoes { padding-top: 4px; }
.tela-atividade .kudos { background: none; padding: 0 10px 0 0; min-height: 44px; color: var(--text); gap: 7px; font: 800 14px var(--font-body); margin: 0; }
.tela-atividade .kudos .ic { width: 26px; height: 26px; }
.tela-atividade .kudos.ativo { background: none; color: var(--violet-600); }
.tela-atividade .kudos.ativo .ic { fill: currentColor; }
.atv-quem { margin: 0; color: var(--text-3); font: 500 13px var(--font-body); }
.atv-quem:empty { display: none; }
.atv-meta { margin: 0 0 4px; color: var(--text-3); font: 500 13px var(--font-body); }
.tela-atividade .sub-titulo { margin: 18px 0 8px; color: var(--text-3); font: 800 12px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.form-comentario input { background: var(--ink-700); border: 0; border-radius: 22px; min-height: 44px; padding: 0 16px; box-shadow: none; }
.form-comentario .botao-primario { background: none; color: var(--violet-700); box-shadow: none; min-height: 44px; padding: 0 6px; font: 800 15px var(--font-body); }
.atv-opcoes .filtro-chip { background: #fff; border: 0; box-shadow: none; }
.atv-opcoes .filtro-chip.ativo { background: var(--text); color: #fff; }

/* Mensagens entre amigos (2026-09-21) */
.post .kudos.enviar, .tela-atividade .kudos.enviar { padding: 0 8px; }
.post .kudos.enviar .ic, .tela-atividade .kudos.enviar .ic { width: 24px; height: 24px; }
.conv-dica { margin: 12px 0 0; text-align: center; color: var(--text-3); font: 500 12px / 1.4 var(--font-body); }
.conv-vazio { margin: 40px 0; }
.tela-conversa { min-height: 100dvh; }
.conv-topo .conv-quem { flex: 1; justify-content: flex-start; margin: 0 4px; min-height: 44px; width: auto; }
.conv-msgs { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 8px 0 12px; }
.msg { max-width: 78%; padding: 9px 14px; border-radius: 18px; font: 500 15px / 1.35 var(--font-body); overflow-wrap: anywhere; }
.msg.eu { align-self: flex-end; background: var(--violet-600); color: #fff; border-bottom-right-radius: 6px; }
.msg.outro { align-self: flex-start; background: var(--ink-700); color: var(--text); border-bottom-left-radius: 6px; }
.msg-post { width: 68%; display: flex; flex-direction: column; gap: 3px; }
.msg-post.eu { align-self: flex-end; align-items: flex-end; }
.msg-post.outro { align-self: flex-start; }
.msg-post .post-midia { width: 100%; aspect-ratio: auto; padding: 14px 16px; border: 0; cursor: pointer; border-radius: 14px; }
.msg-post .post-midia .pm-rotulo { font-size: 15px; }
.msg-post .post-midia .pm-sub { font-size: 13px; }
.msg-post .post-midia.texto { min-height: 0; padding: 14px; }
.msg-post .post-midia .pm-texto.curto { font-size: 17px; }
.msg-post small { color: var(--text-3); font: 500 11px var(--font-body); }
.conv-form { position: sticky; bottom: 0; background: var(--ink-900); padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); margin: 0; }
.conv-linha .nao-lida { color: var(--text); font-weight: 800; }
.conv-nl { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--violet-600); color: #fff; font: 800 12px / 22px var(--font-body); text-align: center; flex: none; }
.picker-amigos { max-height: 46vh; overflow-y: auto; margin-bottom: 4px; }
.picker-amigos .linha-usuario { width: 100%; text-align: left; }
.conv-linha .linha-usuario-txt { flex: 1; }
@media (min-width: 900px) { .tela-mensagens, .tela-conversa { max-width: 640px; margin-inline: auto; width: 100%; } }

/* ---------- Heatmap ---------- */
.heatmap-cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.heatmap-resumo { font: 500 12px var(--font-body); color: var(--text-2); }
.heatmap-grid { overflow-x: auto; padding-bottom: 4px; }
.heatmap-legenda { display: flex; align-items: center; gap: 4px; justify-content: flex-end; margin-top: 6px; font: 500 10px var(--font-body); color: var(--text-3); }
.hq { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }

/* ---------- Raio-X ---------- */
#perfil-raiox { margin-top: 20px; }
.raiox-item { margin-bottom: 10px; }
.raiox-info { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3px; }
.raiox-nome { font: 600 13px var(--font-body); color: var(--text); }
.raiox-pct { font: 700 12px var(--font-body); }
.raiox-pct small { font-weight: 500; opacity: 0.7; }
.raiox-barra { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.raiox-preenchido { height: 100%; border-radius: 3px; transition: width 0.6s var(--ease-out); }
.raiox-tag { font: 700 10px var(--font-body); text-transform: uppercase; letter-spacing: 0.5px; }
.raiox-sub { padding-left: 16px; }
.raiox-sub .raiox-nome { font-weight: 500; font-size: 12px; color: var(--text-2); }
.raiox-sub .raiox-item { margin-bottom: 6px; }

/* ---------- Simulado ---------- */
.simulado-secao { margin-top: 20px; }
.simulado-linha .anel { background: linear-gradient(135deg, var(--violet-600), var(--violet-500)); }
.simulado-materia-pill { display: inline-block; font: 700 11px var(--font-body); text-transform: uppercase; letter-spacing: 0.5px; color: var(--violet-600); background: var(--violet-100, rgba(91,16,184,0.08)); padding: 3px 10px; border-radius: 999px; margin-bottom: 8px; }
.simulado-progresso { font: 600 13px var(--font-body); color: var(--text-2); margin: 0 0 6px; }
.simulado-tempo { font: 700 14px var(--font-body); color: var(--text); margin: 6px 0 12px; text-align: center; }
.simulado-breakdown { margin: 16px 0; }
.simulado-bd-item { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 8px; margin-bottom: 8px; }
.simulado-bd-nome { font: 500 13px var(--font-body); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.simulado-bd-pct { font: 700 12px var(--font-body); min-width: 32px; text-align: right; }

/* ---------- Revisão Inteligente ---------- */
.revisao-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 2px solid var(--violet-500); border-radius: 14px; background: linear-gradient(135deg, rgba(91,16,184,0.06), rgba(91,16,184,0.12)); cursor: pointer; text-align: left; margin-top: 16px; transition: transform 0.15s, box-shadow 0.15s; }
.revisao-card:active { transform: scale(0.97); }
.revisao-icone .ic { width: 28px; height: 28px; stroke: var(--violet-600); }
.revisao-texto { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.revisao-texto strong { font: 700 15px var(--font-display); color: var(--text); }
.revisao-texto span:last-child { font: 400 13px var(--font-body); color: var(--text-2); }
.revisao-card .seta { width: 20px; height: 20px; stroke: var(--text-3); }
.revisao-nivel-pill { display: inline-block; font: 600 11px var(--font-body); text-transform: uppercase; letter-spacing: 0.5px; color: var(--violet-600); background: var(--violet-100, rgba(91,16,184,0.08)); padding: 3px 10px; border-radius: 999px; margin-bottom: 8px; }

/* ---------- Ferramentas de IA ---------- */
.ia-subtitulo { font: 400 14px var(--font-body); color: var(--text-2); margin: 0 16px 16px; }
.ia-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px; }
.ia-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 12px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--ink-800); text-align: center; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.ia-card:active { transform: scale(0.96); }
.ia-card-icone { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--violet-600), var(--violet-500)); display: flex; align-items: center; justify-content: center; }
.ia-card-icone .ic { width: 24px; height: 24px; stroke: #fff; }
.ia-card strong { font: 700 14px var(--font-display); color: var(--text); }
.ia-card small { font: 400 12px var(--font-body); color: var(--text-2); line-height: 1.3; }
.ia-cota { text-align: center; margin: 16px 0; font: 400 13px var(--font-body); color: var(--text-3); }

/* Card de IA na tela de objetivos */
.ia-card-objetivo { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 2px solid var(--violet-500); border-radius: 14px; background: linear-gradient(135deg, rgba(91,16,184,0.06), rgba(91,16,184,0.12)); cursor: pointer; text-align: left; margin-top: 16px; transition: transform 0.15s; }
.ia-card-objetivo:active { transform: scale(0.97); }
.ia-card-objetivo-icone .ic { width: 28px; height: 28px; stroke: var(--violet-600); }
.ia-card-objetivo-texto { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ia-card-objetivo-texto strong { font: 700 15px var(--font-display); color: var(--text); }
.ia-card-objetivo-texto span:last-child { font: 400 12px var(--font-body); color: var(--text-2); }
.ia-card-objetivo .seta { width: 20px; height: 20px; stroke: var(--text-3); }

/* Câmera */
.ia-camera-corpo { display: flex; flex-direction: column; align-items: center; flex: 1; padding: 16px; }
.ia-camera-preview { width: 100%; max-width: 400px; aspect-ratio: 3/4; border-radius: 16px; overflow: hidden; background: #000; position: relative; }
.ia-camera-preview video, .ia-camera-preview img { width: 100%; height: 100%; object-fit: cover; }
.ia-camera-acoes { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 20px; }
.ia-btn-captura { width: 64px; height: 64px; border-radius: 50%; border: 4px solid var(--violet-600); background: #fff; cursor: pointer; position: relative; transition: transform 0.1s; }
.ia-btn-captura:active { transform: scale(0.9); }
.ia-btn-captura::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--violet-600); }
.ia-btn-galeria { font: 600 13px var(--font-body); }
.ia-camera-confirmar { display: flex; gap: 12px; margin-top: 20px; width: 100%; max-width: 400px; }
.ia-camera-confirmar .botao-primario, .ia-camera-confirmar .botao-secundario { flex: 1; }

/* Resultado da IA */
.ia-resultado-conteudo { padding: 16px; }
.ia-resultado-corpo { font: 400 15px/1.6 var(--font-body); color: var(--text); }
.ia-resultado-corpo h2, .ia-resultado-corpo h3 { font-family: var(--font-display); margin: 20px 0 8px; }
.ia-resultado-corpo ul, .ia-resultado-corpo ol { padding-left: 20px; margin: 8px 0; }
.ia-resultado-corpo .card-mental { border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 8px 0; background: var(--ink-800); }
.ia-resultado-corpo .card-mental strong { color: var(--violet-600); }

/* Gerador de IA (quiz, flashcards, mapa mental, resumo) */
.ger-corpo { padding: 0 16px 24px; }
.ger-bloco { margin: 0 0 16px; }
.ger-rotulo { display: block; margin: 0 0 8px; font: 700 13px var(--font-body); color: var(--text-2); }
.ger-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ger-acoes-texto { display: flex; gap: 14px; margin: 0 0 8px; }
.ger-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ger-chips .filtro-chip:disabled { opacity: 0.45; cursor: not-allowed; }
.ger-contador { display: block; text-align: right; color: var(--text-3); font: 500 12px var(--font-body); }
.ger-btn-foto { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ger-foto-prev { display: block; width: 100%; max-height: 240px; object-fit: cover; border-radius: 14px; margin-top: 10px; }
.ger-aviso { margin-top: 12px; }
.mapa { display: flex; flex-direction: column; gap: 14px; }
.mapa-centro { align-self: center; text-align: center; background: var(--violet-600); color: #fff; font: 800 18px var(--font-display); padding: 14px 20px; border-radius: 16px; max-width: 100%; }
.mapa-ramos { display: flex; flex-direction: column; gap: 10px; padding-left: 14px; border-left: 3px solid var(--violet-400); }
.mapa-ramo { background: var(--ink-800); border-radius: 14px; padding: 12px 14px; box-shadow: 0 0 0 1px var(--line); border-left: 5px solid var(--ramo-cor, var(--violet-600)); }
.mapa-ramo b { display: block; font: 800 15px var(--font-display); color: var(--text); margin-bottom: 6px; }
.mapa-ramo ul { margin: 0; padding-left: 18px; color: var(--text-2); font: 500 14px / 1.45 var(--font-body); }
.mapa-cor-0 { --ramo-cor: #5B10B8; } .mapa-cor-1 { --ramo-cor: #2E6BE0; } .mapa-cor-2 { --ramo-cor: #1F9E8E; }
.mapa-cor-3 { --ramo-cor: #C22A69; } .mapa-cor-4 { --ramo-cor: #B3764B; } .mapa-cor-5 { --ramo-cor: #0B6B3A; }
#ia-resultado-conteudo .perfil-sub { margin-top: 14px; }
.resposta-ia.rico { white-space: normal; }
.resposta-ia.rico p { margin: 0 0 8px; }
.resposta-ia.rico ul { margin: 0 0 8px; padding-left: 20px; }
.resposta-ia.rico h3 { font: 800 15px var(--font-display); margin: 12px 0 6px; }
.ia-erro { text-align: center; padding: 40px 16px; }
.ia-erro p { font: 400 15px var(--font-body); color: var(--text-2); margin: 4px 0; }
.ia-erro-detalhe { font-size: 12px; color: var(--text-3); }
.ia-erro .botao-primario { margin-top: 16px; }
.ia-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 16px; gap: 16px; }
.ia-loading-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--violet-600); display: inline-block; animation: ia-pulse 1.4s infinite ease-in-out both; }
.ia-loading-dot:nth-child(1) { animation-delay: 0s; }
.ia-loading-dot:nth-child(2) { animation-delay: 0.16s; }
.ia-loading-dot:nth-child(3) { animation-delay: 0.32s; }
.ia-loading p { font: 400 14px var(--font-body); color: var(--text-2); }
@keyframes ia-pulse { 0%, 80%, 100% { transform: scale(0.5); opacity: 0.3; } 40% { transform: scale(1); opacity: 1; } }
.ia-loading { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.ia-loading p { width: 100%; text-align: center; }

/* ---------- Nota Estimada ---------- */
.nota-card { background: var(--ink-800); border: 1.5px solid var(--line); border-radius: 16px; padding: 20px 16px; margin: 16px 0; }
.nota-card-vazio { text-align: center; }
.nota-card-vazio .nota-card-icone .ic { width: 32px; height: 32px; stroke: var(--text-3); }
.nota-card-vazio strong { display: block; font: 700 15px var(--font-display); color: var(--text); margin: 8px 0 4px; }
.nota-card-vazio p { font: 400 13px var(--font-body); color: var(--text-2); margin: 0; }
.nota-card-topo { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 12px; }
.nota-label { font: 600 12px var(--font-body); color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px; }
.nota-numero { font: 800 48px var(--font-display); line-height: 1; }
.nota-escala { font: 400 12px var(--font-body); color: var(--text-3); }
.nota-barra-fundo { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; margin-bottom: 16px; }
.nota-barra-preenchido { height: 100%; border-radius: 4px; transition: width 0.6s ease-out; }
.nota-curso-secao { margin-bottom: 12px; }
.nota-curso-label { font: 600 13px var(--font-body); color: var(--text-2); display: block; margin-bottom: 6px; }
.nota-curso-select { width: 100%; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; font: 400 14px var(--font-body); color: var(--text); background: var(--ink-900); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.nota-corte-lista { display: flex; flex-direction: column; gap: 8px; }
.nota-corte-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; font: 400 14px var(--font-body); }
.nota-corte-item.aprovado { background: rgba(11, 107, 58, 0.08); }
.nota-corte-item.reprovado { background: rgba(194, 42, 105, 0.06); }
.nota-corte-uni { flex: 1; font-weight: 600; color: var(--text); }
.nota-corte-valor { font: 700 14px var(--font-display); color: var(--text-2); min-width: 36px; text-align: right; }
.nota-corte-status { font: 700 12px var(--font-body); min-width: 70px; text-align: right; }
.nota-corte-item.aprovado .nota-corte-status { color: var(--success); }
.nota-corte-item.reprovado .nota-corte-status { color: var(--danger); }
.nota-meta { font: 400 13px var(--font-body); color: var(--text-2); text-align: center; margin: 12px 0 0; }
.nota-meta.meta-sucesso { color: var(--success); font-weight: 600; }

/* ---------- Plano de Estudo ---------- */
.plano-card { background: var(--ink-800); border: 1.5px solid var(--line); border-radius: 16px; padding: 16px; margin: 12px 0; }
.plano-vazio { text-align: center; }
.plano-vazio strong { display: block; font: 700 15px var(--font-display); color: var(--text); margin-bottom: 4px; }
.plano-vazio p { font: 400 13px var(--font-body); color: var(--text-2); margin: 0; }
.plano-cabecalho { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.plano-cabecalho strong { font: 700 15px var(--font-display); color: var(--text); }
.plano-tempo-total { font: 700 14px var(--font-display); color: var(--violet-600); }
.plano-sub { font: 400 12px var(--font-body); color: var(--text-3); margin: 0 0 12px; }
.plano-itens { display: flex; flex-direction: column; gap: 10px; }
.plano-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 10px; background: var(--ink-900); }
.plano-item-info { display: flex; align-items: center; gap: 8px; }
.plano-item-mat { font: 600 14px var(--font-body); color: var(--text); }
.plano-item-pct { font: 700 12px var(--font-body); }
.plano-item-tempo { font: 700 14px var(--font-display); color: var(--violet-600); }


/* ---- Flashcards: card que vira, notas da revisão, decks ---- */
.revisao-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.revisao-topo .simulado-progresso { margin: 0; }
.revisao-deck { max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13px var(--font-body); color: var(--violet-600); }
.revisao-barra { height: 8px; border-radius: 4px; background: rgba(91, 16, 184, 0.14); }
.revisao-barra > div { background: var(--violet-600); border-radius: 4px; transition: transform 0.4s var(--ease-out); }
.flash-cena { perspective: 1200px; cursor: pointer; margin: 6px 0 4px; animation: entra 0.3s var(--ease-out); -webkit-tap-highlight-color: transparent; }
.flash-cena:focus-visible { outline: 3px solid var(--violet-700); outline-offset: 4px; border-radius: 24px; }
.flash-giro { display: grid; transform-style: preserve-3d; transition: transform 0.55s var(--ease-out); }
.flash-cena.virado .flash-giro { transform: rotateY(180deg); }
.flash-face { grid-area: 1 / 1; min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 28px 22px; text-align: center; border-radius: 24px; background: var(--ink-800); backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 0 0 1px var(--line), 0 16px 34px -18px rgba(21, 10, 46, 0.3); }
.flash-verso-face { transform: rotateY(180deg); background: linear-gradient(160deg, #fff 40%, rgba(91, 16, 184, 0.09)); box-shadow: 0 0 0 2px var(--violet-400), 0 16px 34px -18px rgba(91, 16, 184, 0.4); }
.flash-rotulo { font: 800 11px var(--font-body); letter-spacing: 0.8px; text-transform: uppercase; color: var(--violet-600); }
.flash-texto { max-width: 100%; overflow-wrap: anywhere; white-space: pre-line; font: 800 22px / 1.3 var(--font-display); color: var(--text); }
.flash-verso-face .flash-texto { font: 700 18px / 1.5 var(--font-body); }
.flash-dica { font: 600 12px var(--font-body); color: var(--text-3); }
.card-avaliar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.card-nota { min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 2px; border-radius: 16px; border: 2px solid var(--line); background: var(--ink-800); color: var(--text); font-family: var(--font-body); cursor: pointer; transition: transform 0.14s var(--ease-out); }
.card-nota:active { transform: scale(0.95); }
.card-nota b { font: 800 14px var(--font-body); }
.card-nota small { font: 600 11px var(--font-body); color: var(--text-2); }
.card-nota.nota-1 { border-color: rgba(194, 42, 105, 0.45); } .card-nota.nota-1 b { color: var(--danger); }
.card-nota.nota-3 { background: var(--violet-600); border-color: var(--violet-600); color: #fff; box-shadow: 0 10px 22px -12px rgba(91, 16, 184, 0.7); } .card-nota.nota-3 small { color: rgba(255, 255, 255, 0.85); }
.card-nota.nota-4 { border-color: rgba(11, 107, 58, 0.45); } .card-nota.nota-4 b { color: var(--success); }
.card-atalhos { text-align: center; color: var(--text-3); font: 500 12px var(--font-body); margin: 0; }
.revisao-agenda { margin: 0; color: var(--text-2); font: 600 14px var(--font-body); }
.revisao-agenda b { color: var(--violet-600); }
.revisao-notas { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.revisao-notas span { padding: 5px 10px; border-radius: 999px; background: rgba(91, 16, 184, 0.08); font: 700 12px var(--font-body); color: var(--text-2); }
html.reduzir-mov .flash-giro { transition: none; } html.reduzir-mov .flash-cena { animation: none; }
@media (prefers-reduced-motion: reduce) { .flash-giro { transition: none; } .flash-cena { animation: none; } }

.decks-corpo { padding: 0 16px 28px; display: flex; flex-direction: column; gap: 12px; }
.deck-linha { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 0; border-radius: 18px; background: var(--ink-800); box-shadow: 0 0 0 1px var(--line); text-align: left; cursor: pointer; font-family: var(--font-body); color: var(--text); transition: transform 0.15s; }
.deck-linha:active { transform: scale(0.98); }
.deck-icone { flex: none; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--violet-600), var(--violet-500)); display: grid; place-items: center; }
.deck-icone .ic { width: 24px; height: 24px; stroke: #fff; }
.deck-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.deck-texto strong { font: 700 16px var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-texto span { font: 500 13px var(--font-body); color: var(--text-2); }
.deck-badge { flex: none; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--violet-600); color: #fff; font: 800 13px / 28px var(--font-body); text-align: center; }
.deck-ok { flex: none; color: var(--success); display: flex; } .deck-ok .ic { width: 22px; height: 22px; stroke: var(--success); }
.deck-linha .seta { width: 20px; height: 20px; stroke: var(--text-3); flex: none; }
.deck-vazio { text-align: center; padding: 30px 8px; color: var(--text-2); font: 500 15px / 1.5 var(--font-body); }
.deck-vazio strong { display: block; font: 800 20px var(--font-display); color: var(--text); margin-bottom: 6px; }
.deck-vazio .botao-primario, .deck-vazio .botao-secundario { margin-top: 12px; }
.deck-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 18px; background: var(--ink-800); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.deck-stats div { padding: 14px 4px 12px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.deck-stats div + div { border-left: 1px solid var(--line); }
.deck-stats b { font: 900 24px / 1 var(--font-display); color: var(--violet-600); font-variant-numeric: tabular-nums; }
.deck-stats small { font: 700 11px var(--font-body); color: var(--text-2); }
.deck-acoes { display: flex; flex-direction: column; gap: 10px; }
.deck-nota { margin: 0; text-align: center; color: var(--text-2); font: 500 13px var(--font-body); }
.deck-cards { display: flex; flex-direction: column; gap: 8px; }
.deck-card { display: flex; align-items: center; gap: 8px; padding: 12px 8px 12px 14px; border-radius: 16px; background: var(--ink-800); box-shadow: 0 0 0 1px var(--line); }
.deck-card-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.deck-card-q { font: 600 15px / 1.3 var(--font-body); color: var(--text); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.deck-card-meta { font: 500 12px var(--font-body); color: var(--text-3); }
.deck-card .link-mini { flex: none; }
.deck-card .link-mini.perigo, .deck-rodape .link-mini.perigo { color: var(--danger); }
.deck-rodape { display: flex; justify-content: center; gap: 18px; margin-top: 6px; }

/* Hub de ferramentas: atalho para os decks */
.ia-decks { display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); margin: 0 16px 14px; padding: 14px 16px; border: 2px solid var(--violet-500); border-radius: 16px; background: linear-gradient(135deg, rgba(91, 16, 184, 0.06), rgba(91, 16, 184, 0.12)); cursor: pointer; text-align: left; font-family: var(--font-body); transition: transform 0.15s; }
.ia-decks:active { transform: scale(0.98); }
.ia-decks .deck-icone { width: 40px; height: 40px; }
.ia-decks-texto { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ia-decks-texto strong { font: 700 15px var(--font-display); color: var(--text); }
.ia-decks-texto span { font: 500 13px var(--font-body); color: var(--text-2); }
.ia-decks .seta { width: 20px; height: 20px; stroke: var(--text-3); }

/* Gerador: botão sempre à vista no rodapé */
.ger-rodape { position: sticky; bottom: 0; z-index: 5; margin: 8px -16px 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--ink-900) 72%, rgba(246, 245, 250, 0)); display: flex; flex-direction: column; gap: 8px; }
.ger-rodape .ia-cota { margin: 0; }
.revisao-nivel-pill { align-self: flex-start; }
@media (hover: none) { .card-atalhos { display: none; } }
.ia-cota:empty { display: none; }
.ia-decks + .ia-cota { margin: -2px 16px 12px; text-align: left; }

/* Planos */
.ia-ver-planos { display: block; margin: -6px 16px 12px; }
.plano-atual { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 18px; background: rgba(91, 16, 184, 0.08); }
.plano-atual b { font: 800 16px var(--font-display); color: var(--text); }
.plano-atual span { font: 500 13px var(--font-body); color: var(--text-2); }
.plano-cartao { position: relative; padding: 18px 16px; border-radius: 20px; background: var(--ink-800); box-shadow: 0 0 0 1px var(--line); }
.plano-cartao h2 { margin: 0 0 10px; font: 800 18px / 1.2 var(--font-display); color: var(--text); }
.plano-cartao ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--text-2); font: 500 14px / 1.4 var(--font-body); }
.plano-pro { box-shadow: 0 0 0 2px var(--violet-500); background: linear-gradient(160deg, #fff 55%, rgba(91, 16, 184, 0.08)); }
.plano-selo { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px; background: var(--violet-600); color: #fff; font: 800 11px var(--font-body); letter-spacing: 0.8px; text-transform: uppercase; }
.plano-aviso { margin: 12px 0; color: var(--text-2); font: 600 13px / 1.4 var(--font-body); }
.plano-pro .botao-primario { width: 100%; }
.admin-plano { display: grid; grid-template-columns: 1fr 90px; gap: 8px; margin-bottom: 16px; }
.admin-plano .botao-primario, .admin-plano .botao-secundario { grid-column: 1 / -1; }

.plano-preco { margin: 0 0 4px; font: 900 28px / 1.1 var(--font-display); color: var(--text); }
.plano-preco small { font: 700 14px var(--font-body); color: var(--text-2); }
.plano-preco-anual { margin: 0 0 10px; font: 600 13px var(--font-body); color: var(--text-2); }
#plano-comprar { display: flex; flex-direction: column; gap: 10px; }
#plano-comprar:not([hidden]) .plano-aviso { margin: 4px 0; }
#plano-comprar .link-mini { align-self: center; }

/* Telas de ferramentas, planos e decks: coluna de leitura confortável no computador (no celular ocupa a largura toda) */
#tela-ia, #tela-ia-gerador, #tela-ia-resultado, #tela-planos, #tela-decks, #tela-deck { width: min(100%, 720px); margin-inline: auto; }

/* Erro de carregamento com botão de tentar de novo */
.social-vazio.erro { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.social-vazio.erro .botao-secundario { width: auto; min-height: 44px; padding: 0 22px; }

/* Primeiros passos na tela inicial */
.passos { margin: 4px 0 16px; padding: 16px; border-radius: 20px; background: var(--ink-800); box-shadow: 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 8px; }
.passos-topo { display: flex; align-items: baseline; gap: 10px; }
.passos-topo b { font: 800 17px var(--font-display); color: var(--text); }
.passos-topo span { font: 700 13px var(--font-body); color: var(--violet-600); }
.passos-topo .link-mini { margin-left: auto; }
.passo { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 6px; border: 0; border-radius: 14px; background: transparent; text-align: left; cursor: pointer; font-family: var(--font-body); color: var(--text); transition: background 0.15s; }
.passo:hover:not(:disabled) { background: rgba(91, 16, 184, 0.06); }
.passo:disabled { cursor: default; }
.passo-ico { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--violet-400); display: grid; place-items: center; }
.passo.feito .passo-ico { background: var(--success); border-color: var(--success); }
.passo.feito .passo-ico .ic { width: 16px; height: 16px; stroke: #fff; }
.passo-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.passo-txt b { font: 700 15px var(--font-body); }
.passo-txt small { font: 500 13px var(--font-body); color: var(--text-2); }
.passo.feito .passo-txt b { color: var(--text-2); text-decoration: line-through; }
.passo .seta { width: 18px; height: 18px; stroke: var(--text-3); flex: none; }
.lista-objetivos.destaque { animation: destaque-lista 1.4s ease; border-radius: 20px; }
@keyframes destaque-lista { 0%, 100% { box-shadow: 0 0 0 0 rgba(91, 16, 184, 0); } 30% { box-shadow: 0 0 0 4px rgba(91, 16, 184, 0.35); } }
html.reduzir-mov .lista-objetivos.destaque { animation: none; }
@media (prefers-reduced-motion: reduce) { .lista-objetivos.destaque { animation: none; } }

/* Folha do "+": ferramentas de IA em grade, estudar e compartilhar */
.folha-registrar { max-height: 92dvh; overflow-y: auto; gap: 10px; }
.folha-registrar h2 { margin-bottom: 2px; }
.reg-rotulo { margin: 8px 0 0 !important; font: 700 12px var(--font-body) !important; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-2) !important; }
.reg-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.reg-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 92px; padding: 14px; background: var(--ink-900); border: 0; border-radius: 18px; color: var(--text); text-align: left; cursor: pointer; font-family: var(--font-body); transition: transform 0.12s, background 0.15s; }
.reg-tile .ic { width: 26px; height: 26px; color: var(--violet-600); margin-bottom: 2px; }
.reg-tile b { font: 800 15px / 1.15 var(--font-body); }
.reg-tile small { color: var(--text-2); font: 500 12px / 1.3 var(--font-body); }
.reg-tile:hover { background: var(--ink-950); }
.reg-tile:active { transform: scale(0.97); }
.reg-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.reg-chip { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 10px; background: var(--ink-900); border: 0; border-radius: 14px; color: var(--text); font: 700 14px var(--font-body); cursor: pointer; }
.reg-chip .ic { width: 20px; height: 20px; color: var(--violet-600); }
.reg-chip:hover { background: var(--ink-950); }
.reg-todas { align-self: center; margin-top: 2px; }

/* Continue estudando: próximos passos no fim dos resultados de IA */
.proximos { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.proximos h3 { margin: 0 0 2px; font: 800 17px var(--font-display); color: var(--text); }
.proximos .botao-secundario { margin-top: 0; text-align: left; }
.proximos .botao-secundario small { display: block; margin-top: 2px; color: var(--text-2); font: 500 12px var(--font-body); }

/* ---------- Navegação reorganizada: Treinar e Ferramentas (2026-10-10) ---------- */

/* Treinar: busca, quiz/flashcards com IA e jogos em grade */
.tela-objetivo .busca-falsa { margin-bottom: 14px; }
.tela-objetivo #ia-slot { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.tela-objetivo .rotulo-secao { margin: 14px 0 2px; }
.treino-ia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.treino-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; border: 0; border-radius: 20px; color: #fff; text-align: left; cursor: pointer; font-family: var(--font-body); transition: transform 0.12s; min-height: 124px; }
.treino-card:nth-child(1) { background: linear-gradient(135deg, #5B10B8, #8B3FE0); }
.treino-card:nth-child(2) { background: linear-gradient(135deg, #D6247A, #FF6AA8); }
.treino-card:active { transform: scale(0.97); }
.treino-icone { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 6px; border-radius: 12px; background: rgba(255, 255, 255, 0.22); }
.treino-icone .ic { width: 22px; height: 22px; color: #fff; stroke: #fff; }
.treino-card strong { font: 800 17px / 1.15 var(--font-body); }
.treino-card small { font: 500 12.5px / 1.3 var(--font-body); color: rgba(255, 255, 255, 0.86); }
.tela-objetivo .ia-decks { width: 100%; margin: 0; }
.tela-objetivo .revisao-card, .tela-objetivo .simulado-card { margin-top: 0; }
.grade-areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.grade-areas > .lista-objetivos { display: contents; }
.grade-areas .linha-jogo { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px; min-height: 124px; padding: 16px; border: 0; border-radius: 20px; background: var(--ink-800); box-shadow: 0 0 0 1px var(--line); }
.grade-areas .linha-jogo:hover { background: var(--ink-700); }
.grade-areas .linha-jogo .seta { display: none; }
.grade-areas .linha-jogo-texto { gap: 2px; width: 100%; }
.grade-areas .linha-jogo-nome { font-size: 16px; }
.grade-areas .linha-jogo-desc { font-size: 12.5px; }
.grade-areas .anel { width: 46px; height: 46px; padding: 0; border-radius: 14px; background: linear-gradient(135deg, #5B10B8, #8B3FE0); }
.grade-areas .miolo { background: transparent; color: #fff; border-radius: 14px; }
.grade-areas .miolo .ic { width: 24px; height: 24px; stroke: #fff; }
.grade-areas .linha-jogo:nth-child(5n+2) .anel { background: linear-gradient(135deg, #D6247A, #FF6AA8); }
.grade-areas .linha-jogo:nth-child(5n+3) .anel { background: linear-gradient(135deg, #E08A00, #FFC13D); }
.grade-areas .linha-jogo:nth-child(5n+4) .anel { background: linear-gradient(135deg, #0E8F83, #2CCBB9); }
.grade-areas .linha-jogo:nth-child(5n+5) .anel { background: linear-gradient(135deg, #2C5FD8, #5E95FF); }

/* Ferramentas: cartões grandes */
.tela-ferramentas .ia-subtitulo { padding: 0; margin: -6px 0 10px; }
.tela-ferramentas .ia-cota { padding: 0; }
.ferr-lista { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.ferr-card { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; border: 0; border-radius: 20px; background: var(--ink-800); box-shadow: 0 0 0 1px var(--line); text-align: left; cursor: pointer; font-family: var(--font-body); color: var(--text); transition: transform 0.12s; }
.ferr-card:active { transform: scale(0.98); }
.ferr-icone { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: linear-gradient(135deg, #5B10B8, #8B3FE0); }
.ferr-card:nth-child(2) .ferr-icone { background: linear-gradient(135deg, #D6247A, #FF6AA8); }
.ferr-card:nth-child(3) .ferr-icone { background: linear-gradient(135deg, #0E8F83, #2CCBB9); }
.ferr-card:nth-child(4) .ferr-icone { background: linear-gradient(135deg, #E08A00, #FFC13D); }
.ferr-icone .ic { width: 28px; height: 28px; color: #fff; stroke: #fff; }
.ferr-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ferr-texto strong { font: 800 17px / 1.15 var(--font-body); }
.ferr-texto span { font: 500 13.5px / 1.35 var(--font-body); color: var(--text-2); }
.ferr-texto em { font: 700 12px var(--font-body); font-style: normal; color: var(--violet-600); }
.ferr-card .seta { width: 20px; height: 20px; color: var(--text-3); flex: none; }
.ferr-treinar { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 16px; padding: 14px 16px; border: 0; border-radius: 16px; background: rgba(91, 16, 184, 0.07); text-align: left; cursor: pointer; font-family: var(--font-body); color: var(--text); }
.ferr-treinar span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ferr-treinar strong { font: 800 15px var(--font-body); }
.ferr-treinar small { font: 500 13px var(--font-body); color: var(--text-2); }
.ferr-treinar .seta { width: 20px; height: 20px; color: var(--text-3); flex: none; }
.tela-objetivo #revisao-slot:not(:empty), .tela-objetivo #simulado-slot:not(:empty) { margin-top: 10px; }
.opcao-registrar > .ic { width: 30px; height: 30px; color: var(--violet-600); flex: none; }

/* Como funcionam os flashcards (explicação + botão ?) */
.revisao-nivel-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-ajuda { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--violet-500); background: transparent; color: var(--violet-600); font: 800 16px var(--font-body); cursor: pointer; }
.card-ajuda:hover { background: rgba(91, 16, 184, 0.08); }
.card-avaliar-dica { margin: 4px 0 -2px; text-align: center; color: var(--text-2); font: 600 13px var(--font-body); }
.cards-passos { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; color: var(--text); font: 500 15px / 1.4 var(--font-body); }
.cards-passos b { font-weight: 800; }
.cards-sub { margin: 4px 0 0 !important; color: var(--text-2) !important; font: 500 14px / 1.45 var(--font-body) !important; }
.cards-sub b { color: var(--text); }
.cards-exemplo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cards-exemplo .card-nota { min-height: 58px; text-align: center; }
.cards-exemplo .card-nota small { font-size: 10.5px; line-height: 1.2; }

/* Montar simulado */
.sim-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sim-chips .filtro-chip { min-height: 40px; }
.simulado-tempo.sem-tempo { color: var(--text-2); font-weight: 600; font-size: 13px; }

/* Tela de modos de jogo: cartões coloridos */
.jogo-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.jogo-tile { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px; min-height: 124px; padding: 16px; border: 0; border-radius: 20px; background: var(--ink-800); box-shadow: 0 0 0 1px var(--line); color: var(--text); text-align: left; cursor: pointer; font-family: var(--font-body); transition: transform 0.12s, background 0.15s; }
.jogo-tile:hover { background: var(--ink-700); }
.jogo-tile:active { transform: scale(0.97); }
.jogo-tile.largo { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 0; gap: 14px; }
.jogo-tile-icone { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, #5B10B8, #8B3FE0); }
.jogo-tile-icone .ic { width: 24px; height: 24px; color: #fff; stroke: #fff; }
.jogo-tile.cor-1 .jogo-tile-icone { background: linear-gradient(135deg, #D6247A, #FF6AA8); }
.jogo-tile.cor-2 .jogo-tile-icone { background: linear-gradient(135deg, #E08A00, #FFC13D); }
.jogo-tile.cor-3 .jogo-tile-icone { background: linear-gradient(135deg, #0E8F83, #2CCBB9); }
.jogo-tile.cor-4 .jogo-tile-icone { background: linear-gradient(135deg, #2C5FD8, #5E95FF); }
.jogo-tile-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jogo-tile-texto b { font: 800 16px / 1.15 var(--font-body); }
.jogo-tile-texto small { font: 500 12.5px / 1.35 var(--font-body); color: var(--text-2); }
.tela-hub .jogo-grade + .sub-titulo { margin-top: 24px; }

/* Mapa mental: cartões coloridos ligados ao tema por linhas com seta */
.mapa2 { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 6px 0 10px 30px; color: #4a3b78; }
.mapa2-fios { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: visible; }
.mapa2-col { display: contents; }
.mapa2-centro, .mapa2-card { position: relative; z-index: 1; }
.mapa2-centro { order: -1; justify-self: center; transform: translateX(-15px); display: grid; place-items: center; min-width: 170px; max-width: 260px; min-height: 96px; padding: 24px 34px; border-radius: 50%; background: linear-gradient(135deg, #5B10B8, #8B3FE0); color: #fff; font: 800 20px / 1.2 var(--font-display); text-align: center; box-shadow: 0 14px 30px -14px rgba(91, 16, 184, 0.7); }
.mapa2-card { background: #fff; border: 1.5px solid #3b2f63; border-radius: 14px; overflow: hidden; color: var(--text); }
.mapa2-card b { display: block; padding: 8px 12px; border-bottom: 1.5px solid #3b2f63; font: 800 15px / 1.2 var(--font-body); }
.mapa2-card ul { margin: 0; padding: 10px 12px 12px 28px; display: flex; flex-direction: column; gap: 4px; font: 500 13.5px / 1.4 var(--font-body); }
.mapa2-card.cor-0 b { background: #FFE29A; } .mapa2-card.cor-1 b { background: #E6CCFF; } .mapa2-card.cor-2 b { background: #D2F5C4; }
.mapa2-card.cor-3 b { background: #BFE6F7; } .mapa2-card.cor-4 b { background: #FFC9DE; } .mapa2-card.cor-5 b { background: #FFF3A0; }
.proximos .botao-secundario { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; height: auto; min-height: 56px; padding: 10px 16px; }

/* Flashcards coloridos (cada card tem a sua cor, como cartões de papel) e verso em partes */
.cartao-cor-0 { --cc-bg: #DDF4C8; --cc-borda: #8CCB6B; }
.cartao-cor-1 { --cc-bg: #FFF3A6; --cc-borda: #E2C94A; }
.cartao-cor-2 { --cc-bg: #FFD0E2; --cc-borda: #EE8DB4; }
.cartao-cor-3 { --cc-bg: #C6E9F8; --cc-borda: #7CBBDA; }
.cartao-cor-4 { --cc-bg: #E9D4FF; --cc-borda: #B58AE6; }
.cartao-cor-5 { --cc-bg: #FFDDB5; --cc-borda: #EBA55C; }
.flash-cena[class*="cartao-cor-"] .flash-face { background: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(21, 10, 46, 0.1) 31px 32px), var(--cc-bg); border-top: 12px solid var(--cc-borda); box-shadow: 0 0 0 1.5px rgba(21, 10, 46, 0.18), 0 16px 34px -18px rgba(21, 10, 46, 0.35); }
.flash-cena[class*="cartao-cor-"] .flash-rotulo { color: rgba(21, 10, 46, 0.62); }
.flash-cena[class*="cartao-cor-"] .flash-dica { color: rgba(21, 10, 46, 0.55); }
.flash-verso-face.verso-com-estrutura { align-items: stretch; justify-content: flex-start; text-align: left; gap: 10px; padding-top: 20px; }
.verso-com-estrutura .flash-rotulo { align-self: flex-start; }
.verso-estrut { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.verso-destaque { align-self: flex-start; padding: 0 6px; font: 800 25px / 1.2 var(--font-display); color: var(--text); background: linear-gradient(transparent 58%, var(--cc-borda) 58%); overflow-wrap: anywhere; }
.verso-corpo { margin: 0; font: 600 16px / 1.45 var(--font-body); color: var(--text); }
.verso-pontos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font: 600 15px / 1.4 var(--font-body); color: var(--text); }
.verso-pontos li::marker { color: var(--text); }
.verso-dica { padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.72); border: 1.5px dashed var(--cc-borda); font: 600 14px / 1.4 var(--font-body); color: var(--text); }
.deck-card[class*="cartao-cor-"] { border-left: 8px solid var(--cc-borda); }
.ec-dica { display: block; margin: -4px 0 6px; color: var(--text-3); font: 500 12px / 1.35 var(--font-body); }

/* Resultado de IA em blocos: faixa de título, cartões por seção, etiquetas de nota, dica e resposta */
.ia-resultado-corpo { display: flex; flex-direction: column; gap: 12px; }
.ia-resultado-corpo > p { margin: 0; font: 500 15px / 1.55 var(--font-body); color: var(--text); }
.ia-titulo-faixa { padding: 16px 18px; border-radius: 18px; background: linear-gradient(135deg, #5B10B8, #8B3FE0); color: #fff; font: 800 20px / 1.2 var(--font-display); box-shadow: 0 14px 28px -16px rgba(91, 16, 184, 0.7); }
.ia-nota-total { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 18px; border-radius: 22px; color: #fff; text-align: center; box-shadow: 0 14px 28px -16px rgba(21, 10, 46, 0.5); }
.ia-nota-total.alta { background: linear-gradient(135deg, #0B7A4B, #2CCB8A); }
.ia-nota-total.media { background: linear-gradient(135deg, #D97A00, #FFC13D); color: #2a1a00; }
.ia-nota-total.baixa { background: linear-gradient(135deg, #C0245F, #FF6AA8); }
.ia-nota-total span { font: 700 12px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9; }
.ia-nota-total b { font: 800 56px / 1.05 var(--font-display); }
.ia-nota-total small { font: 600 14px var(--font-body); opacity: 0.9; }
.ia-sec { --acento: #5B10B8; padding: 14px 16px 16px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line); border-left: 6px solid var(--acento); display: flex; flex-direction: column; gap: 8px; }
.ia-sec.cor-1 { --acento: #D6247A; } .ia-sec.cor-2 { --acento: #E08A00; } .ia-sec.cor-3 { --acento: #0E8F83; } .ia-sec.cor-4 { --acento: #2C5FD8; }
.ia-sec-titulo { display: flex; align-items: center; gap: 8px; margin: 0; font: 800 17px / 1.2 var(--font-display); color: var(--text); }
.ia-sec-ponto { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--acento); }
.ia-sec-nome { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ia-badge { flex: none; padding: 3px 10px; border-radius: 999px; font: 800 13px var(--font-body); color: #fff; }
.ia-badge.alta { background: #0B7A4B; } .ia-badge.media { background: #D97A00; } .ia-badge.baixa { background: #C0245F; }
.ia-sec p { margin: 0; font: 500 15px / 1.55 var(--font-body); color: var(--text); }
.ia-sec ul, .ia-sec ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font: 500 15px / 1.5 var(--font-body); color: var(--text); }
.ia-sec li::marker { color: var(--acento); font-weight: 800; }
.ia-resultado-corpo b { font-weight: 800; background: linear-gradient(transparent 62%, rgba(139, 63, 224, 0.2) 62%); }
.ia-sec.dica { background: #FFF9DB; border-left-color: #E2C94A; --acento: #C9A400; }
.ia-sec.resposta { background: linear-gradient(135deg, #5B10B8, #8B3FE0); border-left-color: #FFE14D; box-shadow: 0 14px 28px -16px rgba(91, 16, 184, 0.7); }
.ia-sec.resposta, .ia-sec.resposta .ia-sec-titulo, .ia-sec.resposta p, .ia-sec.resposta li { color: #fff; }
.ia-sec.resposta b { background: linear-gradient(transparent 62%, rgba(255, 225, 77, 0.45) 62%); }
.ia-nota-rodape { color: var(--text-2) !important; font: 500 13px / 1.4 var(--font-body) !important; }
.ia-nota-total b, .ia-titulo-faixa b, .ia-sec-titulo b { background: none; }

/* Perfil (Você): cartão de topo em degradê, resumo em blocos e atividades com ícone colorido */
#tela-perfil .perfil-cartao { margin: 0 0 14px; padding: 18px 16px 16px; border-radius: 26px; background: linear-gradient(135deg, #4A0E9C 0%, #7A2FD6 55%, #D6247A 135%); color: #fff; box-shadow: 0 18px 34px -20px rgba(91, 16, 184, 0.8); }
#tela-perfil .perfil-linha .avatar-anel { background: rgba(255, 255, 255, 0.85); }
#tela-perfil .perfil-nome { color: #fff; }
#tela-perfil .perfil-arroba, #tela-perfil .perfil-bio { color: rgba(255, 255, 255, 0.78); }
#tela-perfil .social-contagem .contador, #tela-perfil .social-contagem .contador b { color: #fff; }
#tela-perfil .social-contagem .contador span { color: rgba(255, 255, 255, 0.78); }
#tela-perfil .perfil-nome-linha .topo-icone { color: #fff; }
#tela-perfil .perfil-botoes .botao-secundario { background: rgba(255, 255, 255, 0.2); color: #fff; }
#tela-perfil .perfil-botoes .botao-secundario:hover { background: rgba(255, 255, 255, 0.3); }
.perfil-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
.perfil-tile { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px 14px 12px; border-radius: 20px; background: var(--ink-800); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.perfil-tile-ico { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 6px; border-radius: 11px; background: linear-gradient(135deg, #5B10B8, #8B3FE0); }
.perfil-tile-ico .ic { width: 20px; height: 20px; color: #fff; stroke: #fff; }
.perfil-tile.t1 .perfil-tile-ico { background: linear-gradient(135deg, #E0480E, #FFB020); }
.perfil-tile.t2 .perfil-tile-ico { background: linear-gradient(135deg, #0E8F83, #2CCBB9); }
.perfil-tile.t3 .perfil-tile-ico { background: linear-gradient(135deg, #D6247A, #FF6AA8); }
.perfil-tile b { font: 800 22px / 1.1 var(--font-display); color: var(--text); }
.perfil-tile small { font: 500 12.5px / 1.3 var(--font-body); color: var(--text-2); }
.perfil-tile-barra { height: 6px; margin-top: 8px; border-radius: 3px; background: rgba(91, 16, 184, 0.14); overflow: hidden; }
.perfil-tile-barra > div { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #5B10B8, #D6247A); transform-origin: left; }
#perfil-atividades .atv-linha { padding: 10px 12px; margin-bottom: 8px; border-radius: 16px; background: var(--ink-800); box-shadow: 0 0 0 1px var(--line); }
.atv-linha .clube-icone { border-radius: 13px; background: linear-gradient(135deg, #5B10B8, #8B3FE0); }
.atv-linha .clube-icone .ic { color: #fff; stroke: #fff; }
.atv-linha .clube-icone.atv-estudo { background: linear-gradient(135deg, #0E8F83, #2CCBB9); }
.atv-linha .clube-icone.atv-texto { background: linear-gradient(135deg, #D6247A, #FF6AA8); }
.atv-linha .clube-icone.atv-marco { background: linear-gradient(135deg, #E08A00, #FFC13D); }
#tela-perfil .social-contagem .contador:first-child { display: none; } /* o tempo de estudo já aparece no bloco de resumo */

/* Aba Progresso: cartões, gráfico da semana com meta, histórico e raio-X */
.prog-card { margin: 0 0 12px; padding: 16px; border-radius: 22px; background: var(--ink-800); box-shadow: 0 0 0 1px var(--line); border-top: 0; }
.prog-titulo { margin: 0 0 8px; color: var(--text-3); font: 800 12px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.prog-card .semana-cab { margin: 0 0 8px; }
.prog-card .semana-resumo { font-size: 14px; }
.prog-card .semana-resumo b { font: 800 24px var(--font-display); }
.meta-barra { height: 10px; margin: 0 0 14px; border-radius: 999px; background: rgba(91, 16, 184, 0.12); overflow: hidden; }
.meta-barra i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #5B10B8, #D6247A); transform-origin: left; transition: transform 0.6s var(--ease-out); }
.prog-card .semana-grafico { height: 96px; gap: 8px; }
.prog-card .barra-dia { position: relative; gap: 4px; }
.prog-card .barra-dia em { height: 14px; font: 700 10px var(--font-body); font-style: normal; color: var(--text-2); }
.prog-card .barra-dia-col { border-bottom: 0; background: rgba(91, 16, 184, 0.07); border-radius: 10px; }
.prog-card .barra-dia-col i { border-radius: 10px; background: linear-gradient(180deg, #8B3FE0, #5B10B8); }
.prog-card .barra-dia.hoje .barra-dia-col i { background: linear-gradient(180deg, #FF6AA8, #D6247A); }
.prog-card .barra-dia.hoje span { color: var(--text); }
.prog-card .perfil-stats { margin-top: 10px; font-size: 12.5px; color: var(--text-2); }
[data-ppainel="plano"] .nota-card, [data-ppainel="plano"] .plano-card { margin: 0 0 12px; padding: 18px 16px; border: 0; border-radius: 22px; background: var(--ink-800); box-shadow: 0 0 0 1px var(--line); }
[data-ppainel="plano"] .nota-card-vazio .nota-card-icone, [data-ppainel="plano"] .plano-vazio .nota-card-icone { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 4px; border-radius: 16px; background: linear-gradient(135deg, #5B10B8, #8B3FE0); }
[data-ppainel="plano"] .nota-card-vazio .nota-card-icone .ic, [data-ppainel="plano"] .plano-vazio .nota-card-icone .ic { width: 28px; height: 28px; stroke: #fff; color: #fff; }
[data-ppainel="plano"] .plano-vazio .nota-card-icone { background: linear-gradient(135deg, #D6247A, #FF6AA8); }
#perfil-raiox { margin: 0 0 12px; }
#perfil-raiox > .rotulo-secao { margin: 8px 2px 8px; }
#perfil-raiox .raiox-item { margin: 0 0 10px; padding: 12px 14px; border-radius: 18px; background: var(--ink-800); box-shadow: 0 0 0 1px var(--line); }
#perfil-raiox .raiox-barra { height: 8px; margin-top: 6px; border-radius: 4px; }
#perfil-raiox .raiox-tag { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(21, 10, 46, 0.06); }
#perfil-raiox .raiox-sub { padding-left: 12px; margin-top: -4px; }
#perfil-raiox .raiox-sub .raiox-item { padding: 8px 12px; box-shadow: none; background: transparent; border-left: 3px solid var(--line); border-radius: 0; margin-bottom: 4px; }
.prog-card .barra-dia-col i.vazia { background: transparent; }
.prog-card .semana-cab { flex-wrap: wrap; align-items: baseline; row-gap: 2px; }
.prog-card .semana-cab .link-mini { white-space: nowrap; margin-left: auto; }
.prog-card .semana-resumo { flex: 1 1 200px; }
.prog-card .semana-resumo .meta-txt { display: block; margin-top: 2px; }

/* Configurações: grupos, ícones coloridos e linha de plano */
#menu-config .menu-grupo { margin: 14px 4px 8px; color: var(--text-3); font: 800 12px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
#menu-config .menu-config { margin-bottom: 4px; }
.menu-linha > .menu-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: linear-gradient(135deg, #5B10B8, #8B3FE0); }
.menu-ico .ic { width: 22px; height: 22px; color: #fff; stroke: #fff; }
.menu-ico.mi-1 { background: linear-gradient(135deg, #0E8F83, #2CCBB9); }
.menu-ico.mi-2 { background: linear-gradient(135deg, #D6247A, #FF6AA8); }
.menu-ico.mi-3 { background: linear-gradient(135deg, #E08A00, #FFC13D); }
.menu-ico.mi-4 { background: linear-gradient(135deg, #2C5FD8, #5E95FF); }
.menu-ico.mi-5 { background: linear-gradient(135deg, #6B5F8A, #9A8FB8); }
.menu-ico.mi-6 { background: linear-gradient(135deg, #C0245F, #FF6AA8); }
.menu-linha > .menu-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.menu-admin[hidden] { display: none; }
#tela-config-menu .botao-perigo { margin-top: 18px; color: #C0245F; background: rgba(214, 36, 122, 0.07); box-shadow: inset 0 0 0 2px rgba(214, 36, 122, 0.3); }
#tela-config-menu .config-resumo { background: linear-gradient(135deg, #4A0E9C, #7A2FD6 60%, #D6247A 140%); box-shadow: 0 14px 28px -18px rgba(91, 16, 184, 0.8); color: #fff; }
#tela-config-menu .config-resumo .linha-usuario-txt b { color: #fff; }
#tela-config-menu .config-resumo .linha-usuario-txt small { color: rgba(255, 255, 255, 0.8); }

/* Início: cartão "Seu dia" e posts em cartões coloridos */
.post-midia.jogo, .post-midia.estudo, .post-midia.marco { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; min-height: 0; padding: 14px 16px; color: #fff; border: 0; }
.post-midia.jogo { background: linear-gradient(135deg, #5B10B8, #8B3FE0); }
.post-midia.jogo.pm-cor-1 { background: linear-gradient(135deg, #C0245F, #FF6AA8); }
.post-midia.jogo.pm-cor-2 { background: linear-gradient(135deg, #D97A00, #FFC13D); }
.post-midia.jogo.pm-cor-3 { background: linear-gradient(135deg, #0B7F74, #2CCBB9); }
.post-midia.jogo.pm-cor-4 { background: linear-gradient(135deg, #2450C4, #5E95FF); }
.post-midia.estudo { background: linear-gradient(135deg, #0B7F74, #2CCBB9); }
.post-midia.marco { background: linear-gradient(135deg, #C98A00, #FFD24D); color: #2a1a00; }
.post-midia .pm-ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(255, 255, 255, 0.22); }
.post-midia .pm-ico .ic { width: 26px; height: 26px; color: inherit; stroke: currentColor; }
.post-midia.marco .pm-ico .ic { color: #2a1a00; width: 26px; height: 26px; }
.post-midia .pm-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.post-midia.jogo .pm-rotulo, .post-midia.estudo .pm-rotulo, .post-midia.marco .pm-rotulo { color: inherit; font-size: 17px; }
.post-midia.jogo .pm-sub, .post-midia.estudo .pm-sub, .post-midia.marco .pm-sub { color: inherit; opacity: 0.85; font-size: 13px; }
.post-midia .pm-num { flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.post-midia .pm-num b { font: 800 30px / 1 var(--font-display); }
.post-midia .pm-num small { margin-top: 2px; font: 700 11px var(--font-body); letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.85; }
.post-midia.estudo .pm-num b { font-size: 24px; }
.post-midia.texto { background: rgba(91, 16, 184, 0.07); }
.msg-post .post-midia .pm-num b { font-size: 22px; }

/* Filtro do Início */
.feed-filtro-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; }
.feed-filtro-btn .ic { width: 18px; height: 18px; }


/* ---------- Minhas redações (2026-10-10) ---------- */
.redacoes-conteudo { display: flex; flex-direction: column; gap: 14px; padding-bottom: 24px; }
.red-resumo { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; }
.red-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 16px; background: var(--ink-700); }
.red-stat small { font: 700 11px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.red-stat b { font: 900 30px / 1.05 var(--font-display); color: var(--text); }
.red-stat span { font: 600 12px var(--font-body); color: var(--text-2); }
.red-stat.destaque { background: var(--violet-600); }
.red-stat.destaque small, .red-stat.destaque span { color: rgba(255, 255, 255, 0.82); }
.red-stat.destaque b { color: #fff; }
.red-grafico { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding: 14px 10px 8px; border-radius: 18px; background: var(--ink-800); box-shadow: 0 0 0 1px var(--line); }
.red-barra { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.red-barra-val { font: 800 11px var(--font-body); color: var(--text-2); }
.red-barra-trilho { flex: 1; width: 100%; max-width: 30px; display: flex; align-items: flex-end; }
.red-barra-trilho i { display: block; width: 100%; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--violet-500), var(--violet-600)); }
.red-barra small { font: 600 10px var(--font-body); color: var(--text-3); }
.red-dica { margin: 0; font: 500 14px / 1.5 var(--font-body); color: var(--text-2); }
.red-linha { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer; color: var(--text); }
.red-linha > b { flex: none; min-width: 52px; font: 900 22px var(--font-display); color: var(--violet-600); }
.red-linha-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.red-linha-txt strong { font: 700 15px var(--font-body); }
.red-linha-txt small { font: 500 12px var(--font-body); color: var(--text-3); overflow-wrap: anywhere; }
.red-linha .seta { flex: none; width: 18px; height: 18px; color: var(--text-3); }
@media (min-width: 900px) { #tela-redacoes { max-width: 640px; margin-inline: auto; width: 100%; } }

/* ---------- Meus materiais (2026-10-10) ---------- */
.mat-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--ink-700); color: var(--violet-600); }
.mat-ico .ic { width: 22px; height: 22px; }
.mat-acoes { display: flex; flex-direction: column; gap: 8px; margin: 18px 0 6px; }
#mat-abas { margin-bottom: 14px; }
.ferr-materiais { margin: 0 0 14px; }

/* ---------- Desktop: trilho estreito só com ícones + coluna da direita, como no Instagram (2026-10-10) ---------- */
.feed-lateral { display: none; }
.feed-col { display: flex; flex-direction: column; flex: 1; min-width: 0; }
@media (min-width: 900px) {
  :root { --trilho: 76px; }
  #app, #app.com-nav { display: block; }
  #app.com-nav { padding-left: var(--trilho); }
  #app.com-nav > .tela { grid-column: auto; }

  /* trilho: o cabeçalho vira a coluna fixa da esquerda (logo em cima, atalhos embaixo) */
  .topo-app { position: fixed; left: 0; top: 0; bottom: 0; width: var(--trilho); z-index: 31; flex-direction: column; justify-content: space-between; align-items: center; padding: 18px 0 16px; border-bottom: 0; border-right: 1px solid var(--line); background: var(--nav); }
  .topo-marca-app img.wordmark { content: url("assets/simbolo-roxo.png"); width: 34px; height: 34px; }
  .topo-acoes { flex-direction: column; align-items: center; gap: 6px; }
  .topo-streak { flex-direction: column; gap: 2px; min-height: 0; margin-top: 4px; }
  .topo-streak .seg { --seg: 18px; }

  .nav-abas { position: fixed; left: 0; top: 50%; transform: translateY(-50%); width: var(--trilho); height: auto; z-index: 32; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 0; border: 0; background: transparent; }
  .nav-aba { flex: none; flex-direction: row; justify-content: center; width: 52px; height: 52px; min-height: 52px; padding: 0; border-radius: 14px; color: var(--text-2); }
  .nav-aba > span:not(.nav-mais) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nav-aba .ic { width: 26px; height: 26px; }
  .nav-aba:hover { background: var(--ink-700); color: var(--text); }
  .nav-aba.ativa { background: rgba(91, 16, 184, 0.1); color: var(--violet-700); }
  .nav-aba.ativa::before { display: none; }
  .nav-aba.ativa .ic { fill: currentColor; }
  .nav-aba.novo::after { top: 10px; left: auto; right: 10px; box-shadow: 0 0 0 2px var(--nav); }
  .nav-registrar { background: none; margin: 0; padding: 0; }
  .nav-registrar:hover { background: none; }
  .nav-mais { width: 36px; height: 36px; border-radius: 12px; background: var(--violet-600); color: #fff; }
  .nav-mais .ic { width: 20px; height: 20px; }
  .nav-abas :focus-visible, .topo-app :focus-visible { outline-color: var(--violet-600); }

  /* conteúdo centralizado no espaço que sobra */
  .tela { padding-top: 32px; }
}
/* Início: feed + coluna da direita quando cabe */
@media (min-width: 1180px) {
  .tela-feed.ativa { flex-direction: row; align-items: flex-start; justify-content: center; gap: 56px; max-width: 980px; }
  .tela-feed .feed-col { flex: 0 1 560px; max-width: 560px; }
  .feed-lateral { display: flex; flex-direction: column; flex: 0 0 300px; position: sticky; top: 32px; gap: 8px; padding-top: 6px; }
  .lat-perfil { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
  .lat-pessoa { display: flex; align-items: center; gap: 12px; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; color: var(--text); min-width: 0; }
  .lat-pessoa > span { display: flex; flex-direction: column; min-width: 0; }
  .lat-pessoa b { font: 800 15px var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lat-pessoa small { font: 500 12.5px var(--font-body); color: var(--text-3); }
  .lat-titulo { margin: 14px 0 4px; font: 800 12px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
  .lat-cartao { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 0; border-radius: 16px; background: var(--ink-700); text-align: left; cursor: pointer; color: var(--text); }
  .lat-cartao:hover { background: var(--ink-800); box-shadow: 0 0 0 1px var(--line); }
  .lat-cartao > span:last-child { display: flex; flex-direction: column; min-width: 0; }
  .lat-cartao b { font: 800 14.5px var(--font-body); }
  .lat-cartao small { font: 500 12.5px var(--font-body); color: var(--text-3); }
  .lat-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--violet-600); }
  .lat-ico .ic { width: 22px; height: 22px; }
  .lat-rodape { margin-top: 22px; font: 500 12px var(--font-body); color: var(--text-3); line-height: 1.8; }
  .lat-rodape .link-legal, .lat-rodape a { display: inline; min-height: 0; padding: 0; color: var(--text-3); font: inherit; text-decoration: none; background: none; border: 0; cursor: pointer; }
  .lat-rodape .link-legal:hover, .lat-rodape a:hover { text-decoration: underline; }
  .lat-rodape p { margin: 8px 0 0; }
}
@media (min-width: 900px) {
  .tela-feed .titulo-grande { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Início: chips de filtro visíveis e foto no ícone Você (2026-10-10) ---------- */
.feed-chip { flex: none; min-height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ink-700); color: var(--text-2); font: 700 13.5px var(--font-body); cursor: pointer; transition: background 0.15s, color 0.15s; }
.feed-chip:hover { background: var(--ink-800); box-shadow: 0 0 0 1px var(--line); }
.feed-chip[aria-pressed="true"] { background: var(--text); color: #fff; }
.nav-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 2px transparent; }
.nav-aba.ativa .nav-avatar { box-shadow: 0 0 0 2px var(--violet-600); }

/* ---------- Página de apresentação (visitante sem conta), estilo Strava (2026-10-10) ---------- */
.tela-landing { padding: 0; align-items: stretch; background: var(--ink-900); }
.land-topo { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: #fff; border-bottom: 1px solid var(--line); }
.land-topo .wordmark { height: 26px; width: auto; }
.land-entrar { width: auto; min-height: 40px; padding: 0 22px; border-radius: 999px; }

/* faixa com a foto: no celular, duas fotos lado a lado e o painel embaixo; no computador, a imagem inteira ao fundo e o painel branco no meio */
.land-faixa { background: #fff; }
.land-fotos { display: block; height: clamp(260px, 80vw, 340px); background: #fff url("assets/hero-estudo-mobile.jpg") center 60% / cover no-repeat; }
.land-fotos i { display: none; }
.land-painel { padding: 26px 20px 34px; background: #fff; text-align: center; }
.land-selo { display: inline-block; margin: 0 0 14px; padding: 6px 12px; border-radius: 999px; background: rgba(91, 16, 184, 0.1); color: var(--violet-700); font: 800 12px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; }
.land-titulo { margin: 0 0 12px; font: 900 clamp(32px, 9vw, 44px) / 1.05 var(--font-display); letter-spacing: -0.02em; color: var(--text); }
.land-sub { margin: 0 auto 22px; max-width: 420px; font: 500 16px / 1.5 var(--font-body); color: var(--text-2); }
.land-ctas { display: flex; flex-direction: column; gap: 10px; max-width: 380px; margin: 0 auto; }
.land-ctas .botao-primario, .land-ctas .botao-secundario { width: 100%; min-height: 54px; border-radius: 999px; }
.land-mini { margin: 16px auto 0; max-width: 380px; font: 500 13px / 1.5 var(--font-body); color: var(--text-3); }
.land-mini b { color: var(--text-2); }

.land-beneficios { display: grid; gap: 12px; padding: 22px 20px 28px; max-width: 1120px; width: 100%; margin-inline: auto; }
.land-card { background: #fff; border-radius: 20px; padding: 20px; box-shadow: 0 0 0 1px var(--line); }
.land-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(91, 16, 184, 0.1); color: var(--violet-600); margin-bottom: 12px; }
.land-ico .ic { width: 24px; height: 24px; }
.land-card h2 { margin: 0 0 6px; font: 800 17px var(--font-body); color: var(--text); }
.land-card p { margin: 0; font: 500 14.5px / 1.5 var(--font-body); color: var(--text-2); }
.land-rodape { padding: 8px 20px calc(36px + env(safe-area-inset-bottom)); text-align: center; font: 500 13px var(--font-body); color: var(--text-3); line-height: 1.9; }
.land-rodape .link-legal, .land-rodape a { display: inline; min-height: 0; padding: 0; color: var(--text-3); font: inherit; text-decoration: none; background: none; border: 0; cursor: pointer; }
.land-rodape .link-legal:hover, .land-rodape a:hover { text-decoration: underline; }
.land-rodape p { margin: 6px 0 0; }

@media (min-width: 900px) {
  .land-topo { padding: 16px 40px; }
  .land-faixa { display: grid; grid-template-columns: 1fr minmax(440px, 520px) 1fr; min-height: clamp(560px, 62vh, 700px); background: #fff url("assets/hero-estudo.webp") center / cover no-repeat; }
  .land-fotos { display: none; }
  .land-painel { grid-column: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 48px 36px; }
  .land-titulo { font-size: clamp(36px, 3.4vw, 46px); }
  .land-beneficios { grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 40px 40px 56px; }
}

/* ---------- Site de apresentação: seções além do topo (2026-10-10) ---------- */
.land-topo { position: sticky; top: 0; z-index: 25; }
.land-menu { display: none; }
.land-secao { padding: 48px 20px; max-width: 1120px; width: 100%; margin-inline: auto; scroll-margin-top: 76px; }
.land-sobre { margin: 0 0 8px; font: 800 12px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--violet-600); }
.land-h2 { margin: 0 0 14px; font: 900 clamp(26px, 6.5vw, 40px) / 1.1 var(--font-display); letter-spacing: -0.02em; color: var(--text); }
.land-lead { max-width: 720px; margin: 0 0 8px; font: 500 17px / 1.6 var(--font-body); color: var(--text-2); }
.land-quem, .land-plano, .land-explore { text-align: center; }
.land-quem .land-lead, .land-plano .land-lead { margin-inline: auto; }
.land-tres { display: grid; gap: 22px; margin-top: 30px; text-align: left; }
.land-tres h3 { margin: 0 0 6px; font: 800 18px var(--font-body); color: var(--text); }
.land-tres p { margin: 0; font: 500 15px / 1.55 var(--font-body); color: var(--text-2); }
.land-recursos { padding-top: 24px; }
.land-bloco { display: grid; gap: 24px; align-items: center; padding: 28px 0; }
.land-bloco-txt p { margin: 0 0 10px; font: 500 16px / 1.6 var(--font-body); color: var(--text-2); }
.land-bloco-txt p.land-nota { font-size: 13px; color: var(--text-3); }
.land-bloco-vis { display: grid; place-items: center; padding: 28px 16px; border-radius: 28px; background: radial-gradient(circle at 30% 20%, rgba(122, 77, 216, 0.16), transparent 60%), rgba(91, 16, 184, 0.06); }

/* maquetes desenhadas em HTML/CSS (iguais ao visual do app) */
.mk { width: min(360px, 100%); border-radius: 22px; background: #fff; box-shadow: 0 24px 50px -26px rgba(23, 10, 54, 0.5), 0 0 0 1px var(--line); padding: 18px; text-align: left; }
.mk small { display: block; font: 800 11px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.mk-redacao { background: linear-gradient(135deg, #0E8F83, #2CCBB9); color: #fff; box-shadow: 0 24px 50px -24px rgba(14, 143, 131, 0.7); }
.mk-redacao small { color: rgba(255, 255, 255, 0.85); }
.mk-redacao b { display: block; margin: 4px 0 12px; font: 900 56px / 1 var(--font-display); }
.mk-redacao b span { font-size: 20px; font-weight: 700; opacity: 0.85; }
.mk-redacao ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mk-redacao li { display: grid; grid-template-columns: 1fr 84px 32px; gap: 10px; align-items: center; font: 600 13px var(--font-body); }
.mk-redacao li i { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.28); position: relative; overflow: hidden; }
.mk-redacao li i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); background: #fff; border-radius: 4px; }
.mk-redacao li em { font-style: normal; font-weight: 800; text-align: right; }
.mk-mapa { background: #F6F5FA; }
.mk-centro { width: fit-content; margin: 0 auto 14px; padding: 12px 26px; border-radius: 999px; background: linear-gradient(135deg, #6A1FCB, #3F0B85); color: #fff; font: 900 18px var(--font-display); }
.mk-ramos { display: grid; gap: 8px; }
.mk-ramo { background: #fff; border: 1.5px solid #3b2f63; border-radius: 12px; overflow: hidden; font: 500 13px var(--font-body); color: var(--text); }
.mk-ramo b { display: block; padding: 6px 10px; border-bottom: 1.5px solid #3b2f63; font: 800 13.5px var(--font-body); }
.mk-ramo span { display: block; padding: 3px 10px 3px 22px; position: relative; }
.mk-ramo span:last-child { padding-bottom: 8px; }
.mk-ramo span::before { content: ""; position: absolute; left: 10px; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: #3b2f63; }
.mk-ramo.c0 b { background: #FFE29A; } .mk-ramo.c1 b { background: #E6CCFF; } .mk-ramo.c2 b { background: #D2F5C4; }
.mk-card > b { display: block; margin: 8px 0 14px; font: 800 20px / 1.25 var(--font-body); color: var(--text); }
.mk-verso { padding: 14px; border-radius: 14px; background: #FFF8E1; }
.mk-verso strong { display: block; font: 900 18px var(--font-display); color: var(--text); }
.mk-verso span { display: block; margin-top: 4px; font: 500 14px / 1.4 var(--font-body); color: var(--text-2); }
.mk-notas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 14px; }
.mk-notas i { font-style: normal; text-align: center; padding: 9px 4px; border-radius: 10px; background: var(--ink-700); font: 700 12px var(--font-body); color: var(--text-2); }
.mk-notas i.on { background: var(--violet-600); color: #fff; }
.mk-duelo { background: #170A36; color: #fff; text-align: center; }
.mk-duelo small { color: #CDBFF7; text-align: center; }
.mk-placar { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 14px 0 12px; }
.mk-placar em { display: block; font: 700 13px var(--font-body); font-style: normal; color: #CDBFF7; }
.mk-placar b { display: block; font: 900 64px / 1 var(--font-display); color: #FFE14D; text-shadow: 0 0 18px rgba(255, 225, 77, 0.45); }
.mk-placar > span { font: 800 22px var(--font-display); color: #CDBFF7; }
.mk-seq { display: inline-block; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); font: 700 13px var(--font-body); }

.land-cards3 { display: grid; gap: 14px; margin-top: 22px; text-align: left; }
.land-card h3 { margin: 0 0 6px; font: 800 17px var(--font-body); color: var(--text); }
.land-link { margin-top: 12px; padding: 0; border: 0; background: none; color: var(--violet-600); font: 800 14px var(--font-body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.land-faixa-info { background: #fff; text-align: center; padding: 52px 20px; border-block: 1px solid var(--line); }
.land-info { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 0; margin: 24px auto 28px; max-width: 900px; }
.land-info b { display: block; font: 900 22px var(--font-display); color: var(--violet-600); }
.land-info span { font: 500 14px / 1.4 var(--font-body); color: var(--text-2); }
.land-cta-faixa { width: auto; min-height: 54px; padding: 0 34px; border-radius: 999px; }
.land-faq { max-width: 800px; }
.land-faq .land-h2 { text-align: center; margin-bottom: 20px; }
.land-faq details { background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); padding: 4px 18px; margin: 10px 0; }
.land-faq summary { cursor: pointer; padding: 14px 0; font: 800 16px var(--font-body); color: var(--text); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.land-faq summary::-webkit-details-marker { display: none; }
.land-faq summary::after { content: "+"; flex: none; font: 700 22px var(--font-body); color: var(--violet-600); }
.land-faq details[open] summary::after { content: "–"; }
.land-faq details p { margin: 0 0 14px; font: 500 15px / 1.6 var(--font-body); color: var(--text-2); }
.land-final { background: linear-gradient(135deg, #5B10B8, #7A2FD6 60%, #D6247A); color: #fff; text-align: center; padding: 60px 20px; }
.land-final h2 { margin: 0 0 8px; font: 900 clamp(26px, 6vw, 38px) / 1.1 var(--font-display); letter-spacing: -0.02em; }
.land-final p { margin: 0 0 22px; font: 500 17px var(--font-body); opacity: 0.9; }
.land-cta-claro { min-height: 54px; padding: 0 34px; border: 0; border-radius: 999px; background: #fff; color: var(--violet-700); font: 800 16px var(--font-body); cursor: pointer; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.5); }
.land-cta-claro:hover { transform: translateY(-1px); }
.land-rodape { background: #fff; border-top: 1px solid var(--line); padding: 36px 20px calc(30px + env(safe-area-inset-bottom)); }
.land-rodape-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1120px; margin: 0 auto 24px; text-align: left; }
.land-rodape-cols > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.land-rodape-cols b { margin-bottom: 4px; font: 800 14px var(--font-body); color: var(--text); }
.land-rodape button, .land-rodape a { display: inline; min-height: 0; padding: 0; border: 0; background: none; color: var(--text-3); font: 500 14px var(--font-body); text-align: left; text-decoration: none; cursor: pointer; }
.land-rodape button:hover, .land-rodape a:hover { color: var(--violet-700); text-decoration: underline; }
@media (min-width: 900px) {
  .land-menu { display: flex; gap: 4px; }
  .land-menu button { padding: 9px 16px; border: 0; border-radius: 999px; background: none; color: var(--text-2); font: 700 15px var(--font-body); cursor: pointer; }
  .land-menu button:hover { background: var(--ink-700); color: var(--text); }
  .land-secao { padding: 80px 40px; }
  .land-recursos { padding-top: 32px; }
  .land-tres { grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 40px; }
  .land-bloco { grid-template-columns: 1fr 1fr; gap: 72px; padding: 48px 0; }
  .land-bloco.inverso .land-bloco-txt { order: 2; }
  .land-bloco-vis { padding: 44px 24px; }
  .land-bloco-txt p { font-size: 17px; }
  .land-cards3 { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .land-info { grid-template-columns: repeat(4, 1fr); }
  .land-final { padding: 84px 20px; }
  .land-rodape-cols { grid-template-columns: repeat(3, 1fr); padding: 0 40px; }
  .land-rodape { text-align: left; }
  .land-rodape > p { max-width: 1120px; margin: 0 auto; padding: 0 40px; }
}
@media (max-width: 899px) { .land-rodape > p { text-align: center; } }

/* ---------- Como funciona e instalar (2026-10-10) ---------- */
.land-como { text-align: center; }
.land-passos { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 18px; text-align: left; counter-reset: passo; }
.land-passos li { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; align-items: start; padding: 18px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.land-passos li b { grid-row: 1 / span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--violet-600); color: #fff; font: 900 20px var(--font-display); }
.land-passos h3 { margin: 2px 0 4px; font: 800 17px var(--font-body); color: var(--text); }
.land-passos p { margin: 0; font: 500 14.5px / 1.5 var(--font-body); color: var(--text-2); }
.land-instalar { display: block; margin: 10px auto 0; }
@media (min-width: 900px) {
  .land-passos { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .land-passos li { grid-template-columns: 1fr; row-gap: 6px; padding: 26px 22px; }
  .land-passos li b { grid-row: auto; margin-bottom: 8px; }
}

/* ---------- Voltar nas telas de entrada (2026-10-10) ---------- */
.tela-auth > .auth-topo { display: block; text-align: left; margin-bottom: 0; }
.auth-voltar { min-height: 40px; padding: 0 4px; border: 0; background: none; color: var(--text-2); font: 700 15px var(--font-body); cursor: pointer; }
.auth-voltar:hover { color: var(--violet-700); }

/* ---------- Primeiros passos (2026-10-11) ---------- */
.passos-card { margin: 0 0 14px; padding: 14px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.passos-card[hidden] { display: none; }
.passos-topo { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.passos-topo b { font: 800 16px var(--font-body); color: var(--text); }
.passos-topo span { font: 700 13px var(--font-body); color: var(--text-2); }
.passos-fechar { margin-left: auto; min-height: 32px; padding: 0 4px; border: 0; background: none; color: var(--text-2); font: 600 13px var(--font-body); cursor: pointer; }
.passos-barra { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; margin-bottom: 8px; }
.passos-barra i { display: block; height: 100%; border-radius: 99px; background: var(--violet-600); transition: width .3s; }
.passo-linha { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 6px; border: 0; border-radius: 14px; background: none; text-align: left; cursor: pointer; font-family: var(--font-body); }
.passo-linha:hover:not(:disabled) { background: var(--violet-50, #f3edff); }
.passo-marca { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line); color: #fff; font-weight: 900; font-size: 15px; }
.passo-linha.feito .passo-marca { background: var(--violet-600); box-shadow: none; }
.passo-txt { display: grid; gap: 2px; }
.passo-txt b { font: 700 15px var(--font-body); color: var(--text); }
.passo-txt small { font: 500 13px / 1.35 var(--font-body); color: var(--text-2); }
.passo-linha.feito .passo-txt b { color: var(--text-2); text-decoration: line-through; }

/* ---------- Posts com foto (2026-10-11) ---------- */
.post-midia.foto { position: relative; display: block; padding: 0; min-height: 0; aspect-ratio: auto; background: var(--line); overflow: hidden; }
.post-foto-img { display: block; width: 100%; max-height: 560px; object-fit: cover; }
.post-cat { position: absolute; left: 10px; bottom: 10px; padding: 5px 11px; border-radius: 99px; background: rgba(27, 14, 51, .72); color: #fff; font: 700 12px var(--font-body); backdrop-filter: blur(4px); }
.post-legenda { margin: 8px 14px 2px; font: 500 15px / 1.45 var(--font-body); color: var(--text); overflow-wrap: anywhere; }
.cp-foto { margin-bottom: 8px; }
.cp-foto-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; border: 2px dashed var(--line); border-radius: 16px; background: none; color: var(--violet-700); font: 700 15px var(--font-body); cursor: pointer; }
.cp-foto-btn .ic { width: 22px; height: 22px; }
.cp-foto-prev img { display: block; width: 100%; max-height: 260px; object-fit: cover; border-radius: 16px; }
.cp-foto-prev .link-mini { margin-top: 6px; }
.cp-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.compor-aviso { display: block; margin: 4px 0 8px; color: var(--text-2); font: 500 12px / 1.4 var(--font-body); }

/* ---------- Moderação de fotos e grade de fotos do perfil (2026-10-11) ---------- */
.grade-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 0 0 14px; border-radius: 14px; overflow: hidden; }
.grade-foto { position: relative; display: block; aspect-ratio: 1; padding: 0; border: 0; background: var(--line); cursor: pointer; }
.grade-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.denuncia-foto { display: block; margin-top: 8px; }
.denuncia-foto img { display: block; max-width: 180px; max-height: 180px; border-radius: 12px; object-fit: cover; }
.denuncia-acoes { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }

/* ---------- Calendário de estudo (2026-10-11) ---------- */
.cal-card { padding: 16px; }
.cal-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.cal-cab .prog-titulo { margin: 0; }
.cal-nav { display: flex; align-items: center; gap: 6px; font: 700 14px var(--font-body); color: var(--text); }
.cal-nav button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--ink-700); color: var(--text); font: 800 20px / 1 var(--font-body); cursor: pointer; }
.cal-nav button:disabled { opacity: .35; cursor: default; }
.cal-resumo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 14px; text-align: center; }
.cal-resumo b { display: block; font: 900 24px var(--font-display); color: var(--text); }
.cal-resumo small { color: var(--text-3); font: 600 12px var(--font-body); }
.cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; }
.cal-grade > span:not([class]) { font: 700 11px var(--font-body); color: var(--text-3); }
.cal-dia { position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: var(--ink-700); color: var(--text-2); font: 700 12px var(--font-body); overflow: hidden; }
.cal-dia b { font-weight: 700; }
.cal-dia.estudou { background: var(--violet-600); color: #fff; }
.cal-dia.futuro { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--text-3); opacity: .6; }
.cal-dia.hoje { box-shadow: 0 0 0 2px var(--zap), 0 0 0 4px rgba(255, 225, 77, 0.35); }
.cal-dia.foto { cursor: pointer; }
.cal-dia.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cal-dia.foto b { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 0 1px; background: linear-gradient(transparent, rgba(23, 10, 54, .75)); color: #fff; font-size: 10px; line-height: 1; }

/* ---------- Site: modelo de seções com celular (2026-10-11) ---------- */
/* Faixa escura na nossa cor (roxo profundo), etiqueta amarela, título grande e o celular mostrando o app. */
.land-recursos { max-width: none; background: linear-gradient(180deg, #170A36 0%, #22104a 50%, #170A36 100%); padding-inline: max(20px, calc((100vw - 1120px) / 2 + 20px)); padding-block: 56px; }
.land-recursos .land-h2 { color: #fff; }
.land-recursos .land-sobre { color: var(--zap); }
.land-recursos .land-bloco-txt p { color: #CDBFF7; }
.land-recursos .land-bloco-txt p.land-nota { color: #9C8CC8; }
.land-recursos .land-bloco { padding: 36px 0; }
.land-recursos .land-bloco-vis { background: radial-gradient(circle at 50% 35%, rgba(122, 77, 216, 0.42), transparent 62%); padding: 12px 0; }
.fone { position: relative; width: min(272px, 82vw); aspect-ratio: 9 / 18.4; padding: 9px; border-radius: 44px; background: #0b0618; box-shadow: 0 0 0 1.5px #3a2a63, 0 44px 80px -28px rgba(122, 77, 216, 0.75), inset 0 0 0 1px #1d1238; }
.fone::before { content: ""; position: absolute; z-index: 3; top: 17px; left: 50%; width: 76px; height: 20px; margin-left: -38px; border-radius: 99px; background: #0b0618; }
.fone-tela { display: flex; flex-direction: column; height: 100%; border-radius: 36px; background: #F6F5FA; overflow: hidden; }
.fone-topo { display: flex; align-items: center; justify-content: space-between; padding: 38px 14px 8px; background: #fff; box-shadow: 0 1px 0 var(--line); }
.fone-icos { display: flex; gap: 8px; }
.fone-icos i { width: 14px; height: 14px; border-radius: 50%; background: var(--ink-700); }
.fone-corpo { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 12px; overflow: hidden; }
.fone-corpo .mk { width: 100%; padding: 14px; border-radius: 18px; box-shadow: 0 10px 24px -14px rgba(23, 10, 54, 0.5), 0 0 0 1px var(--line); }
.fone-corpo .mk-redacao b { font-size: 46px; }
.fone-nav { display: flex; align-items: center; justify-content: space-around; padding: 10px 12px 16px; background: #fff; box-shadow: 0 -1px 0 var(--line); }
.fone-nav i { width: 20px; height: 20px; border-radius: 6px; background: var(--ink-700); }
.fone-nav i.on { background: var(--violet-600); }
.fone-nav i.mais { width: 26px; height: 26px; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--violet-600); background: none; }
.fp-post { background: #fff; border-radius: 16px; padding: 10px; box-shadow: 0 0 0 1px var(--line); }
.fp-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.fp-av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--violet-600); color: #fff; font: 800 13px var(--font-body); font-style: normal; }
.fp-av.b { background: #D6247A; }
.fp-topo b { display: block; font: 800 12px var(--font-body); color: var(--text); }
.fp-topo small { color: var(--text-3); font: 500 10px var(--font-body); }
.fp-foto { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 1 / 0.86; background: var(--line); }
.fp-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 45%; }
.fp-cat { position: absolute; left: 8px; bottom: 8px; padding: 4px 9px; border-radius: 99px; background: rgba(27, 14, 51, .72); color: #fff; font: 700 10px var(--font-body); }
.fp-leg { margin: 8px 2px 4px; font: 500 12px / 1.35 var(--font-body); color: var(--text); }
.fp-acoes { display: flex; gap: 14px; font: 700 11px var(--font-body); color: var(--text-2); }
.fp-marco { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; background: linear-gradient(135deg, #0E8F83, #2CCBB9); color: #fff; }
.fp-marco small { display: block; font: 700 9px var(--font-body); letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.fp-marco b { font: 900 15px var(--font-display); }
.fp-ico { flex: none; width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, .25); }
.fp-meta { padding-bottom: 10px; }
.fp-cal { background: #fff; border-radius: 16px; padding: 12px; box-shadow: 0 0 0 1px var(--line); }
.fp-cal .cal-grade { gap: 4px; }
.fp-cal .cal-dia { font-size: 9px; }
.fp-cal .cal-resumo b { font-size: 18px; }
.fp-cal .cal-resumo small { font-size: 9px; }
.fp-cal .prog-titulo { font-size: 13px; }
.fp-cal .cal-nav { font-size: 11px; }
.fp-story { display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: 100%; padding: 22px 16px; border-radius: 18px; background: linear-gradient(160deg, #3F0B85, #170A36); color: #fff; text-align: center; }
.fp-story-num b { display: block; font: 900 54px / 1 var(--font-display); color: var(--zap); text-shadow: 0 0 22px rgba(255, 225, 77, .4); }
.fp-story-num small { display: block; margin-top: 4px; font: 700 12px var(--font-body); color: #CDBFF7; }
.fp-story-linha { display: flex; gap: 22px; }
.fp-story-linha b { display: block; font: 900 18px var(--font-display); }
.fp-story-linha small { font: 600 10px var(--font-body); color: #CDBFF7; }
.fp-story em { font: 700 12px var(--font-body); font-style: normal; color: #CDBFF7; }
.fp-nivel { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-left: 3px; padding: 0 3px; border-radius: 99px; background: #EDE5FF; color: var(--violet-700); font: 800 9px var(--font-body); font-style: normal; vertical-align: 1px; }
.fp-nivel.n2 { background: #FFE9A8; color: #6b4a00; } .fp-nivel.n3 { background: #FFD1E3; color: #8a1148; }
.fp-av.c { background: #0E8F83; }
.fp-abas { display: flex; justify-content: space-around; padding: 2px 0 6px; font: 700 11px var(--font-body); color: var(--text-3); }
.fp-abas .on { color: var(--text); box-shadow: 0 2px 0 var(--violet-600); padding-bottom: 3px; }
.fp-fotos { display: flex; gap: 6px; }
.fp-fotos .fp-foto { flex: 1 1 0; min-width: 0; aspect-ratio: 1 / 1.1; }
.fp-post > .fp-leg { margin: 0 2px 8px; }
.fones { position: relative; display: flex; justify-content: center; }
.fone.fundo { display: none; }
@media (min-width: 900px) {
  .fones { min-height: 600px; }
  .fone.fundo { display: block; position: absolute; left: 4%; top: 36px; width: 262px; opacity: .78; transform: rotate(-8deg); filter: saturate(.9); }
  .fones .fone:not(.fundo) { position: relative; z-index: 2; margin-left: 150px; transform: rotate(4deg) !important; }
}
@media (min-width: 900px) {
  .land-recursos { padding-block: 84px; }
  .land-recursos .land-bloco { padding: 56px 0; }
  .land-recursos .land-h2 { font-size: clamp(34px, 3.6vw, 48px); }
  .fone { width: 292px; }
  .land-recursos .land-bloco:not(.inverso) .fone { transform: rotate(-3deg); }
  .land-recursos .land-bloco.inverso .fone { transform: rotate(3deg); }
}
.land-recursos .land-bloco-txt p.land-sobre { margin-bottom: 10px; color: var(--zap); font-size: 12.5px; }

/* ---------- Visual profissional (2026-10-11) ---------- */
/* Para estudante de ensino médio E de faculdade: mais sóbrio e organizado (modelo de produto profissional), mesma identidade roxa do iStudi.
   Menos degradê e rosa, cartões brancos com borda fina, cantos menos arredondados, títulos menos pesados. */
.titulo-grande { font-weight: 800; letter-spacing: -0.015em; }
.botao-primario, .botao-secundario, .botao-perigo { border-radius: 12px; }
.botao-primario { box-shadow: none; }
.botao-primario:active { box-shadow: none; }

/* Treinar */
.busca-falsa { border-radius: 12px; }
.treino-card { min-height: 108px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.treino-card:nth-child(1) { background: #4A12A0; }
.treino-card:nth-child(2) { background: #1E0F46; }
.treino-icone { border-radius: 10px; background: rgba(255, 255, 255, 0.14); }
.ia-decks, .revisao-card { border: 0; border-radius: 14px; background: var(--ink-800); box-shadow: 0 0 0 1px var(--line); }
.ia-decks:hover, .revisao-card:hover { box-shadow: 0 0 0 1px var(--violet-500); }
.deck-icone { border-radius: 10px; background: #EFEAFB; }
.deck-icone .ic { stroke: var(--violet-600); }
.linha-jogo { border-radius: 0; }
.anel { border-radius: 14px; background: #EFEAFB; }
.anel .miolo { border-radius: 11px; background: transparent; color: var(--violet-600); }

/* Ferramentas: um só tom de ícone em vez de quatro cores */
.ferr-card { border-radius: 14px; padding: 14px; }
.ferr-icone, .ferr-card:nth-child(2) .ferr-icone, .ferr-card:nth-child(3) .ferr-icone, .ferr-card:nth-child(4) .ferr-icone { width: 46px; height: 46px; border-radius: 12px; background: #EFEAFB; }
.ferr-icone .ic { width: 24px; height: 24px; color: var(--violet-600); stroke: var(--violet-600); }

/* Perfil */
#tela-perfil .perfil-cartao { border-radius: 16px; background: linear-gradient(135deg, #2A0F5E 0%, #4A12A0 100%); box-shadow: none; }
.perfil-tile, .prog-card, .nota-card, .plano-card { border-radius: 14px; }
.perfil-tile-ico, .perfil-tile.t1 .perfil-tile-ico, .perfil-tile.t2 .perfil-tile-ico, .perfil-tile.t3 .perfil-tile-ico { border-radius: 9px; background: #EFEAFB; }
.perfil-tile-ico .ic { color: var(--violet-600); stroke: var(--violet-600); }

/* Início e site */
.post-midia { border-radius: 12px; }
.land-passos li, .mk { border-radius: 14px; }
#tela-objetivo .linha-jogo { border-radius: 14px; }
#tela-objetivo .linha-jogo .anel { width: 44px; height: 44px; padding: 0; border-radius: 12px; background: #EFEAFB !important; display: grid; place-items: center; }
#tela-objetivo .linha-jogo .anel .miolo, #tela-objetivo .linha-jogo .anel > * { background: transparent; }
#tela-objetivo .linha-jogo .anel svg, #tela-objetivo .linha-jogo .anel .ic { color: var(--violet-600); stroke: var(--violet-600); width: 24px; height: 24px; }

/* ---------- Tema escuro (2026-10-11) ---------- */
/* Modelo de produto profissional (referência: FitFolio) com a identidade do iStudi: fundo quase preto com um toque de roxo,
   texto claro, roxo como cor de ação e amarelo para números e destaques. É o tema padrão; a pessoa troca em Configurações > Preferências. */
:root[data-tema="escuro"] {
  color-scheme: dark;
  --canvas: #07050D; --ink-950: #07050D; --ink-900: #0D0A16; --ink-800: #141022; --ink-700: #1E1830;
  --nav: #0D0A16; --violet-tint: #141022;
  --violet-700: #C3AEFF; --violet-600: #7B3FE4; --violet-500: #9166F0; --violet-400: #B79CFF;
  --text: #F4F1FB; --text-2: #BDB4D6; --text-3: #8F85AD; --line: rgba(255, 255, 255, 0.10);
  --danger: #FF6B9A; --success: #4ADE9A; --error: #FF6B9A; --gold: #F5C542;
}
:root[data-tema="escuro"] .wordmark { filter: brightness(0) invert(1); }
:root[data-tema="escuro"] ::selection { background: var(--violet-600); color: #fff; }

/* botões e chips que eram "escuro no claro" */
:root[data-tema="escuro"] .filtro-chip.ativo, :root[data-tema="escuro"] .story-fundos .filtro-chip.ativo, :root[data-tema="escuro"] .story-abas .filtro-chip.ativo,
:root[data-tema="escuro"] .atv-opcoes .filtro-chip.ativo, :root[data-tema="escuro"] .onb-chip.sel, :root[data-tema="escuro"] .feed-chip[aria-pressed="true"] { background: var(--violet-600); border-color: var(--violet-600); color: #fff; }
:root[data-tema="escuro"] .abas-texto .filtro-chip.ativo, :root[data-tema="escuro"] .abas-perfil .filtro-chip.ativo { background: none; border-color: transparent; color: var(--text); }
:root[data-tema="escuro"] .atv-opcoes .filtro-chip { background: var(--ink-700); }
:root[data-tema="escuro"] .botao-secundario { box-shadow: inset 0 0 0 1.5px rgba(195, 174, 255, 0.4); }
:root[data-tema="escuro"] .botao-secundario:hover { box-shadow: inset 0 0 0 1.5px rgba(195, 174, 255, 0.75); }
:root[data-tema="escuro"] .nav-registrar .nav-mais { background: var(--zap); color: var(--zap-ink); box-shadow: none; }
:root[data-tema="escuro"] .nav-registrar .nav-mais .ic { stroke: var(--zap-ink); color: var(--zap-ink); }
:root[data-tema="escuro"] .aviso-offline { background: var(--ink-700); }

/* Treinar, Ferramentas, Perfil */
:root[data-tema="escuro"] .treino-card:nth-child(1) { background: #5B21C0; }
:root[data-tema="escuro"] .treino-card:nth-child(2) { background: #1A1230; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10); }
:root[data-tema="escuro"] .deck-icone, :root[data-tema="escuro"] .ferr-icone, :root[data-tema="escuro"] .ferr-card:nth-child(n) .ferr-icone, :root[data-tema="escuro"] .perfil-tile-ico,
:root[data-tema="escuro"] .perfil-tile.t1 .perfil-tile-ico, :root[data-tema="escuro"] .perfil-tile.t2 .perfil-tile-ico, :root[data-tema="escuro"] .perfil-tile.t3 .perfil-tile-ico,
:root[data-tema="escuro"] #tela-objetivo .linha-jogo .anel, :root[data-tema="escuro"] .lat-ico { background: rgba(145, 102, 240, 0.18) !important; }
:root[data-tema="escuro"] .deck-icone .ic, :root[data-tema="escuro"] .ferr-icone .ic, :root[data-tema="escuro"] .perfil-tile-ico .ic, :root[data-tema="escuro"] #tela-objetivo .linha-jogo .anel .ic, :root[data-tema="escuro"] .lat-ico .ic { stroke: var(--violet-400); color: var(--violet-400); }
:root[data-tema="escuro"] #tela-perfil .perfil-cartao { background: linear-gradient(135deg, #2A0F5E 0%, #4A12A0 100%); }
:root[data-tema="escuro"] .anel { background: rgba(145, 102, 240, 0.18); }
:root[data-tema="escuro"] .perfil-tile-barra, :root[data-tema="escuro"] .xp-trilho { background: rgba(145, 102, 240, 0.2); }

/* Início: cartões de atividade sóbrios, números em amarelo */
:root[data-tema="escuro"] .post-midia.jogo, :root[data-tema="escuro"] .post-midia.estudo, :root[data-tema="escuro"] .post-midia.marco, :root[data-tema="escuro"] .post-midia.texto { background: var(--ink-800) !important; box-shadow: inset 0 0 0 1px var(--line); color: var(--text); }
:root[data-tema="escuro"] .post-midia .pm-ico { background: rgba(145, 102, 240, 0.2); color: var(--violet-400); }
:root[data-tema="escuro"] .post-midia .pm-ico .ic { stroke: var(--violet-400); color: var(--violet-400); }
:root[data-tema="escuro"] .post-midia .pm-num b { color: var(--zap); }
:root[data-tema="escuro"] .post-midia .pm-rotulo { color: var(--text); }
:root[data-tema="escuro"] .post-midia .pm-sub, :root[data-tema="escuro"] .post-midia .pm-num small { color: var(--text-2); }
:root[data-tema="escuro"] .post-midia.foto { background: var(--ink-700) !important; }

/* telas de entrada, cartões e blocos que tinham branco fixo */
:root[data-tema="escuro"] .tela-auth, :root[data-tema="escuro"] .ia-sec, :root[data-tema="escuro"] .passos-card, :root[data-tema="escuro"] .land-card,
:root[data-tema="escuro"] .land-faq details, :root[data-tema="escuro"] .land-passos li { background: var(--ink-800); }
:root[data-tema="escuro"] .land-topo, :root[data-tema="escuro"] .land-faixa, :root[data-tema="escuro"] .land-painel, :root[data-tema="escuro"] .land-faixa-info, :root[data-tema="escuro"] .land-rodape { background-color: var(--ink-900); }
:root[data-tema="escuro"] .land-cta-claro { background: var(--zap); color: var(--zap-ink); }
:root[data-tema="escuro"] .land-recursos { background: linear-gradient(180deg, #0D0A16 0%, #1A0F3A 50%, #0D0A16 100%); }

/* maquetes do site: celulares escuros, como o app */
:root[data-tema="escuro"] .mk, :root[data-tema="escuro"] .fp-post, :root[data-tema="escuro"] .fp-cal { background: var(--ink-800); }
:root[data-tema="escuro"] .mk-mapa { background: var(--ink-900); }
:root[data-tema="escuro"] .fone-tela { background: var(--ink-900); }
:root[data-tema="escuro"] .fone-topo, :root[data-tema="escuro"] .fone-nav { background: var(--ink-800); }
:root[data-tema="escuro"] .fone-icos i, :root[data-tema="escuro"] .fone-nav i { background: var(--ink-700); }
:root[data-tema="escuro"] .fone-nav i.on { background: var(--violet-600); }
:root[data-tema="escuro"] .fone { background: #050309; }
:root[data-tema="escuro"] .mk-verso { background: rgba(255, 225, 77, 0.10); }
:root[data-tema="escuro"] .mk-notas i { background: var(--ink-700); }
:root[data-tema="escuro"] .cal-dia { background: var(--ink-700); }
:root[data-tema="escuro"] .cal-dia.estudou { background: var(--violet-600); }
:root[data-tema="escuro"] .cal-dia.futuro { background: transparent; }
:root[data-tema="escuro"] .cal-nav button { background: var(--ink-700); }

.opcoes-tema { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 16px; }
:root[data-tema="escuro"] .land-final { background: linear-gradient(135deg, #1E0F46 0%, #4A12A0 100%); }
:root[data-tema="escuro"] .land-rodape { border-top-color: var(--line); }
:root[data-tema="escuro"] .fone-topo img { filter: brightness(0) invert(1); }

/* ---------- Reorganização do app (2026-10-11): estrutura profissional ---------- */
/* Topo: avatar (esquerda), marca (centro), sino e sequência (direita). Barra de baixo: pílula flutuante + botão + separado. */
.topo-avatar { position: relative; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: var(--violet-600); color: #fff; font: 800 15px var(--font-body); overflow: hidden; cursor: pointer; }
.topo-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nav-pilula { display: contents; }
.nivel-selo { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 99px; background: color-mix(in srgb, var(--violet-600) 22%, transparent); color: var(--violet-700); font: 800 10px var(--font-body); font-style: normal; vertical-align: 1px; }
.nivel-selo.n2 { background: color-mix(in srgb, var(--gold) 24%, transparent); color: var(--gold); }
.nivel-selo.n3 { background: color-mix(in srgb, var(--error) 22%, transparent); color: var(--error); }
.post-texto { margin: 8px 0 4px; font: 500 16px / 1.5 var(--font-body); color: var(--text); overflow-wrap: anywhere; white-space: pre-wrap; }
.post .post-legenda { margin: 8px 2px 10px; }
.post-acoes { gap: 6px; }
.abas-feed { display: flex; justify-content: space-around; gap: 0; border-bottom: 1px solid var(--line); }
.abas-feed .filtro-chip { flex: 1; min-height: 46px; border-radius: 0; font-size: 15px; }
.abas-feed .filtro-chip.ativo { box-shadow: inset 0 -2px 0 var(--violet-600); }

/* Perfil: cabeçalho sem cartão, linha de números e calendário em destaque */
#tela-perfil .perfil-cartao { margin: 0 0 14px; padding: 4px 0 0; border-radius: 0; background: none; box-shadow: none; color: var(--text); }
#tela-perfil .perfil-linha { display: flex; align-items: center; gap: 16px; }
#tela-perfil .perfil-ident { flex: 1; min-width: 0; }
#tela-perfil .perfil-nome { color: var(--text); font: 800 22px / 1.15 var(--font-body); }
#tela-perfil .perfil-arroba { color: var(--text-2); }
#tela-perfil .perfil-bio { color: var(--text-2); }
#tela-perfil .perfil-nome-linha .topo-icone { flex: none; width: 38px; height: 38px; margin: 0; color: var(--text-2); background: var(--ink-700); }
#tela-perfil .social-contagem { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 16px 0 14px; padding: 12px 0; border-block: 1px solid var(--line); text-align: center; }
#tela-perfil .social-contagem .contador { display: block; padding: 0; border: 0; background: none; color: var(--text); font-family: var(--font-body); cursor: pointer; }
#tela-perfil .social-contagem .contador:first-child, #tela-perfil .social-contagem .contador:nth-child(2) { cursor: default; }
#tela-perfil .social-contagem b { display: block; font: 800 20px / 1.2 var(--font-display); color: var(--text); }
#tela-perfil .social-contagem span { display: block; font: 600 12px var(--font-body); color: var(--text-3); }
#tela-perfil .perfil-botoes .botao-secundario { background: var(--ink-800); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
#tela-perfil .perfil-botoes .botao-secundario:hover { background: var(--ink-700); }
#perfil-tiles { display: none; }

/* Mobile: topo em 3 colunas e barra de baixo flutuante */
@media (max-width: 899px) {
  .topo-app { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 14px 8px; }
  .topo-avatar { justify-self: start; }
  .topo-marca-app { justify-content: center; }
  .topo-acoes { justify-self: end; }
  #nav-abas { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); margin: 0 12px; padding: 0; border: 0; background: none; display: block; pointer-events: none; }
  #nav-abas > * { pointer-events: auto; }
  .nav-pilula { display: flex; align-items: center; height: 62px; margin-right: 68px; padding: 6px; border-radius: 31px; background: var(--ink-800); box-shadow: 0 0 0 1px var(--line), 0 16px 36px -14px rgba(0, 0, 0, 0.55); backdrop-filter: blur(12px); }
  #nav-abas .nav-pilula .nav-aba { flex: 1; min-height: 48px; height: 48px; border-radius: 24px; color: var(--text-3); }
  #nav-abas .nav-pilula .nav-aba.ativa { background: color-mix(in srgb, var(--violet-600) 20%, transparent); color: var(--violet-700); }
  #nav-abas .nav-aba.ativa::before { display: none; }
  #nav-abas .nav-pilula .nav-aba[data-aba="perfil"] { display: none; }
  #nav-abas .nav-registrar { position: absolute; right: 0; bottom: 3px; flex: none; width: 56px; height: 56px; min-height: 56px; border-radius: 50%; background: var(--zap); color: var(--zap-ink); box-shadow: 0 12px 26px -10px rgba(255, 225, 77, 0.4), 0 8px 18px rgba(0, 0, 0, 0.35); }
  #nav-abas .nav-registrar .nav-mais { display: grid; place-items: center; width: auto; height: auto; border: 0; background: none; color: inherit; }
  #nav-abas .nav-registrar .nav-mais .ic { width: 28px; height: 28px; }
  #nav-abas .nav-aba .badge-aviso { top: 4px; right: calc(50% - 20px); }
  .abas-feed { margin-top: 2px; }
}
@media (min-width: 900px) {
  .topo-avatar { display: none; }
  #nav-abas .nav-registrar { order: -1; }
}
#tela-perfil .social-contagem .contador:first-child { display: block; }
#tela-perfil .social-contagem .contador, #tela-perfil .social-contagem .contador b { color: var(--text); }
#tela-perfil .social-contagem .contador span { color: var(--text-3); }
:root[data-tema="escuro"] #tela-perfil .perfil-cartao { background: none; }

/* ---------- Treinar e Ferramentas em abas (2026-10-11) ---------- */
.abas-painel[hidden] { display: none; }
.abas-painel { display: block; padding-top: 14px; }
.hoje-card { margin: 0 0 14px; padding: 18px; border-radius: 16px; background: linear-gradient(135deg, #2A0F5E 0%, #4A12A0 100%); color: #fff; }
.hoje-rotulo { margin: 0 0 8px; font: 800 12px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--zap); }
.hoje-num { display: flex; align-items: baseline; gap: 10px; }
.hoje-num b { font: 900 46px / 1 var(--font-display); }
.hoje-num span { font: 700 16px var(--font-body); color: #E4DAFB; }
.hoje-sub { margin: 8px 0 14px; font: 500 14px / 1.45 var(--font-body); color: #CDBFF7; }
.hoje-card .botao-primario { width: 100%; background: var(--zap); color: var(--zap-ink); }
.hoje-meta { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.hoje-meta-linha { display: flex; justify-content: space-between; gap: 10px; font: 600 12.5px var(--font-body); color: #CDBFF7; }
.hoje-meta-linha b { color: #fff; font-weight: 800; }
.hoje-meta-barra { height: 6px; margin-top: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.hoje-meta-barra i { display: block; height: 100%; border-radius: 99px; background: var(--zap); }
#tela-objetivo .passos, #tela-objetivo .continuar, #tela-objetivo .ia-decks { margin-left: 0; margin-right: 0; width: 100%; }
#decks-slot { margin-top: 12px; }
.ia-credito-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--ink-800); box-shadow: 0 0 0 1px var(--line); }
.ia-credito-linha .ia-cota { margin: 0; text-align: left; font: 600 14px var(--font-body); color: var(--text-2); }
.ia-credito-linha .ia-ver-planos { margin: 0; flex: none; }
#ferr-materiais-slot { margin-bottom: 12px; }
#tela-ia #btn-minhas-redacoes { width: 100%; }
/* Mapa mental: os cartões são brancos de propósito (também viram imagem para salvar), então o texto fica sempre escuro, em qualquer tema */
.mapa2-card, .mapa2-card b, .mapa2-card ul, .mapa2-card li { color: #1B1033; }
/* Cartões de "papel" (flashcard colorido, verso branco, dica): sempre texto escuro, em qualquer tema */
:root[data-tema="escuro"] .flash-cena[class*="cartao-cor-"] .flash-face,
:root[data-tema="escuro"] .flash-verso-face { --text: #1B1033; --text-2: #4A3B78; --text-3: #625775; --line: rgba(21, 10, 46, 0.14); color: #1B1033; }
:root[data-tema="escuro"] .flash-cena[class*="cartao-cor-"] .flash-texto, :root[data-tema="escuro"] .flash-verso-face .flash-texto { color: #1B1033; }
:root[data-tema="escuro"] .flash-verso-face .flash-rotulo { color: #5B10B8; }
:root[data-tema="escuro"] .plano-pro { background: linear-gradient(160deg, var(--ink-800) 55%, rgba(123, 63, 228, 0.22)); }
:root[data-tema="escuro"] .vf-botao:disabled { opacity: 0.72; }

/* ---------- Site: nova abertura e blocos com fotos do app (2026-10-11) ---------- */
.land-hero { display: grid; gap: 26px; align-items: center; max-width: 1180px; margin: 0 auto; padding: 30px 20px 18px; background: radial-gradient(ellipse at 75% 20%, rgba(123, 63, 228, 0.28), transparent 62%); }
.land-hero-txt { text-align: center; }
.land-hero-txt .land-sub { margin-inline: auto; }
.land-hero-img img { display: block; width: 100%; height: auto; border-radius: 24px; box-shadow: 0 40px 80px -34px rgba(123, 63, 228, 0.7); }
.land-publico { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.land-publico li { padding: 7px 13px; border-radius: 999px; background: var(--ink-700); color: var(--text-2); font: 700 12.5px var(--font-body); }
.land-foto { padding: 0; background: none; }
.land-foto img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 34px 70px -34px rgba(123, 63, 228, 0.65); }
.land-quatro { grid-template-columns: 1fr; }
@media (min-width: 640px) { .land-quatro { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .land-hero { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 56px; padding: 72px 40px 36px; }
  .land-hero-txt { text-align: left; }
  .land-hero-txt .land-sub { margin-inline: 0; max-width: 480px; }
  .land-hero-txt .land-ctas { flex-direction: row; max-width: 460px; margin: 0; }
  .land-hero-txt .land-mini { margin-inline: 0; }
  .land-hero-txt .land-instalar { margin-inline: 0; }
  .land-publico { justify-content: flex-start; }
  .land-quatro { grid-template-columns: repeat(4, 1fr); gap: 28px; }
}

/* ---------- Site no modelo de produto profissional: abertura sem foto, cena com abas, linhas finas (2026-10-11) ---------- */
.land-hero { position: relative; display: block; max-width: none; margin: 0; padding: 64px 20px 44px; text-align: center; overflow: hidden; background: none; border-bottom: 1px solid var(--line); }
.land-brilho { position: absolute; inset: -40% -20% auto -20%; height: 120%; background: radial-gradient(ellipse 50% 50% at 50% 30%, rgba(123, 63, 228, 0.34), transparent 70%); pointer-events: none; }
.land-hero > *:not(.land-brilho) { position: relative; }
.land-hero .land-titulo { font-size: clamp(36px, 10vw, 76px); line-height: 1.02; margin-bottom: 18px; }
.land-titulo .grad { background: linear-gradient(90deg, #B79CFF, #FFE14D); -webkit-background-clip: text; background-clip: text; color: transparent; }
.land-hero .land-sub { max-width: 560px; margin: 0 auto 26px; font-size: 17px; }
.land-hero .land-ctas { flex-direction: column; max-width: 360px; margin: 0 auto; }
.land-hero .botao-primario { box-shadow: 0 0 0 1px rgba(183, 156, 255, 0.55), 0 0 28px rgba(123, 63, 228, 0.5); }
.land-prova { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 22px 0 6px; padding: 0; list-style: none; font: 600 13px var(--font-body); color: var(--text-2); }
.land-prova li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--zap); vertical-align: 2px; }
.land-marquee { overflow: hidden; border-bottom: 1px solid var(--line); padding: 16px 0; white-space: nowrap; }
.marquee-trilho { display: inline-flex; gap: 48px; padding-left: 48px; animation: marquee 38s linear infinite; }
.marquee-trilho span { font: 700 15px var(--font-body); color: var(--text-3); }
@keyframes marquee { to { transform: translateX(-50%); } }
html.reduzir-mov .marquee-trilho { animation: none; }
@media (prefers-reduced-motion: reduce) { .marquee-trilho { animation: none; } }

.land-palco-sec { background: var(--ink-950); border-bottom: 1px solid var(--line); }
.palco-cabeca { max-width: 1180px; margin: 0 auto; padding: 56px 20px 28px; }
.land-h2.grande { font-size: clamp(30px, 7.4vw, 56px); line-height: 1.04; letter-spacing: -0.025em; }
.palco-abas { display: flex; overflow-x: auto; border-block: 1px solid var(--line); scroll-snap-type: x mandatory; scrollbar-width: none; }
.palco-abas::-webkit-scrollbar { display: none; }
.palco-aba { flex: 0 0 min(70vw, 252px); padding: 16px 18px 18px; border: 0; border-right: 1px solid var(--line); background: none; color: var(--text-2); text-align: left; cursor: pointer; scroll-snap-align: start; font-family: var(--font-body); transition: background 0.3s, color 0.3s; }
.palco-aba b { display: block; margin-bottom: 6px; font: 800 15px var(--font-body); color: var(--text); }
.palco-aba span { display: block; font: 500 13px / 1.4 var(--font-body); }
.palco-aba.ativa { background: linear-gradient(180deg, rgba(123, 63, 228, 0.22), transparent); color: var(--text); }
.palco-aba.ativa b { color: var(--zap); }
.palco-cena { position: relative; overflow: hidden; background: #07050D; height: calc(min(100vw, 744px) * 0.746 + 330px); }
.palco-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.7s; }
.palco-slide.ativo { opacity: 1; pointer-events: auto; }
.palco-slide img { position: absolute; top: 0; left: 0; width: 100%; height: auto; -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 58%, transparent 100%); }
.palco-txt { position: absolute; z-index: 2; left: 0; right: 0; bottom: 52px; padding: 0 20px; max-width: 560px; }
.palco-titulo { margin: 0 0 10px; font: 900 clamp(26px, 6.4vw, 40px) / 1.08 var(--font-display); letter-spacing: -0.02em; color: #fff; }
.palco-txt p:not(.land-sobre) { margin: 0 0 16px; font: 500 15px / 1.55 var(--font-body); color: #CDBFF7; }
.palco-cta { min-height: 46px; padding: 0 22px; border-radius: 12px; }
.palco-pontos { position: absolute; z-index: 3; left: 20px; bottom: 18px; display: flex; gap: 7px; }
.palco-ponto { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, 0.3); cursor: pointer; transition: width 0.3s, background 0.3s; }
.palco-ponto.ativo { width: 28px; background: var(--zap); }

.land-porque { max-width: 1180px; margin: 0 auto; padding: 64px 20px 20px; }
.land-porque .land-h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 30px; }
.land-porque .land-h2 img { height: 38px; width: auto; }
.porque-destaque { position: relative; overflow: hidden; margin: 0 -20px; padding: 40px 20px; border-block: 1px solid var(--line); background: radial-gradient(ellipse 60% 80% at 20% 40%, rgba(123, 63, 228, 0.28), transparent 70%); }
.porque-destaque p { margin: 0 0 4px; font: 600 14px var(--font-body); color: var(--text-2); }
.porque-destaque b { display: block; font: 900 clamp(64px, 20vw, 120px) / 1 var(--font-display); letter-spacing: -0.03em; color: var(--text); }
.porque-destaque span { font: 500 14px var(--font-body); color: var(--text-3); }
.porque-aneis { position: absolute; right: -60px; top: 50%; width: 300px; height: 300px; transform: translateY(-50%); pointer-events: none; }
.porque-aneis i { position: absolute; inset: 0; margin: auto; border: 1px solid rgba(183, 156, 255, 0.35); border-radius: 50%; }
.porque-aneis i:nth-child(1) { width: 300px; height: 300px; } .porque-aneis i:nth-child(2) { width: 200px; height: 200px; } .porque-aneis i:nth-child(3) { width: 100px; height: 100px; background: radial-gradient(circle, rgba(255, 225, 77, 0.9) 0 14%, rgba(255, 225, 77, 0.2) 15% 40%, transparent 41%); border-color: rgba(255, 225, 77, 0.4); }
.porque-lista { list-style: none; margin: 0 -20px; padding: 0; }
.porque-lista li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 20px; border-bottom: 1px solid var(--line); }
.porque-lista small { display: block; margin-bottom: 4px; font: 500 14px var(--font-body); color: var(--text-3); }
.porque-lista b { font: 800 clamp(22px, 5.4vw, 30px) / 1.1 var(--font-display); color: var(--text); }
.porque-lista .ic { flex: none; width: 26px; height: 26px; color: var(--zap); }

.land-redacao-sec { padding-top: 56px; }
.land-jornada { max-width: 1180px; margin: 0 auto; padding: 56px 20px; border-top: 1px solid var(--line); }
.jornada-grafico { display: block; width: 100%; height: 130px; margin: 14px 0 10px; overflow: visible; }
.jornada-pontas { display: flex; justify-content: space-between; gap: 16px; }
.jornada-pontas b { display: block; font: 800 clamp(24px, 6vw, 34px) var(--font-display); color: var(--text); }
.jornada-pontas span { font: 500 13px var(--font-body); color: var(--text-3); }
.jornada-pontas .dir { text-align: right; }

.land-faq details { counter-increment: faq; position: relative; padding: 4px 18px 4px 46px; border-radius: 0; background: none; box-shadow: none; border-top: 1px solid var(--line); margin: 0; }
.land-faq details:last-of-type { border-bottom: 1px solid var(--line); }
.land-faq details::before { content: "0" counter(faq); position: absolute; left: 4px; top: 20px; font: 700 12px var(--font-body); color: var(--zap); }
.land-faq details[open] { box-shadow: inset 2px 0 0 var(--zap); }
.land-faq { counter-reset: faq; }
:root[data-tema="escuro"] .land-faq details { background: none; }

@media (min-width: 900px) {
  .land-hero { padding: 110px 40px 84px; }
  .land-hero .land-ctas { flex-direction: row; max-width: 460px; }
  .palco-cabeca { padding: 84px 40px 36px; }
  .palco-abas { padding-left: max(0px, calc((100vw - 1180px) / 2)); }
  .palco-aba { flex: 1 0 230px; }
  .palco-cena { height: 640px; }
  .palco-slide img { left: auto; right: 0; top: 0; width: auto; height: 100%; max-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%); mask-image: linear-gradient(90deg, transparent 0, #000 26%); }
  .palco-txt { top: 50%; bottom: auto; transform: translateY(-50%); left: max(40px, calc((100vw - 1180px) / 2 + 40px)); max-width: 470px; padding: 0; }
  .palco-pontos { left: max(40px, calc((100vw - 1180px) / 2 + 40px)); bottom: 28px; }
  .land-porque { padding: 100px 40px 30px; }
  .porque-destaque { margin: 0; padding: 56px 40px; border-radius: 0; }
  .porque-lista { margin: 0; }
  .porque-lista li { padding: 28px 8px; }
  .porque-aneis { right: 2%; }
  .land-jornada { padding: 90px 40px; }
}

.land-porque .land-h2 { display: block; }
.land-porque .nw { white-space: nowrap; }
.land-porque .land-h2 img { display: inline-block; vertical-align: -6px; margin-right: 2px; }
.land-porque, .land-jornada { width: 100%; }
/* tema claro: destaques em roxo (o amarelo some no fundo claro) */
:root[data-tema="claro"] .land-titulo .grad { background: linear-gradient(90deg, #5B10B8, #B8860B); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-tema="claro"] .palco-aba.ativa b { color: var(--violet-700); }
:root[data-tema="claro"] .porque-lista .ic, :root[data-tema="claro"] .land-faq details::before { color: var(--violet-600); }
:root[data-tema="claro"] .land-faq details[open] { box-shadow: inset 2px 0 0 var(--violet-600); }
:root[data-tema="claro"] .land-prova li::before { background: var(--violet-600); }
:root[data-tema="claro"] .palco-cena { background: #07050D; }

/* Configurações: as subtelas (Conta, Privacidade, Preferências, Ajuda, Sobre) seguem o visual de cartões do menu */
#tela-configuracoes .bloco-config { background: var(--ink-800); border-radius: 22px; box-shadow: 0 0 0 1px var(--line); padding: 18px 16px; margin: 0 0 14px; border-bottom: 0; }
#tela-configuracoes .bloco-config .sub-titulo:first-child { margin-top: 0; }
#tela-configuracoes .bloco-config > :last-child { margin-bottom: 0; }
#tela-configuracoes .faq:last-of-type { border-bottom: 0; }
#tela-configuracoes .info-conta:empty { display: none; }
#plano-comprar { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
#plano-comprar .botao-primario, #plano-comprar .botao-secundario { width: 100%; }
#plano-comprar .plano-aviso { margin: 4px 0 0; }
.plano-aviso .link-legal { display: inline; min-height: 0; padding: 0; font: inherit; }

/* Plano Plus: anual em destaque e cartão de limite de créditos */
.plano-destaque { margin: 0; padding: 8px 12px; border-radius: 12px; background: rgba(255, 225, 77, 0.16); color: var(--text); font: 700 13px / 1.35 var(--font-body); text-align: center; }
.ia-limite { margin: 12px 0 16px; padding: 16px; border-radius: 20px; background: linear-gradient(160deg, rgba(91, 16, 184, 0.28), rgba(139, 63, 224, 0.12)); box-shadow: 0 0 0 1px rgba(139, 63, 224, 0.45); }
.ia-limite[hidden] { display: none; }
.ia-limite b { display: block; margin-bottom: 4px; font: 800 16px var(--font-display); color: var(--text); }
.ia-limite p { margin: 0 0 12px; color: var(--text-2); font: 500 14px / 1.45 var(--font-body); }
.ia-limite p:last-child { margin-bottom: 0; }
.ia-limite-acoes { display: flex; flex-direction: column; gap: 8px; }
.ia-limite-acoes button { width: 100%; }

/* O que a pessoa estuda: pílulas no perfil e nos posts, e o seletor com busca */
.estudo-linha { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.estudo-linha:empty { display: none; }
.estudo-pilula { padding: 3px 10px; border-radius: 999px; background: rgba(123, 63, 228, 0.18); box-shadow: 0 0 0 1px rgba(123, 63, 228, 0.35); color: var(--text); font: 700 12px / 1.4 var(--font-body); }
button.estudo-add { background: none; border: 1.5px dashed var(--line); color: var(--text-2); cursor: pointer; }
button.estudo-add:hover { color: var(--text); }
.post-topo .estudo-sub { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font: 600 12px / 1.3 var(--font-body); }
.post-meta { margin-left: auto; align-self: flex-start; padding-left: 8px; color: var(--text-3); font: 500 12px var(--font-body); white-space: nowrap; }
.selo-plus { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: linear-gradient(135deg, #5B10B8, #B83AE0); color: #fff; font: 800 10px / 1.5 var(--font-body); letter-spacing: 0.6px; text-transform: uppercase; vertical-align: 2px; }
.estudo-seletor { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.estudo-busca { display: flex; align-items: center; gap: 8px; padding: 0 12px; min-height: 46px; border-radius: 14px; background: var(--ink-900); box-shadow: 0 0 0 1px var(--line); }
.estudo-busca .ic { width: 20px; height: 20px; color: var(--text-3); flex: none; }
.estudo-busca input { flex: 1; min-width: 0; margin: 0; border: 0; background: none; color: var(--text); font: 600 15px var(--font-body); outline: none; box-shadow: none; padding: 0; min-height: 44px; }
.estudo-escolhidos { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; }
.estudo-contador { color: var(--text-3); font: 600 12px var(--font-body); }
.estudo-lista { max-height: 44vh; overflow-y: auto; padding-right: 2px; }
.estudo-grupo { margin: 14px 4px 4px; color: var(--text-3); font: 800 12px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.estudo-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 46px; padding: 8px 12px; border: 0; border-radius: 12px; background: none; color: var(--text); font: 600 15px var(--font-body); text-align: left; cursor: pointer; }
.estudo-item:hover { background: var(--ink-900); }
.estudo-item[aria-pressed="true"] { background: rgba(123, 63, 228, 0.2); }
.estudo-item[aria-pressed="true"]::after { content: "✓"; color: var(--violet-500, #8B3FE0); font-weight: 900; }
.estudo-item:disabled { opacity: 0.4; cursor: default; }
.estudo-vazio { padding: 18px 8px; text-align: center; color: var(--text-3); font: 500 14px var(--font-body); }
#tela-onboarding .estudo-lista { max-height: 38vh; }

/* Configurações: linhas com interruptor, tema segmentado, ação de perigo e Sobre */
#tela-configuracoes .opcoes-tema { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px; margin-top: 10px; border-radius: 16px; background: var(--ink-900); }
#tela-configuracoes .opcoes-tema .filtro-chip { width: 100%; justify-content: center; border: 0; background: none; box-shadow: none; min-height: 40px; }
#tela-configuracoes .opcoes-tema .filtro-chip.ativo { background: var(--violet-600, #5B10B8); color: #fff; }
.linhas-config { padding-top: 6px; padding-bottom: 6px; }
.linha-config { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 14px; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.linhas-config .linha-config:last-child { border-bottom: 0; }
.linha-config > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.linha-config b { color: var(--text); font: 800 15px var(--font-body); }
.linha-config small { color: var(--text-2); font: 500 13px / 1.35 var(--font-body); }
.linha-config input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 48px; height: 28px; min-height: 0; margin: 0; border-radius: 999px; background: var(--ink-600, #3a3450); cursor: pointer; transition: background 0.15s; }
.linha-config input[type="checkbox"]::before { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.linha-config input[type="checkbox"]:checked { background: var(--violet-600, #5B10B8); }
.linha-config input[type="checkbox"]:checked::before { transform: translateX(20px); }
.linha-config input[type="checkbox"]:focus-visible { outline: 3px solid var(--violet-500, #8B3FE0); outline-offset: 2px; }
#tela-configuracoes .bloco-config .linha-config:last-of-type { margin-bottom: 0; }
#tela-configuracoes > .botao-perigo { width: 100%; margin: 4px 0 14px; }
.sobre-card { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.sobre-card .perfil-sub { margin: 0; }
#tela-configuracoes .menu-config { margin-bottom: 14px; }
a.menu-linha { text-decoration: none; }
#cfg-estudo { margin: 6px 0 14px; }

/* Configurações (tela principal): cabeçalho com foto grande, cartão do plano e linhas limpas com o valor atual */
.config-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 4px 0 18px; }
.config-avatar .avatar-circulo { width: 96px; height: 96px; font-size: 38px; box-shadow: 0 0 0 3px var(--ink-800), 0 0 0 5px var(--violet-500, #8B3FE0); }
.config-nome { margin-top: 10px; color: var(--text); font: 900 22px / 1.2 var(--font-display); }
.config-arroba { color: var(--text-2); font: 600 14px var(--font-body); }
.config-chips { justify-content: center; margin-top: 8px; }
.config-ver { margin-top: 12px; min-width: 180px; }
.config-plano { margin: 0 0 20px; padding: 16px; border-radius: 22px; background: linear-gradient(135deg, #4A0E9C, #7A2FD6 65%, #B83AE0); color: #fff; box-shadow: 0 16px 30px -20px rgba(91, 16, 184, 0.9); }
.cp-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cp-nome { font: 900 17px var(--font-display); }
.cp-topo small { color: rgba(255, 255, 255, 0.8); font: 600 12px var(--font-body); }
.cp-barra { height: 8px; margin: 12px 0 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.25); overflow: hidden; }
.cp-barra i { display: block; height: 100%; border-radius: 999px; background: #FFE14D; }
.cp-txt { margin: 0; color: rgba(255, 255, 255, 0.92); font: 500 14px var(--font-body); }
.cp-txt b { font-weight: 900; }
.config-plano .botao-primario { width: 100%; margin-top: 14px; background: #fff; color: #4A0E9C; box-shadow: none; }
.menu-lista { display: flex; flex-direction: column; margin-bottom: 4px; border-radius: 22px; background: var(--ink-800); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.menu-item { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); text-align: left; cursor: pointer; text-decoration: none; }
.menu-item:last-child { border-bottom: 0; }
.menu-item[hidden] { display: none; }
.menu-item:hover { background: var(--ink-900); }
.menu-item:active { background: var(--ink-700); }
.menu-item > .ic:first-child { flex: none; width: 24px; height: 24px; color: var(--violet-500, #8B3FE0); stroke: currentColor; }
.menu-item .menu-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.menu-item b { font: 800 16px var(--font-body); }
.menu-item small { color: var(--text-2); font: 500 13px / 1.3 var(--font-body); }
.menu-valor { flex: none; max-width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); font: 700 13px var(--font-body); font-style: normal; }
.menu-valor:empty { display: none; }
.menu-item .seta { flex: none; width: 18px; height: 18px; color: var(--text-3); }
.config-sair { width: 100%; margin: 18px 0 8px; }
.config-rodape { margin: 8px 0 24px; text-align: center; color: var(--text-3); font: 500 12px var(--font-body); }

/* Plano Plus com cara de oferta: faixa de lançamento, preço de/por, economia e botão dourado */
#tela-planos .plano-pro { padding: 0 0 18px; overflow: hidden; border: 0; color: #fff; background: radial-gradient(120% 60% at 85% 0%, rgba(255, 225, 77, 0.22), transparent 55%), linear-gradient(165deg, #2A0A5E 0%, #4A0E9C 45%, #7A2FD6 100%); box-shadow: 0 0 0 2px #FFE14D, 0 22px 40px -22px rgba(122, 47, 214, 0.95); }
#tela-planos .plano-pro > :not(.plus-faixa) { margin-left: 18px; margin-right: 18px; }
.plus-faixa { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 14px; background: #FFE14D; color: #2A0A5E; }
.plus-etiqueta { font: 900 11px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.plus-off { padding: 2px 9px; border-radius: 999px; background: #2A0A5E; color: #FFE14D; font: 900 12px var(--font-body); }
#tela-planos .plano-pro h2 { margin-top: 16px; margin-bottom: 2px; color: #fff; font: 900 26px / 1.1 var(--font-display); }
.plus-sub { margin-top: 0; margin-bottom: 14px; color: rgba(255, 255, 255, 0.82); font: 600 14px var(--font-body); }
.plus-preco { padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.plus-de { display: block; color: rgba(255, 255, 255, 0.65); font: 700 15px var(--font-body); text-decoration-thickness: 2px; }
.plus-linha { display: flex; align-items: baseline; gap: 4px; margin-top: 2px; }
.plus-valor { font: 900 46px / 1 var(--font-display); color: #FFE14D; letter-spacing: -0.02em; }
.plus-mes { font: 800 18px var(--font-body); color: #fff; }
.plus-total { margin: 6px 0 10px; color: rgba(255, 255, 255, 0.9); font: 500 13px / 1.4 var(--font-body); }
.plus-total b { color: #fff; font-weight: 900; }
.plus-economia { display: inline-block; padding: 4px 11px; border-radius: 999px; background: #1FD18A; color: #04301F; font: 900 12px var(--font-body); }
#tela-planos .plus-lista { margin-top: 16px; padding-left: 0; list-style: none; gap: 10px; color: rgba(255, 255, 255, 0.92); }
#tela-planos .plus-lista li { position: relative; padding-left: 26px; }
#tela-planos .plus-lista li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: #FFE14D; color: #2A0A5E; font: 900 11px / 18px var(--font-body); text-align: center; }
#tela-planos .plus-lista b { color: #fff; }
#tela-planos .plano-pro .plano-aviso { color: rgba(255, 255, 255, 0.85); }
#tela-planos .plano-pro .botao-primario { background: #FFE14D; color: #2A0A5E; box-shadow: none; }
#plano-comprar { margin-top: 16px; }
.plus-cta { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; padding: 14px 12px; border: 0; border-radius: 16px; background: linear-gradient(180deg, #FFE96B, #FFD21F); color: #2A0A5E; cursor: pointer; box-shadow: 0 10px 22px -10px rgba(255, 225, 77, 0.75), inset 0 -3px 0 rgba(0, 0, 0, 0.12); }
.plus-cta b { font: 900 17px var(--font-display); }
.plus-cta small { font: 700 12px var(--font-body); opacity: 0.8; }
.plus-cta:active { transform: translateY(1px); }
.plus-cta:disabled { opacity: 0.6; }
.plus-cta-2 { width: 100%; min-height: 48px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); color: #fff; font: 800 15px var(--font-body); cursor: pointer; }
.plus-cta-2:disabled { opacity: 0.6; }
#tela-planos #plano-comprar .link-legal, #tela-planos #plano-comprar .link-mini { color: #FFE14D; }

.plus-cta b { font-size: 15px; white-space: nowrap; }

/* Plano Plus, versão limpa: um cartão roxo, um preço em destaque, três benefícios e um botão */
#tela-planos .plano-pro { padding: 22px 18px 18px; border: 0; overflow: visible; background: linear-gradient(165deg, #3A0C80 0%, #5B16B8 100%); box-shadow: 0 18px 36px -22px rgba(91, 22, 184, 0.95); }
#tela-planos .plano-pro > :not(.plus-faixa) { margin-left: 0; margin-right: 0; }
.plus-etiqueta { display: inline-block; margin-bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 225, 77, 0.18); color: #FFE14D; font: 800 11px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; }
#tela-planos .plano-pro h2 { margin: 0 0 6px; font: 900 22px / 1.1 var(--font-display); }
.plus-preco { padding: 0; background: none; box-shadow: none; }
.plus-linha { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0; }
.plus-valor { font: 900 44px / 1 var(--font-display); letter-spacing: -0.02em; color: #fff; }
.plus-mes { font: 700 16px var(--font-body); color: rgba(255, 255, 255, 0.85); }
.plus-de { margin-left: 4px; color: rgba(255, 255, 255, 0.55); font: 600 14px var(--font-body); }
.plus-off { padding: 2px 8px; border-radius: 8px; background: #1FD18A; color: #04301F; font: 900 12px var(--font-body); }
.plus-total { margin: 6px 0 16px; color: rgba(255, 255, 255, 0.8); font: 500 13px / 1.4 var(--font-body); }
#tela-planos .plus-lista { margin: 0 0 18px; gap: 8px; }
#tela-planos .plus-lista li { padding-left: 24px; font: 500 15px / 1.35 var(--font-body); }
#tela-planos .plus-lista li::before { background: none; color: #FFE14D; width: auto; height: auto; font: 900 15px / 1.35 var(--font-body); }
.plus-cta { display: block; width: 100%; padding: 15px 12px; border: 0; border-radius: 16px; background: #FFE14D; color: #2A0A5E; box-shadow: none; cursor: pointer; }
.plus-cta b { display: block; font: 900 16px var(--font-display); white-space: nowrap; }
.plus-cta-2 { display: block; width: 100%; min-height: 44px; margin-top: 4px; border: 0; background: none; box-shadow: none; color: rgba(255, 255, 255, 0.9); font: 700 14px var(--font-body); text-decoration: underline; text-underline-offset: 3px; }
.plus-regras { margin-top: 12px; color: rgba(255, 255, 255, 0.75); }
.plus-regras summary { cursor: pointer; font: 600 13px var(--font-body); }
.plus-regras .plano-aviso { margin: 8px 0 0; font: 400 12px / 1.5 var(--font-body); }
#tela-planos #plano-comprar { margin-top: 4px; }
#tela-planos #plano-comprar .link-mini { display: block; margin: 6px auto 0; }

.plus-cta b { font-size: 17px; white-space: normal; }
.plus-cta small { display: block; margin-top: 2px; font: 700 12px var(--font-body); opacity: 0.8; }

/* Plus: cartão mais vivo (violeta forte para magenta), contraste claro com o fundo escuro e desconto em branco */
#tela-planos .plano-pro { background: radial-gradient(90% 55% at 100% 0%, rgba(255, 120, 190, 0.45), transparent 60%), linear-gradient(155deg, #5B16D6 0%, #8A2BD8 55%, #D6247A 120%); box-shadow: 0 22px 44px -20px rgba(214, 36, 122, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
.plus-etiqueta { background: rgba(255, 255, 255, 0.22); color: #fff; }
.plus-off { background: #fff; color: #B3126A; }
.plus-de { color: rgba(255, 255, 255, 0.7); }
.plus-total, .plus-mes { color: rgba(255, 255, 255, 0.92); }
#tela-planos .plus-lista li { color: #fff; }
#tela-planos .plus-lista li::before { color: #FFE14D; }
.plus-cta { background: linear-gradient(180deg, #FFEA6B, #FFD21F); box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.45); }
.plus-cta-2 { color: #fff; }
.plus-regras { color: rgba(255, 255, 255, 0.85); }

/* Aviso rapido (toast): cor propria, para nao ficar branco sobre branco no tema escuro */
.app-toast { background: #3B1C7A; color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 8px 24px rgba(0, 0, 0, 0.45); }

/* Aba Ferramentas: cartão de créditos, destaque "Explica isso", redação em cartão próprio e grade de ferramentas coloridas */
.ferr-creditos { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; padding: 12px 14px; border-radius: 18px; background: var(--ink-800); box-shadow: 0 0 0 1px var(--line); }
.ferr-creditos[hidden] { display: none; }
.fc-info { flex: 1; min-width: 0; }
.fc-linha { color: var(--text-2); font: 600 13px var(--font-body); }
.fc-linha b { color: var(--text); font: 900 18px var(--font-display); }
.fc-linha span { color: var(--text-3); }
.fc-barra { height: 6px; margin: 8px 0 2px; border-radius: 999px; background: var(--ink-700); overflow: hidden; }
.fc-barra i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #7A2FD6, #B83AE0); }
.fc-info small { color: var(--text-3); font: 700 12px var(--font-body); }
.fc-btn { flex: none; min-height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(139, 63, 224, 0.2); color: var(--text); font: 800 13px var(--font-body); cursor: pointer; }
.ferr-creditos.baixo { box-shadow: 0 0 0 1.5px #FFB020; }
.ferr-creditos.baixo .fc-barra i { background: #FFB020; }
.ferr-creditos.baixo .fc-info small { color: #FFB020; }
.ferr-creditos.baixo .fc-btn { background: #FFE14D; color: #2A0A5E; }
.ferr-rotulo { margin: 8px 4px 0; color: var(--text-3); font: 800 12px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }

/* Celular: lupa no topo (esquerda) e Perfil, com a foto, na barra de baixo no lugar da Buscar */
.topo-buscar { display: none; }
@media (max-width: 899px) {
  .topo-avatar { display: none; }
  .topo-buscar { display: grid; justify-self: start; margin-left: -6px; color: var(--text); background: var(--ink-800); box-shadow: 0 0 0 1px var(--line); width: 40px; height: 40px; }
  #nav-abas .nav-pilula .nav-aba[data-aba="perfil"] { display: flex; }
  #nav-abas .nav-pilula .nav-aba[data-aba="buscar"] { display: none; }
  .nav-avatar { width: 30px; height: 30px; }
}

/* Desktop: logo nítido e clicável no trilho; coluna da direita vira um painel de cor própria */
.topo-marca-app { background: none; border: 0; padding: 0; cursor: pointer; }
@media (min-width: 900px) {
  .topo-marca-app img.wordmark { content: url("assets/simbolo-roxo.png"); width: auto; height: 40px; max-width: none; image-rendering: auto; }
  .topo-marca-app { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; }
  .topo-marca-app:hover { background: var(--ink-700); }
}
@media (min-width: 1180px) {
  .tela-feed.ativa { gap: 40px; max-width: 1000px; }
  .feed-lateral { top: 24px; gap: 10px; padding: 18px; border-radius: 26px; background: linear-gradient(180deg, #1D1438 0%, #130E26 100%); box-shadow: 0 0 0 1px rgba(139, 63, 224, 0.28), 0 28px 50px -30px rgba(0, 0, 0, 0.9); max-height: calc(100vh - 48px); overflow-y: auto; }
  :root[data-tema="claro"] .feed-lateral { background: linear-gradient(180deg, #F1EBFD 0%, #E8DFFA 100%); box-shadow: 0 0 0 1px rgba(91, 16, 184, 0.14); }
  .lat-hero { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 20px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
  :root[data-tema="claro"] .lat-hero { background: rgba(255, 255, 255, 0.7); }
  .lat-hero-pessoa { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--text); min-width: 0; }
  .lat-hero-pessoa .avatar-circulo { width: 54px; height: 54px; font-size: 22px; flex: none; }
  .lat-hero-pessoa > span { display: flex; flex-direction: column; min-width: 0; }
  .lat-hero-pessoa b { font: 800 16px var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lat-hero-pessoa small { color: var(--text-2); font: 600 13px var(--font-body); }
  .lat-estuda { margin: 0; }
  .lat-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px 0; border-block: 1px solid var(--line); text-align: center; }
  .lat-stats b { display: block; color: var(--text); font: 900 20px / 1.1 var(--font-display); }
  .lat-stats span { color: var(--text-3); font: 600 11.5px var(--font-body); }
  .lat-ver { min-height: 40px; border: 0; border-radius: 12px; background: rgba(139, 63, 224, 0.28); color: var(--text); font: 800 14px var(--font-body); cursor: pointer; }
  .lat-ver:hover { background: rgba(139, 63, 224, 0.4); }
  .feed-lateral .lat-cartao { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
  .feed-lateral .lat-cartao:hover { background: rgba(255, 255, 255, 0.11); }
  :root[data-tema="claro"] .feed-lateral .lat-cartao { background: rgba(255, 255, 255, 0.75); }
  .lat-cartao > span:nth-child(2) { flex: 1; }
  .lat-badge { flex: none; min-width: 26px; padding: 2px 8px; border-radius: 999px; background: #FFE14D; color: #2A0A5E; font: 900 12px var(--font-body); font-style: normal; text-align: center; }
  .lat-convite { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; padding: 16px; border-radius: 20px; background: linear-gradient(145deg, #5B16D6, #B83AE0); color: #fff; }
  .lat-convite b { font: 900 16px var(--font-display); }
  .lat-convite small { color: rgba(255, 255, 255, 0.88); font: 500 13px / 1.4 var(--font-body); }
  .lat-convite button { margin-top: 10px; min-height: 40px; border: 0; border-radius: 12px; background: #FFE14D; color: #2A0A5E; font: 900 14px var(--font-body); cursor: pointer; }
  .lat-rodape { margin-top: 10px; }
}

/* ===== Passe de cores e desktop (14/10): menos roxo, mais variedade, telas em colunas ===== */
/* Treinar: cartão "Hoje" em verde-azulado para azul; atalhos de IA em rosa e verde */
.hoje-card { background: linear-gradient(135deg, #0B6E7A 0%, #1C56C9 100%); box-shadow: 0 18px 34px -24px rgba(28, 86, 201, 0.9); }
.hoje-num span { color: #D6EBFF; }
.hoje-sub, .hoje-meta-linha { color: #CFE6FF; }
:root[data-tema="escuro"] .treino-card:nth-child(1), .treino-card:nth-child(1) { background: linear-gradient(135deg, #C81E6E, #F0578F); box-shadow: none; }
:root[data-tema="escuro"] .treino-card:nth-child(2), .treino-card:nth-child(2) { background: linear-gradient(135deg, #0A7C72, #17A596); box-shadow: none; }
.treino-card { min-height: 116px; border-radius: 20px; }

@media (min-width: 1100px) {
  /* Treinar > Hoje: o cartão de revisão à esquerda, o resto em coluna à direita */
  #tela-objetivo [data-treinar-painel="hoje"]:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px 22px; align-items: start; }
  #tela-objetivo [data-treinar-painel="hoje"] #revisao-slot { grid-column: 1; grid-row: 1 / span 4; }
  #tela-objetivo [data-treinar-painel="hoje"] #passos-slot, #tela-objetivo [data-treinar-painel="hoje"] #btn-continuar, #tela-objetivo [data-treinar-painel="hoje"] #decks-slot { grid-column: 2; margin-top: 0; margin-bottom: 0; }
  #tela-objetivo .hoje-card { padding: 26px; margin: 0; }
  #tela-objetivo .hoje-num b { font-size: 64px; }
  /* Treinar > Praticar: IA e simulados lado a lado, áreas em 4 colunas */
  #tela-objetivo [data-treinar-painel="praticar"]:not([hidden]) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 18px; align-items: start; }
  #tela-objetivo [data-treinar-painel="praticar"] #ia-slot { grid-column: 1 / span 2; }
  #tela-objetivo [data-treinar-painel="praticar"] #simulado-slot { grid-column: 3; align-self: end; }
  #tela-objetivo [data-treinar-painel="praticar"] .rotulo-areas, #tela-objetivo [data-treinar-painel="praticar"] .grade-areas { grid-column: 1 / -1; }
  #tela-objetivo .grade-areas { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Ferramentas (desktop) */
  #tela-ia.tela-ferramentas { max-width: 1040px; width: 100%; margin: 0 auto; }

  /* Planos: Grátis e Plus lado a lado */
  #tela-planos .decks-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 22px; align-items: start; max-width: 920px; margin: 0 auto; }
  #tela-planos .decks-corpo > .plano-atual, #tela-planos .decks-corpo > .perfil-sub { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  /* mais respiro e superfícies mais leves no desktop */
  .tela { padding-top: 36px; }
}

/* Cada área de treino com a sua cor (antes eram todas roxas) */
#tela-objetivo .linha-jogo .anel, :root[data-tema="escuro"] #tela-objetivo .linha-jogo .anel { background: linear-gradient(135deg, #5B10B8, #8B3FE0) !important; }
#tela-objetivo .linha-jogo[data-objetivo="enem"] .anel, :root[data-tema="escuro"] #tela-objetivo .linha-jogo[data-objetivo="enem"] .anel { background: linear-gradient(135deg, #E08A00, #FFC13D) !important; }
#tela-objetivo .linha-jogo[data-objetivo="ensino_medio"] .anel, :root[data-tema="escuro"] #tela-objetivo .linha-jogo[data-objetivo="ensino_medio"] .anel { background: linear-gradient(135deg, #2C5FD8, #5E95FF) !important; }
#tela-objetivo .linha-jogo[data-area="faculdade"] .anel, :root[data-tema="escuro"] #tela-objetivo .linha-jogo[data-area="faculdade"] .anel { background: linear-gradient(135deg, #D6247A, #FF6AA8) !important; }
#tela-objetivo .linha-jogo[data-area="concurso"] .anel, :root[data-tema="escuro"] #tela-objetivo .linha-jogo[data-area="concurso"] .anel { background: linear-gradient(135deg, #0E8F83, #2CCBB9) !important; }
#tela-objetivo .linha-jogo[data-area="idiomas"] .anel, :root[data-tema="escuro"] #tela-objetivo .linha-jogo[data-area="idiomas"] .anel { background: linear-gradient(135deg, #5B10B8, #8B3FE0) !important; }
#tela-objetivo .linha-jogo[data-area="hobbies"] .anel, :root[data-tema="escuro"] #tela-objetivo .linha-jogo[data-area="hobbies"] .anel { background: linear-gradient(135deg, #D8481F, #FF8F5A) !important; }
#tela-objetivo .linha-jogo .anel .ic, #tela-objetivo .linha-jogo .anel svg, :root[data-tema="escuro"] #tela-objetivo .linha-jogo .anel .ic { color: #fff; stroke: #fff; }

/* Início (desktop): painel da direita em cinza-azulado, convite em verde-azulado e azul (menos roxo) */
@media (min-width: 1180px) {
  .feed-lateral { background: linear-gradient(180deg, #161C30 0%, #0F1424 100%); box-shadow: 0 0 0 1px rgba(94, 149, 255, 0.2), 0 28px 50px -30px rgba(0, 0, 0, 0.9); }
  :root[data-tema="claro"] .feed-lateral { background: linear-gradient(180deg, #EAF1FD 0%, #DCE8FA 100%); box-shadow: 0 0 0 1px rgba(44, 95, 216, 0.16); }
  .lat-ver { background: rgba(94, 149, 255, 0.22); }
  .lat-ver:hover { background: rgba(94, 149, 255, 0.34); }
  .lat-convite { background: linear-gradient(145deg, #0B7C84, #2B5FD6); }
  .lat-ico { background: rgba(94, 149, 255, 0.18) !important; }
}

/* Cartão "Seu perfil de estudo" */
.perfil-estudo-card { padding: 18px 16px; }
.pe-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pe-topo .prog-titulo { margin: 0; }
.pe-selos { display: flex; gap: 6px; flex-wrap: wrap; }
.pe-selos em { padding: 3px 10px; border-radius: 999px; background: linear-gradient(135deg, #2C5FD8, #2CCBB9); color: #fff; font: 800 12px var(--font-body); font-style: normal; }
.pe-periodo { margin: 4px 0 12px; color: var(--text-3); font: 600 12px var(--font-body); }
.pe-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.pe-stats > div { padding: 10px 8px; border-radius: 14px; background: var(--ink-900); text-align: center; }
.pe-stats b { display: block; color: var(--text); font: 900 17px / 1.1 var(--font-display); }
.pe-stats span { display: block; color: var(--text-2); font: 600 12px var(--font-body); }
.pe-stats small { display: block; margin-top: 2px; color: var(--text-3); font: 600 10.5px var(--font-body); }
.pe-sub { margin: 0 0 8px; color: var(--text-3); font: 800 11.5px var(--font-body); letter-spacing: 0.07em; text-transform: uppercase; }
.pe-sub-topo { margin-top: 16px; }
.pe-barra { margin-bottom: 10px; }
.pe-barra-topo { display: flex; justify-content: space-between; gap: 8px; color: var(--text); font: 600 14px var(--font-body); }
.pe-barra-topo b { color: var(--text-2); font: 700 13px var(--font-body); }
.pe-barra-trilho { height: 8px; margin-top: 5px; border-radius: 999px; background: var(--ink-700); overflow: hidden; }
.pe-barra-trilho i { display: block; height: 100%; border-radius: 999px; }
.pe-par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pe-par .pe-sub { margin-bottom: 6px; }
.pe-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pe-chip { display: inline-block; margin: 0 6px 6px 0; padding: 4px 10px; border-radius: 999px; font: 700 12.5px var(--font-body); color: var(--text); background: var(--ink-700); }
.pe-chip b { margin-left: 4px; font-weight: 900; }
.pe-chip.forte { background: rgba(31, 209, 138, 0.18); box-shadow: inset 0 0 0 1px rgba(31, 209, 138, 0.4); }
.pe-chip.fraco { background: rgba(255, 106, 168, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 106, 168, 0.45); }
.pe-chip.ia { background: rgba(94, 149, 255, 0.18); box-shadow: inset 0 0 0 1px rgba(94, 149, 255, 0.4); }
.pe-vazio { color: var(--text-3); font: 500 13px / 1.4 var(--font-body); }

/* Perfil público: "sobre o estudo" e etiqueta do curso dos sonhos */
.estudo-pilula.curso { background: rgba(255, 193, 61, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 193, 61, 0.45); }
.pub-sobre { margin-top: 12px; padding: 14px; border-radius: 16px; background: var(--ink-800); box-shadow: 0 0 0 1px var(--line); }
.pub-sobre[hidden] { display: none; }
.pub-sobre .pe-sub { margin-bottom: 8px; }
.pub-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); }
.pub-linha:first-of-type { border-top: 0; }
.pub-linha span { color: var(--text-3); font: 600 13px var(--font-body); flex: none; }
.pub-linha b { color: var(--text); font: 700 14px var(--font-body); text-align: right; }
.cfg-curso-rotulo { display: block; margin: 16px 0 6px; }

/* Plano de estudo por curso */
.plano-item-btn { width: 100%; border: 0; font-family: var(--font-body); color: var(--text); text-align: left; cursor: pointer; }
.plano-item-btn:hover { background: var(--ink-700); }
.plano-prio { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: rgba(255, 193, 61, 0.2); color: #FFC13D; font: 800 10.5px var(--font-body); font-style: normal; letter-spacing: 0.04em; text-transform: uppercase; }
.plano-dica { margin: 10px 0 0; color: var(--text-3); font: 500 12px var(--font-body); }
.plano-sub b { color: var(--text); }

/* Fundo animado da página inicial: parte do site, sem moldura nem controles */
.land-hero > video.land-fundo-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; mix-blend-mode: screen; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 42%, #000 35%, transparent 100%); mask-image: radial-gradient(ellipse 85% 75% at 50% 42%, #000 35%, transparent 100%); }
.land-hero > *:not(video):not(.land-brilho) { z-index: 1; }
:root[data-tema="claro"] .land-hero > video.land-fundo-video { display: none; }
@media (prefers-reduced-motion: reduce) { .land-hero > video.land-fundo-video { opacity: 0.35; } }

/* Perfil próprio: mesmo desenho do perfil público (foto e números em cima, identidade embaixo) */
#tela-perfil .perfil-topo-linha { display: flex; align-items: center; gap: 18px; margin-bottom: 12px; }
#tela-perfil .perfil-topo-linha .social-contagem { flex: 1; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; border: 0; }
#tela-perfil .perfil-topo-linha .social-contagem .contador:first-child { display: none; }
#tela-perfil .perfil-ident { width: 100%; }
#tela-perfil .perfil-nome-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#tela-perfil .perfil-linha-arroba { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
#tela-perfil .nivel-selo { margin-left: 0; padding: 2px 9px; height: auto; font-size: 12px; }
#tela-perfil .perfil-botoes { margin-top: 14px; }
#tela-perfil #perfil-estudo { margin-top: 10px; }

/* Painel de custo da IA (admin) */
.custo-mes { margin-bottom: 12px; padding: 14px 16px; border-radius: 18px; background: var(--ink-800); box-shadow: 0 0 0 1px var(--line); }
.custo-mes > b { display: block; margin-bottom: 8px; color: var(--text); font: 800 15px var(--font-body); text-transform: capitalize; }
.custo-linhas { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; }
.custo-linhas span { color: var(--text-2); font: 500 14px var(--font-body); }
.custo-linhas b { color: var(--text); font: 800 14px var(--font-body); text-align: right; }
.custo-res { padding-top: 8px; border-top: 1px solid var(--line); }
.custo-res.ok { color: #1FD18A !important; }
.custo-res.neg { color: #FF6AA8 !important; }
.custo-mes small { display: block; margin-top: 10px; color: var(--text-3); font: 500 12px var(--font-body); }

/* Encontrar pessoas: carrossel no Início e lista na busca */
.sug-pessoas { margin: 4px 0 14px; }
.sug-pessoas[hidden] { display: none; }
.sug-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sug-topo b { color: var(--text); font: 800 15px var(--font-body); }
.sug-trilho { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; scrollbar-width: none; }
.sug-trilho::-webkit-scrollbar { display: none; }
.sug-card { flex: none; width: 138px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 10px 12px; border-radius: 20px; background: var(--ink-800); box-shadow: 0 0 0 1px var(--line); text-align: center; scroll-snap-align: start; }
.sug-av { padding: 0; border: 0; background: none; cursor: pointer; margin-bottom: 6px; }
.sug-av .avatar-circulo { width: 58px; height: 58px; font-size: 22px; }
.sug-card b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font: 800 14px var(--font-body); }
.sug-card small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); font: 500 12px var(--font-body); }
.sug-motivo { margin-top: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(94, 149, 255, 0.18); color: var(--text); font: 700 11px var(--font-body); }
.sug-estudo { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font: 600 11.5px var(--font-body); }
.sug-card .botao-seguir { margin-top: 8px; width: 100%; }
.busca-pessoas { margin-bottom: 8px; }
.busca-pessoas:empty { display: none; }
.busca-pessoas .rotulo-secao { margin: 6px 4px; }

/* Estudar a partir do seu material */
.ferr-material { margin: 0 0 16px; padding: 16px; border-radius: 22px; background: var(--ink-800); box-shadow: 0 0 0 1px var(--line); }
.ferr-material .ferr-rotulo { margin: 0 0 8px; }
.ferr-material textarea { width: 100%; min-height: 84px; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--ink-900); color: var(--text); font: 500 15px / 1.45 var(--font-body); resize: vertical; box-shadow: inset 0 0 0 1px var(--line); }
.ferr-material textarea:focus { outline: 2px solid var(--violet-500, #8B3FE0); outline-offset: 1px; }
.fm-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.fm-linha small { margin-left: auto; color: var(--text-3); font: 600 12px var(--font-body); }
.fm-btn { min-height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--ink-700); color: var(--text); font: 700 13px var(--font-body); cursor: pointer; }
.fm-btn.gravando { background: #FF6AA8; color: #3A0A22; animation: fm-pulsa 1.2s ease-in-out infinite; }
@keyframes fm-pulsa { 50% { opacity: 0.65; } }
.fm-formatos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fm-fmt { min-height: 42px; padding: 0 6px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #5B10B8, #8B3FE0); color: #fff; font: 800 13px var(--font-body); cursor: pointer; }
.fm-fmt:nth-child(2) { background: linear-gradient(135deg, #C81E6E, #F0578F); }
.fm-fmt:nth-child(3) { background: linear-gradient(135deg, #0A7C72, #17A596); }
.fm-fmt:nth-child(4) { background: linear-gradient(135deg, #2C5FD8, #5E95FF); }
.fm-fmt:disabled { opacity: 0.35; cursor: default; }
.fm-dica { display: block; margin-top: 10px; color: #FF6AA8; font: 700 12.5px var(--font-body); }
@media (max-width: 420px) { .fm-fmt { font-size: 12px; } }
.ia-ouvir { margin-left: auto; flex: none; }

/* Sua jornada */
.jornada-card { padding: 18px 16px; }
.jor-proximo { margin: 8px 0 14px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(44, 95, 216, 0.28), rgba(44, 203, 185, 0.2)); }
.jor-proximo > span { display: block; margin-bottom: 4px; color: var(--text-3); font: 800 11px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.jor-proximo p { margin: 2px 0; color: var(--text-2); font: 500 14px / 1.4 var(--font-body); }
.jor-proximo b { color: var(--text); font-weight: 800; }
.jor-lista { position: relative; margin: 0 0 6px; padding: 0 0 0 4px; list-style: none; }
.jor-lista::before { content: ""; position: absolute; left: 10px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.jor-lista li { position: relative; display: flex; gap: 14px; padding: 7px 0; }
.jor-lista li i { flex: none; width: 14px; height: 14px; margin: 4px 0 0 3px; border-radius: 50%; box-shadow: 0 0 0 3px var(--ink-800); z-index: 1; }
.jor-lista b { display: block; color: var(--text); font: 700 14.5px / 1.3 var(--font-body); }
.jor-lista small { color: var(--text-3); font: 500 12px var(--font-body); }

/* Perfil no desktop: cartão de identidade fixo à esquerda, abas e conteúdo à direita */
@media (min-width: 1100px) {
  #tela-perfil.ativa { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 0 32px; align-items: start; max-width: 1080px; margin: 0 auto; }
  #tela-perfil > .perfil-cartao { grid-column: 1; grid-row: 1 / span 8; position: sticky; top: 28px; padding: 22px; border-radius: 26px; background: var(--ink-800); box-shadow: 0 0 0 1px var(--line); }
  #tela-perfil > :not(.perfil-cartao) { grid-column: 2; }
  #tela-perfil .perfil-topo-linha { flex-direction: column; align-items: flex-start; gap: 14px; }
  #tela-perfil .perfil-topo-linha .social-contagem { width: 100%; flex: none; padding-top: 12px; border-top: 1px solid var(--line); }
  #tela-perfil .perfil-botoes { flex-direction: column; }
  #tela-perfil .perfil-botoes .botao-secundario { width: 100%; }
}

/* Próximo passo + meta diária */
.proximo-passo { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; padding: 16px; border-radius: 22px; color: #fff; background: linear-gradient(135deg, #0E8F7E 0%, #2C5FD8 100%); box-shadow: 0 18px 34px -24px rgba(28, 86, 201, 0.9); }
.proximo-passo[hidden] { display: none; }
.proximo-passo.bateu { background: linear-gradient(135deg, #C57A00 0%, #E8573A 100%); box-shadow: 0 18px 34px -24px rgba(232, 87, 58, 0.9); }
.pp-anel { position: relative; flex: none; width: 84px; height: 84px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; font-family: var(--font-body); }
.pp-anel svg { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); transform: rotate(-90deg); }
.pp-trilho, .pp-prog { fill: none; stroke-width: 6; }
.pp-trilho { stroke: rgba(255, 255, 255, 0.25); }
.pp-prog { stroke: #fff; stroke-linecap: round; transition: stroke-dasharray 0.6s var(--ease-out, ease-out); }
.pp-anel span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; font-size: 24px; font-weight: 800; }
.pp-anel b { font: 800 20px var(--font-body); }
.pp-anel small { font: 700 10px var(--font-body); opacity: 0.85; margin-top: 1px; }
.pp-corpo { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.pp-rotulo { font: 800 11px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.pp-titulo { font: 800 18px / 1.25 var(--font-body); }
.pp-corpo small { font: 500 13px / 1.35 var(--font-body); opacity: 0.9; }
.pp-cta { margin-top: 10px; min-height: 40px; padding: 0 20px; border: 0; border-radius: 999px; background: #fff; color: #0B3A66; font: 800 14px var(--font-body); cursor: pointer; }
.proximo-passo.bateu .pp-cta { color: #7A2A12; }
.meta-opcoes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.meta-opcao { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px; border: 0; border-radius: 16px; background: var(--ink-700); color: var(--text); text-align: left; cursor: pointer; font-family: var(--font-body); box-shadow: inset 0 0 0 1px var(--line); }
.meta-opcao b { font: 800 20px var(--font-body); }
.meta-opcao span { font: 700 13px var(--font-body); }
.meta-opcao small { color: var(--text-3); font: 500 12px / 1.3 var(--font-body); }
.meta-opcao.ativa { box-shadow: inset 0 0 0 2px #2CCBB9; background: rgba(44, 203, 185, 0.14); }
/* Funil (admin) */
.funil-chips { display: flex; gap: 8px; margin: 8px 0; }
.funil-linha { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 9px 10px; margin: 4px 0; border-radius: 10px; overflow: hidden; font: 600 14px var(--font-body); }
.funil-linha > * { position: relative; z-index: 1; }
.funil-linha i { position: absolute; left: 0; top: 0; bottom: 0; z-index: 0; background: rgba(44, 203, 185, 0.22); border-radius: 10px; }

/* Convite para instalar o app */
.instalar-card { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 12px 12px 14px; border-radius: 18px; background: var(--ink-800); box-shadow: 0 0 0 1px var(--line); }
.instalar-card[hidden] { display: none; }
.instalar-card img { flex: none; width: 44px; height: 44px; border-radius: 12px; }
.instalar-card div { flex: 1; min-width: 0; }
.instalar-card b { display: block; color: var(--text); font: 800 14.5px / 1.25 var(--font-body); }
.instalar-card small { color: var(--text-3); font: 500 12.5px / 1.3 var(--font-body); }
.ic-instalar { flex: none; min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: #FFE14D; color: #2A0F5E; font: 800 13px var(--font-body); cursor: pointer; }
.ic-fechar { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--text-3); font: 400 22px / 1 var(--font-body); cursor: pointer; }

/* Modo foco */
.foco-corpo { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 460px; margin: 0 auto; padding: 8px 4px 40px; }
.foco-intro { margin: 0; color: var(--text-2); font: 500 15px / 1.5 var(--font-body); text-align: center; }
.foco-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.foco-preset { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 6px; border: 0; border-radius: 18px; background: var(--ink-800); color: var(--text); cursor: pointer; font-family: var(--font-body); box-shadow: inset 0 0 0 1px var(--line); }
.foco-preset b { font: 800 20px var(--font-body); }
.foco-preset small { color: var(--text-3); font: 600 12px var(--font-body); }
.foco-preset.ativo { background: rgba(44, 203, 185, 0.16); box-shadow: inset 0 0 0 2px #2CCBB9; }
.foco-mat { display: flex; flex-direction: column; gap: 6px; width: 100%; color: var(--text-2); font: 700 13px var(--font-body); }
.foco-mat select { min-height: 48px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--ink-800); color: var(--text); font: 600 15px var(--font-body); box-shadow: inset 0 0 0 1px var(--line); }
.foco-corpo .botao-primario, .foco-corpo .botao-secundario { width: 100%; }
.foco-nota { color: var(--text-3); font: 500 12.5px / 1.4 var(--font-body); text-align: center; }
.foco-anel { position: relative; width: min(78vw, 300px); aspect-ratio: 1; margin-top: 10px; }
.foco-anel svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.foco-trilho, .foco-arco { fill: none; stroke-width: 10; }
.foco-trilho { stroke: var(--line); }
.foco-arco { stroke: #2CCBB9; stroke-linecap: round; transition: stroke-dasharray 0.5s linear; }
.foco-anel.pausa .foco-arco { stroke: #FFC13D; }
.foco-anel.pronto .foco-arco { stroke: #8B3FE0; }
.foco-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.foco-fase { color: var(--text-3); font: 800 12px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.foco-centro b { color: var(--text); font: 800 clamp(44px, 16vw, 64px) / 1 var(--font-display, var(--font-body)); font-variant-numeric: tabular-nums; }
.foco-centro small { max-width: 70%; color: var(--text-2); font: 600 14px var(--font-body); }
.foco-resumo { margin: 0; color: var(--text-2); font: 600 14px var(--font-body); text-align: center; }
.foco-acoes { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.foco-pilula { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 10px); transform: translateX(-50%); z-index: 60; min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: #0E8F7E; color: #fff; font: 800 13px var(--font-body); font-variant-numeric: tabular-nums; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.6); cursor: pointer; }
.foco-pilula[hidden] { display: none; }

/* Ferramentas: mais enxuta (créditos compactos, 2 fotos lado a lado, um bloco de material) */
.tela-ferramentas .ferr-creditos { margin: 0 0 6px; padding: 8px 12px; gap: 10px; border-radius: 14px; }
.tela-ferramentas .fc-linha { font-size: 12.5px; }
.tela-ferramentas .fc-linha b { font-size: 15px; }
.tela-ferramentas .fc-barra { height: 4px; margin: 5px 0 0; }
.tela-ferramentas .fc-info small { display: inline; margin-left: 6px; font-size: 11.5px; }
.tela-ferramentas .fc-btn { min-height: 32px; padding: 0 12px; font-size: 12px; }
.tela-ferramentas .ferr-rotulo { margin: 14px 2px 8px; }
.ferr-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ferr-foto { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 14px; border: 0; border-radius: 20px; background: var(--ink-800); box-shadow: 0 0 0 1px var(--line); color: var(--text); text-align: left; cursor: pointer; transition: transform 0.12s; font-family: var(--font-body); }
.ferr-foto:active { transform: scale(0.97); }
.ff-ico { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 6px; border-radius: 13px; background: linear-gradient(135deg, #5B10B8, #8B3FE0); }
.ff-rosa .ff-ico { background: linear-gradient(135deg, #D6247A, #FF6AA8); }
.ff-ico .ic { width: 22px; height: 22px; color: #fff; stroke: #fff; }
.ferr-foto strong { font: 800 15.5px / 1.2 var(--font-body); }
.ferr-foto small { color: var(--text-2); font: 500 12.5px / 1.3 var(--font-body); }
.ff-custo { margin-top: 6px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--text-2); font: 700 11.5px var(--font-body); font-style: normal; }
.tela-ferramentas .ferr-material { margin: 0 0 10px; padding: 12px; border-radius: 20px; }
.tela-ferramentas .ferr-material textarea { min-height: 62px; }
.tela-ferramentas .fm-linha { margin: 8px 0; }
.fm-custos { display: block; margin-top: 8px; color: var(--text-3); font: 500 12px / 1.4 var(--font-body); }
@media (min-width: 1000px) { .ferr-foto { padding: 20px; } .ferr-foto strong { font-size: 17px; } .tela-ferramentas .ferr-material { padding: 16px; } .tela-ferramentas .ferr-material textarea { min-height: 84px; } }

/* Perfil: quatro abas (Resumo, Matérias, Plano, Jornada) e destaques fixados como botão */
.abas-perfil .filtro-chip { padding-left: 4px; padding-right: 4px; font-size: 14px; }
button.destaque-chip { border: 0; font-family: inherit; cursor: pointer; }
[data-ppainel] > .prog-card, [data-ppainel] > #nota-estimada-slot, [data-ppainel] > #plano-estudo-slot { margin-bottom: 12px; }
#perfil-raiox { padding: 16px; }
#perfil-raiox .rotulo-secao { margin: 0 0 8px; }
.conq-cont { color: var(--text-3); font: 700 13px var(--font-body); margin-left: 6px; } /* usado no painel de admin */
/* "+": quatro atalhos de compartilhar em grade 2x2, sem uma sobrando sozinha */
.folha-registrar .reg-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.folha-registrar .reg-chips .reg-chip { width: 100%; justify-content: center; }

/* alvo de toque mínimo no "+ O que você estuda" do perfil */
.estudo-pilula.estudo-add { min-height: 32px; display: inline-flex; align-items: center; }

/* Aviso embaixo dos 4 botões: diz o que fazer em seguida */
.fm-aviso { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; padding: 11px 13px; border-radius: 14px; background: rgba(255, 225, 77, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 225, 77, 0.35); color: var(--text); font: 700 13.5px / 1.4 var(--font-body); }
.fm-aviso b { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #FFE14D; color: #2A0A5E; font: 900 14px var(--font-body); }
.fm-aviso.pronto { background: rgba(44, 203, 185, 0.14); box-shadow: inset 0 0 0 1px rgba(44, 203, 185, 0.5); }
.fm-aviso.pronto b { background: #2CCBB9; }
.fm-formatos.chamar .fm-fmt { animation: fm-chama 1.6s ease-in-out 3; }
@keyframes fm-chama { 50% { transform: translateY(-3px); box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.6); } }
@media (prefers-reduced-motion: reduce) { .fm-formatos.chamar .fm-fmt { animation: none; } }

/* Folhas (story, registrar, etc.): nunca passam da tela, rolam por dentro e o topo continua alcançável (antes cortava em cima no iPhone) */
.folha-caixa { max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; outline: none; }
@media (max-width: 600px) { .folha-caixa { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } } /* espaço para a barra flutuante do Safari */
/* Story: prévia menor e espaçamento mais justo, para as opções caberem sem rolar na maioria dos celulares */

/* Compartilhar (story): prévia grande, controles enxutos e um botão principal, no estilo de apps como Strava */
.folha-caixa.story-folha { --text: #fff; --text-2: rgba(255, 255, 255, 0.78); --text-3: rgba(255, 255, 255, 0.55); --line: rgba(255, 255, 255, 0.12); max-width: 440px; gap: 12px; padding: 12px 18px calc(18px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, #1A1236 0%, #0D0920 100%); }
@media (max-width: 600px) { .folha-caixa.story-folha { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } }
.sf-topo { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; }
.sf-topo h2 { margin: 0; text-align: center; font: 800 16px var(--font-body); letter-spacing: 0.01em; }
.sf-x { width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; font: 600 16px var(--font-body); cursor: pointer; }
.sf-palco { display: flex; justify-content: center; padding: 2px 0 4px; }
.folha-caixa.story-folha .story-previa { max-height: min(46vh, 440px); max-height: min(46dvh, 440px); border-radius: 22px; box-shadow: 0 28px 56px -22px rgba(139, 63, 224, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.1); }
.folha-caixa.story-folha .sf-tipos { justify-content: center; flex-wrap: nowrap; gap: 4px; overflow: visible; }
.folha-caixa.story-folha .sf-tipos .filtro-chip { min-height: 32px; padding: 0 10px; flex: none; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--text-2); font: 700 13px var(--font-body); box-shadow: none; }
.folha-caixa.story-folha .sf-tipos .filtro-chip.ativo { background: #fff; color: #1A1236; }
.folha-caixa.story-folha .sf-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, 0.07); overflow: visible; }
.folha-caixa.story-folha .sf-seg .filtro-chip { min-height: 38px; border-radius: 10px; background: transparent; color: var(--text-2); font: 700 14px var(--font-body); box-shadow: none; }
.folha-caixa.story-folha .sf-seg .filtro-chip.ativo { background: rgba(255, 255, 255, 0.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.folha-caixa.story-folha .story-dica { margin: -4px 0 0; color: var(--text-3); }
.folha-caixa.story-folha .sf-principal { min-height: 52px; border: 0; border-radius: 16px; background: #FFE14D; color: #2A0A5E; font: 900 16px var(--font-body); box-shadow: 0 14px 28px -14px rgba(255, 225, 77, 0.6); }
.sf-linha { display: flex; justify-content: center; gap: 6px; }
.sf-sec { min-height: 42px; padding: 0 14px; border: 0; border-radius: 12px; background: none; color: var(--text-2); font: 700 14px var(--font-body); cursor: pointer; }
.sf-sec:hover, .sf-sec:active { background: rgba(255, 255, 255, 0.08); color: #fff; }
.sf-copiar { align-self: center; }
.sf-sec[hidden] { display: none; }

/* Planos: limpo e direto (seletor Anual/Mensal, cartão Grátis curto, Plus em destaque com um botão só) */
#tela-planos.tela-planos { width: min(100%, 860px); margin-inline: auto; }
.pl-corpo { display: flex; flex-direction: column; gap: 20px; padding-bottom: 28px; }
.pl-periodo { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; align-self: center; padding: 4px; border-radius: 999px; background: var(--ink-800); box-shadow: 0 0 0 1px var(--line); }
.pl-p { min-height: 40px; padding: 0 22px; border: 0; border-radius: 999px; background: none; color: var(--text-2); font: 800 14px var(--font-body); cursor: pointer; }
.pl-p em { margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: #1FD18A; color: #04301F; font: 900 11px var(--font-body); font-style: normal; }
.pl-p.ativo { background: #5B16B8; color: #fff; }
.pl-cards { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .pl-cards { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.pl-card { display: flex; flex-direction: column; gap: 12px; padding: 22px 20px; border-radius: 24px; background: var(--ink-800); box-shadow: 0 0 0 1px var(--line); }
.pl-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pl-cab h2 { margin: 0; font: 800 18px / 1.2 var(--font-display); color: var(--text); }
.pl-selo { padding: 4px 10px; border-radius: 999px; background: rgba(44, 203, 185, 0.16); color: #2CCBB9; font: 800 11px var(--font-body); letter-spacing: 0.05em; text-transform: uppercase; }
.pl-preco { display: flex; align-items: baseline; gap: 6px; margin: 0; color: var(--text); }
.pl-preco b { font: 900 40px / 1 var(--font-display); letter-spacing: -0.02em; }
.pl-preco span { color: var(--text-2); font: 700 16px var(--font-body); }
.pl-nota { margin: -4px 0 0; color: var(--text-3); font: 500 13px / 1.4 var(--font-body); }
.pl-uso { margin: -4px 0 0; color: var(--text-2); font: 500 14px var(--font-body); }
.pl-uso b { color: var(--text); font-weight: 800; }
.pl-uso[hidden] { display: none; }
.pl-lista { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.pl-lista li { position: relative; padding-left: 26px; color: var(--text-2); font: 500 15px / 1.4 var(--font-body); }
.pl-lista li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #2CCBB9; font: 900 15px / 1.4 var(--font-body); }
.pl-lista b { color: var(--text); font-weight: 800; }
/* Plus: sempre roxo escuro, com texto claro nos dois temas */
.pl-plus { --text: #fff; --text-2: rgba(255, 255, 255, 0.82); --text-3: rgba(255, 255, 255, 0.62); --line: rgba(255, 255, 255, 0.16); background: linear-gradient(165deg, #3A0C80 0%, #5B16B8 100%); box-shadow: 0 22px 44px -26px rgba(91, 22, 184, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.14); }
.pl-plus .pl-selo { background: rgba(255, 225, 77, 0.2); color: #FFE14D; }
.pl-plus .pl-lista li::before { color: #FFE14D; }
.pl-plus .plano-aviso { margin: 0; color: rgba(255, 255, 255, 0.78); font: 500 13px / 1.45 var(--font-body); }
.pl-cta { width: 100%; min-height: 54px; margin-top: auto; border: 0; border-radius: 16px; background: #FFE14D; color: #2A0A5E; font: 900 16px var(--font-body); cursor: pointer; }
.pl-cta:disabled { opacity: 0.6; cursor: default; }
#plano-comprar { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
#plano-comprar[hidden] { display: none; }
.pl-regras { color: rgba(255, 255, 255, 0.85); }
.pl-regras summary { cursor: pointer; font: 700 13px var(--font-body); }
.pl-regras .plano-aviso { margin-top: 8px; }
.pl-plus .link-legal, .pl-plus .link-mini { color: #FFE14D; }
.pl-japaguei { align-self: center; }
.pl-rodape { margin: 0; color: var(--text-3); font: 500 13px / 1.45 var(--font-body); text-align: center; }

/* Último passo da apresentação: foco no primeiro treino */
.onb-alvo { margin: 0; color: var(--text); font: 800 15px var(--font-body); text-align: center; }
.onb-alvo:empty { display: none; }
#tela-onboarding .onb-passo[data-passo="3"] { display: flex; flex-direction: column; align-items: center; gap: 12px; }
#tela-onboarding .onb-passo[data-passo="3"][hidden] { display: none; }
.onb-social { display: flex; align-items: center; gap: 8px; color: var(--text-3); }

/* Calendário do perfil: no computador as células não passam de ~56 px */
.cal-grade { max-width: 420px; margin-inline: auto; }
/* Links pequenos (Termos etc.) com área de toque maior */
.link-legal { min-height: 32px; display: inline-flex; align-items: center; }
/* Página inicial: preços visíveis */
.land-precos { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 640px; margin: 22px auto 0; text-align: left; }
@media (min-width: 640px) { .land-precos { grid-template-columns: 1fr 1fr; } }
.land-precos > div { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 20px; background: rgba(255, 255, 255, 0.06); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.land-precos .destaque { background: linear-gradient(165deg, #3A0C80, #5B16B8); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 18px 36px -22px rgba(91, 22, 184, 0.9); }
.land-precos b { font: 800 14px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: #FFE14D; }
.land-precos span { font: 900 28px / 1.1 var(--font-display); color: #fff; }
.land-precos small { color: rgba(255, 255, 255, 0.72); font: 500 13px / 1.4 var(--font-body); }

/* Pergunta do dia */
.pergunta-dia { margin: 0 0 14px; padding: 16px; border-radius: 22px; background: var(--ink-800); box-shadow: 0 0 0 1px var(--line); }
.pergunta-dia[hidden] { display: none; }
.pd-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pd-rotulo { color: #2CCBB9; font: 800 11px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.pd-seq { padding: 3px 9px; border-radius: 999px; background: rgba(255, 193, 61, 0.18); color: #FFC13D; font: 800 11px var(--font-body); }
.pd-q { margin: 0 0 10px; color: var(--text); font: 700 16px / 1.4 var(--font-body); }
.pd-ops { display: flex; flex-direction: column; gap: 8px; }
.pd-op { width: 100%; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--ink-700); color: var(--text); text-align: left; font: 600 14.5px / 1.35 var(--font-body); cursor: pointer; }
.pd-op:disabled { cursor: default; }
.pd-op.certa { background: rgba(31, 209, 138, 0.2); box-shadow: inset 0 0 0 1.5px #1FD18A; }
.pd-op.errada { background: rgba(255, 90, 90, 0.16); box-shadow: inset 0 0 0 1.5px #FF6B6B; }
.pd-aviso { display: block; margin-top: 10px; color: var(--text-3); font: 500 12.5px var(--font-body); }
.pd-fim { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.pd-fim > b { font: 800 15px var(--font-body); color: var(--text); }
.pd-fim p { margin: 0; color: var(--text-2); font: 500 14px / 1.45 var(--font-body); }
.pd-dica { padding: 10px 12px; border-radius: 12px; background: rgba(44, 203, 185, 0.1); }
.pd-cta { align-self: flex-start; min-height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: #FFE14D; color: #2A0A5E; font: 800 14px var(--font-body); cursor: pointer; }
/* Treinar > Hoje no computador: o treino rápido e o modo foco ficam na coluna da direita */
@media (min-width: 1100px) {
  #tela-objetivo [data-treinar-painel="hoje"] #rapido-slot, #tela-objetivo [data-treinar-painel="hoje"] #foco-slot { grid-column: 2; margin-top: 0; margin-bottom: 0; }
}
/* Mensagens e Buscar: um pouco mais largas no computador */
@media (min-width: 900px) { .tela-mensagens, .tela-conversa, #tela-busca.tela-social { max-width: 760px; } }