/* ==========================================================================
   EzyGamers — authentication modal, profile menu and profile page
   ========================================================================== */

/* ==========================================================================
   Header avatar
   ========================================================================== */
.avatar {
  position: relative;
  overflow: visible;
}
.avatar--guest {
  background: rgba(255, 255, 255, .06);
  border-color: var(--line-strong);
  color: var(--muted);
  font-size: 12px;
}

/* Signed-in header chip: avatar + name + caret, opening the account menu.
   Built from the same tokens as .avatar and .btn-login so it belongs in the
   existing header without a redesign. */
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 12px 0 5px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  color: #fff;
  max-width: 190px;
  transition: background .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
}
.user-chip:hover { background: rgba(255, 255, 255, .1); border-color: var(--purple-bright); }
.user-chip:active { transform: scale(.98); }
.user-chip__ava {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 15px;
  background: var(--grad);
  color: #0b0c14;
}
.user-chip__name {
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-chip__caret { flex: 0 0 auto; color: var(--muted); font-size: 11px; margin-left: -2px; }

/* Loading placeholder while the session is being restored — same footprint as
   the chip, so the header does not shift when the real state arrives. */
.auth-skel {
  display: inline-block;
  width: 118px; height: 40px;
  border-radius: 999px;
  background: linear-gradient(100deg, rgba(255,255,255,.05) 30%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.05) 70%);
  background-size: 200% 100%;
  animation: auth-skel 1.1s ease-in-out infinite;
}
@keyframes auth-skel { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .auth-skel { animation: none; } }

.btn-login {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--grad);
  color: #0b0c14;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .01em;
  box-shadow: 0 6px 18px rgba(108, 76, 255, .38);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.btn-login:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(108, 76, 255, .55); }
.btn-login:active { transform: translateY(0) scale(.97); }
.btn-login svg { width: 17px; height: 17px; }

/* ==========================================================================
   Profile dropdown panel
   ========================================================================== */
.acct {
  position: fixed;
  top: calc(var(--header-h) + 8px);
  right: 14px;
  width: 320px;
  max-height: calc(100vh - var(--header-h) - 24px);
  overflow-y: auto;
  z-index: 120;
  border-radius: 16px;
  background: linear-gradient(165deg, #1c1e2d, #14151f);
  border: 1px solid var(--line-strong);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .62);
  padding: 22px 18px 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(.97);
  transform-origin: top right;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.acct.is-open { opacity: 1; visibility: visible; transform: none; }

.acct__id { text-align: center; margin-bottom: 16px; }
.acct__ava {
  width: 74px;
  height: 74px;
  margin: 0 auto 10px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 34px;
  background: var(--grad);
  border: 3px solid rgba(255, 255, 255, .16);
  box-shadow: 0 10px 28px rgba(108, 76, 255, .45);
}
.acct__name { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.acct__mail {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  word-break: break-all;
}

.acct__actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.acct__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .045);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  transition: all .16s var(--ease);
}
.acct__btn:hover {
  color: #fff;
  border-color: var(--purple-bright);
  background: rgba(108, 76, 255, .16);
  transform: translateY(-2px);
}
.acct__btn svg { width: 17px; height: 17px; }

.acct__sep { height: 1px; background: var(--line); margin: 12px 0; }

