/* Checklist "Gênese 3D no ar": mesma mesa escura e cobre da página "em breve". Sem estilo inline (CSP). */
:root {
  color-scheme: dark;
  --mesa: #151311;
  --mesa-2: #1d1a17;
  --linha: #3a332d;
  --texto: #f4efe9;
  --texto-suave: #c9bfb4;
  --cobre: #e0915a;
  --ok: #7fc79a;
  --trava: #f08a6c;
  --display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --corpo: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100dvh;
  background: radial-gradient(60rem 40rem at 78% 10%, rgba(224, 145, 90, 0.12), transparent 70%), var(--mesa);
  color: var(--texto);
  font: 16px/1.55 var(--corpo);
  padding: max(32px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
main { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
p { margin: 0; }
a { color: var(--cobre); }
.selo { margin: 0 0 8px; font: 500 12px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--cobre); }
h1 { margin: 0; font: 700 clamp(30px, 6vw, 48px)/1.05 var(--display); letter-spacing: -.02em; }
h2 { margin: 0; font: 600 20px/1.25 var(--display); }
button, input { font: inherit; }
:focus-visible { outline: 2px solid var(--cobre); outline-offset: 3px; }

/* Acesso: primeiro acesso e login */
.acesso { max-width: 440px; margin: 8vh auto 0; display: flex; flex-direction: column; gap: 16px; }
.sub { font-size: 15px; color: var(--texto-suave); }
.form { display: flex; flex-direction: column; gap: 14px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--texto-suave); }
.form input { min-height: 48px; padding: 0 14px; border: 1px solid var(--linha); border-radius: 12px; background: var(--mesa-2); color: var(--texto); font-size: 17px; }
.form input:focus { border-color: var(--cobre); outline: none; box-shadow: 0 0 0 3px rgba(224, 145, 90, .25); }
.form button { min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--cobre); color: #1a120c; font-weight: 700; cursor: pointer; }
.erro { padding: 10px 14px; border-radius: 10px; background: rgba(240, 138, 108, .14); color: var(--trava); font-size: 14.5px; }
.aviso { margin: 12vh auto 0; max-width: 440px; text-align: center; color: var(--texto-suave); }
.passos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--texto-suave); }
.passos b { color: var(--texto); }
.chave { display: block; margin: 8px 0; padding: 10px 12px; border: 1px dashed var(--cobre); border-radius: 10px; font: 500 16px/1.4 var(--mono); letter-spacing: .06em; color: var(--texto); word-break: break-all; user-select: all; }
.nota { font-size: 13.5px; color: var(--texto-suave); }

