.profile-screen {
  min-height: 100%;
  padding: 18px 14px calc(var(--pp-auth-bottom-clearance, 104px) + env(safe-area-inset-bottom));
  overflow-x: clip;
  color: #fff;
  background:
    radial-gradient(circle at 85% 4%, rgba(122, 36, 214, 0.16), transparent 24rem),
    radial-gradient(circle at 10% 28%, rgba(214, 160, 54, 0.08), transparent 22rem),
    #050606;
}

.legacy-profile-hooks,
#profileForm { display: none !important; }

.pp-profile-shell {
  width: min(100%, 1160px);
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

.pp-profile-titlebar {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.78rem;
  font-weight: 800;
}

.pp-profile-titlebar button,
.pp-section-head button {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(219, 173, 68, 0.32);
  border-radius: 12px;
  color: #f5ce6a;
  background: rgba(255, 255, 255, 0.035);
  font: inherit;
}

.pp-profile-hero,
.pp-card,
.pp-performance,
.pp-profile-tabs {
  border: 1px solid rgba(219, 173, 68, 0.32);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28);
}

.pp-profile-hero {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 24px 30px;
  align-items: center;
  padding: 24px;
  overflow: hidden;
  border-radius: 22px;
  background:
    linear-gradient(120deg, rgba(18, 10, 27, 0.96), rgba(5, 7, 9, 0.98) 55%),
    #080809;
}

.pp-profile-hero::after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -70px;
  top: -100px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(133, 45, 221, 0.25), transparent 68%);
}

.pp-profile-photo { align-self: start; }

