.account-setup-screen{min-height:100dvh;display:grid;place-items:center;padding:28px 18px;background:radial-gradient(ellipse at top,var(--surface-accent),transparent 65%),#f8f6f1}
.account-setup-card{width:min(100%,450px);padding:30px;background:#fff;border:1px solid #efe8e0;border-radius:24px;box-shadow:0 16px 65px #725a3c12}
.account-setup-card h1{font-size:26px;margin:14px 0}.account-setup-card>.muted{font-size:13px;line-height:1.7;margin-bottom:24px}
.account-setup-card .modal-actions{flex-wrap:wrap}.account-setup-card input{font-size:16px}
.account-avatar-preview{display:flex;justify-content:center}.account-avatar-preview .avatar{width:80px;height:80px;border-radius:50%;font-size:32px}
img.avatar{object-fit:cover}.avatar-choices{border:0;padding:0;margin:0;display:flex;gap:8px;flex-wrap:wrap}.avatar-choices legend{font-size:12px;font-weight:800;margin-bottom:10px;color:#555}
.avatar-choices label{display:block;position:relative}.avatar-choices input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.avatar-choices span{display:grid;place-items:center;min-width:42px;height:42px;padding:0 7px;border:1px solid #e6e3df;border-radius:12px;font-size:20px;background:#faf8f5}.avatar-choices label:first-of-type span,.avatar-choices label:has([value=photo]) span{font-size:12px}
.avatar-choices input:checked+span{border-color:var(--action-primary);background:var(--surface-accent);box-shadow:0 0 0 1px var(--action-primary)}.avatar-choices input:focus-visible+span{outline:2px solid var(--action-primary);outline-offset:3px}
.login-method-switch{margin-top:15px;width:100%;font-size:13px}.account-setup-screen[hidden]{display:none}

/* Avatar framing: the same drag and zoom as album covers, in a round frame. */
.account-avatar-preview .avatar { overflow: hidden; }
.account-avatar-preview img.avatar { object-fit: cover; }
.avatar-crop { display: grid; justify-items: center; gap: var(--space-2); }
.avatar-crop[hidden] { display: none; }
.avatar-crop-title { margin: 0; justify-self: start; color: var(--ink-secondary); font-size: var(--text-small); font-weight: 700; }
.avatar-crop-frame {
  position: relative; width: min(100%, 240px); aspect-ratio: 1; overflow: hidden; border-radius: 50%;
  background: var(--surface-soft); box-shadow: 0 0 0 3px var(--surface-card), 0 0 0 4px var(--line-soft); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
}
.avatar-crop-frame:active { cursor: grabbing; }
.avatar-crop-frame img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-touch-callout: none; }
.avatar-crop input[type="range"] { width: min(100%, 280px); accent-color: var(--action-primary); }
.avatar-crop .form-help { margin: 0; text-align: center; }