/* Checklist */
.topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.sair { min-height: 40px; padding: 0 16px; border: 1px solid var(--linha); border-radius: 999px; background: none; color: var(--texto-suave); font-weight: 600; cursor: pointer; }
.resumo { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; background: var(--mesa-2); border: 1px solid var(--linha); border-radius: 16px; padding: 20px; }
.pct { font: 700 56px/1 var(--display); font-variant-numeric: tabular-nums; }
.pct small { font-size: .45em; color: var(--texto-suave); margin-left: 2px; }
.resumo .sub { margin-top: 10px; }
.barra { height: 12px; border-radius: 99px; background: var(--linha); overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--cobre); }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.filtros a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--linha); border-radius: 99px; color: var(--texto); text-decoration: none; font-size: 14px; }
.filtros a[aria-current] { background: var(--texto); color: var(--mesa); border-color: var(--texto); }
.trilha { list-style: none; margin: 0; padding: 0; }
.fase { display: grid; grid-template-columns: 44px 1fr; gap: 0 16px; position: relative; }
.fase::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: var(--linha); }
.fase:last-child::before { display: none; }
.marco { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 700 17px var(--display); background: var(--mesa-2); border: 2px solid var(--linha); color: var(--texto-suave); position: relative; z-index: 1; }
.fase.andando .marco { border-color: var(--cobre); color: var(--cobre); }
.fase.completa .marco { background: var(--cobre); border-color: var(--cobre); color: var(--mesa); }
.corpo { display: flex; flex-direction: column; gap: 10px; padding-bottom: 32px; min-width: 0; }
.cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding-top: 9px; }
.conta { font: 500 13px var(--mono); color: var(--texto-suave); }
.dep { font-size: 14px; color: var(--texto-suave); }
.itens { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linha); border-radius: 12px; background: var(--mesa-2); overflow: hidden; }
.itens li { display: grid; grid-template-columns: 32px 1fr auto; gap: 4px 12px; padding: 14px 16px; border-top: 1px solid var(--linha); align-items: start; scroll-margin-top: 30vh; }
.itens li:first-child { border-top: 0; }
.itens form { margin: 0; }
.caixa { width: 28px; height: 28px; margin-top: -2px; border: 2px solid var(--texto-suave); border-radius: 8px; background: none; cursor: pointer; display: grid; place-items: center; }
.caixa[aria-pressed="true"] { background: var(--cobre); border-color: var(--cobre); }
.caixa[aria-pressed="true"]::after { content: ""; width: 7px; height: 13px; margin-top: -3px; border: solid var(--mesa); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.txt strong { font-weight: 600; }
.txt span { font-size: 14.5px; color: var(--texto-suave); }
.feito .txt strong { text-decoration: line-through; color: var(--texto-suave); }
.quando { font: 500 12px var(--mono); font-style: normal; color: var(--ok); }
.tags { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.tag { font: 500 11.5px/1 var(--mono); padding: 5px 8px; border-radius: 99px; white-space: nowrap; background: var(--linha); color: var(--texto-suave); }
.tag.pablo { background: rgba(224, 145, 90, .18); color: var(--cobre); }
.tag.trava { background: rgba(240, 138, 108, .16); color: var(--trava); }
.rodape { font-size: 13.5px; color: var(--texto-suave); border-top: 1px solid var(--linha); padding-top: 16px; }
@media (max-width: 560px) {
  .itens li { grid-template-columns: 32px 1fr; }
  .tags { grid-column: 2; flex-direction: row; flex-wrap: wrap; }
  .resumo { grid-template-columns: 1fr; gap: 12px; }
}

/* Larguras da barra: a CSP nao deixa estilo inline. */
.w0{width:0%}.w1{width:1%}.w2{width:2%}.w3{width:3%}.w4{width:4%}.w5{width:5%}.w6{width:6%}.w7{width:7%}.w8{width:8%}.w9{width:9%}.w10{width:10%}.w11{width:11%}.w12{width:12%}.w13{width:13%}.w14{width:14%}.w15{width:15%}.w16{width:16%}.w17{width:17%}.w18{width:18%}.w19{width:19%}.w20{width:20%}.w21{width:21%}.w22{width:22%}.w23{width:23%}.w24{width:24%}.w25{width:25%}.w26{width:26%}.w27{width:27%}.w28{width:28%}.w29{width:29%}.w30{width:30%}.w31{width:31%}.w32{width:32%}.w33{width:33%}.w34{width:34%}.w35{width:35%}.w36{width:36%}.w37{width:37%}.w38{width:38%}.w39{width:39%}.w40{width:40%}.w41{width:41%}.w42{width:42%}.w43{width:43%}.w44{width:44%}.w45{width:45%}.w46{width:46%}.w47{width:47%}.w48{width:48%}.w49{width:49%}.w50{width:50%}.w51{width:51%}.w52{width:52%}.w53{width:53%}.w54{width:54%}.w55{width:55%}.w56{width:56%}.w57{width:57%}.w58{width:58%}.w59{width:59%}.w60{width:60%}.w61{width:61%}.w62{width:62%}.w63{width:63%}.w64{width:64%}.w65{width:65%}.w66{width:66%}.w67{width:67%}.w68{width:68%}.w69{width:69%}.w70{width:70%}.w71{width:71%}.w72{width:72%}.w73{width:73%}.w74{width:74%}.w75{width:75%}.w76{width:76%}.w77{width:77%}.w78{width:78%}.w79{width:79%}.w80{width:80%}.w81{width:81%}.w82{width:82%}.w83{width:83%}.w84{width:84%}.w85{width:85%}.w86{width:86%}.w87{width:87%}.w88{width:88%}.w89{width:89%}.w90{width:90%}.w91{width:91%}.w92{width:92%}.w93{width:93%}.w94{width:94%}.w95{width:95%}.w96{width:96%}.w97{width:97%}.w98{width:98%}.w99{width:99%}.w100{width:100%}

/* QR do autenticador e chave manual */
.qr { width: min(260px, 70vw); aspect-ratio: 1; margin: 4px auto; border-radius: 12px; overflow: hidden; background: #fff; }
.qr svg { display: block; width: 100%; height: 100%; }
.manual { font-size: 14.5px; color: var(--texto-suave); }
.manual summary { cursor: pointer; color: var(--cobre); }
.manual p { margin: 8px 0 0; }