@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root{--navy:#0a1c30;--navy2:#102b47;--blue:#1477c9;--cyan:#42b8df;--sky:#eaf6fc;--ink:#13283d;--muted:#64798d;--line:#d8e6f1;--white:#fff;--green:#168a45;--red:#c63e43;--shadow:0 22px 55px rgba(10,28,48,.16)}
*{box-sizing:border-box}
html{min-height:100%;background:#edf6fb}
body{margin:0;min-height:100vh;color:var(--ink);font-family:'DM Sans',sans-serif;background:radial-gradient(circle at 12% 8%,rgba(66,184,223,.22),transparent 32%),linear-gradient(145deg,#f8fcff 0%,#edf6fb 56%,#e3f0f8 100%)}
button,input{font:inherit}
a{color:inherit}
.portal{min-height:100vh;display:grid;grid-template-columns:minmax(300px,.82fr) minmax(420px,1.18fr)}
.story{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;min-height:100vh;padding:42px clamp(28px,5vw,72px);color:#fff;background:linear-gradient(155deg,var(--navy) 0%,var(--navy2) 68%,#104b71 100%)}
.story:before,.story:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.12)}
.story:before{width:440px;height:440px;right:-230px;top:14%}
.story:after{width:280px;height:280px;right:-100px;top:26%}
.brand{position:relative;z-index:1;display:inline-flex;align-items:center;gap:12px;width:max-content;text-decoration:none;font-family:'Manrope',sans-serif;font-size:25px;font-weight:800;letter-spacing:-1px}
.brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;color:#fff;background:linear-gradient(145deg,var(--blue),var(--cyan));box-shadow:0 10px 24px rgba(12,112,183,.35)}
.brand-mark svg{width:23px;height:23px}.brand b{color:#67c9eb}.brand small{display:block;margin-top:1px;color:#a9c1d5;font:600 10px 'DM Sans',sans-serif;letter-spacing:1.5px;text-transform:uppercase}
.story-copy{position:relative;z-index:1;max-width:510px;padding:70px 0}
.eyebrow{display:flex;align-items:center;gap:9px;margin-bottom:20px;color:#88d2ee;font-size:12px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase}.eyebrow:before{content:"";width:28px;height:2px;background:#42b8df}
.story h1{margin:0;font-family:'Manrope',sans-serif;font-size:clamp(38px,5vw,68px);line-height:1.02;letter-spacing:-3px}.story h1 span{display:block;color:#72d0ed}
.story p{max-width:430px;margin:24px 0 0;color:#c0d1df;font-size:16px;line-height:1.75}
.story-foot{position:relative;z-index:1;color:#829bb0;font-size:12px}
.content{display:grid;place-items:center;min-height:100vh;padding:42px clamp(22px,6vw,86px)}
.panel{width:min(100%,590px);animation:rise .42s ease both}
@keyframes rise{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
.back{display:inline-flex;align-items:center;gap:7px;margin-bottom:26px;color:var(--muted);font-size:13px;font-weight:700;text-decoration:none}.back:hover{color:var(--blue)}
.panel h2{margin:0;font-family:'Manrope',sans-serif;font-size:clamp(30px,4vw,45px);line-height:1.1;letter-spacing:-1.8px;color:var(--navy)}
.lead{margin:12px 0 28px;color:var(--muted);font-size:15px;line-height:1.65}
.actions{display:grid;gap:13px;margin-top:32px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 20px;border:1px solid transparent;border-radius:13px;cursor:pointer;font-weight:800;text-decoration:none;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}.btn:hover{transform:translateY(-2px)}.btn:active{transform:none}.btn:disabled{cursor:wait;opacity:.65;transform:none}
.btn-primary{color:#fff;background:var(--blue);box-shadow:0 12px 24px rgba(20,119,201,.23)}.btn-primary:hover{background:#0e68b4}
.btn-secondary{color:var(--navy);border-color:var(--line);background:rgba(255,255,255,.72)}.btn-secondary:hover{background:#fff;box-shadow:0 10px 25px rgba(10,28,48,.08)}
.form{display:grid;gap:18px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:grid;gap:7px}.field.full{grid-column:1/-1}.field label{color:#30485e;font-size:12px;font-weight:800}.field input{width:100%;height:48px;padding:0 14px;border:1px solid #cbdce9;border-radius:11px;outline:none;color:var(--ink);background:rgba(255,255,255,.9);transition:border .16s,box-shadow .16s}.field input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(20,119,201,.1)}.field input::placeholder{color:#9aabb9}
.form-actions{display:grid;gap:12px;margin-top:5px}.helper{text-align:center;color:var(--muted);font-size:13px}.helper a{color:var(--blue);font-weight:800;text-decoration:none}
.notice{display:none;margin-bottom:18px;padding:12px 14px;border-radius:10px;font-size:13px;font-weight:700;line-height:1.45}.notice.show{display:block}.notice.error{color:#9f2931;border:1px solid #efc8cb;background:#fff0f1}.notice.success{color:#116f39;border:1px solid #bce0c9;background:#eaf8ef}
.success-card{padding:28px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.78);box-shadow:0 18px 45px rgba(10,28,48,.08)}
.success-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:18px;border-radius:50%;color:#fff;background:var(--green)}
.customer-id{display:inline-flex;margin:10px 0 18px;padding:8px 12px;border-radius:9px;color:var(--navy);background:var(--sky);font:800 14px 'Manrope',sans-serif;letter-spacing:.6px}
.dash-card{overflow:hidden;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.82);box-shadow:var(--shadow)}
.dash-head{padding:28px;color:#fff;background:linear-gradient(135deg,var(--navy),#164b70)}.dash-head .customer-id{margin:0 0 13px;color:#dff5ff;background:rgba(255,255,255,.12)}.dash-head h2{color:#fff;font-size:30px;letter-spacing:-1px}.dash-head p{margin:8px 0 0;color:#bcd0df}
.details{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:8px 28px 24px}.detail{padding:20px 0;border-bottom:1px solid var(--line)}.detail:nth-child(odd){padding-right:18px}.detail:nth-child(even){padding-left:18px;border-left:1px solid var(--line)}.detail.full{grid-column:1/-1;padding-right:0;padding-left:0;border-left:0}.detail span{display:block;margin-bottom:5px;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.8px}.detail b{font-size:14px}.dash-actions{display:flex;gap:10px;padding:0 28px 28px}.dash-actions .btn{flex:1}
.fine{margin-top:22px;color:#91a1af;font-size:11px;line-height:1.6}
@media(max-width:850px){.portal{display:block}.story{min-height:auto;padding:26px 22px 34px}.story-copy{padding:62px 0 18px}.story h1{font-size:42px}.story-foot{display:none}.content{min-height:auto;padding:38px 20px 60px}.panel{max-width:610px}}
@media(max-width:540px){.story h1{font-size:36px;letter-spacing:-2px}.story p{font-size:14px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.details{grid-template-columns:1fr}.detail:nth-child(odd),.detail:nth-child(even){padding:17px 0;border-left:0}.dash-actions{display:grid}.content{padding-inline:16px}}

.checkline{display:flex;align-items:center;gap:10px;color:#40566a;font-size:13px;font-weight:700}.checkline input{width:18px;height:18px;accent-color:var(--blue)}
.customer-app{background:#f2f7fb}.customer-app svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.app-shell{min-height:100vh;padding-bottom:92px}.app-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;height:72px;padding:0 max(20px,calc((100vw - 760px)/2));color:#fff;background:linear-gradient(115deg,#073d70,#086ebc);box-shadow:0 9px 30px rgba(6,55,99,.18)}.app-brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:'Manrope',sans-serif;font-size:20px;font-weight:800;letter-spacing:-.7px}.app-brand .brand-mark{width:36px;height:36px;border-radius:11px}.app-brand b{color:#8edcf4}.app-brand small{display:block;color:#b8d9ec;font:700 8px 'DM Sans',sans-serif;letter-spacing:1.2px;text-transform:uppercase}.icon-action{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.2);border-radius:13px;color:#fff;background:rgba(255,255,255,.08);cursor:pointer}.app-main{width:min(100%,760px);min-height:calc(100vh - 72px);margin:auto;padding:22px 20px 34px}.app-main .notice{position:sticky;top:84px;z-index:18;box-shadow:0 10px 30px rgba(13,43,67,.12)}
.skeleton{position:relative;overflow:hidden;border-radius:22px;background:#dce8f0}.skeleton:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);animation:shimmer 1.35s infinite}.hero-skeleton{height:210px}.card-skeleton{height:170px;margin-top:18px}@keyframes shimmer{to{transform:translateX(100%)}}
.welcome-card{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr auto;gap:18px;min-height:205px;padding:27px;border-radius:26px;color:#fff;background:linear-gradient(135deg,#064d89 0%,#0879c8 68%,#36a8d3 100%);box-shadow:0 18px 45px rgba(6,91,157,.24);animation:rise .35s ease both}.welcome-card:after{content:"";position:absolute;width:220px;height:220px;right:-92px;top:-112px;border:38px solid rgba(255,255,255,.08);border-radius:50%}.welcome-card .hello{display:block;margin-bottom:8px;color:#b9e7f6;font-size:10px;font-weight:800;letter-spacing:1.6px}.welcome-card h1{margin:0;font:800 clamp(27px,5vw,36px)/1.08 'Manrope',sans-serif;letter-spacing:-1.4px}.welcome-card p{display:flex;align-items:flex-start;gap:7px;max-width:460px;margin:19px 0 0;color:#d7edf7;font-size:13px;line-height:1.55}.welcome-card p svg{flex:none;width:17px;margin-top:2px}.water-orb{align-self:center;display:grid;place-items:center;width:76px;height:76px;border:1px solid rgba(255,255,255,.24);border-radius:25px;background:rgba(255,255,255,.13);transform:rotate(7deg)}.water-orb svg{width:38px;height:38px;transform:rotate(-7deg)}
.balance-strip{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:-25px 16px 0;padding:18px 20px;position:relative;z-index:2;border:1px solid #dce9f2;border-radius:18px;background:#fff;box-shadow:0 15px 35px rgba(21,61,91,.12)}.balance-strip small{display:block;color:#6b7f90;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.8px}.balance-strip strong{display:block;margin-top:4px;color:#0b2943;font:800 22px 'Manrope',sans-serif}.quick-main,.favorite-card button,.confirm-order{min-height:48px;padding:0 20px;border:0;border-radius:13px;color:#fff;background:#0873c4;box-shadow:0 9px 20px rgba(8,115,196,.22);font-weight:800;cursor:pointer}.section-head{display:flex;align-items:end;justify-content:space-between;gap:15px;margin:30px 2px 13px}.section-head span,.page-title span{color:#718597;font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase}.section-head h2{margin:3px 0 0;color:#102d46;font:800 22px 'Manrope',sans-serif;letter-spacing:-.7px}.section-head>button{border:0;color:#0873c4;background:none;font-size:12px;font-weight:800;cursor:pointer}
.favorite-card{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px;border:1px solid #dce9f2;border-radius:20px;background:linear-gradient(120deg,#fff,#f4fbff);box-shadow:0 9px 26px rgba(27,69,99,.08)}.favorite-card>div{display:flex;align-items:center;gap:13px;min-width:0}.favorite-mark{display:grid;place-items:center;flex:none;width:43px;height:43px;border-radius:14px;color:#d0780d;background:#fff1d9;font-size:19px}.favorite-card h3{overflow:hidden;margin:0;color:#15334d;font:800 14px 'Manrope',sans-serif;text-overflow:ellipsis;white-space:nowrap}.favorite-card p{margin:5px 0 0;color:#748798;font-size:12px}.favorite-card button{flex:none;min-height:42px;padding:0 15px;font-size:12px}.empty-card{padding:30px 22px;border:1px dashed #c9dce9;border-radius:20px;text-align:center;background:rgba(255,255,255,.7)}.empty-icon{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 12px;border-radius:15px;color:#0b78c5;background:#e6f5fc}.empty-icon svg{width:26px;height:26px}.empty-card h3{margin:0;color:#1c3a53;font:800 16px 'Manrope',sans-serif}.empty-card p{margin:7px auto 0;max-width:330px;color:#778a99;font-size:12px;line-height:1.5}
.order-list{display:grid;gap:13px}.order-card,.tracking-card{padding:18px;border:1px solid #dce7ef;border-radius:19px;background:#fff;box-shadow:0 7px 22px rgba(22,57,83,.06)}.order-card-top,.tracking-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.order-card small,.tracking-card small{color:#8293a1;font-size:9px;font-weight:800;letter-spacing:.9px}.order-card h3,.tracking-card h3{margin:4px 0 0;color:#193750;font:800 15px 'Manrope',sans-serif}.status{display:inline-flex;align-items:center;min-height:25px;padding:0 9px;border-radius:999px;font-size:9px;font-weight:800;white-space:nowrap}.status-pending{color:#a75b05;background:#fff0d8}.status-accepted,.status-assigned-rider{color:#6540a4;background:#eee7ff}.status-in-progress{color:#076bb0;background:#e0f3ff}.status-completed{color:#147340;background:#e2f6e9}.status-cancelled{color:#6d7b86;background:#e9eef2}.order-meta{display:flex;flex-wrap:wrap;gap:13px;margin:15px 0;color:#718494;font-size:11px}.order-meta span{display:flex;align-items:center;gap:5px}.order-meta svg{width:14px;height:14px}.order-total{display:flex;align-items:center;justify-content:space-between;padding-top:13px;border-top:1px solid #edf2f5;color:#708391;font-size:11px}.order-total b{color:#15344e;font:800 15px 'Manrope',sans-serif}.order-actions{display:flex;justify-content:flex-end;gap:17px;margin-top:14px}.text-btn{padding:0;border:0;color:#0873c4;background:none;font-size:11px;font-weight:800;cursor:pointer}.text-btn.danger{color:#bd3e45}
.page-title{display:flex;align-items:center;gap:13px;margin:2px 0 19px}.page-title h1{margin:3px 0 0;color:#102d46;font:800 29px 'Manrope',sans-serif;letter-spacing:-1px}.back-circle{display:grid;place-items:center;flex:none;width:42px;height:42px;border:1px solid #d6e4ed;border-radius:13px;color:#17415f;background:#fff;font-size:21px;cursor:pointer}.order-form{display:grid;gap:14px}.form-card{display:grid;gap:17px;padding:19px;border:1px solid #dce8f0;border-radius:20px;background:#fff;box-shadow:0 6px 22px rgba(21,58,85,.055)}.readonly-card{background:linear-gradient(130deg,#edf8fd,#fff)}.mini-label{color:#0873c4;font-size:9px;font-weight:800;letter-spacing:1.2px}.readonly-card h3{margin:0;color:#14334d;font:800 17px 'Manrope',sans-serif}.readonly-card p{display:flex;align-items:flex-start;gap:6px;margin:0;color:#6e8292;font-size:12px;line-height:1.5}.readonly-card svg{flex:none;width:15px;height:15px}.order-form .field{display:grid;gap:8px}.order-form .field label{display:flex;justify-content:space-between;color:#29465d;font-size:11px;font-weight:800}.order-form input,.order-form select,.order-form textarea,.history-filters input,.history-filters select{width:100%;min-height:49px;padding:0 13px;border:1px solid #cbdce7;border-radius:12px;outline:none;color:#17334a;background:#fbfdff;font:600 13px 'DM Sans',sans-serif;transition:border .15s,box-shadow .15s}.order-form textarea{min-height:88px;padding-top:13px;resize:vertical}.order-form input:focus,.order-form select:focus,.order-form textarea:focus,.history-filters input:focus,.history-filters select:focus{border-color:#1584cc;box-shadow:0 0 0 4px rgba(21,132,204,.1)}.segmented,.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.choice-grid{grid-template-columns:repeat(3,1fr)}.segmented input,.choice-grid input{position:absolute;opacity:0;pointer-events:none}.segmented span,.choice-grid span{display:grid;place-items:center;min-height:46px;padding:5px;border:1px solid #d3e1ea;border-radius:11px;color:#607789;background:#f9fcfe;font-size:11px;font-weight:800;text-align:center;cursor:pointer}.segmented input:checked+span,.choice-grid input:checked+span{border-color:#1684cc;color:#0873c4;background:#e9f6fd;box-shadow:inset 0 0 0 1px #1684cc}.conditional[hidden],#returnCard[hidden]{display:none}.policy{display:grid;gap:5px;padding:17px 19px;border:1px solid #bfe1f2;border-radius:18px;color:#41677d;background:#eaf8fe;font-size:11px}.policy b{margin-bottom:3px;color:#0c638f;font-size:12px}.total-card{display:grid;gap:11px;padding:19px;border-radius:20px;color:#dcecf7;background:linear-gradient(135deg,#092d4c,#0c5486)}.total-card>div{display:flex;align-items:center;justify-content:space-between;font-size:11px}.total-card b{color:#fff}.total-card .grand{margin-top:3px;padding-top:14px;border-top:1px solid rgba(255,255,255,.18)}.total-card strong{color:#fff;font:800 24px 'Manrope',sans-serif}.checkout-actions{display:grid;grid-template-columns:.75fr 1.25fr;gap:10px}.save-favorite{min-height:52px;border:1px solid #bdd7e7;border-radius:14px;color:#0873c4;background:#fff;font-weight:800;cursor:pointer}.confirm-order{min-height:52px;text-transform:uppercase;letter-spacing:.5px}.checkout-actions button:disabled{cursor:wait;opacity:.62}
.track-line{display:grid;grid-template-columns:repeat(4,1fr);align-items:center;margin:28px 10px 9px}.track-line i{position:relative;display:block;height:3px;background:#dce6ed}.track-line i:before{content:"";position:absolute;left:0;top:50%;width:12px;height:12px;border:3px solid #dce6ed;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}.track-line i.done{background:#1583c9}.track-line i.done:before{border-color:#1583c9;background:#1583c9;box-shadow:0 0 0 4px #def1fc}.track-labels{display:grid;grid-template-columns:repeat(4,1fr);margin:0 0 21px;color:#81919d;font-size:8px;font-weight:800;text-align:left}.tracking-info{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid #edf2f5;color:#738694;font-size:11px}.tracking-info strong{color:#14334d;font:800 15px 'Manrope',sans-serif}.cancel-wide{width:100%;min-height:43px;margin-top:14px;border:1px solid #efc9cc;border-radius:11px;color:#b9363e;background:#fff5f5;font-size:11px;font-weight:800;cursor:pointer}.history-filters{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:15px}.history-filters input,.history-filters select{min-height:44px;background:#fff}
.success-page{padding:30px 22px;border:1px solid #d9e8f1;border-radius:25px;text-align:center;background:#fff;box-shadow:0 18px 48px rgba(22,65,96,.1);animation:rise .4s ease both}.success-check{display:grid;place-items:center;width:68px;height:68px;margin:0 auto 17px;border-radius:22px;color:#fff;background:linear-gradient(135deg,#159450,#39b970);box-shadow:0 14px 30px rgba(22,148,80,.25);font-size:29px;font-weight:800}.success-page>span{color:#188b50;font-size:9px;font-weight:800;letter-spacing:1.5px}.success-page h1{max-width:440px;margin:7px auto;color:#13324b;font:800 28px/1.14 'Manrope',sans-serif;letter-spacing:-1px}.success-page>p{max-width:430px;margin:10px auto 23px;color:#708493;font-size:13px;line-height:1.55}.success-details{display:grid;grid-template-columns:1fr 1fr;text-align:left;border:1px solid #e0eaf0;border-radius:17px;overflow:hidden}.success-details>div{min-height:72px;padding:14px;border-bottom:1px solid #e8eff3}.success-details>div:nth-child(odd){border-right:1px solid #e8eff3}.success-details>div:nth-last-child(-n+2){border-bottom:0}.success-details span:not(.status){display:block;margin-bottom:5px;color:#7b8d9a;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.6px}.success-details b{color:#19364f;font-size:12px}.success-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.bottom-nav{position:fixed;z-index:30;left:50%;bottom:12px;display:grid;grid-template-columns:repeat(5,1fr);width:min(calc(100% - 24px),720px);padding:8px;border:1px solid rgba(204,220,230,.9);border-radius:21px;background:rgba(255,255,255,.94);box-shadow:0 16px 45px rgba(15,49,73,.18);backdrop-filter:blur(18px);transform:translateX(-50%)}.bottom-nav button{display:grid;place-items:center;gap:3px;min-height:54px;border:0;border-radius:15px;color:#8495a2;background:transparent;font-size:9px;font-weight:800;cursor:pointer}.bottom-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}.bottom-nav button.active{color:#0873c4;background:#eaf6fd}.bottom-nav button.active svg{transform:translateY(-1px)}
.reward-card{position:relative;overflow:hidden;margin-top:13px;padding:22px;border-radius:22px;color:#fff;background:linear-gradient(135deg,#064d89,#0879c8 62%,#36a8d3);box-shadow:0 15px 38px rgba(6,91,157,.22)}.reward-card:after{content:"";position:absolute;width:180px;height:180px;right:-74px;top:-92px;border:32px solid rgba(255,255,255,.08);border-radius:50%}.reward-card-top{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.reward-card small{display:block;color:#bce7f7;font-size:10px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase}.reward-points{display:flex;align-items:baseline;gap:7px;margin-top:6px;font:800 34px 'Manrope',sans-serif;letter-spacing:-1.3px}.reward-points span{font-size:12px;font-weight:800;letter-spacing:.6px;opacity:.85}.reward-tier{display:inline-flex;align-items:center;gap:5px;flex:none;min-height:27px;padding:0 11px;border-radius:999px;color:#fff;background:rgba(255,255,255,.18);font-size:10px;font-weight:800;letter-spacing:.7px}.reward-bar{position:relative;z-index:1;height:11px;margin-top:16px;border-radius:999px;background:rgba(255,255,255,.22);overflow:hidden}.reward-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#7cc6f7,#eef8ff);transition:width .4s ease}.reward-progress{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:9px;color:#dceffb;font-size:11.5px;font-weight:700}.reward-goal{position:relative;z-index:1;margin:13px 0 0;font-size:13px;font-weight:800;color:#fff}.reward-lifetime{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px;padding-top:15px;border-top:1px solid rgba(255,255,255,.2)}.reward-lifetime div small{color:#bce7f7}.reward-lifetime div b{display:block;margin-top:4px;font:800 16px 'Manrope',sans-serif}
.reward-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}.reward-item{display:flex;flex-direction:column;gap:9px;padding:17px;border:1px solid #dce7ef;border-radius:19px;background:linear-gradient(150deg,#f5fbff,#fff);box-shadow:0 7px 22px rgba(22,57,83,.06)}.reward-item h3{margin:0;color:#193750;font:800 15px 'Manrope',sans-serif}.reward-item .reward-cost{color:#0873c4;font:800 19px 'Manrope',sans-serif}.reward-item .reward-need{color:#7b8c9b;font-size:11.5px;font-weight:700}.reward-item button{margin-top:auto;min-height:42px;border:0;border-radius:12px;color:#fff;background:#0873c4;font-size:12px;font-weight:800;cursor:pointer}.reward-item button:disabled{color:#8a9aa7;background:#e9eef2;cursor:not-allowed}.reward-mini{height:8px;border-radius:999px;background:#e6eef4;overflow:hidden}.reward-mini i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#0873c4,#3fb0dd)}
.reward-history{overflow-x:auto;border:1px solid #dce7ef;border-radius:19px;background:#fff;box-shadow:0 7px 22px rgba(22,57,83,.06)}.reward-history table{width:100%;border-collapse:collapse;min-width:520px}.reward-history th{padding:12px 14px;border-bottom:1px solid #e8eff3;color:#7b8c9b;font-size:9.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;text-align:left}.reward-history td{padding:12px 14px;border-bottom:1px solid #f1f5f8;color:#26445c;font-size:12px}.reward-history tr:last-child td{border-bottom:0}.reward-history .num{text-align:right}.reward-history .plus{color:#147340;font-weight:800}.reward-history .minus{color:#bd3e45;font-weight:800}.reward-history .bal{font-weight:800;color:#15344e}
@media(max-width:560px){.app-top{height:64px;padding-inline:16px}.app-main{padding:17px 13px 28px}.welcome-card{min-height:190px;padding:22px}.water-orb{width:58px;height:58px;border-radius:19px}.water-orb svg{width:30px;height:30px}.balance-strip{margin-inline:10px;padding:15px}.quick-main{padding-inline:15px}.favorite-card{align-items:flex-start}.favorite-card button{align-self:center}.choice-grid{grid-template-columns:1fr}.checkout-actions{grid-template-columns:1fr}.success-details{grid-template-columns:1fr}.success-details>div:nth-child(odd){border-right:0}.success-details>div:nth-last-child(2){border-bottom:1px solid #e8eff3}.success-actions{grid-template-columns:1fr}.track-labels{font-size:7px}.app-main .notice{top:74px}.bottom-nav{padding:6px}.bottom-nav button{min-height:50px;font-size:8px}.bottom-nav svg{width:18px;height:18px}.reward-card{padding:19px}.reward-points{font-size:29px}.reward-lifetime{grid-template-columns:1fr 1fr}}