| 1 |
- body{background-color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.custom-header{position:fixed;top:0;left:0;width:100%;height:2.75rem;padding-top:var(--status-bar-height);background-color:#fff;display:flex;align-items:center;justify-content:space-between;padding-left:.9375rem;padding-right:.9375rem;box-sizing:border-box;z-index:100}.header-placeholder{height:calc(2.75rem + var(--status-bar-height))}.back-icon{width:1.25rem;height:1.25rem}.header-title{font-size:1rem;font-weight:700;color:#333}.header-right{width:1.25rem}.swiper-container{position:relative;padding-bottom:.9375rem}.level-swiper{height:11.25rem;margin-top:.625rem}.level-card{height:10rem;border-radius:.9375rem;margin:0 .3125rem;transition:transform .3s;overflow:hidden;position:relative;box-shadow:0 .3125rem .625rem rgba(0,0,0,.1)}.level-card-1{background:linear-gradient(135deg,#e0e0e0,#bdbdbd)}.level-card-2{background:linear-gradient(135deg,#cfd8dc,#b0bec5)}.level-card-3{background:linear-gradient(135deg,#ffc107,#ff9800)}.level-card-4{background:linear-gradient(135deg,#4fc3f7,#039be5)}.card-content{padding:.9375rem;position:relative;z-index:2;height:100%;box-sizing:border-box;display:flex;flex-direction:column}.card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:auto}.level-badge{border:1px solid rgba(255,255,255,.6);padding:.0625rem .375rem;border-radius:.3125rem;font-size:.75rem;color:#fff}.current-badge{background-color:rgba(255,255,255,.9);color:#333;font-size:.625rem;padding:.125rem .375rem;border-radius:.625rem;font-weight:700}.level-name{font-size:1.375rem;font-weight:700;color:#fff;margin-bottom:.3125rem;text-shadow:0 .0625rem .125rem rgba(0,0,0,.1)}.level-score{font-size:.75rem;color:rgba(255,255,255,.8);margin-bottom:.625rem}.crown-overlay{position:absolute;bottom:-.9375rem;right:-.9375rem;width:8.125rem;height:8.125rem;opacity:.1;z-index:1}.swiper-dots{display:flex;justify-content:center;margin-top:.3125rem}.dot{width:.375rem;height:.375rem;background-color:#e0e0e0;border-radius:50%;margin:0 .1875rem;transition:all .3s}.dot.active{width:.75rem;background-color:#333;border-radius:.1875rem}.benefits-title-row{padding:.625rem .9375rem;display:flex;align-items:baseline}.benefits-title{font-size:1rem;font-weight:700;color:#333}.benefits-count{font-size:.875rem;color:#999;margin-left:.3125rem}.benefits-grid{display:flex;flex-wrap:wrap;padding:0 .625rem}.benefit-item{width:25%;display:flex;flex-direction:column;align-items:center;margin-bottom:.9375rem}.benefit-icon-wrapper{width:2.75rem;height:2.75rem;background-color:#f8f8f8;border-radius:.75rem;display:flex;align-items:center;justify-content:center;margin-bottom:.375rem}.benefit-icon{width:1.375rem;height:1.375rem}.benefit-icon-placeholder{font-size:1.125rem;font-weight:700;color:#ffb300}.benefit-name{font-size:.6875rem;color:#666;text-align:center}.popup-mask{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);z-index:999;display:none;align-items:center;justify-content:center}.popup-mask.show{display:flex}.popup-modal{width:15rem;background-color:#fff;border-radius:.9375rem;padding:1.5625rem 1.25rem;display:flex;flex-direction:column;align-items:center;box-shadow:0 .3125rem 1.25rem rgba(0,0,0,.2)}.popup-icon-wrapper{width:3.75rem;height:3.75rem;background-color:#fff8e1;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:.9375rem}.benefit-icon-large{width:1.875rem;height:1.875rem}.benefit-icon-placeholder-large{font-size:1.5625rem;font-weight:700;color:#ffb300}.popup-title{font-size:1rem;font-weight:700;color:#333;margin-bottom:.625rem}.popup-desc{font-size:.8125rem;color:#666;text-align:center;line-height:1.5;margin-bottom:1.25rem}.popup-btn{width:80%;height:2.25rem;line-height:2.25rem;background-color:#212121;color:#fff;font-size:.875rem;border-radius:1.125rem}
|
