/* Secondary buttons (btn family) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 16px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: all 0.15s; white-space: nowrap; line-height: normal; text-align: center; }
.btn-sm { padding: 4px 10px; font-size: 11px; border-radius: 4px; }
.btn-accent { background: var(--c-accent); color: #fff; }
.btn-outline { background: transparent; border: 1.5px solid var(--c-divider); color: var(--c-text-body); }
/* Mobile order action buttons (phase1 additive) */
.btn-primary-mobile { display: flex; min-width: 0; align-items: center; justify-content: center; gap: 6px; height: 44px; border-radius: 12px; font-size: 15px; font-weight: 700; background: var(--c-accent); color: #fff; border: none; cursor: pointer; line-height: normal; text-align: center; transition: all 0.15s; white-space: nowrap; }
.btn-secondary-mobile { display: flex; min-width: 0; align-items: center; justify-content: center; gap: 6px; height: 44px; border-radius: 12px; font-size: 14px; font-weight: 600; background: transparent; border: none; box-shadow: inset 0 0 0 1.5px var(--c-divider); color: var(--c-text-body); cursor: pointer; line-height: normal; text-align: center; transition: all 0.15s; white-space: nowrap; }
.btn-danger-mobile { display: flex; min-width: 0; align-items: center; justify-content: center; gap: 6px; height: 44px; border-radius: 12px; font-size: 14px; font-weight: 600; background: transparent; border: none; box-shadow: inset 0 0 0 1.5px rgba(192,57,43,0.35); color: var(--c-text-price); cursor: pointer; line-height: normal; text-align: center; transition: all 0.15s; white-space: nowrap; }
.btn-primary-mobile.disabled { opacity: 0.5; cursor: default; }

/* HOME */
.home { width: 100%; max-width: 480px; height: 100vh; height: 100dvh; display: none; flex-direction: column; position: relative; }
.home.show { display: flex; }
.home-bg-gradient { width: 100%; max-width: 480px; height: 240px; position: absolute; top: 0; left: 0; background: linear-gradient(161deg, var(--c-gradient-bg-start) 0%, var(--c-gradient-bg-end) 66%); pointer-events: none; z-index: 0; }
.home-scroll { flex: 1; overflow-y: auto; position: relative; z-index: 1; padding-bottom: 76px; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
.home-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
.home-content { display: flex; flex-direction: column; padding-top: 8px; }

/* Header */
.header { width: 100%; max-width: 480px; height: 44px; display: flex; align-items: center; padding: 0 12px; }
.header-row { display: flex; align-items: center; gap: 12px; width: 100%; flex-wrap: nowrap; }
.header-logo { width: 36px; height: 36px; border-radius: 8px; background: var(--c-accent); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.search-shell { flex: 1; height: 32px; background: var(--c-search-bg); border-radius: 8px; padding: 0 12px; display: flex; align-items: center; position: relative; overflow: hidden; }
.search-icon { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--c-text-muted); position: relative; flex-shrink: 0; }
.search-icon::after { content: ''; position: absolute; bottom: -3px; right: -2px; width: 1.5px; height: 5px; background: var(--c-text-muted); transform: rotate(-45deg); }
.search-hint { margin-left: 12px; font-size: 12px; font-weight: 500; color: var(--c-text-muted); line-height: 16px; }

/* Banner */
.banner-wrap { width: 100%; max-width: 480px; height: 168px; margin-top: 16px; position: relative; overflow: hidden; }
.banner-track { display: flex; height: 100%; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.banner-slide { width: 100%; max-width: 480px; height: 168px; flex-shrink: 0; position: relative; display: flex; align-items: flex-end; padding: 14px 16px; }
.banner-label { position: relative; z-index: 2; color: #fff; font-size: 20px; font-weight: 700; letter-spacing: 0.5px; }
.banner-dots { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; z-index: 3; }
.banner-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.45); transition: all 0.3s; cursor: pointer; }
.banner-dot.on { background: #fff; transform: scale(1.25); }

/* Notice */
.notice-wrap { width: 100%; max-width: 480px; height: 40px; padding: 0 12px; margin-top: 16px; }
.notice-row { width: 351px; height: 40px; display: flex; align-items: center; border-radius: 8px; position: relative; }
.notice-tag-shell { width: 78px; height: 40px; display: flex; align-items: center; flex-shrink: 0; z-index: 2; overflow: hidden; }
.notice-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 10px; background: var(--c-accent-muted); color: var(--c-text-solid); font-size: 10px; font-weight: 600; border-radius: 0 10px 10px 0; white-space: nowrap; }
.notice-body { width: 307px; height: 40px; background: var(--bg-card); border-radius: 0 8px 8px 0; margin-left: -34px; padding-left: 28px; padding-right: 12px; display: flex; align-items: center; overflow: hidden; position: relative; z-index: 1; }
.notice-track { display: flex; white-space: nowrap; animation: marquee 18s linear infinite; }
.notice-track span { font-size: 11px; font-weight: 500; color: var(--c-text-body); line-height: 16px; }
.notice-gap { width: 32px; flex-shrink: 0; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Quick Actions */
.qa-wrap { width: 100%; max-width: 480px; height: 68px; padding: 0 12px; margin-top: 12px; }
.qa-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 2px; width: 100%; height: 100%; }
.qa-cell { display: flex; flex-direction: column; align-items: center; cursor: pointer; padding-top: 4px; gap: 4px; } .qa-cell:active { opacity: 0.8; transform: scale(0.96); transition: transform 0.1s; }
.qa-cell:active { opacity: 0.7; }
.qa-tile { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; position: relative; }
.qa-tile svg { width: 40px; height: 40px; }
.qa-name { font-size: 12px; font-weight: 600; color: var(--c-text-solid); text-align: center; line-height: 16px; padding: 0 2px; width: 100%; overflow: hidden; letter-spacing: 0.3px; }

/* Game Tabs */
.gt-wrap { width: 100%; max-width: 480px; height: 26px; padding: 0 12px; margin-top: 16px; }
.gt-track { display: inline-flex; align-items: flex-start; gap: 16px; padding-right: 12px; }
.gt-tab { height: 23px; cursor: pointer; position: relative; }
.gt-tab .gt-label { display: inline-flex; align-items: center; height: 100%; position: relative; }
.gt-tab .gt-text { font-size: 14px; line-height: 20px; padding-bottom: 3px; color: var(--c-text-body); font-weight: 400; white-space: nowrap; overflow: visible; }
.gt-tab.on .gt-text { font-weight: 600; color: var(--c-text-solid); }
.gt-tab .gt-mark { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 12px; height: 3px; border-radius: 999px; background: var(--c-accent); display: none; }
.gt-tab.on .gt-mark { display: block; }

/* Category Capsules */
.cc-wrap { width: 100%; max-width: 480px; margin-top: 12px; padding: 0 12px; position: sticky; top: 0; z-index: 5; background: var(--bg-page); }
.cc-row { display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
.cc-pill { height: 26px; padding: 0 12px; border-radius: 999px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 11px; font-weight: 600; line-height: 16px; white-space: nowrap; transition: all 0.15s; }
.cc-pill:active { opacity: 0.85; }
.cc-pill.on { background: var(--c-accent-muted); color: var(--c-text-solid); }
.cc-pill:not(.on) { color: var(--c-text-muted); }

/* Product Group */
.pg-wrap { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.pg-wrap + .pg-wrap { border-top: 8px solid rgba(0,0,0,0.02); padding-top: 12px; }
.pg-head { height: 24px; padding: 0 16px; display: flex; align-items: center; }
.pg-head-inner { display: inline-flex; align-items: center; gap: 6px; }
.pg-bar { width: 4px; height: 14px; border-radius: 2px; flex-shrink: 0; background: var(--c-accent); }
.pg-title { font-size: 17px; font-weight: 700; color: var(--c-text-solid); line-height: 24px; overflow: hidden; }
.pg-grid { padding: 0 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.pg-card { width: 100%; background: var(--bg-card); border-radius: 8px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(0,0,0,0.03); }
.pg-card:active { transform: scale(0.98); transition: transform 0.12s; }

/* Cover */
.pg-cover { position: relative; width: 100%; padding-top: 100%; overflow: hidden; }
.pg-cover-bg { position: absolute; inset: 0; }
.pg-cover-tag { position: absolute; top: 8px; left: 8px; font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.08); padding: 2px 6px; border-radius: 3px; z-index: 1; letter-spacing: 0.5px; }
.pg-cover-stamp { position: absolute; right: 10px; bottom: 10px; font-size: 24px; font-weight: 900; color: rgba(255,255,255,0.05); z-index: 0; letter-spacing: 1px; }

/* Product Body */
.pg-body { padding: 8px; display: flex; flex-direction: column; width: 100%; }
.pg-name { font-size: 14px; font-weight: 600; color: var(--c-text-solid); line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-desc { font-size: 12px; font-weight: 500; color: var(--c-text-body); line-height: 16px; margin-top: 4px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pg-foot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 8px; gap: 6px; }
.pg-price { display: flex; align-items: baseline; }
.pg-psym { font-size: 12px; font-weight: 600; color: var(--c-text-price); line-height: 16px; }
.pg-pval { font-size: 16px; font-weight: 600; color: var(--c-text-price); line-height: 20px; }
.pg-buy { width: 20px; height: 20px; border-radius: 50%; background: var(--c-accent); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0; line-height: 1; }

/* Help */
.help-wrap { width: 100%; max-width: 480px; display: flex; justify-content: center; padding: 0 24px 92px; margin-top: 60px; }
.help-banner { width: 160px; height: 80px; display: flex; align-items: center; justify-content: center; }
.help-banner div { width: 100%; height: 100%; background: rgba(0,0,0,0.02); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; color: var(--c-text-disabled); font-size: 13px; }
.help-banner svg { width: 26px; height: 26px; opacity: 0.2; }

/* TabBar */
.tabbar { width: 100%; max-width: 480px; height: 64px; height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); background: #fff; display: flex; align-items: flex-end; justify-content: center; z-index: 9999; box-shadow: rgba(0,0,0,0.04) 0px -2px 4px 0px; }
.tabbar.hidden { display: none; }
.tb-item { flex: 1 1 0; width: auto; height: 64px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tb-item:active { opacity: 0.7; }
.tb-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tb-icon { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; position: relative; }
.tb-icon svg { width: 26px; height: 26px; }
.tb-badge { position: absolute; top: -4px; right: -10px; min-width: 14px; height: 14px; background: #FC4032; color: #fff; font-size: 9px; font-weight: 700; border-radius: 7px; padding: 0 4px; line-height: 14px; text-align: center; }
.tb-label { font-size: 9px; font-weight: 700; margin-top: 3px; color: var(--c-text-disabled); }
.tb-item.on .tb-label { color: var(--c-text-solid); }
.tb-center { width: 87px; height: 60px; position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.tb-center:active { transform: scale(0.95); transition: transform 0.1s; }
.tb-center-ring { width: 48px; height: 48px; border-radius: 50%; background: var(--c-accent); display: flex; align-items: center; justify-content: center; margin-bottom: 2px; box-shadow: 0 4px 16px rgba(255,170,68,0.25); }
.tb-center-ring svg { width: 24px; height: 24px; }
.tb-center-label { position: absolute; bottom: 0; font-size: 9px; font-weight: 700; color: var(--c-text-disabled); }

/* ===== CATEGORY PAGE ===== */
.page-category { width: 100%; max-width: 480px; display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.cat-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.cat-search-row { width: 100%; max-width: 480px; height: 44px; padding: 0 12px; display: flex; align-items: center; }
.cat-search-shell { flex: 1; height: 36px; background: var(--c-search-bg); border-radius: 8px; display: flex; align-items: center; padding: 0 12px; }
.cat-search-input { flex: 1; border: none; background: transparent; font-size: 16px; outline: none; color: var(--c-text-solid); }
.cat-search-input::placeholder { color: var(--c-text-muted); font-size: 16px; }
.cat-search-btn { height: 36px; width: 48px; margin-left: 8px; background: var(--c-accent); color: #fff; font-size: 13px; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cat-game-tabs { width: 100%; max-width: 480px; height: 69px; padding: 0 12px 12px; display: flex; flex-direction: column; }
.cat-game-tabs-track { display: flex; gap: 8px; padding-top: 12px; }
.cat-game-pill { height: 32px; padding: 0 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.15s; background: var(--bg-card); color: var(--c-text-muted); }
.cat-game-pill.on { background: var(--c-accent-muted); color: var(--c-text-solid); }
.cat-body { flex: 1; display: flex; overflow: hidden; }
.cat-sidebar { width: 102px; overflow-y: auto; background: rgba(0,0,0,0.01); border-right: 1px solid var(--c-divider); }
.cat-sidebar-item { height: 48px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; color: var(--c-text-muted); cursor: pointer; position: relative; }
.cat-sidebar-item.on { color: var(--c-text-solid); font-weight: 600; background: var(--bg-card); }
.cat-sidebar-item.on::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; background: var(--c-accent); border-radius: 0 2px 2px 0; }
.cat-product-area { flex: 1; overflow-y: auto; padding-bottom: 76px; }
.cat-product-list { padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; }
.cat-product-card { display: flex; align-items: center; background: var(--bg-card); border-radius: 8px; overflow: hidden; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.03); }
.cat-product-card:active { opacity: 0.8; }
.cat-product-img { width: 80px; height: 80px; flex-shrink: 0; position: relative; overflow: hidden; }
.cat-product-img-bg { position: absolute; inset: 0; }
.cat-product-img-tag { position: absolute; top: 4px; left: 4px; font-size: 8px; font-weight: 700; color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.08); padding: 1px 4px; border-radius: 2px; z-index: 1; }
.cat-product-info { flex: 1; padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.cat-product-name { font-size: 13px; font-weight: 600; color: var(--c-text-solid); line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-product-price { margin-top: 4px; display: flex; align-items: baseline; }
.cat-psym { font-size: 11px; font-weight: 600; color: var(--c-text-price); line-height: 16px; }
.cat-pval { font-size: 15px; font-weight: 600; color: var(--c-text-price); line-height: 18px; }

/* ===== MESSAGE PAGE ===== */
.page-message { width: 100%; max-width: 480px; display: flex; flex-direction: column; height: 100vh; height: 100dvh; padding-bottom: 76px; }
.msg-top-section { padding: 0 12px; }
.msg-entry { display: flex; align-items: center; padding: 12px 0; cursor: pointer; }
.msg-entry:active { opacity: 0.7; }
.msg-entry-icon { width: 48px; height: 48px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.msg-entry-icon svg { width: 28px; height: 28px; }
.msg-entry-body { flex: 1; margin-left: 12px; min-width: 0; }
.msg-entry-name { font-size: 15px; font-weight: 600; color: var(--c-text-solid); line-height: 20px; }
.msg-entry-preview { font-size: 13px; color: var(--c-text-muted); line-height: 18px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-entry-meta { text-align: right; flex-shrink: 0; margin-left: 8px; }
.msg-entry-time { font-size: 11px; color: var(--c-text-disabled); line-height: 16px; }
.msg-entry-badge { display: inline-block; min-width: 16px; height: 16px; background: #FC4032; color: #fff; font-size: 10px; font-weight: 700; border-radius: 8px; padding: 0 5px; line-height: 16px; text-align: center; margin-top: 4px; }
.msg-separator { width: 100%; height: 1px; background: var(--c-divider); }
.msg-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 120px; }
.msg-empty-icon { width: 80px; height: 80px; border-radius: 50%; background: rgba(0,0,0,0.03); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.msg-empty-icon svg { width: 36px; height: 36px; opacity: 0.2; }
.msg-empty-text { font-size: 14px; color: var(--c-text-disabled); }

/* ===== USER PAGE ===== */
.page-user { width: 100%; max-width: 480px; display: flex; flex-direction: column; height: 100vh; height: 100dvh; padding-bottom: 76px; position: relative; }
.user-gradient-bg { width: 100%; max-width: 480px; height: 240px; position: absolute; top: 0; left: 0; background: linear-gradient(161deg, var(--c-gradient-bg-start) 0%, var(--c-gradient-bg-end) 66%); pointer-events: none; z-index: 0; }
.user-header { position: relative; z-index: 1; padding: 20px 15px 15px; }
.user-card { background: var(--bg-card); border-radius: 12px; padding: 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.03); }
.user-avatar { width: 56px; height: 56px; border-radius: 50%; background: rgba(0,0,0,0.04); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.user-avatar svg { width: 32px; height: 32px; opacity: 0.2; }
.user-nickname { flex: 1; }
.user-nickname-text { font-size: 16px; font-weight: 600; color: var(--c-text-solid); }
.user-nickname-sub { font-size: 12px; color: var(--c-text-muted); margin-top: 2px; }
.user-arrow { color: var(--c-text-disabled); font-size: 18px; flex-shrink: 0; }
.warning-bar { margin: 0 12px; height: 32px; background: rgba(252,64,50,0.04); border-radius: 8px; display: flex; align-items: center; padding: 0 10px; gap: 6px; position: relative; z-index: 1; }
.warning-tag { width: 38px; height: 16px; background: #FC4032; border-radius: 3px; color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.warning-text { font-size: 11px; color: #FC4032; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.section-card { background: var(--bg-card); border-radius: 12px; margin: 10px 12px; padding: 12px 12px 16px; position: relative; z-index: 1; box-shadow: 0 1px 3px rgba(0,0,0,0.03); }
.section-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.section-title { font-size: 15px; font-weight: 700; color: var(--c-text-solid); }
.section-more { font-size: 12px; color: var(--c-text-muted); cursor: pointer; }
.order-types { display: flex; justify-content: space-between; }
.order-type { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.order-type:active { opacity: 0.7; }
.order-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
.order-icon svg { width: 24px; height: 24px; }
.order-type-name { font-size: 11px; color: var(--c-text-body); font-weight: 500; }
.function-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 0; }
.function-item { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; height: 50px; }
.function-item:active { opacity: 0.7; }
.fn-icon-wrap { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
.fn-icon-wrap svg { width: 24px; height: 24px; }
.fn-name { font-size: 11px; color: var(--c-text-body); font-weight: 500; white-space: nowrap; }
.user-help { display: flex; justify-content: center; padding-top: 20px; padding-bottom: 76px; position: relative; z-index: 1; }
.user-help-banner { width: 160px; height: 80px; display: flex; align-items: center; justify-content: center; }
.user-help-banner div { width: 100%; height: 100%; background: rgba(0,0,0,0.02); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; color: var(--c-text-disabled); font-size: 13px; }

/* ===== PLAY PAGE ===== */
.page-play-new { width: 100%; max-width: 480px; height: 100vh; height: 100dvh; position: relative; background: var(--bg-page); flex-direction: column; }
.pl-fixed-top { flex-shrink: 0; padding-top: 8px; }
.pl-search-row { height: 44px; padding: 0 12px; display: flex; align-items: center; }
.pl-search-shell { flex: 1; height: 36px; background: var(--c-search-bg); border-radius: 8px; display: flex; align-items: center; padding: 0 12px; }
.pl-search-shell span { font-size: 13px; color: var(--c-text-muted); }
.pl-search-btn { height: 36px; width: 48px; margin-left: 8px; background: var(--c-accent); color: #fff; font-size: 13px; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pl-game-pills { padding: 0 12px 12px; display: flex; gap: 8px; }
.pl-game-pill { width: 82px; height: 65px; background: var(--bg-card); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; position: relative; box-shadow: 0 1px 3px rgba(0,0,0,0.03); }
.pl-game-pill-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.pl-game-pill.on .pl-game-pill-icon { background: var(--c-accent-muted); }
.pl-game-pill:not(.on) .pl-game-pill-icon { background: rgba(0,0,0,0.03); }
.pl-game-pill-name { font-size: 11px; font-weight: 600; }
.pl-game-pill.on .pl-game-pill-name { color: var(--c-text-solid); }
.pl-game-pill:not(.on) .pl-game-pill-name { color: var(--c-text-muted); }
.pl-game-pill .pl-game-pill-bar { position: absolute; bottom: 0; left: 16px; right: 16px; height: 2px; background: var(--c-accent); border-radius: 1px; display: none; }
.pl-game-pill.on .pl-game-pill-bar { display: block; }
/* 抢单大厅区服筛选选中态 */
#player-hall .pl-game-pill { display: inline-flex; align-items: center; justify-content: center; }
#player-hall .pl-game-pill.on { background: var(--c-accent); color: #fff; border: 1px solid var(--c-accent-dark); }
#player-hall .pl-game-pill.on::after { content: ' ✓'; }
/* 下单表单账号区服分段选择 */
.zone-option { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 84px; padding: 9px 16px; border-radius: 18px; border: 1.5px solid var(--c-divider); background: var(--bg-card); color: var(--c-text-body); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.zone-option.on { background: var(--c-accent); border-color: var(--c-accent-dark); color: #fff; }
.zone-option.on::after { content: ' ✓'; }
.pl-type-tabs { display: flex; padding: 0 12px 8px; gap: 4px; }
.pl-type-tab { flex: 1; height: 80px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; cursor: pointer; }
.pl-type-tab.on { background: var(--c-accent-muted); color: var(--c-text-solid); }
.pl-type-tab:not(.on) { background: var(--bg-card); color: var(--c-text-muted); box-shadow: 0 1px 3px rgba(0,0,0,0.03); }
.pl-list { flex: 1; overflow-y: auto; padding: 0 12px; padding-bottom: 80px; display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.pl-card { padding: 0 0 1px; }
.pl-card-inner { display: flex; padding: 12px; background: var(--bg-card); border-radius: 12px; gap: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.03); }
.pl-avatar-shell { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; position: relative; }
.pl-avatar { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pl-status-dot { position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: #1DB974; border: 2px solid #fff; }
.pl-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pl-name-row { display: flex; align-items: center; gap: 4px; }
.pl-name { font-size: 15px; font-weight: 600; color: var(--c-text-solid); line-height: 20px; }
.pl-status-text { font-size: 11px; color: #1DB974; margin-left: 4px; }
.pl-summary { font-size: 12px; color: var(--c-text-body); line-height: 17px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-tags { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.pl-tag { height: 18px; padding: 0 8px; background: rgba(0,0,0,0.03); color: var(--c-text-body); font-size: 10px; font-weight: 600; border-radius: 4px; display: flex; align-items: center; white-space: nowrap; }
.pl-actions { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; align-items: center; justify-content: center; }
.pl-order-btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,0.03); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pl-voice-btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,0.03); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pl-fab { position: fixed; bottom: 100px; right: 12px; width: 44px; height: 44px; background: var(--c-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(255,170,68,0.2); z-index: 999; cursor: pointer; }
.pl-fab:active { transform: scale(0.95); transition: transform 0.1s; }
.pl-fab svg { width: 20px; height: 20px; }

/* ===== LOGIN PAGE ===== */
.page-login-new { width: 100%; max-width: 480px; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--bg-page); position: relative; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.login-banner { width: 100%; max-width: 480px; height: 340px; display: flex; align-items: center; justify-content: center; padding-bottom: 16px; flex-shrink: 0; }
.login-banner-img { width: 240px; height: 240px; border-radius: 50%; background: rgba(0,0,0,0.02); display: flex; align-items: center; justify-content: center; }
.login-banner-img svg { width: 100px; height: 100px; opacity: 0.15; }
.login-body-new { width: 100%; max-width: 327px; margin: 0 auto; padding: 14px 24px 0; display: flex; flex-direction: column; align-items: center; }
.login-wechat-btn { width: 100%; max-width: 327px; height: 56px; border-radius: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; font-weight: 700; margin-top: 44px; border: none; outline: none; background: #07C160; color: #fff; }
.login-wechat-btn .login-btn-icon { margin-right: 8px; width: 22px; height: 22px; }
.login-wechat-btn .login-btn-icon svg { width: 22px; height: 22px; }
.login-agreement-row { display: flex; align-items: center; margin-top: 14px; font-size: 12px; color: var(--c-text-muted); gap: 2px; flex-wrap: wrap; justify-content: center; }
.login-agreement-row .link { color: var(--c-accent); cursor: pointer; }
.login-footer-new { margin-top: auto; width: 100%; max-width: 480px; padding: 0 0 calc(28px + env(safe-area-inset-bottom)); display: flex; justify-content: center; }
.login-footer-new .help-banner { width: 147px; height: 74px; display: flex; align-items: center; justify-content: center; }
.login-footer-new .help-banner div { width: 100%; height: 100%; background: rgba(0,0,0,0.02); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--c-text-disabled); font-size: 13px; flex-direction: column; gap: 4px; }
.login-footer-new .help-banner svg { width: 26px; height: 26px; opacity: 0.2; }

/* ===== AGREEMENT PAGE ===== */
.page-agreement-new { width: 100%; max-width: 480px; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--bg-page); }
.agreement-nav { width: 100%; max-width: 480px; height: 44px; display: flex; align-items: center; padding: 0 12px; background: #fff; border-bottom: 1px solid var(--c-divider); position: sticky; top: 0; z-index: 10; }
.agreement-nav-back { width: 44px; height: 44px; display: flex; align-items: center; justify-content: flex-start; cursor: pointer; color: var(--c-text-body); }
.agreement-nav-back svg { width: 20px; height: 20px; }
.agreement-nav-title { flex: 1; text-align: center; font-size: 16px; font-weight: 600; color: var(--c-text-solid); margin-right: 44px; }
.agreement-scroll { padding: 16px 16px 76px; overflow-y: auto; flex: 1; }
.agreement-scroll-content { font-size: 14px; line-height: 25.2px; color: var(--c-text-body); white-space: pre-line; }

/* ===== CONTACT PAGE ===== */
.contact-page-new { width: 100%; max-width: 480px; height: 100vh; height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg-page); padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.contact-card { background: var(--bg-card); border-radius: 12px; padding: 32px 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 327px; box-shadow: 0 1px 3px rgba(0,0,0,0.03); }
.contact-avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--c-accent); display: flex; align-items: center; justify-content: center; }
.contact-avatar svg { width: 36px; height: 36px; }
.contact-title { font-size: 18px; font-weight: 700; color: var(--c-text-solid); }
.contact-subtitle { font-size: 13px; color: var(--c-text-muted); text-align: center; line-height: 18px; }
.contact-wechat-id { background: rgba(0,0,0,0.03); border-radius: 8px; padding: 10px 20px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.contact-wechat-id:active { opacity: 0.7; }
.contact-wechat-id-text { font-size: 15px; font-weight: 600; color: var(--c-text-solid); }
.contact-copy-btn { font-size: 12px; color: var(--c-accent); font-weight: 600; }
.contact-tip { font-size: 11px; color: var(--c-text-disabled); margin-top: 4px; }
.chat-page { display: flex; flex-direction: column; height: 100%; }
.chat-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.chat-row { display: flex; align-items: flex-end; gap: 8px; }
.chat-row.mine { justify-content: flex-end; }
.chat-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--c-accent-muted); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--c-text-solid); overflow: hidden; flex-shrink: 0; }
.chat-bubble { max-width: 75%; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 20px; word-break: break-word; white-space: pre-wrap; }
.chat-row.mine .chat-bubble { background: var(--c-accent); color: #fff; border-bottom-right-radius: 4px; }
.chat-row.other .chat-bubble { background: var(--bg-card); border: 1px solid var(--c-divider); color: var(--c-text-solid); border-bottom-left-radius: 4px; }
.chat-meta { font-size: 10px; color: var(--c-text-disabled); margin-top: 3px; }
.chat-input-bar { display: flex; flex-direction: row !important; align-items: center; flex-wrap: nowrap; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--bg-card); border-top: 1px solid var(--c-divider); }
.chat-input-bar input { flex: 1 1 auto !important; width: auto !important; min-width: 0; height: 40px; border-radius: 20px; border: 1.5px solid var(--c-divider); background: var(--bg-page); padding: 0 16px; font-size: 16px; outline: none; color: var(--c-text-solid); box-sizing: border-box; }
.chat-send-btn { flex: 0 0 auto !important; min-width: 64px; width: auto; height: 40px; border-radius: 20px; border: none; background: var(--c-accent); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }


.wb-status-switch { display:flex; align-items:center; gap:8px; }
.wb-switch-label { font-size:12px; font-weight:600; color:var(--c-text-muted); white-space:nowrap; }
.wb-switch-track { position:relative; width:48px; height:26px; border-radius:13px; background:#C9C4BE; cursor:pointer; transition:background .2s; flex-shrink:0; }
.wb-switch-track .wb-switch-thumb { position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:left .2s; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.wb-switch-track.on { background:#2F9E5B; }
.wb-switch-track.on .wb-switch-thumb { left:25px; }

/* ===== Client Wallet pages (phase2 additive) ===== */
.cw-balance-card { background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-dark) 100%); border-radius: 16px; padding: 24px 20px; color: #fff; margin-bottom: 12px; box-shadow: 0 6px 16px rgba(217,120,0,0.22); }
.cw-balance-label { font-size: 13px; opacity: 0.9; }
.cw-balance-num { font-size: 34px; font-weight: 800; margin-top: 6px; line-height: 1.2; }
.cw-link-row { display: flex; align-items: center; justify-content: space-between; background: var(--bg-card); border-radius: 12px; padding: 14px 16px; margin: 12px 0; font-size: 14px; font-weight: 600; color: var(--c-text-solid); cursor: pointer; }
.cw-sec-title { font-size: 14px; font-weight: 700; color: var(--c-text-solid); margin: 16px 0 10px; }
.cw-preset-row { display: flex; gap: 10px; flex-wrap: wrap; }
.cw-preset { flex: 1 1 calc(33.333% - 8px); min-width: 90px; height: 44px; border-radius: 12px; border: 1.5px solid var(--c-divider); background: var(--bg-card); color: var(--c-text-body); font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s; }
.cw-preset.on { border-color: var(--c-accent); color: var(--c-accent-dark); background: rgba(255,170,68,0.10); box-shadow: inset 0 0 0 1px var(--c-accent); }
.cw-qr-box { background: var(--bg-card); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; align-items: center; }
.cw-qr-img { width: 180px; height: 180px; object-fit: contain; border-radius: 8px; }
.cw-qr-payee { font-size: 13px; color: var(--c-text-body); margin-top: 10px; }
.cw-qr-notice { font-size: 12px; color: var(--c-text-muted); margin-top: 6px; text-align: center; line-height: 18px; }
.cw-qr-empty { background: var(--bg-card); border-radius: 12px; padding: 24px 16px; text-align: center; font-size: 13px; color: var(--c-text-muted); }
.cw-evidence-item { display: flex; align-items: center; gap: 10px; background: var(--bg-card); border-radius: 12px; padding: 10px; }
.cw-evidence-item img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.cw-evidence-ok { font-size: 13px; color: #3AA876; display: flex; align-items: center; gap: 4px; }
.cw-tx-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--c-divider); }
.cw-tx-row:last-child { border-bottom: none; }
.cw-tx-type { font-size: 14px; font-weight: 600; color: var(--c-text-solid); }
.cw-tx-time { font-size: 11px; color: var(--c-text-muted); margin-top: 3px; }
.cw-tx-amount { font-size: 15px; font-weight: 700; }
.cw-tx-balance { font-size: 11px; color: var(--c-text-muted); margin-top: 3px; }


/* ===== Pay method tabs (phase3 additive) ===== */
.pay-method-tabs { display: flex; margin: 14px 16px 0; background: var(--bg-card); border-radius: 12px; padding: 4px; }
.pay-method-tab { flex: 1; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: var(--c-text-muted); cursor: pointer; transition: all 0.15s; }
.pay-method-tab.on { background: var(--c-accent); color: #fff; }


/* ===== Copy buttons (copyinfo additive) ===== */
.copy-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(0,0,0,0.04); color: var(--c-text-muted); cursor: pointer; flex-shrink: 0; vertical-align: middle; transition: all 0.15s; }
.copy-btn:active { background: rgba(0,0,0,0.10); color: var(--c-accent-dark); transform: scale(0.92); }
.user-info-copy { display: inline-flex; align-items: center; gap: 2px; }