/* QPAD (nome provisório) — linguagem visual: IBM Carbon (Plex fina, blocos chapados, borda 1px) com o chip real desenhado,
   como no QUBIT; identidade própria em TEAL (Carbon teal 40) no lugar do roxo, e a cor de cada moeda vem do logo dela.
   Referências estudadas: IBM Quantum Platform (cabeçalho preto + degradê, tiles), Art Blocks (obra grande + lista de traços),
   pump.fun (fileira densa de moedas), ANU QRNG ("live numbers"). Abas sem rolagem: cada aba cabe numa tela. */
:root {
  --fundo: #0b0b0f;
  --fundo-2: #15151c;
  --borda: #353541;
  --texto: #f4f4f4;
  --texto-2: #a6a6b1;
  --teal: #08bdba;
  --teal-claro: #3ddbd9;
  --azul: #4589ff;
  --azul-claro: #78a9ff;
  --verde: #42be65;
  --amarelo: #f1c21b;
  --vermelho: #fa4d56;
  --topo-h: 56px;
  --rodape-h: 30px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; overflow: hidden; margin: 0; }
body { background: var(--fundo); color: var(--texto); font-family: "IBM Plex Sans", system-ui, sans-serif; font-weight: 300; line-height: 1.4; -webkit-font-smoothing: antialiased; }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 400; }
a { color: inherit; text-decoration: none; }
b { font-weight: 600; }
button { font: inherit; }

