:root {
  color-scheme: light dark;
  font-family: Inter, system-ui, sans-serif;
  color: light-dark(#182728, #eff6f3);
  background: light-dark(#f3f7f5, #172323);
  --surface: light-dark(#fff, #233131);
  --border: light-dark(#d5e1dc, #465956);
  --muted: light-dark(#4a615d, #b3c8c1);
  --accent: light-dark(#0b655b, #7ad9c6);
}

body { margin: 0; }
main { max-width: 42rem; margin: 0 auto; padding: clamp(1rem, 5vw, 3.5rem); }
header { margin-bottom: 2rem; }
h1 { margin: 0 0 .35rem; font-size: clamp(2rem, 6vw, 3rem); letter-spacing: -.05em; }
.address { margin: 0; color: var(--accent); font-family: ui-monospace, monospace; }
form, article { padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: .75rem; }
label { display: block; margin-bottom: .6rem; }
.controls { display: flex; flex-wrap: wrap; gap: .6rem; }
[hidden] { display: none; }
input, button { border: 1px solid var(--border); border-radius: .45rem; padding: .65rem .8rem; font: inherit; }
input { flex: 1 1 12rem; min-width: 0; background: transparent; }
button { cursor: pointer; background: var(--accent); color: light-dark(#fff, #172323); }
button.secondary { background: transparent; color: inherit; }
button:disabled { opacity: .65; cursor: wait; }
article { margin-bottom: .75rem; }
summary { cursor: pointer; overflow-wrap: anywhere; }
.meta, #status { color: var(--muted); font-size: .9rem; }
.meta { display: block; margin: .35rem 0; }
.otp { font-family: ui-monospace, monospace; font-size: 1.35rem; color: var(--accent); }
.body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
a { color: var(--accent); overflow-wrap: anywhere; }