/* Shared profile viewer: banner, overlapping identity, actions, information. */
html body #profileOverlay:not(.hidden){padding:24px!important;align-items:center!important;justify-content:center!important;background:rgba(0,0,0,.64)!important;backdrop-filter:blur(12px)!important}
html body #profileOverlay #profileCard{position:relative!important;display:block!important;width:min(440px,100%)!important;max-width:440px!important;max-height:calc(100dvh - 48px)!important;overflow:auto!important;padding:0!important;border:1px solid rgba(255,255,255,.15)!important;border-radius:24px!important;background:var(--bg-2,#232428)!important;box-shadow:0 24px 90px #0007!important;color:var(--text,#f2f3f5)!important}
html body #profileOverlay #profileCard .profile-banner{height:156px!important;min-height:156px!important;margin:0!important;border-radius:0!important;background-size:cover!important;background-position:center!important}
html body #profileOverlay #profileCard .profile-gradient-body{display:flex!important;flex-direction:column!important;gap:14px!important;padding:0 20px 22px!important;background:var(--bg-2,#232428)!important}
html body #profileOverlay #profileCard .profile-head-row{position:relative!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:10px!important;margin:0!important;padding:0!important;order:0}
html body #profileOverlay #profileCard .profile-avatar{position:relative!important;inset:auto!important;flex:none!important;width:96px!important;height:96px!important;margin:-48px 0 0!important;border:6px solid var(--bg-2,#232428)!important;border-radius:50%!important;box-sizing:border-box!important;z-index:2!important}
html body #profileOverlay #profileCard .profile-title{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:6px 8px!important;width:100%!important;min-width:0!important;padding:0!important;margin:0!important}
html body #profileOverlay #profileCard .profile-title h2{flex:1 0 100%!important;margin:0!important;font-size:25px!important;line-height:1.2!important;letter-spacing:-.03em!important;overflow-wrap:anywhere!important}
html body #profileOverlay #profileCard .profile-title .tag{font-size:14px!important;color:var(--muted,#b5bac1)!important;overflow-wrap:anywhere!important}
html body #profileOverlay #profileCard .profile-badges{display:flex!important;position:static!important;flex-wrap:wrap!important;gap:5px!important;width:auto!important;max-width:100%!important;margin:4px 0!important;padding:5px 7px!important;border:1px solid var(--line,#ffffff18)!important;border-radius:9px!important;background:var(--bg-3,#1e1f22)!important}
html body #profileOverlay #profileCard .profile-badge{width:23px!important;height:23px!important;min-width:23px!important;border:0!important;border-radius:4px!important;background:transparent!important;padding:1px!important}
html body #profileOverlay #profileCard .profile-actions{order:1!important;display:flex!important;flex-wrap:wrap!important;gap:8px!important;margin:0!important;padding:0!important;border:0!important}
html body #profileOverlay #profileCard .profile-actions .btn{flex:1 1 auto!important;min-height:40px!important;border-radius:10px!important;padding:9px 12px!important;font-size:12px!important;white-space:normal!important}
html body #profileOverlay #profileCard .profile-section{order:2!important;display:block!important;margin:0!important;padding:16px!important;border:1px solid var(--line,#ffffff12)!important;border-radius:14px!important;background:var(--bg-3,#1e1f22)!important}
html body #profileOverlay #profileCard .profile-section h4{margin:0 0 9px!important;font-size:11px!important;font-weight:800!important;text-transform:uppercase!important;letter-spacing:.04em!important}
html body #profileOverlay #profileCard .profile-section p{margin:0!important;font-size:14px!important;line-height:1.5!important;overflow-wrap:anywhere!important}
html body #profileOverlay #profileCard .profile-identity-warning{order:1!important}
@media(max-width:600px){html body #profileOverlay:not(.hidden){padding:12px 10px calc(12px + env(safe-area-inset-bottom))!important}html body #profileOverlay #profileCard{max-height:calc(100dvh - 40px - env(safe-area-inset-bottom))!important;border-radius:24px!important}html body #profileOverlay #profileCard .profile-banner{height:140px!important;min-height:140px!important}}
/* Visual order follows source order for keyboard and assistive navigation. */
html body #profileOverlay #profileCard :is(.profile-actions,.profile-section,.profile-identity-warning,.profile-head-row){order:0!important}
html body #profileOverlay #profileCard .profile-actions .btn{min-height:44px!important;font-size:14px!important}
html body #profileOverlay #profileCard .profile-section h4{font-size:12px!important}
html body #profileOverlay #profileCard .profile-section p{font-size:1rem!important}
html body #profileOverlay #profileCard :is(button,a):focus-visible{outline:3px solid #8dceff!important;outline-offset:3px!important}
@media(prefers-reduced-transparency:reduce){html body #profileOverlay:not(.hidden){backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#101820ee!important}}
/* One continuous user gradient across the entire profile. */
html body #profileOverlay #profileCard{background:linear-gradient(#0006,#0006),var(--profile-full-gradient,linear-gradient(135deg,#4e65f6,#3b3f8f))!important;color:#fff!important;isolation:isolate}
html body #profileOverlay #profileCard .profile-banner:not([style*="background-image"]){background:transparent!important}
html body #profileOverlay #profileCard .profile-gradient-body{background:transparent!important;color:#fff!important}
html body #profileOverlay #profileCard .profile-gradient-body::before,html body #profileOverlay #profileCard .profile-gradient-body::after{display:none!important}
html body #profileOverlay #profileCard .profile-section,html body #profileOverlay #profileCard .profile-badges{background:rgba(0,0,0,.32)!important;border-color:rgba(255,255,255,.17)!important;color:#fff!important}
html body #profileOverlay #profileCard .profile-section :is(h4,p),html body #profileOverlay #profileCard .profile-title h2{color:#fff!important}
html body #profileOverlay #profileCard .profile-title .tag{color:#f0f2f8!important}
html body #profileOverlay #profileCard .profile-avatar{border-color:rgba(20,23,40,.72)!important}
html body #profileOverlay #profileCard .profile-actions .btn.secondary{background:rgba(0,0,0,.32)!important;border:1px solid #ffffff38!important;color:#fff!important}
@media(min-width:700px){
 html body #profileOverlay #profileCard{width:min(720px,calc(100vw - 64px))!important;max-width:720px!important;border-radius:20px!important}
 html body #profileOverlay #profileCard .profile-banner{height:190px!important;min-height:190px!important}
 html body #profileOverlay #profileCard .profile-gradient-body{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:16px!important;padding:0 28px 28px!important}
 html body #profileOverlay #profileCard .profile-head-row{grid-column:1/-1;flex-direction:row!important;align-items:flex-start!important;gap:20px!important}
 html body #profileOverlay #profileCard .profile-avatar{width:112px!important;height:112px!important;margin-top:-44px!important}
 html body #profileOverlay #profileCard .profile-title{padding-top:14px!important;flex:1!important;width:auto!important}
 html body #profileOverlay #profileCard .profile-title h2{font-size:30px!important}
 html body #profileOverlay #profileCard .profile-actions,html body #profileOverlay #profileCard .profile-identity-warning,html body #profileOverlay #profileCard .profile-section:first-of-type{grid-column:1/-1}
 html body #profileOverlay #profileCard .profile-actions .btn{flex:0 1 auto!important;min-width:110px!important}
}