/* ==========================================================================
   Profile page (member_profile.php)
   Header card (cover/avatar/stats/pets/tabs) · composer · post list · gallery · blog · right rail · dialogs.
   Colours: tokens.css first; --pf-* are this page's few extra shades from the design.
   The header card switches between a "compact" and a "wide" layout with a container query on
   the main column (≥600px wide), exactly like the prototype switches on column width.
   ========================================================================== */
:root {
  --pf-gold:       #c9900e;
  --pf-btn:        #b07a07;
  --pf-btn-hover:  #956705;
  --pf-chip:       #fef0cf;
  --pf-chip-ink:   #a8641d;
  --pf-line:       #f1eee7;
  --pf-line-soft:  #f4f1ea;
  --pf-field:      #f7f6f3;
  --pf-star-off:   #d8d4ca;
  --pf-star-on:    #f5b301;
  --pf-ink-2:      #55555c;
  --pf-dot:        #1fb35a;
  --pf-shadow-hd:  0 2px 14px rgba(60, 40, 0, .06);
}

/* ── Page grid: below 1360px the right-rail cards drop under the main column ─ */
.pb-pf-main { container: pf / inline-size; }
.pb-pf-panel { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pb-pf-panel[hidden] { display: none; }

.pb-pf-aside { display: flex; }
@media (max-width: 1359px) {
  .pb-profile { row-gap: 18px; }
  .pb-profile .pb-pf-aside { flex-direction: column; position: static; max-height: none; overflow: visible; margin: 0; padding: 0; }
}
@media (min-width: 900px) and (max-width: 1359px) {
  .pb-profile { row-gap: 24px; grid-template-rows: auto auto; }
  .pb-profile .pb-rail--left { grid-column: 1; grid-row: 1 / span 2; }
  .pb-profile .pb-pf-main { grid-column: 2; grid-row: 1; }
  .pb-profile .pb-pf-aside { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
}
@media (max-width: 899px) {
  .pb-profile .pb-pf-aside { display: flex; gap: 16px; }
}

/* ── Buttons / small shared bits ────────────────────────────────────────── */
.pb-pf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px;
  border: 0; border-radius: 12px; background: var(--pf-btn); color: #fff; white-space: nowrap;
  font-family: var(--pb-font-head); font-weight: 800; font-size: 15px; line-height: 1;
}
.pb-pf-btn:hover { background: var(--pf-btn-hover); color: #fff; }
.pb-pf-btn i { font-size: .85em; }
.pb-pf-btn--sm { height: 38px; padding: 0 16px; font-size: 14px; }
.pb-pf-btn--ghost { background: #fff; color: var(--pb-link); border: 1px solid var(--pb-border-3); }
.pb-pf-btn--ghost:hover { background: #fffaf0; color: var(--pb-link-hover); }
.pb-pf-btn--block { width: 100%; height: 50px; margin-top: 4px; border-radius: 14px; font-size: 16px; }
.pb-pf-btn--green { background: #16a34a; }
.pb-pf-btn--green:hover { background: #15803d; }
.pb-pf-btn[disabled] { opacity: .5; cursor: default; }
.pb-pf-iconbtn {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--pb-border-3); border-radius: 12px; background: #fff; color: var(--pb-text);
}
.pb-pf-iconbtn:hover { background: #faf6ec; }
.pb-pf-link { padding: 0; border: 0; background: none; color: var(--pb-link); font-weight: 700; text-decoration: none; }
.pb-pf-count { font-family: var(--pb-font-body); font-weight: 500; font-size: 14px; color: var(--pb-text-muted); }

.pb-pf-mini-av {
  flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden;
  width: 48px; height: 48px; border-radius: 50%; background: var(--pf-btn); color: #fff;
  font-family: var(--pb-font-head); font-weight: 800; font-size: 15px;
}
.pb-pf-mini-av img { width: 100%; height: 100%; object-fit: cover; }
.pb-pf-mini-av--lg { width: 44px; height: 44px; font-size: 14px; }

/* ── Header card ────────────────────────────────────────────────────────── */
.pb-pf-card { background: var(--pb-surface); border-radius: var(--pb-r-xl); box-shadow: var(--pb-shadow-card); overflow: hidden; }

.pb-pf-cover { position: relative; height: clamp(150px, 44vw, 200px); background: var(--pb-surface-warm); }
.pb-pf-cover--empty { height: clamp(110px, 32vw, 150px); background: linear-gradient(135deg, #fde7b0 0%, #fbd48a 45%, #f7c06a 100%); }
.pb-pf-cover--empty .pb-pf-cover__tools { top: 10px; bottom: auto; right: 10px; }
.pb-pf-cover__img { position: absolute; inset: 0; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
.pb-pf-cover.is-repo .pb-pf-cover__img { cursor: grab; touch-action: none; }
.pb-pf-cover.is-repo .pb-pf-cover__img:active { cursor: grabbing; }
.pb-pf-cover.is-repo { outline: 2px solid var(--pb-primary); outline-offset: -2px; }
.pb-pf-cover__shade { display: none; position: absolute; inset: auto 0 0 0; height: 90px; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(30, 20, 5, .28)); pointer-events: none; }
.pb-pf-cover__tools { position: absolute; right: 14px; top: 14px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; z-index: 2; }
.pb-pf-cover__tools[hidden], .pb-pf-cover__bar[hidden] { display: none; }
.pb-pf-cover__bar {
  position: absolute; left: 12px; right: 12px; top: 12px; z-index: 3; display: flex; align-items: center; gap: 8px;
  padding: 8px; border-radius: 12px; background: rgba(20, 20, 20, .72); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pb-pf-cover__hint { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.pb-pf-cover__btn--primary { background: var(--pb-primary); color: #fff; }
.pb-pf-cover__btn--primary:hover { background: var(--pb-primary); filter: brightness(1.08); }
.pb-pf-cover__btn {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 0; border-radius: 10px;
  background: rgba(255, 255, 255, .94); color: var(--pb-text); box-shadow: 0 2px 10px rgba(0, 0, 0, .12); cursor: pointer;
  font-family: var(--pb-font-head); font-weight: 800; font-size: 14px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pb-pf-cover__btn i { font-size: 13px; }
.pb-pf-cover__btn:hover { background: #fff; }
.pb-pf-cover__btn:focus-within { outline: 2px solid var(--pb-primary); outline-offset: 2px; }
.pb-pf-cover__btn--icon { width: 38px; padding: 0; justify-content: center; }

.pb-pf-top {
  display: grid; grid-template-columns: minmax(0, 1fr); padding: 0 16px 6px; text-align: center;
  grid-template-areas: "avatar" "identity" "stats" "bio" "actions" "chips";
}
.pb-pf-avatar-wrap { grid-area: avatar; position: relative; width: 116px; height: 116px; margin-top: -58px; justify-self: center; }
.pb-pf-avatar {
  position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; border: 5px solid #fff;
  box-shadow: 0 6px 20px rgba(60, 40, 0, .15); background: linear-gradient(145deg, var(--pf-gold), #8a5d00);
}
.pb-pf-avatar__img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.pb-pf-avatar__init { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--pb-font-head); font-weight: 900; font-size: 38px; letter-spacing: .01em; }
.pb-pf-avatar__form { position: absolute; right: -4px; bottom: 4px; }
.pb-pf-avatar__cam {
  display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  background: #fff; color: var(--pb-text); box-shadow: 0 2px 8px rgba(0, 0, 0, .15); cursor: pointer; font-size: 13px;
}
.pb-pf-avatar__cam:focus-within { outline: 2px solid var(--pb-primary); outline-offset: 2px; }
.pb-pf-avatar__pos {
  position: absolute; right: -4px; bottom: 44px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: #fff; color: var(--pb-text); box-shadow: 0 2px 8px rgba(0, 0, 0, .15); cursor: pointer; font-size: 12px; padding: 0;
}
.pb-pf-avatar__pos:hover { background: #f6f1e4; }
.pb-pf-avatar__dot { position: absolute; right: 8px; top: 10px; width: 18px; height: 18px; border-radius: 50%; background: var(--pf-dot); border: 3px solid #fff; }

.pb-pf-identity { grid-area: identity; padding-top: 12px; min-width: 0; }
.pb-pf-id-text { min-width: 0; }
.pb-pf-name { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.pb-pf-name h1 { font-weight: 900; font-size: clamp(22px, 6.6vw, 28px); line-height: 1.15; color: #141414; overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }
.pb-pf-username { margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--pb-text-faint, #9a9a9a); overflow-wrap: anywhere; }
.pb-pf-name__ver { flex: none; font-size: 18px; color: var(--pf-gold); }
.pb-pf-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; margin-top: 4px; font-size: 13px; color: var(--pb-text-muted); }
.pb-pf-meta span { display: inline-flex; align-items: center; gap: 6px; }
.pb-pf-meta i { font-size: 12px; }
.pb-pf-actions { grid-area: actions; display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.pb-pf-actions .pb-pf-btn, .pb-pf-actions .pb-follow-btn { flex: 1; min-width: 0; height: 44px; border-radius: 12px; font-size: 15px; }
.pb-pf-actions .pb-pf-iconbtn { flex: none; }
.pb-pf-share { display: inline-flex; }

.pb-pf-rating { display: none !important; grid-area: rating; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.pb-pf-stars { display: inline-flex; gap: 2px; font-size: 18px; color: var(--pf-star-off); }
.pb-pf-stars .is-on, .pb-pf-rep__stars .is-on { color: var(--pf-star-on); }
.pb-pf-level { display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border-radius: 14px; background: var(--pf-chip); color: var(--pf-chip-ink); font-family: var(--pb-font-head); font-weight: 800; font-size: 13.5px; }

.pb-pf-chips { grid-area: chips; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px 0 4px; padding: 0; list-style: none; }
.pb-pf-chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px; border-radius: 15px; background: #f4f2ec; color: var(--pb-text-2); white-space: nowrap; font-family: var(--pb-font-head); font-weight: 800; font-size: 13.5px; }
.pb-pf-chip i { font-size: 12px; }
.pb-pf-chip--level { background: var(--pf-chip); color: var(--pf-chip-ink); }
.pb-pf-chip--level i { color: var(--pf-star-on); font-size: 11px; }
.pb-pf-chip--role.is-admin { background: var(--pb-surface-warm); color: var(--pf-chip-ink); }
.pb-pf-chip--role.is-admin i { color: #e0a31c; }
.pb-pf-chip--role.is-member i { color: var(--pf-gold); }
.pb-pf-chip--role.is-forge { background: #efe8fd; color: #6d3fe0; }
.pb-pf-chip--status i { font-size: 7px; }
.pb-pf-chip--status.is-active { background: #e3f6e9; color: #1a7a3c; }
.pb-pf-chip--status.is-active i { color: var(--pf-dot); }
.pb-pf-chip--status.is-suspended { background: var(--pb-surface-warm); color: var(--pf-chip-ink); }
.pb-pf-chip--status.is-suspended i { color: var(--pb-orange-2); }
.pb-pf-chip--status.is-banned { background: var(--pb-red-soft); color: #c0262c; }
.pb-pf-chip--status.is-banned i { color: var(--pb-red); }
.pb-pf-chip--pet i { color: var(--pf-gold); }

.pb-pf-bio { grid-area: bio; margin: 12px auto 0; max-width: 560px; font-size: 15px; line-height: 1.5; color: var(--pf-ink-2); text-wrap: pretty; overflow-wrap: anywhere; }
.pb-pf-bio--empty { color: var(--pb-text-muted); }
ul.pb-pf-stats {
  grid-area: stats; margin: 14px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--pf-line); border-radius: 14px; background: #fcfbf8; overflow: hidden;
}
.pb-pf-stats li + li { border-left: 1px solid var(--pf-line); }
.pb-pf-stats button, .pb-pf-stats div { display: block; width: 100%; padding: 10px 4px; border: 0; background: none; text-align: center; color: inherit; cursor: pointer; }
.pb-pf-stats div { cursor: default; }
.pb-pf-stats b { display: block; font-family: var(--pb-font-head); font-weight: 900; font-size: 18px; line-height: 1.1; color: #141414; }
.pb-pf-stats span { display: block; margin-top: 2px; font-size: 12px; color: var(--pb-text-muted); }
.pb-pf-only-wide { display: inline-flex; }

/* pets — compact: story-style circles that scroll sideways */
.pb-pf-pets { padding: 14px 0 0; margin: 0; }
.pb-pf-pets__label { padding: 0 16px; font-weight: 800; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--pb-text-faint); }
.pb-pf-pets__row { display: flex; gap: 14px; margin-top: 10px; padding: 2px 16px 6px; overflow-x: auto; scrollbar-width: none; }
.pb-pf-pets__row::-webkit-scrollbar { display: none; }
.pb-pf-pet { flex: none; width: 70px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; border-radius: 0; background: none; height: auto; text-align: center; }
.pb-pf-pet__ico { width: 62px; height: 62px; border-radius: 50%; padding: 0; background: var(--pb-surface-warm); color: #c26a12; font-size: 22px; box-shadow: 0 0 0 2.5px #fff, 0 0 0 4.5px #f0c25a; overflow: hidden; }
.pb-pf-pet__txt { display: flex; flex-direction: column; align-items: center; max-width: 70px; }
.pb-pf-pet__txt b { max-width: 70px; font-family: var(--pb-font-head); font-weight: 800; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-pf-pet__txt span { display: none; }
.pb-pf-addpet { flex: none; width: 70px; display: flex; flex-direction: column; align-items: center; gap: 6px; height: auto; padding: 0; border: 0; background: none; color: var(--pf-chip-ink); font-family: var(--pb-font-head); font-weight: 800; font-size: 12.5px; }
.pb-pf-addpet i { width: 62px; height: 62px; display: flex; align-items: center; justify-content: center; border: 2px dashed #e0b95c; border-radius: 50%; background: #fffaf0; font-size: 18px; }
.pb-pf-addpet:hover { background: none; }

/* tabs */
.pb-pf-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin-top: 12px; padding: 0 6px; border-top: 1px solid var(--pf-line); }
.pb-pf-tabs::-webkit-scrollbar { display: none; }
.pb-pf-tab {
  position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 14px;
  border: 0; background: none; white-space: nowrap; font-size: 14.5px; font-weight: 500; color: var(--pb-text-2);
}
.pb-pf-tab i { font-size: 16px; }
.pb-pf-tab::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: transparent; }
.pb-pf-tab:hover { color: var(--pf-chip-ink); }
.pb-pf-tab.is-active { font-weight: 800; color: var(--pf-chip-ink); }
.pb-pf-tab.is-active::after { background: var(--pf-gold); }

/* wide variant (main column ≥ 600px) */
@container pf (min-width: 600px) {
  .pb-pf-card { border-radius: 20px; box-shadow: var(--pf-shadow-hd); }
  .pb-pf-cover__shade { display: block; }
  .pb-pf-cover__tools { top: auto; bottom: 16px; right: 16px; }
  .pb-pf-top {
    padding: 0 28px; column-gap: 22px; grid-template-columns: 148px minmax(0, 1fr) auto; text-align: left;
    grid-template-areas: "avatar identity actions" "bio bio stats" "chips chips stats";
    align-items: start;
  }
  .pb-pf-avatar-wrap { width: 148px; height: 148px; margin-top: -62px; align-self: end; justify-self: start; }
  .pb-pf-avatar__init { font-size: 48px; }
  .pb-pf-avatar__form { right: 4px; bottom: 8px; }
  .pb-pf-avatar__pos { right: 4px; bottom: 52px; width: 38px; height: 38px; background: var(--pb-text); color: #fff; border: 3px solid #fff; box-shadow: none; }
  .pb-pf-avatar__pos:hover { background: var(--pb-text-2); }
  .pb-pf-avatar__cam { width: 38px; height: 38px; background: var(--pb-text); color: #fff; border: 3px solid #fff; box-shadow: none; }
  .pb-pf-avatar__cam:hover { background: var(--pb-text-2); }
  .pb-pf-avatar__dot { right: 14px; top: 12px; bottom: auto; }
  .pb-pf-identity { align-self: end; padding: 16px 0 4px; }
  .pb-pf-name { justify-content: flex-start; }
  .pb-pf-meta { justify-content: flex-start; margin-top: 6px; font-size: 14.5px; }
  .pb-pf-actions { align-self: end; margin: 0; padding-bottom: 6px; }
  .pb-pf-actions .pb-pf-btn, .pb-pf-actions .pb-follow-btn { flex: none; padding: 0 22px; }
  .pb-pf-chips { justify-content: flex-start; margin-top: 14px; gap: 8px; }
  .pb-pf-chip { padding: 0 12px; font-size: 13px; }
  .pb-pf-chip i { font-size: 11px; }
  .pb-pf-bio { margin: 18px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--pb-text-2); }
  ul.pb-pf-stats { margin-top: 18px; display: grid; grid-template-columns: repeat(4, auto); }
  .pb-pf-stats button, .pb-pf-stats div { min-width: 78px; padding: 12px 14px; }
  .pb-pf-stats b { font-size: 20px; }
  .pb-pf-stats span { font-size: 12.5px; }
  .pb-pf-cover__shade { display: block; }
  .pb-pf-pets { display: flex; align-items: center; gap: 12px; margin: 18px 28px 0; padding: 16px 0 0; border-top: 1px solid var(--pf-line-soft); }
  .pb-pf-pets__label { flex: none; padding: 0; font-size: 13px; letter-spacing: .06em; color: var(--pb-text-faint); text-transform: uppercase; }
  .pb-pf-pets__row { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; margin-top: 0; overflow-x: auto; scrollbar-width: none; padding: 1px; }
  .pb-pf-pet { flex: none; width: auto; flex-direction: row; gap: 10px; height: 46px; padding: 0 14px 0 4px; border: 1px solid var(--pf-line); border-radius: 23px; background: #fff; text-align: left; }
  .pb-pf-pet__ico { width: 38px; height: 38px; font-size: 16px; box-shadow: none; }
  .pb-pf-pet__txt { flex-direction: row; align-items: baseline; gap: 5px; white-space: nowrap; max-width: none; }
  .pb-pf-pet__txt b { font-size: 14.5px; overflow: visible; max-width: none; }
  .pb-pf-pet__txt span { display: inline; font-size: 13px; }
  .pb-pf-pet__txt span::before { content: "· "; }
  .pb-pf-addpet { flex: none; width: auto; flex-direction: row; gap: 8px; height: 46px; padding: 0 16px; border: 1.5px dashed #e8c879; border-radius: 23px; background: #fffaf0; font-size: 14.5px; color: var(--pf-chip-ink); }
  .pb-pf-addpet i { width: auto; height: auto; border: 0; background: none; font-size: 13px; }
  .pb-pf-addpet:hover { background: #fef3dc; }

  .pb-pf-tabs { gap: 0; margin-top: 14px; padding: 0 16px; }
  .pb-pf-tab { flex: 1 1 0; height: 54px; padding: 0 10px; }
  .pb-pf-tab::after { left: 18%; right: 18%; }
}
@container pf (min-width: 720px) { .pb-pf-cover { height: 220px; } }
@container pf (min-width: 760px) { .pb-pf-name h1 { font-size: 34px; } }
@media (max-width: 399px) {
  .pb-pf-avatar-wrap { width: 104px; height: 104px; margin-top: -52px; }
}

/* ── Composer ───────────────────────────────────────────────────────────── */
.pb-pf-composer { padding: 16px 18px 14px; }
.pb-pf-composer__row { display: flex; align-items: center; gap: 14px; }
.pb-pf-composer__input {
  flex: 1; min-width: 0; display: flex; align-items: center; height: 48px; padding: 0 18px; border: 1px solid #efece4; border-radius: 12px;
  background: var(--pf-field); color: var(--pb-text-faint); font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pb-pf-composer__input:hover { color: var(--pb-text-muted); background: #f3f1ec; }
.pb-pf-composer__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; margin-top: 12px; }
.pb-pf-composer__act { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 6px; border-radius: 8px; color: var(--pb-text-2); white-space: nowrap; font-size: 13.5px; font-weight: 600; }
.pb-pf-composer__act i { font-size: 17px; color: var(--pb-green); }
.pb-pf-composer__act:hover { background: #f7f5f0; color: var(--pb-text); }
.pb-pf-composer__post {
  margin-left: auto; display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: 10px;
  background: var(--pf-btn); color: #fff; font-family: var(--pb-font-head); font-weight: 800; font-size: 16px;
}
.pb-pf-composer__post:hover { background: var(--pf-btn-hover); color: #fff; }
@container pf (min-width: 600px) {
  .pb-pf-composer { border-radius: var(--pb-r-lg); }
  .pb-pf-composer__acts { padding-left: 62px; gap: 6px 24px; }
  .pb-pf-composer__act { font-size: 15px; }
  .pb-pf-composer__post { padding: 0 42px; }
}

/* ── Post list ──────────────────────────────────────────────────────────── */
.pb-pf-feed, .pb-pf-gallery, .pb-pf-blog { padding: 16px 14px 6px; border-radius: var(--pb-r-lg); }
@container pf (min-width: 600px) { .pb-pf-feed, .pb-pf-gallery, .pb-pf-blog { padding: 18px 20px 8px; } }
.pb-pf-feed__hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pb-pf-feed__hd h2 { font-size: 19px; }
.pb-pf-filter { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--pb-text-2); white-space: nowrap; font-size: 14px; font-weight: 600; }
.pb-pf-filter i { font-size: 11px; color: var(--pf-gold); }
.pb-pf-filter:hover { color: var(--pb-text); }

.pb-pf-feed__list { display: flex; flex-direction: column; }
.pb-pf-post { padding: 18px 0 14px; border-bottom: 1px solid var(--pf-line); animation: pb-fade-up .3s ease; }
.pb-pf-post[hidden] { display: none; }
.pb-pf-post:last-of-type { border-bottom: 0; }
.pb-pf-post__head { display: flex; gap: 12px; align-items: flex-start; }
.pb-pf-post__main { flex: 1; min-width: 0; }
.pb-pf-post__by { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 14px; color: var(--pb-text-muted); }
.pb-pf-post__by b { font-family: var(--pb-font-head); font-weight: 800; font-size: 15.5px; color: var(--pb-text); }
.pb-pf-post__cat { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 11px; background: var(--pb-surface-warm); color: var(--pf-chip-ink); font-size: 12px; font-weight: 700; }
.pb-pf-post__cat i { font-size: 10.5px; }
.pb-pf-post__title { margin-top: 4px; font-size: 16.5px; }
.pb-pf-post__title a { color: var(--pb-text); }
.pb-pf-post__title a:hover { color: var(--pb-link); }
.pb-pf-post__text { margin-top: 4px; font-size: 15.5px; line-height: 1.5; color: var(--pb-text); white-space: pre-line; overflow-wrap: anywhere; }
.pb-pf-post__text a { color: var(--pb-text-muted); }
.pb-pf-post__media { display: block; margin-top: 12px; overflow: hidden; border-radius: 12px; background: var(--pb-surface-warm); height: 230px; }
.pb-pf-post__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-pf-post__media.pb-pf-post__media--video { display: flex; align-items: center; justify-content: center; gap: 10px; height: 72px; background: #1d1d1f; color: #fff; font-weight: 700; }
.pb-pf-post__media--video:hover { color: #fff; background: #2b2b30; }
.pb-pf-post__media--video i { font-size: 24px; color: var(--pb-amber); }
@container pf (min-width: 600px) { .pb-pf-post__media { height: 260px; } }
@container pf (min-width: 820px) { .pb-pf-post__media { height: 320px; } }
@media (max-width: 399px) { .pb-pf-post__media { height: 200px; } }
.pb-pf-post__acts { display: flex; align-items: center; gap: 22px; margin-top: 10px; }
.pb-pf-act { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; border: 0; background: none; color: var(--pb-text); font-size: 15px; font-weight: 600; }
.pb-pf-act:hover { color: var(--pb-link); }
.pb-pf-act:first-child i { font-size: 20px; color: var(--pb-orange); }
.pb-pf-act .fa-comment { font-size: 19px; }
.pb-pf-act .fa-share { font-size: 17px; }
.pb-pf-act--end { margin-left: auto; color: var(--pb-link); font-size: 14px; }
.pb-pf-act--end i { font-size: 11px; }
.pb-pf-feed__none { padding: 24px 0; text-align: center; color: var(--pb-text-muted); }
.pb-pf-feed__more { display: flex; justify-content: center; padding: 6px 0 14px; }

/* empty states */
.pb-pf-empty { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 16px; padding: 18px 0 6px; }
.pb-pf-empty img { width: 100%; max-width: 330px; height: auto; justify-self: center; }
.pb-pf-empty > div, .pb-pf-empty--sm { text-align: center; }
.pb-pf-empty h3 { font-weight: 900; font-size: 20px; }
.pb-pf-empty p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--pf-ink-2); }
.pb-pf-empty .pb-pf-btn { margin-top: 16px; height: 46px; padding: 0 22px; border-radius: 10px; font-size: 16px; gap: 10px; }
@container pf (min-width: 600px) { .pb-pf-empty:not(.pb-pf-empty--sm) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.pb-pf-empty--sm { display: block; padding: 34px 20px; }
.pb-pf-empty--sm > i { font-size: 32px; color: #e0a31c; }
.pb-pf-empty--sm h3 { margin-top: 10px; font-size: 19px; }
.pb-pf-empty--sm .pb-pf-btn { margin-top: 16px; height: 44px; font-size: 15px; }

/* ── Gallery tab ────────────────────────────────────────────────────────── */
.pb-pf-gallery { padding-bottom: 18px; }
.pb-pf-gallery__tools { display: flex; flex-wrap: wrap; gap: 8px; }
.pb-pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 14px; }
.pb-pf-grid__item { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 10px; background: var(--pb-surface-warm); }
.pb-pf-grid__img { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; }
.pb-pf-grid__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.pb-pf-grid__img:hover img { transform: scale(1.04); }
.pb-pf-grid__make {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border: 0; border-radius: 8px; background: var(--pf-btn); color: #fff; white-space: nowrap; font-size: 11.5px; font-weight: 700; opacity: 0; transition: opacity .15s;
}
.pb-pf-grid__item:hover .pb-pf-grid__make, .pb-pf-grid__item:focus-within .pb-pf-grid__make { opacity: 1; }
@media (hover: none) { .pb-pf-grid__make { opacity: 1; } }
.pb-pf-grid__edit {
  position: absolute; top: 8px; right: 8px; z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, .94); color: var(--pb-primary); font-size: 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); text-decoration: none;
}
.pb-pf-grid__edit:hover { background: var(--pb-primary); color: #fff; }
.pb-pf-gallery__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; }
.pb-pf-gallery__foot .pb-pf-btn { height: 40px; font-size: 14px; }
.pb-pf-hint { font-size: 13px; color: var(--pb-text-muted); }

/* ── Blog tab ───────────────────────────────────────────────────────────── */
.pb-pf-blog { padding-bottom: 12px; }
.pb-pf-articles { display: flex; flex-direction: column; margin-top: 6px; }
.pb-pf-articles li + li { border-top: 1px solid var(--pf-line); }
.pb-pf-article { display: flex; gap: 14px; padding: 14px 0; color: var(--pb-text); }
.pb-pf-article:hover { color: var(--pb-text); }
.pb-pf-article:hover b { color: var(--pb-link); }
.pb-pf-article__img { flex: none; display: flex; align-items: center; justify-content: center; width: 96px; height: 72px; border-radius: 10px; background: var(--pb-surface-warm) center / cover no-repeat; color: #e0a31c; font-size: 24px; }
.pb-pf-article__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pb-pf-article__body b { font-family: var(--pb-font-head); font-weight: 800; font-size: 16px; }
.pb-pf-article__ex { font-size: 14px; color: var(--pf-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pb-pf-article__date { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--pb-text-muted); }

/* ── Left rail ──────────────────────────────────────────────────────────── */
.pb-pf-side { padding: 20px 16px 14px; }
.pb-pf-side__sep { height: 1px; margin: 14px 0 0; background: #ececec; }
.pb-pf-side__label { padding: 16px 0 8px 16px; font-family: var(--pb-font-head); font-weight: 800; font-size: 14.5px; letter-spacing: .02em; text-transform: uppercase; }
.pb-pf-side__list { display: flex; flex-direction: column; gap: 2px; }
.pb-pf-side__link { display: flex; align-items: center; gap: 20px; height: 42px; padding: 0 16px; border-left: 3px solid transparent; border-radius: 6px; white-space: nowrap; font-size: 16px; font-weight: 500; color: var(--pb-text); }
.pb-pf-side__link i { width: 24px; text-align: center; font-size: 18px; color: #e0a31c; }
.pb-pf-side__link:hover { background: #faf6ec; color: var(--pb-text); }
.pb-pf-side__link.is-active { background: var(--pb-amber-soft); border-left-color: var(--pb-amber); color: #6d5000; font-weight: 700; }
.pb-pf-side__list--explore .pb-pf-side__link { height: 40px; padding: 0 16px 0 19px; border-left: 0; }
.pb-pf-side__list--explore .pb-pf-side__link i { font-size: 17px; }
.pb-pf-side .is-red { color: #e5333a; }
.pb-pf-side .is-amber { color: var(--pf-star-on); }
.pb-pf-side .is-gold { color: var(--pf-gold); }

.pb-pf-kinder { position: relative; overflow: hidden; padding: 18px 18px 20px; border-radius: var(--pb-r-xl); background: linear-gradient(170deg, #fff1cf 0%, #fde3a2 100%); box-shadow: var(--pb-shadow-card); text-align: center; }
.pb-pf-kinder img { display: block; width: 96px; height: auto; margin: 0 auto; }
.pb-pf-kinder p { margin-top: 8px; font-family: var(--pb-font-head); font-weight: 900; font-size: 18px; line-height: 1.25; }
.pb-pf-kinder i { font-size: 15px; color: #e5333a; }

/* ── Right rail widgets ─────────────────────────────────────────────────── */
.pb-pf-widget { padding: 18px 18px 16px; min-width: 0; }
.pb-pf-widget__hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pb-pf-widget__hd h2 { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.pb-pf-widget__hd h2 i { color: var(--pf-gold); font-size: 16px; }
.pb-pf-widget__hd b { font-family: var(--pb-font-head); font-weight: 900; font-size: 16px; }

.pb-pf-bar { height: 9px; margin-top: 12px; border-radius: 5px; background: #efece4; overflow: hidden; }
.pb-pf-bar > span { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--pf-gold), #e0a31c); transition: width .4s ease; }
.pb-pf-bar--sm { height: 8px; margin-top: 0; border-radius: 4px; flex: 1; }
.pb-pf-bar--sm > span { background: var(--pf-gold); border-radius: 4px; }

.pb-pf-checks { display: flex; flex-direction: column; margin-top: 8px; }
.pb-pf-check { display: flex; align-items: center; gap: 12px; width: 100%; height: 38px; padding: 0; border: 0; background: none; text-align: left; font-size: 15px; color: var(--pf-ink-2); }
.pb-pf-check i { flex: none; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1.5px solid #dcd8ce; font-size: 11px; color: transparent; }
a.pb-pf-check:hover, button.pb-pf-check:hover { color: var(--pb-link); }
.pb-pf-check.is-done { color: var(--pb-text-2); }
.pb-pf-check.is-done i { background: var(--pf-gold); border-color: var(--pf-gold); color: #fff; }

.pb-pf-rep { display: flex; align-items: center; gap: 18px; margin-top: 14px; }
.pb-pf-rep__medal { flex: none; display: flex; align-items: center; justify-content: center; width: 104px; height: 104px; border-radius: 50%; background: #f8ece0; overflow: hidden; }
.pb-pf-rep__medal img { width: 100px; height: 100px; object-fit: contain; }
.pb-pf-rep__pts { display: flex; align-items: baseline; gap: 8px; }
.pb-pf-rep__pts b { font-family: var(--pb-font-head); font-weight: 900; font-size: 30px; line-height: 1; }
.pb-pf-rep__pts span { font-size: 14px; color: var(--pf-ink-2); }
.pb-pf-rep__stars { display: flex; gap: 2px; margin-top: 6px; font-size: 19px; color: var(--pf-star-off); }
.pb-pf-level--lg { height: 30px; margin-top: 6px; padding: 0 16px; border-radius: 15px; font-size: 14px; }
.pb-pf-rep__prog { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.pb-pf-rep__prog b { font-size: 13px; font-weight: 700; color: var(--pf-ink-2); }
.pb-pf-rep__note { margin-top: 6px; font-size: 13px; color: var(--pf-ink-2); }
.pb-pf-rep__note--max { margin-top: 14px; font-weight: 700; color: var(--pb-green); }

.pb-pf-badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.pb-pf-badges li { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
.pb-pf-badge { position: relative; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; font-size: 24px; filter: saturate(.85); }
.pb-pf-badge.is-on { filter: none; }
.pb-pf-badge.is-red { background: #fde3e4; color: #e5333a; }
.pb-pf-badge.is-amber { background: var(--pb-surface-warm); color: #e0a31c; }
.pb-pf-badge.is-blue { background: #e2edfd; color: #2f80ed; }
.pb-pf-badge.is-green { background: #dcf5e4; color: #1f9d4c; }
.pb-pf-badge__st { position: absolute; right: -2px; bottom: -2px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--pf-gold); border: 2px solid #fff; color: #fff; font-size: 9px; }
.pb-pf-badge.is-on .pb-pf-badge__st { background: #1f9d4c; font-size: 10px; }
.pb-pf-badge__lbl { font-size: 12.5px; font-weight: 700; line-height: 1.2; color: var(--pb-text); }

.pb-pf-statgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.pb-pf-statgrid li { padding: 12px 4px 10px; border: 1px solid var(--pf-line); border-radius: 12px; text-align: center; }
.pb-pf-statgrid i { font-size: 20px; color: #e0a31c; }
.pb-pf-statgrid b { display: block; margin-top: 6px; font-family: var(--pb-font-head); font-weight: 900; font-size: 19px; }
.pb-pf-statgrid span { display: block; font-size: 12px; line-height: 1.25; color: var(--pb-text-muted); }

.pb-pf-info { margin: 10px 0 0; }
.pb-pf-info > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--pf-line); font-size: 14px; }
.pb-pf-info > div:last-child { border-bottom: 0; }
.pb-pf-info dt { color: var(--pb-text-muted); font-weight: 500; }
.pb-pf-info dd { margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; }

.pb-pf-manage { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.pb-pf-manage a, .pb-pf-manage button { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--pb-text); text-align: left; font-size: 15px; font-weight: 600; }
.pb-pf-manage i { width: 20px; text-align: center; color: var(--pf-gold); }
.pb-pf-manage a:hover, .pb-pf-manage button:hover { background: #faf6ec; color: var(--pb-text); }
.pb-pf-manage .is-danger, .pb-pf-manage .is-danger i { color: var(--pb-red); }
.pb-pf-manage .is-danger:hover { background: var(--pb-red-soft); }

/* not found */
.pb-pf-missing { max-width: 520px; margin: 48px auto; padding: 40px 24px; text-align: center; }
.pb-pf-missing i { font-size: 40px; color: #e0a31c; }
.pb-pf-missing h1 { margin-top: 12px; font-size: 24px; }
.pb-pf-missing p { margin: 8px 0 20px; color: var(--pb-text-muted); }

/* ── Dialogs (edit profile · gallery upload · make product) ─────────────── */
.pb-pf-modal { z-index: 250; }
.pb-pf-dialog {
  width: 100%; max-width: 460px; max-height: calc(100vh - 40px); overflow-y: auto; padding: 22px; border-radius: 20px;
  background: #fff; box-shadow: var(--pb-shadow-pop); animation: pb-fade-up .25s ease;
}
.pb-pf-dialog--wide { max-width: 680px; border-radius: 16px; padding: 20px 24px 28px; }
.pb-pf-dialog__hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pb-pf-dialog__hd h2 { display: flex; align-items: center; gap: 12px; font-weight: 900; font-size: 20px; }
.pb-pf-dialog__hd h2 i { color: var(--pf-gold); }
.pb-pf-dialog__hd p { margin-top: 4px; font-size: 13px; color: var(--pb-text-muted); }
.pb-pf-dialog__x { flex: none; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--pb-surface-2); color: var(--pb-text); }
.pb-pf-dialog__x:hover { background: #ebebee; }
.pb-pf-dialog__body { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.pb-pf-dialog--wide .pb-pf-dialog__body { margin-top: 20px; gap: 0; }
.pb-pf-dialog__foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.pb-pf-dialog__foot--split { margin-top: 20px; }
.pb-pf-dialog__foot--split .pb-pf-btn { height: 44px; border-radius: 8px; font-size: 14px; }
.pb-pf-dialog__foot--split .pb-pf-btn:first-child { flex: 1; }
.pb-pf-dialog__foot--split .pb-pf-btn:last-child { flex: 2; }

.pb-pf-field { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--pb-text-2); }
.pb-pf-field input, .pb-pf-field textarea, .pb-pf-field select {
  width: 100%; padding: 0 14px; border: 1px solid var(--pb-border-3); border-radius: 12px; background: #fff; color: var(--pb-text);
  font-size: 15px; font-weight: 400; outline: none;
}
.pb-pf-field input, .pb-pf-field select { height: 46px; }
.pb-pf-field textarea { padding: 12px 14px; line-height: 1.5; resize: vertical; }
.pb-pf-field input:focus, .pb-pf-field textarea:focus, .pb-pf-field select:focus { border-color: var(--pf-gold); box-shadow: 0 0 0 3px rgba(201, 144, 14, .15); }
.pb-pf-field__hint { align-self: flex-end; font-size: 12px; font-weight: 500; color: var(--pb-text-faint); }
.pb-pf-field-label { margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pb-text-3); }
.pb-pf-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 8px; }
.pb-pf-type { display: block; }
.pb-pf-type input { position: absolute; opacity: 0; pointer-events: none; }
.pb-pf-type span { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0; border: 1.5px solid var(--pb-border-3); border-radius: 12px; background: #fff; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--pb-text); }
.pb-pf-type i { font-size: 19px; color: #c26a12; }
.pb-pf-type input:checked + span { border-color: var(--pb-amber); background: var(--pb-amber-soft); }
.pb-pf-type input:focus-visible + span { outline: 2px solid var(--pb-primary); outline-offset: 2px; }

/* gallery upload */
.pb-pf-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 16px; border: 2px dashed #ccc; border-radius: 10px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
.pb-pf-drop i { margin-bottom: 4px; font-size: 36px; color: var(--pf-gold); }
.pb-pf-drop b { color: var(--pb-text-3); }
.pb-pf-drop span { font-size: 12px; color: var(--pb-text-faint); }
.pb-pf-drop:hover, .pb-pf-drop.is-over, .pb-pf-drop:focus-within { border-color: var(--pf-gold); background: #fffaf0; }
.pb-pf-gal-files { min-height: 16px; font-size: 13px; color: var(--pb-text-2); overflow-wrap: anywhere; }
.pb-pf-progress__txt { margin-top: 4px; font-size: 12px; color: var(--pb-text-muted); }
.pb-pf-msg { min-height: 18px; font-size: 13px; font-weight: 600; }
.pb-pf-msg.is-error { color: #c00; }
.pb-pf-msg.is-ok { color: #080; }

/* make product */
.pb-pf-steps { display: flex; margin: 16px 0 0; }
.pb-pf-steps li { flex: 1; padding: 6px 4px; border-bottom: 3px solid #e2e8f0; text-align: center; font-size: 11px; font-weight: 700; color: #aaa; }
.pb-pf-steps li.is-on { border-bottom-color: var(--pf-gold); color: var(--pf-gold); }
.pb-pf-lead { margin-bottom: 16px; font-size: 13px; color: var(--pb-text-3); }
.pb-pf-products { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 20px; }
.pb-pf-product { display: flex; flex-direction: column; align-items: center; padding: 16px; border: 2px solid #e2e8f0; border-radius: 12px; background: #fff; text-align: center; transition: all .15s; }
.pb-pf-product i { margin-bottom: 8px; font-size: 32px; color: var(--pf-gold); }
.pb-pf-product b { font-size: 13px; color: var(--pb-text); }
.pb-pf-product span { margin-top: 4px; font-size: 12px; color: var(--pb-text-muted); }
.pb-pf-product:hover { border-color: var(--pf-gold); background: #fffaf0; }
.pb-pf-product.is-selected { border-color: var(--pf-gold); background: var(--pb-amber-soft); }
.pb-pf-prodinfo { display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px; padding: 14px 16px; border: 1px solid #f0dca0; border-radius: 10px; background: var(--pb-amber-soft); }
.pb-pf-prodinfo b { font-size: 15px; }
.pb-pf-prodinfo span { font-size: 12px; font-weight: 400; color: var(--pb-text-2); line-height: 1.45; }
.pb-pf-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.pb-pf-row2 .pb-pf-field { text-transform: uppercase; font-size: 11px; }
.pb-pf-row2 .pb-pf-field select { height: 44px; border-radius: 8px; text-transform: none; font-size: 14px; }
.pb-pf-price { align-self: end; display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; border-radius: 8px; background: var(--pb-amber-soft); }
.pb-pf-price span { font-size: 13px; font-weight: 700; color: var(--pb-text-3); }
.pb-pf-price b { font-size: 22px; color: var(--pb-link); }
.pb-pf-mock { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 320px; border: 1px solid var(--pb-border); border-radius: 12px; background: #f5f2e8; text-align: center; }
.pb-pf-mock[hidden], [data-pf-mock-result][hidden] { display: none; }
.pb-pf-mock--loading i { margin-bottom: 14px; font-size: 38px; color: var(--pf-gold); }
.pb-pf-mock--loading span { font-size: 13px; font-weight: 700; color: var(--pb-text-muted); }
.pb-pf-mock__img { display: block; width: 100%; border-radius: 12px; border: 1px solid var(--pb-border); }
.pb-pf-mock__ok { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--pb-text-muted); }
.pb-pf-mock__ok i { color: var(--pb-green); }
.pb-pf-mock--error { min-height: 0; padding: 24px; background: #fef2f2; border-color: #fecaca; }
.pb-pf-mock--error b { font-size: 13px; color: #dc2626; }
.pb-pf-mock--error span { margin-top: 6px; font-size: 12px; color: var(--pb-text-muted); }
.pb-pf-mock--error p { margin-top: 10px; font-size: 12px; color: var(--pb-text-3); }
.pb-pf-mock--error img { max-height: 200px; margin-top: 10px; border-radius: 8px; border: 1px solid #e2e8f0; }
.pb-pf-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.pb-pf-form .pb-pf-field { font-size: 12px; text-transform: uppercase; }
.pb-pf-form .pb-pf-field input { height: 42px; border-radius: 8px; text-transform: none; font-size: 14px; }
.pb-pf-field--full { grid-column: 1 / -1; }
.pb-pf-card-el { padding: 10px 12px; border: 1px solid var(--pb-border-3); border-radius: 8px; background: #fff; min-height: 42px; }
.pb-pf-error { margin-top: 6px; font-size: 12px; color: #e53e3e; }
.pb-pf-error[hidden] { display: none; }
.pb-pf-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0; padding: 14px 16px; border-radius: 8px; background: #f5f2e8; }
.pb-pf-summary b { display: block; font-size: 14px; }
.pb-pf-summary span { font-size: 12px; color: var(--pb-text-muted); }
.pb-pf-summary strong { font-size: 22px; color: var(--pf-gold); }
.pb-pf-done { text-align: center; padding: 20px 0; }
.pb-pf-done > i { font-size: 56px; color: var(--pb-green); }
.pb-pf-done h3 { margin: 16px 0 8px; font-size: 22px; }
.pb-pf-done p { margin-bottom: 20px; font-size: 14px; color: var(--pb-text-3); }
.pb-pf-done__id { margin-bottom: 20px; font-size: 12px; color: #aaa; }
.pb-pf-done .pb-pf-btn { padding: 0 32px; height: 46px; }
.pb-pf-dialog--wide [data-pf-step][hidden] { display: none; }
@media (max-width: 480px) {
  .pb-pf-form, .pb-pf-row2 { grid-template-columns: minmax(0, 1fr); }
  .pb-pf-dialog { padding: 18px; }
  .pb-pf-dialog--wide { padding: 18px 16px 24px; }
  .pb-pf-dialog { max-height: 96vh; }
}
@media (max-width: 899px) {
  .pb-pf-modal { padding: 12px; }
}

/* align the main column's top edge with the rails (design: 16px page padding, rails offset by their shadow gutter) */
.pb-pf-main.pb-content { padding-top: 0; margin-top: -4px; }
.pb-pf-field legend { padding: 0; margin-bottom: 6px; }
.pb-pf-empty p, .pb-pf-meta span, .pb-pf-info dd, .pb-pf-article__body { overflow-wrap: anywhere; }

/* Reposition profile photo dialog */
.pb-pf-apos { position: relative; width: min(260px, 70vw); aspect-ratio: 1; margin: 4px auto 14px; overflow: hidden; border-radius: 50%; background: #1b1b1b; cursor: grab; touch-action: none; box-shadow: 0 0 0 4px #fff, 0 0 0 5px #e4dccb; }
.pb-pf-apos.is-drag { cursor: grabbing; }
.pb-pf-apos img { position: absolute; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.pb-pf-zoom { display: flex; align-items: center; gap: 10px; color: var(--pb-text-muted); font-size: 13px; }
.pb-pf-zoom input { flex: 1; accent-color: var(--pb-primary); }
.pb-pf-apos__hint { text-align: center; margin: 8px 0 14px; }