.acct__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.acct__item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.acct__item svg { width: 18px; height: 18px; flex: 0 0 18px; }
.acct__item--danger:hover { background: rgba(244, 63, 94, .14); color: #fda4af; }
.acct__item .chev { margin-left: auto; color: var(--muted-dim); font-size: 16px; }

.acct__lang {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 4px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}
.acct__lang span { font-size: 12px; color: var(--muted-dim); }
.acct__lang select {
  margin-left: auto;
  height: 32px;
  padding: 0 26px 0 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #1f2231 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239aa0b5' stroke-width='2.6' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 8px center;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

/* ==========================================================================
   Auth modal
   ========================================================================== */
.auth-scrim {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5, 6, 12, .78);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s var(--ease), visibility .24s;
}
.auth-scrim.is-open { opacity: 1; visibility: visible; }

.auth {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  border-radius: 20px;
  background:
    radial-gradient(600px 220px at 50% 0%, rgba(108, 76, 255, .28), transparent 62%),
    linear-gradient(165deg, #1d1f2f, #131420);
  border: 1px solid var(--line-strong);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .7);
  padding: 30px 28px 26px;
  transform: translateY(18px) scale(.96);
  transition: transform .28s var(--ease);
}
.auth-scrim.is-open .auth { transform: none; }

.auth__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  transition: all .16s var(--ease);
}
.auth__close:hover { color: #fff; background: rgba(255, 255, 255, .12); }

.auth__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 6px;
}
.auth__brand img { width: 32px; height: 32px; border-radius: 10px; }
.auth__brand span { font-size: 16px; font-weight: 800; letter-spacing: -.03em; }
.auth__brand em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.auth__title {
  text-align: center;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.03em;
  margin-top: 12px;
}
.auth__sub {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  margin: 6px 0 20px;
}

.auth__title--big {
  font-size: clamp(24px, 5vw, 30px);
  margin: 18px 0 22px;
}

/* ---- social sign-in buttons ------------------------------------------- */
.soc-list { display: flex; flex-direction: column; gap: 10px; }

.soc {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), filter .16s var(--ease);
}
.soc:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
.soc:active { transform: translateY(0) scale(.985); }

.soc__ico {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  flex: 0 0 26px;
}
.soc__label { flex: 1 1 auto; text-align: center; min-width: 0; }

.soc--google   { background: #fff; color: #1f1f1f; }
.soc--facebook { background: #1877f2; color: #fff; }
.soc--apple    { background: #fff; color: #000; }

/* Not configured on this server — still visible, honestly labelled.
   The badge sits in the flex row rather than floating over it: as an absolute
   box it covered the centred label, so "Continue with Google" read as
   "Continue with Goog…". The icon is mirrored on the other side so the label
   stays optically centred between them. */

/* Loading: the button has started the redirect to Google. Dim it, block a
   second click, and spin the icon so it reads as working. */
.soc.is-loading { opacity: .7; cursor: progress; }
.soc.is-loading .soc__ico { animation: soc-spin .7s linear infinite; }
.soc[disabled] { pointer-events: none; }
@keyframes soc-spin { to { transform: rotate(360deg); } }
/* The icon sits at the leading edge, so the label needs the same space back
   on the trailing side to read as centred in the button. */
.soc__label { padding-right: 26px; }

/* ---- OR divider ------------------------------------------------------- */
.auth__or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0 18px;
}
.auth__or::before, .auth__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-strong);
}
.auth__or span {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--muted);
}

/* ---- taller single email field (matches the reference) ---------------- */
.field-wrap--tall input {
  height: 54px;
  padding: 0 18px;
  font-size: 15px;
  border-radius: 12px;
}

.auth__submit:disabled {
  background: #2a2d3f;
  color: var(--muted-dim);
  box-shadow: none;
  cursor: not-allowed;
}

/* ---- locked identity row on step 2 ----------------------------------- */
.ident {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
}
.ident__ava {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 16px;
  background: var(--grad);
  flex: 0 0 32px;
}
.ident__mail {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  margin-bottom: 20px;
}
.auth__tab {
  padding: 9px 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  transition: all .18s var(--ease);
}
.auth__tab.is-active {
  background: var(--grad);
  color: #0b0c14;
  box-shadow: 0 6px 16px rgba(108, 76, 255, .4);
}

