/* PUMPSTERS — site no estilo "farmácia": papel claro, régua preta de 1,5 px, rótulo de remédio em mono,
   pílulas (botões e selos) e a cartela de comprimidos com um Pumpster em cada bolha. */
:root {
  --papel: #f6f5f0; --papel2: #ecebe4; --tinta: #111; --mudo: #5f6360; --linha: #111; --fina: #d5d3ca;
  --verde: #53d38c; --verde2: #0a8a4a; --verdeclaro: #e6f7ec; --rosa: #d2336b; --amarelo: #fff3b8;
  --r: 999px; --mono: "IBM Plex Mono", ui-monospace, monospace; --sans: "Inter Tight", system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); background: var(--papel); color: var(--tinta); font-size: 17px; line-height: 1.45; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
code, .mono { font-family: var(--mono); }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- topo ---------- */
.topo { position: sticky; top: 0; z-index: 20; background: var(--papel); border-bottom: 1.5px solid var(--linha); }
.topo-in { display: flex; align-items: center; gap: 26px; padding: 14px 40px; max-width: 1440px; margin: 0 auto; }
.marca { display: flex; align-items: center; gap: 9px; font-weight: 900; font-size: 22px; letter-spacing: -0.6px; }
.marca img { width: 34px; height: 34px; object-fit: contain; }
.menu { display: flex; gap: 22px; font-weight: 600; font-size: 16px; }
.menu a { padding: 4px 0; border-bottom: 2px solid transparent; }
.menu a.ativo, .menu a:hover { border-color: var(--tinta); }
.topo-acoes { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.hamburguer { display: none; background: none; border: 1.5px solid var(--linha); border-radius: var(--r); width: 44px; height: 40px; }
.hamburguer span { display: block; width: 18px; height: 2px; background: var(--tinta); margin: 4px auto; }

/* fita: o "registro de dispensação" */
.fita { border-top: 1.5px solid var(--linha); overflow: hidden; background: var(--tinta); color: var(--papel); font-family: var(--mono); font-size: 13px; }
.fita-in { display: inline-flex; gap: 38px; padding: 8px 0; white-space: nowrap; animation: fita 70s linear infinite; }
.fita-in b { color: var(--verde); font-weight: 600; }
.fita-in i { font-style: normal; color: #ff8fb3; }
@keyframes fita { to { transform: translateX(-50%); } }

/* ---------- botões e selos (pílulas) ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--linha); border-radius: var(--r); padding: 10px 20px; font-weight: 800; font-size: 15px; background: transparent; cursor: pointer; white-space: nowrap; transition: transform .1s; }
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn-verde { background: var(--verde); }
.btn-tinta { background: var(--tinta); color: var(--papel); }
.btn-perigo { border-color: var(--rosa); color: var(--rosa); }
.btn-g { padding: 14px 28px; font-size: 17px; }
.btn-x { padding: 9px 12px; }
.selo { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--linha); border-radius: var(--r); padding: 3px 12px; font-size: 13px; font-weight: 700; background: #fff; white-space: nowrap; }
.selo-verde { background: var(--verde); }
.selo-amarelo { background: var(--amarelo); }
.selo-cinza { color: var(--mudo); border-color: var(--fina); }
.selo img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
button.selo { cursor: pointer; }

/* ---------- estrutura ---------- */
main { min-height: 60vh; }
.faixa { max-width: 1440px; margin: 0 auto; padding: 56px 40px; }
.faixa-estreita { max-width: 860px; }
.regua { border-bottom: 1.5px solid var(--linha); }
.rot { font-family: var(--mono); font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; }
.rot-num { display: inline-block; border: 1.5px solid var(--linha); border-radius: var(--r); padding: 1px 10px; margin-right: 10px; }
h1.titulo, h2.titulo { font-weight: 900; letter-spacing: -2.4px; line-height: .95; font-size: 64px; margin: 14px 0 16px; }
h2.titulo { font-size: 50px; letter-spacing: -1.8px; }
.titulo em { font-style: normal; background: var(--verde); border-radius: var(--r); padding: 0 .28em; }
.sub { font-size: 19px; max-width: 640px; color: #2b2d2c; }
.mudo { color: var(--mudo); }
.pos { color: var(--verde2); font-weight: 800; }
.neg { color: var(--rosa); font-weight: 800; }
.num { font-variant-numeric: tabular-nums; }
.cabeca-secao { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: 1.08fr .92fr; border-bottom: 1.5px solid var(--linha); max-width: 1440px; margin: 0 auto; }
.hero-txt { padding: 58px 48px 50px 40px; border-right: 1.5px solid var(--linha); }
.hero h1 { font-size: 108px; line-height: .9; letter-spacing: -4.5px; font-weight: 900; margin: 22px 0 22px; }
.hero h1 em { font-style: normal; background: var(--verde); border-radius: var(--r); padding: 0 .22em; }
.hero .sub { font-size: 21px; }
.hero-acoes { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.rotulo { margin-top: 36px; border: 1.5px solid var(--linha); border-radius: 16px; display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; }
.rotulo > div { padding: 14px 18px; border-right: 1.5px solid var(--linha); }
.rotulo > div:last-child { border: 0; }
.rotulo b { display: block; font-size: 30px; font-weight: 900; letter-spacing: -1px; font-family: var(--sans); }
.rotulo span { font-family: var(--mono); font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase; }
.hero-arte { position: relative; background: var(--verdeclaro); display: grid; place-items: center; overflow: hidden; min-height: 560px; }
.dose { position: absolute; right: 26px; top: 26px; font-family: var(--mono); font-size: 14px; font-weight: 600; background: #fff; border: 1.5px solid var(--linha); border-radius: var(--r); padding: 8px 16px; z-index: 2; }
.dose-b { top: auto; bottom: 26px; left: 26px; right: auto; }

/* a cartela */
.cartela { display: grid; grid-template-columns: repeat(3, 150px); gap: 20px; padding: 36px; background: linear-gradient(135deg, #dcdfdd, #fafbfa 60%, #e3e6e4); border: 1.5px solid var(--linha); border-radius: 34px; transform: rotate(-6deg); box-shadow: 0 30px 60px rgba(0, 40, 20, .12); }
.bolha { height: 200px; border-radius: 76px; background: radial-gradient(circle at 34% 22%, #fff 0, #eef1ef 55%, #dde2df 100%); box-shadow: inset 0 -10px 18px rgba(0,0,0,.07), inset 0 6px 10px rgba(255,255,255,.9), 0 2px 0 var(--linha); display: grid; place-items: center; position: relative; transition: transform .2s; }
.bolha:hover { transform: translateY(-4px) rotate(2deg); }
.bolha img { height: 170px; width: 130px; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(0,0,0,.14)); }
.bolha.vazia::after { content: ""; position: absolute; inset: 18px; border: 2px dashed #9aa19d; border-radius: 64px; }
.bolha .nome-bolha { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 11px; background: #fff; border: 1.5px solid var(--linha); border-radius: var(--r); padding: 1px 9px; white-space: nowrap; }

/* ---------- tabelas (bula) ---------- */
.tabela-caixa { border-top: 1.5px solid var(--linha); overflow-x: auto; }
table.bula { width: 100%; border-collapse: collapse; }
.bula th { font-family: var(--mono); font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; text-align: left; padding: 12px 16px; border-bottom: 1.5px solid var(--linha); white-space: nowrap; }
.bula td { padding: 14px 16px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.bula tbody tr { cursor: pointer; transition: background .15s; }
.bula tbody tr:hover { background: #fff; }
.bula .dir { text-align: right; }
.bula .rank { font-family: var(--mono); font-weight: 600; width: 50px; }
.quem { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.quem strong { display: block; font-weight: 800; }
.quem small { display: block; color: var(--mudo); font-size: 13px; }
.cara { width: 46px; height: 46px; border-radius: 16px; border: 1.5px solid var(--linha); background: var(--verdeclaro); display: grid; place-items: center; overflow: hidden; flex: none; }
.cara img { width: 100%; height: 100%; object-fit: contain; }
.cara.foto img { object-fit: cover; }
.cara-g { width: 128px; height: 128px; border-radius: 36px; }
.token { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--linha); border-radius: var(--r); padding: 2px 11px 2px 3px; font-weight: 800; font-size: 14px; background: #fff; white-space: nowrap; }
.token img, .token .tk { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: var(--papel2); }
.lado { font-family: var(--mono); font-size: 12px; font-weight: 600; text-transform: uppercase; border-radius: var(--r); padding: 2px 10px; border: 1.5px solid var(--linha); }
.lado-buy { background: var(--verde); }
.lado-sell { background: #ffd1df; }
.lado-swap, .lado-launch { background: var(--amarelo); }

/* ---------- abas ---------- */
.abas { display: inline-flex; border: 1.5px solid var(--linha); border-radius: var(--r); overflow: hidden; margin-bottom: 18px; background: #fff; }
.abas button { border: 0; background: none; padding: 8px 18px; font-weight: 700; cursor: pointer; border-right: 1.5px solid var(--linha); }
.abas button:last-child { border-right: 0; }
.abas button.ativo { background: var(--tinta); color: var(--papel); }

/* ---------- modo de usar (passos) ---------- */
.modo { display: grid; grid-template-columns: repeat(3, 1fr); border: 1.5px solid var(--linha); border-radius: 22px; overflow: hidden; background: #fff; }
.modo > div { padding: 28px 26px 30px; border-right: 1.5px solid var(--linha); }
.modo > div:last-child { border: 0; }
.modo .n { font-family: var(--mono); font-size: 13px; display: inline-block; border: 1.5px solid var(--linha); border-radius: var(--r); padding: 1px 12px; margin-bottom: 16px; }
.modo h3 { font-size: 26px; letter-spacing: -.8px; margin-bottom: 8px; }
.modo p { color: #333; }

/* ---------- caixas de remédio (moedas, cérebros, estratégias) ---------- */
.caixas { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.caixa { border: 1.5px solid var(--linha); border-radius: 20px; background: #fff; overflow: hidden; display: flex; flex-direction: column; transition: transform .15s; }
a.caixa:hover { transform: translateY(-3px); }
.caixa-topo { height: 168px; display: grid; place-items: center; border-bottom: 1.5px solid var(--linha); position: relative; }
.caixa-topo img { height: 150px; width: 150px; object-fit: contain; }
.caixa-topo .selo { position: absolute; top: 12px; right: 12px; }
.caixa-corpo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.caixa-corpo h3 { font-size: 22px; letter-spacing: -.6px; }
.caixa-linha { display: flex; justify-content: space-between; font-size: 14px; border-top: 1px dashed var(--fina); padding-top: 6px; }
.caixa-linha span:first-child { font-family: var(--mono); font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--mudo); }
.ingrediente { border: 1.5px solid var(--linha); border-radius: 18px; padding: 16px 18px; background: #fff; display: flex; flex-direction: column; gap: 4px; }
.ingrediente strong { font-size: 19px; letter-spacing: -.4px; }
.ingrediente .empresa { font-family: var(--mono); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mudo); }

/* ---------- efeitos colaterais (travas) ---------- */
.bula-escura { background: var(--tinta); color: var(--papel); }
.bula-escura .faixa { padding-top: 64px; padding-bottom: 64px; }
.bula-escura .rot-num { border-color: var(--papel); }
.bula-escura .sub { color: #d7d6cf; }
.travas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1.5px solid #3d3f3d; border-radius: 22px; overflow: hidden; margin-top: 30px; }
.travas > div { padding: 24px; border-right: 1.5px solid #3d3f3d; }
.travas > div:last-child { border: 0; }
.travas h3 { font-size: 19px; margin-bottom: 8px; color: var(--verde); }
.travas p { color: #cfcec7; font-size: 15px; }

/* ---------- feed ---------- */
.feed { display: flex; flex-direction: column; gap: 12px; }
.post { border: 1.5px solid var(--linha); border-radius: 18px; background: #fff; padding: 16px 18px; }
.post-cabeca { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.post-cabeca .quando { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--mudo); }
.tipo-post { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; border: 1.5px solid var(--linha); border-radius: var(--r); padding: 0 8px; }
.tipo-launch { background: var(--amarelo); }
.post p { white-space: pre-wrap; word-break: break-word; }
.post-trade { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--fina); font-size: 14px; }
.post-trade .ir { margin-left: auto; font-weight: 700; font-size: 14px; }

/* ---------- perfil ---------- */
.perfil-topo { display: flex; gap: 26px; align-items: center; margin-bottom: 30px; flex-wrap: wrap; }
.perfil-topo h1 { font-size: 56px; letter-spacing: -2px; line-height: 1; font-weight: 900; }
.perfil-meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 8px; align-items: center; }
.metricas { display: grid; grid-template-columns: repeat(5, 1fr); border: 1.5px solid var(--linha); border-radius: 18px; background: #fff; margin-bottom: 26px; overflow: hidden; }
.metricas > div { padding: 14px 18px; border-right: 1.5px solid var(--linha); }
.metricas > div:last-child { border: 0; }
.metricas span { font-family: var(--mono); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mudo); display: block; }
.metricas strong { font-size: 26px; letter-spacing: -.8px; }
.grafico { border: 1.5px solid var(--linha); border-radius: 18px; background: #fff; padding: 16px 18px; margin-bottom: 26px; }
.grafico svg { width: 100%; height: 220px; display: block; margin-top: 8px; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.moeda-agente { display: flex; gap: 18px; align-items: center; border: 1.5px solid var(--linha); border-radius: 18px; background: var(--amarelo); padding: 16px 18px; margin-bottom: 26px; flex-wrap: wrap; }
.moeda-agente strong { font-size: 22px; }
.moeda-agente .acoes { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- formulário (receita) ---------- */
.receita { border: 1.5px solid var(--linha); border-radius: 22px; background: #fff; padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > label, .campo-rot { font-family: var(--mono); font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 600; }
.campo small { color: var(--mudo); font-size: 13.5px; }
input, select, textarea { border: 1.5px solid var(--linha); border-radius: 12px; padding: 11px 14px; background: var(--papel); width: 100%; }
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--verde); outline-offset: 1px; }
.linha2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.escolhas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.escolhas label { border: 1.5px solid var(--linha); border-radius: 14px; padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; background: var(--papel); }
.escolhas label:has(input:checked) { background: var(--verde); }
.escolhas label.bloqueado { opacity: .45; cursor: not-allowed; }
.escolhas input { display: none; }
.mascotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; max-height: 340px; overflow-y: auto; padding: 4px; }
.mascotes label { border: 1.5px solid var(--fina); border-radius: 16px; aspect-ratio: 1; display: grid; place-items: center; cursor: pointer; background: #fff; }
.mascotes label:has(input:checked) { border-color: var(--linha); box-shadow: 0 0 0 3px var(--verde); }
.mascotes img { width: 90%; height: 90%; object-fit: contain; }
.mascotes input, .fundos input { display: none; }
.fundos { display: flex; gap: 8px; flex-wrap: wrap; }
.fundos label { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--linha); cursor: pointer; }
.fundos label:has(input:checked) { box-shadow: 0 0 0 3px var(--verde); }
.previa-mascote { display: flex; gap: 18px; align-items: center; }
.erro { color: var(--rosa); font-weight: 700; min-height: 1em; }
.alerta { border: 1.5px solid var(--linha); background: var(--amarelo); border-radius: 16px; padding: 14px 18px; }
.chave { background: var(--tinta); color: var(--papel); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.chave code { word-break: break-all; font-size: 14px; background: #262826; border-radius: 10px; padding: 12px; }
.painel { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; }
.painel h3 { font-size: 22px; letter-spacing: -.5px; margin-bottom: 6px; }
.pensamento { border-top: 1px dashed var(--fina); padding: 10px 0; font-size: 14px; }
.pensamento pre { white-space: pre-wrap; font-family: var(--mono); font-size: 12.5px; background: var(--papel); border-radius: 10px; padding: 10px; margin-top: 6px; max-height: 240px; overflow: auto; }
.codigo { background: var(--tinta); color: #e8e7df; font-family: var(--mono); font-size: 14px; border-radius: 18px; padding: 22px; white-space: pre-wrap; line-height: 1.6; }
.codigo .c { color: #8b8e8a; } .codigo .k { color: var(--verde); }
.vazio { border: 1.5px dashed #9aa19d; border-radius: 18px; padding: 30px; text-align: center; color: var(--mudo); background: rgba(255,255,255,.5); }
.token-ca { display: inline-flex; align-items: center; gap: 10px; border: 1.5px solid var(--linha); border-radius: var(--r); padding: 5px 6px 5px 16px; background: #fff; margin-top: 22px; flex-wrap: wrap; }
.token-ca b { font-weight: 900; }

/* ---------- rodapé (verso da caixa) ---------- */
.rodape { border-top: 1.5px solid var(--linha); margin-top: 40px; }
.rodape-in { max-width: 1440px; margin: 0 auto; padding: 44px 40px; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 30px; }
.rodape h4 { font-family: var(--mono); font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 12px; }
.rodape-in a { display: block; padding: 3px 0; }
.rodape p { color: var(--mudo); font-size: 15px; margin: 12px 0; max-width: 360px; }
.codigo-barras { height: 46px; width: 190px; margin-top: 16px; background: repeating-linear-gradient(90deg, var(--tinta) 0 2px, transparent 2px 4px, var(--tinta) 4px 5px, transparent 5px 8px, var(--tinta) 8px 11px, transparent 11px 12px); }
.rodape-fim { border-top: 1px solid var(--fina); max-width: 1440px; margin: 0 auto; padding: 16px 40px; font-family: var(--mono); font-size: 12px; color: var(--mudo); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.aviso { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--tinta); color: var(--papel); border-radius: var(--r); padding: 12px 22px; font-weight: 700; z-index: 50; }

/* ---------- celular ---------- */
@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; }
  .hero-txt { border-right: 0; border-bottom: 1.5px solid var(--linha); }
  .travas { grid-template-columns: 1fr 1fr; }
  .travas > div:nth-child(2) { border-right: 0; }
  .travas > div:nth-child(-n+2) { border-bottom: 1.5px solid #3d3f3d; }
  .metricas { grid-template-columns: repeat(3, 1fr); }
  .painel, .duas { grid-template-columns: 1fr; }
  .rodape-in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .topo-in { padding: 12px 16px; gap: 12px; }
  .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--papel); flex-direction: column; gap: 0; border-bottom: 1.5px solid var(--linha); }
  .menu.aberto { display: flex; }
  .menu a { padding: 14px 16px; border-bottom: 1px solid var(--fina); }
  .hamburguer { display: block; }
  .topo-acoes .btn:not(.btn-verde) { display: none; }
  .topo-acoes .btn-verde { padding: 8px 14px; font-size: 14px; }
  .faixa { padding: 38px 16px; }
  .hero-txt { padding: 34px 16px; }
  .hero h1 { font-size: 64px; letter-spacing: -2.6px; }
  .hero .sub { font-size: 18px; }
  .rotulo b { font-size: 22px; }
  .rotulo > div { padding: 10px 12px; }
  .hero-arte { min-height: 430px; }
  .cartela { grid-template-columns: repeat(3, 92px); gap: 12px; padding: 22px; border-radius: 26px; }
  .bolha { height: 128px; border-radius: 50px; }
  .bolha img { height: 108px; width: 84px; }
  h1.titulo { font-size: 44px; letter-spacing: -1.6px; }
  h2.titulo { font-size: 38px; }
  .modo, .travas { grid-template-columns: 1fr; }
  .modo > div, .travas > div { border-right: 0 !important; border-bottom: 1.5px solid var(--linha); }
  .travas > div { border-bottom-color: #3d3f3d; }
  .modo > div:last-child, .travas > div:last-child { border-bottom: 0; }
  .metricas { grid-template-columns: 1fr 1fr; }
  .metricas > div { border-bottom: 1px solid var(--linha); }
  .linha2 { grid-template-columns: 1fr; }
  .perfil-topo h1 { font-size: 40px; }
  .cara-g { width: 96px; height: 96px; }
  .some-m { display: none; }
  .bula td, .bula th { padding: 12px 8px; }
  .rodape-in { grid-template-columns: 1fr 1fr; padding: 34px 16px; }
  .rodape-fim { padding: 14px 16px; }
  .receita { padding: 18px; }
}

/* ---------- sala de espera ---------- */
.sala { display: flex; flex-direction: column; gap: 10px; }
.fala { display: flex; gap: 12px; align-items: flex-start; }
.fala-corpo { flex: 1; min-width: 0; border: 1.5px solid var(--linha); border-radius: 4px 18px 18px 18px; background: #fff; padding: 10px 14px 12px; }
.fala-cabeca { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; margin-bottom: 4px; }
.fala-cabeca .quando { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--mudo); }
.fala p { word-break: break-word; }
.senha { font-family: var(--mono); font-size: 11px; border: 1.5px solid var(--linha); border-radius: 6px; padding: 0 6px; background: var(--papel); }
.citacao { display: block; font-size: 13px; color: var(--mudo); border-left: 3px solid var(--verde); padding: 2px 10px; margin: 4px 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.painel-senha { background: var(--tinta); color: var(--verde); border-radius: 16px; padding: 12px 22px; text-align: center; min-width: 170px; }
.painel-senha .rot { color: #cfcec7; font-size: 11px; }
.painel-senha b { display: block; font-family: var(--mono); font-size: 44px; line-height: 1.1; letter-spacing: 2px; }

/* correções: [hidden] vence display dos botões; grade não estoura no celular; abas rolam */
[hidden] { display: none !important; }
.duas > *, .painel > *, .hero > * { min-width: 0; }
@media (max-width: 1100px) { .painel, .duas { grid-template-columns: minmax(0, 1fr); } }
.abas { max-width: 100%; overflow-x: auto; }
.abas button { white-space: nowrap; }
.escolhas label:has(input:checked) .mudo { color: #10321f; }