/* Pakstoor :: account.css :: v1.7-000005 :: 2026-05-23 */
/**
 * Copyright © 2026 Pakstoor (Pty) Ltd. All rights reserved.
 * Proprietary and confidential.
 * Unauthorized copying, distribution, modification, or use of this file is prohibited.
 */

/* Per-card owner actions on /listings (Archive / Restore). Sits
   under the title/meta block inside .card-item-body. */
.listings-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-2, #2B313A);
}
.listings-card-action {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size:var(--fs-10);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius:var(--r-4);
  cursor: pointer;
}
/* iOS touch-target floor (44 px Apple HIG / 40 px functional). Default
   28 px height was tappable but cramped — bumped on mobile only so
   desktop hover affordance stays the same. 2026-05-10. */
@media (max-width: 480px) {
  .listings-card-action { padding: 8px 12px; min-height: 36px; }
  .listings-card-actions { flex-wrap: wrap; }
}
.listings-card-status-tag {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--ink-dim, #737C87);
  padding: 4px 8px;
  background: var(--bg-2, #232932);
  border-radius: 4px;
}

/* Boost-active pill — gold star + "Boosted · ends X" label. Sits
   below the title/meta on the seller's own listing cards. */
.listings-card-boost-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(217, 166, 37, 0.12);
  color: var(--gold, #D9A625);
  border: 1px solid rgba(217, 166, 37, 0.32);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  padding: 4px 9px;
  margin-top: 8px;
  width: fit-content;
}
.listings-card-boost-pill svg { flex-shrink: 0; }

/* Pending-boost CTA — seller started a TradeSafe checkout but it
   never settled. One-click resume — beats making them go back through
   the full sell flow. Hover state lights up gold to advertise that
   the row is interactive (most other status pills aren't). */
.listings-card-pending-boost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(217, 166, 37, 0.08);
  border: 1px solid rgba(217, 166, 37, 0.30);
  color: var(--gold, #D9A625);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  font-weight:var(--fw-700);
  letter-spacing:var(--tracking-wide);
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
  width: fit-content;
}
.listings-card-pending-boost:hover {
  background: rgba(217, 166, 37, 0.18);
  border-color: rgba(217, 166, 37, 0.55);
}
.listings-card-pending-boost svg { flex-shrink: 0; }

/* ============================================================
   Seller wallet card on /settings#payout — mirrors the admin
   /admin/payouts wallet pattern. Shown only when /api/users/me/wallet
   reports configured=true (token + bank captured).
   ============================================================ */
.seller-wallet-card {
  position: relative;
  overflow: hidden;
  margin: 0 0 18px 0;
  padding: 20px;
  background: linear-gradient(180deg, var(--bg-1) 0%, #0f1318 100%);
  border: 1px solid rgba(217, 166, 37, 0.22);
  border-radius: 14px;
}
.seller-wallet-card::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 320px;
  height: 320px;
  background: radial-gradient(closest-side, rgba(217, 166, 37, 0.10), transparent 70%);
  pointer-events: none;
}
.seller-wallet-card[hidden] { display: none !important; }

.seller-wallet-hero-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(217, 166, 37, 0.14);
  position: relative;
  z-index: 1;
}
.seller-wallet-label {
  display: block;
  font-family: var(--font-mono);
  font-size:var(--fs-10);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight:var(--fw-600);
  margin-bottom: 6px;
}
.seller-wallet-amount {
  display: block;
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1;
  font-weight:var(--fw-700);
  color: var(--gold);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.seller-wallet-loading {
  color: var(--ink-dim);
  letter-spacing: 6px;
  animation: seller-wallet-pulse 1.4s ease-in-out infinite;
}
@keyframes seller-wallet-pulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.7; }
}

.seller-wallet-help {
  margin: 14px 0 12px;
  font-size:var(--fs-12);
  color: var(--ink-muted);
  line-height: 1.45;
  position: relative;
  z-index: 1;
}

.seller-withdraw-form { position: relative; z-index: 1; }
.seller-withdraw-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.seller-withdraw-amount {
  flex: 1 1 220px;
  min-width: 180px;
  font-family: var(--font-display);
  font-size:var(--fs-18);
  font-weight:var(--fw-600);
  letter-spacing: -0.005em;
}
.seller-withdraw-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.seller-preset-btn {
  font-family: var(--font-mono);
  font-size:var(--fs-11);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ink-muted);
  cursor: pointer;
  transition: color 120ms, border-color 120ms, background 120ms;
}
.seller-preset-btn:hover {
  color: var(--ink);
  border-color: rgba(217, 166, 37, 0.40);
  background: rgba(217, 166, 37, 0.06);
}
.seller-preset-max {
  color: var(--gold);
  border-color: rgba(217, 166, 37, 0.30);
}
.seller-preset-max:hover {
  background: rgba(217, 166, 37, 0.12);
}

.seller-rtc-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 14px;
}
.seller-rtc-toggle input { margin-top: 3px; flex-shrink: 0; }
.seller-rtc-label { display: flex; flex-direction: column; gap: 2px; }
.seller-rtc-label strong {
  font-size:var(--fs-13);
  font-weight:var(--fw-600);
  color: var(--ink);
}
.seller-rtc-sub {
  font-size:var(--fs-11);
  color: var(--ink-dim);
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
}

/* Owner-only traction stats: views + saves under the meta line. */
.listings-card-stats {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size:var(--fs-11);
  letter-spacing:var(--tracking-wide);
  color: var(--ink-dim, #737C87);
}
.listings-card-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.listings-card-stat svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--ink-dim, #737C87);
}

/* Private-listing invite chip — sits under the title/meta block, above
   the traction stats. The badge labels it; the code is mono so it reads
   as data; copy + WhatsApp share live to the right. */
