/* QUBIT (ex-Q-DAY) — linguagem visual: IBM Carbon (Plex fina, blocos chapados, borda 1px),
   fundo preto com degrade roxo do painel do IBM Quantum, etiquetas mono entre colchetes. */
:root {
  --fundo: #0b0b0f;
  --fundo-2: #16161d;
  --borda: #393945;
  --texto: #f4f4f4;
  --texto-2: #a8a8b3;
  --azul: #4589ff;
  --azul-claro: #78a9ff;
  --roxo: #be95ff;
  --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; }

/* ---------- 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, #1b0f33 0%, #0b0b0f 55%);
}
.marca { font-size: 20px; font-weight: 600; letter-spacing: .04em; }
.marca-q { color: var(--roxo); }
.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(--azul); }
.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: 48vw;
}
.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: 28px 40px; }
.aba.ativa { display: flex; flex-direction: column; }
.so-celular { display: none !important; }
.olho { color: var(--roxo); font-size: 12px; letter-spacing: .02em; margin: 0 0 10px; }
h1 { font-size: clamp(32px, 3.6vw, 54px); font-weight: 300; line-height: 1.08; margin: 0 0 18px; letter-spacing: -.01em; }
h2 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 300; line-height: 1.12; margin: 0 0 14px; }
.chamada { font-size: 16px; color: var(--texto-2); max-width: 60ch; margin: 0 0 14px; }

/* ---------- live ---------- */
.live-grade { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; flex: 1; min-height: 0; }
.live-texto { display: flex; flex-direction: column; min-height: 0; }
.status { border: 1px solid var(--borda); background: var(--fundo-2); padding: 12px 18px; margin-bottom: 12px; }
.status-fase { display: flex; align-items: center; gap: 10px; font-size: 18px; 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(--azul); 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: 15px; font-weight: 500; }
.status-explica { font-size: 14px; color: var(--texto-2); margin: 10px 0 0; }
.premio { border-top: 1px solid var(--borda); margin-top: 8px; padding-top: 8px; }
.premio-topo { display: flex; align-items: baseline; gap: 12px; }
.premio-valor { font-size: 22px; font-weight: 300; color: var(--amarelo); white-space: nowrap; }
.premio-txt { font-size: 13px; color: var(--texto-2); }
.premio-chave { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--texto); margin-top: 6px; word-break: break-all; }
.premio-chave .ca-copiar { border-left: 1px solid var(--borda); padding-left: 8px; color: var(--azul-claro); cursor: pointer; white-space: nowrap; flex: none; }
.escada { margin-top: 6px; }
.recentes-olho { margin-top: 10px; }
.recentes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.recente { border: 1px solid var(--borda); padding: 6px 10px; font-size: 12px; }
.recente .r1 { font-weight: 500; }
.recente .r2 { color: var(--texto-2); font-size: 12px; }
#escada-svg { width: 100%; height: 70px; display: block; }
.escada-legenda { font-size: 14px; color: var(--texto-2); margin: 6px 0 0; }
.live-visual { display: grid; grid-template-rows: 1.35fr 1fr; gap: 16px; min-height: 0; }
.chip-caixa, .hist-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 { flex: 1; width: 100%; min-height: 0; }
#hist-svg { flex: 1; width: 100%; min-height: 0; }
.chip-legenda { font-size: 12px; color: var(--texto-2); margin: 6px 0 0; }
.qubit { fill: #2a2a35; stroke: #4a4a58; stroke-width: .12; }
.qubit.usado { fill: var(--azul); stroke: var(--azul-claro); filter: drop-shadow(0 0 1px var(--azul-claro)); }
.qubit.usado.roda { animation: brilho .7s infinite alternate; }
@keyframes brilho { from { fill: var(--azul); } to { fill: var(--roxo); } }
.aresta { stroke: #34343f; stroke-width: .12; }
.aresta.usada { stroke: var(--azul-claro); stroke-width: .25; }
.barra { fill: #3d3d4a; }
.barra.vence { fill: var(--azul); }
.escada-linha { stroke: var(--borda); stroke-width: 2; }
.escada-tick { stroke: var(--texto-2); stroke-width: 1; }
.escada-txt { fill: var(--texto-2); font-size: 11px; font-family: "IBM Plex Mono", monospace; }
.escada-txt.forte { fill: var(--texto); }
.escada-nosso { fill: var(--verde); }
.escada-mundo { fill: var(--roxo); }
.escada-btc { fill: var(--amarelo); }

/* ---------- targets ---------- */
.secao-cabeca { max-width: 980px; }
.secao-cabeca.compacta { margin-bottom: 8px; }
.pager { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.pager-janela { flex: 1; overflow: hidden; min-height: 0; }
.pager-trilho { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; height: 100%; transition: transform .35s; }
.pagina-alvos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; height: 100%; }
.alvo { border: 1px solid var(--borda); background: var(--fundo-2); padding: 18px; display: flex; flex-direction: column; min-height: 0; }
.alvo h3 { margin: 0 0 2px; font-size: 24px; font-weight: 500; }
.alvo .alvo-sub { font-size: 12px; color: var(--texto-2); margin: 0 0 12px; }
.alvo p { font-size: 14px; color: var(--texto-2); margin: 0 0 10px; }
.alvo .exposto { font-size: 28px; font-weight: 300; margin: 4px 0 0; color: var(--texto); }
.alvo .exposto small { display: block; font-size: 12px; color: var(--texto-2); font-weight: 300; }
.alvo .degraus { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: auto; margin-bottom: 12px; }
.degrau { border: 1px solid var(--borda); padding: 6px 4px; text-align: center; font-size: 11px; font-family: "IBM Plex Mono", monospace; color: var(--texto-2); }
.degrau b { display: block; font-size: 16px; font-weight: 500; color: var(--texto); }
.degrau.ok { border-color: var(--verde); color: var(--verde); }
.degrau.ok b { color: var(--verde); }
.degrau.ruim { border-color: var(--amarelo); color: var(--amarelo); }
.alvo .alvo-fatos { font-size: 13px; color: var(--texto-2); margin: 0 0 8px; }
.alvo .alvo-status { margin-top: 0; border-top: 1px solid var(--borda); padding-top: 10px; font-size: 13px; }
.alvo .alvo-status span { display: block; }
.ok-txt { color: var(--verde); }
.ruim-txt { color: var(--amarelo); }
.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; }
.pager-controles.oculto { visibility: hidden; }

/* ---------- how ---------- */
.how-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; flex: 1; min-height: 0; }
.passos { margin: 0; padding-left: 22px; font-size: 16px; color: var(--texto-2); }
.passos li { margin-bottom: 14px; }
.passos b { color: var(--texto); display: block; font-size: 17px; }
.perguntas details { border-top: 1px solid var(--borda); padding: 10px 0; }
.perguntas details:last-child { border-bottom: 1px solid var(--borda); }
.perguntas summary { cursor: pointer; font-size: 17px; font-weight: 500; list-style: none; }
.perguntas summary::before { content: "+ "; color: var(--azul); }
.perguntas details[open] summary::before { content: "– "; }
.perguntas p { margin: 8px 0 0; color: var(--texto-2); font-size: 15px; }

/* ---------- log ---------- */
.log-grade { display: grid; grid-template-columns: 1.3fr 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: 14px; }
.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: 20px; font-weight: 500; margin: 0 0 4px; }
.det-sub { font-size: 13px; color: var(--texto-2); margin: 0 0 10px; }
.det-circuito { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #0e0e13; border: 1px solid var(--borda); }
.det-circuito img { max-width: 100%; max-height: 100%; }
#det-hist { width: 100%; height: 110px; margin-top: 10px; }
.det-nota { font-size: 12px; color: var(--texto-2); margin: 8px 0 0; }

/* ---------- rodape ---------- */
.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: 48px; --rodape-h: 54px; }
  .topo { padding: 0 12px; gap: 10px; }
  .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(--azul); }
  .rodape { display: none; }
  .ca-pilula { max-width: 56vw; font-size: 11px; }
  main { height: calc(100% - var(--topo-h) - var(--rodape-h)); }
  .aba { padding: 16px; }
  h1 { font-size: 26px; margin-bottom: 10px; }
  h2 { font-size: 22px; }
  .chamada { font-size: 14px; margin-bottom: 12px; }
  /* live vira 4 paginas: intro+status / escada+recentes / chip / resposta */
  .so-celular { display: flex !important; }
  /* 2 paginas: [intro+status, escada] e [chip, resposta] */
  .live-grade { display: grid; grid-template-columns: none; grid-template-rows: minmax(0, 1fr); grid-auto-flow: column; grid-auto-columns: 100%; gap: 0; overflow: hidden; transition: transform .35s; }
  .live-texto, .live-visual { display: contents; }
  .live-p1, .escada, .chip-caixa, .hist-caixa { min-height: 0; overflow: hidden; }
  .escada { margin-top: 0; }
  .recentes { grid-template-columns: 1fr; }
  .status-dados { grid-template-columns: repeat(2, 1fr); }
  .status-fase { font-size: 16px; }
  .premio-valor { font-size: 20px; }
  .premio-txt { font-size: 12px; }
  .premio-chave { font-size: 11px; }
  .escada-legenda { font-size: 13px; }
  .live-p1 h1 { font-size: 24px; }
  .pagina-alvos { grid-template-columns: 1fr; }
  .pagina-alvos .alvo:not(:first-child) { display: none; }
  .how-grade { display: block; overflow: hidden; }
  .how-grade > div:last-child { display: none; }
  .passos { font-size: 14px; }
  .passos b { font-size: 15px; }
  .log-grade { grid-template-columns: 100%; }
  .log-detalhe { display: none; }
  .tabela th:nth-child(4), .tabela td:nth-child(4), .tabela th:nth-child(6), .tabela td:nth-child(6), .tabela th:nth-child(7), .tabela td:nth-child(7) { display: none; }
  .tabela { font-size: 13px; }
  .tabela td { padding: 9px 6px; }
}