/* Universo de Tesouros Bíblicos — Pastor Geziel Gomes */
:root {
  --fundo: #0a0b0f;
  --vidro: rgba(16, 18, 26, 0.78);
  --vidro-forte: rgba(14, 16, 23, 0.94);
  --borda: rgba(160, 150, 255, 0.16);
  --borda-suave: rgba(255, 255, 255, 0.07);
  --texto: #e7e8f0;
  --texto-2: #a3a8ba;
  --texto-3: #6d7285;
  --roxo: #a78bfa;
  --ouro: #f4c152;
  --raio: 14px;
  --insp-w: 400px;
  --est-w: 380px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--fundo); color: var(--texto);
  font: 14px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg .cheio { fill: currentColor; stroke: none; }

#cena { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }

/* ---------------- Topo ---------------- */
#topo { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: grid;
  grid-template-columns: minmax(max-content, 1fr) minmax(220px, 640px) minmax(max-content, 1fr); align-items: center; gap: 20px;
  padding: 18px 26px; background: linear-gradient(to bottom, rgba(10,11,15,.9), rgba(10,11,15,0)); pointer-events: none; }
#topo > * { pointer-events: auto; }
.marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.marca { gap: 12px; }
.marca-estrela { font-size: 34px; line-height: 1; color: var(--roxo); text-shadow: 0 0 18px rgba(167,139,250,.8); }
.marca-nome { display: flex; flex-direction: column; line-height: 1.05; white-space: nowrap; }
.marca-l1 { font-size: 12px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: #b8b0e8; margin-bottom: 3px; }
.marca-autor { margin-top: 5px; font-size: 12px; font-weight: 500; letter-spacing: .08em; color: var(--ouro); opacity: .9; }
.marca-autor::before { content: "— "; opacity: .6; }
.marca-l2 { font-size: 26px; font-weight: 700; letter-spacing: .01em;
  background: linear-gradient(90deg, #a78bfa 0%, #8fb4ff 45%, #f4c152 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

#busca { position: relative; display: flex; align-items: center; height: 54px; padding: 0 16px 0 20px;
  border-radius: 999px; background: var(--vidro); border: 1px solid var(--borda); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); box-shadow: 0 8px 30px rgba(0,0,0,.35); transition: border-color .2s, box-shadow .2s; }
#busca:focus-within { border-color: rgba(167,139,250,.55); box-shadow: 0 0 0 4px rgba(167,139,250,.12), 0 8px 30px rgba(0,0,0,.4); }
.busca-lupa { width: 22px; height: 22px; color: #67e8f9; flex: none; }
#campo-busca { flex: 1; min-width: 0; height: 100%; margin-left: 12px; background: none; border: 0; outline: none; font-size: 17px; }
#campo-busca::placeholder { color: var(--texto-3); }
#campo-busca::-webkit-search-cancel-button { display: none; }
.busca-limpar { width: 28px; height: 28px; border-radius: 50%; font-size: 20px; color: var(--texto-2); }
.busca-limpar:hover { background: rgba(255,255,255,.08); color: #fff; }

#resultados { position: absolute; top: calc(100% + 10px); left: 0; right: 0; max-height: min(62vh, 560px); overflow: auto;
  padding: 6px; border-radius: 18px; background: var(--vidro-forte); border: 1px solid var(--borda);
  box-shadow: 0 20px 60px rgba(0,0,0,.6); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.res-cabeca { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 12px 10px;
  font-size: 12px; color: var(--texto-2); border-bottom: 1px solid var(--borda-suave); margin-bottom: 4px; }
.res-cabeca b { color: var(--texto); }
.res-resumo { display: flex; gap: 10px; }
.res-resumo span { display: inline-flex; align-items: center; gap: 5px; }
.res-resumo i, .res i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); flex: none; }
.res { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 12px; }
.res i { margin-top: 7px; }
.res:hover, .res.ativo { background: rgba(167,139,250,.1); }
.res-txt { display: flex; flex-direction: column; min-width: 0; }
.res-tit { font-weight: 500; }
.res-tit mark { background: rgba(244,193,82,.22); color: #ffe3a1; border-radius: 3px; padding: 0 1px; }
.res-meta { font-size: 12px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-vazio, .res-mais { padding: 14px; color: var(--texto-2); font-size: 13px; text-align: center; }

.topo-dir { display: flex; justify-content: flex-end; align-items: center; gap: 16px; min-width: 0; }
.total { color: var(--texto-3); font-size: 14px; white-space: nowrap; }
.btn-estudos { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px;
  border-radius: 999px; background: var(--vidro); border: 1px solid var(--borda); color: var(--texto-2); transition: .2s; }
.btn-estudos:hover { color: #fff; border-color: rgba(167,139,250,.5); }
.btn-estudos svg { width: 18px; height: 18px; }
.contador { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--roxo); color: #120f22;
  font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }

/* ---------------- Status (trilha + estatísticas) ---------------- */
#status { position: fixed; top: calc(var(--topo-h, 96px) + 14px); left: 26px; z-index: 15; display: flex; flex-direction: column; gap: 6px; }
#trilha { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-2); }
#trilha .atual { display: inline-flex; align-items: center; gap: 7px; color: var(--texto); font-weight: 500; }
#trilha .atual i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
#trilha .sep { color: var(--texto-3); }
.voltar { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--borda); background: var(--vidro); color: var(--texto-2); }
.voltar:hover { color: #fff; border-color: rgba(167,139,250,.5); }
#estatisticas { font-size: 14px; color: var(--texto-3); }
#estatisticas b { color: var(--roxo); font-weight: 500; }

/* ---------------- Ferramentas ---------------- */
#ferramentas { position: fixed; right: 40px; top: 50%; transform: translateY(-50%); z-index: 15; display: flex; flex-direction: column; gap: 22px;
  transition: right .45s cubic-bezier(.2,.8,.2,1); }
#ferramentas button { width: 60px; height: 60px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(22, 24, 36, .82); border: 1px solid rgba(167,139,250,.28); color: #cfd2e6;
  box-shadow: 0 6px 20px rgba(0,0,0,.35); transition: .2s; }
#ferramentas button svg { width: 24px; height: 24px; }
#ferramentas button:hover { color: #fff; border-color: rgba(167,139,250,.7); box-shadow: 0 0 0 4px rgba(167,139,250,.12), 0 6px 20px rgba(0,0,0,.35); }
#ferramentas button.ativo { color: var(--roxo); }
body.com-inspetor #ferramentas { right: calc(var(--insp-w) + 28px); }

.pilula-giro { position: fixed; right: 40px; bottom: 150px; z-index: 15; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px; border-radius: 999px; border: 1px solid var(--borda-suave); background: rgba(16,18,26,.5);
  color: var(--texto-3); font-size: 14px; cursor: pointer; transition: .3s; }
.pilula-giro svg { width: 16px; height: 16px; }
.pilula-giro.ativo svg { animation: girar 3s linear infinite; }
body.com-inspetor .pilula-giro { opacity: 0; pointer-events: none; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------------- Legenda / filtro ---------------- */
#legenda { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 15; display: flex; gap: 6px;
  padding: 8px 14px; border-radius: 999px; background: var(--vidro); border: 1px solid var(--borda);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); max-width: calc(100vw - 32px); overflow-x: auto; scrollbar-width: none; }