.listings-card-invite {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(217, 166, 37, 0.06);
  border: 1px solid rgba(217, 166, 37, 0.28);
  border-radius: 8px;
}
.listings-card-invite-badge {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  font-weight:var(--fw-700);
  letter-spacing:var(--tracking-wider);
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--gold-ink);
  flex-shrink: 0;
}
.listings-card-invite-code,
.listings-card-invite-email {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size:var(--fs-13);
  font-weight:var(--fw-600);
  letter-spacing: 0.02em;
  color: var(--ink, #ECEFF2);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: all;
}
.listings-card-invite-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius:var(--r-4);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--ink-muted, #A6AFB9);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.listings-card-invite-btn:hover {
  color: var(--gold, #D9A625);
  border-color: rgba(217, 166, 37, 0.45);
  background: rgba(217, 166, 37, 0.08);
}
.listings-card-invite-btn svg { width: 14px; height: 14px; }

.acct {
  padding-block: var(--s-6) var(--s-16);
}
.acct-inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* ============================================================
   ACCOUNT HEADER (overview only)
   ============================================================ */
/* 2026-05-13: 3-zone seller identity dashboard. Was a 2-col
   flex with everything in the left zone — content was crammed
   left while the right was a logout button floating alone.
   Now: identity | metrics | actions, tighter vertical chrome. */
.acct-head {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
  padding: 18px 24px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-5);
  margin-bottom: var(--s-5);
  flex-wrap: wrap;
}
.acct-head-left {
  display: flex;
  gap: var(--s-4);
  align-items: center;
  min-width: 0;
}

/* New 3-zone layout containers */
.acct-head-identity {
  display: flex;
  gap: 18px;
  align-items: center;
  min-width: 0;
}
.acct-head-name-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.acct-head-metrics {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  /* Sits to the right of identity; left-aligned content within
     its column, but the column itself is centred between
     identity (left) and actions (right). */
}
.acct-metrics-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}
.acct-head-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  flex-shrink: 0;
}
.acct-head-actions .btn {
  white-space: nowrap;
  min-width: 130px;
  justify-content: center;
}

/* ============================================================
   ACCT HEAD v2 — OPERATOR IDENTITY MODULE (2026-05-13)
   Unified geometry (soft rounded rectangles, 10px standard
   radius, 8px on buttons, 14px on the larger avatar). Three
   vertical zones separated by subtle 1px hairlines so the
   container reads as one designed system, not assembled parts.
   ============================================================ */
.acct-head--operator {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, auto);
  align-items: stretch;
  gap: 0;
  padding: 22px 28px;
  background: linear-gradient(180deg,
    var(--bg-1) 0%,
    color-mix(in srgb, var(--bg-1) 92%, var(--bg)) 100%);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 24px 60px -32px rgba(0, 0, 0, 0.50);
}

/* Subtle vertical dividers between zones — single-pixel
   hairlines at 5% alpha, the line that separates without
   declaring itself. */
.acct-head--operator .acct-head-metrics,
.acct-head--operator .acct-head-actions {
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  padding-left: 28px;
  margin-left: 0;
}
.acct-head--operator .acct-head-identity {
  padding-right: 28px;
}

/* ZONE 1 — Identity --------------------------------------- */
.acct-head--operator .acct-head-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-width: 0;
}
.acct-head--operator .acct-avatar-block {
  position: relative;
  flex-shrink: 0;
}
/* Bigger rounded-square avatar — tactical operator card, not
   chat-app circle. 88×88, 14px radius, slight gold-tint border. */
.acct-head--operator .acct-avatar {
  width: 88px;
  height: 88px;
  border-radius: 14px;
  background: linear-gradient(140deg,
    var(--bg-3) 0%,
    var(--bg-1) 100%);
  border: 1px solid rgba(217, 166, 37, 0.20);
  font-size:var(--fs-32);
  font-weight: var(--fw-700);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.5px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 8px 18px -10px rgba(0, 0, 0, 0.55);
}
/* Hide the old chat-app green floating dot — verification
   integrates into the ID-cluster pill below the name. */
.acct-head--operator .pks-avatar-verified-dot { display: none !important; }

.acct-head--operator .acct-head-name-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.acct-head--operator .acct-name {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: var(--fw-700);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.05;
  margin: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.acct-head--operator .acct-member-no {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: var(--fw-700);
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent);
  border-radius: 8px;
  padding: 4px 10px;
  width: fit-content;
  box-shadow: 0 0 16px -8px rgba(217, 166, 37, 0.4);
}

/* The ID cluster — trust level + verification pills stacked
   below the member# in a coherent earned-status row. */
.acct-head--operator .acct-id-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.acct-head--operator .acct-trust-pill {
  border-radius: 8px;
  padding: 4px 10px;
  font-size:var(--fs-10);
  letter-spacing: 1.4px;
  background: linear-gradient(rgba(217, 166, 37, 0.14), rgba(217, 166, 37, 0.14)), var(--bg-2);
  border: 1px solid rgba(217, 166, 37, 0.30);
  color: var(--gold-light, #F0C64D);
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-weight: var(--fw-700);
}
.acct-head--operator .acct-id-cluster .acct-badge {
  border-radius: 8px;
  padding: 4px 10px;
  font-size:var(--fs-10);
  letter-spacing: 1.4px;
  font-family: var(--font-mono);
  font-weight: var(--fw-700);
  text-transform: uppercase;
}

/* ZONE 2 — Metrics (3 stat tiles) ------------------------- */
.acct-head--operator .acct-head-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}
.acct-head--operator .acct-head-metrics .acct-head-stats--legacy,
.acct-head--operator .acct-head-metrics .acct-rating--legacy,
.acct-head--operator .acct-head-metrics .acct-badges--legacy {
  display: none !important;
}
.acct-tile {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  min-width: 0;
}
.acct-tile-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--fw-700);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  overflow: hidden;
}
.acct-tile-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: var(--fw-600);
  color: var(--ink-dim);
}

