:root{--blue:#139bf4;--cyan:#20d7d2;--ink:#111827;--muted:#9099a5}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;background:#d9f1ff;color:var(--ink)}
button,input{font:inherit}.page{width:min(100%,780px);min-height:100vh;margin:auto;padding-bottom:104px;overflow:hidden;background:linear-gradient(180deg,#168ff0 0,#65c9fb 20%,#edf9ff 45%,#f6fbff 100%)}
.header{padding:34px 28px 0;position:relative;background:radial-gradient(circle at 22% 28%,rgba(255,255,255,.36),transparent 20%)}
.header:after{content:"";position:absolute;left:-70px;right:-70px;bottom:-35px;height:115px;background:radial-gradient(ellipse at center,#fff 0 33%,transparent 35%) 0 0/180px 70px;opacity:.78;z-index:0}
.brand-row,.search,.chips{position:relative;z-index:2}.brand-row{display:flex;align-items:flex-start;justify-content:space-between}.brand-title{font-size:44px;font-weight:900;color:#fff;letter-spacing:2px;text-shadow:0 3px 0 rgba(0,91,160,.13)}.brand-title span{font-size:23px;color:#ffeb39;vertical-align:top}.brand-sub{display:inline-block;color:#fff;font-size:18px;font-weight:800;margin-top:10px;padding-bottom:6px;border-bottom:4px solid #ffe932;transform:rotate(-2deg)}
.paper-plane{position:absolute;right:245px;top:38px;color:#fff;font-size:32px;transform:rotate(-12deg)}.capsule{width:118px;height:52px;border:0;border-radius:30px;background:rgba(255,255,255,.88);display:flex;align-items:center;justify-content:space-around;box-shadow:0 10px 25px rgba(0,86,154,.15)}.capsule i{height:24px;width:1px;background:#d7dfe8}.capsule span,.capsule b{font-size:21px}
.search{height:70px;margin-top:26px;padding:8px 10px 8px 26px;border-radius:38px;background:#fff;display:flex;align-items:center;gap:14px;box-shadow:0 16px 35px rgba(27,101,152,.17)}.search-ico{width:28px;height:28px;border:3px solid #69717c;border-radius:50%;position:relative}.search-ico:after{content:"";position:absolute;width:12px;height:3px;background:#69717c;right:-9px;bottom:-5px;transform:rotate(45deg)}.search input{flex:1;min-width:0;border:0;outline:0;font-size:19px}.search input::placeholder{color:#9da4ad}.search button{border:0;border-radius:28px;height:52px;padding:0 29px;color:#fff;font-size:19px;background:linear-gradient(135deg,#19b9f0,#2879f6)}
.chips{display:flex;gap:14px;overflow:auto;padding:20px 2px 18px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}.chip{flex:0 0 auto;min-width:105px;height:50px;border:0;border-radius:27px;background:#fff;font-size:16px;box-shadow:0 9px 24px rgba(30,91,132,.12)}.chip.active{color:#fff;background:linear-gradient(135deg,#148ef8,#1cc9e0);outline:3px solid rgba(255,255,255,.95)}.chip.menu{min-width:56px;position:relative}.chip.menu em{position:absolute;right:4px;top:4px;width:8px;height:8px;border-radius:50%;background:#ff5a35}
main{position:relative;z-index:2}.hero{height:324px;margin:0 28px;position:relative;overflow:hidden;border:5px solid #fff;border-radius:30px;background:url("assets/hero.svg") center/cover;box-shadow:0 20px 50px rgba(30,94,138,.2)}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,52,76,.45),transparent 67%)}.hero-copy{position:absolute;left:32px;top:94px;color:#fff}.hero-copy h1{margin:0;font-size:42px;text-shadow:0 3px 14px rgba(0,40,65,.35)}.hero-copy p{display:inline-block;margin:15px 0 0;padding:7px 13px;background:#ffe744;color:#191d22;font-weight:800;transform:rotate(-2deg)}
.route span{position:absolute;padding:6px 12px;border-radius:18px;color:#fff;font-weight:800}.r1{right:65px;top:67px;background:#75c737}.r2{right:102px;top:152px;background:#f65f76}.r3{right:135px;bottom:42px;background:#54a9f5}.route-line{position:absolute;right:83px;top:95px;width:128px;height:145px;border-right:3px dashed #fff;border-bottom:3px dashed #fff;border-radius:0 0 70px 0;transform:rotate(13deg)}.camera{position:absolute;right:18px;bottom:14px;font-size:58px;filter:drop-shadow(0 5px 2px rgba(0,59,91,.18))}.dots{position:absolute;left:50%;bottom:14px;display:flex;gap:9px;transform:translateX(-50%)}.dots b{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.7)}.dots .on{width:22px;border-radius:10px;background:#fff}
.services{margin:17px 28px 0;padding:26px 14px 23px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px 7px;border-radius:29px;background:#fff;box-shadow:0 17px 43px rgba(40,92,126,.12)}.service{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:7px}.ico{display:grid;place-items:center;width:70px;height:70px;border-radius:23px;font-size:37px;box-shadow:0 8px 17px rgba(77,105,128,.12)}.green{background:#eaf8ef}.red{background:#fff0ed}.blue{background:#edf5ff}.orange{background:#fff3e6}.yellow{background:#fff6e5}.pink{background:#fff0f2}.mint{background:#eafbf6}.cream{background:#fff8e8}.service b{font-size:15px}.service small{font-size:11px;color:#999}
.recommend{margin:17px 28px 0;padding:21px 17px 24px;border-radius:29px;background:#fff;box-shadow:0 17px 43px rgba(40,92,126,.12)}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.section-head>div{display:flex;align-items:baseline;gap:12px}.section-head h2{margin:0;font-size:22px}.section-head p{margin:0;color:#929ba6;font-size:13px}.section-head button{border:0;background:none;color:#929ba6}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.card{overflow:hidden;border-radius:17px;background:#fff;box-shadow:0 8px 22px rgba(43,82,111,.13)}.photo{height:128px;background-size:cover;background-position:center;position:relative}.jinggang{background-image:url("assets/jinggang.svg")}.wuyuan{background-image:url("assets/wuyuan.svg")}.sanqing{background-image:url("assets/sanqing.svg")}.badge{position:absolute;left:9px;top:9px;padding:5px 8px;border-radius:8px;color:#fff;font-size:11px}.red-badge{background:#ff5a45}.green-badge{background:#31b978}.blue-badge{background:#359ff4}.card-body{padding:11px}.card-body h3{margin:0;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-body p{margin:7px 0 12px;color:#989fa8;font-size:11px}.card-body>div{display:flex;align-items:center;justify-content:space-between}.card-body strong{color:#ff4c2e;font-size:20px}.card-body small{font-size:10px;margin-left:2px}.card-body button{border:0;border-radius:15px;padding:7px 9px;color:#fff;font-size:11px;background:linear-gradient(135deg,#13c9c0,#1fc8d9)}.empty{display:none;text-align:center;padding:28px;color:#8d97a3}
.tabbar{position:fixed;z-index:20;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,780px);height:91px;padding:9px 19px max(9px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,1fr);align-items:end;background:rgba(255,255,255,.97);box-shadow:0 -12px 32px rgba(36,77,109,.12);backdrop-filter:blur(18px)}.tabbar button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:3px}.tabbar span{font-size:30px}.tabbar b{font-size:13px}.tabbar .active{color:#149af3}.start{position:relative;top:-20px;width:86px;height:86px!important;margin:auto;border:7px solid #fff!important;border-radius:50%!important;color:#fff!important;background:linear-gradient(145deg,#22d9cc,#139df5)!important;box-shadow:0 11px 25px rgba(24,155,215,.35)!important}.start i{font-size:29px;font-style:normal}
.toast{position:fixed;z-index:50;left:50%;bottom:120px;transform:translate(-50%,18px);opacity:0;padding:11px 17px;border-radius:13px;color:#fff;background:rgba(17,24,39,.9);transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}.modal{position:fixed;z-index:60;inset:0;display:none}.modal.show{display:block}.mask{position:absolute;inset:0;background:rgba(10,34,50,.46);backdrop-filter:blur(3px)}.modal-card{position:absolute;left:50%;top:50%;width:min(88%,410px);padding:28px;border-radius:25px;background:#fff;text-align:center;transform:translate(-50%,-50%)}.close{position:absolute;right:13px;top:10px;border:0;background:none;font-size:28px}.modal-icon{font-size:44px}.modal-card h3{margin:9px 0}.modal-card p{color:#7f8995;line-height:1.65}.primary{width:100%;padding:12px;border:0;border-radius:22px;color:#fff;background:linear-gradient(135deg,#179ef5,#20cfc9)}
.hidden{display:none!important}
@media(max-width:610px){.header{padding:28px 15px 0}.brand-title{font-size:37px}.brand-sub{font-size:15px}.paper-plane{right:188px}.capsule{width:100px;height:46px}.search{height:62px;margin-top:22px}.search input{font-size:16px}.search button{height:46px;padding:0 21px}.chip{min-width:94px;height:45px;font-size:14px}.hero,.services,.recommend{margin-left:15px;margin-right:15px}.hero{height:285px}.hero-copy{left:20px;top:87px}.hero-copy h1{font-size:33px}.hero-copy p{font-size:12px}.route span{font-size:11px}.r1{right:31px}.r2{right:60px}.r3{right:80px}.camera{font-size:48px}.services{gap:21px 2px;padding-inline:5px}.ico{width:58px;height:58px;font-size:30px}.service b{font-size:12px}.service small{font-size:9px}.cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.cards::-webkit-scrollbar{display:none}.card{min-width:72%;scroll-snap-align:start}.photo{height:145px}}
@media(min-width:820px){body{padding:25px 0}.page{border-radius:32px;box-shadow:0 30px 90px rgba(26,81,120,.22)}.tabbar{bottom:25px;border-radius:0 0 32px 32px}}