/* account forms and the first-run setup wizard */

.acct-note { color:var(--text-muted); font-size:12px; margin-bottom:12px; }
.acct-field { display:block; width:100%; height:40px; padding:0 14px; margin-bottom:8px; border:1px solid var(--border-subtle); border-radius:11px; outline:none; background:var(--surface-3); color:var(--text-primary); font:inherit; font-size:13px; text-transform:lowercase; }
.acct-field:focus { border-color:var(--border-faint); box-shadow:0 0 0 3px var(--accent-soft); }
textarea.acct-field { height:84px; padding:10px 14px; resize:none; line-height:1.5; }
.acct-actions { display:flex; gap:8px; margin-top:4px; }
.acct-card { width:min(320px,100%); }
.acct-card .acct-actions .btn { width:100%; justify-content:center; }
.acct-switch { display:block; margin:14px auto 0; padding:4px 8px; border:0; background:none; color:var(--text-muted); font-size:12px; cursor:pointer; transition:color .12s; }
.acct-switch:hover { color:var(--text-white); }
.acct-switch:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
#account-body.acct-centered { flex:1; display:flex; align-items:center; justify-content:center; min-height:320px; }
.settings-pane[data-settings-pane="account"]:not(.hidden) { display:flex; flex-direction:column; min-height:100%; }
.wizard-card { width:min(540px,100%); max-height:100%; display:flex; flex-direction:column; gap:14px; padding:30px; overflow:auto; background:var(--surface-1); border:1px solid var(--border-faint); border-radius:22px; box-shadow:0 30px 90px rgba(0,0,0,.5); }
.wizard-card h2 { font-size:20px; font-weight:500; color:var(--text-white); }
.wizard-sub { color:var(--text-muted); font-size:13px; margin-top:-8px; }
.wizard-dots { display:flex; gap:6px; }
.wizard-dot { width:22px; height:3px; border-radius:2px; background:var(--border-subtle); }
.wizard-dot.on { background:var(--accent); }
.wizard-body { min-height:200px; display:flex; flex-direction:column; justify-content:center; }
.wizard-body .theme-list { display:flex; flex-wrap:wrap; gap:8px; }
.wizard-bgs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-height:260px; overflow:auto; }
.wizard-bg { position:relative; aspect-ratio:16/10; border-radius:12px; border:1px solid var(--border-subtle); background-color:var(--surface-4); background-size:cover; background-position:center; color:var(--text-white); font-size:12px; display:flex; align-items:flex-end; padding:8px; text-align:left; }
.wizard-bg.active { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
.wizard-bg span { position:relative; padding:2px 7px; border-radius:7px; background:rgba(0,0,0,.55); }
.wizard-bg svg { position:absolute; inset:0; width:100%; height:100%; color:var(--accent); }
.wizard-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:6px; }
.wizard-actions .grow { margin-right:auto; }
.acct-msg { min-height:16px; margin-top:10px; color:var(--text-muted); font-size:12px; }
.acct-avatar-row { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.acct-avatar { width:64px; height:64px; flex:0 0 64px; display:flex; align-items:center; justify-content:center; border-radius:50%; overflow:hidden; background:var(--surface-4); border:1px solid var(--border-subtle); color:var(--text-white); font-size:24px; }
.acct-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.acct-avatar-actions { display:flex; gap:8px; flex-wrap:wrap; }
.acct-legal { margin-top:10px; text-align:center; color:var(--text-muted); font-size:11px; } .acct-legal a { color:inherit; text-decoration:underline; } .acct-legal a:hover { color:var(--text-white); }