/* ZONE 3 — Actions (stacked equal-width) ------------------ */
.acct-head--operator .acct-head-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  min-width: 168px;
}
.acct-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: var(--fw-700);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background  320ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 320ms cubic-bezier(0.22, 1, 0.36, 1),
    color        320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.acct-action-btn:hover {
  background: rgba(217, 166, 37, 0.08);
  border-color: rgba(217, 166, 37, 0.45);
  color: var(--gold);
}
.acct-action-btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.06);
  color: var(--ink-muted);
}
.acct-action-btn--ghost:hover {
  background: rgba(216, 81, 69, 0.08);
  border-color: rgba(216, 81, 69, 0.40);
  color: var(--danger, #D85145);
}

/* ── Responsive: collapse zones below 1100px ─────────────── */
@media (max-width: 1100px) {
  .acct-head--operator {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .acct-head--operator .acct-head-identity {
    padding-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 18px;
  }
  .acct-head--operator .acct-head-metrics,
  .acct-head--operator .acct-head-actions {
    border-left: 0;
    padding-left: 0;
  }
  .acct-head--operator .acct-head-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .acct-head--operator .acct-action-btn {
    flex: 1 1 auto;
    min-width: 140px;
  }
}
@media (max-width: 640px) {
  .acct-head--operator { padding: 18px 18px; }
  .acct-head--operator .acct-name { font-size: 22px; }
  .acct-head--operator .acct-avatar {
    width: 72px;
    height: 72px;
    font-size: 26px;
    border-radius: 12px;
  }
  .acct-head--operator .acct-head-metrics {
    grid-template-columns: repeat(3, 1fr);
  }
  .acct-tile {
    padding: 12px;
  }
  .acct-tile-value { font-size: 19px; }
}

/* Refine the trust pill: more compact pill at the metrics row. */
.acct-head-metrics .acct-trust-pill {
  padding: 4px 10px;
  font-size:var(--fs-10);
  letter-spacing: 1.4px;
}

/* Member-no badge — make it feel earned/prestigious per brief. */
.acct-head-name-block .acct-member-no {
  background: color-mix(in srgb, var(--gold) 11%, transparent);
  border-color: color-mix(in srgb, var(--gold) 50%, transparent);
  box-shadow: 0 0 14px -6px rgba(217, 166, 37, 0.45);
}

/* Stack metric items as inline blocks inside the row so the eye
   reads them as discrete data points, not a continuous string. */
.acct-head-metrics .acct-rating,
.acct-head-metrics .acct-head-stats {
  display: inline-flex;
  align-items: center;
  margin: 0;
}
.acct-head-metrics .acct-rating[hidden] { display: none; }

/* ── Responsive: stack the 3 zones below 980px ──────────────── */
@media (max-width: 980px) {
  .acct-head {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px 18px;
  }
  .acct-head-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .acct-head-actions .btn { min-width: 0; }
}
.acct-avatar {
  width: 72px;
  height: 72px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--bg-3), var(--bg-4));
  border: 1px solid var(--line-bright);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-28);
  font-weight: var(--fw-700);
  color: var(--ink);
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.acct-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.acct-head-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.acct-head-name-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.acct-name {
  font-family: var(--font-display);
  font-size: var(--fs-28);
  font-weight: var(--fw-700);
  color: var(--ink);
  letter-spacing: -0.015em;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0;
}
/* Trust-level pill — sits inline with the name. Reads "TRUST LEVEL 2
   · ACTIVE MEMBER". Gold-tinted on a dark-glass background to read as
   a credential, not a chip. Mirrors the seller-card pill on item.html
   so the user's own profile and the public-facing card agree visually. */
.acct-trust-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(rgba(217, 166, 37, 0.16), rgba(217, 166, 37, 0.16)), var(--bg-2, #232932);
  border: 1px solid rgba(217, 166, 37, 0.4);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight:var(--fw-700);
  color: var(--gold);
  white-space: nowrap;
}
.acct-trust-pill[hidden] { display: none; }

/* Combined stats strip — Member-since · N listings · ★ rating, etc.
   All on one line with bullet separators that the JS layer joins so
   we never end up with leading/trailing dots when an item is empty. */
.acct-head-stats,
.acct-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: var(--fw-600);
  margin: 0;
}
.acct-member-no {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 3px 10px;
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 8%, transparent);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: var(--fw-700);
  color: var(--gold);
  width: fit-content;
}
.acct-member-no[hidden] { display: none; }
.acct-badges {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.acct-badge {
  font-family: var(--font-mono);
  font-size:var(--fs-10);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: var(--fw-600);
  padding: 4px 8px;
  border-radius: var(--r-1);
  border: 1px solid;
}
.acct-badge-pending {
  color: var(--warning);
  border-color: rgba(227, 144, 45, 0.3);
  background: rgba(227, 144, 45, 0.06);
}
.acct-badge-verified {
  color: var(--gold);
  border-color: rgba(217, 166, 37, 0.3);
  background: rgba(217, 166, 37, 0.06);
}

@media (max-width: 620px) {
  .acct-name { font-size: var(--fs-20); }
  .acct-avatar { width: 56px; height: 56px; font-size: var(--fs-18); }
}

/* ============================================================
   TABS (horizontal nav at top of all account pages)
   ============================================================ */
.acct-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-6);
  overflow-x: auto;
  scrollbar-width: none;
  /* iOS momentum scroll + soft tab-snap so swiping the tab strip on
     mobile lands on a tab edge instead of stopping mid-tab. Added
     2026-05-10 after the owner reported messages/listings tabs felt
     janky on iPhone. */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.acct-tabs::-webkit-scrollbar { display: none; }
.acct-tab { scroll-snap-align: start; }

.acct-tab {
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: var(--fw-600);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-1) var(--ease-standard), border-color var(--dur-1) var(--ease-standard);
  white-space: nowrap;
  flex-shrink: 0;
}
.acct-tab:hover { color: var(--ink); }
.acct-tab.is-active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ============================================================
   PAGE HEAD (listings, settings)
   ============================================================ */
.acct-page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
  flex-wrap: wrap;
}
/* .acct-page-title styles moved to core.css (.page-title alias). */
.acct-page-desc {
  font-size: var(--fs-13);
  color: var(--ink-muted);
  margin: 0;
}
.acct-page-actions {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  flex-wrap: wrap;
}

.acct-filter-group {
  display: inline-flex;
  gap: 2px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  padding: 3px;
}
.acct-filter {
  padding: 7px 12px;
  background: transparent;
  border: 0;
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: var(--fw-600);
  cursor: pointer;
  transition: all var(--dur-1) var(--ease-standard);
}
.acct-filter:hover { color: var(--ink); }
.acct-filter.is-active {
  background: var(--bg-3);
  color: var(--ink);
}

/* ============================================================
   OVERVIEW GRID
   ============================================================ */
.acct-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--s-4);
  align-items: start;
}
/* iPad portrait (768px) keeps 2-col overview. Was 900 which collapsed
   exactly at iPad portrait, wasting ~700px width on stacked cards. */
@media (max-width: 760px) {
  .acct-grid { grid-template-columns: 1fr; }
}
.acct-col {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
}

.acct-card {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  padding: var(--s-4);
}
.acct-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-4);
}
.acct-card-title {
  font-family: var(--font-display);
  font-size: var(--fs-16);
  font-weight: var(--fw-700);
  text-transform: uppercase;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin: 0;
}
.acct-card-desc {
  font-size: var(--fs-13);
  color: var(--ink-muted);
  line-height: 1.55;
  margin: 0 0 var(--s-4);
}
.acct-card-link {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: var(--fw-600);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-standard);
}
.acct-card-link:hover { color: var(--gold); }