/* ---------- topo ---------- */
.topo { height: var(--topo-h); display: flex; align-items: center; gap: 32px; padding: 0 24px; border-bottom: 1px solid var(--borda); background: linear-gradient(90deg, #06302f 0%, #0b0b0f 50%); }
.marca { font-size: 20px; font-weight: 600; letter-spacing: .06em; display: flex; align-items: center; gap: 10px; }
.marca-ponto { width: 12px; height: 12px; border-radius: 50%; background: var(--teal-claro); box-shadow: 0 0 10px var(--teal-claro), 0 0 22px var(--teal); }
.abas { display: flex; gap: 4px; height: 100%; }
.abas a { display: flex; align-items: center; padding: 0 14px; color: var(--texto-2); font-size: 14px; font-weight: 400; border-bottom: 2px solid transparent; }
.abas a.ativa { color: var(--texto); border-bottom-color: var(--teal-claro); }
.topo-dir { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.ca-pilula { display: flex; align-items: center; gap: 8px; border: 1px solid var(--verde); color: var(--verde); padding: 4px 10px; font-size: 12px; font-family: "IBM Plex Mono", monospace; max-width: 52vw; }
.ca-rotulo { font-weight: 700; }
.ca-texto { overflow: hidden; text-overflow: clip; white-space: nowrap; }
.ca-copiar { border-left: 1px solid var(--verde); padding-left: 8px; cursor: pointer; }
.x-link { border: 1px solid var(--borda); padding: 4px 10px; font-size: 13px; font-weight: 600; }

/* ---------- abas ---------- */
main { height: calc(100% - var(--topo-h) - var(--rodape-h)); position: relative; }
.aba { display: none; height: 100%; padding: 26px 40px; }
.aba.ativa { display: flex; flex-direction: column; }
.so-celular { display: none !important; }
.curto { display: none; }
.olho { color: var(--teal-claro); font-size: 12px; letter-spacing: .02em; margin: 0 0 10px; }
.olho a { color: var(--teal-claro); }
h1 { font-size: clamp(28px, 3vw, 44px); font-weight: 300; line-height: 1.08; margin: 0 0 14px; letter-spacing: -.01em; }
/* com o certificado aberto a chamada sai (o certificado é a chamada) */
.live-p1.com-cert .chamada { display: none; }
h2 { font-size: clamp(22px, 2.3vw, 32px); font-weight: 300; line-height: 1.12; margin: 0 0 12px; }
.chamada { font-size: 15px; color: var(--texto-2); max-width: 62ch; margin: 0 0 14px; }
.secao-cabeca { max-width: 980px; }
.secao-cabeca.compacta { margin-bottom: 8px; }
.nota { font-size: 11px; color: var(--texto-2); margin: 8px 0 0; }

/* ---------- painel do lançamento ---------- */
.painel { border: 1px solid var(--borda); background: var(--fundo-2); padding: 14px 18px; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.campos label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--texto-2); font-family: "IBM Plex Mono", monospace; }
.campos label.largo { grid-column: 1 / -1; }
.campos input { background: var(--fundo); border: 1px solid var(--borda); color: var(--texto); font: 300 15px "IBM Plex Sans", sans-serif; padding: 8px 10px; outline: none; }
.campos input:focus { border-color: var(--teal); }
.acoes { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.botao { background: var(--teal); color: #041716; border: 1px solid var(--teal); padding: 10px 18px; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-block; }
.botao:hover { background: var(--teal-claro); }
.botao:disabled { opacity: .45; cursor: default; }
.botao.fraco { background: transparent; color: var(--texto); border-color: var(--borda); font-weight: 400; }
.msg { font-size: 13px; color: var(--texto-2); margin: 0; }
.msg.erro { color: var(--vermelho); }
.msg.ok { color: var(--verde); }
.msg a { color: var(--teal-claro); text-decoration: underline; }

/* o certificado */
.cert-grade { display: grid; grid-template-columns: 250px 1fr; gap: 20px; }
.cert-logo img, .det-logo img { width: 100%; height: auto; display: block; border: 1px solid var(--borda); }
.cert-titulo { margin: 0 0 8px; font-size: clamp(22px, 2.2vw, 30px); }
.cert-ticker { font-size: .6em; color: var(--teal-claro); }
.fita { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; max-width: 420px; margin: 0 0 10px; }
.fita i { display: block; aspect-ratio: 1; border: 1px solid #3a3a48; }
.fita i.um { background: var(--cor1, var(--teal-claro)); border-color: var(--cor1, var(--teal-claro)); }
.tracos { display: grid; grid-template-columns: repeat(3, auto); gap: 4px 18px; margin: 0 0 8px; font-size: 13px; }
.tracos div { display: flex; flex-direction: column; }
.tracos dt { font-size: 10px; color: var(--texto-2); font-family: "IBM Plex Mono", monospace; }
.tracos dd { margin: 0; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.tracos dd.mono { text-transform: none; font-weight: 400; font-size: 12px; }
.amostra { width: 12px; height: 12px; display: inline-block; border: 1px solid rgba(255,255,255,.2); }
.cert-linha { font-size: 12px; color: var(--texto-2); margin: 0 0 4px; }
/* moedas recentes sob o formulário (desktop) */
.recentes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.recente { border: 1px solid var(--borda); background: var(--fundo-2); display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 8px; align-items: center; cursor: pointer; }
.recente:hover { border-color: var(--teal); }
.recente img { width: 64px; height: 64px; display: block; border: 1px solid var(--borda); }
.recente .r1 { font-size: 14px; font-weight: 500; line-height: 1.15; }
.recente .r2 { font-size: 11px; color: var(--texto-2); }
.recentes-olho { margin-top: 14px; }
#det-chip { width: 100%; height: 240px; margin-top: 6px; border: 1px solid var(--borda); background: var(--fundo-2); }
.lotes-mini { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.lote-mini { display: grid; grid-template-columns: 110px 110px 1fr auto auto; gap: 10px; font-size: 11px; color: var(--texto-2); border-bottom: 1px solid #22222b; padding: 3px 0; }
.lote-mini b { color: var(--texto); font-weight: 500; }

/* ---------- launch: chip e leituras ---------- */
.live-grade { display: grid; grid-template-columns: 1.15fr 1fr; gap: 36px; flex: 1; min-height: 0; }
.live-texto { display: flex; flex-direction: column; min-height: 0; }
.live-p1 { min-height: 0; display: flex; flex-direction: column; }
.live-visual { display: grid; grid-template-rows: 1.15fr 1fr; gap: 14px; min-height: 0; }
.chip-caixa, .fita-caixa { border: 1px solid var(--borda); background: var(--fundo-2); padding: 12px 14px; display: flex; flex-direction: column; min-height: 0; }
.chip-cabeca { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--texto-2); margin-bottom: 6px; }
#chip-svg, #chip2-svg { flex: 1; width: 100%; min-height: 0; }
.chip-legenda { font-size: 12px; color: var(--texto-2); margin: 6px 0 0; }
.qubit { fill: #262630; stroke: #44445a; stroke-width: .12; }
.qubit.usado { fill: var(--teal); stroke: var(--teal-claro); filter: drop-shadow(0 0 1px var(--teal-claro)); }
.qubit.usado.roda { animation: brilho .7s infinite alternate; }
@keyframes brilho { from { fill: var(--teal); } to { fill: var(--azul-claro); } }
.aresta { stroke: #30303c; stroke-width: .12; }
.aresta.usada { stroke: var(--teal-claro); stroke-width: .3; }
.leituras { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 3px; }
.leitura { display: grid; grid-template-columns: 54px 1fr 150px; align-items: center; gap: 10px; font-size: 11px; color: var(--texto-2); font-family: "IBM Plex Mono", monospace; }
.leitura .bits { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; }
.leitura .bits i { display: block; height: 9px; border: 1px solid #34343f; }
.leitura .bits i.um { background: var(--teal-claro); border-color: var(--teal-claro); }
.leitura.virou .bits i.um { background: var(--cor1); border-color: var(--cor1); }
.leitura .quem { text-align: right; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.leitura.virou .quem { color: var(--texto); }

/* ---------- coins ---------- */
.coins-vista { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.grade-moedas { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 14px; }
.moeda-card { border: 1px solid var(--borda); background: var(--fundo-2); display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 10px; min-height: 0; cursor: pointer; align-items: center; }
.moeda-card:hover { border-color: var(--teal); }
.moeda-card img { height: 100%; max-height: 150px; aspect-ratio: 1; width: auto; display: block; border: 1px solid var(--borda); }
.moeda-card .mc-nome { font-size: 17px; font-weight: 500; line-height: 1.15; }
.moeda-card .mc-ticker { color: var(--teal-claro); font-size: 13px; }
.moeda-card .mc-meta { font-size: 11px; color: var(--texto-2); margin-top: 6px; }
.moeda-card .mc-cores { display: flex; gap: 4px; margin-top: 6px; }
.vazio { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; color: var(--texto-2); font-size: 15px; text-align: center; padding: 20px; border: 1px dashed var(--borda); }
.det-grade { display: grid; grid-template-columns: minmax(260px, 38%) 1fr; gap: 28px; flex: 1; min-height: 0; }
.det-logo { min-height: 0; display: flex; align-items: flex-start; }
.det-logo img { max-height: 100%; width: auto; max-width: 100%; }
.det-dados { min-height: 0; overflow: hidden; }
.det-ca { display: flex; align-items: center; gap: 10px; font-size: 12px; border: 1px solid var(--borda); padding: 8px 12px; margin: 8px 0; word-break: break-all; }

/* ---------- chip ---------- */
.chip-grade { display: grid; grid-template-columns: 1fr 1.1fr; gap: 36px; flex: 1; min-height: 0; }
.chip-texto { display: flex; flex-direction: column; min-height: 0; }
.chip-visual { min-height: 0; display: flex; }
.chip-caixa.grande { flex: 1; }
.status { border: 1px solid var(--borda); background: var(--fundo-2); padding: 12px 18px; margin-bottom: 14px; }
.status-fase { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 500; margin-bottom: 10px; }
.luz { width: 10px; height: 10px; border-radius: 50%; background: var(--texto-2); flex: none; }
.luz.fila { background: var(--amarelo); animation: pisca 1.4s infinite; }
.luz.roda { background: var(--teal-claro); animation: pisca .6s infinite; }
.luz.ok { background: var(--verde); }
.luz.ruim { background: var(--vermelho); }
@keyframes pisca { 50% { opacity: .25; } }
.status-dados { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0; }
.status-dados dt { font-size: 11px; color: var(--texto-2); font-family: "IBM Plex Mono", monospace; }
.status-dados dd { margin: 0; font-size: 14px; font-weight: 500; }
.status-explica { font-size: 13px; color: var(--texto-2); margin: 10px 0 0; }
.placas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.placa { border: 1px solid var(--borda); padding: 8px 10px; font-size: 12px; }
.placa b { display: block; font-size: 14px; font-weight: 500; }
.placa.atual { border-color: var(--teal); }
.placa .mono { color: var(--texto-2); font-size: 11px; }
#uns-svg { width: 100%; height: 120px; display: block; }
.barra { fill: #3d3d4a; }
.barra.um { fill: var(--teal); }
.eixo-txt { fill: var(--texto-2); font-size: 11px; font-family: "IBM Plex Mono", monospace; }

/* ---------- how ---------- */
.how-grade { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 0 48px; flex: 1; min-height: 0; }
.how-passos { grid-column: 1; grid-row: 1; }
.how-dif { grid-column: 1; grid-row: 2; align-self: start; margin-top: 14px; }
.how-perg { grid-column: 2; grid-row: 1 / 3; }
.passos { margin: 0; padding-left: 22px; font-size: 15px; color: var(--texto-2); }
.passos li { margin-bottom: 8px; }
.passos b { color: var(--texto); display: block; font-size: 16px; }
.diferente { border: 1px solid var(--teal); border-left-width: 4px; background: var(--fundo-2); padding: 8px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.diferente p:first-child { grid-column: 1 / -1; }
.diferente p { margin: 0; font-size: 12px; color: var(--texto-2); }
.diferente b { color: var(--texto); display: block; font-size: 14px; }
.perguntas details { border-top: 1px solid var(--borda); padding: 6px 0; }
.perguntas details:last-child { border-bottom: 1px solid var(--borda); }
.perguntas summary { cursor: pointer; font-size: 16px; font-weight: 500; list-style: none; }
.perguntas summary::before { content: "+ "; color: var(--teal-claro); }
.perguntas details[open] summary::before { content: "– "; }
.perguntas p { margin: 6px 0 0; color: var(--texto-2); font-size: 14px; }

/* ---------- log ---------- */
.log-grade { display: grid; grid-template-columns: 1.25fr 1fr; gap: 32px; flex: 1; min-height: 0; }
.log-lista { display: flex; flex-direction: column; min-height: 0; }
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th { text-align: left; font-weight: 400; color: var(--texto-2); font-family: "IBM Plex Mono", monospace; font-size: 11px; padding: 6px 8px; border-bottom: 1px solid var(--borda); }
.tabela td { padding: 9px 8px; border-bottom: 1px solid #22222b; white-space: nowrap; }
.tabela tbody tr { cursor: pointer; }
.tabela tbody tr:hover, .tabela tbody tr.sel { background: var(--fundo-2); }
.log-detalhe { border: 1px solid var(--borda); background: var(--fundo-2); padding: 16px 18px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.det-titulo { font-size: 19px; font-weight: 500; margin: 0 0 4px; }
.det-sub { font-size: 12px; color: var(--texto-2); margin: 0 0 10px; }
#det-uns { width: 100%; height: 100px; }
.det-nota { font-size: 12px; color: var(--texto-2); margin: 8px 0 0; }
.det-moedas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.det-moedas a { border: 1px solid var(--borda); padding: 3px 8px; font-size: 12px; }
.det-moedas a:hover { border-color: var(--teal); }
.top-leituras { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.pager-controles { display: flex; justify-content: center; align-items: center; gap: 16px; padding-top: 10px; font-size: 12px; color: var(--texto-2); }
.seta { background: none; border: 1px solid var(--borda); color: var(--texto); font: inherit; padding: 4px 12px; cursor: pointer; }
.seta:disabled { opacity: .3; cursor: default; }
.ok-txt { color: var(--verde); }
.ruim-txt { color: var(--amarelo); }

/* ---------- rodapé ---------- */
.rodape { height: var(--rodape-h); display: flex; align-items: center; gap: 28px; padding: 0 24px; border-top: 1px solid var(--borda); font-size: 11px; color: var(--texto-2); }
.rodape span:last-child { margin-left: auto; }

/* ---------- celular ---------- */
@media (max-width: 860px) {
  :root { --topo-h: 88px; --rodape-h: 54px; }
  /* cabeçalho em duas linhas: marca + X em cima, CA INTEIRO embaixo (nunca cortado) */
  .topo { padding: 6px 12px; gap: 8px; flex-wrap: wrap; align-content: center; }
  .topo-dir { display: contents; }
  .x-link { order: 5; margin-left: auto; }
  .ca-pilula { order: 10; width: 100%; max-width: none; margin-top: 2px; font-size: 10px; padding: 4px 6px; gap: 6px; justify-content: center; }
  .ca-pilula .ca-texto { overflow: visible; }
  .abas { position: fixed; left: 0; right: 0; bottom: 0; height: 54px; background: var(--fundo-2); border-top: 1px solid var(--borda); z-index: 5; }
  .abas a { flex: 1; justify-content: center; padding: 0; font-size: 13px; border-bottom: none; border-top: 2px solid transparent; }
  .abas a.ativa { border-top-color: var(--teal-claro); }
  .rodape { display: none; }
  .aba { padding: 14px 0; overflow: hidden; }
  .aba > :not(.live-grade):not(.chip-grade):not(.how-grade) { margin-left: 14px; margin-right: 14px; }
  h1 { font-size: 24px; margin-bottom: 8px; }
  h2 { font-size: 20px; }
  .chamada { font-size: 13px; margin-bottom: 10px; }
  .so-celular { display: flex !important; }
  .longo { display: none; } .curto { display: inline; }
  /* launch: 3 páginas (pedido / chip / leituras) */
  .live-grade { display: grid; grid-template-columns: none; grid-template-rows: minmax(0, 1fr); grid-auto-flow: column; grid-auto-columns: 100%; gap: 0; transition: transform .35s; }
  .live-texto, .live-visual { display: contents; }
  .live-p1, .chip-caixa, .fita-caixa { margin-left: 14px; margin-right: 14px; min-height: 0; overflow: hidden; }
  .campos { grid-template-columns: 1fr 1fr; gap: 8px 10px; }
  .campos input { font-size: 14px; padding: 7px 8px; }
  .painel { padding: 10px 12px; }
  .botao { padding: 9px 14px; font-size: 13px; }
  .cert-grade { grid-template-columns: 120px 1fr; gap: 12px; }
  /* com o certificado aberto, o título e a chamada saem para o certificado caber inteiro na tela */
  .live-p1.com-cert h1, .live-p1.com-cert .chamada, .live-p1.com-cert #olho-launch { display: none; }
  .recentes, .recentes-olho, #det-chip, .lotes-mini, .lotes-olho { display: none; }
  .cert-titulo { font-size: 18px; }
  .tracos { grid-template-columns: repeat(2, auto); gap: 2px 12px; font-size: 12px; }
  .cert-linha { display: none; }
  .leitura { grid-template-columns: 40px 1fr 90px; font-size: 10px; }
  /* coins: 2 por página, empilhadas */
  .grade-moedas { grid-template-columns: 1fr; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .moeda-card img { max-height: 110px; }
  .det-grade { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
  .det-logo img { max-height: 36vh; }
  /* chip: 2 páginas */
  .chip-grade { display: grid; grid-template-columns: none; grid-template-rows: minmax(0, 1fr); grid-auto-flow: column; grid-auto-columns: 100%; gap: 0; transition: transform .35s; }
  .chip-texto, .chip-visual { margin-left: 14px; margin-right: 14px; min-height: 0; overflow: hidden; }
  .status-dados { grid-template-columns: repeat(2, 1fr); }
  .placas { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .placa { padding: 6px; font-size: 11px; }
  #uns-svg { height: 80px; }
  /* how: 2 páginas (passos / por que é diferente); as perguntas ficam só no desktop */
  .how-grade { display: grid; grid-template-columns: none; grid-template-rows: minmax(0, 1fr); grid-auto-flow: column; grid-auto-columns: 100%; gap: 0; transition: transform .35s; }
  .how-passos, .how-dif { grid-row: 1; grid-column: auto; margin: 0 14px; min-height: 0; overflow: hidden; }
  .how-perg { display: none; }
  .passos { font-size: 13px; }
  .passos b { font-size: 14px; }
  .passos li { margin-bottom: 6px; }
  .diferente { grid-template-columns: 1fr; gap: 10px; padding: 12px 14px; }
  .diferente p { font-size: 13px; }
  .diferente b { font-size: 15px; }
  .log-grade { grid-template-columns: 100%; }
  .log-detalhe { display: none; }
  .tabela th:nth-child(3), .tabela td:nth-child(3), .tabela th:nth-child(5), .tabela td:nth-child(5), .tabela th:nth-child(6), .tabela td:nth-child(6) { display: none; }
  .tabela { font-size: 12px; }
  .tabela td { padding: 8px 6px; }
}