.account-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s7);max-width:var(--page-width);margin:auto;padding:var(--s7) var(--inset) var(--s8)}
.account-content{min-width:0;max-width:46ch}
.account-content h1{font-family:var(--display);font-size:var(--display-lg);line-height:var(--line-heading);font-weight:400;margin:0 0 var(--s5)}
.account-content p{margin:var(--s4) 0;color:var(--muted)}
.account-form{display:grid;gap:var(--s3);margin:var(--s6) 0 var(--s4)}
.account-form label{font-weight:600}
.account-form input{font:inherit;font-size:var(--body-size);width:100%;min-height:var(--button-height);border:var(--hairline) solid var(--rule);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);padding:var(--s3) var(--s4)}
.account-form button{margin-top:var(--s3)}
.account-mode{font:inherit;color:var(--bottle);border:0;background:none;min-height:var(--target);padding:var(--s2) 0;text-align:left;text-decoration:underline;cursor:pointer}
.account-hint,.account-google{font-size:var(--caption);line-height:var(--line-caption)}
.account-actions{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s6)}
.account-credits strong{font-size:var(--display-xl);font-weight:400;color:var(--ink)}
.account-credit-loading:not([hidden]){display:inline-block;min-width:var(--s8);padding:var(--s2) var(--s3);border-radius:var(--r-sm);background:var(--stone)}
.account-photo{margin:0;align-self:start}
.account-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.account-photo figcaption{font-size:var(--caption);color:var(--muted);margin-top:var(--s2)}
[data-account-status]{min-height:var(--s5)}
@media(min-width:1024px){.account-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-block:var(--s8)}}