/* Stats grid */
.acct-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}
/* Below 480 px each stat-cell at half-width crammed the value +
   label into too tight a column. Stack 1-up for narrow phones. */
@media (max-width: 480px) {
  .acct-stats { grid-template-columns: 1fr; }
}
.acct-stat {
  padding: var(--s-3);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.acct-stat-value {
  font-family: var(--font-display);
  font-size: var(--fs-28);
  font-weight: var(--fw-700);
  color: var(--ink);
  line-height: 1;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.acct-stat-label {
  font-family: var(--font-mono);
  font-size:var(--fs-10);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: var(--fw-600);
}

/* Verify callout */
.acct-verify {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
}
.acct-verify-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-2);
  background: rgba(217, 166, 37, 0.08);
  border: 1px solid rgba(217, 166, 37, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  flex-shrink: 0;
}
.acct-verify-icon svg { width: 22px; height: 22px; }
.acct-verify-body { flex: 1; min-width: 0; }

/* Payout readiness callout */
.acct-payout-card {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
}
.acct-payout-card[hidden] { display: none; }
.acct-payout-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-2);
  background: rgba(217, 166, 37, 0.08);
  border: 1px solid rgba(217, 166, 37, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  flex-shrink: 0;
}
.acct-payout-icon svg { width: 22px; height: 22px; }
.acct-payout-body { flex: 1; min-width: 0; }
.acct-payout-card.is-ready .acct-payout-icon {
  background: rgba(94, 168, 114, 0.10);
  border-color: rgba(94, 168, 114, 0.35);
  color: var(--success);
}
.acct-payout-card.is-pending .acct-payout-icon,
.acct-payout-card.is-incomplete .acct-payout-icon {
  background: rgba(227, 144, 45, 0.10);
  border-color: rgba(227, 144, 45, 0.35);
  color: var(--warning);
}

.payout-status {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
}
.payout-status[hidden] { display: none; }
.payout-status-row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  align-items: center;
}
.payout-status-label {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: var(--fw-600);
}
.payout-status-val {
  color: var(--ink);
  font-weight: var(--fw-600);
  text-align: right;
}
.payout-status-note {
  margin: var(--s-2) 0 0;
  color: var(--ink-muted);
  font-size: var(--fs-12);
  line-height: 1.45;
}

/* Compact list (recent listings / threads) */
.acct-list {
  display: flex;
  flex-direction: column;
}
.acct-list-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: center;
  padding: 12px 0;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--line);
}
.acct-list-row:last-child { border-bottom: 0; }
.acct-list-row:hover .acct-list-title { color: var(--gold); }
.acct-list-img {
  width: 48px;
  height: 48px;
  border-radius: var(--r-2);
  background-size: cover;
  background-position: center;
  background-color: var(--bg-2);
  flex-shrink: 0;
}
.acct-list-body { min-width: 0; }
.acct-list-title {
  font-size: var(--fs-13);
  font-weight: var(--fw-600);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--dur-1) var(--ease-standard);
}
.acct-list-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: var(--tracking-wide);
  color: var(--ink-dim);
  margin-top: 2px;
}
.acct-list-side {
  font-family: var(--font-display);
  font-size: var(--fs-14);
  font-weight: var(--fw-700);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Empty states */
.acct-empty {
  padding: var(--s-4);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  align-items: center;
  position: relative;
  isolation: isolate;
  animation: acct-empty-in 320ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes acct-empty-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.acct-empty p {
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 460px;
  margin: 0 auto;
}
.acct-empty-lg {
  padding: clamp(48px, 8vw, 88px) var(--s-4);
  gap: var(--s-5);
}
.acct-empty-lg::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -20%);
  width: 480px; height: 480px;
  max-width: 100%;
  /* Cap the height proportionally so the decorative blur doesn't
     create a 480px-tall ghost column over an empty state on phones. */
  max-height: 60vw;
  background: radial-gradient(closest-side,
    rgba(217, 166, 37, 0.10) 0%,
    rgba(217, 166, 37, 0.04) 35%,
    transparent 70%);
  pointer-events: none;
  z-index: -1;
  filter: blur(8px);
}
.acct-empty-lg h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-24), 3vw, var(--fs-32));
  font-weight: var(--fw-700);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}
.acct-empty-icon {
  width: 72px;
  height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold, #D9A625);
  background: linear-gradient(135deg,
    rgba(217, 166, 37, 0.14) 0%,
    rgba(217, 166, 37, 0.04) 100%);
  border: 1px solid rgba(217, 166, 37, 0.32);
  border-radius: 18px;
  position: relative;
  margin-bottom: var(--s-2);
  box-shadow:
    0 12px 32px -10px rgba(217, 166, 37, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.acct-empty-icon::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 20px;
  border: 1px solid transparent;
  background: linear-gradient(135deg,
    rgba(217, 166, 37, 0.4),
    transparent 60%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.5;
}
.acct-empty-icon svg {
  width: 32px; height: 32px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

/* Empty-state CTA — never squish the button in the column layout. */
.acct-empty .btn,
.acct-empty-lg .btn { flex-shrink: 0; }

/* Page-head actions — the "Sell an item" button sits next to a filter
   group in a flex row. Keep its intrinsic width so the label can't
   clip if the filter group takes more horizontal space than expected. */
.acct-page-actions .btn { flex-shrink: 0; }

/* ============================================================
   SETTINGS LAYOUT
   ============================================================ */
.settings-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
}
/* iPad portrait (768px) deserves the dual-column sidebar — was 800
   which collapsed exactly at iPad portrait. Drop the breakpoint to
   720 so phone-only triggers it. */
@media (max-width: 720px) {
  .settings-layout {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
}

.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  padding: 6px;
  position: sticky;
  top: calc(80px + 28px + 16px);
}
@media (max-width: 720px) {
  .settings-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .settings-nav::-webkit-scrollbar { display: none; }
}
.settings-nav-link {
  padding: 10px 14px;
  font-size: var(--fs-13);
  font-weight: var(--fw-500);
  color: var(--ink-muted);
  text-decoration: none;
  border-radius: var(--r-1);
  transition: all var(--dur-1) var(--ease-standard);
  white-space: nowrap;
}
.settings-nav-link:hover { color: var(--ink); background: var(--bg-2); }
.settings-nav-link.is-active {
  color: var(--ink);
  background: var(--bg-3);
  font-weight: var(--fw-600);
}
.settings-nav-danger { color: var(--danger); }
.settings-nav-danger:hover { color: var(--danger); }

.settings-panels { min-width: 0; }

.settings-panel {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  padding: var(--s-5);
  animation: settings-fade var(--dur-2) var(--ease-decel);
}
@keyframes settings-fade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
/* .settings-panel-title styles moved to core.css (.section-title alias). */
.settings-panel-desc {
  font-size: var(--fs-13);
  color: var(--ink-muted);
  margin: 0 0 var(--s-6) 0;
}

/* FICA verification explainer — gold-tinted callout above the payout
   form so sellers see the verification + badge promise BEFORE typing
   their ID number. */
.settings-fica-note {
  font-size: var(--fs-13);
  color: var(--ink-muted);
  background: rgba(217, 166, 37, 0.08);
  border: 1px solid rgba(217, 166, 37, 0.25);
  border-radius: var(--r-3);
  padding: var(--s-3) var(--s-4);
  margin: 0 0 var(--s-5) 0;
  line-height: 1.55;
}
.settings-fica-note strong {
  color: var(--gold);
  font-family: var(--font-mono);
  font-size:var(--fs-11);
  letter-spacing:var(--tracking-wide);
  text-transform: uppercase;
  margin-right: 4px;
}

.settings-avatar-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0 22px 0;
  margin: 0 0 12px 0;
  border-bottom: 1px solid var(--bg-3);
}
.settings-avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--bg-3), var(--bg-4));
  border: 1px solid var(--line-bright);
  flex-shrink: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-22);
  font-weight: var(--fw-700);
  color: var(--ink);
}
.settings-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.settings-avatar-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.settings-avatar-name {
  font-family: var(--font-display);
  font-weight: var(--fw-700);
  color: var(--ink);
  font-size: var(--fs-16);
  letter-spacing: -0.01em;
}
.settings-avatar-no {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: var(--fw-700);
  color: var(--gold);
  width: fit-content;
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 8%, transparent);
}
.settings-avatar-no[hidden] { display: none; }

