:root{--bg: #0a0a0f;--card: #12121a;--border: #1e1e2e;--text: #e0e0e6;--dim: #6b6b80;--green: #4ade80;--red: #f87171;--yellow: #fbbf24;--blue: #60a5fa;--purple: #a78bfa}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg);color:var(--text);font-family:SF Mono,Fira Code,JetBrains Mono,Cascadia Code,monospace;min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:2rem}#app{width:100%;max-width:720px}header{text-align:center;margin-bottom:2.5rem}header h1{font-size:1.3rem;font-weight:600;letter-spacing:.05em}header h1 span{color:var(--purple)}header .badge{display:inline-block;margin-top:.4rem;font-size:.65rem;color:var(--dim);background:var(--card);border:1px solid var(--border);border-radius:100px;padding:.2rem .8rem}.stepper{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:2rem}.step{display:flex;flex-direction:column;align-items:center;gap:.4rem;position:relative}.step .dot{width:10px;height:10px;border-radius:50%;background:var(--border);border:2px solid var(--border);transition:all .3s}.step.done .dot{background:var(--green);border-color:var(--green);box-shadow:0 0 6px var(--green)}.step.active .dot{background:var(--purple);border-color:var(--purple);box-shadow:0 0 8px var(--purple);animation:pulse 2s infinite}.step.error .dot{background:var(--red);border-color:var(--red);box-shadow:0 0 8px var(--red)}.step .label{font-size:.55rem;color:var(--dim);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.step.done .label{color:var(--green)}.step.active .label{color:var(--purple)}.step-line{width:30px;height:2px;background:var(--border);margin:0 .3rem 1.2rem;transition:background .3s}.step-line.done{background:var(--green)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.phase-content{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:2rem;margin-bottom:1.5rem;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center}.phase-content .phase-title{font-size:.85rem;font-weight:500;margin-bottom:1rem}.spinner{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--purple);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:.8rem}@keyframes spin{to{transform:rotate(360deg)}}.phase-message{font-size:.75rem;color:var(--dim)}.progress-bar-wrapper{width:100%;max-width:400px;margin-bottom:1rem}.progress-bar{height:6px;background:var(--border);border-radius:3px;overflow:hidden}.progress-bar .fill{height:100%;background:var(--purple);border-radius:3px;transition:width .1s linear}.progress-info{display:flex;justify-content:space-between;font-size:.65rem;color:var(--dim);margin-top:.4rem}.scan-explain{max-width:400px;line-height:1.5;margin-bottom:1rem}.scan-blocks{font-size:.7rem;color:var(--dim);margin-top:1rem}.scan-blocks .val{font-weight:600}.dl-eta{font-size:.7rem;color:var(--dim);margin-top:.8rem;text-align:center;min-height:1em}.grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;width:100%;margin-bottom:1rem}.card{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:1.2rem}.card .card-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin-bottom:.8rem}.card .block-number{font-size:1.6rem;font-weight:700;font-variant-numeric:tabular-nums}.card .block-hex{font-size:.7rem;color:var(--dim);margin-top:.2rem}.card.official .block-number{color:var(--blue)}.card.replica .block-number{color:var(--purple)}.sync-bar{display:flex;justify-content:space-between;align-items:center;width:100%;padding:.8rem 0}.sync-indicator{display:flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:500}.sync-dot{width:8px;height:8px;border-radius:50%}.sync-dot.synced{background:var(--green);box-shadow:0 0 6px var(--green);animation:pulse 2s infinite}.sync-dot.syncing{background:var(--yellow);box-shadow:0 0 6px var(--yellow);animation:pulse 1s infinite}.sync-diff{font-size:.75rem;color:var(--dim)}.sync-diff .val{font-weight:600}.sync-diff .val.zero{color:var(--green)}.sync-diff .val.behind{color:var(--yellow)}.footer{text-align:center;font-size:.6rem;color:var(--dim);margin-top:.5rem}.error-box{color:var(--red);font-size:.8rem;text-align:center}@media(max-width:500px){body{padding:1rem}.grid{grid-template-columns:1fr}.card .block-number{font-size:1.3rem}.stepper{gap:0}.step-line{width:16px}.step .label{font-size:.45rem}.sync-bar{flex-direction:column;gap:.5rem}}
