.pxp-page { min-height: calc(100dvh - 74px); background: #fff; color: #24272c; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
.pxp-page button, .pxp-page input { font: inherit; }
.pxp-page button { -webkit-tap-highlight-color: transparent; border: 0; cursor: pointer; background: transparent; color: inherit; }
.pxp-page button:focus-visible, .pxp-page input:focus-visible { outline: 2px solid #ff8400; outline-offset: 2px; }
.pxp-topbar { height: 56px; display: flex; align-items: center; gap: 2px; padding: 3px 12px 3px 0; background: #fff; box-sizing: border-box; }
.pxp-icon-button { width: 44px; height: 44px; padding: 11px; flex: 0 0 44px; display: grid; place-items: center; }
.pxp-icon-button svg { width: 22px; height: 22px; }
.pxp-search-pill, .pxp-search-box { height: 36px; flex: 1; display: flex; align-items: center; gap: 7px; padding: 0 13px; background: #f4f5f6 !important; border-radius: 20px; box-sizing: border-box; }
.pxp-search-pill { color: #969aa1 !important; font-size: 13px !important; text-align: left; }
.pxp-search-pill svg, .pxp-search-box > svg { width: 17px; height: 17px; color: #a3a7ae; flex: 0 0 17px; }
.pxp-catalog-tabs { height: 49px; display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-bottom: 1px solid #f2f3f4; }
.pxp-catalog-tabs button { position: relative; min-height: 44px; font-size: 15px; color: #62656b; }
.pxp-catalog-tabs button.is-active { font-weight: 650; color: #ff8400; }
.pxp-catalog-tabs button.is-active::after { content: ""; position: absolute; height: 3px; width: 23px; bottom: 6px; left: calc(50% - 11.5px); border-radius: 3px; background: #ff8400; }
.pxp-catalog-body { display: grid; grid-template-columns: 85px minmax(0, 1fr); min-height: calc(100dvh - 179px); }
.pxp-letter-rail { background: #f4f5f6; display: flex; flex-direction: column; align-items: stretch; padding: 5px 0 22px; }
.pxp-letter-rail button { min-height: 53px; position: relative; font-size: 13px; color: #7a7e85; padding: 0 5px; }
.pxp-letter-rail button.is-active { background: #fff; font-weight: 600; color: #ff8400; }
.pxp-letter-rail button.is-active::before { content: ""; width: 3px; height: 18px; position: absolute; left: 0; top: calc(50% - 9px); border-radius: 0 3px 3px 0; background: #ff8400; }
.pxp-catalog-content { padding: 20px 10px 30px; }
.pxp-catalog-content h1 { font-size: 14px; font-weight: 650; line-height: 20px; margin: 0 0 19px 5px; }
.pxp-game-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 3px; }
.pxp-game { min-height: 88px; min-width: 0; display: flex; align-items: center; flex-direction: column; gap: 8px; padding: 0 2px !important; }
.pxp-game img { display: block; width: 54px; height: 54px; object-fit: cover; border-radius: 12px; background: #f1f2f4; }
.pxp-game span { display: block; width: 100%; font-size: 11px; line-height: 16px; text-align: center; white-space: normal; overflow-wrap: anywhere; }
.pxp-search-page .pxp-topbar { border-bottom: 1px solid #f5f5f5; }
.pxp-search-box { padding-right: 2px; }
.pxp-search-input { min-width: 0; width: 100%; border: 0; background: transparent; outline: none; height: 34px; color: #25282e; font-size: 13px !important; padding: 0; }
.pxp-search-input::placeholder { color: #969aa1; }
.pxp-search-input::-webkit-search-cancel-button { display: none; }
.pxp-clear-search { width: 44px; height: 44px; padding: 13px; display: grid; place-items: center; flex: 0 0 44px; color: #a5a8af !important; }
.pxp-clear-search svg { width: 16px; height: 16px; }
.pxp-clear-search.is-hidden { visibility: hidden; }
.pxp-search-hot { padding: 23px 16px 22px; border-bottom: 8px solid #f4f5f6; }
.pxp-search-hot h1, .pxp-search-results h2 { font-size: 15px; font-weight: 650; line-height: 21px; margin: 0 0 17px; }
.pxp-search-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pxp-search-chips button { min-height: 44px; padding: 7px 13px; border-radius: 5px; background: #f5f6f7; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.pxp-search-chips button.pxp-chip-hot { background: #fff5e9; color: #e57400; }
.pxp-search-chips button span { font-size: 11px; }
.pxp-search-results { padding: 24px 16px 32px; }
.pxp-search-results h2 { display: flex; align-items: center; justify-content: space-between; }
.pxp-search-results h2 > span { font-size: 11px; font-weight: 400; color: #999da4; }
.pxp-search-results .pxp-game-grid { gap: 23px 14px; }
.pxp-search-results .pxp-game { gap: 9px; }
.pxp-search-results .pxp-game span { font-size: 12px; }
.pxp-no-results { min-height: 245px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pxp-no-results-icon { width: 64px; height: 64px; display: grid; place-items: center; background: #f5f6f7; color: #c4c8ce; border-radius: 50%; }
.pxp-no-results-icon svg { width: 28px; height: 28px; }
.pxp-no-results p { font-size: 14px; margin: 17px 0 7px; color: #767b84; }
.pxp-no-results > span:last-child { font-size: 12px; color: #a9adb4; }
.pxp-listing { background: #fff; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
.pxp-titlebar { padding-right: 0; }
.pxp-titlebar h1 { flex: 1; min-width: 0; text-align: center; font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.pxp-list-download { display: block; width: 100%; padding: 0; line-height: 0; }
.pxp-list-download > img { display: block; width: 100%; height: auto; }
.pxp-list-searchbar { display: flex; align-items: center; gap: calc(12 * var(--unit,1px)); height: calc(44 * var(--unit,1px)); padding: 0 calc(12 * var(--unit,1px)); background: #fff; }
.pxp-list-game { flex: 0 0 calc(32 * var(--unit,1px)); width: calc(32 * var(--unit,1px)); height: calc(32 * var(--unit,1px)); padding: 0; position: relative; }
.pxp-list-game > img:first-child { width: 100%; height: 100%; border-radius: calc(7 * var(--unit,1px)); object-fit: cover; }
.pxp-list-game-badge { position: absolute; width: calc(16 * var(--unit,1px)); height: calc(16 * var(--unit,1px)); right: calc(-3 * var(--unit,1px)); bottom: 0; }
.pxp-list-search { display: flex; flex: 1; min-width: 0; align-items: center; gap: calc(8 * var(--unit,1px)); height: calc(34 * var(--unit,1px)); padding: 0 calc(12 * var(--unit,1px)); border-radius: calc(20 * var(--unit,1px)); background: #f5f5f5 !important; text-align: left; }
.pxp-list-search > img, .pxp-list-search > svg { flex: 0 0 calc(14 * var(--unit,1px)); width: calc(14 * var(--unit,1px)); height: calc(14 * var(--unit,1px)); color: #929292; }
.pxp-list-search > span { font-size: calc(13 * var(--unit,1px)); color: #b2b2b2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pxp-list-search > .pxp-list-fire { flex: 0 0 calc(10 * var(--unit,1px)); width: calc(10 * var(--unit,1px)); height: calc(13 * var(--unit,1px)); margin-left: calc(-4 * var(--unit,1px)); }
.pxp-list-ai { flex: 0 0 calc(30 * var(--unit,1px)); padding: 0; line-height: 0; }
.pxp-list-ai > img { width: 100%; height: auto; }
.pxp-list-favorites { flex: 0 0 calc(30 * var(--unit,1px)); display: flex; align-items: center; flex-direction: column; gap: calc(1 * var(--unit,1px)); padding: 0; }
.pxp-list-favorites > img, .pxp-list-favorites > svg { height: calc(21 * var(--unit,1px)); width: calc(21 * var(--unit,1px)); }
.pxp-list-favorites > span { font-size: calc(10 * var(--unit,1px)); line-height: calc(13 * var(--unit,1px)); white-space: nowrap; }
.pxp-list-banners { position: relative; padding: calc(4 * var(--unit,1px)) calc(10 * var(--unit,1px)) 0; }
.pxp-list-banner-track { display: flex; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: calc(10 * var(--unit,1px)); }
.pxp-list-banner-track::-webkit-scrollbar { display: none; }
.pxp-list-banner-track > button { flex: 0 0 100%; display: block; width: 100%; padding: 0; line-height: 0; border-radius: calc(10 * var(--unit,1px)); overflow: hidden; scroll-snap-align: start; }
.pxp-list-banner-track > button > img { width: 100%; height: calc(92 * var(--unit,1px)); display: block; object-fit: cover; }
.pxp-list-banner-dots { position: absolute; bottom: calc(5 * var(--unit,1px)); left: 0; right: 0; display: flex; justify-content: center; gap: calc(4 * var(--unit,1px)); pointer-events: none; }
.pxp-list-banner-dots > i { height: calc(3 * var(--unit,1px)); width: calc(3 * var(--unit,1px)); border-radius: 50%; background: #fff5; }
.pxp-list-banner-dots > i.is-active { background: #fff; }
.pxp-kind-tabs { display: flex; justify-content: flex-start; height: calc(40 * var(--unit,1px)); background: #fff; gap: calc(22 * var(--unit,1px)); padding: 0 calc(10 * var(--unit,1px)); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.pxp-kind-tabs::-webkit-scrollbar { display: none; }
.pxp-kind-tabs button { position: relative; flex: none; min-height: calc(40 * var(--unit,1px)); font-size: calc(14 * var(--unit,1px)); color: #a6a6a6; padding: 0; white-space: nowrap; }
.pxp-kind-tabs button.is-active { font-weight: 700; color: #2f2f2f; }
.pxp-kind-tabs button.is-active::after { content: ""; position: absolute; bottom: calc(5 * var(--unit,1px)); width: calc(15 * var(--unit,1px)); height: calc(3 * var(--unit,1px)); left: calc(50% - 7.5 * var(--unit,1px)); background: #ff8400; border-radius: 3px; }
.pxp-list-new { position: absolute; height: calc(17 * var(--unit,1px)); width: calc(27 * var(--unit,1px)); right: calc(-16 * var(--unit,1px)); top: calc(3 * var(--unit,1px)); }
.pxp-list-quicktags { display: flex; align-items: center; gap: calc(8 * var(--unit,1px)); height: calc(36 * var(--unit,1px)); padding: 0 calc(10 * var(--unit,1px)); overflow-x: auto; scrollbar-width: none; }
.pxp-list-quicktags::-webkit-scrollbar { display: none; }
.pxp-list-quicktags > button { flex: none; min-width: 0; border-radius: calc(22 * var(--unit,1px)); height: calc(27 * var(--unit,1px)); padding: 0 calc(9 * var(--unit,1px)); background: #f5f5f5; color: #666; font-size: calc(12 * var(--unit,1px)); white-space: nowrap; }
.pxp-list-quicktags > .pxp-list-bargain { padding: 0 calc(8 * var(--unit,1px)); }
.pxp-list-bargain > img { width: calc(53 * var(--unit,1px)); height: calc(14 * var(--unit,1px)); display: block; object-fit: contain; }
.pxp-list-filters { position: sticky; top: 0; z-index: 12; display: grid; grid-template-columns: 1.05fr 1fr 1.1fr .8fr calc(30 * var(--unit,1px)); background: #fff; padding: 0 calc(8 * var(--unit,1px)); }
.pxp-list-filters button { min-height: calc(44 * var(--unit,1px)); display: flex; align-items: center; justify-content: center; gap: calc(2 * var(--unit,1px)); padding: 0; color: #353535; font-size: calc(14 * var(--unit,1px)); }
.pxp-list-filters button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pxp-list-filters button svg { width: calc(10 * var(--unit,1px)); height: calc(10 * var(--unit,1px)); flex: 0 0 calc(10 * var(--unit,1px)); }
.pxp-list-filters button.is-active { color: #ff8400; }
.pxp-list-filters .pxp-list-layout > img, .pxp-list-filters .pxp-list-layout > svg { width: calc(18 * var(--unit,1px)); height: calc(18 * var(--unit,1px)); flex: 0 0 calc(18 * var(--unit,1px)); }
.pxp-list-empty { padding: 82px 16px 50px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pxp-empty-drawing { width: 144px; height: 112px; }
.pxp-list-empty h2 { color: #737982; font-size: 15px; font-weight: 500; margin: 15px 0 9px; }
.pxp-list-empty p { color: #a0a5ad; font-size: 11px; line-height: 18px; margin: 0; }
.pxp-orange-outline { min-height: 44px; padding: 0 24px !important; border: 1px solid #ff9a30 !important; border-radius: 24px; color: #ff8400 !important; font-size: 13px !important; margin-top: 25px; background: #fff !important; }
@media (max-width: 350px) { .pxp-catalog-body { grid-template-columns: 74px minmax(0, 1fr); } .pxp-game img { width: 48px; height: 48px; } .pxp-catalog-content { padding-left: 6px; padding-right: 6px; } .pxp-search-results .pxp-game-grid { gap: 22px 5px; } }