/* Avatar interaction: the circle is now a real <button> so the user
   knows it's clickable. Add cursor + hover hint that mirrors the
   "Upload photo" button. */
.settings-avatar-button {
  cursor: pointer;
  padding: 0;
  border: 1px solid var(--line-bright);
  background: linear-gradient(135deg, var(--bg-3), var(--bg-4));
  transition: border-color 0.13s, transform 0.13s;
}
.settings-avatar-button:hover {
  border-color: var(--gold);
  transform: scale(1.02);
}
.settings-avatar-button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.settings-avatar-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.settings-avatar-hint {
  margin: 6px 0 0;
  font-size: var(--fs-11);
  color: var(--ink-dim);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
/* The address form lives inside settings.html with the `hidden`
   attribute — but `.settings-form { display:flex }` outranks the
   UA `[hidden]` rule, so the form would render at page load and
   clicking "Add address" appeared to do nothing. Force-hide explicitly. */
.settings-form[hidden] { display: none !important; }
.settings-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.settings-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
/* 2026-05-25 — was 560px so 2-col field layout persisted on
   tablet portrait (561-720px) with fields ~280-320px each —
   too cramped for label + input. Bumped to 720 so tablets
   stack cleanly. */
@media (max-width: 720px) {
  .settings-field-row { grid-template-columns: 1fr; }
}
.settings-label {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: var(--fw-600);
}
.settings-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  color: var(--ink);
  outline: none;
  transition: border-color var(--dur-1) var(--ease-standard), background var(--dur-1) var(--ease-standard);
}
.settings-input:focus {
  border-color: var(--gold);
  background: var(--bg-3);
  box-shadow: 0 0 0 3px rgba(217, 166, 37, 0.10);
}
.settings-input.is-readonly {
  color: var(--ink-muted);
  cursor: not-allowed;
}
.settings-input.is-error {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(216, 81, 69, 0.10);
}
.settings-hint {
  font-size: var(--fs-11);
  color: var(--ink-dim);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
}
.settings-hint.is-error { color: var(--danger); }
.settings-phone {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: stretch;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  overflow: hidden;
  transition: border-color var(--dur-1) var(--ease-standard);
}
.settings-phone:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217, 166, 37, 0.10); }
.settings-phone-prefix {
  padding: 12px 14px;
  background: var(--bg-3);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  font-weight: var(--fw-600);
  border-right: 1px solid var(--line);
}
.settings-phone input {
  border: 0;
  background: transparent;
  outline: none;
  padding: 12px 14px;
  color: var(--ink);
  font-size: var(--fs-14);
  font-family: var(--font-sans);
}
.settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
  padding-top: var(--s-2);
}

.settings-divider {
  height: 1px;
  background: var(--line);
  margin: var(--s-4) 0;
}

.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  flex-wrap: wrap;
}
.settings-row-label {
  font-size: var(--fs-14);
  font-weight: var(--fw-600);
  color: var(--ink);
  margin-bottom: 4px;
}
.settings-row-desc {
  font-size: var(--fs-12);
  color: var(--ink-muted);
  line-height: 1.5;
  max-width: 480px;
}
.settings-row-danger .settings-row-label { color: var(--danger); }

.settings-toggles {
  display: flex;
  flex-direction: column;
}
.settings-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.settings-toggle:last-child { border-bottom: 0; }
.settings-toggle input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--gold);
  cursor: pointer;
  flex-shrink: 0;
}
/* 2026-05-25 — mobile bump so the toggle clears WCAG 44px tap
   target. Native checkboxes hit-test their visible box; 24px
   is the practical max before the row gets visually weird. */
@media (max-width: 640px) {
  .settings-toggle input[type="checkbox"] {
    width: 24px;
    height: 24px;
  }
}

.settings-choice-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3);
}
.settings-choice {
  padding: var(--s-4);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  cursor: pointer;
  text-align: left;
  transition: all var(--dur-1) var(--ease-standard);
}
.settings-choice:hover { border-color: var(--line-bright); }
.settings-choice.is-active {
  border-color: var(--gold);
  background: rgba(217, 166, 37, 0.05);
}
.settings-choice-label {
  font-size: var(--fs-14);
  font-weight: var(--fw-600);
  color: var(--ink);
  margin-bottom: 2px;
}
.settings-choice-desc {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: var(--tracking-wider);
  color: var(--ink-dim);
  text-transform: uppercase;
}

