#app[data-screen=profile]{height:100dvh;display:grid;grid-template-rows:minmax(80px,auto) minmax(0,1fr);overflow:hidden}
#app[data-screen=profile] .service-card.wide{max-width:var(--content-width);margin-top:8px}
#app[data-screen=profile] .profile-row{padding:24px;border:1px solid var(--line);border-radius:var(--surface-radius);background:var(--paper);margin-top:12px}
#app[data-screen=profile] .profile-row:first-of-type{border-top:1px solid var(--line)}
#app[data-screen=profile] .profile-row h2{font-size:var(--text-subtitle);font-weight:550;line-height:1.5;overflow-wrap:anywhere}
#app[data-screen=profile] .profile-progress{display:flex;gap:16px;align-items:center;margin-top:16px}
#app[data-screen=profile] .profile-progress .ring-svg{width:38px;height:38px;flex:none}
#app[data-screen=profile] .profile-progress strong{display:block;font-size:var(--text-count);line-height:1.25;font-weight:550;font-variant-numeric:tabular-nums}
#app[data-screen=profile] .profile-progress small{display:block;font-size:var(--text-label);color:var(--muted);margin-top:2px}
#app[data-screen=profile] .skeleton{height:16px;background:var(--sand);border-radius:4px;margin:16px 0;max-width:85%}
#app[data-screen=profile] .skeleton.short{max-width:55%}
@media(max-width:600px){
#app[data-screen=profile]{grid-template-rows:minmax(64px,auto) minmax(0,1fr)}
#app[data-screen=profile] .service-card.wide{margin-top:0}
#app[data-screen=profile] .profile-row{padding:16px}
#app[data-screen=profile] .profile-row h2{font-size:var(--text-subtitle)}
}