/* 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 ---------- */
.conq-cont { color: var(--text-3); font: 700 13px var(--font-body); margin-left: 6px; }
.conq-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 8px; }
.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); }
[data-ppainel="progresso"] .xp-trilho { margin-top: 8px; height: 4px; width: 100%; }
[data-ppainel="conquistas"] .rotulo-secao { margin-bottom: 10px; }

/* 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 ---------- */
#perfil-heatmap { margin-top: 16px; }
.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); }
.prog-nivel .xp-trilho { width: 100%; height: 12px; margin-top: 0; background: rgba(91, 16, 184, 0.12); }
.prog-nivel .xp-trilho > div { background: linear-gradient(90deg, #5B10B8, #D6247A); }
.prog-nivel .painel-xp { margin-top: 8px; font-size: 13px; color: var(--text-2); }
[data-ppainel="progresso"] .nota-card, [data-ppainel="progresso"] .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="progresso"] .nota-card-vazio .nota-card-icone, [data-ppainel="progresso"] .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="progresso"] .nota-card-vazio .nota-card-icone .ic, [data-ppainel="progresso"] .plano-vazio .nota-card-icone .ic { width: 28px; height: 28px; stroke: #fff; color: #fff; }
[data-ppainel="progresso"] .plano-vazio .nota-card-icone { background: linear-gradient(135deg, #D6247A, #FF6AA8); }
#perfil-heatmap { margin: 0 0 12px; padding: 16px; border-radius: 22px; background: var(--ink-800); box-shadow: 0 0 0 1px var(--line); }
#perfil-heatmap .rotulo-secao { margin: 0; }
#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; }
[data-grupo="prefs"] .botao-secundario[data-filtro-feed] { margin-top: 10px; }


/* ---------- 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-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 10px 0 12px; }
.feed-chips::-webkit-scrollbar { display: none; }
.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) (2026-10-10) ---------- */
.tela-landing { padding: 0; align-items: stretch; background: radial-gradient(900px 480px at 85% -5%, rgba(122, 77, 216, 0.22), transparent 60%), radial-gradient(700px 420px at -5% 30%, rgba(214, 36, 122, 0.10), transparent 60%), var(--ink-900); }
.tela-landing > * { width: 100%; max-width: 1120px; margin-inline: auto; }
.land-topo { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; }
.land-topo .wordmark { height: 26px; width: auto; }
.land-entrar { width: auto; min-height: 40px; padding: 0 22px; border-radius: 999px; }
.land-hero { display: grid; gap: 36px; padding: 18px 20px 36px; align-items: 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 14px; font: 900 clamp(34px, 9vw, 58px) / 1.04 var(--font-display); letter-spacing: -0.02em; color: var(--text); }
.land-sub { margin: 0 0 24px; max-width: 520px; font: 500 clamp(16px, 4.2vw, 19px) / 1.5 var(--font-body); color: var(--text-2); }
.land-ctas { display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.land-ctas .botao-primario, .land-ctas .botao-secundario { width: 100%; min-height: 54px; border-radius: 14px; }
.land-mini { margin: 14px 0 0; font: 500 13px var(--font-body); color: var(--text-3); }
.land-visual { position: relative; min-height: 300px; display: grid; place-items: center; }
.lv-cartao { background: #fff; border-radius: 22px; box-shadow: 0 24px 50px -24px rgba(23, 10, 54, 0.45), 0 0 0 1px var(--line); padding: 16px 18px; }
.lv-cartao small { display: block; font: 800 11px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.lv-nota { width: min(300px, 82%); background: linear-gradient(135deg, #0E8F83, #2CCBB9); color: #fff; box-shadow: 0 24px 50px -22px rgba(14, 143, 131, 0.7); transform: rotate(-3deg); }
.lv-nota small, .lv-nota em { color: rgba(255, 255, 255, 0.85); }
.lv-nota b { display: block; margin: 4px 0 8px; font: 900 56px / 1 var(--font-display); }
.lv-nota b span { font-size: 20px; font-weight: 700; opacity: 0.85; }
.lv-nota em { font: 600 12.5px var(--font-body); font-style: normal; }
.lv-barras { display: flex; gap: 6px; margin: 4px 0 10px; }
.lv-barras i { flex: 1; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.28); position: relative; overflow: hidden; }
.lv-barras i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); background: #fff; border-radius: 4px; }
.lv-flash { position: absolute; right: 0; bottom: 6px; width: min(230px, 62%); transform: rotate(4deg); }
.lv-flash b { display: block; margin: 6px 0 6px; font: 800 17px / 1.2 var(--font-body); color: var(--text); }
.lv-flash em { font: 500 13px var(--font-body); font-style: normal; color: var(--violet-700); }
.lv-seq { position: absolute; left: 0; top: 8px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; transform: rotate(-5deg); }
.lv-seq .ic { width: 28px; height: 28px; color: #E08A00; }
.lv-seq b { display: block; font: 900 20px var(--font-display); color: var(--text); }
.lv-seq small { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 12px; }
.land-beneficios { display: grid; gap: 12px; padding: 8px 20px 28px; }
.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) {
  .tela-landing { padding: 0 24px; }
  .land-topo { padding: 26px 8px; }
  .land-hero { grid-template-columns: 1.05fr 0.95fr; gap: 56px; padding: 56px 8px 72px; }
  .land-ctas { flex-direction: row; max-width: none; }
  .land-ctas .botao-primario, .land-ctas .botao-secundario { width: auto; padding: 0 30px; }
  .land-visual { min-height: 380px; }
  .land-beneficios { grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 8px 8px 56px; }
}