/* Danger button variant */
.btn-danger {
  background: var(--danger);
  color: var(--ink);
  border: 0;
  padding: 10px 16px;
  border-radius: var(--r-2);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--fw-600);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-standard);
}
.btn-danger:hover { background: var(--danger); filter: brightness(1.12); }

/* ============================================================
   TOAST (settings save feedback)
   ============================================================ */
.acct-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--bg-3);
  color: var(--ink);
  padding: 12px 18px;
  border: 1px solid rgba(94, 168, 114, 0.5);
  border-radius: var(--r-2);
  font-size: var(--fs-13);
  font-weight: var(--fw-500);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6);
  z-index: var(--z-toast, 2000);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-standard), transform var(--dur-2) var(--ease-decel);
  pointer-events: none;
}
.acct-toast svg { width: 16px; height: 16px; color: #5EA872; flex-shrink: 0; }
.acct-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.acct-toast.is-error { border-color: rgba(216, 81, 69, 0.5); }
.acct-toast.is-error svg { color: var(--danger); }

/* ============================================================
   ACCOUNT — rating summary under name
   ============================================================ */
.acct-rating {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  letter-spacing: var(--tracking-wide);
}
.acct-rating-star {
  color: var(--gold);
  font-size:var(--fs-14);
  line-height: 1;
}
.acct-rating-score {
  color: var(--ink);
  font-weight: var(--fw-600);
}
.acct-rating-count {
  color: var(--ink-dim);
  font-size: var(--fs-11);
}

/* ============================================================
   Password strength meter
   ============================================================ */
.pwd-strength {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.pwd-strength-bar {
  flex: 1;
  height: 4px;
  background: var(--bg-4);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.pwd-strength-fill {
  height: 100%;
  border-radius: var(--r-pill);
  width: 0;
  transition: width 220ms var(--ease-standard), background 220ms var(--ease-standard);
}
.pwd-strength-fill[data-level="weak"]   { width: 33%;  background: var(--danger); }
.pwd-strength-fill[data-level="fair"]   { width: 66%;  background: var(--warning); }
.pwd-strength-fill[data-level="strong"] { width: 100%; background: var(--success); }
.pwd-strength-label {
  font-family: var(--font-mono);
  font-size:var(--fs-11);
  font-weight:var(--fw-600);
  min-width: 44px;
  text-align: right;
  letter-spacing: 0.3px;
}
.pwd-strength-label[data-level="weak"]   { color: var(--danger); }
.pwd-strength-label[data-level="fair"]   { color: var(--warning); }
.pwd-strength-label[data-level="strong"] { color: var(--success); }

/* ============================================================
   Sub-section head within a panel (e.g. "Change password")
   ============================================================ */
.settings-section-head {
  font-family: var(--font-display);
  font-size:var(--fs-15);
  font-weight:var(--fw-600);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 4px;
}
.settings-section-desc {
  font-size:var(--fs-13);
  color: var(--ink-dim);
  margin: 0 0 var(--s-3);
  line-height: 1.5;
}

/* ============================================================
   Inline delete confirmation card
   Collapsed by default, animates open/closed via .is-shown.
   Keeps the element in the render tree so the transition runs
   both directions (unlike [hidden] which is display:none).
   ============================================================ */
.settings-delete-confirm {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  padding: 0 20px;
  background: rgba(216, 81, 69, 0.06);
  border: 0 solid rgba(216, 81, 69, 0.2);
  border-radius: 10px;
  transition:
    max-height 240ms var(--ease-decel),
    opacity 200ms var(--ease-standard),
    margin-top 240ms var(--ease-decel),
    padding 240ms var(--ease-decel),
    border-width 240ms var(--ease-decel);
}
.settings-delete-confirm.is-shown {
  max-height: 520px;
  opacity: 1;
  margin-top: 20px;
  padding: 20px;
  border-width: 1px;
}

/* ============================================================
   Passkey list (settings → security panel)
   ============================================================ */
.settings-passkey-list {
  margin: 12px 0 16px;
}
.settings-passkey-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-passkey-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 8px;
}
.settings-passkey-info { flex: 1 1 auto; min-width: 0; }
.settings-passkey-name {
  font-size:var(--fs-14);
  font-weight:var(--fw-600);
  color: var(--ink);
  margin-bottom: 4px;
  word-break: break-word;
}
.settings-passkey-meta {
  font-family: var(--font-mono);
  font-size:var(--fs-11);
  color: var(--ink-dim);
  letter-spacing: 0.04em;
}
.settings-passkey-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.settings-section-note {
  margin: 8px 0 12px;
  font-size: 12.5px;
  color: var(--ink-dim);
}

/* ============================================================
   Section divider between profile sub-sections
   ============================================================ */
.settings-section-divider {
  height: 1px;
  background: var(--line-2);
  margin: 32px 0 28px;
  border: 0;
}

/* settings-actions with no bottom margin, used between sub-sections */
.settings-actions-tight {
  margin-bottom: 0 !important;
}

/* ============================================================
   Password input with visibility toggle
   ============================================================ */
.pwd-input-wrap {
  position: relative;
  /* Inside a `.settings-row` (display:flex; flex-wrap:wrap) the bare
     input was forced full-width via `width:100%` + flex-wrap. The
     wrapper div has no width hint of its own, so it would shrink to
     the input's intrinsic width. Match the wrapping behavior. */
  width: 100%;
}
.pwd-input-wrap .settings-input {
  padding-right: 44px;
}
.pwd-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius:var(--r-4);
  color: var(--ink-dim);
  cursor: pointer;
  padding: 0;
  transition: color 120ms, background 120ms;
}
.pwd-toggle:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
}
.pwd-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.pwd-toggle svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pwd-toggle .pwd-toggle-off { display: none; }
.pwd-toggle.is-visible .pwd-toggle-on { display: none; }
.pwd-toggle.is-visible .pwd-toggle-off { display: block; }

/* ──────────────────────────────────────────────────────────────
   ADDRESS LIST (multi-address book — Settings → Delivery addresses)
   ────────────────────────────────────────────────────────────── */