.field-group { margin-bottom: 14px; }
.field-group label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.field-wrap { position: relative; }
.field-wrap input {
  width: 100%;
  height: 46px;
  padding: 0 44px 0 15px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #1b1d2c;
  color: #fff;
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s;
}
.field-wrap input::placeholder { color: var(--muted-dim); }
.field-wrap input:focus {
  border-color: var(--purple-bright);
  background: #1f2233;
  box-shadow: 0 0 0 4px rgba(108, 76, 255, .18);
}
.field-wrap input:disabled { opacity: .55; cursor: not-allowed; }
.field-wrap.is-bad input { border-color: var(--red, #f43f5e); box-shadow: 0 0 0 4px rgba(244, 63, 94, .14); }
.field-wrap.is-good input { border-color: rgba(34, 197, 94, .6); }

.field-eye {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
}
/* It is in the tab order now, so it needs to show where the focus is. */
.field-eye:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 1px;
  background: rgba(255, 255, 255, .07);
}
.field-eye[aria-pressed="true"] { color: var(--cyan); }

/* A thumb needs more than 34px. The button keeps its look and grows its hit
   area, which is why this sets the box rather than the icon. */
@media (pointer: coarse) {
  .field-eye { width: 44px; height: 44px; top: 1px; right: 1px; }
}
.field-eye:hover { color: #fff; background: rgba(255, 255, 255, .07); }

.field-error {
  display: block;
  min-height: 15px;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #fda4af;
}
/* Colour alone must not be the signal: an error is announced by role="alert"
   on this element and marked on the input with aria-invalid, and this adds a
   visible mark for anyone who cannot pick the red out. */
.field-error:not(:empty)::before {
  content: "⚠ ";
  font-weight: 800;
}

.auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -4px 0 16px;
}
.link-btn {
  border: 0;
  background: none;
  padding: 0;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 700;
}
.link-btn:hover { text-decoration: underline; }

.auth__submit {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: var(--grad);
  color: #0b0c14;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 10px 26px rgba(108, 76, 255, .42);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), opacity .16s;
}
.auth__submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(108, 76, 255, .58); }
.auth__submit:disabled { opacity: .6; cursor: not-allowed; }

/* Working ----------------------------------------------------------------
   The button keeps its gradient and its size while a request runs - going
   flat grey mid-submit reads as "disabled, nothing is happening", which is
   the opposite of what is true. The label changes ("Logging in…") and a
   spinner sits beside it, so the state is legible without motion alone
   carrying the message. */
.auth__submit.is-loading {
  background: var(--grad);
  color: #0b0c14;
  opacity: 1;
  cursor: progress;
  /* Flex, so the spinner and the label travel together and stay centred as
     the label changes width. Absolute positioning needed arithmetic against
     the button's own width and got it wrong. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.auth__submit.is-loading::before {
  content: "";
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(11, 12, 20, .32);
  border-top-color: #0b0c14;
  animation: auth-spin .7s linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .auth__submit.is-loading::before { animation-duration: 2.2s; }
}

.auth__alert {
  display: none;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  margin-bottom: 16px;
}
.auth__alert.is-on { display: block; animation: authIn .2s var(--ease); }
.auth__alert--bad {
  background: rgba(244, 63, 94, .13);
  border: 1px solid rgba(244, 63, 94, .4);
  color: #fda4af;
}
.auth__alert--good {
  background: rgba(34, 197, 94, .13);
  border: 1px solid rgba(34, 197, 94, .4);
  color: #86efac;
}
@keyframes authIn { from { opacity: 0; transform: translateY(-5px); } }

.auth__foot {
  text-align: center;
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted);
}
.auth__guest {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 12px;
  color: var(--muted-dim);
}
.auth__guest-note { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted-dim); }

/* Carrying on without an account is a real choice, so it gets a real button —
   quieter than the primary action, but not hidden behind the close icon. */
.auth__ghost {
  width: 100%;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .05);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  transition: background .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
}
.auth__ghost:hover { background: rgba(255, 255, 255, .11); border-color: var(--purple-bright); }
.auth__ghost:active { transform: scale(.985); }

