:root{
  --bg:#f4f7fb;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#2563eb;
  --error:#ef4444;
  --ok:#16a34a;
  --pending:#94a3b8;
  --active:#3b82f6;
}

*{box-sizing:border-box;}
body{
  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  background:var(--bg);
  margin:0;
  padding:20px;
}

.wrap{max-width:900px; margin:0 auto;}

.card{
  background:var(--card);
  border-radius:12px;
  padding:20px;
  box-shadow:0 6px 18px rgba(15,23,42,0.06);
  margin-bottom:16px;
}

.title{margin:0 0 8px 0; font-size:22px;}

.subtitle{
  color:var(--muted);
  font-size:13px;
  margin:0 0 15px 0;
}

.guide-container{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:15px;
  padding:12px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:8px;
}

.step-tag{
  padding:6px 10px;
  border-radius:6px;
  font-size:12px;
  font-weight:600;
  border:1px solid #cbd5e1;
  display:flex;
  align-items:center;
  gap:6px;
}

.step-pending{background:#f1f5f9; color:var(--pending);}
.step-active{background:#dbeafe; color:var(--active); border-color:var(--active); box-shadow:0 0 8px rgba(59,130,246,0.2);}
.step-done{background:#d1fae5; color:var(--ok); border-color:var(--ok);}

.bit-remind{
  font-family: monospace;
  font-size:10px;
  opacity:0.8;
  background: rgba(0,0,0,0.05);
  padding:1px 3px;
  border-radius:3px;
}

textarea{
  width:100%;
  min-height:80px;
  font-family:monospace;
  font-size:16px;
  padding:12px;
  border-radius:8px;
  border:2px solid #e6e9ee;
  resize:vertical;
  outline:none;
  letter-spacing: 2px;
}

textarea:focus{border-color:var(--active);}

.row{display:flex; gap:10px; flex-wrap:wrap; margin-top:15px; align-items:center;}
button{
  background:var(--accent);
  color:white;
  border:none;
  padding:8px 16px;
  border-radius:8px;
  cursor:pointer;
  font-weight:bold;
}

button.secondary{background:#e6eefc; color:var(--accent); border:1px solid rgba(37,99,235,0.12);}

.status{margin-top:20px; font-weight:bold; color:var(--accent);}

.copy-note{font-size:12px; color:var(--accent);}

.bits-display{
  background:#0b1220;
  color:#e6f0ff;
  padding:12px;
  border-radius:8px;
  font-family:monospace;
  font-size:14px;
  line-height:1.6;
  margin-top:15px;
  word-break: break-word;
}

.bits-display .bad{background:rgba(239,68,68,0.4); color:var(--error); font-weight:bold; border-radius:2px; padding:0 2px;}
.bits-display .ok-parity{color:var(--ok); opacity:0.5; font-weight:bold;}

.result-item{
  padding:10px 12px;
  border-radius:8px;
  background:#f8fbff;
  margin-bottom:8px;
  border:1px solid #e6f0ff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.mono{font-family:monospace; font-weight:bold; color:#0f172a;}
.wait{color:#cbd5e1;}

/* screen-reader only */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media (max-width: 480px) {
  body{padding:12px;}
  .card{padding:14px;}
  button{padding:8px 12px;}
  textarea{font-size:15px; letter-spacing: 1px;}
}