.page { padding: calc(var(--rpx) * 24) calc(var(--rpx) * 24) 0; max-width: calc(var(--rpx) * 900); margin: auto; box-sizing: border-box; }
.heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(var(--rpx) * 20); }
.eyebrow { font-size: calc(var(--rpx) * 16); letter-spacing: calc(var(--rpx) * 2); color: #819087; }
.title { font-size: calc(var(--rpx) * 32); line-height: 1.4; font-weight: 600; margin-top: calc(var(--rpx) * 5); }
.scope-label { color: #59806a; font-size: calc(var(--rpx) * 20); background: #e9f0e9; border-radius: calc(var(--rpx) * 8); padding: calc(var(--rpx) * 10) calc(var(--rpx) * 14); }
.quote-stats { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 15) calc(var(--rpx) * 18); margin-bottom: calc(var(--rpx) * 18); border: calc(var(--rpx) * 1) solid #dde6dc; border-radius: calc(var(--rpx) * 10); background: #edf3e9; }
.views-stat { flex-shrink: 0; }
.updated-stat { text-align: right; min-width: 0; }
.stat-label { color: #81917e; font-size: calc(var(--rpx) * 18); line-height: 1.5; }
.stat-footnote { font-size: calc(var(--rpx) * 16); color: #9aa693; margin-left: calc(var(--rpx) * 5); }
.stat-value { color: #335d48; font-size: calc(var(--rpx) * 25); line-height: 1.5; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-time { color: #526b55; font-size: calc(var(--rpx) * 21); line-height: 1.6; white-space: nowrap; font-variant-numeric: tabular-nums; }
.banner-carousel { display: block; height: calc(var(--rpx) * 156); margin-bottom: calc(var(--rpx) * 18); border-radius: calc(var(--rpx) * 16); overflow: hidden; position: relative; }
.banner-slide { width: 100%; height: calc(var(--rpx) * 156); border-radius: calc(var(--rpx) * 16); box-sizing: border-box; padding: calc(var(--rpx) * 20) calc(var(--rpx) * 24); position: relative; overflow: hidden; color: #fff; text-align: left; }
.banner-green { background: linear-gradient(110deg, #164535, #376a51); }
.banner-blue { background: linear-gradient(110deg, #243f61, #557a96); }
.banner-sage { background: linear-gradient(110deg, #405748, #788369); }
.banner-copy { position: relative; z-index: 1; }
.banner-title { font-size: calc(var(--rpx) * 27); font-weight: 600; line-height: 1.4; }
.banner-description { font-size: calc(var(--rpx) * 19); color: #e0eade; margin-top: calc(var(--rpx) * 7); line-height: 1.5; }
.banner-link { font-size: calc(var(--rpx) * 18); color: #e9f3cc; margin-top: calc(var(--rpx) * 11); }
.banner-decoration { position: absolute; right: calc(var(--rpx) * 8); top: 0; width: calc(var(--rpx) * 150); height: calc(var(--rpx) * 156); opacity: 0.7; }
.banner-phone { position: absolute; width: calc(var(--rpx) * 59); height: calc(var(--rpx) * 104); border: calc(var(--rpx) * 2) solid #dcebc9; background: #dcebc922; border-radius: calc(var(--rpx) * 10); top: calc(var(--rpx) * 30); right: calc(var(--rpx) * 38); transform: rotate(17deg); display: flex; align-items: center; justify-content: center; }
.banner-phone text { font-size: calc(var(--rpx) * 17); color: #eff7df; }
.banner-ring { position: absolute; width: calc(var(--rpx) * 180); height: calc(var(--rpx) * 180); top: calc(var(--rpx) * -14); right: calc(var(--rpx) * -42); border: calc(var(--rpx) * 1) solid #dcebc955; border-radius: 50%; }
.brand-tabs { display: flex; gap: calc(var(--rpx) * 16); margin: 0 0 calc(var(--rpx) * 18); }
.brand-tab { box-sizing: border-box; position: relative; flex: 1; min-width: 0; border: calc(var(--rpx) * 2) solid #e7ece8; border-radius: calc(var(--rpx) * 14); background: #fff; padding: calc(var(--rpx) * 16) calc(var(--rpx) * 20); display: flex; align-items: center; text-align: left; gap: calc(var(--rpx) * 14); }
.brand-tab.active { border-color: #1d7b5c; background: #edf5ee; }
.brand-word { font-size: calc(var(--rpx) * 29); letter-spacing: calc(var(--rpx) * 1); font-weight: 600; color: #9ba6a1; }
.brand-word.vivo { font-size: calc(var(--rpx) * 31); font-weight: 500; letter-spacing: calc(var(--rpx) * 2); line-height: calc(var(--rpx) * 32); }
.active .brand-word { color: #137b4d; } .active .brand-word.vivo { color: #305caf; }
.brand-caption { font-size: calc(var(--rpx) * 19); color: #86918b; }
.brand-check { position: absolute; right: 0; bottom: 0; background: #167453; color: white; width: calc(var(--rpx) * 26); height: calc(var(--rpx) * 22); border-radius: calc(var(--rpx) * 10) 0 calc(var(--rpx) * 12) 0; font-size: calc(var(--rpx) * 16); text-align: center; }
.search-box { display: flex; align-items: center; height: calc(var(--rpx) * 68); box-sizing: border-box; padding: 0 calc(var(--rpx) * 24); background: #fff; border: calc(var(--rpx) * 2) solid #e8ede9; border-radius: calc(var(--rpx) * 18); gap: calc(var(--rpx) * 18); }
.search-icon { height: calc(var(--rpx) * 23); width: calc(var(--rpx) * 23); border: calc(var(--rpx) * 3) solid #718179; border-radius: 50%; position: relative; box-sizing: border-box; flex-shrink: 0; }
.search-icon::after { content: ''; position: absolute; height: calc(var(--rpx) * 11); width: calc(var(--rpx) * 3); background: #718179; transform: rotate(-45deg); right: calc(var(--rpx) * -5); bottom: calc(var(--rpx) * -7); }
.search-input { flex: 1; min-width: 0; font-size: calc(var(--rpx) * 23); height: calc(var(--rpx) * 52); color: #263b32; } .search-input::placeholder { color: #a0aaa3; }
.search-hint { font-size: calc(var(--rpx) * 19); color: #97a29a; border-left: calc(var(--rpx) * 1) solid #e1e7e2; padding-left: calc(var(--rpx) * 20); white-space: nowrap; }
.clear-search { font-size: calc(var(--rpx) * 36); color: #829288; width: calc(var(--rpx) * 42); }
.series-scroll { width: 100%; margin: calc(var(--rpx) * 18) 0 calc(var(--rpx) * 20); white-space: nowrap; }
.series-row { display: flex; align-items: center; gap: calc(var(--rpx) * 12); }
.series-chip { display: inline-block; flex-shrink: 0; padding: calc(var(--rpx) * 12) calc(var(--rpx) * 20); background: #eef1ed; border-radius: calc(var(--rpx) * 12); color: #758179; font-size: calc(var(--rpx) * 21); line-height: 1.5; }
.series-chip.chosen { color: #fff; background: #244f3f; font-weight: 500; }
.section-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: calc(var(--rpx) * 10); }
.section-title { font-size: calc(var(--rpx) * 26); font-weight: 650; } .section-title text { font-size: calc(var(--rpx) * 22); color: #9aa49d; margin-left: calc(var(--rpx) * 12); font-weight: 400; }
.rules-link { font-size: calc(var(--rpx) * 21); color: #687b6d; padding: calc(var(--rpx) * 9) 0 calc(var(--rpx) * 9) calc(var(--rpx) * 18); } .rules-link text { margin-left: calc(var(--rpx) * 5); }
.filter-row { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--rpx) * 8); }
.table-caption { font-size: calc(var(--rpx) * 18); color: #8c9a90; flex: 1; min-width: 0; line-height: 1.5; }
.sort-control { font-size: calc(var(--rpx) * 20); color: #6c8071; padding: calc(var(--rpx) * 10) 0 calc(var(--rpx) * 10) calc(var(--rpx) * 10); white-space: nowrap; } .sort-control text { margin-left: calc(var(--rpx) * 8); }
.date-line { display: flex; gap: calc(var(--rpx) * 10); align-items: center; color: #8e9b91; font-size: calc(var(--rpx) * 19); padding: calc(var(--rpx) * 12) 0 calc(var(--rpx) * 16); }
.date-dot { width: calc(var(--rpx) * 7); height: calc(var(--rpx) * 7); background: #5f9370; border-radius: 50%; } .date-separator { color: #b0bab2; } .stale { color: #a16d2d; } .stale .date-dot { background: #b78b43; }
.refresh-button { margin-left: auto; color: #687e70; font-size: calc(var(--rpx) * 30); line-height: calc(var(--rpx) * 30); padding: 0 calc(var(--rpx) * 8); }
.notice { font-size: calc(var(--rpx) * 21); line-height: 1.7; padding: calc(var(--rpx) * 18); background: #fbf1df; color: #9c7237; border-radius: calc(var(--rpx) * 12); margin-bottom: calc(var(--rpx) * 16); }
.quote-table { width: 100%; background: #fff; border: calc(var(--rpx) * 1) solid #8a9e90; border-radius: calc(var(--rpx) * 4); overflow: hidden; box-sizing: border-box; }
.quote-table + .quote-table { margin-top: calc(var(--rpx) * 24); }
.table-head .group-heading { flex-direction: row; gap: calc(var(--rpx) * 12); flex-wrap: wrap; }
.group-count { color: #c9dbc8; font-size: calc(var(--rpx) * 17); font-weight: 400; }
.table-head { display: flex; align-items: stretch; background: #335d48; color: #fff; font-size: calc(var(--rpx) * 21); font-weight: 500; line-height: 1.5; }
.table-head .model-info, .table-head .quote-value { display: flex; align-items: center; justify-content: center; min-height: calc(var(--rpx) * 62); padding: calc(var(--rpx) * 12) calc(var(--rpx) * 8); border-color: #75917c; }
.quote-list { width: 100%; }
.quote-row { display: flex; align-items: stretch; width: 100%; min-height: calc(var(--rpx) * 68); margin: 0; padding: 0; box-sizing: border-box; text-align: left; background: #fff; border-bottom: calc(var(--rpx) * 1) solid #a9b7ac; border-radius: 0; }
.quote-row:nth-child(even) { background: #f4f7f2; }
.quote-row:last-child { border-bottom: 0; }
.quote-row:active { background: #e8f0e5; }
.row-number { display: flex; align-items: center; justify-content: center; flex: 0 0 calc(var(--rpx) * 52); width: calc(var(--rpx) * 52); padding: calc(var(--rpx) * 8) calc(var(--rpx) * 3); box-sizing: border-box; border-right: calc(var(--rpx) * 1) solid #a9b7ac; background: #edf2e9; color: #758673; font-size: calc(var(--rpx) * 18); font-variant-numeric: tabular-nums; }
.table-head .row-number { background: #335d48; color: #e2eddf; border-color: #75917c; font-size: calc(var(--rpx) * 20); }
.model-info { display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; padding: calc(var(--rpx) * 12) calc(var(--rpx) * 14); box-sizing: border-box; border-right: calc(var(--rpx) * 1) solid #a9b7ac; }
.model-name { font-size: calc(var(--rpx) * 23); line-height: 1.5; font-weight: 500; overflow-wrap: break-word; word-break: normal; }
.model-sub { font-size: calc(var(--rpx) * 17); color: #95a196; line-height: 1.4; margin-top: calc(var(--rpx) * 3); overflow-wrap: break-word; }
.quote-value { display: flex; align-items: center; justify-content: center; flex: 0 0 calc(var(--rpx) * 132); width: calc(var(--rpx) * 132); padding: calc(var(--rpx) * 12) calc(var(--rpx) * 6); text-align: center; box-sizing: border-box; border-right: calc(var(--rpx) * 1) solid #a9b7ac; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.quote-value:last-child { border-right: 0; }
.boot-price { font-size: calc(var(--rpx) * 24); line-height: 1.5; font-weight: 600; color: #7152a1; }
.scrap-price { font-size: calc(var(--rpx) * 24); line-height: 1.5; font-weight: 600; color: #59655c; }
.list-end { display: flex; gap: calc(var(--rpx) * 18); justify-content: center; align-items: center; font-size: calc(var(--rpx) * 19); color: #a5afa6; padding: calc(var(--rpx) * 24) 0 calc(var(--rpx) * 12); } .list-end text { height: calc(var(--rpx) * 1); width: calc(var(--rpx) * 45); background: #dfe6de; }
.footer { padding: calc(var(--rpx) * 16) 0 calc(calc(var(--rpx) * 40) + env(safe-area-inset-bottom)); text-align: center; } .footer-brand { font-size: calc(var(--rpx) * 21); color: #738674; font-weight: 500; margin-bottom: calc(var(--rpx) * 13); } .footer-note { color: #a7afa6; font-size: calc(var(--rpx) * 18); margin-top: calc(var(--rpx) * 7); }
.empty-state { padding: calc(var(--rpx) * 60) calc(var(--rpx) * 24); text-align: center; } .empty-icon { color: #7c9b82; font-size: calc(var(--rpx) * 55); margin-bottom: calc(var(--rpx) * 15); } .empty-title { font-size: calc(var(--rpx) * 28); font-weight: 600; } .empty-desc { color: #93a095; font-size: calc(var(--rpx) * 23); line-height: 1.8; margin-top: calc(var(--rpx) * 14); } .retry-button { display: inline-block; margin-top: calc(var(--rpx) * 28); border: calc(var(--rpx) * 1) solid #acc5ad; border-radius: calc(var(--rpx) * 12); color: #26714a; padding: calc(var(--rpx) * 16) calc(var(--rpx) * 34); font-size: calc(var(--rpx) * 24); }
.loading-list { text-align: center; } .skeleton { padding: calc(var(--rpx) * 34); background: white; border-radius: calc(var(--rpx) * 18); margin: calc(var(--rpx) * 14) 0; } .skeleton view { height: calc(var(--rpx) * 22); background: #edf2ed; border-radius: calc(var(--rpx) * 8); width: 65%; margin-bottom: calc(var(--rpx) * 14); } .skeleton view + view { width: 35%; } .loading-label { font-size: calc(var(--rpx) * 22); color: #8b9f8d; }
.overlay { position: fixed; z-index: 10; top: 0; left: 0; right: 0; bottom: 0; background: #102a2380; display: flex; align-items: flex-end; }
.sheet { width: 100%; max-width: calc(var(--rpx) * 960); margin: 0 auto; background: #f9fbf8; border-radius: calc(var(--rpx) * 34) calc(var(--rpx) * 34) 0 0; box-sizing: border-box; padding: calc(var(--rpx) * 20) calc(var(--rpx) * 32) calc(calc(var(--rpx) * 32) + env(safe-area-inset-bottom)); position: relative; }
.sheet-handle { width: calc(var(--rpx) * 62); height: calc(var(--rpx) * 7); background: #d7e1d7; border-radius: calc(var(--rpx) * 8); margin: 0 auto calc(var(--rpx) * 38); } .sheet-close { position: absolute; right: calc(var(--rpx) * 25); top: calc(var(--rpx) * 31); font-size: calc(var(--rpx) * 40); color: #849387; padding: calc(var(--rpx) * 10) calc(var(--rpx) * 18); z-index: 2; }
.sheet-scroll { max-height: 74vh; } .sheet-title { font-size: calc(var(--rpx) * 32); font-weight: 650; margin-top: calc(var(--rpx) * 15); padding-right: calc(var(--rpx) * 28); } .sheet-sub { font-size: calc(var(--rpx) * 23); color: #8b9c8d; margin: calc(var(--rpx) * 13) 0 calc(var(--rpx) * 30); }
.detail-prices { background: #fff; border: calc(var(--rpx) * 1) solid #e5ece3; border-radius: calc(var(--rpx) * 18); overflow: hidden; } .detail-row { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--rpx) * 24); border-bottom: calc(var(--rpx) * 1) solid #eef2eb; font-size: calc(var(--rpx) * 25); } .detail-row:last-child { border-bottom: none; } .detail-row.highlight { background: #edf5e9; color: #246944; } .detail-currency { font-size: calc(var(--rpx) * 22); margin-right: calc(var(--rpx) * 6); } .detail-amount { font-size: calc(var(--rpx) * 28); font-weight: 650; font-variant-numeric: tabular-nums; }
.detail-unit { color: #7e907f; font-size: calc(var(--rpx) * 21); margin-top: calc(var(--rpx) * 20); } .detail-note { font-size: calc(var(--rpx) * 22); color: #8c9989; line-height: 1.8; margin: calc(var(--rpx) * 22) 0 calc(var(--rpx) * 28); } .primary-button { background: #244f3f; color: #fff; text-align: center; border-radius: calc(var(--rpx) * 14); font-size: calc(var(--rpx) * 26); padding: calc(var(--rpx) * 24); }
.rule-item { padding: calc(var(--rpx) * 25) 0; border-bottom: calc(var(--rpx) * 1) solid #e3eae0; } .rule-item view { font-size: calc(var(--rpx) * 26); font-weight: 600; margin-bottom: calc(var(--rpx) * 13); } .rule-item text { font-size: calc(var(--rpx) * 23); color: #82907e; line-height: 1.8; }