/* ═══════════════════════════════════════════════════════════════════
   QeepX Design Basement · APP KIT  (assets/css/qx-app.css)
   The light "utility world" (home, lists, profile, wallet, games) built on
   qx-tokens.css. Loaded AFTER style.css so it restyles every existing page
   through the shared classes. Mobile-only, 375 frame.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --bg:var(--qx-surface-alt); --surface:var(--qx-surface); --text:var(--qx-ink-900); --muted:var(--qx-ink-600);
  --border:var(--qx-ink-100); --lpurple:#f3e5f3; --radius:8px; --radius-lg:10px;
  --shadow:0 1px 2px rgba(29,17,34,.06),0 4px 14px rgba(125,19,123,.08);
  --nav-h:calc(50px + env(safe-area-inset-bottom,0px)); --top-h:48px;
  --ff:var(--qx-font-body);
}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--ff);font-size:14px;line-height:1.4;-webkit-font-smoothing:antialiased;padding-bottom:var(--nav-h);margin:0}
*{-webkit-tap-highlight-color:transparent}
a{color:var(--qx-purple)}
h1,h2,h3,h4{font-family:var(--qx-font-body);color:var(--qx-ink-900)}
.num,.stat-num,.wallet-card-value,.wi-val,.currency-amount,.pkg-qp,.jp-val,.zoo-card-value{font-family:var(--qx-font-num);font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* ── Title bar 48 ─────────────────────────────────────────────── */
.top-bar{position:fixed;top:0;left:0;right:0;z-index:100;height:calc(var(--top-h) + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);
  background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding-left:12px;padding-right:8px;gap:8px}
