/* My Profile (signed in) - wide layout, same language as My Nexus: hairlines, quiet fills, one accent. */
.mb .mb-main:has(.pp:not([hidden])) { width: min(1480px, calc(100% - 64px)); padding-top: 96px; }
.mb .pp {
  --g: #00ff9d; --c: #00d8ff; --txt: #f0f2f5; --mut: #8a8d9b; --dim: #5d6070; --ln: rgba(255,255,255,.08);
  --fill: rgba(10,11,16,.6); --ease: cubic-bezier(.16,1,.3,1);
  color: var(--txt); font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
}
.mb .pp [hidden] { display: none !important; }
.mb .pp svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Header card ---------- */
.pp-cover { position: relative; margin: 0 0 18px; padding: 26px 28px; border: 1px solid var(--ln); border-radius: 26px; overflow: visible;
  background: radial-gradient(640px 260px at 0% 0%, rgba(0,255,157,.11), transparent 70%), radial-gradient(560px 260px at 100% 100%, rgba(0,216,255,.09), transparent 70%), rgba(11,12,18,.78);
  box-shadow: 0 30px 70px -45px rgba(0,0,0,.9); }
.pp-id { display: flex; align-items: center; gap: 24px; }
.mb .pp .pp-avatar { flex: none; margin: 0; }
.mb .pp #acAvatar { flex: 0 0 104px !important; width: 104px !important; height: 104px !important; min-width: 104px; max-width: 104px; background: linear-gradient(135deg, var(--g), var(--c)); color: #05110c; font: 800 40px "Plus Jakarta Sans", sans-serif; box-shadow: 0 0 0 4px #0b0c12, 0 0 0 5px rgba(255,255,255,.14), 0 18px 40px -12px rgba(0,255,157,.35); }
.mb .pp .pf-menu { left: 0; transform: none; }
.pp-who { flex: 1; min-width: 0; }
.pp-greet { margin: 0; color: var(--g); font-size: 11.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.pp-name { margin: 6px 0 4px; overflow: hidden; color: #fff; font: 800 clamp(1.8rem, 3vw, 2.6rem)/1.1 "Plus Jakarta Sans", Inter, sans-serif; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
.pp-handle { display: flex; flex-wrap: wrap; gap: 0 8px; margin: 0 0 12px; color: var(--mut); font-size: 14px; }
.pp-handle .dot { margin-right: 8px; color: var(--dim); }
.pp-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-badge { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 12px; border: 1px solid var(--ln); border-radius: 99px; background: rgba(255,255,255,.04); color: #dfe1e7; font-size: 12.5px; font-weight: 700; text-decoration: none; }
.pp-badge svg { width: 14px; height: 14px; }
.pp-badge.membership.plus { border-color: rgba(0,216,255,.35); background: rgba(0,216,255,.1); color: #7fe9fb; }
.pp-badge.membership.vip { border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.1); color: #fcd77a; }
.pp-badge.membership.basic { color: var(--mut); }
.pp-badge.admin { border-color: rgba(255,111,181,.35); background: rgba(255,111,181,.1); color: #ff9fcf; }
.pp-badge.live { border-color: rgba(145,70,255,.45); background: rgba(145,70,255,.16); color: #d6c2ff; }
.pp-badge.live i { width: 7px; height: 7px; border-radius: 50%; background: #ff4d6d; box-shadow: 0 0 10px #ff4d6d; }
.pp-actions { display: flex; flex-direction: column; gap: 8px; align-self: center; }
.pp-photo-status { margin: 10px 0 0; color: var(--mut); font-size: 12.5px; }
.pp-photo-status:empty { display: none; }

/* ---------- Buttons ---------- */
.pp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border: 1px solid var(--ln); border-radius: 12px; background: rgba(255,255,255,.04); color: #e4e6eb; font: 600 13.5px "Plus Jakarta Sans", Inter, sans-serif; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .2s, border-color .2s, color .2s, filter .2s; }
.pp-btn:hover { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; }
.pp-btn svg { width: 16px; height: 16px; }
.pp-btn.sm { min-height: 36px; padding: 0 14px; border-radius: 10px; font-size: 13px; }
.pp-btn.primary { border-color: transparent; background: linear-gradient(135deg, var(--g), var(--c)); color: #05110c; font-weight: 700; }
.pp-btn.primary:hover { color: #05110c; filter: brightness(1.06); }
.pp-btn.danger { border-color: rgba(255,77,109,.3); background: rgba(255,77,109,.08); color: #ff8098; }
.pp-btn.danger:hover { background: rgba(255,77,109,.16); color: #fff; }
.pp-btn:disabled { opacity: .5; cursor: default; }
.pp-btn .spinner { display: none; width: 15px; height: 15px; }
.pp-btn.is-busy .spinner { display: inline-block; }
.pp-btn.is-busy { pointer-events: none; opacity: .8; }

/* ---------- Stats strip ---------- */
.pp-stats { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); margin: 0 0 18px; border: 1px solid var(--ln); border-radius: 20px; background: rgba(11,12,18,.72); }
.pp-stat { min-width: 0; padding: 18px 20px 16px; }
.pp-stat + .pp-stat { box-shadow: inset 1px 0 0 var(--ln); }
.pp-stat span { display: block; color: var(--mut); font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.pp-stat strong { display: block; margin-top: 7px; overflow: hidden; color: #fff; font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.pp-stat strong.pos, .pp-stat strong.good { color: var(--g); }
.pp-stat strong.neg, .pp-stat strong.bad { color: #ff6b86; }
.pp-stat small { display: block; margin-top: 3px; overflow: hidden; color: var(--dim); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Cards ---------- */
.pp-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); gap: 18px; align-items: start; }
.pp-col { display: grid; gap: 18px; min-width: 0; }
.pp-card { padding: 24px 26px 26px; border: 1px solid var(--ln); border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 140px), rgba(11,12,18,.74); box-shadow: 0 30px 70px -45px rgba(0,0,0,.9); }
.pp-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.pp-card-h h2 { margin: 0 0 4px; color: #fff; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.pp-card-h p { margin: 0; color: var(--mut); font-size: 13.5px; line-height: 1.5; }
.pp-count { flex: none; padding: 4px 10px; border-radius: 99px; background: rgba(0,255,157,.1); color: var(--g); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Profile details */
.pp-photo { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 14px; margin: 0 0 20px; padding: 14px; border: 1px solid var(--ln); border-radius: 16px; background: rgba(255,255,255,.02); }
.pp-mini { display: grid; place-items: center; width: 52px; height: 52px; overflow: hidden; border-radius: 50%; background: linear-gradient(135deg, var(--g), var(--c)); color: #05110c; font: 800 20px "Plus Jakarta Sans", sans-serif; }
.pp-mini img { width: 100%; height: 100%; object-fit: cover; }
.pp-photo b { display: block; color: #fff; font-size: 14px; }
.pp-photo div > span { display: block; color: var(--mut); font-size: 12.5px; }
.pp-photo-btns { display: flex; gap: 8px; }
.pp-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.pp-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.pp-field.full { grid-column: 1 / -1; }
.pp-field > span { color: #d9dbe2; font-size: 13px; font-weight: 700; }
.pp-field small { margin-left: 6px; color: var(--dim); font-weight: 500; }
.mb .pp .mb-input { width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--ln); border-radius: 12px; background: var(--fill); color: #fff; font-size: 14px; }
.mb .pp .mb-input:focus { border-color: rgba(0,216,255,.45); box-shadow: 0 0 0 3px rgba(0,216,255,.08); outline: none; }
.pp .mb-error { margin: 14px 0 0; }
.pp-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--ln); }
.pp-form-foot p { margin: 0; color: var(--mut); font-size: 13px; }
.pp-form-foot a { color: var(--c); font-weight: 600; text-decoration: none; }
.pp-form-foot a:hover { text-decoration: underline; }

/* Achievements */
.pp-progress { height: 6px; margin: -6px 0 18px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.06); }
.pp-progress i { display: block; width: 16%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--g), var(--c)); transition: width .8s var(--ease); }
.pp-badge-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.pp-ach { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 13px 14px; border: 1px solid var(--ln); border-radius: 16px; background: rgba(255,255,255,.02); opacity: .55; filter: grayscale(.9); transition: opacity .3s, filter .3s, border-color .3s; }
.pp-ach.got { opacity: 1; filter: none; border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.035); }
.pp-ach i { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--a) 14%, transparent); color: var(--a); }
.pp-ach i svg { width: 19px; height: 19px; }
.pp-ach b { display: block; overflow: hidden; color: #fff; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.pp-ach small { display: block; overflow: hidden; color: var(--mut); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

/* Membership */
.pp-member { position: relative; overflow: hidden; }
.pp-member::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #5d6070, #8a8d9b); }
.pp-member.plus::before { background: linear-gradient(90deg, var(--g), var(--c)); }
.pp-member.vip::before { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.pp-member-top { display: flex; align-items: center; gap: 14px; }
.pp-member-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: rgba(255,255,255,.05); color: var(--mut); }
.pp-member.plus .pp-member-ic { background: rgba(0,216,255,.12); color: #7fe9fb; }
.pp-member.vip .pp-member-ic { background: rgba(251,191,36,.12); color: #fcd77a; }
.pp-member-ic svg { width: 22px; height: 22px; }
.pp-member-top small { color: var(--mut); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.pp-member-top h2 { margin: 2px 0 0; color: #fff; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.pp-member-line { margin: 14px 0 12px; color: #d9dbe2; font-size: 13.5px; font-weight: 600; }
.pp-perks { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.pp-perks li { display: flex; align-items: center; gap: 9px; color: var(--mut); font-size: 13px; }
.pp-perks svg { flex: none; width: 15px; height: 15px; color: var(--g); }
.pp-member-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-member-btns .pp-btn { flex: 1; }

/* Redeem */
.pp-redeem { display: flex; gap: 8px; }
.mb .pp .pp-redeem .mb-input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; text-transform: uppercase; }
.pp-hint { margin: 10px 0 0; color: var(--mut); font-size: 12.5px; }
.pp-hint:empty { display: none; }
.pp-hint.good { color: var(--g); }
.pp-hint.bad { color: #ff8098; }

/* Shortcuts */
.pp-links { display: grid; gap: 4px; margin: -6px 0 0; padding: 0; list-style: none; }
.pp-links a { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; color: inherit; text-decoration: none; transition: background .2s; }
.pp-links a:hover { background: rgba(255,255,255,.04); }
.pp-li { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--a) 13%, transparent); color: var(--a); }
.pp-li svg { width: 17px; height: 17px; }
.pp-links b { display: block; color: #fff; font-size: 14px; }
.pp-links small { display: block; overflow: hidden; color: var(--mut); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.pp-links .go { width: 16px; height: 16px; color: var(--dim); }

/* ---------- Smaller screens ---------- */
@media (max-width: 1080px) {
  .pp-grid { grid-template-columns: 1fr; }
  .pp-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .pp-stat:nth-child(4) { box-shadow: none; }
  .pp-stat:nth-child(n+4) { border-top: 1px solid var(--ln); }
}
@media (max-width: 720px) {
  .mb .mb-main:has(.pp:not([hidden])) { width: calc(100% - 24px); padding-top: 88px; }
  .pp-cover { padding: 22px 18px; border-radius: 22px; }
  .pp-id { flex-direction: column; text-align: center; gap: 14px; }
  .mb .pp #acAvatar { flex-basis: 88px !important; width: 88px !important; height: 88px !important; min-width: 88px; max-width: 88px; font-size: 34px; }
  .mb .pp .pf-menu { left: 50%; transform: translateX(-50%); }
  .pp-name { white-space: normal; }
  .pp-handle, .pp-badges { justify-content: center; }
  .pp-actions { flex-direction: row; width: 100%; }
  .pp-actions .pp-btn { flex: 1; }
  .pp-photo-status { text-align: center; }
  .pp-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pp-stat { padding: 14px 16px 12px; }
  .pp-stat:first-child { grid-column: 1 / -1; }
  .pp-stat + .pp-stat { box-shadow: none; }
  .pp-stat:nth-child(n+2) { border-top: 1px solid var(--ln); }
  .pp-stat:nth-child(odd):not(:first-child) { box-shadow: inset 1px 0 0 var(--ln); }
  .pp-card { padding: 20px 16px 22px; border-radius: 18px; }
  .pp-photo { grid-template-columns: auto minmax(0,1fr); }
  .pp-photo-btns { grid-column: 1 / -1; }
  .pp-photo-btns .pp-btn { flex: 1; }
  .pp-fields { grid-template-columns: 1fr; }
  .pp-form-foot .pp-btn { width: 100%; }
  .pp-badge-grid { grid-template-columns: 1fr 1fr; }
  .pp-ach { flex-direction: column; align-items: flex-start; gap: 9px; }
  .pp-ach b, .pp-ach small { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .pp-progress i, .pp-ach { transition: none; } }