/* Profile extends the supplied AFTERFRAME visual language. */
:root { --af-safe-top:0px; --af-safe-bottom:0px; --af-safe-left:0px; --af-safe-right:0px; }
body { padding-block-start:var(--af-safe-top); padding-inline-start:var(--af-safe-left); padding-inline-end:var(--af-safe-right); }
.profile-page { padding-block-start:30px; }
.profile-hero { display:flex; align-items:center; gap:24px; padding-block:16px 30px; }
.profile-avatar { flex:0 0 88px; inline-size:88px; block-size:88px; border-radius:50%; background:var(--yellow); color:var(--bg); position:relative; display:grid; place-items:center; font-size:36px; font-weight:800; overflow:hidden; }
.profile-photo { position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; z-index:1; }
.profile-identity { min-inline-size:0; }
.profile-identity h1 { margin:3px 0; font-size:34px; line-height:1.2; letter-spacing:-1px; overflow-wrap:anywhere; }
.profile-identity>p:last-child { font-size:13px; color:var(--muted); margin:6px 0 0; overflow-wrap:anywhere; }
.profile-eyebrow { color:var(--yellow); text-transform:uppercase; letter-spacing:1.8px; font-size:10px; font-weight:800; margin:0; }
.guest-notice,.account-status { display:flex; align-items:center; gap:12px; background:var(--surface); padding:14px 18px; border-radius:14px; max-inline-size:760px; }
.guest-notice>.icon { flex-shrink:0; color:var(--yellow); }
.guest-notice p,.account-status p { margin:0; font-size:12px; line-height:1.8; color:var(--muted); }
.account-status p { flex:1; }
.account-status .text-link { flex-shrink:0; min-block-size:40px; }
.status-dot { inline-size:7px; block-size:7px; border-radius:50%; background:var(--yellow); flex-shrink:0; }
.account-status.ready .status-dot { background:#96ba99; }
.account-status.error,.account-status.autherror { border:1px solid var(--yellow); flex-wrap:wrap; }
.profile-collection-title { margin-block:38px 0; }
.profile-collection-title h2 { font-size:25px; }
.profile-collection-title>span { color:var(--soft); }
.profile-tabs { overflow-x:auto; max-inline-size:100%; padding-block-end:7px; scrollbar-width:thin; }
.profile-tabs button { flex-shrink:0; white-space:nowrap; }
.like-button { display:inline-flex; align-items:center; gap:9px; min-block-size:44px; border:1px solid var(--line); border-radius:12px; padding:9px 14px; font-size:12px; margin-block:14px 0; color:var(--muted); }
.like-button .icon { inline-size:19px; block-size:19px; }
.like-button.is-liked { color:var(--yellow); background:var(--surface); }
.liked-badge { position:absolute; inset-block-start:8px; inset-inline-start:8px; background:var(--nav); color:var(--yellow); display:grid; place-items:center; inline-size:28px; block-size:28px; border-radius:8px; }
.liked-badge .icon { inline-size:16px; block-size:16px; }
.global-account-status { padding-block:10px; }
@media(max-width:600px) {
 .profile-page { padding-block-start:12px; }
 .profile-hero { gap:16px; padding-block:12px 24px; }
 .profile-avatar { flex-basis:64px; inline-size:64px; block-size:64px; font-size:27px; }
 .profile-identity h1 { font-size:25px; letter-spacing:-.6px; }
 .profile-identity>p:last-child { font-size:11px; }
 .profile-eyebrow { font-size:9px; letter-spacing:1.2px; }
 .profile-collection-title { margin-block-start:28px; }
 .profile-collection-title h2 { font-size:22px; }
 .guest-notice,.account-status { padding:12px 14px; gap:10px; }
 .guest-notice p,.account-status p { font-size:11px; }
 .profile-tabs { margin-block:17px 19px; gap:7px; }
 .profile-tabs button { font-size:11px; min-block-size:44px; }
 .bottom-nav { padding-block-end:calc(10px + max(env(safe-area-inset-bottom),var(--af-safe-bottom))); }
 .short-page { padding-block-end:calc(95px + var(--af-safe-bottom)); }
 .toast { bottom:calc(89px + var(--af-safe-bottom)); }
}