:root{
  --violet:#7c5ce0; --violet-deep:#5c3fc0; --violet-soft:#eee9ff;
  --ink:#2c2837; --muted:#8d889c; --line:#eeeaf7;
  --paper:#f7f5fc; --card:#fff; --price:#8158e8;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#eceaf4;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
.app{position:relative;width:min(100vw,460px);min-height:100vh;min-height:100dvh;margin:0 auto;background:linear-gradient(180deg,#ffffff 0,#f7f5fc 42%,#f4f2fa 100%);box-shadow:0 0 50px rgba(70,50,120,.12);padding-bottom:86px}
.topbar{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;padding:14px 12px 10px;position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(14px)}
.search-wrap{position:relative;height:40px;border:1.5px solid #d9d0f3;border-radius:999px;background:#fff;display:flex;align-items:center;min-width:0}
.search-icon{position:absolute;left:13px;color:#a69bc6;font-size:19px;line-height:1}
#search{width:100%;height:100%;padding:0 10px 0 34px;border:0;outline:0;background:transparent;color:#514a63;font-size:12px;min-width:0}
#search::placeholder{color:#b4aec3}
.search-btn{height:40px;padding:0 16px;border:0;border-radius:999px;background:linear-gradient(135deg,#9677eb,#7755dd);color:#fff;font-size:13px;font-weight:800;box-shadow:0 6px 14px rgba(124,92,224,.25)}
.notice{position:relative;width:38px;height:38px;border:0;background:transparent;color:#7c5ce0;font-size:24px;padding:0;line-height:1}
.notice em{position:absolute;right:-2px;top:-2px;min-width:20px;height:17px;padding:0 4px;border-radius:9px;background:#ff5a55;color:#fff;font-size:9px;font-style:normal;line-height:17px;font-weight:900}
.page{padding:0 12px 18px}
.promo{position:relative;overflow:hidden;border-radius:17px;margin-bottom:14px;background:#efeaff}
.promo-track{display:flex;transition:transform .55s cubic-bezier(.2,.75,.25,1)}
.promo-slide{min-width:100%;min-height:150px;padding:20px;display:grid;grid-template-columns:1fr 112px;gap:10px;align-items:center;overflow:hidden}
.promo-slide.p1{background:linear-gradient(120deg,#e9efff,#dfe9ff 58%,#f7f6ff)}
.promo-slide.p2{background:linear-gradient(120deg,#f7e9ff,#f3e0f7 58%,#fff8fb)}
.promo-slide.p3{background:linear-gradient(120deg,#eef7ee,#e5efe5 58%,#fbfdf9)}.promo-slide.p4{background:linear-gradient(120deg,#ebe7fb,#dfd7f7 58%,#fbf9ff)}
.promo-main small{display:block;color:#9b93af;font-size:10px;letter-spacing:2px}
.promo-main h2{margin:7px 0 8px;font-size:21px;line-height:1.25}
.promo-main p{margin:0;color:#77708a;font-size:11px}
.promo-btn{display:inline-flex;margin-top:14px;padding:7px 13px;border-radius:999px;background:#fff;color:#7453d2;font-size:12px;font-weight:900;box-shadow:0 5px 14px rgba(97,72,170,.12)}
.promo-thumb{width:112px;height:110px;border-radius:13px;overflow:hidden;background:#fff;box-shadow:0 7px 18px rgba(82,60,140,.12)}
.promo-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.promo-dots{position:absolute;left:20px;bottom:10px;display:flex;gap:5px}
.promo-dots i{width:5px;height:5px;border-radius:50%;background:#b9aee2}
.promo-dots i.on{width:14px;border-radius:5px;background:#7c5ce0}
.section-head{display:flex;align-items:center;justify-content:space-between;margin:3px 2px 9px}
.section-head h3{margin:0;font-size:16px}
.section-head span{color:#aaa3b9;font-size:10px}
.pool-grid{columns:2;column-gap:10px}
.pool-card{break-inside:avoid;display:inline-block;width:100%;margin:0 0 10px;border:0;padding:0;border-radius:16px;overflow:hidden;background:#fff;text-align:left;box-shadow:0 5px 16px rgba(63,48,104,.08);color:inherit}
.pool-cover-wrap{position:relative;background:#f5f2fb}
.pool-cover{display:block;width:100%;object-fit:cover;object-position:top center;background:#f2eefb}
.pool-card.tall .pool-cover{aspect-ratio:4/3.1}.pool-card.mid .pool-cover{aspect-ratio:4/3.25}.pool-card.short .pool-cover{aspect-ratio:4/3.4}
.pool-tag{position:absolute;left:8px;top:8px;padding:3px 7px;border-radius:7px;background:rgba(255,255,255,.92);color:#7a55d9;font-size:10px;font-weight:900;box-shadow:0 2px 8px rgba(73,51,127,.12)}
.pool-body{padding:9px 10px 10px}
.pool-title{display:-webkit-box;min-height:34px;overflow:hidden;font-size:13px;line-height:1.36;font-weight:900;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pool-sub{margin-top:4px;color:#9a94a9;font-size:10px}
.pool-foot{display:flex;align-items:flex-end;justify-content:space-between;margin-top:9px}
.pool-price{color:var(--price);font-size:17px;font-weight:900}.pool-price small{font-size:11px}
.star{width:29px;height:29px;border:0;background:transparent;color:#c8c2d6;font-size:24px;line-height:25px;padding:0;text-align:center}
.star.on{color:#ffca43;text-shadow:0 2px 8px rgba(255,190,40,.28)}
.codex-panel{margin:0 0 12px;padding:14px;border-radius:17px;background:#fff;box-shadow:0 5px 16px rgba(63,48,104,.08)}
.codex-panel h3{margin:0 0 11px;font-size:16px}
.codex-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.codex-item{border:0;background:#f7f4ff;border-radius:12px;padding:7px;text-align:center;color:#5b526e}
.codex-item img{width:100%;height:76px;object-fit:cover;object-position:top center;border-radius:8px;display:block}
.codex-item b{display:block;margin-top:6px;font-size:10px;line-height:1.25}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.stat-card{padding:14px;border-radius:15px;background:#fff;box-shadow:0 5px 16px rgba(63,48,104,.08)}
.stat-card b{display:block;color:#7857d8;font-size:25px}
.stat-card span{color:#9992a8;font-size:11px}
.bag-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #f0edf6}
.bag-row img{width:50px;height:50px;border-radius:10px;object-fit:cover;object-position:top center;background:#f4f1fb}
.bag-row .grow{flex:1;min-width:0}.bag-row b{display:block;font-size:13px}.bag-row small{color:#9f99aa;font-size:10px}
.bag-row strong{color:#7c5ce0;font-size:17px}
.mine-card{margin-bottom:12px;padding:16px;border-radius:17px;background:#fff;box-shadow:0 5px 16px rgba(63,48,104,.08)}
.mine-card h3{margin:0 0 8px;font-size:16px}.mine-card p{margin:0;color:#8d879c;font-size:12px;line-height:1.75}
.danger{border:0;border-radius:999px;background:#f5eef2;color:#b95d75;padding:10px 14px;font-size:12px;font-weight:800}
.empty{padding:50px 12px;text-align:center;color:#a49db2;font-size:12px}.empty b{display:block;font-size:38px;margin-bottom:10px;color:#c3b7e7}
.tabbar{position:fixed;left:50%;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(4,1fr);width:min(100vw,460px);padding:7px 10px max(8px,env(safe-area-inset-bottom));transform:translateX(-50%);background:rgba(255,255,255,.96);box-shadow:0 -5px 24px rgba(68,50,112,.08);backdrop-filter:blur(14px)}
.tabbar button{border:0;background:transparent;color:#a29cad;display:grid;place-items:center;gap:2px;padding:3px}
.tabbar i{font-size:20px;font-style:normal;line-height:19px}
.tabbar span{font-size:10px;font-weight:800}.tabbar button.active{color:#7653dc}
.toast{position:fixed;left:50%;bottom:98px;z-index:80;max-width:84vw;padding:10px 15px;border-radius:999px;background:rgba(41,34,59,.9);color:#fff;font-size:12px;opacity:0;pointer-events:none;transform:translate(-50%,7px);transition:.2s}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:461px){.tabbar{box-shadow:0 -5px 22px rgba(68,50,112,.08)}}

.promo-slide.p5{background:linear-gradient(120deg,#e8f4fb,#dcebf8 58%,#f8fcff)}
.promo-slide.p6{background:linear-gradient(120deg,#fff0e9,#f6ded3 58%,#fffaf7)}
.promo-slide.p7{background:linear-gradient(120deg,#eaf7f1,#d8efe4 58%,#f8fffb)}
.promo-slide.p8{background:linear-gradient(120deg,#f4ecff,#e6daf8 58%,#fdfaff)}

.promo-slide.p9{background:linear-gradient(120deg,#f7eedc,#ead7b8 58%,#fffaf0)}

.promo-slide.p10{background:linear-gradient(120deg,#fde8f1,#f7d5e5 58%,#fff8fc)}

.promo-slide.p11{background:linear-gradient(120deg,#e8f2fa,#d8e8f5 58%,#f8fcff)}

.promo-slide.p12{background:linear-gradient(120deg,#edf5ed,#dcebdc 58%,#fbfdfb)}

.promo-slide.p13{background:linear-gradient(120deg,#f4efe4,#e6dcc8 58%,#fcfaf5)}

.promo-slide.p14{background:linear-gradient(120deg,#eaf3e7,#d9e8d3 58%,#fafdf8)}

.promo-slide.p1{background:linear-gradient(120deg,#e6efff,#c8dcff 58%,#fbfdff)}