/* ============================================================
   Study AI — v0.6 (PWA + celular: ações rápidas, gravador,
   safe-area do iPhone) · paleta indigo/violeta · cantos suaves

   REGRA CRÍTICA (mantida da v0.3): o atributo hidden do HTML precisa
   vencer qualquer display de classe (ex.: .login-wrap). Sem isto, o JS
   define elemento.hidden = true e o elemento CONTINUA visível.
   ============================================================ */
[hidden] { display: none !important; }

:root {
  --bg: #f4f6fb;
  --bg-suave: #eef1f8;
  --card: #ffffff;
  --texto: #101828;
  --muted: #667085;
  --primaria: #4f46e5;
  --primaria-escura: #3730a3;
  --gradiente: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  /* v0.8: tons derivados da COR DO BLOCO (o app.js recalcula quando o
     bloco tem cor; esses valores são o padrão índigo). */
  --tema-claro: #eef0ff;   /* fundo de seleção/chip/tinta suave */
  --tema-suave: #f7f8ff;   /* fundo de hover */
  --sombra-tema: 0 2px 10px -2px rgba(79, 70, 229, .5);
  --perigo: #dc2626;
  --ok: #16a34a;
  --alerta: #d97706;
  --borda: #e4e8f1;
  --borda-forte: #d2d9e6;
  --raio: 14px;
  --raio-pequeno: 10px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 16px -6px rgba(16, 24, 40, .08);
  --sombra-media: 0 8px 28px -8px rgba(49, 46, 129, .22);
  --anel: 0 0 0 3px rgba(79, 70, 229, .22);
  /* superfícies e tintas usadas por todo o arquivo — o modo noturno troca só
     estas variáveis, e a interface inteira acompanha (v0.17) */
  --tinta-alerta: #fffbeb;
  --tinta-perigo: #fef2f2;
  --tinta-ok: #f0fdf4;
  --tinta-info: #eff6ff;
}

/* ================= MODO NOTURNO (v0.17) ================= */
[data-tema="noturno"] {
  --bg: #0f1420;
  --bg-suave: #171d2d;
  --card: #171e30;
  --texto: #e7ecf6;
  --muted: #93a0b8;
  --borda: #273048;
  --borda-forte: #38425e;
  --tinta-alerta: #2b2410;
  --tinta-perigo: #331a1c;
  --tinta-ok: #14291c;
  --tinta-info: #16202f;
  --perigo: #f87171;
  --ok: #4ade80;
  --alerta: #fbbf24;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px -6px rgba(0, 0, 0, .5);
  color-scheme: dark; /* data inputs, scrollbars e selects nativos escuros */
}
[data-tema="noturno"] html { scrollbar-color: #3a465f transparent; }
[data-tema="noturno"] ::selection { background: rgba(79, 70, 229, .4); }

* { box-sizing: border-box; }

html { scrollbar-color: #c6cddb transparent; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 1.5rem; margin: 0 0 .3rem; letter-spacing: -.02em; }
h2 { font-size: 1.08rem; margin: 0 0 .8rem; letter-spacing: -.01em; }
h3 { font-size: .95rem; margin: 0 0 .6rem; }
.muted { color: var(--muted); font-size: .88rem; }
.erro { color: var(--perigo); font-size: .88rem; margin: .5rem 0 0; }

::selection { background: var(--tema-claro); }

a { color: var(--primaria); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: none; box-shadow: var(--anel); border-radius: 8px; }

/* ---------- componentes base ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.1rem;
  box-shadow: var(--sombra);
}

.btn {
  border: 1px solid var(--borda-forte);
  background: var(--card);
  color: var(--texto);
  border-radius: var(--raio-pequeno);
  padding: .55rem .95rem;
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s, box-shadow .15s;
}
.btn:hover { background: var(--bg-suave); border-color: var(--borda-forte); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: var(--gradiente);
  border: none;
  color: #fff;
  box-shadow: var(--sombra-tema);
}
.btn.primary:hover { filter: brightness(1.07); }
.btn.success { background: var(--ok); border: none; color: #fff; }
.btn.success:hover { background: #15803d; }
.btn.danger { color: var(--perigo); border-color: var(--perigo); background: transparent; }
.btn.danger:hover { background: var(--tinta-perigo); border-color: var(--perigo); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--bg-suave); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn.primary[disabled] { filter: grayscale(.4); }

input, select {
  width: 100%;
  padding: .6rem .75rem;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  font-size: .95rem;
  background: var(--bg-suave);
  color: var(--texto);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--primaria);
  box-shadow: var(--anel);
}
label { display: block; font-size: .88rem; margin-bottom: .6rem; }

/* ---------- login ---------- */
.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1rem;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(42rem 42rem at 115% -10%, rgba(124, 58, 237, .16), transparent 60%),
    radial-gradient(38rem 38rem at -15% 110%, var(--tema-claro), transparent 60%),
    var(--bg);
}
.login-card {
  width: 100%;
  max-width: 380px;
  text-align: center;
  padding: 2rem 1.6rem 1.6rem;
  border-radius: 18px;
  box-shadow: var(--sombra-media);
  backdrop-filter: blur(6px);
}
.login-card h1 {
  background: var(--gradiente);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 1.7rem;
}
.login-card label { text-align: left; }
.login-card .btn { width: 100%; margin-top: .4rem; padding: .7rem; font-size: 1rem; }
.login-logo {
  width: 58px; height: 58px;
  margin: 0 auto .8rem;
  display: grid; place-items: center;
  font-size: 1.7rem;
  border-radius: 16px;
  background: var(--gradiente);
  box-shadow: var(--sombra-tema);
}

/* ---------- estrutura ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .65rem 1.1rem;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
  z-index: 5;
}
.logo {
  font-weight: 700;
  letter-spacing: -.01em;
  background: var(--gradiente);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.topbar-actions { display: flex; gap: .25rem; flex-wrap: wrap; }
.layout {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 1rem;
  max-width: 1120px;
  margin: 1.1rem auto;
  padding: 0 1rem;
  align-items: start;
}
.sidebar { position: sticky; top: 4.2rem; }
.lista-blocos-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: .62rem .75rem;
  margin-bottom: .45rem;
  border-radius: var(--raio-pequeno);
  border: 1px solid transparent;
  background: var(--bg-suave);
  cursor: pointer;
  font-size: .92rem;
  transition: background .15s, border-color .15s;
}
.lista-blocos-item:hover { background: var(--bg-suave); }
.lista-blocos-item.ativo {
  border-color: var(--primaria);
  background: var(--tema-claro);
  box-shadow: inset 3px 0 0 var(--primaria);
}
.lista-blocos-item small { color: var(--muted); display: block; }
.novo-bloco { margin-top: 1rem; border-top: 1px solid var(--borda); padding-top: .8rem; }
.novo-bloco input { margin-bottom: .5rem; }
.novo-bloco .btn { width: 100%; }

.bloco-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1rem;
}
.painel .card { margin-bottom: 1rem; }
.vazio {
  text-align: center;
  color: var(--muted);
  padding: 3.2rem 1rem;
  background: var(--card);
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio);
}

/* ---------- upload / documentos ---------- */
.acoes-rapidas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin-bottom: .7rem;
}
.acoes-rapidas .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .7rem .5rem;
  font-size: .92rem;
  font-weight: 600;
}
.acao-foto { margin: 0; cursor: pointer; }
.acao-galeria { margin: 0; cursor: pointer; }
.acao-audio { border-color: var(--primaria); color: var(--primaria-escura); }
.acao-audio:hover { border-color: var(--primaria); background: var(--tema-suave); }