#legenda::-webkit-scrollbar { display: none; }
#legenda button { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: 999px; font-size: 16px;
  color: var(--texto); white-space: nowrap; transition: .2s; }
#legenda button i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); transition: .2s; }
#legenda button:hover { background: rgba(255,255,255,.05); }
#legenda button.off { color: var(--texto-3); }
#legenda button.off i { background: transparent; box-shadow: inset 0 0 0 2px var(--c); opacity: .5; }
#legenda button.atual { background: color-mix(in srgb, var(--c) 16%, transparent); }

#dica { position: fixed; left: 26px; bottom: 16px; z-index: 10; font-size: 12px; color: var(--texto-3); pointer-events: none; }

/* ---------------- Rótulos ---------------- */
#rotulos { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.rotulo { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform; }
.rotulo-hub { display: flex; flex-direction: column; align-items: center; gap: 1px; pointer-events: auto; cursor: pointer;
  padding: 4px 12px; border-radius: 10px; text-shadow: 0 0 12px rgba(0,0,0,.9); transition: background .2s; }
.rotulo-hub b { font-size: 17px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fff;
  text-shadow: 0 0 18px var(--c), 0 0 3px rgba(0,0,0,.9); white-space: normal; text-align: center; line-height: 1.2; max-width: 11em; }
