/* Template A order dialogs; task and order-list layouts stay intact. */
:root #app .order-ui-unavailable-popup .u-popup__content{background:transparent!important;padding:0!important;width:calc(100% - 64px)!important;max-width:300px!important;border-radius:22px!important;overflow:hidden}
#app .order-ui-unavailable{position:relative;box-sizing:border-box;padding:28px 22px;background:#fff;color:#272930;border-radius:22px;box-shadow:0 18px 48px #161a1826;text-align:center;font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;max-height:calc(100dvh - 40px);overflow:auto}
#app .order-ui-unavailable-symbol{display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin:0 auto 16px;background:#f2f3f5;color:#50545d;border-radius:16px}
#app .order-ui-unavailable-symbol .order-ui-icon{width:26px;height:26px}
#app .order-ui-unavailable h2{margin:0;font-size:19px;font-weight:650;line-height:1.45;overflow-wrap:anywhere}
:root #app .order-ui-popup .u-popup__content{background:transparent!important;padding:0!important;width:calc(100% - 32px)!important;max-width:418px!important;border-radius:22px!important;overflow:hidden}
#app .order-ui-dialog{box-sizing:border-box;width:100%;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;padding:18px;background:white;color:#272930;border-radius:22px;box-shadow:0 14px 40px #161a1824;font:13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif}
#app .order-ui-dialog *{box-sizing:border-box}
#app .order-ui-icon{width:22px;height:22px;flex-shrink:0;display:block}
#app .order-ui-top{display:flex;align-items:center;justify-content:space-between;min-height:32px;font-size:11px;color:#8c9087;margin-bottom:8px;flex-shrink:0}
#app .order-ui-top>div{display:flex;align-items:center;gap:6px}
#app .order-ui-vip{font-size:10px;font-weight:600;line-height:1.4;padding:5px 8px;border:1px solid #e1e4dc;border-radius:8px;background:#f7f8f4;color:#505749;max-width:120px;overflow-wrap:anywhere}
#app .order-ui-close{border:0;min-width:36px;min-height:36px;display:flex;align-items:center;justify-content:center;background:transparent;color:#8b9085;border-radius:10px;cursor:pointer}
#app .order-ui-close .order-ui-icon{width:18px;height:18px}
#app .order-ui-body{overflow-y:auto;min-height:0;overscroll-behavior:contain;scrollbar-width:thin;padding:0 2px}
#app .order-ui-status{text-align:center;margin:0 0 20px}
#app .order-ui-check{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#f1f3ee;color:#4f5d45;margin:0 auto 10px}
#app .order-ui-status h2{font-size:20px;font-weight:650;line-height:1.4;margin:0 0 6px;color:#272930}
#app .order-ui-status p{font-size:11px;color:#777b74;margin:0}
#app .order-ui-product{display:flex;align-items:flex-start;gap:12px;padding:12px;background:#f7f8f5;border-radius:12px}
#app .order-ui-image{position:relative;flex:0 0 64px;width:64px;height:64px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#a4ab9b}
#app .order-ui-image>img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:100%;padding:5px;background:white;object-fit:contain!important;border-radius:inherit;display:block}
#app .order-ui-product-copy{flex:1;min-width:0}
#app .order-ui-name summary{list-style:none;cursor:pointer}
#app .order-ui-name summary::-webkit-details-marker{display:none}
#app .order-ui-name h3{font-size:13px;line-height:1.55;font-weight:550;margin:0;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;white-space:normal;word-break:normal}
#app .order-ui-name[open] h3{display:block;-webkit-line-clamp:unset;overflow:visible}
#app .order-ui-name summary>span{font-size:10px;color:#7b8271;line-height:1.4;display:block;margin-top:5px}
#app .order-ui-name summary>.order-ui-collapse{display:none}
#app .order-ui-name[open] summary>.order-ui-expand{display:none}
#app .order-ui-name[open] summary>.order-ui-collapse{display:block}
#app .order-ui-product-copy>p{font-size:11px;color:#727969;margin:8px 0 3px}
#app .order-ui-product-copy>small{font-size:10px;color:#8b9281;overflow-wrap:anywhere}
#app .order-ui-amount{padding:20px 0 16px}
#app .order-ui-amount>span{font-size:11px;color:#7b7e73}
#app .order-ui-amount>p{margin:7px 0 0;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
#app .order-ui-amount strong{font-size:32px;font-weight:650;line-height:1.25;font-variant-numeric:tabular-nums;letter-spacing:-.8px;overflow-wrap:anywhere;max-width:100%}
#app .order-ui-amount small{font-size:11px;color:#7b7e73}
#app .order-ui-metric{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid #e8e8e5}
#app .order-ui-metric>span{font-size:11px;color:#7b7e73;min-width:0;overflow-wrap:anywhere}
#app .order-ui-metric strong{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;max-width:65%;text-align:right}
#app .order-ui-details{border-top:1px solid #e8e8e5;text-align:left}
#app .order-ui-details summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:42px;font-size:11px;color:#7b7e73}
#app .order-ui-details summary::-webkit-details-marker{display:none}
#app .order-ui-details summary>span{font-size:16px}
#app .order-ui-details[open] summary>span{transform:rotate(45deg)}
#app .order-ui-details dl{margin:0;padding-bottom:12px;font-size:11px}
#app .order-ui-details dl>div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px;margin-top:8px;line-height:1.6}
#app .order-ui-details dt{color:#7b7e73}
#app .order-ui-details dd{margin:0;overflow-wrap:anywhere;text-align:right;white-space:normal}
#app .order-ui-rating{border:0;border-top:1px solid #e8e8e5;min-width:0;padding:8px 0 0;margin:0}
#app .order-ui-rating legend{font-size:11px;color:#7b7e73;padding:0 8px 0 0}
#app .order-ui-rating>div{display:flex;gap:2px}
#app .order-ui-star{display:block;min-width:38px;min-height:38px;border:0;background:transparent;border-radius:9px;font:24px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#bcc2b2;cursor:pointer}
#app .order-ui-star.selected{color:#4b5542}
#app .order-ui-actions{display:grid;grid-template-columns:1fr 1.25fr;gap:10px;padding-top:16px;margin-top:8px;border-top:1px solid #eeeee9;flex-shrink:0}
#app .order-ui-actions button{min-height:46px;border-radius:12px;padding:10px;font:600 13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;cursor:pointer;white-space:normal;overflow-wrap:anywhere}
#app .order-ui-later{background:#f5f5f2;color:#60635e;border:1px solid #e8e8e5}
#app .order-ui-submit{background:#242528;color:#fff;border:1px solid #242528}
#app .order-ui-dialog button:focus-visible,#app .order-ui-dialog summary:focus-visible{outline:2px solid #8a937f;outline-offset:2px}
@media(max-width:360px){#app .order-ui-dialog{padding:14px}#app .order-ui-image{width:56px;height:56px;flex-basis:56px}#app .order-ui-product{gap:10px;padding:10px}#app .order-ui-name h3{font-size:12px}#app .order-ui-status{margin-bottom:16px}}
/* Only an unpaid matched order whose actual amount exceeds its balance receives this treatment. */
#app .order-ui-lucky{position:relative;isolation:isolate}
#app .order-ui-lucky:before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:22px;padding:1.4px;background:conic-gradient(from 45deg,#c5d8dc,#afa5dc,#e8c6d5,#dad9ba,#b7d7cf,#c5d8dc);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.5;animation:order-lucky-edge 5s ease-in-out infinite;z-index:3}
#app .order-ui-lucky:after{content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;box-shadow:inset 0 0 17px #c3bbdd1c;animation:order-lucky-edge 5s ease-in-out infinite;z-index:2}
#app .order-ui-lucky-badge{font-size:10px;color:#535951;background:#f7f8f5;border:1px solid #e4e6e2;border-radius:7px;padding:4px 7px;white-space:nowrap}
#app .order-ui-lucky .order-ui-check{position:relative;isolation:isolate;background:linear-gradient(135deg,#3b3c42,#111216 65%,#292a31);color:#f6f5ff;box-shadow:0 3px 10px #16182124}
#app .order-ui-lucky .order-ui-check .order-ui-icon{position:relative;filter:drop-shadow(0 0 3px #e3daff70);animation:order-lucky-glint 3.5s ease-in-out infinite}
#app .order-ui-lucky .order-ui-check:before{content:"";position:absolute;inset:-1px;border-radius:50%;padding:1.2px;background:conic-gradient(#7adae0,#a89be9,#dda7cb,#e6d1a5,#9acfb9,#7adae0);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.75;animation:order-lucky-turn 8s linear infinite;pointer-events:none}
#app .order-ui-lucky-halo{position:absolute;inset:-14px;border-radius:50%;background:conic-gradient(#58dce0,#9e84f4,#e99fc7,#ead8a0,#8ad5bc,#58dce0);filter:blur(12px);opacity:.2;z-index:-1;animation:order-lucky-aura 7s linear infinite;pointer-events:none}
#app .order-ui-lucky-shortfall{border:1px solid #e2e5de;border-radius:12px;background:#f5f6f3;padding:11px 12px;margin-bottom:14px}
#app .order-ui-lucky-shortfall>div{display:flex;align-items:center;justify-content:space-between;gap:10px}
#app .order-ui-lucky-shortfall>div>span{font-size:11px;color:#6c7464}
#app .order-ui-lucky-shortfall strong{font-size:20px;font-weight:650;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;text-align:right}
#app .order-ui-lucky-shortfall small{font-size:10px;font-weight:400;color:#777d70}
#app .order-ui-lucky-shortfall p{font-size:10px;color:#828879;margin:5px 0 0;line-height:1.6;overflow-wrap:anywhere}
#app .order-ui-lucky-particles{position:absolute;inset:2px;overflow:hidden;border-radius:20px;pointer-events:none;z-index:4;opacity:.8}
#app .order-ui-lucky-particle{position:absolute;left:var(--spark-x);top:var(--spark-y);width:var(--spark-size);height:var(--spark-size);border-radius:50%;background:radial-gradient(circle,#fff 0 16%,var(--spark-color) 40%,transparent 74%);box-shadow:0 0 7px 2px var(--spark-color);animation:order-lucky-rise var(--spark-duration) ease-in-out infinite;animation-delay:var(--spark-delay);will-change:transform,opacity;opacity:0}
#app .order-ui-lucky-particle:nth-child(4n){background:transparent;box-shadow:none;width:11px;height:11px;filter:drop-shadow(0 0 4px var(--spark-color))}
#app .order-ui-lucky-particle:nth-child(4n):before,#app .order-ui-lucky-particle:nth-child(4n):after{content:"";position:absolute;background:linear-gradient(transparent,var(--spark-color),#fff,var(--spark-color),transparent);border-radius:50%}
#app .order-ui-lucky-particle:nth-child(4n):before{left:5px;top:0;width:1px;height:11px}
#app .order-ui-lucky-particle:nth-child(4n):after{left:0;top:5px;width:11px;height:1px;background:linear-gradient(90deg,transparent,var(--spark-color),#fff,var(--spark-color),transparent)}
@keyframes order-lucky-rise{0%{opacity:0;transform:translate(0,28px) scale(.5)}20%{opacity:.65}40%{opacity:.95;transform:translate(var(--spark-drift),-40px) scale(1.1)}57%{opacity:.25}69%{opacity:.75}100%{opacity:0;transform:translate(0,-150px) scale(.4)}}
@keyframes order-lucky-edge{0%,100%{opacity:.3;filter:hue-rotate(0deg)}50%{opacity:.75;filter:hue-rotate(35deg)}}
@keyframes order-lucky-glint{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes order-lucky-turn{to{transform:rotate(360deg)}}
@keyframes order-lucky-aura{0%{transform:rotate(0deg) scale(.9);opacity:.16}50%{transform:rotate(180deg) scale(1.08);opacity:.27}100%{transform:rotate(360deg) scale(.9);opacity:.16}}
@media(prefers-reduced-motion:reduce){#app .order-ui-lucky *,#app .order-ui-lucky:before,#app .order-ui-lucky:after,#app .order-ui-lucky .order-ui-check:before{animation:none!important}#app .order-ui-lucky-particles{display:none}}

/* Lower the lucky-order symbol without moving the title or changing dialog height. */
#app .order-ui-lucky .order-ui-check{top:5px}