/* ═══════════════════════════════════════════════════════════
   QeepX · qx-system.css   Geometry normalisation layer (loaded last, after qx-polish / qx-refresh).
   Derived from the on-device audit (audit/qeepx_design_tokens.md). It does not restyle the product; it makes
   repeated components share ONE geometry: page gutter, chip family, hit areas, button pairs, nav label baseline.
   ═══════════════════════════════════════════════════════════ */
:root{
  --qx-page-x:12px;        /* page side gutter: the top bar logo, wallet strip, room cards and lists all sit on 12 */
  --qx-card-pad:14px;      /* inner padding of a utility card */
  --qx-chip-h:30px;        /* tab chips (Live · All rooms · Posts · Market …) */
  --qx-chip-fs:12px;
  --qx-hit:40px;           /* minimum tap area, invisible when the visual is smaller */
  --qx-btn-sm-h:34px;      /* small pill buttons (Edit profile · Wallet · Following) */
  --qx-btn-h:44px;         /* primary CTA */
}

/* ── 1 · page gutters: every page-level block starts on the 12 px rhythm ─────────────────── */
.qx-page{padding:var(--qx-page-x)}
.qx-page > .qx-page__title{margin:0 0 10px}
.qx-refcard{margin-left:var(--qx-page-x);margin-right:var(--qx-page-x);padding:12px var(--qx-card-pad)}
.qx-mtiles{padding-left:var(--qx-page-x)!important;padding-right:var(--qx-page-x)!important}
.profile-stats{padding-left:var(--qx-page-x);padding-right:var(--qx-page-x)}
.games-grid{padding-left:var(--qx-page-x)!important;padding-right:var(--qx-page-x)!important}
.form-group{margin-left:0;margin-right:0}                                  /* forms sit inside a .qx-page or a card, never on their own gutter */

/* ── 2 · header: wallet strip keeps the same right gutter as the left, and scrolls when the numbers get long ─ */
.wallet-strip{padding-left:var(--qx-page-x)!important;padding-right:var(--qx-page-x)!important;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.wallet-strip::-webkit-scrollbar{display:none}
.wallet-strip .wallet-item,.wallet-strip .vip-tag{flex:0 0 auto}
.top-icon-btn{position:relative}
.top-icon-btn::after{content:"";position:absolute;inset:-4px}               /* 34 px visual, 42 px tap */

/* ── 3 · bottom navigation: all five labels share one baseline ───────────────────────────── */
.bottom-nav .nav-item{align-items:center}
.bottom-nav .nav-item .nav-label{line-height:16px;height:16px;display:block}
.bottom-nav .nav-item--plus{padding-top:0;padding-bottom:4px;justify-content:flex-end;overflow:visible}   /* label bottom = the other labels' bottom; the disc floats above */
.bottom-nav .nav-item--plus .plus{margin-top:0}
.bottom-nav .nav-item--plus .nav-label{margin-top:3px}

/* ── 4 · chips: one family (rooms · categories · fun · zoo · profile · leaderboard) ───────── */
.pill-tab,.fun-tab,.zoo-tab,.profile-tab,.lb-tab,.disc-tab,.wtab-chip,.zoo-sort,.rbtn,.legal-tab{
  height:var(--qx-chip-h);min-height:var(--qx-chip-h);padding:0 14px;border-radius:calc(var(--qx-chip-h) / 2);
  font-size:var(--qx-chip-fs);font-weight:700;line-height:var(--qx-chip-h);display:inline-flex;align-items:center;gap:4px;
  position:relative;flex-shrink:0;white-space:nowrap;box-sizing:border-box}
.pill-tab::after,.fun-tab::after,.zoo-tab::after,.profile-tab::after,.lb-tab::after,.disc-tab::after,.zoo-sort::after,.rbtn::after,.legal-tab::after,.dash-tab::after{content:"";position:absolute;left:0;right:0;top:-5px;bottom:-5px}   /* 40 px tap band */
.pill-tab svg,.fun-tab svg,.zoo-tab svg{width:14px;height:14px}
.pill-row,.tab-scroll,.cat-row{padding-left:var(--qx-page-x);padding-right:var(--qx-page-x);gap:6px}

/* ── 5 · small buttons and icon buttons: keep the visual, guarantee the tap ──────────────── */
.btn-follow,.follow-btn,.following-btn{height:30px;padding:0 14px;border-radius:15px;font-size:12px;font-weight:800;position:relative}
.btn-follow::after,.follow-btn::after,.following-btn::after{content:"";position:absolute;left:0;right:0;top:-5px;bottom:-5px}
.ig-act,.post-options{position:relative;width:24px;height:24px}
.ig-act::after,.post-options::after{content:"";position:absolute;inset:-8px}
.dash-tab{position:relative;min-height:40px;display:inline-flex;align-items:center}
.qx-contrib__head > a,.l7__row > a,a.qx-link-sm,.profile-verify-link{position:relative;display:inline-flex;align-items:center;min-height:40px;margin:-12px 0}   /* text links: 40 px band, no layout change */
.checkout-wrap{padding-left:var(--qx-page-x)!important;padding-right:var(--qx-page-x)!important}
.ap{padding-left:var(--qx-page-x)!important;padding-right:var(--qx-page-x)!important}
.qx-public-actions > .qx-public-button{flex:1 1 0;justify-content:center;min-width:0}

/* ── 6 · paired actions share one width (Edit profile · Wallet) ───────────────────────────── */
.profile-actions{display:flex;gap:10px;justify-content:center;padding:0 var(--qx-page-x)}
.profile-actions > .btn{flex:1 1 0!important;width:auto!important;min-width:0;max-width:170px;height:var(--qx-btn-sm-h);justify-content:center;white-space:nowrap;padding:0 12px;display:inline-flex;align-items:center;gap:6px}

/* ── 8 · legal / long-form pages: the header sits below the status bar like every other page ─ */
.legal-head,.qx-legal__head{padding-top:calc(env(safe-area-inset-top,0px) + 8px)}