body > header #account { display:flex; align-items:center; gap:10px; max-width:320px; flex-wrap:wrap; }
.account-name { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body #app > .account-panel { width:min(100%,480px); margin:28px auto; padding:28px 34px; }
.account-logo { display:block; width:120px; height:80px; object-fit:contain; margin:0 auto 16px; }
.account-panel h1 { font-size:38px; line-height:1.1; margin:8px 0 12px; }
.account-panel > .eyebrow, .account-panel > h1, .account-panel > p { text-align:center; }
.account-panel > p { line-height:1.5; }
.account-panel form { display:grid; gap:16px; margin-top:18px; }
.account-panel form > label:not(.password-toggle) { display:grid; gap:7px; font-size:17px; margin:0; }
.account-panel form input:not([type=checkbox]) { width:100%; min-height:46px; font:16px system-ui,sans-serif; padding:11px 13px; margin:0; }
.account-panel .password-toggle { display:flex; align-items:center; gap:9px; font-size:14px; cursor:pointer; margin:0; }
.account-panel .password-toggle input { width:18px; height:18px; margin:0; }
.account-panel .account-help { font-size:15px; line-height:1.5; margin:0; }
.account-panel #google-availability { margin-top:10px; }
.account-panel .account-submit { width:100%; }
.account-panel .google-login { display:flex; justify-content:center; align-items:center; gap:12px; width:100%; margin-top:0; font:500 15px system-ui,sans-serif; }
.account-panel .google-letter { font:bold 21px system-ui,sans-serif; }
.account-panel .google-login.unavailable { opacity:.6; cursor:not-allowed; box-shadow:none; transform:none; }
.account-divider { display:flex; align-items:center; gap:12px; margin:20px 0; font-size:15px; opacity:.8; }
.account-divider::before,.account-divider::after { content:''; height:1px; flex:1; background:currentColor; opacity:.25; }
body .account-panel .account-link { display:inline; background:none; border:0; box-shadow:none; min-height:0; padding:4px; color:inherit; font:inherit; text-decoration:underline; }
.account-alternate { margin:24px 0 12px; font-size:14px; }
.account-back { display:block; text-align:center; font-size:15px; color:inherit; }
.account-panel #account-error { margin:0; font-size:14px; line-height:1.5; }
@media(max-width:760px) { body > header #account { max-width:100%; gap:7px; } body #app > .account-panel { padding:24px; margin:10px auto; } }
@media(max-width:420px) { body > header #account { margin-left:auto; } .account-name { max-width:100px; } }

/* Curated character profiles */
.account-name{display:inline-flex;align-items:center;gap:.6rem}.account-avatar{width:36px;height:36px;object-fit:cover;border-radius:10px;flex-shrink:0}body #app > .account-panel:has(.avatar-picker){width:min(100%,680px);max-width:680px}.profile-heading{display:flex;gap:1.25rem;align-items:center;text-align:left;margin-bottom:1.5rem}.profile-heading h1{font-size:clamp(1.6rem,4vw,2.4rem);overflow-wrap:anywhere}.profile-heading p{margin:.35rem 0}.profile-avatar{width:96px;height:96px;border-radius:22px;object-fit:cover;flex-shrink:0}.avatar-picker{border:0;padding:0;margin:1.5rem 0;text-align:left;min-width:0}.avatar-picker legend{font-size:1.1rem;font-weight:700;margin-bottom:.8rem}.avatar-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}.avatar-option{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:.4rem;cursor:pointer;padding:.5rem;border:2px solid transparent;border-radius:18px;margin:0!important;min-width:0;background:color-mix(in srgb,var(--ink,#271d42) 4%,transparent)}.account-panel .avatar-option input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;min-height:0;padding:0;clip-path:inset(50%)}.avatar-option img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:12px;image-rendering:auto}.avatar-option:has(input:checked){border-color:#bc8b24;background:color-mix(in srgb,#e6b848 15%,transparent)}.avatar-option:has(input:focus-visible){outline:3px solid #8c65cf;outline-offset:3px}.profile-actions{display:flex;gap:.75rem;flex-wrap:wrap}.profile-panel #profile-status{min-height:1.5em;margin-bottom:0}@media(max-width:480px){.avatar-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem}.avatar-option{padding:.3rem}.profile-heading{align-items:flex-start;gap:.8rem}.profile-avatar{width:72px;height:72px}}

.byline:has(.byline-avatar){display:flex;align-items:center;gap:.5rem}.byline-avatar{width:28px;height:28px;border-radius:8px;object-fit:cover;flex-shrink:0}

.account-name{justify-content:flex-start}.account-name>span{overflow:hidden;text-overflow:ellipsis;min-width:0}@media(max-width:420px){body #account .account-name{width:48px;max-width:48px;padding:5px;justify-content:center}body #account .account-name>span{display:none}}

.account-panel .account-requirement{font-size:17px;line-height:1.55}.account-panel .account-return{padding:12px 16px;margin:16px 0;border-left:3px solid var(--gold,#d6b760);border-radius:8px;background:color-mix(in srgb,var(--gold,#d6b760) 12%,transparent);font-size:16px;line-height:1.5}