/* Forms shared by sign-in, profile and account management. */
.account-form{display:grid;gap:16px;max-width:420px}
.account-form label{display:grid;gap:5px;font-size:13px;font-weight:500;min-width:0}
.account-form input,.account-form select{width:100%;min-width:0;min-height:40px;padding:8px 10px;border:1px solid var(--border);border-radius:4px;background:var(--page);color:var(--text);font-size:16px;line-height:22px}
.account-form input[type=checkbox]{width:17px;min-height:17px;margin:0;accent-color:var(--focus)}
.account-form label.checkbox-label{display:flex;align-items:center;gap:9px}
.account-form button{font-size:13px;min-height:34px;justify-self:start;padding:5px 12px}
.account-form .primary-button{background:var(--focus);border-color:var(--focus);color:var(--page);font-weight:600}
.account-form .primary-button:hover{filter:brightness(.95)}
.account-error{font-size:13px;color:var(--error);margin:0;overflow-wrap:anywhere}
.account-note{font-size:12px;color:var(--muted);margin:0}
.password-field{position:relative;display:flex;min-width:0}
.password-field input{padding-right:44px}
.account-form .password-toggle{position:absolute;right:0;top:0;bottom:0;width:40px;min-height:40px;padding:10px;border:0;background:transparent;display:grid;place-items:center}
.password-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.account-section{margin-top:28px;padding-top:22px;border-top:1px solid var(--separator)}
.account-section h2{font-size:16px;line-height:1.4;margin:0 0 18px;font-weight:600}
.settings-profile{margin-top:24px}
.settings-heading{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-bottom:16px}
.settings-heading h2{margin:0}
.settings-heading button,.account-logout{font-size:12px;min-height:30px;padding:4px 10px}
.user-list{display:grid;gap:0;margin:0;padding:0;list-style:none}
.user-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--separator);min-width:0}
.user-row-info{flex:1;min-width:0;line-height:1.4}
.user-row-info strong{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.user-row-info p{font-size:12px;color:var(--muted);margin:3px 0 0;overflow-wrap:anywhere}
.user-row button{font-size:12px;min-height:30px;padding:4px 9px}
.user-dialog{width:min(440px,calc(100vw - 28px));padding:22px;max-height:calc(100dvh - 32px);overflow:auto;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text)}
.user-dialog::backdrop{background:#0006}
.user-dialog h2{font-size:18px;margin:0 0 20px}
.user-dialog .account-form{max-width:none}
.user-dialog-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
.user-secondary-actions{display:flex;flex-wrap:wrap;gap:6px;padding-top:14px;border-top:1px solid var(--separator)}
.user-secondary-actions .danger-button{color:var(--error);background:transparent}
.login-body{min-height:100dvh;display:grid;place-items:center;padding:32px 24px}
.login-content{width:100%;max-width:320px;margin:0 auto}
.login-theme{position:absolute;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}
.login-brand{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:28px}
.login-house{display:block;flex:none;width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.login-content h1{font-size:24px;margin:0;line-height:32px}
.login-divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;margin:22px 0}
.login-divider::before,.login-divider::after{content:'';height:1px;background:var(--separator);flex:1}
.login-content .account-form>[type=submit]{width:100%;min-height:40px;justify-self:stretch}

/* Browser Games setup-form rhythm: a fixed label column and shared input edge. */
.account-form{gap:12px}
.account-field{min-width:0}
.account-field>label{display:block;margin:0 0 3px;font-size:13px;font-weight:500;line-height:20px}
.account-control{display:grid;gap:4px;min-width:0}
.account-control input[readonly]{color:var(--muted);background:var(--hover)}
.account-control input[aria-invalid=true]{border-color:var(--error)}
.account-form.aligned-form{--account-label-width:160px;--account-field-gap:20px;max-width:560px}
.aligned-form>.account-field{display:grid;grid-template-columns:var(--account-label-width) minmax(0,1fr);column-gap:var(--account-field-gap);align-items:start}
.aligned-form>.account-field>label{margin:0;padding-top:10px}
.aligned-form>button,.aligned-form>.account-error{margin-left:calc(var(--account-label-width) + var(--account-field-gap))}
.account-section{margin-top:24px;padding-top:20px}
.account-section h2{margin-bottom:14px}
.account-information{margin-top:20px;padding-top:0;border-top:0}
.settings-heading .primary-button{background:var(--focus);border-color:var(--focus);color:var(--page);font-weight:600}
.settings-heading .primary-button:hover{filter:brightness(.95)}
.user-row-info .user-signin-status{color:var(--muted)}
@media(max-width:700px){
  .account-form{gap:10px}
  .aligned-form>.account-field{display:block}
  .aligned-form>.account-field>label{padding:0;margin-bottom:3px}
  .aligned-form>button,.aligned-form>.account-error{margin-left:0}
  .account-section{margin-top:22px;padding-top:18px}
  .account-information{margin-top:16px;padding-top:0}
  .account-section h2{margin-bottom:12px}
}
.account-control .account-note.account-error{color:var(--error)}

/* Account actions share the right edge of their fields. */
.account-form.aligned-form>button{justify-self:end;margin-left:0}
.user-dialog-actions{align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.user-dialog-primary-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.account-form .user-more-actions{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;font-size:12px;white-space:nowrap}
.user-more-actions svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.account-form label.checkbox-label{min-height:32px;line-height:20px;gap:10px;cursor:pointer}
.account-form input[type=checkbox]{appearance:none;flex:0 0 18px;width:18px;height:18px;min-height:18px;margin:0;padding:0;border:1px solid var(--hint);border-radius:4px;background:var(--page);display:grid;place-content:center;cursor:pointer;transition:background-color 150ms,border-color 150ms}
.account-form input[type=checkbox]::after{content:"";width:5px;height:9px;border:solid var(--page);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg);opacity:0}
.account-form input[type=checkbox]:checked{background:var(--focus);border-color:var(--focus)}
.account-form input[type=checkbox]:checked::after{opacity:1}
@media(max-width:380px){.user-dialog{padding:18px}.user-dialog-actions{gap:8px}.user-dialog-primary-actions{gap:6px}.user-dialog-actions button{padding-inline:9px}}
@media(prefers-reduced-motion:reduce){.account-form input[type=checkbox]{transition:none}}

/* Compact tools launcher; user lists and editing live in the same dialog. */
.admin-tools{max-width:560px}
.user-list-toolbar{display:flex;justify-content:flex-end;margin-bottom:4px}
.user-list-toolbar>button{font-size:13px;min-height:32px;padding:4px 10px;font-weight:600}
.user-dialog .dialog-pages-heading h2{margin:0}
.user-dialog .checkbox-row{display:flex;align-items:center;gap:10px;min-height:32px}
.account-form .checkbox-row label.checkbox-label{display:inline;min-height:0;line-height:20px;cursor:default}
.account-form .checkbox-row input{cursor:pointer}
@media(min-width:701px){
  .password-length-hint[data-visited=false]{display:none}
}