.top-bar .logo{text-transform:none;font-family:var(--qx-font-display);font-weight:800;font-size:18px;letter-spacing:-.01em;color:var(--qx-purple-deep);display:flex;align-items:baseline;gap:6px;min-width:0;flex:1}
.top-bar .logo span{font-family:var(--qx-font-body);font-weight:700;font-size:15px;color:var(--qx-ink-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-actions{display:flex;gap:6px;align-items:center}
.top-icon-btn{width:34px;height:34px;border-radius:50%;background:var(--qx-surface-alt);border:0;display:grid;place-items:center;font-size:15px;position:relative;color:var(--qx-ink-800);cursor:pointer}
.top-icon-btn:active{background:#eadcea}
.top-icon-btn .badge{position:absolute;top:1px;right:1px;min-width:14px;height:14px;padding:0 3px;border-radius:7px;background:#f93f55;color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;border:1.5px solid #fff}
.notif-pulse{animation:none}

/* ── Wallet chips row (Pyrite · Citrine · Jade) ──────────────── */
.wallet-strip{position:fixed;top:calc(var(--top-h) + env(safe-area-inset-top,0px));left:0;right:0;z-index:99;height:38px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px;padding:0 12px;overflow-x:auto;scrollbar-width:none}
.wallet-strip::-webkit-scrollbar{display:none}
.wallet-item{height:26px;border-radius:5px;background:var(--qx-surface-alt);display:flex;align-items:center;gap:4px;padding:0 8px 0 5px;font-size:11px;color:var(--qx-ink-600);white-space:nowrap;flex-shrink:0}
.wallet-item .wi-icon{font-size:13px}
.wallet-item .wi-val{font-size:13px;font-weight:700;color:var(--qx-ink-900)}
.wallet-item .vip-tag{margin-left:0}
.page-wrap{padding-top:calc(var(--top-h) + env(safe-area-inset-top,0px));min-height:100vh}
.page-wrap.has-wallet{padding-top:calc(var(--top-h) + 38px + env(safe-area-inset-top,0px))}

/* ── Tab bar 50 · icon 38 · label 10 · hue per tab ───────────── */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:100;height:var(--nav-h);padding-bottom:env(safe-area-inset-bottom,0px);
  background:var(--surface);border-top:1px solid var(--border);display:flex;align-items:stretch;justify-content:space-around}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;text-decoration:none;color:var(--qx-ink-500);position:relative;--hue:var(--qx-purple)}
.nav-item .nav-icon{width:38px;height:28px;display:grid;place-items:center;font-size:21px;line-height:1;filter:grayscale(1) opacity(.75);transition:transform var(--qx-t-tap) var(--qx-ease-spring),filter var(--qx-t-tap)}
.nav-item .nav-label{font-size:11px;font-weight:600;letter-spacing:.01em}
.nav-item img{width:26px;height:26px;border-radius:50%;object-fit:cover;border:2px solid transparent}
.nav-item.active{color:var(--hue)}
.nav-item.active .nav-icon{filter:none;transform:translateY(-1px) scale(1.08)}
.nav-item.active img{border-color:var(--hue)}
.nav-item[data-tab=home]{--hue:var(--qx-tab-home);--hue-text:#5f8a00}.nav-item[data-tab=home].active{color:#5f8a00}
.nav-item[data-tab=fun]{--hue:var(--qx-tab-fun)}
.nav-item[data-tab=discover]{--hue:var(--qx-tab-discover)}
.nav-item[data-tab=stream]{--hue:var(--qx-tab-stream)}
.nav-item[data-tab=me]{--hue:var(--qx-tab-me)}
.nav-item .nav-dot{position:absolute;top:6px;right:calc(50% - 16px);width:8px;height:8px;border-radius:50%;background:#f93f55;border:1.5px solid #fff}
.nav-item--live .nav-icon::after{content:"LIVE";position:absolute;top:2px;right:calc(50% - 26px);font-size:11px;font-weight:800;color:#fff;background:#ff4684;padding:1px 4px;border-radius:6px;letter-spacing:.04em}

/* ── Pill tabs h28 r14 (sub-navigation on every list page) ──── */
.pill-tabs,.profile-tabs,.gift-cats{display:flex;gap:6px;padding:10px 12px;overflow-x:auto;scrollbar-width:none;background:var(--surface);border-bottom:1px solid var(--border)}
.pill-tabs::-webkit-scrollbar{display:none}
.pill-tab,.profile-tab,.gift-cat-btn{flex-shrink:0;height:28px;padding:0 14px;border-radius:14px;background:var(--qx-surface-alt);color:var(--qx-ink-600);font-size:12px;font-weight:700;border:0;display:flex;align-items:center;text-decoration:none;white-space:nowrap}
.pill-tab.active,.profile-tab.active,.gift-cat-btn.active{background:var(--qx-purple-deep);color:#fff}
.fun-tab{flex-shrink:0;height:28px;padding:0 14px;border-radius:14px;margin:10px 0 10px 6px;background:var(--qx-surface-alt);color:var(--qx-ink-600);font-size:12px;font-weight:700;text-decoration:none;display:flex;align-items:center;border-bottom:0!important}
.fun-tab:first-child{margin-left:12px}
.fun-tab.active-tab{background:var(--qx-purple-deep);color:#fff!important;border-bottom:0!important}
div[style*="background:var(--purple)"]:has(.fun-tab){background:var(--surface)!important;border-bottom:1px solid var(--border)}

/* ── Sections, cards, rows ───────────────────────────────────── */
.section-head{display:flex;align-items:center;justify-content:space-between;padding:14px 12px 8px;font-size:16px;font-weight:700;color:var(--qx-ink-900)}
.section-head a,.section-head .see-all{font-size:12px;font-weight:600;color:var(--qx-ink-500);text-decoration:none}
.card,.post-card,.discover-card,.game-tile,.zoo-card,.pkg-card,.wallet-card,.room-card,.other-game-row,.qp-package{background:var(--surface);border-radius:8px;box-shadow:var(--shadow);border:0}
.list-row,.other-game-row{min-height:50px;display:flex;align-items:center;gap:10px;padding:8px 12px}
.divider{height:10px;background:var(--qx-surface-alt)}

/* ── Buttons: primary h44 r22 lime · secondary · block ───────── */
.btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;border-radius:20px;font-size:15px;font-weight:700;border:0;cursor:pointer;text-decoration:none;transition:transform var(--qx-t-tap)}
.btn:active{transform:scale(.96)}
.btn-primary{background:var(--qx-lime);color:var(--qx-purple-deep)}
.btn-secondary{background:var(--qx-purple);color:#fff}
.btn-outline{background:transparent;border:1.5px solid var(--qx-purple);color:var(--qx-purple)}
.btn-block{width:100%;height:50px;border-radius:25px;font-size:16px}
.btn-sm,.btn.small{height:32px;padding:0 12px;font-size:12px;border-radius:16px}
.btn-follow{height:26px;padding:0 12px;border-radius:13px;background:var(--qx-lime);color:var(--qx-purple-deep);font-size:12px;font-weight:800;border:0}
.btn-follow.is-following{background:var(--qx-surface-alt);color:var(--qx-ink-600)}

/* ── Forms: input h44 r10, 16px (no iOS zoom) ────────────────── */
.form-group{margin:0 12px 12px}
.form-label{display:block;font-size:12px;font-weight:700;color:var(--qx-ink-600);margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em}
.form-input,select.form-input,textarea.form-input{width:100%;height:44px;border-radius:10px;border:1.5px solid var(--border);background:var(--surface);padding:0 14px;font-size:16px;color:var(--qx-ink-900);outline:0;font-family:inherit}
textarea.form-input{height:auto;min-height:88px;padding:12px 14px}
.form-input:focus{border-color:var(--qx-purple)}

/* ── Stories rail (ring = lime→purple gradient, seen = grey) ─── */
.stories-row{display:flex;gap:12px;padding:12px 12px 10px;overflow-x:auto;scrollbar-width:none;background:var(--surface)}
.stories-row::-webkit-scrollbar{display:none}
.story-item{flex-shrink:0;width:64px;display:flex;flex-direction:column;align-items:center;gap:5px;text-decoration:none}
.story-avatar-wrap,.story-add{width:60px;height:60px;border-radius:50%;padding:2.5px;background:linear-gradient(135deg,var(--qx-lime),var(--qx-purple));display:grid;place-items:center;position:relative}
.story-avatar-wrap.seen{background:var(--qx-ink-200)}
.story-avatar{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid #fff;background:#fff}
.story-add{background:var(--qx-surface-alt);border:1.5px dashed var(--qx-ink-200)}
.story-add::after{content:"+";position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;border-radius:50%;background:var(--qx-lime);color:var(--qx-purple-deep);font-weight:800;font-size:15px;display:grid;place-items:center;border:2px solid #fff}
.story-label,.story-caption{font-size:11px;color:var(--qx-ink-600);max-width:64px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Post card ───────────────────────────────────────────────── */
.post-card{margin:10px 12px;overflow:hidden}
.post-header{display:flex;align-items:center;gap:10px;padding:10px 12px}
.post-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover}
.post-user{font-size:14px;font-weight:700;color:var(--qx-ink-900)}
.post-meta,.post-time{font-size:11px;color:var(--qx-ink-500)}
.post-more{margin-left:auto;width:28px;height:28px;border-radius:50%;background:var(--qx-surface-alt);border:0;font-size:14px}
.post-photo,.post-img{display:block;width:100%;height:auto;max-height:420px;object-fit:cover;background:#f0e6f0}
.post-actions{display:flex;align-items:center;gap:14px;padding:10px 12px 6px}
.reaction-btn,.post-actions button{background:none;border:0;font-size:20px;display:flex;align-items:center;gap:4px;color:var(--qx-ink-700);padding:0}
.reaction-count,.post-comment-count{font-size:12px;font-weight:700;color:var(--qx-ink-600);font-family:var(--qx-font-num)}
.post-caption{padding:0 12px 12px;font-size:14px;color:var(--qx-ink-900);line-height:1.45}
.post-caption b{font-weight:700}

/* ── Games hub tiles (r8, icon 44) ───────────────────────────── */
.games-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 12px 12px}
.game-tile{padding:14px 8px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;position:relative}
.game-icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:26px;background:linear-gradient(135deg,#f3e5f3,#fff);box-shadow:inset 0 0 0 1px var(--border)}
.game-name{font-size:12px;font-weight:700;color:var(--qx-ink-900);text-align:center}
.game-tile .tag,.game-badge{position:absolute;top:6px;right:6px;height:14px;padding:0 5px;border-radius:7px;font-size:11px;font-weight:800;background:#ff4684;color:#fff;display:flex;align-items:center}
.other-game-row{margin:0 12px 8px}
.other-game-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:22px;background:var(--qx-surface-alt)}
.other-game-name{font-size:14px;font-weight:700}.other-game-sub{font-size:11px;color:var(--qx-ink-500)}
.other-game-arrow{margin-left:auto;color:var(--qx-ink-500)}

/* ── Profile (Me) ─────────────────────────────────────────────── */
.profile-header{background:linear-gradient(180deg,#f3e5f3 0,var(--surface) 120px);padding:18px 16px 12px;text-align:center}
.profile-avatar{width:88px;height:88px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.15);margin:0 auto 8px;display:block}
.profile-name{font-size:18px;font-weight:700;color:var(--qx-ink-900)}
.profile-username{font-size:12px;color:var(--qx-ink-500)}
.profile-bio{font-size:13px;color:var(--qx-ink-700);margin-top:6px}
.profile-stats{display:flex;justify-content:space-around;padding:12px 8px;background:var(--surface)}
.stat-item{text-align:center;text-decoration:none}
.stat-num{font-size:18px;font-weight:700;color:var(--qx-ink-900);display:block}
.stat-label{font-size:11px;color:var(--qx-ink-500);text-transform:uppercase;letter-spacing:.04em}
.posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:2px 0}
.posts-grid-img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.vip-badge,.vip-tag{display:inline-flex;align-items:center;gap:2px;height:14px;padding:0 6px;border-radius:7px;font-size:11px;font-weight:800;color:#fff;background:linear-gradient(90deg,var(--qx-purple),var(--qx-purple-light));vertical-align:middle}
.vip-5,.vip-6,.vip-7{background:linear-gradient(90deg,#ff8617,#ffd700);color:#3a2400}

/* ── Wallet ───────────────────────────────────────────────────── */
.wallet-card{margin:12px;padding:18px;background:linear-gradient(135deg,var(--qx-purple-deep),var(--qx-purple));color:#fff;border-radius:12px}
.wallet-card-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.wallet-card-value{font-size:36px;font-weight:700;color:var(--qx-lime);line-height:1.1}
.wallet-card-usd{font-size:12px;opacity:.75}
.currency-row{display:flex;align-items:center;gap:10px;padding:12px;margin:0 12px 8px;background:var(--surface);border-radius:8px;box-shadow:var(--shadow)}
.currency-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:20px;background:var(--qx-surface-alt)}
.currency-name{font-size:14px;font-weight:700}.currency-desc{font-size:11px;color:var(--qx-ink-500)}
.currency-amount{margin-left:auto;font-size:18px;font-weight:700;color:var(--qx-purple-deep)}
.pkg-grid,.buy-qp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 12px 12px}
.pkg-card,.qp-package{padding:12px 6px;text-align:center;border:1.5px solid transparent;position:relative}
.pkg-card.popular,.pkg-card.selected{border-color:var(--qx-lime);background:#f8fce6}
.pkg-qp{font-size:20px;font-weight:700;color:var(--qx-purple-deep)}
.pkg-price{font-size:12px;color:var(--qx-ink-600);margin-top:2px}
.pkg-popular-tag{position:absolute;top:-8px;left:50%;transform:translateX(-50%);height:16px;padding:0 8px;border-radius:8px;background:var(--qx-lime);color:var(--qx-purple-deep);font-size:11px;font-weight:800;display:flex;align-items:center;white-space:nowrap}

/* ── Discover / people cards ─────────────────────────────────── */
.discover-card{margin:0 12px 10px;overflow:hidden;text-decoration:none;display:block}
.discover-card-img{width:100%;height:150px;object-fit:cover}
.discover-card-body{padding:10px 12px}

/* ── Empty state, toast, modal sheet ─────────────────────────── */
.empty-state{padding:56px 24px;text-align:center}
.empty-icon{font-size:44px;margin-bottom:8px}
.empty-title{font-size:17px;font-weight:700;color:var(--qx-ink-900)}
.empty-sub{font-size:13px;color:var(--qx-ink-500);margin-top:4px}
#toast-container{position:fixed;left:0;right:0;bottom:calc(var(--nav-h) + 16px);z-index:500;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.toast{max-width:300px;padding:9px 16px;border-radius:8px;background:rgba(29,17,34,.92);color:#fff;font-size:14px;text-align:center;animation:qx-toast var(--qx-t-toast) ease forwards}
.toast.success{background:rgba(29,17,34,.92)}.toast.error{background:#c0392b}.toast.warn{background:#b45309}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:400}
.modal-sheet{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-radius:10px 10px 0 0;padding:8px 16px calc(16px + env(safe-area-inset-bottom,0px));z-index:401;animation:qx-up var(--qx-t-sheet-in) var(--qx-ease-enter)}
.modal-handle{width:36px;height:4px;border-radius:2px;background:var(--qx-ink-200);margin:4px auto 12px}
.modal-title{font-size:15px;font-weight:700;margin-bottom:10px}

/* ── Room list (Stream tab) · 2-col cover grid ───────────────── */
.qx-rooms{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 12px 90px}
.qx-rc{position:relative;border-radius:8px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow);text-decoration:none;color:var(--qx-ink-900);display:block}
.qx-rc__cover{position:relative;aspect-ratio:1;background:linear-gradient(160deg,#4a1a6e,#1a001a);overflow:hidden}
.qx-rc__cover img{width:100%;height:100%;object-fit:cover;display:block}
.qx-rc__cover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60%;background:linear-gradient(0deg,rgba(0,0,0,.65),rgba(0,0,0,0))}
.qx-rc__tag{position:absolute;top:6px;left:6px;height:16px;padding:0 6px;border-radius:2px;background:rgba(0,0,0,.45);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;gap:3px;z-index:1;backdrop-filter:blur(4px)}
.qx-rc__live{position:absolute;top:6px;right:6px;height:16px;padding:0 6px;border-radius:8px;background:#ff4684;color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;gap:4px;z-index:1}
.qx-rc__live::before{content:"";width:5px;height:5px;border-radius:50%;background:#fff;animation:qx-blink 1.2s infinite}
@keyframes qx-blink{50%{opacity:.3}}
.qx-rc__online{position:absolute;bottom:6px;right:6px;height:18px;padding:0 7px;border-radius:9px;background:rgba(0,0,0,.45);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;gap:3px;z-index:1;font-family:var(--qx-font-num)}
.qx-rc__mics{position:absolute;bottom:6px;left:6px;display:flex;z-index:1}
.qx-rc__mics img,.qx-rc__mics i{width:20px;height:20px;border-radius:50%;border:1.5px solid #fff;object-fit:cover;margin-left:-6px;background:var(--qx-purple-light)}
.qx-rc__mics img:first-child,.qx-rc__mics i:first-child{margin-left:0}
.qx-rc__mics.speaking img:first-child{box-shadow:0 0 0 2px var(--qx-speak)}
.qx-rc__body{padding:8px 8px 9px}
.qx-rc__name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--qx-ink-900)}
.qx-rc__host{margin-top:3px;display:flex;align-items:center;gap:5px;font-size:11px;color:var(--qx-ink-600);white-space:nowrap;overflow:hidden}
.qx-rc__host img{width:16px;height:16px;border-radius:50%;object-fit:cover;flex-shrink:0}
.qx-rc__host .qx-lv{height:12px}
.qx-rc__goal{margin-top:6px;height:3px;border-radius:2px;background:var(--qx-ink-100);overflow:hidden}
.qx-rc__goal i{display:block;height:100%;width:var(--p,0);background:linear-gradient(90deg,var(--qx-lime),#ff8617)}
.qx-rooms__rank{grid-column:1/-1;display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;border-radius:8px;background:linear-gradient(90deg,var(--qx-purple-deep),var(--qx-purple));color:#fff;text-decoration:none;font-size:13px;font-weight:700}
.qx-rooms__rank i{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--qx-gold);background:var(--qx-purple-light);margin-left:-7px;overflow:hidden}
.qx-rooms__rank i:first-of-type{margin-left:0}
.qx-rooms__rank img{width:100%;height:100%;object-fit:cover}
.qx-rooms__rank span{margin-left:auto;font-size:11px;opacity:.8;font-weight:600}
.qx-fab{position:fixed;right:16px;bottom:calc(var(--nav-h) + 16px);width:52px;height:52px;border-radius:50%;background:var(--qx-lime);color:var(--qx-purple-deep);border:0;font-size:22px;display:grid;place-items:center;z-index:100;box-shadow:0 8px 20px rgba(170,221,0,.45);cursor:pointer}
.qx-fab:active{transform:scale(.94)}

/* ── Login page tweaks (index.php keeps its inline CSS; align the CTA) ── */
.btn-join{border-radius:22px!important;height:44px}
.form-input.login{height:44px}

/* ── Party list rows (Ola 5.54): cover 80 left · title · tag + seats-left · online count ── */
.qx-rows{padding:8px 12px 90px;display:flex;flex-direction:column;gap:8px}
.qx-row{display:flex;gap:10px;align-items:center;background:var(--surface);border-radius:10px;padding:8px;box-shadow:var(--shadow);text-decoration:none;color:var(--qx-ink-900);position:relative;overflow:hidden}
.qx-row__cover{width:80px;height:80px;border-radius:8px;flex-shrink:0;background:linear-gradient(160deg,#4a1a6e,#1a001a);overflow:hidden;position:relative}
.qx-row__cover img{width:100%;height:100%;object-fit:cover;display:block}
.qx-row__cover .lv{position:absolute;left:0;right:0;bottom:0;height:16px;background:rgba(0,0,0,.45);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:3px}
.qx-row__cover .lv::before{content:"";width:5px;height:5px;border-radius:50%;background:#ff4684;animation:qx-blink 1.2s infinite}
.qx-row__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.qx-row__name{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qx-row__tag{display:inline-flex;align-items:center;gap:4px;height:18px;padding:0 7px;border-radius:9px;background:var(--qx-purple-deep);color:#fff;font-size:11px;font-weight:700;width:max-content}
.qx-row__tag.lime{background:var(--qx-lime);color:var(--qx-purple-deep)}
.qx-row__sub{font-size:11px;color:var(--qx-ink-600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:5px}
.qx-row__sub img{width:14px;height:14px;border-radius:50%;object-fit:cover}
.qx-row__online{position:absolute;right:10px;bottom:10px;font-size:11px;font-weight:700;color:var(--qx-ink-600);font-family:var(--qx-font-num);display:flex;align-items:center;gap:3px}
.qx-row__mics{display:flex;margin-top:1px}
.qx-row__mics img,.qx-row__mics i{width:16px;height:16px;border-radius:50%;border:1.5px solid #fff;margin-left:-5px;object-fit:cover;background:var(--qx-purple-light)}
.qx-row__mics img:first-child,.qx-row__mics i:first-child{margin-left:0}
.qx-banner{height:96px;border-radius:10px;overflow:hidden;position:relative;background:linear-gradient(120deg,var(--qx-purple-deep),var(--qx-purple) 60%,#b04fae);color:#fff;display:flex;align-items:center;padding:0 16px;text-decoration:none;box-shadow:var(--shadow)}
.qx-banner b{font-family:var(--qx-font-display);font-size:20px;font-weight:800;display:block;line-height:1.05}
.qx-banner span{font-size:11px;opacity:.85}
.qx-banner .art{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:54px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.35))}
/* Ola-style tab bar: raised centre + create button */
.nav-item--plus{flex:0 0 72px;justify-content:flex-start;padding-top:2px}
.nav-item--plus .plus{width:46px;height:46px;flex:0 0 46px;flex-shrink:0;border-radius:50%;background:var(--qx-lime);color:var(--qx-purple-deep);display:grid;place-items:center;font-size:26px;font-weight:900;margin-top:-16px;box-shadow:0 8px 20px rgba(170,221,0,.45),0 0 0 4px var(--surface);line-height:1}
.nav-item--plus .nav-label{margin-top:2px;color:var(--qx-ink-500)}

/* ── Referral card (Me) · light, one row ─────────────────────── */
.qx-refcard{margin:8px 10px 0;background:var(--surface);border:1px solid var(--border);border-radius:var(--qx-r-card,12px);padding:10px 12px}
.qx-refcard__head{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;color:var(--text);margin-bottom:8px}
.qx-refcard__head a{font-size:11px;font-weight:600;color:var(--purple);text-decoration:none}
.qx-refcard__row{display:flex;gap:6px;align-items:stretch}
.qx-refcard__code{flex:1;display:flex;align-items:center;padding:0 12px;height:38px;border:1px dashed var(--purple);border-radius:8px;font-family:"Barlow Condensed",monospace;font-size:18px;font-weight:700;letter-spacing:3px;color:var(--purple);background:#faf5fa}
.qx-refcard__btn{height:38px;padding:0 14px;border:none;border-radius:8px;background:var(--purple);color:#fff;font-size:12px;font-weight:700;cursor:pointer}
.qx-refcard__btn--share{background:var(--lime);color:var(--dpurple)}
.qx-refcard__hint{margin-top:6px;font-size:11px;color:var(--muted)}
.qx-refcard__hint b{color:var(--text);font-weight:700}

/* ── Settings list (Me → Settings) ───────────────────────────── */
.qx-list{background:var(--surface);border:1px solid var(--border);border-radius:var(--qx-r-card,12px);overflow:hidden}
.qx-list__row{display:flex;align-items:center;gap:12px;padding:12px 14px;text-decoration:none;color:var(--text);border-bottom:1px solid var(--border);cursor:pointer}
.qx-list__row:last-child{border-bottom:none}
.qx-list__row:active{background:#f6eef6}
.qx-list__ic{width:32px;height:32px;border-radius:8px;background:#f3e5f3;display:grid;place-items:center;font-size:16px;flex-shrink:0}
.qx-list__body{flex:1;min-width:0;display:flex;flex-direction:column}
.qx-list__nm{font-size:14px;font-weight:600}
.qx-list__sub{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qx-list__arr{color:var(--muted);font-size:20px;line-height:1}
.qx-list__row--danger .qx-list__nm{color:#c0392b}
.qx-list__row--danger .qx-list__ic{background:#fdecea}
.qx-list__ver{text-align:center;font-size:11px;color:var(--muted);padding:14px 0 4px}

/* ── Top contributors strip (Home / Discover) · light, compact ── */
.qx-contrib{background:var(--surface);border-bottom:1px solid var(--border);padding:8px 0 6px}
.qx-contrib__head{display:flex;justify-content:space-between;align-items:center;padding:0 12px 6px;font-size:12px;font-weight:700;color:var(--text)}
.qx-contrib__head a{font-size:11px;font-weight:600;color:var(--purple);text-decoration:none}
.qx-contrib__rail{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:0 8px}
.qx-contrib__rail::-webkit-scrollbar{display:none}
.qx-contrib__item{flex:0 0 58px;display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--text)}
.qx-contrib__av{position:relative;width:40px;height:40px;border-radius:50%;padding:2px;background:var(--border)}
.qx-contrib__av.r1{background:linear-gradient(135deg,#ffd54a,#e0a800)}
.qx-contrib__av.r2{background:linear-gradient(135deg,#d9d9d9,#9e9e9e)}
.qx-contrib__av.r3{background:linear-gradient(135deg,#e2a06a,#b06a35)}
.qx-contrib__av img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;background:#fff}
.qx-contrib__av i{position:absolute;bottom:-3px;right:-3px;width:15px;height:15px;border-radius:50%;background:var(--purple);color:#fff;font-size:11px;font-style:normal;font-weight:800;display:grid;place-items:center;border:1.5px solid #fff}
.qx-contrib__nm{font-size:11px;margin-top:4px;max-width:56px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qx-contrib__val{font-size:11px;color:var(--purple);font-weight:700}

/* ── Create sheet (➕ tab) ───────────────────────────────────── */
.qx-create{position:fixed;inset:0;z-index:420}
.qx-create__scrim{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.qx-create__sheet{position:absolute;left:0;right:0;bottom:0;background:var(--surface);border-radius:14px 14px 0 0;padding:8px 12px calc(14px + env(safe-area-inset-bottom,0px));animation:qx-up var(--qx-t-sheet-in,.22s) var(--qx-ease-enter,ease-out)}
.qx-create__opt{display:flex;align-items:center;gap:12px;padding:12px 8px;text-decoration:none;color:var(--text);border-bottom:1px solid var(--border)}
.qx-create__opt:last-child{border-bottom:none}
.qx-create__opt:active{background:#faf5fa}
.qx-create__ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:22px;flex-shrink:0}
.qx-create__opt b{display:block;font-size:15px;font-weight:700}
.qx-create__opt small{display:block;font-size:12px;color:var(--muted);margin-top:1px}

/* ── Games hub: sub-tabs + tiles (kit wins over page styles) ─── */
.fun-tabs{background:var(--surface);border-bottom:1px solid var(--border);padding:0 6px 0 0}
.fun-tab{padding:0 14px;color:var(--qx-ink-600);border-bottom:0;margin-bottom:10px}
.fun-tab.active,.fun-tab.active-tab{background:var(--qx-purple-deep);color:#fff;border-bottom:0}
.games-grid{gap:10px;padding:4px 12px 12px}
.game-tile{padding:14px 6px 12px;border:1px solid var(--border);box-shadow:none;border-radius:12px;gap:6px}
.game-tile.new-game{border-color:var(--border)}
.game-icon{width:52px;height:52px;border-radius:14px;font-size:26px;box-shadow:none}
.game-name{font-size:12px;font-weight:700;color:var(--qx-ink-900)}
.game-badge{position:static;height:auto;padding:0;background:none;color:var(--qx-ink-500)!important;font-size:11px;font-weight:600}
.new-label::after{top:6px;right:6px;font-size:10px;padding:1px 5px;border-radius:6px;background:#ff4684}
.section-head{background:none;color:var(--qx-ink-900);padding:14px 12px 8px;font-size:16px}
.section-head span{color:var(--qx-ink-500)!important;font-weight:600;opacity:1!important}

/* ═══════════════════════════════════════════════════════════════════
   TYPE + SPACE SYSTEM (typeset / layout pass)
   Roles: display 28 · section 16/700 · row-title 14/600 · body 14 · secondary 12 · caption 11 · badge 10/800
   Space: 4-base (4 8 12 16 20 24) · page gutter 12 · card pad 12–14 · radius: card 12, pill 14, btn 20/22, input 10
   Colour: purple = identity/links/active · lime = primary CTA only · pink #ff4684 = live/new · everything else ink
   ═══════════════════════════════════════════════════════════════════ */
:root{--radius:12px;--radius-lg:12px;--shadow:none;--qx-card-b:1px solid var(--border)}
body{font-size:14px;line-height:1.45}
h1{font-size:22px;font-weight:800;line-height:1.2;margin:0 0 8px}
h2{font-size:18px;font-weight:700;line-height:1.25;margin:0 0 6px}
h3{font-size:16px;font-weight:700;line-height:1.3;margin:0 0 4px}
h4{font-size:14px;font-weight:700;margin:0 0 4px}
p{margin:0 0 8px}
small,.caption,.meta,.muted{font-size:12px;color:var(--qx-ink-600)}

/* every card-like container: white, 1px hairline, r12, no drop shadow */
.card,.post-card,.discover-card,.game-tile,.pkg-card,.wallet-card,.room-card,.other-game-row,.qp-package,
.wcard,.biz-section,.lb-row,.notif-item,.msg-item,.dm-thread,.follow-row,.user-row,.zoo-market-card,.zoo-card-wrap,
.arena-card,.battle-card,.ad-format,.campaign-card,.stat-card,.info-box,.activate-box,.eco-info,.spin-box,.qx-list,.qx-refcard,.qx-contrib{
  background:var(--surface);border:var(--qx-card-b);border-radius:12px;box-shadow:none}
.info-box,.eco-info{background:#faf5fa;border-color:#eadcea;font-size:13px;line-height:1.55;padding:12px 14px;margin:0 12px 12px}
.section-head,.wcard-ttl,.biz-section-title{font-size:15px;font-weight:700;color:var(--qx-ink-900);letter-spacing:0;text-transform:none;margin-bottom:10px}
.wcard-ttl{font-size:13px;color:var(--qx-ink-600)}

/* stats rows (profile, dashboard, arena): equal columns, no dividers, labels never collide */
.profile-stats{display:flex;align-items:flex-start;justify-content:space-between;padding:14px 6px;background:var(--surface)}
.stat-item{flex:1 1 0;min-width:0;text-align:center;text-decoration:none;border:0;padding:0 2px}
.stat-num{display:block;font-family:var(--qx-font-num);font-size:21px;font-weight:700;line-height:1.05;color:var(--qx-ink-900);font-variant-numeric:tabular-nums}
.stat-label{display:block;font-size:10px;color:var(--qx-ink-500);font-weight:600;letter-spacing:.02em;text-transform:uppercase;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* profile header: light wash, name 18, handle 12, two clean buttons */
.profile-header{padding:16px 16px 14px}
.profile-avatar{width:84px;height:84px;border:3px solid #fff;box-shadow:0 0 0 1px var(--border)}
.profile-name{font-size:18px;font-weight:800;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.profile-username{font-size:12px;color:var(--qx-ink-500)}
.profile-bio{font-size:13px;color:var(--qx-ink-700);margin-top:6px;line-height:1.45}
.profile-header .btn{height:34px;padding:0 16px;font-size:13px!important;border-radius:17px}
.profile-header .btn-outline{color:var(--qx-purple)!important;border-color:var(--qx-purple)!important;background:#fff}
.profile-header .btn-outline[href*="wallet"]{background:var(--qx-lime);border-color:var(--qx-lime)!important;color:var(--qx-purple-deep)!important}
.profile-header .btn-primary{background:var(--qx-lime);color:var(--qx-purple-deep)}

/* wallet: one hero, quick actions as flat tiles, tabs as pills */
.wtab-bar{border-bottom:1px solid var(--border);padding:8px 8px 0}
.wtab{font-size:12px;font-weight:700;letter-spacing:0;padding:8px 6px 10px;border-bottom-width:2px}
.wtab.active{background:none}
.wcard{padding:14px;margin:0 12px 12px}
.wcard button[onclick^="sw("],.wcard a[href*="spin"]{background:#faf5fa!important;color:var(--qx-purple-deep)!important;border:1px solid #eadcea!important;font-size:13px!important;padding:12px 8px!important;border-radius:10px!important}

/* forms everywhere (edit profile, create room, ads, business) */
.form-label,.biz-label,label.lbl{font-size:12px;font-weight:700;color:var(--qx-ink-600);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.form-input,.biz-input,.biz-select,.biz-textarea,input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],input[type=tel],select,textarea{
  border:1.5px solid var(--border);border-radius:10px;background:var(--surface);font-size:16px;color:var(--qx-ink-900);font-family:inherit;box-sizing:border-box}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],input[type=tel],select{height:44px;padding:0 14px}
textarea{padding:12px 14px;min-height:88px}
.form-input:focus,.biz-input:focus,input:focus,select:focus,textarea:focus{border-color:var(--qx-purple);outline:0}
.biz-wrap{padding:12px}

/* buttons: never gold gradients / raw reds; one lime primary, one purple secondary */
.btn,button.btn{font-size:15px}
.btn-sm,.btn.small{font-size:13px}
.btn-danger{background:#fdecea;color:#c0392b}
.btn-gold,[style*="linear-gradient(135deg,#B8860B"]{background:var(--qx-purple)!important;color:#fff!important}

/* lists: rows 56, hairline dividers, 12 gutter */
.notif-item,.msg-item,.dm-thread,.follow-row,.user-row,.lb-row{margin:0 12px 8px;padding:10px 12px;min-height:56px;display:flex;align-items:center;gap:12px}

/* badges: one size, one weight */
.vip-tag,.badge-live,.tag-live,.new-tag,.soon-tag,.game-badge,.tier-badge{font-size:10px;font-weight:800;letter-spacing:.03em}
.soon-tag{font-style:normal}

/* empty state */
.empty-state{padding:48px 24px}
.empty-icon{font-size:40px}
.empty-title{font-size:16px}
.empty-sub{font-size:13px}

/* ── Phone column on wide screens: the whole app is one 430px column, always ── */
@media (min-width: 480px){
  body{max-width:430px;margin:0 auto;box-shadow:0 0 0 1px var(--border),0 0 40px rgba(29,17,34,.08);min-height:100vh;position:relative}
  .top-bar,.bottom-nav,.wallet-strip,.wtab-bar,.qx-create__sheet,#toast-container{left:50%!important;right:auto!important;width:430px!important;max-width:430px!important;transform:translateX(-50%)!important;margin:0!important}
  .qx-create__sheet{bottom:0}
  .qx-fab,.fab-post{right:calc(50% - 215px + 16px)!important;left:auto!important}
  .modal-sheet{max-width:430px;margin:0 auto}
}

/* ── Leaderboard podium: avatars + rank pills, no blocks ─────── */
.lb-podium{gap:18px;padding:18px 12px 6px;background:var(--surface);border-bottom:1px solid var(--border)}
.podium-item{width:96px}
.podium-av{border-width:3px}
.podium-1 .podium-av{border-color:#ffc400}.podium-2 .podium-av{border-color:#b8bcc4}.podium-3 .podium-av{border-color:#d29a6b}
.podium-base{height:22px!important;width:auto!important;display:inline-flex;align-items:center;justify-content:center;padding:0 8px;border-radius:11px;font-size:13px;background:var(--qx-surface-alt)!important;color:var(--qx-ink-900)!important;margin-top:4px;box-shadow:none}
.podium-1 .podium-base{background:#fff3c4!important}
.podium-name{font-size:12px}.podium-val{font-size:12px;color:var(--qx-purple)}
.lb-tabs{background:var(--surface)!important;border-bottom:1px solid var(--border);padding:8px 6px}
.lb-tab{color:var(--qx-ink-600)!important;font-size:12px;font-weight:700;padding:0 14px!important;height:28px;border-radius:14px;border-bottom:0!important;display:flex;align-items:center;margin-left:6px}
.lb-tab.active{background:var(--qx-purple-deep);color:#fff!important}
.lb-row.me{border-color:var(--qx-purple);background:#faf5fa}

/* ── Dashboard: light promo card instead of green gradient ───── */
.welcome-banner{background:#f4fadf!important;border:1px solid #d9ecad}
.welcome-banner *{color:var(--qx-ink-900)!important}
.welcome-banner a{background:var(--qx-purple)!important;color:#fff!important}
.btn-follow{margin-left:auto;flex-shrink:0;cursor:pointer}
.me-follow .btn-primary{background:var(--qx-lime)}

/* ── Icon set (inline SVG, currentColor) ────────────────────── */
.qx-i{display:inline-block;vertical-align:-.18em;flex-shrink:0}
.qx-gem{display:inline-block;vertical-align:-.15em;flex-shrink:0}
.nav-item .nav-icon{filter:none;color:var(--qx-ink-500)}
.nav-item.active .nav-icon{color:var(--hue)}
.nav-item[data-tab=home].active .nav-icon{color:#5f8a00}
.nav-item--plus .plus{display:grid;place-items:center}
.top-icon-btn{color:var(--qx-ink-800)}
.btn .qx-i{margin-right:4px}
.qx-list__ic{color:var(--qx-purple)}
.wallet-item .wi-icon{display:grid;place-items:center}

/* ── Every text-tab strip becomes the same pill strip (zoo, dashboard, arena, vip) ── */
.zoo-tabs,.dash-tabs,.arena-tabs,.vip-tabs{display:flex;gap:6px;padding:10px 12px;overflow-x:auto;scrollbar-width:none;background:var(--surface)!important;border-bottom:1px solid var(--border)!important}
.zoo-tab,.dash-tab,.arena-tab,.vip-tab{flex-shrink:0;height:28px;padding:0 14px!important;border-radius:14px;background:var(--qx-surface-alt);color:var(--qx-ink-600)!important;font-size:12px;font-weight:700;border:0!important;margin:0!important;display:flex;align-items:center;text-decoration:none;white-space:nowrap}
.zoo-tab.active,.dash-tab.active,.arena-tab.active,.vip-tab.active{background:var(--qx-purple-deep);color:#fff!important}

/* ── Level chips (Me header) ─────────────────────────────────── */
.qx-lvrow{display:flex;justify-content:center;gap:6px;margin-top:8px;flex-wrap:wrap}
.qx-lv{display:inline-flex;align-items:center;gap:3px;height:20px;padding:0 8px;border-radius:10px;font-size:11px;font-weight:800;background:var(--qx-surface-alt);color:var(--qx-ink-600)}
.qx-lv.t1{background:#e8f0fb;color:#2a5aa8}.qx-lv.t2{background:#e6f6ec;color:#1f7a45}.qx-lv.t3{background:#f3e5f3;color:var(--qx-purple)}.qx-lv.t4{background:#fff1dc;color:#b45309}.qx-lv.t5{background:#fde8f1;color:#c2185b}
.qx-lv--creator{background:#f4fadf;color:#4f8a00}

/* ── Page fade, pull to refresh, skeleton rows ───────────────── */
@media (prefers-reduced-motion:no-preference){
  html.qx-fade-in body{animation:qx-pagein .18s ease-out}
  html.qx-fade-out body{opacity:0;transition:opacity .12s ease-in}
  @keyframes qx-pagein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
}
.qx-ptr{position:fixed;top:calc(var(--top-h) + env(safe-area-inset-top,0px) - 40px);left:50%;margin-left:-16px;width:32px;height:32px;border-radius:50%;background:var(--surface);border:1px solid var(--border);display:grid;place-items:center;z-index:120;transition:transform .2s ease-out;pointer-events:none}
.qx-ptr__spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--qx-ink-200);border-top-color:var(--qx-purple);transition:transform .2s}
.qx-ptr.ready .qx-ptr__spin{transform:rotate(180deg)}
.qx-ptr.loading .qx-ptr__spin{animation:qx-spin .7s linear infinite}
@keyframes qx-spin{to{transform:rotate(360deg)}}
.qx-sk{display:flex;align-items:center;gap:12px;padding:12px}
.qx-sk__av{width:44px;height:44px;border-radius:50%;background:var(--qx-surface-alt);flex-shrink:0}
.qx-sk__lines{flex:1;display:grid;gap:8px}
.qx-sk__lines i{display:block;height:10px;border-radius:5px;background:var(--qx-surface-alt)}
@media (prefers-reduced-motion:no-preference){.qx-sk__av,.qx-sk__lines i{animation:qx-shimmer 1.2s ease-in-out infinite}}
@keyframes qx-shimmer{0%,100%{opacity:1}50%{opacity:.45}}