.addr-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.addr-list:empty {
  display: none;
}
.addr-list-empty {
  padding: var(--s-4);
  border: 1px dashed rgba(255,255,255,0.10);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  color: var(--ink-muted);
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--fs-14);
}
.addr-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3) var(--s-4);
  background: var(--bg-1);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  transition: border-color 120ms;
}
.addr-card.is-default {
  border-color: rgba(217,166,37,0.45);
  background: rgba(217,166,37,0.04);
}
.addr-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.addr-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.addr-card-label {
  font-family: var(--font-display);
  font-size: var(--fs-15);
  font-weight:var(--fw-600);
  color: var(--ink);
  letter-spacing: 0.01em;
}
.addr-default-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size:var(--fs-10);
  font-weight:var(--fw-600);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--gold-ink);
}
.addr-card-summary {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  color: var(--ink-muted);
  word-break: break-word;
}
.addr-card-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}
.addr-card-actions .btn {
  font-size:var(--fs-12);
  padding: 6px 10px;
}
@media (max-width: 540px) {
  .addr-card {
    grid-template-columns: 1fr;
  }
  .addr-card-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.addr-list-actions {
  margin-bottom: var(--s-4);
}
.addr-form {
  margin-top: var(--s-3);
  padding: var(--s-4);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.addr-form-title {
  font-family: var(--font-display);
  font-size: var(--fs-16);
  font-weight:var(--fw-600);
  color: var(--ink);
  margin: 0 0 var(--s-3) 0;
  letter-spacing: 0.01em;
}
.addr-default-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  color: var(--ink-muted);
  cursor: pointer;
  user-select: none;
}
.addr-default-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
  cursor: pointer;
  flex: 0 0 auto;
}


/* ==========================================================
   MOBILE FIXES :: 2026-05-03 :: account
   ========================================================== */
@media (max-width: 480px) {
  .seller-wallet-amount { font-size: clamp(28px, 7vw, 36px); }
  .seller-withdraw-presets { flex-wrap: wrap; }
  .seller-preset-btn { flex: 0 1 auto; min-height: 40px; }
  .listings-card-action {
    padding: 10px 16px;
    font-size:var(--fs-12);
    min-height: 44px;
  }
}

/* === MOBILE FIXES :: 2026-05-03 (final pass) === */
/* The .acct-stats { repeat(2, 1fr) } override that used to live here
   was a regression — an earlier 480px block deliberately switched to
   single column to give the value+label pair room to breathe. The
   2-col version made digits collide with the label on 320–400 px
   screens, so this rule was deleted 2026-05-04. */

