/* PocketNexus V8.64.2 — Public Profile visual polish
   Presentation-only: preserves existing profile data, tabs, actions, and upload behavior. */

.profilesHub{
  --profile-panel:#111b28;
  --profile-panel-2:#0d1722;
  --profile-border:#26394c;
  --profile-muted:#9cafc2;
  --profile-cyan:#53bdf7;
  --profile-cyan-soft:rgba(83,189,247,.14);
}

/* Hero becomes an actual profile header instead of a loose dashboard row. */
.publicProfileHero{
  position:relative;
  isolation:isolate;
  min-height:286px;
  padding:0 28px 24px;
  overflow:hidden;
  border:1px solid var(--profile-border);
  border-radius:24px;
  background:linear-gradient(180deg,#101b28 0%,#0c1621 100%);
  box-shadow:0 18px 48px rgba(0,0,0,.24);
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:
    "banner banner banner"
    "avatar identity actions";
  align-items:end;
  column-gap:20px;
}
.publicProfileHero::before{
  content:"";
  grid-area:banner;
  position:absolute;
  z-index:-2;
  inset:0 0 auto 0;
  height:158px;
  background:
    linear-gradient(180deg,rgba(5,12,20,.08),rgba(5,12,20,.76)),
    var(--profile-banner,linear-gradient(135deg,#172b3e,#143f59 52%,#2c3658));
  background-size:cover;
  background-position:center;
  border-bottom:1px solid rgba(120,180,220,.18);
}
.publicProfileHero::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:118px 0 0;
  background:linear-gradient(180deg,rgba(10,20,30,.24),#0c1621 48px);
  pointer-events:none;
}
.publicProfileHero .profileBannerShade{display:none}
.publicProfileHero .publicAvatar,
.publicProfileHero .identityAvatar{
  grid-area:avatar;
  width:112px;
  height:112px;
  min-width:112px;
  margin-top:104px;
  border-radius:24px;
  border:4px solid #0c1621;
  outline:2px solid rgba(83,189,247,.72);
  box-shadow:0 12px 30px rgba(0,0,0,.34);
  background-size:cover;
  background-position:center;
  display:grid;
  place-items:center;
  font-size:36px;
  font-weight:900;
}
.publicProfileHero .publicIdentityTitle{
  grid-area:identity;
  min-width:0;
  padding-top:116px;
  padding-bottom:3px;
}
.publicProfileHero .publicIdentityTitle .eyebrow{
  color:#a9c8dc;
  letter-spacing:.15em;
}
.publicProfileHero .publicIdentityTitle h1{
  margin:3px 0 2px;
  font-size:clamp(34px,4vw,52px);
  line-height:1;
  letter-spacing:-.035em;
}
.publicProfileHero .publicIdentityTitle p{
  margin:7px 0 10px;
  color:#bfd0df;
  font-size:14px;
}
.publicProfileHero .publicIdentityTitle .row{gap:8px;flex-wrap:wrap}
.publicProfileHero .pill,
.publicProfileHero .teamIdentityChip{
  min-height:30px;
  border-color:#30465a;
  background:rgba(10,22,33,.82);
  backdrop-filter:blur(8px);
}
.publicProfileHero .teamIdentityChip:hover{
  border-color:#4daee4;
  background:#14283a;
}
.publicProfileHero .profilesHeroActions{
  grid-area:actions;
  align-self:end;
  display:flex;
  gap:10px;
  padding-bottom:3px;
}
.publicProfileHero .profilesHeroActions button:first-child{
  border-color:transparent;
  background:linear-gradient(180deg,#5fc7ff,#35a9eb);
  color:#06111a;
  font-weight:900;
  box-shadow:0 8px 22px rgba(50,169,235,.18);
}
.publicProfileHero .profilesHeroActions button:first-child:hover{filter:brightness(1.06)}

/* Tabs visually connect to the profile instead of floating in empty space. */
.profilesTabs{
  width:max-content;
  max-width:100%;
  margin:16px 0 18px;
  padding:4px;
  gap:4px;
  border:1px solid #1f3041;
  border-radius:13px;
  background:#0a131d;
}
.profilesTabs button{
  border:0;
  border-radius:9px;
  padding:10px 16px;
  background:transparent;
  color:#8fa4b7;
}
.profilesTabs button.active{
  background:#172638;
  color:#f4f8fb;
  box-shadow:inset 0 0 0 1px #284157;
}

/* Turn the four summary values into scan-friendly cards. */
.profilesStatGrid,
.publicStatGrid.profilesStatGrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:0 0 16px;
}
.profilesStatGrid article{
  position:relative;
  min-height:112px;
  padding:17px 18px 16px 54px;
  border:1px solid var(--profile-border);
  border-radius:16px;
  background:linear-gradient(180deg,#121e2b,#0e1924);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  overflow:hidden;
}
.profilesStatGrid article::before{
  position:absolute;
  left:16px;
  top:17px;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:1px solid #31516a;
  border-radius:9px;
  background:var(--profile-cyan-soft);
  color:var(--profile-cyan);
  font-size:14px;
  font-weight:900;
}
.profilesStatGrid article:nth-child(1)::before{content:"VS";font-size:10px}
.profilesStatGrid article:nth-child(2)::before{content:"↗"}
.profilesStatGrid article:nth-child(3)::before{content:"★"}
.profilesStatGrid article:nth-child(4)::before{content:"◆"}
.profilesStatGrid article span{
  display:block;
  color:#91a7ba;
  font-size:11px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.profilesStatGrid article strong{
  display:block;
  margin:5px 0 3px;
  font-size:21px;
  line-height:1.15;
  color:#f2f7fa;
}
.profilesStatGrid article small{color:#8ea4b7;line-height:1.35}

/* Give the lower profile sections the same deliberate card language. */
.profilesOverviewGrid{
  gap:14px;
}
.profilesOverviewGrid>.panel{
  border-color:var(--profile-border);
  border-radius:18px;
  background:linear-gradient(180deg,#121e2b,#101a26);
  box-shadow:0 8px 26px rgba(0,0,0,.11);
}
.profileMiniFacts{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid #253748;
}
.profileMiniFacts>div{
  padding:10px 12px;
  border:1px solid #223648;
  border-radius:12px;
  background:#0c1722;
}
.identityEmpty{
  min-height:118px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  border:1px dashed #2d4356;
  border-radius:14px;
  background:rgba(8,17,25,.42);
}

@media (max-width:980px){
  .publicProfileHero{
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"banner banner" "avatar identity" "actions actions";
  }
  .publicProfileHero .profilesHeroActions{
    margin-top:14px;
    padding-left:132px;
  }
  .profilesStatGrid,.publicStatGrid.profilesStatGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .publicProfileHero{
    min-height:320px;
    padding:0 18px 20px;
    grid-template-columns:1fr;
    grid-template-areas:"banner" "avatar" "identity" "actions";
    align-items:start;
  }
  .publicProfileHero::before{height:132px}
  .publicProfileHero::after{inset:104px 0 0}
  .publicProfileHero .publicAvatar,
  .publicProfileHero .identityAvatar{
    width:88px;height:88px;min-width:88px;
    margin-top:88px;
    border-radius:20px;
  }
  .publicProfileHero .publicIdentityTitle{padding-top:10px}
  .publicProfileHero .publicIdentityTitle h1{font-size:32px}
  .publicProfileHero .profilesHeroActions{
    width:100%;
    padding-left:0;
    margin-top:14px;
  }
  .publicProfileHero .profilesHeroActions button{flex:1}
  .profilesTabs{width:100%;overflow-x:auto}
  .profilesTabs button{white-space:nowrap;flex:1}
  .profilesStatGrid,.publicStatGrid.profilesStatGrid{grid-template-columns:1fr 1fr;gap:9px}
  .profilesStatGrid article{min-height:104px;padding:15px 12px 13px 48px}
  .profilesStatGrid article::before{left:12px;top:15px}
  .profilesStatGrid article strong{font-size:17px}
}
@media (max-width:390px){
  .profilesStatGrid,.publicStatGrid.profilesStatGrid{grid-template-columns:1fr}
}