:root {
  --bg: #f8fafc;
  --card: #ffffff;
  --addr-bg: #0f172a;
  --addr-txt: #e2e8f0;
  --addr-muted: #64748b;
  --bd: #e2e8f0;
  --txt: #0f172a;
  --muted: #64748b;
  --accent: #6366f1;
  --green: #10b981;
  --radius: 12px;
}

* { box-sizing: border-box; }

/* Prevent 300ms tap delay on mobile */
a, button, input { touch-action: manipulation; }

/* Remove iOS default input styling */
input { -webkit-appearance: none; appearance: none; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font: 15px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
}

.wrap {
  max-width: 600px;
  margin: 0 auto;
  padding: 56px 20px 80px;
}

h1 {
  margin: 0 0 32px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--txt);
}

/* Zip input */
.zipInput {
  width: 100%;
  padding: 15px 18px;
  border: 2px solid var(--bd);
  border-radius: var(--radius);
  font-size: 22px;
  letter-spacing: 0.06em;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  background: var(--card);
  color: var(--txt);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.zipInput::placeholder {
  font-family: system-ui, sans-serif;
  font-size: 15px;
  letter-spacing: 0;
  color: #cbd5e1;
}
.zipInput:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(99,102,241,0.1);
}

/* Status */
.status {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  min-height: 18px;
  letter-spacing: 0.01em;
}

/* Intro */
.intro {
  margin-top: 24px;
  padding-left: 12px;
  border-left: 2px solid var(--bd);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}

/* Result section */
.hidden { display: none !important; }

#resultWrap { margin-top: 32px; }

.blocks {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Block label */
.blockLabel {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Address display — dark terminal */
.preWrap { position: relative; }

.pre {
  margin: 0;
  padding: 16px 52px 16px 18px;
  background: var(--addr-bg);
  color: var(--addr-txt);
  border-radius: var(--radius);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-wrap;
  min-height: 56px;
}

/* Copy button */
.copyBtn {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  color: var(--addr-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.copyBtn:hover {
  background: rgba(255,255,255,0.13);
  color: var(--addr-txt);
}
.copyBtn.copied {
  color: var(--green);
  border-color: rgba(16,185,129,0.35);
  background: rgba(16,185,129,0.08);
}

/* Shared optional inputs */
.sharedOpts {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--bd);
}

/* Optional inputs */
.optRow {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.optInput {
  flex: 1;
  padding: 9px 13px;
  border: 1.5px solid var(--bd);
  border-radius: 9px;
  font-size: 13px;
  background: var(--card);
  color: var(--txt);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.optInput::placeholder { color: #cbd5e1; }
.optInput:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}
.optInput--room { flex: 0 0 130px; }

/* Note */
.note {
  margin-top: 48px;
  font-size: 12px;
  color: #94a3b8;
}
code {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  background: #f1f5f9;
  padding: 2px 5px;
  border-radius: 4px;
  color: #475569;
}

/* ---- Responsive ---- */
@media (max-width: 500px) {
  .wrap { padding: 32px 16px 60px; }

  /* iOS Safari zooms in on focus when font-size < 16px */
  .optInput { font-size: 16px; padding: 11px 13px; }

  /* Stack building / room vertically on all mobile */
  .optRow { flex-direction: column; }
  .optInput--room { flex: 1; }

  /* Larger tap target for copy button */
  .copyBtn { padding: 8px 14px; font-size: 12px; }
}

/* Footer */
.footer {
  margin-top: 48px;
  padding: 20px;
  text-align: center;
  border-top: 1px solid var(--bd);
}
.footer p {
  margin: 0;
  font-size: 11px;
  color: #94a3b8;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --card: #1e293b;
    --addr-bg: #020617;
    --bd: #334155;
    --txt: #f1f5f9;
    --muted: #94a3b8;
  }
  .zipInput { box-shadow: none; }
  .optInput::placeholder { color: #475569; }
  .zipInput::placeholder { color: #475569; }
  code { background: #1e293b; color: #94a3b8; }
}