/* Community + Progress shared surface — Stage 4 permanent owner */
.cp-page,
body[data-pb-full-page="friends"],
body[data-pb-full-page="ranking"],
body[data-pb-full-page="achievements"],
body[data-pb-full-page="xp"],
body[data-pb-full-page="pins"]{
  width:100%;max-width:100%;overflow-x:hidden;
  background:var(--pb-color-bg-base,#070a08);
  color:var(--pb-color-text-primary,#f1f6f1);
}
.cp-page{width:min(1460px,100%);max-width:100%;margin:0 auto;padding:18px 16px calc(var(--pb-bottom-h,66px) + 36px);min-width:0;box-sizing:border-box;overflow-x:clip}
.cp-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:22px;align-items:start}
.cp-main{min-width:0;max-width:100%}
.cp-nav{position:sticky;top:calc(var(--pb-topbar-h,56px) + 18px);display:flex;flex-direction:column;gap:2px;min-width:0;padding:4px 0;border-right:1px solid var(--pb-color-border-subtle,#202920)}
.cp-nav-link{min-height:42px;padding:0 14px 0 12px;display:flex;align-items:center;gap:10px;border-left:2px solid transparent;color:var(--pb-color-text-secondary,#a5b0a7);text-decoration:none;font-size:13px;font-weight:650;transition:background var(--pb-motion-fast,120ms) var(--pb-ease-out),color var(--pb-motion-fast,120ms) var(--pb-ease-out),border-color var(--pb-motion-fast,120ms) var(--pb-ease-out)}
.cp-nav-link svg{width:18px;height:18px;flex:0 0 18px}
.cp-nav-link:hover{background:var(--pb-color-surface-1,#0c100d);color:var(--pb-color-text-primary,#f1f6f1)}
.cp-nav-link.is-active{border-left-color:var(--pb-color-accent-foreground,#b7ff19);color:var(--pb-color-text-primary,#f1f6f1)}
.cp-nav-link.is-active svg{color:var(--pb-color-accent-foreground,#b7ff19)}
.cp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:4px 0 16px;border-bottom:1px solid var(--pb-color-border-subtle,#202920)}
.cp-head-copy{min-width:0}
.cp-kicker{display:flex;align-items:center;gap:7px;color:var(--pb-color-text-muted,#808b83);font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.cp-kicker svg{width:15px;height:15px}
.cp-title{margin:5px 0 0;font-size:30px;line-height:1.05;letter-spacing:-.035em;font-weight:800}
.cp-subtitle{margin:7px 0 0;max-width:720px;color:var(--pb-color-text-secondary,#a5b0a7);font-size:12px;line-height:1.5}
.cp-head-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.cp-action{min-height:38px;padding:0 13px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--pb-color-border-default,#2b362d);border-radius:var(--pb-radius-sm,8px);background:var(--pb-color-surface-1,#0c100d);color:var(--pb-color-text-primary,#f1f6f1);text-decoration:none;font-size:12px;font-weight:700;cursor:pointer}
.cp-action:hover{background:var(--pb-color-surface-hover,#1d271f)}
.cp-action.is-primary{border-color:var(--pb-color-accent-border,rgba(183,255,25,.28));background:var(--pb-color-accent-soft,rgba(183,255,25,.1));color:var(--pb-color-accent-foreground,#b7ff19)}
.cp-action.is-danger{color:var(--pb-color-danger,#ff6577)}
.cp-action svg{width:17px;height:17px}
.cp-segmented{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--pb-color-border-subtle,#202920);border-radius:var(--pb-radius-sm,8px);background:var(--pb-color-surface-1,#0c100d)}
.cp-segmented a,.cp-segmented button{min-height:34px;padding:0 11px;display:flex;align-items:center;justify-content:center;border:0;border-radius:6px;background:transparent;color:var(--pb-color-text-secondary,#a5b0a7);font:650 11px/1.15 var(--pb-font-ui);text-decoration:none;text-align:center;cursor:pointer}
.cp-segmented a:hover,.cp-segmented button:hover{background:var(--pb-color-surface-2,#111712);color:var(--pb-color-text-primary,#f1f6f1)}
.cp-segmented .is-active{background:var(--pb-color-surface-3,#182019);color:var(--pb-color-accent-foreground,#b7ff19)}
.cp-section{min-width:0;padding:18px 0;border-bottom:1px solid var(--pb-color-border-subtle,#202920)}
.cp-section:last-child{border-bottom:0}
.cp-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.cp-section-title{margin:0;font-size:17px;font-weight:750;letter-spacing:-.015em}
.cp-section-note{color:var(--pb-color-text-muted,#808b83);font-size:11px}
.cp-badge-count{min-width:22px;height:22px;padding:0 6px;display:inline-grid;place-items:center;border-radius:var(--pb-radius-round,999px);background:var(--pb-color-surface-2,#111712);color:var(--pb-color-text-secondary,#a5b0a7);font:650 10px/1 var(--pb-font-mono)}
.cp-empty{padding:34px 16px;text-align:center;color:var(--pb-color-text-secondary,#a5b0a7)}
.cp-empty svg{width:32px;height:32px;margin:0 auto 10px;color:var(--pb-color-text-muted,#808b83)}
.cp-empty strong{display:block;color:var(--pb-color-text-primary,#f1f6f1);font-size:15px}
.cp-empty span{display:block;margin-top:5px;font-size:11px;line-height:1.45}
.cp-error{padding:12px 14px;border-left:2px solid var(--pb-color-danger,#ff6577);background:color-mix(in srgb,var(--pb-color-danger,#ff6577) 8%,transparent);color:var(--pb-color-text-secondary,#a5b0a7);font-size:12px}
.cp-skeleton{position:relative;overflow:hidden;background:var(--pb-color-surface-2,#111712);border-radius:var(--pb-radius-xs,4px)}
.cp-skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,var(--pb-color-skeleton-shine,rgba(255,255,255,.035)),transparent);animation:cpSkeleton 1.15s linear infinite}
@keyframes cpSkeleton{to{transform:translateX(100%)}}

/* Reusable public identity row */
.cp-user{min-width:0;display:flex;align-items:center;gap:11px}
.cp-avatar-link{position:relative;flex:0 0 auto;display:block;border-radius:var(--pb-radius-md,12px);outline:none}
.cp-avatar-link:focus-visible{box-shadow:0 0 0 2px var(--pb-color-accent-border,rgba(183,255,25,.28))}
.cp-user-avatar{display:block;object-fit:cover;border-radius:var(--pb-radius-md,12px);border:1px solid var(--pb-color-border-default,#2b362d);background:var(--pb-color-surface-2,#111712)}
.cp-avatar-online{position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border:2px solid var(--pb-color-bg-base,#070a08);border-radius:50%;background:var(--pb-color-success,#58d68d)}
.cp-user-copy{min-width:0;flex:1}
.cp-user-name-line{min-width:0;display:flex;align-items:center;gap:5px;overflow:visible}
.cp-user-name{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--pb-color-text-primary,#f1f6f1);text-decoration:none;font-size:14px;font-weight:720}
.cp-user-name:hover{text-decoration:underline;text-underline-offset:3px}
.cp-user-verified,.cp-user-pin{flex:0 0 auto}
.cp-user-verified{width:16px;height:16px;min-width:16px;min-height:16px;max-width:16px;max-height:16px;overflow:visible}
.cp-user-pin{width:17px;height:17px;min-width:17px;min-height:17px;max-width:17px;max-height:17px;object-fit:contain;overflow:hidden}
.cp-user-role{flex:0 1 auto;max-width:104px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--pb-identity-role-color,var(--pb-color-text-muted,#808b83));font-size:9px;font-weight:700}
.cp-user-meta{min-width:0;display:flex;align-items:center;gap:10px;margin-top:4px;color:var(--pb-color-text-muted,#808b83);font-size:10px}
.cp-user-progress,.cp-user-presence{min-width:0;display:flex;align-items:center;gap:5px;white-space:nowrap}
.cp-user-clan{flex:0 1 auto;max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--pb-color-text-secondary,#a5b0a7);font-weight:700}
.cp-user-progress span+span::before{content:"·";margin-right:5px;color:var(--pb-color-border-strong,#3a473c)}
.cp-user-presence{overflow:hidden;text-overflow:ellipsis}
.cp-user-presence i{width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:var(--pb-color-text-muted,#808b83)}
.cp-user-presence.is-online{color:var(--pb-color-success,#58d68d)}
.cp-user-presence.is-online i{background:var(--pb-color-success,#58d68d)}
.cp-user-presence span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-progress-track{height:5px;overflow:hidden;border-radius:var(--pb-radius-round,999px);background:var(--pb-color-surface-3,#182019)}
.cp-progress-track>i{display:block;height:100%;border-radius:inherit;background:var(--pb-color-accent-foreground,#b7ff19)}

@media(max-width:980px){
  .cp-page{padding-top:12px}
  .cp-layout{display:block;max-width:100%}
  .cp-nav{position:relative;top:auto;z-index:2;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:0 0 14px;padding:0;border-right:0;border-bottom:1px solid var(--pb-color-border-subtle,#202920);overflow:visible}
  .cp-nav-link{min-width:0;min-height:58px;padding:7px 3px 6px;flex-direction:column;justify-content:center;gap:4px;border-left:0;border-bottom:2px solid transparent;text-align:center;font-size:10px;line-height:1.05;white-space:nowrap}
  .cp-nav-link svg{width:19px;height:19px;flex-basis:19px}
  .cp-nav-link span{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .cp-nav-link.is-active{border-left-color:transparent;border-bottom-color:var(--pb-color-accent-foreground,#b7ff19)}
}
@media(max-width:600px){
  .cp-page{padding:10px 12px calc(var(--pb-bottom-h,66px) + 28px)}
  .cp-head{align-items:flex-start;padding-bottom:13px;max-width:100%}
  .cp-title{font-size:25px}
  .cp-subtitle{font-size:11px}
  .cp-head-actions{align-self:center}
  .cp-head-actions .cp-action span{display:none}
  .cp-action{min-width:44px;min-height:44px;padding:0 11px}
  .cp-segmented{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);width:100%;max-width:100%;overflow:visible}
  .cp-segmented a,.cp-segmented button{min-width:0;min-height:40px;padding:0 6px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cp-user{gap:10px;max-width:100%}
  .cp-user-copy,.cp-user-name-line,.cp-user-meta{max-width:100%}
  .cp-user-name{font-size:13px}
  .cp-user-meta{gap:7px;font-size:9px;flex-wrap:wrap}
  .cp-user-presence{max-width:150px}
}
@media(prefers-reduced-motion:reduce){
  .cp-nav-link,.cp-action{transition:none}
  .cp-skeleton::after{animation:none}
}