/* Create a key page (create-key.html) */

.card, .demo-banner{max-width:480px}
.field .hint{font-size:12px;color:var(--muted);margin-top:6px}

/* "Link this key to my account" (logged-in users only). Kept outside .field so the
   checkbox doesn't get the full-width text input style. */
.checkbox-field{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:13px;color:var(--text);cursor:pointer}
.checkbox-field input{width:16px;height:16px;margin:0;accent-color:var(--primary)}
.result-note{font-size:12px;font-weight:600;color:var(--success);margin:0 0 12px}

.result{margin-top:18px;padding:14px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border);display:none}
.result.show{display:block}
.result-label{font-size:12px;font-weight:600;color:var(--muted);margin:0 0 8px}
.result-row{display:flex;align-items:center;gap:8px}
.result-row input{flex:1;padding:9px 10px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.copy-btn{padding:9px 12px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;font-family:inherit;display:inline-flex;align-items:center;gap:6px}
.copy-btn:hover{background:var(--surface-2)}
.copy-btn svg{width:14px;height:14px}
.result-label-spaced{margin-top:14px}

/* Errors come below the button here, not above a form as base.css assumes */
#create-key-output .msg{margin:18px 0 0}