* { box-sizing: border-box; }
body { font-family: Inter, system-ui, Arial, sans-serif; margin: 0; background: #0b1220; color: #e6edf3; }
.container { max-width: 1100px; margin: 0 auto; padding: 24px; }
header h1 { margin: 0 0 6px; }
.card { background: #121a2b; border: 1px solid #22304a; border-radius: 16px; padding: 16px; margin-bottom: 16px; }
.qr-wrap { display:flex; align-items:center; gap:16px; }
.qr-wrap img { width: 220px; height: 220px; background:#0e1624; border: 1px dashed #28406b; border-radius: 12px; }
.status { font-size: 14px; opacity: 0.85; }
textarea { width: 100%; background:#0e1624; color:#e6edf3; border:1px solid #22304a; border-radius:12px; padding:12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.grid { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
pre { min-height: 220px; max-height: 420px; overflow:auto; background:#0e1624; border:1px solid #22304a; border-radius:12px; padding:12px; }
.btn { background:#1f2d47; border:1px solid #2b3e63; color:#e6edf3; padding:8px 12px; border-radius:10px; cursor:pointer; }
.btn.primary { background:#2c66f5; border-color:#2c66f5; }
.btn.small { padding:6px 10px; font-size: 13px; }
.btn.danger { background:#e5534b; border-color:#e5534b; color:#fff; }
.btn.danger:disabled { opacity: .7; cursor: not-allowed; }
.flex-between { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.result h3 { margin: 0 0 8px; }
.progress-wrap { display:flex; align-items:center; gap:10px; }
.progress-bar { flex:1; height:10px; background:#0e1624; border:1px solid #22304a; border-radius:999px; overflow:hidden; }
.progress-bar #progressFill { height:100%; width:0%; background:#2c66f5; }
.progress-text { font-size:12px; opacity:0.85; min-width:110px; text-align:right; }
.hidden { display: none !important; }
.footer{ color:#7d8db3; font-size:12px; text-align:center; margin:24px 0 }

@media (max-width: 800px){ .grid { grid-template-columns: 1fr; } .qr-wrap{ flex-direction: column; align-items:flex-start;} }