.gravador {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .8rem;
  margin-bottom: .7rem;
  border: 1px solid rgba(220, 38, 38, .35);
  background: var(--tinta-perigo);
  border-radius: var(--raio-pequeno);
  font-size: .92rem;
}
.grav-ponto {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--perigo);
  animation: grav-pulsa 1.1s infinite;
  flex: none;
}
@keyframes grav-pulsa {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.8); }
}
.gravador .btn { margin-left: auto; padding: .4rem .8rem; }

.upload-area {
  display: grid;
  place-items: center;
  gap: .15rem;
  padding: 1.2rem;
  border: 2px dashed var(--borda-forte);
  border-radius: var(--raio);
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s;
}
.upload-area:hover { border-color: var(--primaria); background: var(--tema-suave); }
.dica-bg {
  background: var(--tema-claro);
  border-radius: 8px;
  padding: .5rem .75rem;
  margin: .65rem 0 0;
  font-size: .8rem;
  color: var(--primaria-escura);
}
.progresso { margin: .7rem 0 .2rem; }
.barra {
  height: 8px;
  border-radius: 4px;
  background: #e4e8f1;
  overflow: hidden;
}
.barra > div {
  height: 100%;
  width: 0;
  background: var(--gradiente);
  transition: width .2s;
}
.lista-docs { margin-top: .8rem; display: grid; gap: .5rem; }
.doc {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .75rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  background: var(--bg-suave);
  transition: border-color .15s, box-shadow .15s;
}
.doc:hover { border-color: var(--borda-forte); box-shadow: var(--sombra); }
.doc-icone { font-size: 1.05rem; flex: none; }
.doc-nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .9rem;
}
.badge {
  font-size: .72rem;
  font-weight: 600;
  padding: .18rem .55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.badge.pending { background: var(--bg-suave); color: var(--muted); }
.badge.processing { background: var(--tema-claro); color: var(--primaria-escura); animation: pulsa 1.2s infinite; }
.badge.ready { background: #dcfce7; color: var(--ok); }
.badge.error { background: #fee2e2; color: var(--perigo); }
.badge.roteiro { background: #fef9c3; color: #a16207; }
@keyframes pulsa { 50% { opacity: .55; } }
.doc-acoes { display: flex; gap: .25rem; }
.doc-acoes .btn { padding: .3rem .5rem; font-size: .78rem; }
.doc-acoes .rot-ativo { background: var(--tema-claro); box-shadow: inset 0 0 0 1.5px var(--primaria); }

/* ---------- chat ---------- */
.chat-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.chat-topo h2 { margin: 0; }
.chat-topo .btn { padding: .35rem .65rem; font-size: .8rem; flex: none; }
.chat-nota { margin: .25rem 0 .6rem; }
.chat {
  display: grid;
  gap: .8rem;
  max-height: 54vh;
  overflow-y: auto;
  padding: .2rem;
  scroll-behavior: smooth;
}
.msg {
  border-radius: var(--raio);
  padding: .75rem .95rem;
  font-size: .93rem;
  line-height: 1.55;
  overflow-wrap: break-word;
  animation: surge .18s ease-out;
}
@keyframes surge {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}
.msg.usuario {
  background: var(--gradiente);
  color: #fff;
  justify-self: end;
  max-width: 85%;
  box-shadow: var(--sombra-tema);
}
.msg.assistente { background: var(--card); border: 1px solid var(--borda); max-width: 100%; }
.msg.assistente .cit {
  background: #fef9c3;
  border-radius: 4px;
  padding: 0 .25rem;
  font-weight: 600;
}
.msg .katex-display { overflow-x: auto; overflow-y: hidden; padding: .2rem 0; }
.rs { white-space: nowrap; }

.msg-acoes {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  margin-top: .6rem;
  padding-top: .5rem;
  border-top: 1px dashed var(--borda);
}
.msg-acoes .btn { padding: .28rem .6rem; font-size: .78rem; background: var(--card); }
.msg-acoes .btn:hover { background: var(--bg-suave); }
.hist-nota { margin: .45rem 0 0; font-size: .74rem; opacity: .8; }

.fontes { display: grid; gap: .5rem; margin-top: .65rem; }
.fonte {
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  padding: .5rem .7rem;
  font-size: .84rem;
  background: var(--bg-suave);
}
.fonte summary {
  cursor: pointer;
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
}
.fonte summary::-webkit-details-marker { display: none; }
.chip {
  background: var(--tema-claro);
  color: var(--primaria-escura);
  border-radius: 999px;
  padding: .12rem .55rem;
  font-size: .74rem;
  font-weight: 600;
}
.chip.lex { background: #fdf4ff; color: #86198f; }
.chip.web { background: #ecfeff; color: #0e7490; }

.chat-form { display: flex; gap: .5rem; margin-top: .8rem; }
.chat-form input { flex: 1; }
.chat-opcoes {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .65rem;
}
.chip-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  color: var(--texto);
  background: var(--bg-suave);
  border: 1px solid var(--borda);
  border-radius: 999px;
  padding: .3rem .7rem .3rem .5rem;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s, background .15s;
}
.chip-toggle:hover { border-color: var(--primaria); }
.chip-toggle:has(input:checked) { background: var(--tema-claro); border-color: var(--primaria); color: var(--primaria-escura); }
.chip-toggle input { width: auto; margin: 0; accent-color: var(--primaria); }
.dica-quiz { font-size: .76rem; }

/* ---------- card de prova no chat ---------- */
.quiz-card {
  margin-top: .7rem;
  border: 1px solid var(--primaria);
  border-radius: var(--raio);
  background: linear-gradient(160deg, var(--tema-suave) 0%, #faf8ff 100%);
  padding: .8rem .9rem;
  box-shadow: var(--sombra);
}
.quiz-card-topo { display: flex; gap: .65rem; align-items: center; }
.quiz-icone {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  border-radius: 12px;
  background: var(--gradiente);
  box-shadow: var(--sombra-tema);
}
.quiz-card-titulo { display: grid; line-height: 1.3; }
.quiz-card-titulo strong { font-size: .95rem; }
.quiz-card-acoes {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: .7rem;
}
.quiz-status { background: #dcfce7; color: var(--ok); }

/* ---------- prova em tela cheia ---------- */
.dlg-prova {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  border: none;
  border-radius: 0;
  padding: 0;
  background: var(--bg);
  color: var(--texto);
}
.dlg-prova::backdrop { background: rgba(15, 23, 42, .6); }
#prova-conteudo {
  max-width: 880px;
  margin: 0 auto;
  padding: 1.1rem 1.2rem 3rem;
  height: 100%;
  overflow-y: auto;
}
.prova-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .6rem;
}
.prova-titulo { margin: 0 0 .2rem; font-size: 1.2rem; }
.prova-sub { margin: 0; }
.prova-barra {
  height: 7px;
  border-radius: 4px;
  background: #e4e8f1;
  overflow: hidden;
  margin: .8rem 0 .6rem;
}
.prova-barra > div {
  height: 100%;
  background: var(--gradiente);
  border-radius: 4px;
  transition: width .25s ease;
}
.qdots { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.qdot {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--borda-forte);
  background: var(--card);
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.qdot:hover { border-color: var(--primaria); }
.qdot.feita { background: var(--tema-claro); border-color: var(--primaria); color: var(--primaria-escura); }
.qdot.atual {
  background: var(--gradiente);
  border: none;
  color: #fff;
  box-shadow: var(--sombra-tema);
}

.questao {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.2rem 1.3rem 1.3rem;
  box-shadow: var(--sombra);
  animation: surge .18s ease-out;
}
.questao-enunciado {
  font-size: 1.02rem;
  line-height: 1.55;
  margin: 0 0 1rem;
  white-space: pre-wrap;
}
.questao-num {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  margin-right: .55rem;
  border-radius: 8px;
  background: var(--gradiente);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  vertical-align: middle;
  transform: translateY(-1px);
}
.opcoes { display: grid; gap: .55rem; }
.opcao {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  text-align: left;
  padding: .7rem .8rem;
  border: 1.5px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  background: var(--card);
  font-size: .95rem;
  cursor: pointer;
  transition: border-color .13s, background .13s, box-shadow .13s;
}
.opcao:hover { border-color: var(--primaria); background: var(--tema-suave); }
.opcao.selecionada {
  border-color: var(--primaria);
  background: var(--tema-claro);
  box-shadow: var(--anel);
}
.opcao-letra {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--bg-suave);
  border: 1px solid var(--borda);
  font-size: .8rem;
  font-weight: 700;
  color: var(--muted);
}
.opcao.selecionada .opcao-letra { background: var(--gradiente); border: none; color: #fff; }
.opcao-texto { flex: 1; overflow-wrap: break-word; }
.opcao .katex-display { overflow-x: auto; overflow-y: hidden; margin: .25rem 0; }
.opcao.certa { border-color: var(--ok); background: var(--tinta-ok); }
.opcao.certa .opcao-letra { background: var(--ok); border: none; color: #fff; }
.opcao.errada { border-color: var(--perigo); background: var(--tinta-perigo); }
.opcao.errada .opcao-letra { background: var(--perigo); border: none; color: #fff; }

.prova-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  margin-top: 1rem;
}
.prova-nav-dica { text-align: center; flex: 1; }
.prova-entrega {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
  text-align: center;
}

/* placar (anel SVG) */
.placar {
  display: grid;
  justify-items: center;
  gap: .4rem;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.3rem 1rem;
  margin-top: .8rem;
  box-shadow: var(--sombra);
}
.anel { position: relative; width: 128px; height: 128px; }
.anel svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anel-fundo { fill: none; stroke: #e6e9f2; stroke-width: 12; }
.anel-valor {
  fill: none;
  stroke: url(#grad-anel);
  stroke: var(--primaria);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 326.73;
  stroke-dashoffset: calc(326.73 * (1 - var(--pct, 0) / 100));
  transition: stroke-dashoffset .8s ease;
}
.anel-texto {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}
.anel-texto strong { font-size: 1.45rem; letter-spacing: -.02em; }
.anel-texto span { color: var(--muted); font-size: .85rem; }
.placar-msg { margin: .2rem 0 0; font-size: 1rem; text-align: center; max-width: 34rem; }

/* correção comentada */
.correcao { display: grid; gap: .8rem; margin-top: 1rem; }
.resultado-questao {
  background: var(--card);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--borda-forte);
  border-radius: var(--raio);
  padding: .9rem 1rem;
  box-shadow: var(--sombra);
}
.resultado-questao.acertou { border-left-color: var(--ok); }
.resultado-questao.errou { border-left-color: var(--perigo); }
.rq-topo { margin: 0 0 .4rem; font-size: .88rem; color: var(--muted); }
.rq-enunciado { margin: 0 0 .6rem; font-size: .96rem; line-height: 1.5; white-space: pre-wrap; }
.rq-resumo { display: grid; gap: .4rem; }
.rq-opcao {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .6rem;
  border: 1px solid var(--borda);
  border-radius: 8px;
  font-size: .88rem;
  background: var(--card);
}
.rq-opcao.certa { border-color: rgba(22, 163, 74, .5); background: var(--tinta-ok); }
.rq-opcao.errada { border-color: rgba(220, 38, 38, .45); background: var(--tinta-perigo); }
.rq-opcao-texto { flex: 1; overflow-wrap: break-word; }
.rq-tag {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: 999px;
  padding: .1rem .5rem;
}
.rq-tag.certa { background: var(--ok); color: #fff; }
.rq-tag.errada { background: var(--perigo); color: #fff; }
.rq-explicacao {
  margin: .6rem 0 0;
  background: var(--tinta-alerta);
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: .55rem .7rem;
  font-size: .88rem;
  line-height: 1.5;
}

/* ---------- modais / usuários ---------- */
.dlg {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.2rem;
  width: min(440px, 92vw);
  box-shadow: var(--sombra-media);
  background: var(--card);
  color: var(--texto);
}
.dlg::backdrop { background: rgba(0, 0, 0, .45); }
/* v0.12: painéis de gerenciamento do admin alargados — nada espremido */
.dlg-usuarios { width: min(900px, 94vw); }
.dlg-extrato { width: min(820px, 94vw); }
.usuario-linha { flex-wrap: wrap; }
.dlg::backdrop { background: rgba(15, 23, 42, .45); backdrop-filter: blur(2px); }
.lista-usuarios { display: grid; gap: .4rem; margin-bottom: .8rem; }
.usuario-linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  padding: .5rem .7rem;
  font-size: .9rem;
}
.novo-usuario { display: grid; gap: .5rem; margin-bottom: .8rem; }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  bottom: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  background: #111827;
  color: #fff;
  padding: .65rem 1.1rem;
  border-radius: 999px;
  font-size: .88rem;
  z-index: 60;
  max-width: 92vw;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .45);
  animation: surge .2s ease-out;
}

/* ---------- responsivo ---------- */
@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .msg.usuario { max-width: 95%; }
  .topbar { flex-wrap: wrap; }
  .questao { padding: .95rem 1rem; }
  #prova-conteudo { padding: .9rem .9rem 2.4rem; }
  .prova-nav { flex-wrap: wrap; }
  .prova-nav-dica { order: 3; width: 100%; }
  /* celular/tablet (v0.6): alvos de toque maiores e safe-area do iPhone */
  .layout { padding: 0 .65rem; margin: .8rem auto; }
  .card { padding: .9rem; }
  .acoes-rapidas { grid-template-columns: repeat(3, 1fr); gap: .45rem; }
  .acoes-rapidas .btn { font-size: .85rem; padding: .75rem .3rem; }
  .doc { flex-wrap: wrap; }
  .doc-nome { flex-basis: calc(100% - 3.4rem); }
  .doc-acoes { margin-left: auto; }
  .chat { max-height: 48vh; }
  .chat-form { flex-wrap: nowrap; }
  .topbar { padding: calc(.55rem + env(safe-area-inset-top)) .8rem calc(.55rem + env(safe-area-inset-right)); }
  .toast { bottom: calc(1rem + env(safe-area-inset-bottom)); }
  .btn { min-height: 44px; } /* alvo de toque confortável (Apple HIG) */
  .doc-acoes .btn, .msg-acoes .btn, .chat-topo .btn { min-height: 0; }
  .opcao { padding: .8rem .7rem; }
  .qdot { width: 36px; height: 36px; }
}

/* Modo app instalado (PWA): sem barra de rolagem dupla no iOS */
@media (display-mode: standalone), (display-mode: full-screen) {
  body { -webkit-user-select: none; user-select: none; }
  input, textarea { -webkit-user-select: text; user-select: text; }
}

/* ============ v0.7 ============ */

/* Figura geométrica (SVG da IA) isolada em iframe sandbox */
.fig-frame {
  display: block;
  width: 100%;
  max-width: 360px;
  height: 260px;
  margin: .6rem 0;
  border: 1px solid var(--borda, #dbe3ec);
  border-radius: 12px;
  background: var(--card);
}
.fig-svg { margin: .8rem 0; overflow-x: auto; }
.fig-svg svg { max-width: 100%; height: auto; }

/* Aviso de checagem do material (erros detectados) */
.aviso-material {
  background: #fef9c3;
  border: 1px solid #facc15;
  border-left: 4px solid #f59e0b;
  border-radius: 10px;
  padding: .7rem .9rem;
  margin: 0 0 .8rem;
  font-size: .92rem;
}
.aviso-material p { margin: .35rem 0 0; }
.aviso-material .muted { font-size: .8rem; }

/* Badge de documento com possível erro */
.badge.check {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #f59e0b;
  cursor: help;
  white-space: nowrap;
}

/* Guia de instalação manual */
#dlg-instalar ol { margin: .4rem 0 .8rem 1.1rem; padding: 0; }
#dlg-instalar li { margin-bottom: .3rem; }
.dica-https {
  background: #eef2ff;
  border-radius: 8px;
  padding: .6rem .8rem;
  font-size: .88rem;
}

/* Exportações extras: a barra de ações quebra linha no espaço curto */
.msg-acoes { flex-wrap: wrap; gap: .35rem; }

/* ============ v0.8 ============ */

/* PC (mouse fino + hover): o botão de foto da câmera não faz sentido —
   só celular/tablet têm câmera traseira para fotografar a lousa.
   A galeria (🖼️), o áudio e todo o resto seguem em todos os aparelhos. */
@media (hover: hover) and (pointer: fine) {
  .acao-foto { display: none !important; }
  .acoes-rapidas { grid-template-columns: 1fr 1fr; }
}

/* Cores por bloco: bolinha na lista + paletas de escolha */
.lista-blocos-item strong {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.bloco-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-right: .45rem;
  flex: none;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .12) inset;
}
.cab-acoes { display: flex; gap: .35rem; flex: none; flex-wrap: wrap; }
.paleta-rotulo { margin: .55rem 0 .15rem; }
.paleta-cores {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  margin: .35rem 0 .6rem;
}
.paleta-cores[hidden] { display: none; }
.cor-swatch {
  width: 27px;
  height: 27px;
  border-radius: 999px;
  border: 2px solid var(--card);
  box-shadow: 0 0 0 1px var(--borda-forte);
  cursor: pointer;
  padding: 0;
  transition: transform .12s, box-shadow .12s;
}
.cor-swatch:hover { transform: scale(1.14); }
.cor-swatch.selecionada { box-shadow: 0 0 0 2.5px var(--texto); transform: scale(1.08); }
#paleta-bloco-aberto {
  margin: .35rem 0 .15rem;
  padding: .6rem .7rem .35rem;
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio-pequeno);
  background: var(--bg-suave);
}

/* Lista de materiais recolhível (não ocupa a tela o tempo todo) */
.dobradica { margin-top: .8rem; }
.dobradica > summary {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .6rem .75rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  background: var(--bg-suave);
  font-size: .92rem;
  list-style: none;
}
.dobradica > summary::-webkit-details-marker { display: none; }
.dobradica > summary:hover { border-color: var(--borda-forte); background: var(--bg-suave); }
.dobradica > summary .muted { font-size: .78rem; }
.dob-seta {
  display: inline-block;
  font-size: .72rem;
  color: var(--muted);
  transition: transform .15s;
}
.dobradica[open] > summary .dob-seta { transform: rotate(90deg); }
.dobradica[open] > summary { margin-bottom: .55rem; }
.dobradica .lista-docs { margin-top: 0; }
.processando-mini { animation: pulsa 1.2s infinite; }

/* Arrastar e soltar arquivos no card Material */
.upload-area.arrastando {
  border-color: var(--primaria);
  background: var(--tema-claro);
  box-shadow: var(--anel);
}

/* Excluir usuário no modal do admin */
.usuario-acoes { display: flex; gap: .25rem; flex-wrap: wrap; }

/* ============================================================
   v0.9 — Central de IA: banner dos usuários, painel do admin
   (saldo, modelos por tarefa, tabela de preços) e visibilidade
   por usuário. Usa as variáveis do tema do bloco (--primaria etc).
   ============================================================ */

/* --- banner da IA (usuários comuns autorizados) --- */
.barra-ia {
  max-width: 1180px;
  margin: .55rem auto 0;
  padding: .45rem .9rem;
  background: var(--tema-suave);
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  font-size: .84rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .8rem;
  align-items: center;
}
.barra-ia strong { color: var(--texto); font-weight: 600; }
.ia-sep { opacity: .45; }

/* --- modal da Central IA (v0.12: bem mais largo — a tabela de preços
       e as configurações ganham espaço de verdade) --- */
.dlg-ia { max-width: 1080px; width: min(96vw, 1080px); }
.dlg-ia form[method="dialog"] { margin-top: .8rem; }
.ia-status { margin: .6rem 0 .4rem; }
.ia-acoes { display: flex; align-items: center; gap: .7rem; margin: .6rem 0 1rem; flex-wrap: wrap; }

.ia-saldo {
  background: var(--tema-claro);
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  padding: .6rem .9rem;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
}
.ia-saldo-valor {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--primaria-escura);
  letter-spacing: -.02em;
}
.ia-saldo.ia-erro { background: var(--tinta-perigo); border-color: var(--perigo); }

.ia-resumo { display: flex; gap: .4rem; flex-wrap: wrap; margin: .6rem 0; }
.ia-tarefa {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .35rem 0;
  border-bottom: 1px dashed var(--borda);
  flex-wrap: wrap;
}
.ia-tarefa:last-of-type { border-bottom: none; }
.ia-tarefa-nome { font-weight: 600; min-width: 8.2rem; }

/* v0.10 — botão "devolver ao robô" nas tarefas fixadas + estado do dono */
.ia-mini-btn {
  border: 1px solid var(--borda);
  background: var(--card);
  color: var(--texto, #333);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  padding: .18rem .6rem;
  cursor: pointer;
  white-space: nowrap;
}
.ia-mini-btn:hover { background: var(--tema-claro, #eef2ff); border-color: var(--primaria-escura, #4f46e5); }
.ia-tarefa .chip.badge { cursor: help; }
.ia-uso { margin: .5rem 0 .2rem; }

/* --- caixas de configuração e preços --- */
.ia-caixa {
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  padding: .6rem .8rem;
  margin: .6rem 0;
  background: var(--card);
}
.ia-caixa > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .92rem;
  color: var(--primaria-escura);
  padding: .2rem 0;
}
.ia-caixa form { margin-top: .7rem; }
/* v0.12: chave com botão Testar ao lado + ações da whitelist */
.ia-chave-linha { display: flex; gap: .5rem; align-items: center; }
.ia-chave-linha input { flex: 1; min-width: 0; }
.ia-whitelist-acoes {
  display: flex;
  gap: .6rem;
  align-items: center;
  flex-wrap: wrap;
  margin: .35rem 0 .6rem;
}
.ia-onde {
  font-size: .82rem;
  color: var(--muted);
  margin: .15rem 0 .3rem;
  overflow-wrap: anywhere;
}
.ia-onde-item strong { color: var(--texto); font-variant-numeric: tabular-nums; }
.ia-linha-config {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .7rem;
  align-items: end;
  margin-bottom: .7rem;
}
.ia-linha-config label { display: flex; flex-direction: column; gap: .25rem; font-size: .88rem; }
.ia-linha-config select,
.ia-linha-config input[type="password"] {
  padding: .45rem .6rem;
  border: 1px solid var(--borda-forte);
  border-radius: 8px;
  font: inherit;
  background: var(--card);
}
.ia-modo-grupo { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
#ia-whitelist {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem;
  padding: .5rem .6rem;
  border: 1px solid var(--borda-forte);
  border-radius: 8px;
  background: var(--card);
  resize: vertical;
}
.ia-manuais { background: var(--tema-suave); border-radius: 8px; padding: .6rem; }

/* --- tabela de preços (catálogo ao vivo) --- */
.ia-busca {
  width: 100%;
  margin: .5rem 0;
  padding: .5rem .7rem;
  border: 1px solid var(--borda-forte);
  border-radius: 8px;
  font: inherit;
}
.ia-tabela { max-height: 380px; overflow-y: auto; border: 1px solid var(--borda); border-radius: 8px; }
.ia-tab-cab,
.ia-linha {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 6.2rem 6.2rem 2.4rem;
  gap: .4rem;
  align-items: center;
  padding: .32rem .6rem;
  font-size: .82rem;
  text-align: left;
}
.ia-tab-cab {
  position: sticky; top: 0;
  background: var(--tema-suave);
  font-weight: 700;
  color: var(--muted);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--borda);
  z-index: 1;
}
.ia-linha {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--borda);
  background: var(--card);
  cursor: pointer;
  font-family: inherit;
  color: var(--texto);
}
.ia-linha:last-child { border-bottom: none; }
.ia-linha:hover { background: var(--tema-suave); }
.ia-linha.aprovada { background: var(--tema-claro); }
.ia-linha.aprovada:hover { filter: brightness(.985); }
.ia-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem; height: 1.35rem;
  border-radius: 50%;
  border: 1.5px solid var(--borda-forte);
  font-size: .8rem;
  font-weight: 700;
  color: #fff;
  background: transparent;
}
.ia-linha.aprovada .ia-check { background: var(--primaria); border-color: var(--primaria); }
.ia-modelo-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ia-linha span:nth-child(3),
.ia-linha span:nth-child(4) { color: var(--muted); font-variant-numeric: tabular-nums; }

/* --- visibilidade da IA na criação/edição de usuários --- */
.ia-vis-criacao {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
  margin: .5rem 0;
}
.usuario-acoes .rot-ativo { box-shadow: var(--anel); font-weight: 700; }

@media (max-width: 640px) {
  .ia-tab-cab, .ia-linha { grid-template-columns: 1.8rem minmax(0, 1fr) 4.6rem 4.6rem 1.8rem; font-size: .76rem; }
  .ia-saldo-valor { font-size: 1.25rem; }
}

/* ===== v0.11: créditos por usuário ===== */

.credito-linha {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: center;
  width: 100%;
  padding: .3rem .2rem 0;
  font-size: .85rem;
}

.credito-saldo-ok { color: #15803d; font-weight: 700; }
.credito-saldo-zero { color: #b91c1c; font-weight: 700; }

.extrato-conteudo {
  max-height: 55vh;
  overflow: auto;
  margin: .5rem 0 1rem;
}

.extrato-tb {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}

.extrato-tb th,
.extrato-tb td {
  padding: .4rem .45rem;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: top;
}

.extrato-tb th { font-size: .75rem; text-transform: uppercase; color: #6b7280; }
.extrato-tb td.num, .extrato-tb th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#creditos-agio {
  margin: -.25rem 0 .5rem;
  font-size: .82rem;
}

/* ---------- v0.14: Financeiro (visão de banco) + diálogos largos ---------- */

/* Admin pediu telas de gestão mais largas: usuários, financeiro e extrato */
#dlg-usuarios { width: min(760px, 96vw); }
.dlg-financeiro { width: min(1020px, 96vw); }
.lista-usuarios { max-height: 55vh; overflow: auto; }

.fin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .6rem;
  margin: .8rem 0 .5rem;
}
.fin-card {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: .6rem .7rem;
  display: grid;
  gap: .1rem;
  background: var(--bg-suave);
}
.fin-card small { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .02em; }
.fin-card strong { font-size: 1.05rem; }
.fin-card em { font-style: normal; font-size: .8rem; color: #475569; }
.fin-card span { font-size: .72rem; }
.fin-verde { border-left: 4px solid var(--ok); }
.fin-azul { border-left: 4px solid #2563eb; }

.fin-cambio { margin: .2rem 0 .6rem; font-size: .85rem; }
.fin-filtros { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.chip-filtro { padding: .25rem .6rem; font-size: .8rem; }
.chip-filtro.ativo { border-color: var(--primaria); color: var(--primaria); font-weight: 700; }
.fin-tb { font-size: .82rem; }

/* ---------- v0.14.1: nomes dos usuários, saudação e pedidos de crédito ---------- */

/* Saudação no banner: "Olá, <como ele quer ser chamado> ✏️" — clicável */
.saudacao {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  cursor: pointer;
  border-radius: 999px;
  padding: .1rem .55rem .1rem .4rem;
  background: var(--tema-claro);
}
.saudacao:hover { background: var(--tema-suave); }
.saudacao strong { color: var(--primaria-escura); }

/* Badge vermelho com a fila de pedidos pendentes no botão Usuários */
.badge-pedidos {
  display: inline-block;
  min-width: 1.25rem;
  margin-left: .4rem;
  padding: .05rem .3rem;
  border-radius: 999px;
  background: var(--perigo);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  text-align: center;
  vertical-align: middle;
}

/* Linha do usuário: login + quem ele é / como quer ser chamado */
.usuario-id { display: grid; gap: .05rem; min-width: 0; }
.usuario-nomes {
  font-size: .76rem;
  color: var(--muted);
}

/* Fila de pedidos (admin) e "Meus pedidos" (usuário) */
.pedidos-credito {
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  background: var(--tema-suave);
  padding: .55rem .7rem .7rem;
  margin-bottom: .7rem;
}
.pedidos-titulo { margin: .2rem 0 .45rem; font-size: .95rem; }
.pedido-linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  padding: .4rem .2rem;
  border-top: 1px dashed var(--borda);
  font-size: .86rem;
}
.pedido-linha:first-of-type { border-top: 0; }
.pedido-linha .usuario-acoes { flex-wrap: wrap; justify-content: flex-end; }

.chip.pedido-pend { background: #fef3c7; color: #92400e; }
.chip.pedido-ok { background: #dcfce7; color: #166534; }
.chip.pedido-neg { background: #fee2e2; color: #991b1b; }

/* Modal "Solicitar crédito" (usuário) */
.dlg-pedido { width: min(460px, 96vw); }
.pedido-form { display: grid; gap: .6rem; margin: .3rem 0 .8rem; }
.pedido-campo { display: grid; gap: .25rem; font-size: .85rem; }
.pedido-campo input, .pedido-campo textarea {
  font: inherit;
  padding: .5rem .6rem;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  background: var(--card);
}
.meus-pedidos { max-height: 34vh; overflow: auto; margin-bottom: .6rem; }

/* ============================================================
   Adaptação Study AI v0.13 — a base acima é a estética clássica
   (v1). Abaixo, só o que as telas novas precisam, sempre com as
   variáveis e o visual da base (índigo/violeta, cantos suaves).
   ============================================================ */

/* ---------- formulários: textarea e botão sem classe ---------- */
textarea {
  width: 100%;
  padding: .6rem .75rem;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  font: inherit;
  background: var(--card);
  color: var(--texto);
  resize: vertical;
  transition: border-color .15s, box-shadow .15s;
}
textarea:focus { outline: none; border-color: var(--primaria); box-shadow: var(--anel); }
button { font: inherit; }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--primaria); }
input[type="color"] { padding: 2px; height: 2.3rem; }
input.pequeno, select.pequeno { max-width: 110px; }

/* ---------- páginas de rota única (admin, conta, créditos…) ---------- */
.pagina {
  max-width: 1120px;
  margin: 1.1rem auto;
  padding: 0 1rem 2.5rem;
}
.pagina > .card { margin-bottom: 1rem; }
.titulo-pagina { margin: .2rem 0 .9rem; }

/* ---------- navegação do topo (links como botões fantasma) ---------- */
#nav a.btn { text-decoration: none; }
#nav a.btn.ativo { background: var(--tema-claro); border-color: transparent; color: var(--primaria-escura); }

/* ---------- grades de cartões ---------- */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.grade .card { margin-bottom: 0; }

/* ---------- tabelas genéricas (usuários, auditoria, visão) ---------- */
.tabela {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  font-size: .88rem;
}
.tabela th, .tabela td {
  text-align: left;
  padding: .5rem .55rem;
  border-bottom: 1px solid var(--borda);
  vertical-align: top;
}
.tabela th { font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.tabela tbody tr:hover { background: var(--tema-suave); }
.tabela-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.roda-tabela { overflow-x: auto; }

/* ---------- badges extras do v2 ---------- */
.badge.base { background: #fef9c3; color: #854d0e; }
.badge.avisoerro {
  background: #fee2e2; color: var(--perigo); border: none; cursor: pointer;
  font-weight: 600;
}
button.rot-ativo { background: var(--tema-claro); box-shadow: inset 0 0 0 1.5px var(--primaria); }

/* ---------- erros do material + reporte de correção ---------- */
.erros-lista { flex-basis: 100%; display: flex; flex-direction: column; gap: .5rem; margin-top: .3rem; }
.erro-item {
  border: 1px solid var(--perigo); background: var(--tinta-perigo); border-radius: var(--raio-pequeno);
  padding: .55rem .7rem; font-size: .85rem;
  display: flex; flex-direction: column; gap: .3rem; align-items: flex-start;
}
.erro-item div { width: 100%; }
.erro-item .btn { padding: .25rem .55rem; font-size: .78rem; }
.erro-aluno { border-color: var(--primaria); background: var(--tinta-info); }
.form-correcao textarea { width: 100%; }
.form-correcao .linha-acoes { display: flex; gap: .4rem; }

/* ---------- painel de gastos (tela inicial) ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.kpi {
  background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: .8rem .9rem; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: .15rem;
}
.kpi small { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.kpi strong { font-size: 1.1rem; }
.barras { display: flex; align-items: stretch; gap: 3px; height: 130px; margin-top: .6rem; }
.coluna { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.coluna .area { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.coluna .barra {
  width: 100%; max-width: 24px; background: var(--gradiente); opacity: .55;
  border-radius: 6px 6px 3px 3px; min-height: 3px; transition: opacity .15s;
}
.coluna:hover .barra { opacity: .9; }
.coluna.hoje .barra { opacity: 1; box-shadow: var(--sombra-tema); }
.coluna small { font-size: .62rem; color: var(--muted); margin-top: 4px; }
.coluna.hoje small { color: var(--primaria); font-weight: 700; }
.tipo-linha { margin-bottom: .7rem; }
.tipo-topo { display: flex; justify-content: space-between; gap: .6rem; font-size: .88rem; }
.tipo-trilho { height: 8px; background: var(--bg-suave); border-radius: 999px; overflow: hidden; margin: .35rem 0 .2rem; }
.tipo-preench { height: 100%; background: var(--gradiente); border-radius: 999px; }
.tipo-linha small { color: var(--muted); font-size: .75rem; }
.saldo-heroi {
  background: var(--gradiente); color: #fff; border-radius: var(--raio); padding: 1.2rem 1.3rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .8rem;
  box-shadow: var(--sombra-media); margin-bottom: 1rem;
}
.saldo-heroi small { opacity: .85; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.saldo-heroi .valor { font-size: 2.1rem; font-weight: 750; letter-spacing: -.03em; line-height: 1.15; }
.saldo-heroi .cambio { opacity: .92; font-size: .88rem; }
.saldo-heroi .acoes a { color: #fff; }

/* ---------- abas da administração ---------- */
.abas { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: 1rem; padding: .25rem; background: var(--bg-suave); border-radius: var(--raio); width: fit-content; max-width: 100%; }
.abas .btn { border-color: transparent; background: transparent; }
.abas .btn.ativa { background: var(--card); color: var(--primaria-escura); box-shadow: var(--sombra); }

/* ---------- Central de IA: tabela de preços ---------- */
.preco-mostra {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .74rem; line-height: 1.5; white-space: nowrap;
}
.linha-serve { display: inline-flex; gap: .3rem; font-size: .9rem; }
.servetask.no { opacity: .22; filter: grayscale(1); }
.servetask.ok { opacity: 1; }

/* ---------- pedidos de recarga (admin e aluno) ---------- */
.pedido-card { display: flex; flex-direction: column; gap: .5rem; }
.pedido-card .topo { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.pedido-card .recado { margin: 0; padding: .55rem .7rem; background: var(--bg-suave); border-radius: var(--raio-pequeno); font-style: italic; }

/* ---------- markdown das respostas (negrito de verdade, sem asteriscos) ---------- */
.msg .md { white-space: normal; }
.msg.usuario .texto { white-space: pre-wrap; }
.md .md-p { margin: .35em 0; }
.md .md-p:first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md .md-h { margin: .7em 0 .25em; color: var(--primaria-escura); }
.md .md-h:first-child { margin-top: .1em; }
.md .md-ul, .md .md-ol { margin: .3em 0; padding-left: 1.3em; }
.md .md-q { margin: .4em 0; padding: .3em .7em; border-left: 3px solid #c7d2fe; color: var(--muted); font-style: italic; }
.md .md-pre { margin: .4em 0; padding: .55em .7em; background: var(--bg-suave); border: 1px solid var(--borda); border-radius: var(--raio-pequeno); overflow-x: auto; font-size: .8rem; white-space: pre-wrap; }
.md code { background: var(--bg-suave); border: 1px solid var(--borda); border-radius: 6px; padding: 1px 5px; font-size: .88em; }
.md .md-tab { width: 100%; border-collapse: collapse; margin: .4em 0; }
.md .md-tab th, .md .md-tab td { border: 1px solid var(--borda); padding: .3em .55em; font-size: .82rem; }
.md .md-tab th { background: var(--bg-suave); }
.md .md-hr { border: none; border-top: 1px solid var(--borda); margin: .6em 0; }
.md .md-figura { color: var(--muted); font-size: .8rem; font-style: italic; }
.md .rs { white-space: nowrap; }
.msg .katex-display { overflow-x: auto; overflow-y: hidden; padding: .2rem 0; }

/* ---------- prova em página (rota #/prova/…) ---------- */
.prova-pagina { max-width: 780px; }
.prova-acoes { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0; }
.opcao input { margin-top: .3rem; }

/* ---------- responsivo fino ---------- */
@media (max-width: 780px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
}

/* ---------- complementos usados pelas telas do v2 ---------- */
.linha { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0 .8rem; }
.linha > * { flex: 1 1 180px; min-width: 0; }
.linha .btn { flex: 0 0 auto; }
.campo { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(160px, 1fr); gap: .5rem; align-items: center; margin: .4rem 0; }
.campo label { margin: 0; }
.ferramentas { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .7rem 0; }
.grupo { margin-top: 1rem; }
.grupo h3 { border-bottom: 1px solid var(--borda); padding-bottom: .3rem; }
.grupo h4 { margin: .7rem 0 .3rem; font-size: .92rem; }
.lista-provas { display: grid; gap: .6rem; margin-top: .7rem; }
.lista-questoes { display: grid; gap: .8rem; }
.doc-nome .nome-titulo { font-weight: 600; }
button.badge.check { cursor: pointer; border: none; font-weight: 600; }
.consentimento { display: flex; gap: .5rem; align-items: flex-start; font-size: .85rem; cursor: pointer; }
.consentimento input { margin-top: .2rem; }
.dica-bg { background: var(--tema-suave); border-radius: var(--raio-pequeno); padding: .45rem .7rem; }
.ia-mini-btn { padding: .15rem .5rem; font-size: .75rem; }

/* ================================================================
   v0.15.0 — Estudar reformulada, Administração do responsável,
   reportes de problema e destaques visuais (as coisas se diferenciam)
   ================================================================ */

/* ---------- aba Estudar: cards horizontais + matéria aberta ---------- */
.estudar-pagina { display: flex; flex-direction: column; gap: .9rem; }
.estudar-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem;
}
.estudar-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .25rem;
  background: var(--card); border: 2px solid var(--borda); border-left: 6px solid var(--mat, var(--primaria));
  border-radius: var(--raio); padding: .6rem .7rem; cursor: pointer; box-shadow: var(--sombra);
  font: inherit; color: inherit; text-align: left; transition: transform .12s, box-shadow .12s;
}
.estudar-card:hover { transform: translateY(-2px); box-shadow: var(--sombra-media); }
.estudar-card.ativo {
  border-color: var(--mat, var(--primaria));
  background: linear-gradient(180deg, color-mix(in srgb, var(--mat, var(--primaria)) 10%, var(--card)), var(--card));
}
.estudar-card.ativo strong { color: var(--mat, var(--primaria-escura)); }
.estudar-card .bloco-dot { width: .8rem; height: .8rem; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.estudar-card strong { font-size: .95rem; line-height: 1.2; }
.estudar-card small { color: var(--muted); font-size: .74rem; }
.estudar-card.nova {
  border-style: dashed; border-left-width: 2px; align-items: center; justify-content: center;
  color: var(--muted); text-decoration: none; min-height: 74px;
}
.estudar-card.nova:hover { color: var(--primaria-escura); border-color: var(--primaria); }
.nova-mais { font-size: 1.25rem; font-weight: 750; color: var(--primaria); line-height: 1; }
.dica-estudar { margin: 0; }
.estudo-topo {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: .55rem .8rem; box-shadow: var(--sombra);
}
.estudo-topo .bloco-dot { width: .85rem; height: .85rem; border-radius: 50%; display: inline-block; }
.estudo-topo strong { font-size: 1.05rem; }
.estudo-topo .btn { margin-left: auto; }
.estudo-central { display: flex; flex-direction: column; gap: .9rem; }

/* ---------- quadros do Início: cores e bolinha de notificação ---------- */
.kpi { position: relative; }
.kpi-verde { border-left: 4px solid var(--ok); background: linear-gradient(180deg, var(--tinta-ok) 0%, var(--card) 55%); }
.kpi-vermelho { border-left: 4px solid var(--perigo); background: linear-gradient(180deg, var(--tinta-perigo) 0%, var(--card) 55%); }
.kpi-vermelho strong { color: var(--perigo); }
.kpi-info { border-left: 4px solid #2563eb; background: linear-gradient(180deg, var(--tinta-info) 0%, var(--card) 55%); }
.kpi-cinza { opacity: .78; }
.kpi-alerta { border-left: 4px solid var(--alerta); background: linear-gradient(180deg, var(--tinta-alerta) 0%, var(--card) 55%); }
.kpi-bolinha {
  position: absolute; top: -.55rem; right: -.55rem; min-width: 1.45rem; height: 1.45rem;
  border-radius: 999px; background: #dc2626; color: #fff; font-weight: 750; font-size: .78rem;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 .35rem;
  border: 2px solid var(--card); box-shadow: 0 3px 8px rgba(220, 38, 38, .45); z-index: 2;
}
.kpi-bolinha.inline { position: static; border: none; min-width: 1.3rem; height: 1.3rem; font-size: .72rem; }
.topbar .btn.com-aviso { position: relative; }
.nav-selo {
  position: absolute; top: -6px; right: -8px; min-width: 1.15rem; height: 1.15rem;
  border-radius: 999px; background: #dc2626; color: #fff; font-weight: 750; font-size: .68rem;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 .3rem;
  border: 2px solid var(--card); box-shadow: 0 2px 6px rgba(220, 38, 38, .45);
}

/* ---------- alerta de déficit do OpenRouter ---------- */
.alerta-deficit {
  border: 1px solid var(--perigo); border-left: 6px solid var(--perigo); background: var(--tinta-perigo);
  border-radius: var(--raio); padding: .9rem 1rem; margin-bottom: 1rem;
  display: flex; flex-direction: column; gap: .4rem;
}
.alerta-topo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.alerta-topo strong { color: #b91c1c; font-size: 1rem; }
.alerta-deficit p { margin: 0; }
.alerta-acao { font-weight: 550; }
.nota-saldo-ok { margin: 0 0 1rem; color: var(--ok); font-weight: 550; }

/* ---------- aba Matérias: gastos abaixo do material ---------- */
.titulo-secao {
  font-size: 1.05rem; border-bottom: 2px solid var(--borda); padding-bottom: .3rem;
  margin: 1.4rem 0 .8rem; color: var(--primaria-escura);
}
.gastos-materia .kpis { margin-top: .4rem; }
.gastos-materia .card h2 { font-size: 1rem; }

/* ---------- Administração da família (responsável) ---------- */
.grade.deps { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .7rem; align-items: start; }
.dep-quadro { display: flex; flex-direction: column; gap: .45rem; margin: 0; }
.dep-topo { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; row-gap: .35rem; }
.dep-quem { display: flex; flex-direction: column; min-width: 7rem; flex: 1 1 9rem; }
.dep-quem strong { font-size: 1rem; }
.dep-quem small { color: var(--muted); }
.dep-numeros { display: flex; flex-direction: column; align-items: flex-end; margin-right: .2rem; }
.dep-saldo { font-size: 1.22rem; font-weight: 750; color: var(--primaria-escura); letter-spacing: -.02em; }
.dep-acoes { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; justify-content: flex-end; }
.dep-acoes .btn { padding: .3rem .55rem; font-size: .8rem; }
.dep-corpo { border-top: 1px dashed var(--borda); padding-top: .6rem; display: flex; flex-direction: column; gap: .5rem; }
.rolagem { max-height: 300px; overflow-y: auto; }
.nota-rodape { margin-top: 1.2rem; }

/* ---------- reportes de problema ---------- */
.dlg-reportar { width: min(560px, 94vw); }
.dlg-reportar[open] { display: flex; flex-direction: column; gap: .7rem; }
.dlg-reportar label { display: flex; flex-direction: column; gap: .25rem; font-weight: 600; font-size: .88rem; }
.dlg-reportar select, .dlg-reportar textarea, .dlg-reportar input { font: inherit; font-weight: 400; }
.dlg-acoes { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .2rem; }
.chip-assunto { background: #eef2ff; color: #3730a3; font-weight: 600; }
.lista-reportes { display: grid; gap: .7rem; }
.reporte-card { display: flex; flex-direction: column; gap: .45rem; margin: 0; }
.reporte-card.resolvido { opacity: .72; border-left: 4px solid var(--ok); }
.reporte-card .topo { display: flex; flex-wrap: wrap; gap: .45rem; align-items: baseline; }
.reporte-card .topo strong { margin-right: auto; }
.reporte-descricao { margin: 0; padding: .55rem .7rem; background: var(--bg-suave); border-radius: var(--raio-pequeno); white-space: pre-wrap; }
.resposta-admin { margin: 0; padding: .45rem .6rem; background: var(--tinta-ok); border-radius: var(--raio-pequeno); font-size: .86rem; }
.reporte-mini { margin: 0; }
.reporte-mini .recado { font-style: normal; }
.reporte-mini-card { border: 1px solid var(--borda); border-radius: var(--raio-pequeno); padding: .55rem .7rem; display: flex; flex-direction: column; gap: .3rem; }
.reporte-mini-card .topo { display: flex; flex-wrap: wrap; gap: .45rem; align-items: baseline; }
.reporte-mini-card .topo small { margin-left: auto; }
.reporte-mini-card p { margin: 0; }
.correcoes-abas { display: flex; flex-direction: column; gap: .5rem; }
.correcoes-abas .fin-secao { margin-top: 1rem; }
.ferramentas input { flex: 1 1 220px; }

/* ============================================================
   v0.16 — identidade no topo (avatar + nome em destaque), perfil
   com avatares divertidos, paleta ampla, popup de matérias do
   dependente e ferramentas de busca/filtro na aba Usuários.
   ============================================================ */

/* ---------- identidade na barra superior (todos os usuários) ---------- */
.quem-caixa {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-left: auto;
  padding: .28rem .7rem .28rem .3rem;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--tema-claro, #eef2ff), var(--card));
  box-shadow: var(--sombra-tema);
  min-width: 0;
}
.quem-nome {
  font-weight: 800;
  color: var(--primaria-escura, #312e81);
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 9rem;
}
.quem-usuario { display: block; font-size: .68rem; color: var(--muted); line-height: 1.05; }
.usuario-id { display: grid; gap: 0; min-width: 0; line-height: 1.15; }

/* avatar: foto do HD ou figura divertida */
.avatar-foto { width: 2.15rem; height: 2.15rem; }
.avatar-mini { width: 1.9rem; height: 1.9rem; flex: 0 0 auto; }
.avatar-foto, .avatar-mini {
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid var(--card);
  box-shadow: 0 0 0 1.5px var(--borda-forte);
  background: var(--tema-claro, #eef2ff);
}
.avatar-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
}

/* ---------- perfil na aba Conta ---------- */
.card-perfil .linha { align-items: center; }
.card-perfil input { min-width: 220px; }
.grade-avatares {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .3rem 0 .4rem;
}
.avatar-opcao {
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 12px;
  border: 2px solid var(--borda);
  background: var(--card);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform .12s, border-color .12s, box-shadow .12s;
  overflow: hidden;
}
.avatar-opcao:hover { transform: scale(1.08); border-color: var(--primaria); }
.avatar-opcao.selecionada, .avatar-opcao.selecionado { border-color: var(--primaria); box-shadow: 0 0 0 2.5px var(--primaria); }
.avatar-opcao img { width: 100%; height: 100%; object-fit: cover; }
.avatar-opcao.remover { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; font-weight: 700; }

/* ---------- legenda do alfinete (material BASE) ---------- */
.legenda-base {
  margin: .1rem 0 .6rem;
  padding: .55rem .75rem;
  border: 1px dashed #f59e0b;
  border-left: 4px solid #f59e0b;
  border-radius: var(--raio-pequeno);
  background: var(--tinta-alerta);
  font-size: .85rem;
  color: #713f12;
}
.legenda-base strong { color: #92400e; }

/* ---------- aba Usuários (admin): busca, filtros e tabela ---------- */
.ferramentas-usuarios { margin: 0 0 .7rem; }
.busca-usuarios { flex: 2 1 240px; }
.filtro-usuarios { flex: 1 1 180px; max-width: 260px; }
.conta-celula { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.visao-titulo { display: flex; align-items: center; gap: .55rem; }

/* Atalho “resp.: Nome” na tabela: abre a conta do responsável na hora */
.link-responsavel {
  display: inline-flex; align-items: center; gap: .2rem; margin: .1rem 0 0 2.9rem;
  padding: 0; border: none; background: none; cursor: pointer;
  color: var(--primaria); font-size: .78rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
.link-responsavel:hover { color: var(--primaria-escura); }

/* ---------- popup de matérias do dependente ---------- */
.dlg-materias-dep { width: min(720px, 94vw); max-height: 88vh; overflow-y: auto; }
.dlg-cab { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.dlg-cab h2 { display: flex; align-items: center; gap: .55rem; margin: 0; font-size: 1.15rem; }
.ferramentas-dep { margin: .6rem 0 .2rem; }
.ferramentas-dep select { flex: 1 1 240px; }
.dep-mat-cab { display: flex; align-items: center; gap: .5rem; margin: .5rem 0 .3rem; }
.dep-mat-cab h3 { margin: 0; margin-right: auto; }
.dep-mat-upload { margin-top: .7rem; display: flex; flex-direction: column; gap: .45rem; }
.dep-mat-upload h4 { margin: 0; }

/* ---------- ajustes finos ---------- */
@media (max-width: 780px) {
  /* o nome do usuário agora fica visível no celular — versão compacta do selo */
  .quem-caixa { padding: .2rem .55rem .2rem .25rem; gap: .35rem; }
  .quem-nome { max-width: 6.2rem; font-size: .9rem; }
  .quem-usuario { display: none; }
  .avatar-foto { width: 1.9rem; height: 1.9rem; }
  .avatar-emoji { font-size: 1.1rem; }
  .topbar .btn { padding: .38rem .6rem; }
  .dep-acoes .btn { flex: 1 1 auto; }
  .dlg-materias-dep { width: 96vw; }
}

/* o avatar dentro de .linha não estica: fica redondinho ao lado do nome */
.card-perfil .avatar-foto, .card-perfil .avatar-emoji,
.dep-topo .avatar-mini, .conta-celula .avatar-mini, .quem-caixa .avatar-foto,
.quem-caixa .avatar-emoji, .dlg-cab .avatar-mini, .visao-titulo .avatar-mini {
  flex: 0 0 auto;
  width: 2.15rem;
  height: 2.15rem;
}

/* ================= v0.17: temas, janelas de dados e fila de exclusão ================= */

/* ---- seletor de tema (aba Conta) ---- */
.grade-modo-tema { display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: .5rem; }
.modo-tema {
  flex: 1 1 150px;
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .8rem .6rem;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--bg-suave);
  color: var(--texto);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.modo-tema:hover { border-color: var(--primaria); }
.modo-tema.selecionado {
  border-color: var(--primaria);
  background: var(--tema-suave);
  box-shadow: var(--anel);
}
.modo-tema .modo-icone { font-size: 1.35rem; }
.modo-tema strong, .modo-tema span { font-size: .92rem; }
.modo-tema small { color: var(--muted); font-size: .74rem; }
.card-tema .paleta-cores { margin-top: .2rem; }

/* ---- janelas de dados (admin e responsável) ---- */
.dlg-dados { width: min(680px, 94vw); max-height: 88vh; overflow: auto; }
.dlg-titulo { display: flex; align-items: center; gap: .55rem; margin: 0; font-size: 1.08rem; flex-wrap: wrap; }
.dlg-secao { margin: 1rem 0 .5rem; font-size: .95rem; }
.grade-dados {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .55rem; margin: .7rem 0 .3rem;
}
.grade-dados > div {
  background: var(--bg-suave);
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  padding: .45rem .6rem;
  display: flex; flex-direction: column; gap: .1rem;
}
.grade-dados strong { font-size: .86rem; overflow-wrap: anywhere; }
.grade-dados small { font-size: .7rem; }
.grade-form { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .9rem; }
.grade-form label { margin-bottom: .45rem; }
.zona-perigo {
  margin-top: 1rem;
  border: 1px dashed var(--perigo);
  border-radius: var(--raio-pequeno);
  padding: .6rem .8rem;
  background: var(--tinta-perigo);
}
.zona-perigo .dlg-secao { margin: 0 0 .3rem; color: var(--perigo); }
.cred-rapido { margin-top: .4rem; }
.conta-clicavel {
  background: transparent; border: none; text-align: left; cursor: pointer;
  font: inherit; color: inherit; padding: .15rem .3rem; border-radius: 8px;
}
.conta-clicavel:hover { background: var(--tema-suave); }
.com-aviso-titulo { color: var(--perigo); }

@media (max-width: 780px) {
  .grade-form { grid-template-columns: 1fr; }
  .grade-dados { grid-template-columns: 1fr 1fr; }
}