.public-profile-page{padding-bottom:120px}
.profile-shell{overflow:visible;position:relative}
.profile-banner{height:clamp(280px,30vw,320px);border-radius:16px 16px 0 0;overflow:hidden;position:relative;background:#111d2f}
.profile-banner img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.profile-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,8,15,.04) 30%,rgba(4,10,18,.92) 100%)}
.profile-header{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:end;padding:0 26px 22px;margin-top:-74px;z-index:2}
.profile-avatar-wrap{width:154px;height:154px;position:relative;display:grid;place-items:center;flex:none}
.profile-avatar-wrap::before{content:"";position:absolute;inset:-8px;border-radius:50%;background:var(--avatar-decoration-media,none) center/contain no-repeat;pointer-events:none;z-index:2}
.profile-avatar-img{width:140px;height:140px;border-radius:50%;object-fit:cover;border:6px solid #08111d;background:#111d2f;box-shadow:0 14px 34px rgba(0,0,0,.34)}
.profile-status-dot{position:absolute;right:8px;bottom:10px;width:22px;height:22px;border:5px solid #08111d;border-radius:50%;background:var(--success);z-index:4}
.profile-identity{min-width:0;padding-bottom:4px}
.profile-name-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;min-width:0}
.profile-name-row h1{font-size:clamp(1.8rem,3vw,2.7rem);margin:0;overflow-wrap:anywhere}
.profile-handle{margin:5px 0 10px;color:var(--text-secondary);overflow-wrap:anywhere}
.profile-badge-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
.profile-badge-pill{display:inline-flex;align-items:center;gap:7px;max-width:220px;padding:7px 10px;border-radius:999px;border:1px solid #324968;background:#111e30;color:#e7efff;font-size:.82rem;font-weight:800;min-width:0}
.profile-badge-pill img{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:none}
.profile-badge-pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-badge-more{width:36px;height:36px;border-radius:50%;border:1px solid #324968;background:#111e30;color:#bcd2ed;font-weight:800;cursor:pointer}
.profile-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end;align-self:center;max-width:440px}
.profile-body{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.75fr);gap:18px;padding:0 22px 24px}
.profile-main-column,.profile-side-column{display:grid;gap:16px;align-content:start;min-width:0}
.profile-section{padding:20px;min-width:0}
.profile-section h2{font-size:1.05rem;margin:0 0 12px}
.profile-about-text{white-space:pre-line;line-height:1.72;color:var(--text-secondary);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.profile-about-text.expanded{display:block;overflow:visible}
.profile-read-more{margin-top:10px;background:none;border:0;color:#67d4ff;font-weight:800;cursor:pointer;padding:0}
.profile-stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.profile-stat{padding:16px;border:1px solid var(--border);border-radius:12px;background:#0c1828;min-width:0}
.profile-stat b{display:block;font-size:1.35rem;overflow-wrap:anywhere}
.profile-stat span{font-size:.78rem;color:var(--text-muted)}
.profile-exp-card{padding:18px}
.profile-exp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.profile-exp-head strong{font-size:1.35rem}
.profile-exp-head span{color:var(--text-secondary);font-size:.9rem}
.profile-progress{height:10px;border-radius:999px;background:#17263a;overflow:hidden;margin:13px 0 8px}
.profile-progress span{display:block;height:100%;width:var(--progress,0%);border-radius:inherit;background:linear-gradient(90deg,#14b8ff,#7c3aed);animation:profileProgress 1s ease both}
.profile-exp-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:var(--text-muted);font-size:.82rem}
.profile-membership{display:grid;gap:10px;padding:18px;border-left:4px solid var(--success)}
.profile-membership.inactive{border-left-color:#52657d}
.membership-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.membership-state{display:inline-flex;align-items:center;gap:8px;color:#a7f3d0;font-weight:800}
.membership-state::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--success);box-shadow:0 0 0 6px rgba(52,211,153,.1)}
.membership-chips{display:flex;gap:7px;flex-wrap:wrap}
.membership-chips span{padding:6px 9px;border-radius:999px;background:#10243a;color:#bdd5ef;font-size:.78rem;border:1px solid #274461}
.featured-badge-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.featured-badge-card{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid var(--border);border-radius:12px;background:#0c1828;min-width:0}
.featured-badge-card img{width:42px;height:42px;object-fit:cover;border-radius:50%;flex:none}
.featured-badge-card b,.featured-badge-card small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.featured-badge-card small{color:var(--text-muted);font-size:.75rem}
.profile-anime-list{display:grid;gap:8px;counter-reset:anime}
.profile-anime-list div{counter-increment:anime;padding:11px 12px;border-radius:10px;background:#0c1828;border:1px solid var(--border);overflow-wrap:anywhere}
.profile-anime-list div::before{content:counter(anime,decimal-leading-zero);margin-right:10px;color:#67d4ff;font-weight:900}
.profile-music-player{padding:16px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}
.profile-music-disc{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#0ea5e9,#7c3aed);box-shadow:0 0 0 6px rgba(14,165,233,.08)}
.profile-music-player.playing .profile-music-disc{animation:musicPulse 1.4s ease-in-out infinite}
.profile-music-info{min-width:0}
.profile-music-info b,.profile-music-info small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-music-info small{color:var(--text-muted)}
.profile-music-controls{display:flex;gap:8px;align-items:center;grid-column:1/-1}
.profile-music-controls button{width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:#102033;color:#fff;cursor:pointer}
.profile-music-range{flex:1;min-width:0}
.profile-music-time{font-variant-numeric:tabular-nums;color:var(--text-muted);font-size:.78rem}
.profile-quick-grid{grid-template-columns:repeat(5,minmax(0,1fr));margin-top:18px}
.profile-quick-card{min-height:126px;padding:16px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;position:relative;overflow:hidden}
.profile-quick-card::after{content:"→";position:absolute;right:14px;bottom:12px;color:#67d4ff;font-size:1.25rem}
.profile-quick-card svg{width:24px;height:24px;color:#67d4ff}
.profile-quick-card small{color:var(--text-muted);line-height:1.45}
.profile-activity-section{margin-top:18px}
@keyframes profileProgress{from{width:0}to{width:var(--progress,0%)}}
@keyframes musicPulse{50%{transform:scale(1.06);box-shadow:0 0 0 11px rgba(14,165,233,.04)}}
@media(max-width:1050px){.profile-body{grid-template-columns:1fr}.profile-actions{grid-column:1/-1;justify-content:flex-start}.profile-header{grid-template-columns:auto minmax(0,1fr)}.profile-quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.profile-banner{height:clamp(160px,46vw,190px)}.profile-header{grid-template-columns:1fr;padding:0 16px 18px;margin-top:-56px;gap:10px}.profile-avatar-wrap{width:118px;height:118px}.profile-avatar-img{width:108px;height:108px;border-width:5px}.profile-identity{padding:0}.profile-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:none}.profile-body{padding:0 12px 16px}.profile-stats-grid{grid-template-columns:1fr 1fr}.profile-quick-grid{grid-template-columns:1fr 1fr}.profile-quick-card{min-height:112px}.profile-badge-pill{max-width:180px}}
@media(max-width:430px){.profile-actions,.profile-quick-grid,.profile-stats-grid{grid-template-columns:1fr}.profile-badge-pill{max-width:100%}}

.profile-badge-row{position:relative}
.profile-badge-popover{position:fixed;z-index:1200;top:0;left:0;min-width:220px;max-width:min(320px,calc(100vw - 24px));max-height:min(360px,calc(100vh - 24px));overflow:auto;padding:12px;border:1px solid #31506f;border-radius:12px;background:#081522;box-shadow:0 18px 50px rgba(0,0,0,.45);transform-origin:bottom right;animation:profileRolePopoverIn .16s ease both}
.profile-badge-popover[hidden]{display:none}
.profile-badge-popover>strong{display:block;margin-bottom:8px;color:#dcecff}
.profile-badge-popover>span{display:flex;align-items:center;gap:8px;padding:7px 4px;color:#bed2ea}
.profile-badge-popover img{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:0 0 auto}

/* 2026-07-12 small public-profile polish: circular PFP, larger badges, refined music player */
.public-profile-page .profile-avatar-wrap,
.public-profile-page .profile-avatar-effect{
  border-radius:50%;
}
.public-profile-page .profile-avatar-img,
.public-profile-page .profile-avatar-effect > img,
.public-profile-page .profile-avatar-effect img{
  border-radius:50% !important;
  clip-path:circle(50% at 50% 50%);
}

.public-profile-page .profile-badge-row{
  gap:10px;
}
.public-profile-page .profile-badge-pill{
  min-height:42px;
  max-width:250px;
  gap:9px;
  padding:8px 14px;
  font-size:.9rem;
  border-color:#385675;
  box-shadow:0 8px 22px rgba(0,0,0,.16);
}
.public-profile-page .profile-badge-pill img{
  width:27px;
  height:27px;
  border:1px solid rgba(255,255,255,.18);
}
.public-profile-page .profile-badge-more{
  width:42px;
  height:42px;
  font-size:.88rem;
}

.public-profile-page .profile-music-player{
  position:relative;
  padding:17px;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:13px;
  border-color:rgba(83,173,255,.3);
  background:
    radial-gradient(circle at 8% 8%,rgba(44,132,255,.13),transparent 34%),
    linear-gradient(145deg,#0b1728,#0d1b2e 58%,#0b1525);
  box-shadow:0 16px 38px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.025);
}
.public-profile-page .profile-music-player::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 20%,rgba(71,190,255,.055) 48%,transparent 76%);
}
.public-profile-page .profile-music-disc{
  position:relative;
  z-index:1;
  width:48px;
  height:48px;
  font-size:1.05rem;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 0 0 6px rgba(14,165,233,.08),0 10px 26px rgba(37,99,235,.2);
}
.public-profile-page .profile-music-info,
.public-profile-page .profile-music-controls{
  position:relative;
  z-index:1;
}
.public-profile-page .profile-music-info b{
  font-size:.96rem;
  letter-spacing:.01em;
}
.public-profile-page .profile-music-info small{
  margin-top:3px;
  font-size:.78rem;
}
.public-profile-page .profile-music-controls{
  padding-top:2px;
  gap:10px;
}
.public-profile-page .profile-music-controls button{
  width:40px;
  height:40px;
  border-color:#34516f;
  background:linear-gradient(145deg,#132843,#0d1d31);
  box-shadow:0 8px 18px rgba(0,0,0,.18);
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.public-profile-page .profile-music-controls button:hover{
  transform:translateY(-1px);
  border-color:#59c7ff;
  background:#15304d;
}
.public-profile-page .profile-music-range,
.public-profile-page [data-music-volume]{
  accent-color:#19aef2;
}
.public-profile-page [data-music-volume]{
  width:82px;
}
.public-profile-page .profile-music-time{
  min-width:72px;
  text-align:center;
  color:#9cb4cc;
}
.public-profile-page .profile-music-player.collapsed .profile-music-controls{
  display:none;
}

@media(max-width:700px){
  .public-profile-page .profile-badge-pill{
    min-height:39px;
    padding:7px 11px;
    font-size:.84rem;
  }
  .public-profile-page .profile-badge-pill img{width:25px;height:25px}
  .public-profile-page .profile-badge-more{width:39px;height:39px}
  .public-profile-page .profile-music-player{padding:14px;gap:10px}
  .public-profile-page [data-music-volume]{width:68px}
}

@media(prefers-reduced-motion:reduce){
  .public-profile-page .profile-music-player.playing .profile-music-disc{animation:none}
  .public-profile-page .profile-music-controls button{transition:none}
}

/* Working profile effects, decorations, overlays, layouts, themes and borders */
.public-profile-page{position:relative;isolation:isolate}.public-profile-page::after{pointer-events:none;z-index:-1}
.public-profile-page.profile-effect-sparkle::after,.public-profile-page.profile-effect-stars::after,.public-profile-page.profile-effect-rain::after,.public-profile-page.profile-effect-grid::after,.public-profile-page.profile-effect-mist::after,.public-profile-page.profile-effect-pulse::after,.public-profile-page.profile-effect-glow::after,.public-profile-page.profile-effect-orbital::after,.public-profile-page.profile-effect-custom-preset::after{content:"";position:absolute;inset:0;border-radius:20px;overflow:hidden}
.public-profile-page.profile-effect-sparkle::after,.public-profile-page.profile-effect-stars::after{background:radial-gradient(circle at 12% 15%,rgba(255,255,255,.5) 0 2px,transparent 3px),radial-gradient(circle at 82% 22%,rgba(255,242,166,.42) 0 2px,transparent 3px),radial-gradient(circle at 35% 78%,rgba(125,211,252,.4) 0 2px,transparent 3px)}
.public-profile-page.profile-effect-pulse::after{background:radial-gradient(circle at 50% 20%,color-mix(in srgb,var(--profile-accent,#22c7f3) 28%,transparent),transparent 38%);animation:profileFxPulse 2.3s ease-in-out infinite}
.public-profile-page.profile-effect-rain::after{background:repeating-linear-gradient(115deg,transparent 0 18px,rgba(34,199,243,.08) 18px 20px,transparent 20px 38px);animation:profileFxRain 7s linear infinite}
.public-profile-page.profile-effect-grid::after{background-image:linear-gradient(rgba(56,189,248,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.06) 1px,transparent 1px);background-size:26px 26px}
.public-profile-page.profile-effect-mist::after{background:radial-gradient(ellipse at 20% 25%,rgba(255,255,255,.08),transparent 26%),radial-gradient(ellipse at 80% 35%,rgba(167,139,250,.09),transparent 30%),radial-gradient(ellipse at 45% 80%,rgba(34,199,243,.07),transparent 28%);filter:blur(3px)}
.public-profile-page.profile-effect-glow::after{box-shadow:inset 0 0 90px color-mix(in srgb,var(--profile-accent,#22c7f3) 20%,transparent),0 0 60px color-mix(in srgb,var(--profile-accent,#22c7f3) 12%,transparent)}
.public-profile-page.profile-effect-orbital::after{inset:12px 8%;border:2px solid rgba(34,199,243,.12);border-radius:50%;box-shadow:0 0 45px rgba(139,92,246,.16);animation:profileFxPulse 2s ease-in-out infinite}
.public-profile-page.profile-effect-custom-preset::after{background-image:var(--profile-effect-media);background-size:cover;background-position:center;opacity:.34;mix-blend-mode:screen}

.public-profile-page .profile-avatar-wrap::before{background-image:var(--avatar-decoration-media);background-size:contain;background-position:center;background-repeat:no-repeat}
.public-profile-page.avatar-decor-gold_ring .profile-avatar-img{box-shadow:0 0 0 5px #ffd166,0 14px 34px rgba(0,0,0,.34),0 0 28px rgba(245,158,11,.28)}
.public-profile-page.avatar-decor-neon_ring .profile-avatar-img{box-shadow:0 0 0 5px #33ddff,0 0 34px rgba(109,92,255,.42)}
.public-profile-page.avatar-decor-petals .profile-avatar-wrap::after{content:"✿";position:absolute;right:-5px;top:0;color:#ff9bd4;font-size:34px;z-index:3}.public-profile-page.avatar-decor-stars .profile-avatar-wrap::after{content:"✦";position:absolute;right:-5px;top:0;color:#fff3a5;font-size:32px;z-index:3}
.public-profile-page.avatar-decor-flame .profile-avatar-img{box-shadow:0 0 0 5px #ff6b2b,0 0 30px rgba(239,17,17,.45)}.public-profile-page.avatar-decor-crystal .profile-avatar-img{box-shadow:0 0 0 5px #7df2ff,0 0 30px rgba(167,180,255,.4)}
.public-profile-page.avatar-decor-rainbow_ring .profile-avatar-img{box-shadow:0 0 0 5px #ff4d6d,0 0 30px rgba(76,201,240,.38)}.public-profile-page.avatar-decor-galaxy_ring .profile-avatar-img{box-shadow:0 0 0 5px #6d5df6,0 0 36px rgba(167,139,250,.45)}.public-profile-page.avatar-decor-electric_ring .profile-avatar-img{box-shadow:0 0 0 5px #22d3ee,0 0 34px rgba(34,211,238,.5)}
.public-profile-page.avatar-decor-custom-preset .profile-avatar-wrap::before{inset:-24px;z-index:3}

.public-profile-page .profile-banner::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1}
.public-profile-page.banner-overlay-soft_particles .profile-banner::before,.public-profile-page.banner-overlay-stars .profile-banner::before{background:radial-gradient(circle at 15% 25%,rgba(255,255,255,.7) 0 2px,transparent 3px),radial-gradient(circle at 75% 18%,rgba(255,242,166,.6) 0 2px,transparent 3px),radial-gradient(circle at 45% 70%,rgba(255,255,255,.45) 0 2px,transparent 3px)}
.public-profile-page.banner-overlay-rain .profile-banner::before{background:repeating-linear-gradient(115deg,transparent 0 14px,rgba(255,255,255,.17) 14px 16px,transparent 16px 30px);animation:profileFxRain 5s linear infinite}.public-profile-page.banner-overlay-glitch .profile-banner::before{background:linear-gradient(90deg,rgba(255,0,80,.14),transparent,rgba(0,220,255,.14));mix-blend-mode:screen}.public-profile-page.banner-overlay-sakura .profile-banner::before{background:radial-gradient(ellipse at 20% 10%,#ff9bcf 0 3px,transparent 4px),radial-gradient(ellipse at 80% 25%,#ffd7e9 0 3px,transparent 4px),radial-gradient(ellipse at 40% 70%,#ffb6d5 0 3px,transparent 4px)}.public-profile-page.banner-overlay-aurora .profile-banner::before{background:linear-gradient(115deg,rgba(34,197,94,.2),rgba(56,189,248,.15),rgba(139,92,246,.22));mix-blend-mode:screen}.public-profile-page.banner-overlay-snowfall .profile-banner::before{background:radial-gradient(circle,rgba(255,255,255,.72) 1.5px,transparent 2.5px);background-size:20px 20px}.public-profile-page.banner-overlay-anime_banner_1 .profile-banner::before,.public-profile-page.banner-overlay-anime_banner_2 .profile-banner::before,.public-profile-page.banner-overlay-custom_media .profile-banner::before,.public-profile-page.banner-overlay-custom-preset .profile-banner::before{background-image:var(--banner-overlay-media);background-size:cover;background-position:center;opacity:.58;mix-blend-mode:screen}

.public-profile-page.profile-theme-custom-preset .profile-shell{background:linear-gradient(180deg,var(--profile-custom-secondary,#10243f),#08111d)!important}.public-profile-page.profile-theme-ocean .profile-shell{background:linear-gradient(180deg,#063047,#08111d)!important}
.public-profile-page.profile-layout-custom-preset .profile-shell{background:linear-gradient(135deg,color-mix(in srgb,var(--profile-layout-primary,#22c7f3) 12%,#08111d),color-mix(in srgb,var(--profile-layout-secondary,#8b5cf6) 10%,#08111d))}.public-profile-page.profile-layout-spotlight .profile-header{justify-items:center;text-align:center;grid-template-columns:1fr}.public-profile-page.profile-layout-spotlight .profile-avatar-wrap{margin-inline:auto}.public-profile-page.profile-layout-spotlight .profile-actions{justify-content:center}.public-profile-page.profile-layout-spotlight .profile-body{grid-template-columns:1fr 1fr}
.public-profile-page.profile-border-custom-preset .profile-shell::before,.public-profile-page.profile-border-rainbow .profile-shell::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:conic-gradient(var(--profile-border-primary,#22c7f3),var(--profile-border-secondary,#8b5cf6),var(--profile-border-primary,#22c7f3));mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none;z-index:6;animation:profileBorderSpin 6s linear infinite}
@keyframes profileFxPulse{50%{opacity:.55;transform:scale(1.015)}}@keyframes profileFxRain{to{background-position:0 140px}}@keyframes profileBorderSpin{to{filter:hue-rotate(360deg)}}

/* v5: selected appearance and effects are visible on the real profile */
.public-profile-page .profile-shell{isolation:isolate}
.public-profile-page .profile-shell::after{pointer-events:none}
.public-profile-page[data-effect-mode="particles"] .profile-shell::after,.public-profile-page[data-effect-mode="pulse"] .profile-shell::after,.public-profile-page[data-effect-mode="rain"] .profile-shell::after,.public-profile-page[data-effect-mode="grid"] .profile-shell::after,.public-profile-page[data-effect-mode="mist"] .profile-shell::after,.public-profile-page[data-effect-mode="glow"] .profile-shell::after,.public-profile-page[data-effect-mode="orbital"] .profile-shell::after,.public-profile-page.profile-effect-custom-preset .profile-shell::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:5;overflow:hidden}
.public-profile-page[data-effect-mode="particles"] .profile-shell::after{background:radial-gradient(circle at 12% 15%,rgba(255,255,255,.52) 0 2px,transparent 3px),radial-gradient(circle at 82% 22%,rgba(255,242,166,.44) 0 2px,transparent 3px),radial-gradient(circle at 35% 78%,rgba(125,211,252,.42) 0 2px,transparent 3px);animation:profileFxFloat 4s ease-in-out infinite alternate}
.public-profile-page[data-effect-mode="pulse"] .profile-shell::after{background:radial-gradient(circle at 50% 20%,color-mix(in srgb,var(--profile-accent,#22c7f3) 32%,transparent),transparent 40%);animation:profileFxPulse 2.3s ease-in-out infinite}
.public-profile-page[data-effect-mode="rain"] .profile-shell::after{background:repeating-linear-gradient(115deg,transparent 0 18px,rgba(34,199,243,.1) 18px 20px,transparent 20px 38px);animation:profileFxRain 5s linear infinite}
.public-profile-page[data-effect-mode="grid"] .profile-shell::after{background-image:linear-gradient(rgba(56,189,248,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.075) 1px,transparent 1px);background-size:26px 26px}
.public-profile-page[data-effect-mode="mist"] .profile-shell::after{background:radial-gradient(ellipse at 20% 25%,rgba(255,255,255,.1),transparent 26%),radial-gradient(ellipse at 80% 35%,rgba(167,139,250,.12),transparent 30%),radial-gradient(ellipse at 45% 80%,rgba(34,199,243,.09),transparent 28%);filter:blur(3px)}
.public-profile-page[data-effect-mode="glow"] .profile-shell::after{box-shadow:inset 0 0 100px color-mix(in srgb,var(--profile-accent,#22c7f3) 24%,transparent),0 0 60px color-mix(in srgb,var(--profile-accent,#22c7f3) 16%,transparent)}
.public-profile-page[data-effect-mode="orbital"] .profile-shell::after{inset:16px 8%;border:2px solid rgba(34,199,243,.16);border-radius:50%;box-shadow:0 0 45px rgba(139,92,246,.2);animation:profileFxPulse 2s ease-in-out infinite}
.public-profile-page.profile-effect-custom-preset .profile-shell::after{background-image:var(--profile-effect-media);background-size:cover;background-position:center;opacity:.34;mix-blend-mode:screen}
.public-profile-page[data-theme-mode="default"].profile-theme-crimson .profile-shell{background:linear-gradient(180deg,#641121,#08111d)}
.public-profile-page.profile-theme-midnight .profile-shell{background:linear-gradient(180deg,#0b172b,#08111d)}.public-profile-page.profile-theme-violet .profile-shell{background:linear-gradient(180deg,#21143a,#08111d)}.public-profile-page.profile-theme-emerald .profile-shell{background:linear-gradient(180deg,#0c2922,#08111d)}.public-profile-page.profile-theme-sunset .profile-shell{background:linear-gradient(180deg,#3b2412,#08111d)}.public-profile-page.profile-theme-rose .profile-shell{background:linear-gradient(180deg,#3d1a33,#08111d)}.public-profile-page.profile-theme-frost .profile-shell{background:linear-gradient(180deg,#153142,#08111d)}.public-profile-page.profile-theme-ocean .profile-shell{background:linear-gradient(180deg,#063047,#08111d)}
.public-profile-page[data-layout-mode="social"] .profile-avatar-wrap{width:178px;height:178px}.public-profile-page[data-layout-mode="social"] .profile-avatar-img{width:162px;height:162px}.public-profile-page[data-layout-mode="social"] .profile-body{grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr)}
.public-profile-page[data-layout-mode="glass"] .profile-shell{background:linear-gradient(145deg,rgba(20,45,70,.82),rgba(8,17,29,.92));backdrop-filter:blur(16px)}
.public-profile-page[data-layout-mode="neon"] .profile-shell{box-shadow:0 0 0 2px var(--profile-accent,#22c7f3),0 0 45px color-mix(in srgb,var(--profile-accent,#22c7f3) 28%,transparent)}
.public-profile-page[data-layout-mode="minimal"] .profile-banner{height:210px}.public-profile-page[data-layout-mode="minimal"] .profile-body{grid-template-columns:1fr}.public-profile-page[data-layout-mode="pink"] .profile-shell{background:linear-gradient(180deg,#4d1b3e,#160d18)}
.public-profile-page[data-layout-mode="spotlight"] .profile-header{grid-template-columns:1fr;justify-items:center;text-align:center}.public-profile-page[data-layout-mode="spotlight"] .profile-actions{justify-content:center}.public-profile-page[data-layout-mode="spotlight"] .profile-body{grid-template-columns:1fr 1fr}
.public-profile-page[data-border-mode="neon"] .profile-shell::before,.public-profile-page[data-border-mode="fire"] .profile-shell::before,.public-profile-page[data-border-mode="ice"] .profile-shell::before,.public-profile-page[data-border-mode="sakura"] .profile-shell::before,.public-profile-page[data-border-mode="gold"] .profile-shell::before,.public-profile-page[data-border-mode="rainbow"] .profile-shell::before,.public-profile-page.profile-border-custom-preset .profile-shell::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:3px;pointer-events:none;z-index:7;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:profileBorderSpin 5s linear infinite}
.public-profile-page[data-border-mode="neon"] .profile-shell::before{background:conic-gradient(#33d6ff,#7c4dff,#ef1734,#33d6ff)}.public-profile-page[data-border-mode="fire"] .profile-shell::before{background:conic-gradient(#ffd166,#ff7b2b,#ef1111,#ffd166)}.public-profile-page[data-border-mode="ice"] .profile-shell::before{background:conic-gradient(#e0fbff,#67d6ff,#7aa2ff,#e0fbff)}.public-profile-page[data-border-mode="sakura"] .profile-shell::before{background:conic-gradient(#ffc1df,#ff6aa9,#fff,#ffc1df)}.public-profile-page[data-border-mode="gold"] .profile-shell::before{background:conic-gradient(#fff3a5,#ffcc48,#d99100,#fff3a5)}.public-profile-page[data-border-mode="rainbow"] .profile-shell::before{background:conic-gradient(#ff4d6d,#ffb703,#72efdd,#4cc9f0,#7b2cff,#ff4d6d)}.public-profile-page.profile-border-custom-preset .profile-shell::before{background:conic-gradient(var(--profile-border-primary,#22c7f3),var(--profile-border-secondary,#8b5cf6),var(--profile-border-primary,#22c7f3))}
@keyframes profileFxFloat{to{background-position:24px 18px, -18px 16px, 12px -20px}}
@media(max-width:700px){.public-profile-page[data-layout-mode="social"] .profile-avatar-wrap{width:128px;height:128px}.public-profile-page[data-layout-mode="social"] .profile-avatar-img{width:116px;height:116px}.public-profile-page[data-layout-mode="spotlight"] .profile-body{grid-template-columns:1fr}}

/* v7: dedicated desktop effect layers so saved effects always render */
.public-profile-page .profile-shell::before,.public-profile-page .profile-shell::after{display:none!important}
.public-profile-page .profile-shell{position:relative;isolation:isolate;background:linear-gradient(180deg,var(--profile-custom-secondary,#08111d),#07101b)}
.public-profile-page .profile-shell>*:not(.desktop-profile-effect-layer):not(.desktop-profile-border-layer){position:relative;z-index:2}
.desktop-profile-effect-layer,.desktop-profile-border-layer{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.desktop-profile-effect-layer{z-index:5;overflow:hidden;opacity:.72}
.desktop-profile-border-layer{z-index:10}
.public-profile-page[data-effect-mode="none"] .desktop-profile-effect-layer{display:none}
.public-profile-page[data-effect-mode="particles"] .desktop-profile-effect-layer{background:radial-gradient(circle at 12% 15%,rgba(255,255,255,.68) 0 2px,transparent 3px),radial-gradient(circle at 82% 22%,rgba(255,238,153,.55) 0 2px,transparent 3px),radial-gradient(circle at 35% 78%,rgba(125,211,252,.52) 0 2px,transparent 3px),radial-gradient(circle at 70% 66%,rgba(216,180,254,.48) 0 2px,transparent 3px);animation:desktopProfileFloat 4s ease-in-out infinite alternate}
.public-profile-page[data-effect-mode="pulse"] .desktop-profile-effect-layer{background:radial-gradient(circle at 50% 16%,color-mix(in srgb,var(--profile-accent,#22c7f3) 40%,transparent),transparent 45%);animation:desktopProfilePulse 2.2s ease-in-out infinite}
.public-profile-page[data-effect-mode="rain"] .desktop-profile-effect-layer{background:repeating-linear-gradient(115deg,transparent 0 22px,rgba(34,211,238,.18) 22px 24px,transparent 24px 46px);background-size:100% 150px;animation:desktopProfileRain 5s linear infinite}
.public-profile-page[data-effect-mode="grid"] .desktop-profile-effect-layer{background-image:linear-gradient(rgba(56,189,248,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.11) 1px,transparent 1px);background-size:28px 28px;opacity:.58}
.public-profile-page[data-effect-mode="mist"] .desktop-profile-effect-layer{background:radial-gradient(ellipse at 18% 22%,rgba(255,255,255,.17),transparent 28%),radial-gradient(ellipse at 82% 38%,rgba(167,139,250,.2),transparent 34%),radial-gradient(ellipse at 48% 82%,rgba(34,211,238,.14),transparent 30%);filter:blur(3px);animation:desktopProfileMist 5s ease-in-out infinite alternate}
.public-profile-page[data-effect-mode="glow"] .desktop-profile-effect-layer{opacity:1;box-shadow:inset 0 0 150px color-mix(in srgb,var(--profile-accent,#22c7f3) 32%,transparent),0 0 70px color-mix(in srgb,var(--profile-accent,#22c7f3) 24%,transparent)}
.public-profile-page[data-effect-mode="orbital"] .desktop-profile-effect-layer::before,.public-profile-page[data-effect-mode="orbital"] .desktop-profile-effect-layer::after{content:"";position:absolute;left:12%;right:12%;top:12%;bottom:12%;border:2px solid color-mix(in srgb,var(--profile-accent,#22c7f3) 45%,transparent);border-radius:50%;box-shadow:0 0 34px color-mix(in srgb,var(--profile-accent,#22c7f3) 35%,transparent);animation:desktopProfileOrbit 6s linear infinite}.public-profile-page[data-effect-mode="orbital"] .desktop-profile-effect-layer::after{left:24%;right:24%;top:4%;bottom:4%;animation-direction:reverse;animation-duration:8s}
.public-profile-page.profile-effect-custom-preset .desktop-profile-effect-layer{display:block;background-image:var(--profile-effect-media);background-size:cover;background-position:center;opacity:.42;mix-blend-mode:screen}

.public-profile-page .profile-banner{isolation:isolate}.public-profile-page .profile-banner img{position:relative;z-index:0}.public-profile-page .profile-banner::after{z-index:3}.desktop-banner-overlay-layer{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.58}
.public-profile-page[data-overlay-mode="none"] .desktop-banner-overlay-layer{display:none}
.public-profile-page[data-overlay-mode="particles"] .desktop-banner-overlay-layer,.public-profile-page[data-overlay-mode="stars"] .desktop-banner-overlay-layer,.public-profile-page[data-overlay-mode="snow"] .desktop-banner-overlay-layer{background-image:radial-gradient(circle,rgba(255,255,255,.9) 1.5px,transparent 2.5px);background-size:22px 22px;animation:desktopProfileFloat 5s ease-in-out infinite alternate}
.public-profile-page[data-overlay-mode="rain"] .desktop-banner-overlay-layer{background:repeating-linear-gradient(105deg,transparent 0 14px,rgba(56,189,248,.42) 15px 17px);animation:desktopProfileRain 4s linear infinite}
.public-profile-page[data-overlay-mode="glitch"] .desktop-banner-overlay-layer{background:linear-gradient(90deg,rgba(255,0,80,.25),transparent 48%,rgba(0,220,255,.25));mix-blend-mode:screen;animation:desktopProfileGlitch 1.8s steps(2,end) infinite}
.public-profile-page[data-overlay-mode="sakura"] .desktop-banner-overlay-layer{background:radial-gradient(ellipse at 20% 10%,#ff9bcf 0 4px,transparent 5px),radial-gradient(ellipse at 80% 25%,#ffd7e9 0 4px,transparent 5px),radial-gradient(ellipse at 40% 70%,#ffb6d5 0 4px,transparent 5px);animation:desktopProfileRain 7s linear infinite}
.public-profile-page[data-overlay-mode="aurora"] .desktop-banner-overlay-layer{background:linear-gradient(115deg,rgba(34,197,94,.32),rgba(56,189,248,.22),rgba(139,92,246,.34));mix-blend-mode:screen}
.public-profile-page[data-overlay-mode="media"] .desktop-banner-overlay-layer,.public-profile-page.banner-overlay-custom-preset .desktop-banner-overlay-layer{background-image:var(--banner-overlay-media);background-size:cover;background-position:center;opacity:.65;mix-blend-mode:screen}

.desktop-avatar-decoration-layer{position:absolute;inset:0;border-radius:50%;z-index:3;pointer-events:none}
.public-profile-page[data-decoration-mode="none"] .desktop-avatar-decoration-layer{display:none}
.public-profile-page[data-decoration-mode="gold"] .desktop-avatar-decoration-layer{box-shadow:0 0 0 5px #ffd166 inset,0 0 28px rgba(245,158,11,.55)}
.public-profile-page[data-decoration-mode="neon"] .desktop-avatar-decoration-layer{box-shadow:0 0 0 5px #33ddff inset,0 0 32px #6d5cff}
.public-profile-page[data-decoration-mode="petals"] .desktop-avatar-decoration-layer::before{content:"✿";position:absolute;right:-4px;top:-10px;color:#ff9bd4;font-size:34px;text-shadow:0 0 15px rgba(255,155,212,.75)}.public-profile-page[data-decoration-mode="petals"] .desktop-avatar-decoration-layer::after{content:"✿";position:absolute;left:2px;bottom:-10px;color:#ffd0e8;font-size:24px}
.public-profile-page[data-decoration-mode="stars"] .desktop-avatar-decoration-layer::before{content:"✦";position:absolute;right:-5px;top:-8px;color:#fff3a5;font-size:34px;text-shadow:0 0 16px rgba(255,226,123,.8)}.public-profile-page[data-decoration-mode="stars"] .desktop-avatar-decoration-layer::after{content:"✦";position:absolute;left:3px;bottom:-7px;color:#fff;font-size:22px}
.public-profile-page[data-decoration-mode="flame"] .desktop-avatar-decoration-layer{box-shadow:0 0 0 5px #ff6b2b inset,0 0 32px rgba(239,17,17,.75);animation:desktopProfilePulse 1.5s ease-in-out infinite}
.public-profile-page[data-decoration-mode="crystal"] .desktop-avatar-decoration-layer{box-shadow:0 0 0 5px #7df2ff inset,0 0 30px rgba(167,180,255,.72)}
.public-profile-page[data-decoration-mode="rainbow"] .desktop-avatar-decoration-layer{background:conic-gradient(#ff4d6d,#ffb703,#72efdd,#4cc9f0,#7b2cff,#ff4d6d);padding:5px;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:desktopProfileOrbit 5s linear infinite}
.public-profile-page[data-decoration-mode="galaxy"] .desktop-avatar-decoration-layer{box-shadow:0 0 0 5px #6d5df6 inset,0 0 34px rgba(167,139,250,.8);background:radial-gradient(circle at 25% 18%,#fff 0 2px,transparent 3px),radial-gradient(circle at 80% 70%,#d8b4fe 0 2px,transparent 3px)}
.public-profile-page[data-decoration-mode="electric"] .desktop-avatar-decoration-layer{box-shadow:0 0 0 5px #22d3ee inset,0 0 36px rgba(34,211,238,.85);animation:desktopProfilePulse 1.2s steps(2,end) infinite}
.public-profile-page[data-decoration-mode="media"] .desktop-avatar-decoration-layer,.public-profile-page.avatar-decor-custom-preset .desktop-avatar-decoration-layer{display:block;inset:-26%;background-image:var(--avatar-decoration-media);background-size:contain;background-position:center;background-repeat:no-repeat;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}

.public-profile-page[data-border-mode="none"] .desktop-profile-border-layer{display:none}
.public-profile-page[data-border-mode]:not([data-border-mode="none"]) .desktop-profile-border-layer{padding:3px;background:linear-gradient(115deg,var(--desktop-border-a,#33d6ff),var(--desktop-border-b,#7c4dff),var(--desktop-border-c,#ef1734),var(--desktop-border-a,#33d6ff));background-size:260% 260%;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:desktopProfileBorderFlow 5.5s ease-in-out infinite;transform:none!important;transform-origin:center;will-change:background-position,filter,opacity}
.public-profile-page[data-border-mode="fire"] .desktop-profile-border-layer{--desktop-border-a:#ffd166;--desktop-border-b:#ff7b2b;--desktop-border-c:#ef1111}.public-profile-page[data-border-mode="ice"] .desktop-profile-border-layer{--desktop-border-a:#e0fbff;--desktop-border-b:#67d6ff;--desktop-border-c:#7aa2ff}.public-profile-page[data-border-mode="sakura"] .desktop-profile-border-layer{--desktop-border-a:#ffc1df;--desktop-border-b:#ff6aa9;--desktop-border-c:#fff}.public-profile-page[data-border-mode="gold"] .desktop-profile-border-layer{--desktop-border-a:#fff3a5;--desktop-border-b:#ffcc48;--desktop-border-c:#d99100}.public-profile-page[data-border-mode="rainbow"] .desktop-profile-border-layer{--desktop-border-a:#ff4d6d;--desktop-border-b:#72efdd;--desktop-border-c:#7b2cff}.public-profile-page.profile-border-custom-preset .desktop-profile-border-layer{--desktop-border-a:var(--profile-border-primary,#22c7f3);--desktop-border-b:var(--profile-border-secondary,#8b5cf6);--desktop-border-c:var(--profile-border-primary,#22c7f3)}

.public-profile-page.profile-theme-custom .profile-shell{background:linear-gradient(180deg,var(--profile-custom-primary,#22c7f3),var(--profile-custom-secondary,#08111d))!important}
.public-profile-page[data-layout-mode="centered"] .profile-header{grid-template-columns:1fr;justify-items:center;text-align:center;margin-top:-82px}.public-profile-page[data-layout-mode="centered"] .profile-actions{justify-content:center;max-width:none}.public-profile-page[data-layout-mode="centered"] .profile-badge-row{justify-content:center}
.public-profile-page[data-layout-mode="split"] .profile-shell{display:grid;grid-template-columns:minmax(340px,40%) minmax(0,1fr)}.public-profile-page[data-layout-mode="split"] .profile-banner{height:100%;min-height:720px;border-radius:16px 0 0 16px;grid-row:1/4}.public-profile-page[data-layout-mode="split"] .profile-header{grid-column:2;margin-top:0;padding-top:28px;grid-template-columns:auto minmax(0,1fr)}.public-profile-page[data-layout-mode="split"] .profile-actions{grid-column:1/-1;justify-content:flex-start}.public-profile-page[data-layout-mode="split"] .profile-body{grid-column:2;grid-template-columns:1fr;padding-top:8px}
.public-profile-page[data-layout-mode="compact"] .profile-banner{height:180px}.public-profile-page[data-layout-mode="compact"] .profile-header{margin-top:-52px}.public-profile-page[data-layout-mode="compact"] .profile-avatar-wrap{width:122px;height:122px}.public-profile-page[data-layout-mode="compact"] .profile-avatar-img{width:110px;height:110px}
.public-profile-page[data-layout-mode="wide"] .profile-banner{height:380px}.public-profile-page[data-layout-mode="wide"] .profile-body{grid-template-columns:minmax(0,1.8fr) minmax(280px,.55fr)}.public-profile-page[data-layout-mode="wide"] .profile-shell{border-radius:22px}
.public-profile-page[data-layout-mode="stacked"] .profile-body{grid-template-columns:1fr}.public-profile-page[data-layout-mode="stacked"] .profile-side-column{grid-template-columns:repeat(3,minmax(0,1fr))}.public-profile-page[data-layout-mode="stacked"] .profile-music-player{grid-column:span 1}

@keyframes desktopProfileFloat{to{background-position:26px 18px,-20px 16px,14px -20px,-18px -12px}}@keyframes desktopProfilePulse{50%{opacity:.46;transform:scale(1.012)}}@keyframes desktopProfileRain{to{background-position:0 160px}}@keyframes desktopProfileMist{to{transform:translate3d(18px,-8px,0)}}@keyframes desktopProfileOrbit{to{transform:rotate(360deg)}}@keyframes desktopProfileBorderFlow{0%,100%{background-position:0% 50%;filter:saturate(1);opacity:.94}50%{background-position:100% 50%;filter:saturate(1.18) brightness(1.08);opacity:1}}@keyframes desktopProfileGlitch{50%{transform:translateX(3px);filter:hue-rotate(45deg)}}
@media(max-width:1050px){.public-profile-page[data-layout-mode="split"] .profile-shell{display:block}.public-profile-page[data-layout-mode="split"] .profile-banner{height:260px;min-height:0;border-radius:16px 16px 0 0}.public-profile-page[data-layout-mode="split"] .profile-header{margin-top:-70px}.public-profile-page[data-layout-mode="stacked"] .profile-side-column{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.desktop-profile-effect-layer,.desktop-profile-border-layer,.desktop-banner-overlay-layer,.desktop-avatar-decoration-layer{animation:none!important}}

/* v8 hotfix: animated desktop border stays locked to the profile card */
.public-profile-page .desktop-profile-border-layer{inset:0!important;transform:none!important;clip-path:inset(0 round 16px)}
.public-profile-page[data-border-mode="none"] .desktop-profile-border-layer{display:none!important}

@keyframes profileRolePopoverIn{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:700px){.profile-badge-popover{min-width:200px;max-width:calc(100vw - 20px);max-height:300px}}