/* avatar picker (edit profile) */
.ava-picker {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin-top: 4px;
}
.ava-opt {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  transition: all .14s var(--ease);
}
.ava-opt:hover { transform: translateY(-2px); border-color: var(--purple-bright); }
.ava-opt.is-on {
  background: rgba(108, 76, 255, .3);
  border-color: var(--purple-bright);
  box-shadow: 0 0 0 3px rgba(108, 76, 255, .22);
}

/* ==========================================================================
   Profile page
   ========================================================================== */
.pf-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 26px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(760px 260px at 8% 0%, rgba(108, 76, 255, .22), transparent 62%),
    linear-gradient(140deg, #191b2a, #12131e);
  margin-bottom: 24px;
}
.pf-ava {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 44px;
  background: var(--grad);
  border: 3px solid rgba(255, 255, 255, .18);
  box-shadow: 0 14px 36px rgba(108, 76, 255, .45);
  flex: 0 0 auto;
}
.pf-id { min-width: 0; }
.pf-name { font-size: clamp(22px, 3vw, 30px); font-weight: 900; letter-spacing: -.03em; }
.pf-mail { color: var(--muted); font-size: 14px; margin-top: 3px; }
.pf-bio { color: var(--muted); font-size: 14px; margin-top: 8px; max-width: 480px; }
.pf-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pf-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.pf-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}
.pf-stat {
  padding: 18px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--line);
  text-align: center;
  transition: transform .18s var(--ease), border-color .18s var(--ease);
}
.pf-stat:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.pf-stat b { display: block; font-size: 27px; font-weight: 900; font-variant-numeric: tabular-nums; }
.pf-stat span { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pf-stat--gold b { color: var(--gold); }
.pf-stat--cyan b { color: var(--cyan); }
.pf-stat--green b { color: var(--green); }
.pf-stat--purple b { color: var(--purple-bright); }

.ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.ach {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--line);
  opacity: .5;
  filter: grayscale(1);
  transition: all .2s var(--ease);
}
.ach.is-on {
  opacity: 1;
  filter: none;
  border-color: rgba(251, 191, 36, .4);
  background: linear-gradient(140deg, rgba(251, 191, 36, .12), var(--card));
}
.ach__ico {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 21px;
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--line-strong);
  flex: 0 0 auto;
}
.ach__t { font-size: 14px; font-weight: 700; }
.ach__d { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.ach__bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  margin-top: 7px;
  overflow: hidden;
}
.ach__bar i { display: block; height: 100%; background: var(--grad); }

.pf-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pf-table th {
  text-align: left;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 12px 10px;
  font-weight: 700;
}
.pf-table td { padding: 11px 12px; border-top: 1px solid var(--line); }
.pf-table tbody tr { transition: background .15s var(--ease); }
.pf-table tbody tr:hover { background: rgba(255, 255, 255, .04); }
.pf-table .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.pf-table a:hover { color: var(--cyan); }

.pf-empty { padding: 40px 20px; text-align: center; color: var(--muted); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 760px) {
  .acct {
    left: 8px;
    right: 8px;
    width: auto;
    top: calc(var(--header-h) + 6px);
  }
  .auth { padding: 26px 20px 22px; }
  .btn-login span { display: none; }
  .btn-login { padding: 0 12px; }
  .user-chip__name, .user-chip__caret { display: none; }
  .user-chip { max-width: none; padding: 0; width: 40px; justify-content: center; }
  .pf-hero { padding: 20px; gap: 16px; }
  .pf-ava { width: 72px; height: 72px; font-size: 34px; }
  .pf-actions { margin-left: 0; width: 100%; }
  .pf-actions .btn { flex: 1; justify-content: center; }
  .ava-picker { grid-template-columns: repeat(6, 1fr); }
  .pf-table thead { display: none; }
  .pf-table td { display: block; padding: 4px 12px; border: 0; }
  .pf-table tbody tr { display: block; border-top: 1px solid var(--line); padding: 10px 0; }
  .pf-table .num { text-align: left; }
}