.hidden { display: none; }
.visible { display: block; }
body { font-family: system-ui, sans-serif; max-width: 640px; margin: 2em auto; padding: 0 1em; }
a { color: #30fd; text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { margin-bottom: 0.5em; }
.form-row { margin: 1em 0; }
.form-row label { display: block; margin-bottom: 0.25em; }
.form-row input { width: 100%; max-width: 20em; padding: 0.5em; }
.account-id-entry { display: flex; align-items: center; gap: 0.5em; }
.account-id-entry input { flex: 1; max-width: none; }
button { padding: 0.5em 1em; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.7; }
.error { color: #c00; margin: 0.5em 0; }
.status-msg { margin: 0.5em 0; }
.status-msg.available { color: #0a0; }
.status-msg.taken { color: #c00; }
.success-section { margin: 1.5em 0; padding: 1em; background: #e8f5e9; border: 1px solid #4caf50; border-radius: 0.5em; color: #2e7d32; }
.access-key-row { display: flex; align-items: center; gap: 0.5em; margin: 0.5em 0; }
.access-key-warning { margin: 0.5em 0 0 0; padding: 0.75em 1em; background: #fff3cd; border: 1px solid #ffc107; border-radius: 0.25em; font-weight: 600; font-size: 0.9em; color: #856404; }
.access-key-email-msg { margin: 0.5em 0 0 0; }
pre { overflow-x: auto; padding: 1em; background: #1e1e1e; color: #d4d4d4; border-radius: 0.25em; font-size: 0.9em; }
code { font-family: ui-monospace, monospace; }