/* ── 2026-05-04: 2FA recovery code blocks + form-error inline ── */
.settings-recovery-codes {
  display: block;
  margin: 12px 0 16px;
  padding: 14px 16px;
  background: var(--bg-1, #1B2027);
  border: 1px solid var(--line-2, #2B313A);
  border-radius: 8px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size:var(--fs-14);
  line-height: 1.9;
  color: var(--ink, #ECEFF2);
  letter-spacing:var(--tracking-wide);
  white-space: pre;
  user-select: all;
}
.settings-form-error {
  margin-top: 8px;
  color: var(--danger, #D85145);
  font-size:var(--fs-13);
  line-height: 1.4;
}

.settings-totp-qr-wrap {
  display: flex;
  justify-content: center;
  margin: 12px 0 20px;
}
.settings-totp-qr-wrap img {
  display: block;
  border: 4px solid var(--ink, #ECEFF2);
  border-radius: 8px;
  background: var(--ink, #ECEFF2);
}

/* ─────────────────────────────────────────────────────────────
   PKS-MODAL — minimal modal used by the SMS opt-out confirmation.
   Hidden by default via the [hidden] HTML attribute; toggled
   open by removing the attribute in JS. Backdrop click + Cancel
   button + Esc all trigger the same data-modal-cancel path.
   Sized to be readable on mobile (stays within viewport).
   ───────────────────────────────────────────────────────────── */
.pks-modal {
  position: fixed; inset: 0; z-index: 1050;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.pks-modal[hidden] { display: none; }
.pks-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}
.pks-modal-card {
  position: relative;
  max-width: 440px; width: 100%;
  /* `--surface` was never defined anywhere in the project, so the
     fallback `#fff` made this card white-on-white in dark mode + lost
     button contrast. Use the actual dark-card token (`--bg-1`) so the
     SMS opt-out modal matches the rest of the dark UI. */
  background: var(--bg-1, #1B2027);
  color:      var(--ink,  #ECEFF2);
  border: 1px solid var(--bg-3, #2B313A);
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 24px 48px rgba(0,0,0,.35);
  font-family: inherit;
}
.pks-modal-title {
  margin: 0 0 .5rem 0;
  font-size: 1.125rem; font-weight:var(--fw-700); line-height: 1.3;
}
.pks-modal-body {
  margin: 0 0 .75rem 0;
  font-size: .95rem; line-height: 1.45; color: var(--ink-2, #4a5260);
}
.pks-modal-list {
  margin: 0 0 1rem 0;
  padding-left: 1.25rem;
  font-size: .9rem; line-height: 1.5;
  color: var(--ink-2, #4a5260);
}
.pks-modal-list li { margin-bottom: .35rem; }
.pks-modal-foot {
  margin: 0 0 1.25rem 0;
  font-size: .85rem;
  color: var(--ink-3, #6b7382);
}
.pks-modal-actions {
  display: flex; justify-content: flex-end; gap: .5rem;
  flex-wrap: wrap;
}
.pks-modal-actions .btn {
  min-width: 110px;
}

/* ─────────────────────────────────────────────────────────────
   PHONE-VERIFY BANNER
   Subtle warm-yellow banner shown above the account header when
   the user has a phone on file but has not verified it. The
   "Resend SMS" button kicks off POST /auth/phone/start-verify;
   account.js disables it on cooldown/daily-cap.
   ───────────────────────────────────────────────────────────── */
.acct-phone-banner {
  display: flex; align-items: center; gap: .9rem;
  margin: 0 0 1rem 0;
  padding: .85rem 1rem;
  background: #FFF8E1;
  border: 1px solid #F4D27A;
  border-radius: 10px;
  color: #5C4400;
  font-size: .92rem;
  line-height: 1.4;
}
.acct-phone-banner[hidden] { display: none; }
.acct-phone-banner-icon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #F4D27A;
  color: #5C4400;
}
.acct-phone-banner-body { flex: 1 1 auto; min-width: 0; }
.acct-phone-banner-title { font-weight:var(--fw-600); font-size: .95rem; }
.acct-phone-banner-desc  { color: #6F5500; font-size: .85rem; margin-top: 2px; }
.acct-phone-banner-btn   { flex: 0 0 auto; }
.acct-phone-banner-btn[disabled] { opacity: .55; cursor: not-allowed; }
/* PIN-entry row — shown below the description after Send PIN is
   tapped. 6-digit input + Confirm button on one row. */
.acct-phone-banner-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; flex-wrap: wrap;
}
.acct-phone-banner-row[hidden] { display: none; }
.acct-phone-banner-input {
  flex: 0 0 130px;
  padding: 9px 12px;
  background: #FFF8E0;
  border: 1px solid #C49500;
  border-radius:var(--r-4);
  font-family: var(--font-mono, monospace);
  font-size:var(--fs-16);
  font-weight:var(--fw-700);
  color: #4A3700;
  letter-spacing: 0.18em;
  text-align: center;
}
.acct-phone-banner-input:focus {
  outline: none;
  border-color: var(--gold, #D9A625);
  box-shadow: 0 0 0 3px rgba(217, 166, 37, 0.15);
}
@media (max-width: 540px) {
  .acct-phone-banner { flex-direction: column; align-items: flex-start; }
  .acct-phone-banner-btn { width: 100%; }
}

/* ============================================================
   2026-05-11 — universal hex-grid bleed fix on account-area
   pages (/account, /listings, /purchases, /messages, /banking,
   /settings).

   Every card class in this file that originally had an rgba-only
   background gets an opaque base layered underneath. The visual
   tint is preserved (same rgba on top) but the underlying solid
   panel colour stops the page-level hex grid behind <main> from
   bleeding through. Selectors mirror the original definitions
   above; using !important so we don't have to re-author each
   rule in place.
   ============================================================ */

/* Banking — Verification note + payout status strip */
.settings-fica-note {
  background:
    linear-gradient(rgba(217, 166, 37, 0.08), rgba(217, 166, 37, 0.08)),
    var(--bg-1) !important;
}
.payout-status {
  background:
    linear-gradient(rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.025)),
    var(--bg-1) !important;
}

/* Account overview / dashboard accent panels */
.acct-overview-hero,
.acct-overview-fica,
.acct-overview-card,
.acct-empty,
.acct-empty-lg,
.acct-pill-gold,
.acct-pill-success,
.acct-pill-warning,
.acct-pill-danger {
  /* Most of these carry small rgba accents. Force an opaque
     base so any nested tints can't reach through. */
  background-color: var(--bg-1) !important;
}

/* Wallet, messages, listings shared chrome */
.wallet-card,
.wallet-loadmoney-card,
.wallet-payfrom-card,
.msg-thread-item,
.msg-bubble,
.msg-bubble-meta,
.listings-card,
.purchases-card,
.listings-card-status-tag {
  background-color: var(--bg-1) !important;
}

/* Settings panel chrome already opaque (.settings-panel uses
   var(--bg-1)); ensure all .settings-* surface cards do too. */
.settings-toggle,
.settings-row,
.settings-input-wrap,
.settings-section-card {
  background-color: var(--bg-1) !important;
}

/* Catch-all — any panel-style div that's commonly translucent.
   These are the wrappers, not the active-state highlights, so
   forcing solid here doesn't lose the gold-tint feedback that
   .is-active / :checked states layer on top. */
.acct-tab,
.acct-tab-link {
  background-color: var(--bg-1);
}
.acct-tab.is-active,
.acct-tab.is-active a,
.acct-tab-link.is-active {
  background:
    linear-gradient(rgba(217, 166, 37, 0.06), rgba(217, 166, 37, 0.06)),
    var(--bg-1) !important;
}

/* Settings — language picker (English / Afrikaans) selected
   state was rgba-only over a solid resting bg, replacing it
   when selected → grid bled through. Layer the gold tint over
   the resting panel colour. */
.settings-choice.is-active {
  background:
    linear-gradient(rgba(217, 166, 37, 0.05), rgba(217, 166, 37, 0.05)),
    var(--bg-2) !important;
}

/* Brute-force fix for the whole language picker chrome —
   panel + each tile + their hover/active states. If any
   layer's background still resolves to a translucent rgba
   the hex grid behind <main> can show through; lock all of
   them to a solid var(--bg-1) base with !important so the
   panel reads opaque whatever the cascade does. */
section.settings-panel[data-panel="language"],
.settings-choice-row,
.settings-choice {
  background-color: var(--bg-1) !important;
}
.settings-choice.is-active {
  background:
    linear-gradient(rgba(217, 166, 37, 0.05), rgba(217, 166, 37, 0.05)),
    var(--bg-1) !important;
}

/* ============================================================
   2026-05-11 — comprehensive sledgehammer against grid bleed
   on account-area pages.

   Every card-style class in account.css that paints a visible
   surface gets an explicit solid base. The hex grid behind
   <main> stays visible in the GAPS between these cards (between
   panels, in the gutter, around the tabs), but cannot bleed
   through the cards themselves.
   ============================================================ */
.settings-panel,
.settings-panel.is-active,
.settings-toggle,
.settings-section,
.settings-section-card,
.settings-row,
.settings-input-wrap,
.settings-choice,
.settings-choice.is-active,
.settings-choice-row,
.settings-fica-note,
.settings-2fa-card,
.settings-pwd-card,
.settings-card,
.payout-status,
.payout-row,
.acct-card,
.acct-overview-card,
.acct-overview-hero,
.acct-overview-fica,
.acct-empty,
.acct-empty-lg,
.acct-stat-card,
.acct-tab,
.listings-card,
.purchases-card,
.purchases-empty,
.msg-thread-item,
.msg-thread-empty,
.msg-bubble,
.msg-composer,
.seller-wallet-card,
.seller-rtc-toggle,
.wallet-card,
.wallet-loadmoney-card,
.wallet-payfrom-card {
  background-color: var(--bg-1) !important;
}

/* Active-state highlights — keep the gold-tint accent but lock
   it on top of a solid base so the cascade can't drop the base
   layer (which was the original bleed cause). */
.acct-tab.is-active,
.settings-choice.is-active,
.settings-toggle.is-active {
  background:
    linear-gradient(rgba(217, 166, 37, 0.06), rgba(217, 166, 37, 0.06)),
    var(--bg-1) !important;
}
.settings-fica-note {
  background:
    linear-gradient(rgba(217, 166, 37, 0.08), rgba(217, 166, 37, 0.08)),
    var(--bg-1) !important;
}

/* Wrapper-level fix was hiding the grid in too much area —
   reverted. Per-card opacity overrides above are now the
   single source of truth, so the grid shows around / between
   cards exactly where it should. The wrapper still gets a
   stacking-context lift so child elements with their own
   solid bg stay above the SVG cleanly. */
.acct-inner,
.msg-page-inner {
  position: relative !important;
  z-index: 5 !important;
}