:root{--blue:#285ea7;--ink:#17375c;--muted:#77898e;--line:rgba(255,255,255,.85);--glass:rgba(255,255,255,.52)}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font-family:Arial,Helvetica,sans-serif;background:#e5f0f4}
button,input,select{font:inherit}
button,a,input,select{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;color:inherit;border:0}
button:focus-visible,a:focus-visible{outline:3px solid #24b8d0;outline-offset:3px}
a{color:inherit}
#app{max-width:510px;margin:auto;min-height:100dvh;background:radial-gradient(ellipse at 85% 28%,#cce7ee88,transparent 55%),linear-gradient(150deg,#f4f8f9,#e1eef0 55%,#eff6f7);padding-bottom:100px;box-shadow:0 0 90px #1c56880c}
header{height:85px;position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:10px 20px;padding-top:calc(10px + env(safe-area-inset-top));background:#edf5f7e8;backdrop-filter:blur(16px)}
header h1{font-size:18px;font-weight:600;margin:0;color:var(--blue)}
header img{width:115px;height:64px;object-fit:contain;mix-blend-mode:multiply}
.icon{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.iconbutton{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#ffffff70;color:var(--blue);position:relative}
.badge{position:absolute;right:-2px;top:-2px;font-size:11px;color:white;background:var(--blue);border-radius:12px;min-width:18px;padding:3px}
.content{padding:6px 18px 20px}
.banner{width:100%;border-radius:18px;overflow:hidden;background:#cceaf2;position:relative;display:block;padding:0}
.banner img{width:100%;height:175px;object-fit:cover;object-position:center}
.banner-label{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;color:var(--blue);font-size:14px;background:#ffffff75}
.dots{display:flex;justify-content:center;gap:5px;margin:12px}
.dots i{height:5px;width:5px;border-radius:50%;background:#cad9df}
.dots i:first-child{background:var(--blue);width:13px}
h2{font-size:18px;color:var(--blue);font-weight:500;margin:22px 0 14px}
.sectionhead{display:flex;align-items:center;justify-content:space-between}
.sectionhead button{font-size:13px;background:none;color:var(--blue)}
.horizontal{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding:0 1px 4px}
.horizontal .product{min-width:166px;flex:0 0 46%}
.product{border-radius:23px;background:var(--glass);border:1px solid var(--line);padding:10px 12px 0;min-width:0;display:flex;flex-direction:column}
.product img{height:148px;width:100%;object-fit:contain;mix-blend-mode:multiply;margin-top:-5px}
.product h3{font-size:15px;line-height:1.4;font-weight:500;color:#172c38;margin:8px 0 3px}
.product p{font-size:12px;line-height:1.5;color:#66777d;margin:0 0 8px}
.product .buy{display:flex;justify-content:space-between;align-items:center;margin-top:auto;gap:4px}
.price{font-size:15px;color:var(--blue);font-weight:600}
.round{height:36px;width:36px;display:grid;place-items:center;border-radius:50%;background:var(--blue);color:#fff;flex-shrink:0}
.round .icon{width:21px}
.points{border-top:1px solid #fff8;margin:10px -7px 0;padding:7px 0;display:flex;justify-content:center;gap:5px;font-size:11px;color:#537ca4}
.points .icon{width:15px;height:15px}
.categories{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.category{background:var(--glass);border:1px solid var(--line);border-radius:19px;min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-size:12px;color:#426c85}
.category .icon{height:33px;width:33px;color:#35afc8}
.chips{display:flex;gap:8px;overflow-x:auto;padding:8px 0 18px;scrollbar-width:none}
.chip{min-width:100px;height:73px;border-radius:18px;border:1px solid #ffffffa0;background:var(--glass);font-size:11px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;white-space:nowrap;color:#6d858c}
.chip .icon{width:25px;height:25px}
.chip.active{color:var(--blue);background:#cce6ee}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px;margin-top:15px}
.bottom{position:fixed;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:calc(100% - 24px);max-width:486px;display:flex;padding:7px 4px;background:#ffffffb3;backdrop-filter:blur(20px);border:1px solid #fff;border-radius:30px;box-shadow:0 5px 20px #64839215;z-index:30}
.bottom button{display:flex;flex:1;min-width:0;flex-direction:column;align-items:center;gap:5px;padding:9px 1px 7px;border-radius:26px;background:transparent;color:#7c8a92;font-size:10px}
.bottom .active{background:#cddfeb;color:var(--blue)}
.bottom .icon{width:20px;height:20px}
.panel{border:1px solid #ffffffb0;background:#ffffff36;border-radius:22px;padding:20px;margin:15px 0}
.balance-label{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--blue)}
.balance{font-size:32px;color:var(--blue);margin:12px 0 0;font-weight:600}
.primary{width:100%;border-radius:12px;padding:13px;background:var(--blue);color:white;font-size:14px}
.secondary{padding:12px 18px;border-radius:13px;border:1px solid white;background:#ffffff85;color:var(--blue)}
.small{font-size:12px;line-height:1.6;color:var(--muted)}
.row{display:flex;gap:12px;align-items:center}
.between{justify-content:space-between}
.profilecard{padding:22px 14px}
.avatar{color:var(--blue);background:#d7eaf0;border-radius:50%;height:46px;width:46px;display:grid;place-items:center}
.profilecard strong{font-size:20px;color:var(--blue);font-weight:500}
.profilecard p{margin:5px 0;font-size:14px;color:var(--muted)}
.twobutton{display:flex;gap:10px;margin-top:22px}
.twobutton button{display:flex;flex:1;flex-direction:column;align-items:center;gap:9px;padding:17px;background:var(--glass);border:1px solid white;border-radius:20px;color:var(--blue);font-size:14px}
.menurow{width:100%;display:flex;align-items:center;gap:13px;text-align:left;background:#ffffff70;border:1px solid #fff;border-radius:20px;padding:17px;margin:12px 0;color:var(--blue)}
.menurow span{flex:1;font-size:14px}
.menurow small{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.segments{display:flex;border:1px solid #fff9;border-radius:18px;background:#ffffff35;padding:5px;margin:18px 0}
.segments button{flex:1;padding:11px 6px;border-radius:13px;background:none;font-size:14px;color:#7a8e97}
.segments button.active{background:white;color:var(--blue)}
.empty{text-align:center;padding:40px 14px;color:var(--muted)}
.empty .icon{width:48px;height:48px;color:#71abc7}
.empty h2{margin:16px 0 8px}
.empty p{font-size:14px;line-height:1.65}
.listrow{padding:14px 0;border-bottom:1px solid #fff8;font-size:14px;display:flex;align-items:center;gap:12px}
.listrow p{margin:4px 0}
.listrow .grow{flex:1}
.coupon{padding:22px;background:linear-gradient(120deg,#ddeff5,#ffffff80);border:1px solid white;border-radius:20px;margin:16px 0}
.coupon h2{margin-top:0}
.coupon strong{font-size:32px}
.coupon .primary{margin-top:20px}
.notice{font-size:11px;color:#708c9b;text-align:center;margin:18px 0;line-height:1.5}
.cartrow{background:#ffffff60;border:1px solid white;border-radius:20px;padding:12px;display:flex;gap:12px;margin:12px 0}
.cartrow img{width:74px;height:92px;object-fit:contain}
.cartrow .grow{flex:1}
.cartrow h3{font-size:14px;margin:6px 0}
.qty{display:flex;align-items:center;gap:15px;margin-top:12px}
.qty button{border-radius:50%;height:29px;width:29px;background:#d7e8f0;color:var(--blue);font-size:20px}
.qty span{font-size:14px}
.search{border:1px solid white;background:#ffffff80;border-radius:14px;padding:12px 14px;width:100%;outline-color:#6dbad1;color:var(--ink);margin:5px 0}
.field{display:flex;flex-direction:column;gap:7px;margin:16px 0;font-size:14px;color:var(--blue)}
.field input,.field select{padding:13px;border-radius:12px;background:#fff;border:1px solid #d3e4ec;color:var(--ink);min-width:0}
dialog{border:1px solid white;background:#eff7f9;border-radius:24px;padding:26px;width:calc(100% - 36px);max-width:420px;color:var(--ink)}
dialog::backdrop{background:#17385766;backdrop-filter:blur(3px)}
dialog h2{margin-top:0}
dialog p{font-size:14px;line-height:1.6}
dialog .actions{display:flex;gap:10px;margin-top:22px}
#toast{position:fixed;bottom:110px;left:50%;transform:translateX(-50%);background:#234e83;color:white;padding:12px 20px;border-radius:20px;font-size:14px;z-index:100;display:none;max-width:90%;text-align:center}
.rewardtable{display:grid;grid-template-columns:1fr 1fr;gap:18px;font-size:14px;color:var(--blue)}
.rewardtable .right{text-align:right}
.rewardtable small{color:var(--muted)}
ul{padding-left:18px;font-size:14px;line-height:1.8}
.save{display:block;background:#d0d64b;color:#fff;text-align:center;border-radius:0 0 18px 18px;margin:9px -12px 0;padding:5px;font-size:11px}
.address{font-size:13px;background:#ffffff75;border-radius:14px;padding:12px;display:flex;gap:8px;align-items:center;width:100%;text-align:left;margin:14px 0;color:var(--blue)}
.installpop{position:fixed;inset:0;z-index:200;background:#17385766;backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center;padding:0 12px calc(16px + env(safe-area-inset-bottom))}
.installcard{width:100%;max-width:420px;background:#eff7f9;border:1px solid #fff;border-radius:24px;padding:24px;text-align:center;color:var(--ink);animation:up .25s ease-out}
.installcard img{width:84px;height:84px;border-radius:20px;background:#fff;box-shadow:0 2px 10px #28549f22}
.installcard h2{margin:14px 0 6px}
.installcard p{font-size:14px;line-height:1.6;margin:0 0 16px;color:var(--muted)}
.installcard .later{background:none;color:var(--muted);font-size:14px;margin-top:10px;padding:8px}
.steps{text-align:left;font-size:14px;line-height:1.9;margin:0 0 12px;color:var(--ink)}
@keyframes up{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
@media(min-width:700px){#app{margin:24px auto;border-radius:32px;min-height:calc(100dvh - 48px);overflow:hidden}.bottom{bottom:24px}header{border-radius:32px 32px 0 0}}
@media(prefers-reduced-motion:no-preference){button{transition:background .18s,transform .18s}button:active{transform:scale(.97)}}