:root{color-scheme:dark;--bg:#0b101b;--panel:#121a29;--stroke:#263043;--blue:#397bff;--text:#f3f6fc;--muted:#8996ad;--soft:#b8c3d7;--safe-bottom:env(safe-area-inset-bottom,0px);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:#060a12;color:var(--text);font-size:14px;-webkit-font-smoothing:antialiased}button,input,a,summary{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a,summary{touch-action:manipulation}button{cursor:pointer}button{color:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid #92beff;outline-offset:4px}button:disabled{cursor:not-allowed;opacity:.5}[hidden]{display:none!important}.icon-defs{position:absolute;width:0;height:0;overflow:hidden}.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.app-shell{width:100%;max-width:480px;min-height:100dvh;margin:auto;background:var(--bg);position:relative;isolation:isolate;overflow-x:clip}.header{height:72px;display:flex;align-items:center;justify-content:space-between;padding:16px 24px}.brand{display:flex;align-items:center;gap:10px}.brand-mark{width:41px;height:43px;display:grid;place-items:center}.brand-mark img{width:43px;filter:drop-shadow(0 2px 8px #357cfb40)}.wordmark{font-size:22px;font-weight:850;letter-spacing:2px;line-height:1}.wordmark span{display:block;font-size:9px;font-weight:550;color:#8ba7cf;letter-spacing:5.5px;margin-top:6px}.help-button{height:40px;width:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--stroke);background:#121a29;color:#b9c8e0}.preview-label{font-size:10px;letter-spacing:.25px;color:#8b9ab2;display:flex;justify-content:center;align-items:center;gap:6px;padding:9px 12px;background:#121a26;border-block:1px solid #ffffff06}.preview-label>span{width:5px;height:5px;border-radius:50%;background:#8a9db8}main{padding:0 24px}.page{padding-bottom:256px}.hero{position:relative;padding:24px 0 18px;min-height:210px}.hero-copy{position:relative;z-index:2;pointer-events:none}.eyebrow{font-size:8px;font-weight:650;letter-spacing:1.4px;color:#90a4c5}.hero h1{font-size:35px;letter-spacing:-1.3px;line-height:1.15;margin:15px 0 12px;font-weight:730}.hero h1 em{font-style:normal;color:#86b5ff}.hero p{color:#8d9eb9;line-height:1.6;font-size:12px;margin:0}.hero-art{position:absolute;width:191px;height:204px;right:-17px;top:26px;z-index:1;background:radial-gradient(ellipse at 55% 52%,#205ad733 0,transparent 64%)}.hero-art>img{position:absolute;width:148px;top:30px;left:27px;transform:rotate(14deg);filter:drop-shadow(0 10px 15px #2359c745);animation:float 7s ease-in-out infinite}.orbit{position:absolute;width:191px;height:77px;border:1px solid #679eff20;border-radius:50%;top:72px;transform:rotate(-32deg)}.orbit-two{transform:rotate(43deg);height:94px;width:184px}.spark{position:absolute;color:#8bb9ff;font-size:17px}.spark-one{top:12px;right:15px}.spark-two{bottom:17px;left:17px;font-size:12px}.rate-line{padding:13px 0 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #242d3f;font-size:11px}.rate-line>span{display:flex;align-items:center;gap:7px;color:#a6b5ce}.status-dot{height:5px;width:5px;border-radius:50%;background:#7aabff}.rate-line strong{font-size:12px;font-weight:550}.rate-line strong span{margin:0 7px;color:#57647c}.form-section{padding-top:23px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.section-heading h2{font-size:16px;font-weight:650;letter-spacing:-.3px;margin:0}.step{font-size:10px;color:#65738b;font-variant-numeric:tabular-nums}.segmented{display:flex;background:#111826;padding:4px;border-radius:12px;border:1px solid #242d3f;gap:4px}.segmented button{width:50%;border:0;border-radius:8px;background:transparent;display:flex;align-items:center;justify-content:center;gap:8px;height:37px;color:#8b99b1;font-size:12px;transition:background .2s}.segmented .icon{width:16px;height:16px}.segmented button.selected{background:#23314b;color:#e4efff;box-shadow:0 1px 5px #0002}.recipient{display:flex;align-items:center;gap:10px;padding:16px 0 0;min-height:62px}.avatar{width:35px;height:35px;display:grid;place-items:center;background:linear-gradient(150deg,#244878,#152543);border:1px solid #5d92e333;border-radius:50%;font-size:15px;font-weight:600;color:#a3c9ff;flex-shrink:0}.recipient strong{font-size:12px;font-weight:550;display:block;margin-bottom:4px}.recipient span{font-size:10px;color:var(--muted)}.recipient-check{color:#759bd6;margin-left:auto;width:16px}.amount-section{padding-top:27px}.packages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.package{border:1px solid #293246;background:#131b29;border-radius:12px;padding:12px 2px;min-height:95px;display:flex;flex-direction:column;align-items:center;gap:6px;transition:border-color .18s,background .18s}.package>.icon{width:20px;height:20px;color:#809ac5;fill:#526d9c35}.package strong{font-size:15px;font-weight:650;white-space:nowrap}.package span{color:#8b9bb4;font-size:10px;white-space:nowrap}.package.selected{border-color:#568fff;background:linear-gradient(155deg,#204078,#162747);box-shadow:inset 0 0 0 1px #4f86ec20}.package.selected .icon{color:#a6ccff;fill:#80b2ff38}.package.selected span{color:#b9d2f9}.input-label{display:block;font-size:11px;color:#95a3b9;margin:17px 0 8px}.quantity-field,.username-field{display:flex;align-items:center;gap:11px;border:1px solid #2a3448;background:#121a29;border-radius:11px;height:50px;padding:0 14px}.quantity-field:focus-within,.username-field:focus-within{border-color:#648fd7;box-shadow:0 0 0 3px #346ce415}.quantity-field .icon{width:19px;color:#769bcc;fill:#4978b72a}.quantity-field input,.username-field input{width:100%;min-width:0;background:none;color:var(--text);border:0;outline:0;font-size:16px;font-weight:550}.quantity-field input:focus-visible,.username-field input:focus-visible{outline:0}.quantity-field>span{font-size:12px;color:#8696b0}.username-field>span{color:#6998e0}.username-field input{font-size:14px}.input-footer{display:flex;justify-content:space-between;gap:8px;font-size:9px;color:#7c8ca6;margin-top:8px}.field-error{font-size:11px;color:#ff9eab;margin:7px 0 0;line-height:1.5}.field-error:empty{display:none}.info-note{margin-top:24px;display:flex;gap:11px;align-items:center;padding:14px 0;border-top:1px solid #252e3f;border-bottom:1px solid #252e3f}.info-icon{color:#7c9cc9}.info-note strong{font-size:11px;font-weight:550}.info-note p{margin:4px 0 0;color:#8392aa;font-size:10px;line-height:1.5}.faq{margin-top:6px;color:#8c9bb4;font-size:11px}.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;cursor:pointer;min-height:46px}.faq summary::-webkit-details-marker{display:none}.faq .icon{height:14px}.faq[open] .icon{transform:rotate(90deg)}.faq p{line-height:1.7;margin:0 0 12px}.bottom-area{position:fixed;z-index:5;bottom:0;width:100%;max-width:480px;background:#0d1421f5;backdrop-filter:blur(20px);border-top:1px solid #283145;padding-bottom:var(--safe-bottom)}.checkout{padding:16px 24px 18px}.total-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.total-row>div:first-child>span{font-size:10px;color:#96a4bc}.total-row strong{display:block;font-size:28px;letter-spacing:-.7px;margin-top:3px;line-height:1.15;font-weight:650}.total-row strong small{font-size:21px;font-weight:450;color:#b8c7df}.total-meta{text-align:right;display:flex;flex-direction:column;gap:6px;max-width:58%;overflow-wrap:anywhere}.total-meta>span{font-size:12px}.total-meta small{font-size:10px;color:#8494b1}.primary-button{border:1px solid #78adff60;background:linear-gradient(105deg,#2e74f9,#477eff);height:48px;border-radius:12px;color:#fff;width:100%;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:15px;box-shadow:0 5px 20px #2165f221;transition:filter .2s,transform .15s}.primary-button:hover{filter:brightness(1.1)}.primary-button:active{transform:scale(.985)}.primary-button .icon{width:18px}.bottom-nav{height:67px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #222d40;padding:7px 18px 5px}.bottom-nav button{background:none;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#74849f;font-size:9px;font-weight:550;border-radius:10px;position:relative}.bottom-nav button.active{color:#88b5ff}.bottom-nav button.active:before{content:"";position:absolute;width:22px;height:2px;top:-8px;background:#76a8ff;border-radius:3px}.bottom-nav button.active .icon{fill:#6fa5ff20}.bottom-nav .icon{width:21px;height:21px}.inner-page{padding-top:32px;padding-bottom:105px;min-height:calc(100dvh - 115px)}.inner-page h1{font-size:30px;letter-spacing:-1px;margin:12px 0 8px}.page-subtitle{color:#8b9cb9;font-size:12px;margin:0}.empty-state{padding:50px 0 25px;text-align:center}.empty-art{position:relative;display:grid;place-items:center;margin:0 auto 28px;width:123px;height:123px;background:radial-gradient(ellipse,#254b804d,transparent 70%)}.empty-art>.icon{width:72px;height:72px;color:#849bbe;stroke-width:1}.empty-art img{width:51px;position:absolute;right:0;bottom:8px;transform:rotate(13deg)}.empty-state h2{font-size:18px;margin:0 0 10px}.empty-state p{font-size:12px;color:#8b9cb7;line-height:1.75;margin:0 0 23px}.secondary-button{display:flex;align-items:center;justify-content:center;gap:13px;background:#182841;color:#a7c8ff;border:1px solid #2f4668;border-radius:10px;padding:13px 17px;font-size:12px;font-weight:550;margin:auto}.secondary-button .icon{width:17px;height:17px}.text-button{display:block;margin:15px auto;border:0;background:none;color:#879cbd;font-size:11px;padding:12px;text-decoration:underline;text-underline-offset:4px}.order-card{padding:17px;border-radius:17px;background:#141e2e;border:1px solid #2a3b56;margin-top:20px}.order-top{display:flex;align-items:center;justify-content:space-between;gap:7px}.demo-tag{font-size:9px;color:#8ea1be}.badge{font-size:9px;background:#213c35;color:#98cbb7;border-radius:6px;padding:5px 7px}.order-product{display:flex;align-items:center;gap:10px;margin:22px 0}.order-product img{width:43px}.order-product h2{font-size:17px;margin:0 0 5px}.order-product p{font-size:10px;color:#8fa1be;margin:0}.order-product>strong{margin-left:auto;font-size:14px;white-space:nowrap}.order-timeline{display:flex;justify-content:space-between;border-top:1px solid #2b3a50;padding-top:16px;font-size:9px;color:#98b3d4;margin-bottom:22px}.order-timeline span{display:flex;align-items:center;gap:5px}.order-timeline i{width:5px;height:5px;border-radius:50%;background:#8cafdd}.order-card .secondary-button{width:100%}.profile-card{margin:26px 0 34px;display:flex;align-items:center;gap:15px}.avatar.large{width:59px;height:59px;font-size:24px}.profile-card h2{font-size:17px;margin:0 0 6px}.profile-card p{font-size:11px;line-height:1.6;color:#90a1bc;margin:0}.list-title{font-size:13px;font-weight:550;margin:0 0 14px}.link-list{border:1px solid #29354b;border-radius:14px;background:#121c2c;padding:0 14px}.link-list a{display:flex;gap:12px;align-items:center;padding:17px 0}.link-list a+a{border-top:1px solid #29354b}.list-icon{color:#96b9e8;display:grid;place-items:center;width:32px}.link-list strong{display:block;font-size:12px;font-weight:550}.link-list small{display:block;color:#8496b3;margin-top:5px;font-size:10px}.link-list a>.icon{margin-left:auto;width:15px;color:#7b8ba7}.family-card{margin-top:28px;padding:24px 20px;background:radial-gradient(ellipse at 100% 0,#274e8340,transparent 75%),#111b2b;border:1px solid #2b3a53;border-radius:16px}.family-card .eyebrow{font-size:7px}.family-card h2{font-size:21px;line-height:1.3;letter-spacing:-.5px;max-width:210px;margin:14px 0 22px}.family-tags{display:flex;gap:7px}.family-tags span{font-size:10px;border:1px solid #344057;border-radius:6px;padding:7px 10px;color:#8d9fb9}.family-tags .active{color:#a6c9ff;background:#24457680;border-color:#456799}.family-card p{font-size:10px;color:#8194b2;margin:20px 0 0}.profile-footnote{text-align:center;color:#5d708f;font-size:9px;margin-top:28px}dialog{position:fixed;inset:auto 0 0;border:1px solid #354866;border-bottom:0;border-radius:25px 25px 0 0;background:#111b2b;color:var(--text);width:100%;max-width:480px;padding:29px 24px calc(24px + var(--safe-bottom));margin:0 auto;max-height:90dvh;overflow:auto;box-shadow:0 -20px 100px #0005}dialog::backdrop{background:#030711b8;backdrop-filter:blur(5px)}.sheet-handle{position:absolute;top:10px;left:calc(50% - 18px);width:36px;height:4px;border-radius:5px;background:#3d4b60}.close-button{position:absolute;right:18px;top:22px;display:grid;place-items:center;border:0;border-radius:50%;width:33px;height:33px;background:#202d42;color:#a9b9d3}.close-button .icon{width:16px}.review-star{display:block;width:64px;transform:rotate(9deg);margin:0 0 20px}dialog h2{font-size:29px;letter-spacing:-.6px;margin:11px 0 7px}.sheet-subtitle{font-size:12px;color:#93a6c2;margin:0 0 27px}.review-details{margin:0;background:#0c1422;border-radius:12px;padding:5px 16px}.review-details>div{display:flex;justify-content:space-between;gap:15px;padding:14px 0;font-size:12px}.review-details dt{color:#8ea1bf}.review-details dd{margin:0;text-align:right;overflow-wrap:anywhere}.review-details .review-total{border-top:1px solid #293b55;font-size:17px;font-weight:600}.review-total dt{color:var(--text)}.preview-note{color:#899bb8;text-align:center;line-height:1.6;font-size:11px;padding:20px 0}@keyframes float{0%,100%{transform:translateY(0) rotate(14deg)}50%{transform:translateY(-5px) rotate(11deg)}}@media(min-width:700px){body{padding:24px 0;background:radial-gradient(ellipse at 50% 0,#102449 0,transparent 55%),#060a12}.app-shell{border:1px solid #28364d;border-radius:24px 24px 0 0;overflow:hidden;box-shadow:0 30px 120px #0008}.header{height:84px}.bottom-area{width:478px}dialog{bottom:24px;border-bottom:1px solid #354866;border-radius:24px}.hero{min-height:249px}.hero h1{font-size:39px}.hero-art{right:-1px;top:43px;width:211px}.hero-art>img{width:165px}.eyebrow{font-size:9px}}@media(max-width:360px){main{padding:0 18px}.header{padding-inline:18px}.checkout{padding-inline:18px}.hero h1{font-size:31px}.hero-art{width:162px;right:-15px;top:51px}.hero-art>img{width:125px;left:26px}.orbit{width:160px}.eyebrow{font-size:7px;letter-spacing:1px}.input-footer{font-size:8px}.package strong{font-size:14px}.recipient span{font-size:9px}.hero{min-height:210px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Short motion accents. Values and actions update immediately; motion is decorative. */
:root{--ease-out:cubic-bezier(.22,1,.36,1)}
.page:not([hidden]){animation:page-enter 320ms var(--ease-out)}
#checkout:not([hidden]){animation:checkout-enter 260ms var(--ease-out)}
#self-recipient:not([hidden]),#friend-recipient:not([hidden]),#sample-order:not([hidden]){animation:content-enter 260ms var(--ease-out)}
.segmented{position:relative;isolation:isolate}
.segmented:before{content:"";position:absolute;inset:4px auto 4px 4px;width:calc((100% - 12px)/2);border-radius:8px;background:#23314b;box-shadow:0 1px 5px #0002;z-index:-1;transition:transform 260ms var(--ease-out)}
.segmented.friend-selected:before{transform:translateX(calc(100% + 4px))}
.segmented button,.segmented button.selected{background:transparent;box-shadow:none;transition:color 180ms ease,transform 160ms var(--ease-out)}
.package{transition:background 180ms ease,border-color 180ms ease,box-shadow 180ms ease,transform 220ms var(--ease-out)}
.package .icon{transition:transform 260ms var(--ease-out),color 200ms ease}
.package.selected .icon{transform:translateY(-1px) rotate(-8deg) scale(1.08)}
.package:active{transform:scale(.96)}
.bottom-nav{position:relative;--nav-index:0}
.bottom-nav:before{content:"";position:absolute;top:-1px;left:18px;width:calc((100% - 36px)/3);height:2px;background:linear-gradient(90deg,transparent calc(50% - 11px),#76a8ff calc(50% - 11px),#76a8ff calc(50% + 11px),transparent calc(50% + 11px));transform:translateX(calc(var(--nav-index)*100%));transition:transform 300ms var(--ease-out)}
.bottom-nav button.active:before{display:none}
.bottom-nav button{transition:color 180ms ease}
.bottom-nav .icon{transition:transform 260ms var(--ease-out),fill 200ms ease}
.bottom-nav button.active .icon{transform:translateY(-2px)}
.help-button,.secondary-button,.close-button,.link-list a{transition:background 180ms ease,border-color 180ms ease,transform 180ms var(--ease-out)}
.help-button:active,.secondary-button:active,.close-button:active{transform:scale(.96)}
.primary-button .icon{transition:transform 220ms var(--ease-out)}
.primary-button:active .icon{transform:translateX(4px)}
.hero-art .spark{animation:star-breathe 6s ease-in-out infinite}
.hero-art .spark-two{animation-delay:-3s}
.orbit{animation:orbit-breathe 8s ease-in-out infinite}
.orbit-two{animation-delay:-4s}
.field-error:not(:empty){animation:content-enter 200ms var(--ease-out)}
.faq .icon{transition:transform 200ms var(--ease-out)}
.faq[open] p{animation:content-enter 240ms var(--ease-out)}
dialog[open]::backdrop{animation:backdrop-enter 220ms ease both}
dialog.closing::backdrop{animation:backdrop-exit 160ms ease both}
@media(hover:hover){.package:hover{transform:translateY(-2px);border-color:#5983bb}.help-button:hover,.secondary-button:hover{background:#243856;border-color:#5983bb}.primary-button:hover .icon{transform:translateX(3px)}.link-list a:hover{background:#1b294044}}
@keyframes page-enter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes content-enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes checkout-enter{from{opacity:.4;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes star-breathe{0%,100%{opacity:.45;scale:.85}50%{opacity:.95;scale:1.08}}
@keyframes orbit-breathe{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes backdrop-enter{from{opacity:0}to{opacity:1}}
@keyframes backdrop-exit{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.app-message{margin:12px 24px;padding:12px 14px;background:#281f2b;border:1px solid #654457;border-radius:12px;color:#f3c8d8;font-size:12px;line-height:1.6;overflow-wrap:anywhere}.subscription-banner{margin:15px 24px;padding:18px;background:#17243b;border:1px solid #3c557c;border-radius:14px}.subscription-banner strong{font-size:15px}.subscription-banner p{font-size:12px;line-height:1.6;color:#adbeda}.subscription-banner .text-button{margin-bottom:0}.order-card{width:100%;color:inherit;text-align:left;cursor:pointer}.order-card:focus-visible{outline:2px solid #92beff}.order-top{flex-wrap:wrap}.order-card .badge{max-width:100%;line-height:1.6}.order-card .order-product{margin-bottom:5px}.orders-time{font-size:10px;color:#8398b6}.order-product p{overflow-wrap:anywhere}.order-product>div{min-width:0}.badge.pending{background:#293951;color:#b4ceec}.badge.problem{background:#443139;color:#edb9c7}#check-payment{width:100%;margin-top:12px}.primary-button[aria-busy=true]{opacity:.65;cursor:wait}#review-notice{white-space:pre-line}.hero-art{pointer-events:none}.empty-state p{line-height:1.6}.page{padding-bottom:calc(256px + var(--safe-bottom))}:root{--safe-bottom:max(env(safe-area-inset-bottom,0px),var(--tg-content-safe-area-inset-bottom,0px))}.header{padding-top:max(16px,var(--tg-content-safe-area-inset-top,0px))}.app-message,.subscription-banner{position:relative;z-index:2}

/* Ambient hero motion: compositor-only transforms and opacity. */
.hero-art{isolation:isolate;pointer-events:none}
.hero-art::before{content:"";position:absolute;inset:16px 0 3px;border-radius:50%;background:radial-gradient(ellipse,#387dff30 0,#2860ce16 42%,transparent 70%);z-index:-1;opacity:.65;animation:hero-halo 8s ease-in-out infinite}
.hero-art>img{animation:hero-float 8s ease-in-out infinite;transform-origin:50% 55%}
.hero-art .orbit-one{animation:hero-orbit-one 13s ease-in-out infinite}
.hero-art .orbit-two{animation:hero-orbit-two 16s ease-in-out infinite;animation-delay:-5s}
.hero-art .spark{animation:hero-spark 7s ease-in-out infinite}
.hero-art .spark-two{animation-duration:9s;animation-delay:-4s}
@keyframes hero-float{0%,100%{transform:translate3d(-2px,4px,0) rotate(14deg)}50%{transform:translate3d(3px,-9px,0) rotate(8deg)}}
@keyframes hero-halo{0%,100%{opacity:.5;transform:scale(.9) translateY(4px)}50%{opacity:.95;transform:scale(1.08) translateY(-4px)}}
@keyframes hero-orbit-one{0%,100%{opacity:.5;transform:rotate(-38deg) scale(.97)}50%{opacity:.9;transform:rotate(-24deg) scale(1.02)}}
@keyframes hero-orbit-two{0%,100%{opacity:.45;transform:rotate(48deg) scale(1.02)}50%{opacity:.85;transform:rotate(35deg) scale(.96)}}
@keyframes hero-spark{0%,100%{opacity:.4;transform:translateY(3px) scale(.86) rotate(-8deg)}50%{opacity:.9;transform:translateY(-4px) scale(1.08) rotate(8deg)}}
@media(prefers-reduced-motion:reduce){.hero-art::before{opacity:.65}.hero-art,.hero-art *,.hero-art::before{animation:none!important}}

/* Feedback stays separate from payment/delivery state; motion never delays actions. */
.orders-status{font-size:11px;line-height:1.6;color:#8fa3c2;margin:12px 0}
.orders-status:empty{display:none}
.orders-loading:not([hidden]){display:grid;gap:12px;margin-top:20px;animation:content-enter 240ms ease 140ms backwards}
.order-skeleton{padding:20px;border:1px solid #29354b;border-radius:16px;background:#111b2b}
.skeleton{display:block;position:relative;overflow:hidden;background:#202d42;border-radius:6px}
.skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent,#b4d4ff12,transparent);transform:translateX(-100%);animation:skeleton-sweep 1.8s ease-in-out infinite}
.skeleton-heading{width:64%;height:11px;margin-bottom:24px}
.skeleton-row{display:flex;align-items:center;gap:14px}
.skeleton-star{width:40px;height:40px;border-radius:12px;flex-shrink:0}
.skeleton-description{width:38%;height:25px}
.skeleton-price{width:22%;height:16px;margin-left:auto}
.order-skeleton:nth-child(2) .skeleton::after{animation-delay:120ms}
.order-skeleton:nth-child(3) .skeleton::after{animation-delay:240ms}
#refresh-orders[aria-busy=true]::after{content:"";display:inline-block;width:11px;height:11px;margin-left:9px;border:1.5px solid #779bd44d;border-top-color:#aacaff;border-radius:50%;vertical-align:-2px;animation:feedback-spin 900ms linear infinite}
.review-art{position:relative;width:64px;height:64px;margin-bottom:20px}
.review-art .review-star{margin:0}
.delivery-success{width:64px;height:64px;position:relative}
.delivery-check{width:64px;height:64px;overflow:visible}
.delivery-check circle{fill:#153c38;stroke:#64ddbc;stroke-opacity:.35;stroke-width:1.5}
.delivery-check path{fill:none;stroke:#8deed1;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:42;stroke-dashoffset:0}
.delivery-spark{position:absolute;top:25px;left:26px;color:#b7d9ff;font-size:15px;opacity:0;pointer-events:none;--dx:-38px;--dy:-24px}
.delivery-spark:nth-of-type(2){--dx:12px;--dy:-38px;font-size:10px}
.delivery-spark:nth-of-type(3){--dx:43px;--dy:-12px}
.delivery-spark:nth-of-type(4){--dx:34px;--dy:34px;font-size:11px}
.delivery-spark:nth-of-type(5){--dx:-31px;--dy:36px;font-size:9px}
.celebrate .delivery-check{animation:delivery-pop 480ms var(--ease-out) both}
.celebrate .delivery-check path{animation:delivery-draw 420ms ease 120ms both}
.celebrate .delivery-spark{animation:delivery-burst 950ms var(--ease-out) 120ms both}
@keyframes skeleton-sweep{to{transform:translateX(100%)}}
@keyframes feedback-spin{to{transform:rotate(360deg)}}
@keyframes delivery-pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
@keyframes delivery-draw{from{stroke-dashoffset:42}to{stroke-dashoffset:0}}
@keyframes delivery-burst{0%{opacity:0;transform:translate(0,0) scale(.5)}25%{opacity:.85}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.8) rotate(25deg)}}
@media(prefers-reduced-motion:reduce){.skeleton::after,.delivery-spark{display:none}.delivery-check,.delivery-check path,#refresh-orders::after{animation:none!important}}

/* Keep native mobile editing clear of the fixed checkout panel. */
.username-field input{font-size:16px}
.quantity-field input,.username-field input{scroll-margin-block:100px}
.keyboard-done{display:none;flex-shrink:0;border:0;border-left:1px solid #34445f;background:transparent;color:#a8cbff;font-size:12px;font-weight:600;padding:8px 0 8px 10px;min-height:36px}
.quantity-field:focus-within .keyboard-done,.username-field:focus-within .keyboard-done{display:block}
@media(hover:none) and (pointer:coarse){
  .editing-input .bottom-area{visibility:hidden;pointer-events:none}
}