:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0b1020;
  color: #e5e7eb;
}

* { box-sizing: border-box; }

body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #18233f, #0b1020 55%); }

.shell { width: min(100% - 32px, 620px); margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) 0 48px; }

header, .card-heading, .copy-row { display: flex; align-items: center; gap: 12px; }
header { margin-bottom: 24px; }
h1, h2, p { margin: 0; }
h1 { font-size: 1.45rem; }
h2 { font-size: 1.2rem; }
.eyebrow { color: #9ca3af; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }

.warning, .status, .card { border: 1px solid #293653; border-radius: 14px; }
.warning { padding: 12px 14px; color: #fde68a; background: #42200680; margin-bottom: 12px; }
.status { padding: 10px 14px; color: #bfdbfe; background: #17255480; margin-bottom: 14px; }
.status[data-state="error"] { color: #fecaca; background: #450a0a80; }
.card { padding: 18px; background: #111827e8; box-shadow: 0 18px 50px #0006; }

label { display: block; margin-bottom: 8px; color: #d1d5db; }
input { width: 100%; padding: 13px; border: 1px solid #475569; border-radius: 10px; background: #080d19; color: #fff; font: inherit; }
button { border: 0; border-radius: 10px; padding: 11px 14px; background: #2563eb; color: white; font: 600 .95rem inherit; cursor: pointer; }
button:disabled { opacity: .6; cursor: wait; }
.card > button { width: 100%; margin-top: 12px; }
.secondary { background: #334155; }
details { margin-top: 14px; color: #9ca3af; }
code { display: block; overflow-wrap: anywhere; margin-top: 8px; color: #e5e7eb; }
.card-heading { justify-content: space-between; margin-bottom: 18px; }
dl, dd { margin: 0; }
dl > div { padding: 13px 0; border-top: 1px solid #273449; }
dt { color: #9ca3af; font-size: .82rem; }
dd { margin-top: 4px; overflow-wrap: anywhere; }
.copy-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }
.copy-row dt { grid-column: 1 / -1; }
.secret { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .04em; }

@media (max-width: 440px) {
  .copy-row { grid-template-columns: 1fr 1fr; }
  .copy-row dd { grid-column: 1 / -1; }
}