[hidden]{display:none!important}
.profile-switch{display:flex;align-items:center;gap:4px;min-height:40px;max-width:180px;padding:5px 12px;border:1px solid #bdcfee;border-radius:12px;background:white;color:#255be5;font-size:15px}
#current-profile{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-screen{height:100%;min-height:0;max-width:680px;margin:auto;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:24px 32px;border:1px solid #dae3f3;border-radius:24px;background:white}
.account-screen h1{font-size:clamp(23px,3.2vw,32px)}
.account-description,.account-note{font-size:14px;color:#536885}
.account-note{line-height:1.6}
.account-form{display:grid;gap:8px}
.account-form label{font-size:17px}
.account-form input{min-width:0;width:100%;height:52px;padding:8px 14px;border:2px solid #c5d4ec;border-radius:12px;background:#f8faff;color:#172f58;font:inherit;font-size:20px}
.account-form input:focus{outline:3px solid #c6d8ff;border-color:#255be5}
.account-error{min-height:22px;color:#a04327;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.account-form .primary{margin-top:4px}
.profiles-screen{max-width:none;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto;gap:12px}
.account-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}
.account-heading .text-button{flex-shrink:0}
.profile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:14px;min-height:0}
.profile-card{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:0;min-width:0;gap:4px;padding:10px;border:2px solid #cad9f4;border-radius:20px;background:#f3f7ff;color:#172f58}
.profile-card:hover{border-color:#255be5;background:#eaf1ff}
.profile-card strong{font-size:clamp(20px,2.6vw,28px);max-width:100%;overflow-wrap:anywhere;line-height:1.3}
.profile-card>span:last-child{font-size:15px;color:#795400}
.profile-avatar{display:grid;place-items:center;border-radius:50%;width:52px;height:52px;background:#dae7ff;color:#255be5;font-size:30px}
.profile-color-1 .profile-avatar{background:#e3f6ec;color:#087356}
.profile-color-2 .profile-avatar{background:#fff0dc;color:#b35911}
.profile-color-3 .profile-avatar{background:#eee4ff;color:#7350bc}
.empty-profiles{grid-column:1/-1;grid-row:1/-1;align-self:center;text-align:center;color:#536885;font-size:22px}
.profile-navigation,.account-actions{display:flex;align-items:center;justify-content:center;gap:16px}
.profile-navigation:empty{display:none}
.account-actions .primary{min-width:240px}
.account-screen .secondary{min-height:48px;margin:0}
#sync-status:not(:empty)+.footer-motto{display:none}
.practice-open .profile-switch{display:none}
@media(max-height:650px){
 .account-screen{gap:10px;padding:16px 24px}
 .account-form{gap:4px}
 .account-form input{height:46px}
 .account-form .primary{min-height:48px;padding:10px}
 .profile-avatar{width:38px;height:38px;font-size:24px}
 .profile-card strong{font-size:21px}
 .profiles-screen .account-actions .primary{min-height:48px;padding:10px 20px}
}
@media(max-width:650px){
 .header .brand{font-size:14px;gap:3px}
 .header .brand-icon{display:none}
 .header-stats{gap:5px}
 .profile-switch{max-width:110px;padding:5px 7px;font-size:13px}
 .account-screen{padding:18px 14px;gap:12px}
 .profile-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:8px}
 .profile-avatar{width:36px;height:36px;font-size:22px}
 .profile-card strong{font-size:20px}
 .profile-card>span:last-child{font-size:13px}
 .account-actions{gap:8px}
 .account-actions .primary{min-width:0;flex:1;padding:12px}
 .account-heading h1{font-size:21px}
}
/* A software keyboard may reduce the visual viewport. Keep form controls reachable
   within their panel without making the practice page itself scroll. */
@media(max-height:450px){
 .account-screen:not(.profiles-screen){overflow-y:auto;justify-content:flex-start;overscroll-behavior:contain}
}