.pp-avatar {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border: 2px solid #d9a93d;
  border-radius: 50%;
  color: #fff2c1;
  background:
    radial-gradient(circle at 55% 30%, rgba(170, 78, 225, 0.7), transparent 32%),
    linear-gradient(145deg, #29143f, #0c0c0e);
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 4px rgba(219, 173, 68, 0.12), 0 12px 30px rgba(0, 0, 0, 0.4);
  font-weight: 900;
}

.pp-avatar.is-large { width: 136px; height: 136px; font-size: 1.65rem; }
.pp-avatar.has-image { color: transparent; }

.pp-profile-identity { min-width: 0; }
.pp-kicker {
  display: block;
  margin-bottom: 6px;
  color: #e5b94f;
  font-size: 0.69rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pp-profile-identity h1,
.pp-card h1,
.pp-card h2,
.pp-card h3 {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: Inter, system-ui, sans-serif;
}

.pp-profile-identity h1 {
  color: #fff;
  font-size: clamp(1.65rem, 5vw, 2.8rem);
  line-height: 1.05;
}

.pp-verified {
  display: inline-grid;
  width: 24px;
  height: 24px;
  margin-left: 8px;
  place-items: center;
  vertical-align: 0.14em;
  border-radius: 8px;
  color: #fff;
  background: #8338da;
  font-size: 0.75rem;
}

.pp-real-name { margin: 8px 0 0; color: rgba(255, 255, 255, 0.75); font-size: 1rem; }
.pp-bio { max-width: 64ch; margin: 12px 0 0; color: rgba(255, 255, 255, 0.68); line-height: 1.5; }
.pp-level-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.pp-level-row span {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border: 1px solid rgba(154, 59, 230, 0.65);
  border-radius: 999px;
  color: #eadcff;
  background: rgba(110, 26, 173, 0.12);
  font-size: 0.78rem;
  font-weight: 850;
}

.pp-xp-track {
  width: min(360px, 100%);
  height: 6px;
  display: block;
  margin-top: 13px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.09);
}

.pp-xp-track span { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #7b2fc6, #d04bf0); }
.pp-lifetime { display: flex; gap: 8px 12px; align-items: baseline; flex-wrap: wrap; margin-top: 17px; }
.pp-lifetime strong { color: #e6ba51; font-size: clamp(1.4rem, 4vw, 2rem); }
.pp-lifetime > span { color: rgba(255, 255, 255, 0.62); font-size: 0.8rem; }
.pp-private-balance { flex-basis: 100%; color: rgba(255, 255, 255, 0.48); }

.pp-profile-actions { z-index: 1; display: grid; gap: 10px; align-self: start; }
.pp-primary,
.pp-secondary {
  min-height: 46px;
  padding: 0 18px;
  border-radius: 12px;
  font: 850 0.78rem Inter, system-ui, sans-serif;
  letter-spacing: 0.04em;
}
.pp-primary { border: 0; color: #0a0710; background: linear-gradient(105deg, #efd06d, #cd4ceb); }
.pp-secondary { border: 1px solid #8c36d4; color: #fff; background: rgba(91, 24, 136, 0.12); }

.pp-affiliations {
  grid-column: 2 / -1;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.pp-affiliations > span {
  min-width: 170px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 1px 9px;
  align-items: center;
}
.pp-affiliations b { grid-row: 1 / 3; color: #e3b54a; font-size: 1.3rem; }
.pp-affiliations strong { min-width: 0; overflow-wrap: anywhere; color: #f1ca64; font-size: 0.84rem; }
.pp-affiliations small { color: rgba(255, 255, 255, 0.52); }

.pp-profile-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 4px;
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  background: rgba(7, 8, 10, 0.92);
}
.pp-profile-tabs button,
.pp-segments button {
  min-height: 46px;
  border: 0;
  border-radius: 11px;
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  font: 850 0.78rem Inter, system-ui, sans-serif;
}
.pp-profile-tabs button[aria-selected="true"],
.pp-segments button[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(110deg, rgba(74, 24, 119, 0.9), rgba(114, 35, 167, 0.52));
  box-shadow: inset 0 -2px #b24bec;
}
.pp-profile-tabs button:disabled { opacity: 0.35; }

.pp-tab-panel { display: grid; gap: 18px; }
.pp-performance {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border-radius: 18px;
  background: rgba(8, 9, 11, 0.9);
}
.pp-metric { min-width: 0; padding: 22px 18px; text-align: center; border-right: 1px solid rgba(255, 255, 255, 0.08); }
.pp-metric:last-child { border-right: 0; }
.pp-metric strong { display: block; overflow-wrap: anywhere; color: #fff; font-size: clamp(1.45rem, 4vw, 2rem); }
.pp-metric span { display: block; margin-top: 6px; color: #efc55e; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.pp-metric small { display: block; margin-top: 8px; color: rgba(255, 255, 255, 0.5); }

.pp-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.pp-card { min-width: 0; padding: 22px; border-radius: 18px; background: linear-gradient(145deg, rgba(12, 12, 15, 0.96), rgba(5, 6, 7, 0.98)); }
.pp-card h2 { font-size: 1.05rem; }
.pp-card > header p,
.pp-muted { color: rgba(255, 255, 255, 0.58); line-height: 1.55; }
.pp-season { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; background: linear-gradient(135deg, rgba(55, 19, 79, 0.85), rgba(8, 8, 12, 0.96)); }
.pp-season p { max-width: 48ch; color: rgba(255, 255, 255, 0.62); line-height: 1.5; }
.pp-season-mark { color: #c158ed; font-size: clamp(3rem, 10vw, 6rem); filter: drop-shadow(0 0 22px rgba(187, 68, 237, 0.28)); }

.pp-section-head,
.pp-category-card > header {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.pp-segments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 13px;
  background: #060708;
}
.pp-category-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.pp-category-metrics .pp-metric { padding-inline: 10px; }
.pp-inline-empty { display: grid; gap: 7px; padding: 24px 12px; color: rgba(255, 255, 255, 0.58); text-align: center; }
.pp-inline-empty strong { color: #fff; }

.pp-achievement-strip,
.pp-achievement-grid { display: grid; gap: 10px; }
.pp-achievement-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pp-achievement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pp-achievement {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(142, 55, 205, 0.28);
  border-radius: 14px;
  background: rgba(94, 26, 136, 0.08);
}
.pp-achievement > span { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #a344dd; border-radius: 50%; color: #e8c5ff; }
.pp-achievement p { margin: 4px 0; color: rgba(255, 255, 255, 0.58); line-height: 1.4; font-size: 0.76rem; }
.pp-achievement small { color: #d9ae48; }
.pp-achievement.is-locked { opacity: 0.5; filter: grayscale(0.65); }

.pp-activity,
.pp-pick-list { display: grid; }
.pp-activity article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.pp-activity article:last-child { border-bottom: 0; }
.pp-activity article > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: #eac3ff; background: rgba(128, 46, 184, 0.25); }
.pp-activity p { margin: 4px 0 0; color: rgba(255, 255, 255, 0.55); font-size: 0.76rem; }
.pp-activity time { color: rgba(255, 255, 255, 0.46); font-size: 0.7rem; }
.pp-activity b { grid-column: 3; color: #5ef58c; font-size: 0.72rem; }

.pp-pick-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 18px 0; }
.pp-pick-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.pp-pick-main > span { color: #e8bd54; font-size: 0.68rem; font-weight: 900; text-transform: uppercase; }
.pp-pick-main h3 { margin-top: 5px; font-size: 1rem; }
.pp-pick-main p { color: rgba(255, 255, 255, 0.52); }
.pp-pick-meta { display: grid; gap: 7px; justify-items: end; align-content: start; text-align: right; }
.pp-pick-meta b { padding: 5px 8px; border-radius: 99px; color: #f3d6ff; background: rgba(133, 45, 194, 0.22); font-size: 0.62rem; text-transform: uppercase; }
.pp-pick-meta time { color: rgba(255, 255, 255, 0.48); font-size: 0.72rem; }
.pp-pick-meta strong { color: #66f59a; }
.pp-pick-meta button { min-height: 44px; border: 0; color: #e6bb52; background: transparent; text-decoration: underline; }

.pp-empty { display: grid; justify-items: center; padding-block: 50px; text-align: center; }
.pp-empty p { max-width: 58ch; color: rgba(255, 255, 255, 0.58); line-height: 1.55; }
.pp-empty-icon { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 50%; color: #e5b94f; background: rgba(133, 45, 194, 0.18); font-size: 1.6rem; }

.pp-profile-loading { min-height: 460px; display: grid; align-content: center; gap: 12px; }
.pp-profile-loading span { height: 58px; border-radius: 14px; background: linear-gradient(90deg, #0b0c0e, #17121c, #0b0c0e); background-size: 220% 100%; animation: pp-shimmer 1.5s linear infinite; }
.pp-profile-loading span:first-child { height: 190px; }
.pp-profile-loading p { color: rgba(255, 255, 255, 0.55); text-align: center; }
@keyframes pp-shimmer { to { background-position: -220% 0; } }

.pp-dialog-open { overflow: hidden; }
.pp-dialog-backdrop {
  position: fixed;
  z-index: 2500;
  inset: 0;
  display: grid;
  align-items: end;
  padding: 18px;
  background: rgba(0, 0, 0, 0.76);
  backdrop-filter: blur(7px);
}
.pp-edit-dialog {
  width: min(100%, 680px);
  max-height: min(90dvh, 820px);
  margin: 0 auto;
  overflow: auto;
  border: 1px solid rgba(219, 173, 68, 0.45);
  border-radius: 22px 22px 14px 14px;
  color: #fff;
  background: #09090c;
  box-shadow: 0 -24px 70px rgba(0, 0, 0, 0.6);
}
.pp-edit-dialog > header {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(9, 9, 12, 0.97);
}
.pp-edit-dialog header h2 { margin: 0; }
.pp-edit-dialog header button { width: 44px; height: 44px; border: 0; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, 0.08); font-size: 1.6rem; }
.pp-edit-dialog form { display: grid; gap: 16px; padding: 20px; }
.pp-edit-dialog label { display: grid; gap: 7px; color: #f3d477; font-size: 0.78rem; font-weight: 800; }
.pp-edit-dialog label > span { color: rgba(255, 255, 255, 0.45); font-weight: 500; }
.pp-edit-dialog input:not([type="checkbox"]),
.pp-edit-dialog textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 11px;
  color: #fff;
  background: #111216;
  font: inherit;
}
.pp-edit-dialog textarea { resize: vertical; }
.pp-edit-dialog label small { color: rgba(255, 255, 255, 0.46); font-weight: 500; }
.pp-edit-dialog fieldset { display: grid; gap: 7px; margin: 4px 0 0; padding: 14px; border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 14px; }
.pp-edit-dialog legend { padding: 0 7px; color: #f0c75e; font-weight: 850; }
.pp-switch { grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 58px; padding: 7px 0; }
.pp-switch > span { display: grid; gap: 3px; }
.pp-switch strong { color: #fff; }
.pp-switch input { width: 22px; height: 22px; accent-color: #a944dd; }
.pp-edit-dialog footer { display: flex; gap: 10px; justify-content: flex-end; }
.pp-form-message:not(:empty) { padding: 12px; border: 1px solid rgba(255, 97, 136, 0.45); border-radius: 10px; color: #ffb2c5; background: rgba(151, 21, 55, 0.16); }

.pp-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.profile-screen button,
.profile-screen input,
.profile-screen textarea { touch-action: manipulation; }
.profile-screen :is(button, input, textarea, [tabindex]):focus-visible {
  outline: 3px solid #f2cf67;
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .profile-screen { padding-inline: 12px; }
  .pp-profile-shell { gap: 14px; }
  .pp-profile-hero { grid-template-columns: 86px minmax(0, 1fr); gap: 15px; padding: 18px 16px; }
  .pp-avatar.is-large { width: 82px; height: 82px; font-size: 1rem; }
  .pp-profile-actions { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .pp-profile-actions:has(.pp-primary:only-child) { grid-template-columns: 1fr; }
  .pp-affiliations { grid-column: 1 / -1; }
  .pp-performance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-metric { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .pp-metric:nth-child(2n) { border-right: 0; }
  .pp-overview-grid { grid-template-columns: 1fr; }
  .pp-category-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-achievement-strip,
  .pp-achievement-grid { grid-template-columns: 1fr; }
  .pp-pick-filters { display: flex; overflow-x: auto; scrollbar-width: none; }
  .pp-pick-filters button { min-width: max-content; padding-inline: 15px; }
  .pp-pick-list article { grid-template-columns: 1fr; }
  .pp-pick-meta { justify-items: start; text-align: left; }
  .pp-pick-meta b,
  .pp-pick-meta time,
  .pp-pick-meta strong,
  .pp-pick-meta button { grid-column: auto; }
  .pp-dialog-backdrop { padding: 0; }
  .pp-edit-dialog { max-height: 94dvh; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom); }
}

@media (max-width: 410px) {
  .pp-profile-identity h1 { font-size: 1.48rem; }
  .pp-profile-tabs button,
  .pp-segments button { font-size: 0.68rem; }
  .pp-card { padding: 17px 14px; }
  .pp-season-mark { display: none; }
}

@media (min-width: 960px) {
  .profile-screen { padding: 28px 30px 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-profile-loading span { animation: none; }
  .profile-screen *,
  .profile-screen *::before,
  .profile-screen *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}