.personal-profile{max-width:760px;margin:auto;color:#183859}.profile-onboarding{margin:clamp(24px,7vh,80px) auto;padding:36px;background:#fff;border:1px solid #dce6f4;border-radius:28px;box-shadow:0 24px 70px #173d7320}.pp-intro{padding:8px 0 24px;border-bottom:1px solid #e3ebf5}.pp-intro h1{font-size:30px;margin:16px 0 10px;letter-spacing:-.5px}.pp-intro p,.pp-avatar small{color:#60758e;line-height:1.7}.pp-avatar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:24px 0}.pp-avatar>div{width:80px;height:80px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;overflow:hidden;background:#e5efff;color:#086bdb;font-size:32px}.pp-avatar img{width:100%;height:100%;object-fit:cover}.pp-avatar label{max-width:240px;font-weight:600}.pp-avatar input{font-size:12px;max-width:100%}.pp-fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}.pp-fields label{display:grid;gap:8px}.pp-fields input,.pp-fields select{min-height:46px;border:1px solid #cddbeb;border-radius:10px;padding:10px;background:#f9fbfe;color:#183859}.pp-actions{display:flex;gap:12px;padding-top:12px}#pp-error{color:#b43139;min-height:20px}@media(max-width:600px){.profile-onboarding{margin:16px;padding:24px}.pp-fields{grid-template-columns:1fr}.pp-intro h1{font-size:26px}}

/* Profile editing belongs to the app content area, including required onboarding. */
#content>.personal-profile{max-width:none;margin:0;padding:0;border:0;box-shadow:none;background:transparent}
#content .pp-intro{padding:28px 32px;border:0;border-radius:22px;background:linear-gradient(110deg,#082c60,#087add);color:white;margin-bottom:22px}
#content .pp-intro p{color:#d1e9ff;margin-bottom:0}
#content .pp-intro .pill{color:#d1e9ff;background:transparent;padding:0}
#content #personal-profile-form{background:white;border:1px solid #dce6f4;border-radius:22px;padding:28px 32px}
#content .pp-avatar{padding:0 0 24px;border-bottom:1px solid #e3ebf5;margin-bottom:24px}
#content .pp-fields{gap:24px}
#content .pp-actions{border-top:1px solid #e3ebf5;padding-top:22px}
@media(max-width:600px){#content .pp-intro,#content #personal-profile-form{padding:22px}#content .pp-fields{grid-template-columns:1fr}}

.pp-presets{padding:0 0 24px;margin-bottom:24px;border-bottom:1px solid #e3ebf5}.pp-presets>div{display:flex;gap:22px;overflow:auto;padding:16px 2px 2px}.pp-presets button{border:0;background:none;display:grid;justify-items:center;gap:8px;min-width:86px;cursor:pointer;color:#60758e}.pp-presets button span{width:68px;height:68px;border-radius:50%;background-image:url('/profile-avatars-v1.png');background-size:300% 200%;box-shadow:0 0 0 1px #dce6f4}.pp-presets button[aria-pressed=true] span{box-shadow:0 0 0 3px #087add}.pp-presets button[aria-pressed=true]{color:#087add}.pp-presets small{font-size:12px}

.pp-presets>div{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:16px}.pp-presets button{min-width:0}@media(max-width:1000px){.pp-presets>div{grid-template-columns:repeat(6,minmax(0,1fr))}}@media(max-width:600px){.pp-presets>div{grid-template-columns:repeat(3,minmax(0,1fr))}}

.topbar .account-identity{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto;font-size:14px;color:inherit}
.account-avatar{display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;border-radius:50%;overflow:hidden;background:#2877bd;color:#fff;font-weight:600}
.account-avatar img{width:100%;height:100%;object-fit:cover}
.account-name{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:600px){.topbar .account-identity{gap:6px}.account-name{max-width:72px}.account-avatar{width:30px;height:30px}}

.default-avatar{display:block;width:100%;height:100%;border-radius:50%;background:url(/profile-avatars-v1.png) 0 0 / 300% 200% no-repeat}

/* The teacher card owns its rounded-square crop, including default avatars. */
.teacher-account .avatar{overflow:hidden}
.teacher-account .avatar img{display:block}