@media (max-width: 760px) {
  .rotulo-hub b { font-size: 12.5px; letter-spacing: .1em; max-width: 8.5em; }
}
.rotulo-hub small { font-size: 12px; color: var(--texto-2); }
.rotulo-hub em { font-style: normal; font-size: 12px; color: var(--c); font-weight: 600; }
.rotulo-hub:hover { background: rgba(255,255,255,.05); }
.rotulo-hub.apagado { filter: grayscale(1) brightness(.6); }
.rotulo-item { font-size: 12px; color: #d9dbe7; text-shadow: 0 0 6px #000, 0 0 2px #000; pointer-events: auto; cursor: pointer; max-width: 320px; }
.rotulo-item.fraco { color: rgba(220,222,235,.55); font-size: 11px; }
.rotulo-item.viz { color: rgba(230,232,245,.8); font-size: 11.5px; }
.rotulo-item.match { color: #ffe3a1; }
.rotulo-item.hover { z-index: 3; color: #fff; padding: 4px 10px; border-radius: 8px; background: rgba(14,16,23,.9);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); text-shadow: none; }
.rotulo-item.sel { z-index: 2; color: #fff; font-size: 14px; font-weight: 600; text-shadow: 0 0 14px var(--c), 0 0 3px #000; }
.rotulo-grupo { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(200,205,225,.38); }

/* ---------------- Painéis ---------------- */
.painel { position: fixed; top: 0; bottom: 0; z-index: 30; width: var(--insp-w); max-width: 100vw; overflow-y: auto;
  padding: 28px 26px 40px; background: var(--vidro-forte); border-left: 1px solid var(--borda);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: -20px 0 60px rgba(0,0,0,.5);
  right: 0; transform: translateX(105%); transition: transform .45s cubic-bezier(.2,.8,.2,1); scrollbar-width: thin; }
.painel.aberto { transform: none; }
.painel-esq { right: auto; left: 0; width: var(--est-w); border-left: 0; border-right: 1px solid var(--borda); transform: translateX(-105%);
  box-shadow: 20px 0 60px rgba(0,0,0,.5); }
.painel-fechar { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; font-size: 22px; color: var(--texto-2); }
.painel-fechar:hover { background: rgba(255,255,255,.08); color: #fff; }
.painel h4 { margin: 24px 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3);
  display: flex; align-items: center; gap: 8px; }
.qtd { font-size: 11px; letter-spacing: 0; padding: 1px 7px; border-radius: 8px; background: rgba(255,255,255,.07); color: var(--texto-2); }

.insp-topo { display: flex; flex-wrap: wrap; gap: 8px; padding-right: 40px; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; font-size: 12px;
  background: color-mix(in srgb, var(--c) 14%, transparent); color: color-mix(in srgb, var(--c) 70%, #fff);
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.chip-grupo { background: rgba(255,255,255,.04); color: var(--texto-2); border-color: var(--borda-suave); }
.chip-grupo:hover { color: #fff; }
.insp-titulo { margin: 16px 0 6px; font-size: 23px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.insp-autor { font-size: 12.5px; color: var(--texto-3); }
.insp-autor b { color: var(--ouro); font-weight: 500; }
.insp-desc { margin: 16px 0 0; font-size: 15px; line-height: 1.65; color: #d3d6e3; }
.refs { display: flex; flex-wrap: wrap; gap: 6px; }
.ref { padding: 5px 11px; border-radius: 8px; font-size: 13px; background: rgba(244,193,82,.08); color: #f6d88f;
  border: 1px solid rgba(244,193,82,.2); transition: .15s; }
.ref:hover { background: rgba(244,193,82,.18); color: #fff; }
.insp-original { margin-top: 18px; font-size: 12.5px; color: var(--texto-3); }
.insp-original summary { cursor: pointer; }
.insp-original p { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.03); color: var(--texto-2); line-height: 1.6; }
.insp-acoes, .estudo-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.btn { padding: 8px 14px; border-radius: 10px; font-size: 13px; border: 1px solid var(--borda); background: rgba(255,255,255,.03); color: var(--texto); transition: .15s; }
.btn:hover { border-color: rgba(167,139,250,.55); background: rgba(167,139,250,.08); }
.btn-primario { background: rgba(167,139,250,.16); border-color: rgba(167,139,250,.45); }
.btn-perigo:hover { border-color: rgba(248,113,113,.6); background: rgba(248,113,113,.1); color: #fecaca; }
.conectados, .salvos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.conectados button, .salvo-ir { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 10px; }
.conectados button:hover, .salvo-ir:hover { background: rgba(255,255,255,.05); }
.conectados i, .salvos i { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); flex: none; }
.con-txt, .salvo-ir > span { display: flex; flex-direction: column; min-width: 0; font-size: 13.5px; }
.con-txt small, .salvo-ir small { font-size: 11.5px; color: var(--texto-3); }
.vazio { color: var(--texto-3); font-size: 13px; }

/* Estudos */
.painel-cabeca h3 { margin: 0; font-size: 18px; font-weight: 600; }
.estudo-barra { display: flex; gap: 8px; margin-top: 20px; }
.estudo-barra select { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--borda); }
.estudo-barra select option { background: #14161f; }
.estudo-titulo { width: 100%; margin-top: 18px; padding: 8px 0; font-size: 20px; font-weight: 600; background: none; border: 0;
  border-bottom: 1px solid var(--borda-suave); outline: none; }
.estudo-titulo:focus { border-bottom-color: var(--roxo); }
.salvos li { display: flex; align-items: center; }
.salvo-rem { width: 28px; height: 28px; border-radius: 8px; font-size: 18px; color: var(--texto-3); flex: none; }
.salvo-rem:hover { background: rgba(248,113,113,.12); color: #fecaca; }
#estudo-notas { width: 100%; min-height: 240px; padding: 12px 14px; border-radius: 12px; resize: vertical; background: rgba(255,255,255,.03);
  border: 1px solid var(--borda-suave); outline: none; font: 13.5px/1.6 ui-monospace, "Cascadia Code", Consolas, monospace; }
#estudo-notas:focus { border-color: rgba(167,139,250,.5); }
.estudo-vazio { margin-top: 24px; color: var(--texto-2); line-height: 1.6; }
.sutil { color: var(--texto-3); font-size: 13px; }

#aviso { position: fixed; left: 50%; bottom: 110px; z-index: 50; transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  padding: 10px 18px; border-radius: 999px; background: var(--vidro-forte); border: 1px solid var(--borda); transition: .3s; }
#aviso.visivel { opacity: 1; transform: translate(-50%, 0); }

/* ---------------- Carregamento ---------------- */
#carregando { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; text-align: center;
  background: radial-gradient(ellipse at 50% 40%, #151328 0%, #0a0b0f 65%); transition: opacity 1s ease, visibility 1s; }
#carregando.saindo { opacity: 0; visibility: hidden; }
.c-centro { max-width: 620px; display: flex; flex-direction: column; align-items: center; }
.c-orbita { position: relative; width: 120px; height: 120px; margin-bottom: 34px; }
.c-orbita span { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(167,139,250,.25); animation: girar 8s linear infinite; }
.c-orbita span:nth-child(2) { inset: 18px; border-color: rgba(96,165,250,.3); animation-duration: 5s; animation-direction: reverse; }
.c-orbita span:nth-child(3) { inset: 36px; border-color: rgba(244,193,82,.35); animation-duration: 3s; }
.c-orbita span::before { content: ""; position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px #fff; }
.c-orbita i { position: absolute; inset: 52px; border-radius: 50%; background: #f4c152; box-shadow: 0 0 30px 8px rgba(244,193,82,.6); }
#carregando h1 { margin: 0; font-size: clamp(28px, 5vw, 44px); font-weight: 700; letter-spacing: .01em; line-height: 1.15;
  background: linear-gradient(90deg, #a78bfa, #8fb4ff 50%, #f4c152); -webkit-background-clip: text; background-clip: text; color: transparent; }
.c-autor { margin: 12px 0 0; font-size: 16px; letter-spacing: .08em; color: var(--ouro); }
.c-frase { margin: 26px 0 0; font-size: clamp(15px, 2.2vw, 18px); line-height: 1.6; color: var(--texto-2); font-weight: 300; }
.c-barra { width: 220px; height: 2px; margin-top: 36px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.c-barra span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #a78bfa, #f4c152); transition: width .5s ease; }
.c-status { margin: 12px 0 0; min-height: 20px; font-size: 12.5px; color: var(--texto-3); }
.btn-entrar { margin-top: 22px; padding: 12px 30px; border-radius: 999px; font-size: 15px; font-weight: 500; letter-spacing: .03em;
  background: rgba(167,139,250,.14); border: 1px solid rgba(167,139,250,.5); box-shadow: 0 0 30px rgba(167,139,250,.25); transition: .2s; }
.btn-entrar:hover, .btn-entrar:focus-visible { background: rgba(167,139,250,.26); outline: none; box-shadow: 0 0 40px rgba(167,139,250,.45); }

:focus-visible { outline: 2px solid rgba(167,139,250,.7); outline-offset: 2px; }

.faixa-demo { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 16; padding: 6px 16px; border-radius: 999px;
  font-size: 12.5px; color: #ffe3a1; background: rgba(244,193,82,.1); border: 1px solid rgba(244,193,82,.35); white-space: nowrap; pointer-events: none; }
.faixa-demo b { font-weight: 600; letter-spacing: .03em; }
@media (max-width: 760px) { .faixa-demo { bottom: 72px; font-size: 11.5px; } }

/* Retrato do autor na tela de abertura */
.c-autor { display: inline-flex; align-items: center; gap: 12px; }
.c-retrato { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(244,193,82,.7);
  box-shadow: 0 0 22px rgba(244,193,82,.35); }

/* Login (versão online) */
.login { width: min(360px, 100%); margin-top: 26px; display: flex; flex-direction: column; text-align: left; }
.login label { display: block; font-size: 14px; color: var(--texto-2); margin-bottom: 10px; line-height: 1.5; }
.login label b { color: var(--texto); font-weight: 500; }
.login input { width: 100%; height: 48px; padding: 0 16px; border-radius: 12px; font-size: 16px; background: rgba(255,255,255,.05);
  border: 1px solid var(--borda); color: var(--texto); outline: none; }
.login input:focus { border-color: rgba(167,139,250,.7); box-shadow: 0 0 0 4px rgba(167,139,250,.12); }
#login-codigo { font-size: 22px; letter-spacing: .4em; text-align: center; }
.login .btn-entrar { width: 100%; margin-top: 14px; }
#login-senha { margin-top: 10px; }
#login-passo-email, #login-passo-codigo { display: flex; flex-direction: column; }
#login-passo-email[hidden], #login-passo-codigo[hidden], #login-senha[hidden] { display: none; }
.login-link { margin-top: 12px; font-size: 13px; color: var(--texto-3); text-decoration: underline; align-self: center; }
.login-msg { min-height: 20px; margin: 12px 0 0; font-size: 13.5px; color: var(--texto-2); text-align: center; line-height: 1.5; }
.login-msg.erro { color: #fca5a5; }
.login-msg a { color: var(--ouro); }
.conta-linha { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; font-size: 12.5px; color: var(--texto-3); }
.conta-linha b { color: var(--texto-2); font-weight: 500; }
.conta-linha button { color: var(--texto-3); text-decoration: underline; font-size: 12.5px; }
.nuvem-status.ok { color: #86efac; }
.nuvem-status.erro { color: #fca5a5; }

/* ---------------- Telas menores ---------------- */
@media (max-width: 1100px) {
  .total { display: none; }
  .marca-l2 { font-size: 22px; }
  .marca-l1 { font-size: 11px; }
}
@media (max-height: 720px) and (min-width: 761px) {
  #ferramentas { gap: 10px; }
  #ferramentas button { width: 46px; height: 46px; border-radius: 12px; }
  .pilula-giro { bottom: 96px; }
  #legenda { bottom: 20px; }
}
@media (max-width: 760px) {
  #topo { grid-template-columns: 1fr auto; gap: 10px 12px; padding: 12px 16px; }
  #busca { grid-column: 1 / -1; grid-row: 2; height: 46px; }
  .marca-estrela { font-size: 30px; }
  .marca-l1 { font-size: 11px; letter-spacing: .3em; }
  .marca-l2 { font-size: 24px; }
  .btn-estudos .rot { display: none; }
  .btn-estudos { padding: 0 12px; }
  #status { left: 16px; }
  #estatisticas { font-size: 12px; }
  #ferramentas { right: 12px; gap: 10px; top: auto; bottom: 96px; transform: none; }
  #ferramentas button { width: 44px; height: 44px; border-radius: 12px; }
  #ferramentas button svg { width: 20px; height: 20px; }
  .pilula-giro, #dica { display: none; }
  #legenda { bottom: 20px; padding: 6px; justify-content: flex-start; }
  #legenda button { font-size: 13px; padding: 6px 10px; gap: 7px; }
  #legenda button i { width: 10px; height: 10px; }
  .painel { top: auto; left: 0; right: 0; width: 100%; height: 58vh; border-left: 0; border-top: 1px solid var(--borda);
    border-radius: 20px 20px 0 0; transform: translateY(105%); padding: 24px 18px 40px; }
  .painel-esq { height: 100%; border-radius: 0; transform: translateY(105%); }
  body.com-inspetor #ferramentas { right: 12px; }
  #resultados { max-height: 60vh; }
}