/* fluxo */
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.fnode{position:relative;flex:1 1 120px;min-width:0;border:2px solid var(--line);border-radius:16px;padding:16px 10px;text-align:center;font-weight:800;font-size:.9rem;background:var(--card2);transition:border-color .4s,background .4s,transform .4s}
.fnode.on{border-color:var(--gold);background:var(--goldchip);transform:translateY(-3px)}
.fnode .tok{position:absolute;top:-16px;left:50%;transform:translateX(-50%) scale(0);width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FCE7A8,#C8912B);color:#3A2500;display:grid;place-items:center;font-size:.85rem;font-weight:800;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.fnode.on .tok{transform:translateX(-50%) scale(1)}
.farr{color:var(--muted);font-size:1.3rem;flex:0 0 auto}
/* compara */
.cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.ccol{border-radius:16px;padding:14px;border:2px solid var(--line);background:var(--card2)}
.ccol h4{font-size:1rem;margin-bottom:10px}
.ccol.red{border-color:color-mix(in srgb,var(--bad) 55%,transparent)} .ccol.red h4{color:var(--bad)}
.ccol.green{border-color:color-mix(in srgb,var(--ok) 55%,transparent)} .ccol.green h4{color:var(--ok)}
.ccol.blue{border-color:color-mix(in srgb,var(--blue) 55%,transparent)} .ccol.blue h4{color:var(--blue)}
.ccol.gold{border-color:color-mix(in srgb,var(--gold) 55%,transparent)} .ccol.gold h4{color:var(--gold)}
.ccol ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.ccol li{padding:7px 10px;border-radius:10px;font-size:.9rem;background:transparent;transition:background .4s,transform .4s}
.ccol li.on{background:var(--chip);transform:translateX(4px)}
/* linha */
.tl{overflow-x:auto;padding-bottom:6px}
.tlin{position:relative;display:flex;gap:0;min-width:max-content;padding-top:30px}
.tlin::before{content:"";position:absolute;left:0;right:0;top:44px;height:3px;background:var(--line)}
.tlin .bar{position:absolute;left:0;top:44px;height:3px;background:var(--gold);transition:width .6s}
.tev{position:relative;width:150px;padding:0 8px;text-align:center}
.tev .dot{width:16px;height:16px;border-radius:50%;background:var(--card2);border:3px solid var(--line);margin:6px auto 10px;transition:all .4s}
.tev.on .dot{background:var(--gold);border-color:var(--gold);transform:scale(1.25)}
.tev b{display:block;font-family:var(--f-mono);font-size:.85rem;color:var(--gold);position:absolute;top:-28px;left:0;right:0}
.tev span{font-size:.85rem;line-height:1.3;display:block;opacity:.75;transition:opacity .4s}
.tev.on span{opacity:1;font-weight:700}
/* passos */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;counter-reset:s}
.step{border:2px solid var(--line);border-radius:14px;padding:12px;background:var(--card2);font-size:.9rem;display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start;transition:all .4s}
.step i{font-style:normal;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--chip);font-weight:800;font-family:var(--f-mono);font-size:.8rem}
.step.on{border-color:var(--gold);background:var(--goldchip)}
.step.on i{background:var(--gold);color:var(--goldInk)}
.step.done i{background:var(--okchip);color:var(--ok)}
/* corrente */
.chain{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.blk{flex:1 1 110px;min-width:0;border:2px solid var(--ok);border-radius:14px;padding:12px 8px;text-align:center;background:var(--okchip);font-weight:800;font-size:.85rem;transition:all .5s}
.blk small{display:block;font-family:var(--f-mono);font-weight:500;font-size:.68rem;color:var(--muted);margin-top:4px}
.blk.bad{border-color:var(--bad);background:var(--badchip)}
.blk.grey{border-color:var(--line);background:var(--card2);opacity:.6}
.lnk{font-size:1.1rem;color:var(--ok);transition:color .5s}
.lnk.bad{color:var(--bad)}
/* camadas */
.lay{display:flex;justify-content:center}
.lay .ly{border:2px solid var(--line);border-radius:22px;padding:30px 14px 14px;position:relative;width:100%;transition:all .4s}
.lay .ly > b{position:absolute;top:8px;left:16px;font-size:.82rem}
.lay .ly.on{border-color:var(--gold);background:var(--goldchip)}
.lay .core{min-height:24px}
/* contador */
.ctr{display:grid;place-items:center;gap:6px;padding:10px}
.ctr .num{font-family:var(--f-mono);font-size:clamp(2.2rem,7vw,3.6rem);font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums}
.ctr .lbl{font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:.75rem}
.ctr .hash{font-family:var(--f-mono);font-size:.78rem;color:var(--muted);word-break:break-all;max-width:100%;text-align:center}
.ctr .hash.ok{color:var(--ok)}
/* svg diagrams */
.svgbox{width:100%;overflow-x:auto}
.svgbox svg{display:block;width:100%;height:auto;min-width:320px}
.svgbox text{font-family:var(--f-body);fill:var(--fg);font-weight:700}

/* chart */
.chart .src{font-size:.78rem;color:var(--muted);margin-top:8px}
.chart svg text{font-family:var(--f-body);fill:var(--muted);font-size:13px}
.chart svg .val{fill:var(--fg);font-weight:800}

/* diagram box */
.dia{border-radius:22px;background:var(--card);border:1px solid var(--line);padding:20px 20px 16px;min-width:0}
.dia .dh{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:14px}
.dia .dh h3{font-size:1.08rem}
.dia .dh span{font-size:.72rem;color:var(--muted);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.dcap{margin-top:12px;min-height:1.6em;font-weight:700;color:var(--fg);font-size:.95rem}
/* cofre (multisig) */
.vault{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:18px;align-items:center}
.vkeys{display:grid;gap:10px}
.vkey{display:flex;align-items:center;gap:12px;border:2px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--card2);font-weight:800;transition:all .4s}
.vkey i{font-style:normal;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--chip);font-size:1.05rem;transition:all .4s}
.vkey.on{border-color:var(--gold);background:var(--goldchip)}
.vkey.on i{background:var(--gold);color:var(--goldInk)}
.vbox{aspect-ratio:1;border-radius:22px;border:3px solid var(--line);display:grid;place-items:center;text-align:center;background:var(--card2);transition:all .5s;padding:10px}
.vbox b{font-size:2.4rem;line-height:1}
.vbox span{font-size:.78rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.vbox.open{border-color:var(--ok);background:var(--okchip);box-shadow:0 0 28px -4px color-mix(in srgb,var(--ok) 60%,transparent)}
.vbox.open span{color:var(--ok)}
/* ataque */
.atk{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.anode{flex:1 1 110px;min-width:0;border:2px solid var(--line);border-radius:14px;padding:14px 8px;text-align:center;font-weight:800;font-size:.88rem;background:var(--card2);transition:all .4s;position:relative}
.anode.hot{border-color:var(--bad);background:var(--badchip);color:var(--bad)}
.anode.cut{border-color:var(--ok);background:var(--okchip);color:var(--ok)}
.anode.dead{opacity:.35;text-decoration:line-through}
.anode .sh{position:absolute;top:-14px;left:50%;transform:translateX(-50%) scale(0);width:28px;height:28px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;font-size:.85rem;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.anode.cut .sh{transform:translateX(-50%) scale(1)}
.aarr{color:var(--muted);font-size:1.2rem}
/* tela (print com marcadores) */
.scr{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#fff;max-width:880px;margin:0 auto}
.scr img{display:block;width:100%;height:auto}
.pin{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:var(--cyan);color:#062033;display:grid;place-items:center;font-weight:900;font-size:.85rem;box-shadow:0 0 0 0 color-mix(in srgb,var(--cyan) 70%,transparent);opacity:.55;transition:opacity .3s,transform .3s}
.pin.on{opacity:1;transform:scale(1.15);animation:pulse 1.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--cyan) 70%,transparent)}100%{box-shadow:0 0 0 18px transparent}}
/* erros animados */
.errg{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.errc{border-radius:16px;border:2px solid color-mix(in srgb,var(--bad) 30%,transparent);background:var(--card);padding:14px 16px;display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;transition:all .45s}
.errc i{font-style:normal;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--badchip);color:var(--bad);font-weight:900;transition:all .45s}
.errc b{display:block;font-size:.98rem;line-height:1.35}
.errc span{display:block;color:var(--muted);font-size:.88rem;margin-top:4px}
.errc.on{border-color:var(--bad);background:var(--badchip);transform:translateY(-3px)}
.errc.on i{background:var(--bad);color:#fff;transform:scale(1.1)}
/* faça agora animado */
.todo{display:grid;gap:10px}
.todo .bar{height:10px;border-radius:99px;background:var(--card2);border:1px solid var(--line);overflow:hidden}
.todo .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ok),#7EF0B9);transition:width .6s}
.todo label{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;padding:12px 16px;border-radius:16px;background:var(--card);border:2px solid var(--line);cursor:pointer;transition:all .4s}
.todo label.hint{border-color:var(--cyan)}
.todo input{appearance:none;width:34px;height:34px;border-radius:10px;border:2px solid var(--line);margin:0;display:grid;place-items:center;cursor:pointer;background:var(--card2);transition:all .3s}
.todo input:checked{background:var(--ok);border-color:var(--ok)}
.todo input:checked::after{content:"✓";color:#fff;font-weight:900;font-size:1.1rem}
.todo b{display:block;font-size:.98rem}
.todo span{display:block;color:var(--muted);font-size:.88rem;margin-top:2px}
.todo label:has(input:checked) b{text-decoration:line-through;color:var(--muted)}
/* luz azul neon ao passar o mouse */
.neon{transition:box-shadow .3s,border-color .3s,transform .3s}
@media (hover:hover){.neon:hover{border-color:#38D6F5!important;box-shadow:0 0 0 1px #38D6F5,0 0 18px 2px rgba(56,214,245,.55),0 0 46px 6px rgba(56,214,245,.28);transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.pin.on{animation:none}}
@media (max-width:620px){.vault{grid-template-columns:1fr}.vbox{max-width:180px;margin:0 auto}}