.sf{margin:0;display:flex;justify-content:center;font-family:var(--font-body)}.sf .sf-phone{width:288px;border:8px solid var(--color-inkdeep);border-radius:3rem;background:var(--color-inkdeep);box-shadow:0 1px 2px #15130f0d,0 40px 70px -34px #15130f80}.sf .sf-screen{position:relative;overflow:hidden;border-radius:2.5rem;background:var(--color-paper);padding:1.4rem 1.15rem 1.5rem;min-height:540px;isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(#fff,#000);transform:translateZ(0)}.sf .sf-bar{display:flex;align-items:center;gap:.5rem;padding-bottom:1.1rem}.sf .sf-bar-logo{width:auto;height:1.4rem;display:block}.sf .sf-bar-name{font-size:.8rem;font-weight:700;color:var(--color-inkdeep);letter-spacing:-.01em}.sf .sf-cam{position:absolute;inset:0;overflow:hidden;background:#b3a88f;display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .4s var(--ease-soft)}.sf.is-resolved .sf-cam{opacity:0;pointer-events:none}.sf .sf-cam-scene{position:absolute;inset:-14px;z-index:0;filter:blur(5px);background-color:#b8ac93;background-image:linear-gradient(180deg,#ddc89d,#c6ac7d),linear-gradient(180deg,#d2ccba,#b5ae99),linear-gradient(180deg,#c8ab79,#ad8e60),linear-gradient(180deg,#d8d1c0,#bdb5a2),linear-gradient(180deg,#ceb489,#b4996b),linear-gradient(180deg,#ccc09b,#b2a579),linear-gradient(180deg,#4a3a2229,#2e24149e),linear-gradient(180deg,#4a3a2229,#2e24149e),linear-gradient(180deg,#ccc1a9,#8f8568);background-repeat:no-repeat;background-size:24% 22%,22% 22%,26% 22%,24% 24%,22% 24%,26% 24%,100% 7px,100% 7px,100% 100%;background-position:9% 36%,43% 36%,74% 36%,11% 79%,45% 79%,78% 79%,0 52%,0 86%,0 0}.sf .sf-cam:after{content:"";position:absolute;inset:0;z-index:1;box-shadow:inset 0 0 65px #0000005c;pointer-events:none}.sf .sf-dot{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:92px;height:92px;border-radius:.55rem;background:#fff;box-shadow:0 8px 22px #00000047}.sf .sf-qr{width:66px;height:66px;color:#16150f}.sf .sf-qr-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:24px;height:24px;object-fit:contain;background:#fff;border-radius:999px;padding:2px}.sf .sf-reticle{position:absolute;z-index:2;width:128px;height:128px;border-radius:.9rem;background:linear-gradient(var(--rc) 0 0) 0 0,linear-gradient(var(--rc) 0 0) 0 0,linear-gradient(var(--rc) 0 0) 100% 0,linear-gradient(var(--rc) 0 0) 100% 0,linear-gradient(var(--rc) 0 0) 0 100%,linear-gradient(var(--rc) 0 0) 0 100%,linear-gradient(var(--rc) 0 0) 100% 100%,linear-gradient(var(--rc) 0 0) 100% 100%;--rc: rgba(255,255,255,.9);background-repeat:no-repeat;background-size:22px 3px,3px 22px,22px 3px,3px 22px,22px 3px,3px 22px,22px 3px,3px 22px;transition:background-color .3s,width .4s var(--ease-soft),height .4s var(--ease-soft)}.sf.is-scanning .sf-reticle{animation:sf-focus 1.15s var(--ease-soft) infinite}.sf.is-locked .sf-reticle{--rc: #35c47a;width:108px;height:108px}@keyframes sf-focus{0%,to{width:138px;height:138px}50%{width:120px;height:120px}}.sf .sf-cam-label{position:absolute;z-index:2;bottom:1.9rem;font-size:.74rem;font-weight:600;letter-spacing:.02em;color:#ffffffeb;text-shadow:0 1px 3px rgba(0,0,0,.4)}.sf.is-locked .sf-cam-label{color:#8ff0bd}.sf .sf-body{opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease-soft),transform .5s var(--ease-soft)}.sf.is-resolved .sf-body{opacity:1;transform:none}.sf .sf-product{display:flex;align-items:center;gap:.7rem;padding:.75rem;border-radius:.9rem;background:#fff;border:1px solid var(--color-line)}.sf .sf-thumb{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;border-radius:.6rem;background:var(--color-cream);color:var(--color-inkdeep)}.sf .sf-product-text{flex:1;min-width:0;display:flex;flex-direction:column}.sf .sf-product-name{font-size:.85rem;font-weight:700;color:var(--color-inkdeep)}.sf .sf-product-meta{font-size:.72rem;color:var(--color-muted);margin-top:.1rem}.sf .sf-check{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.3rem;height:1.3rem;border-radius:999px;background:var(--color-green);color:#fff;opacity:0;transform:scale(.4);transition:opacity .3s,transform .3s var(--ease-soft)}.sf.show-check .sf-check{opacity:1;transform:none}.sf .sf-card{margin-top:1.5rem;border-radius:.9rem;background:#fff;border:1px solid var(--color-line);padding:.9rem}.sf .sf-card-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.sf .sf-card-label{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;font-weight:700;color:var(--color-inkdeep);white-space:nowrap}.sf .sf-ico{width:1.05rem;height:1.05rem;color:var(--color-muted)}.sf .sf-onhand{min-width:1.5rem;text-align:center;font-size:1.3rem;font-weight:800;line-height:1;color:var(--color-inkdeep)}.sf .sf-stepper{display:flex;align-items:center;gap:.5rem}.sf .sf-step{display:flex;align-items:center;justify-content:center;width:1.55rem;height:1.55rem;border-radius:999px;border:1px solid var(--color-line);color:var(--color-inkdeep);font-size:1rem;line-height:1;flex-shrink:0}.sf .sf-step--minus{transition:transform var(--dur-quick) var(--ease-soft),background var(--dur-quick),border-color var(--dur-quick),color var(--dur-quick)}.sf .sf-step--minus.pressing{background:var(--color-inkdeep);border-color:var(--color-inkdeep);color:#fff;transform:scale(.85)}.sf .sf-dial{padding-top:1.55rem}.sf .sf-track{position:relative;height:12px;border-radius:999px;background:#eceae3}.sf .sf-fill{height:100%;border-radius:999px;background:var(--color-green);transition:width .9s var(--ease-soft),background .5s var(--ease-soft)}.sf.is-low .sf-fill{background:var(--color-accent)}.sf .sf-min{position:absolute;top:-4px;bottom:-4px;left:62.5%;border-left:2px dashed #9a978c}.sf .sf-min em{position:absolute;top:-1.15rem;left:50%;transform:translate(-50%);font-size:.58rem;font-weight:700;font-style:normal;text-transform:uppercase;letter-spacing:.03em;color:var(--color-muted);white-space:nowrap}.sf .sf-dial-foot{display:flex;align-items:center;justify-content:space-between;margin-top:.55rem}.sf .sf-status{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:700;color:#1f9d57;transition:color .4s}.sf .sf-status-dot{width:.5rem;height:.5rem;border-radius:999px;background:var(--color-green);transition:background .4s}.sf.is-low .sf-status{color:var(--color-accent)}.sf.is-low .sf-status-dot{background:var(--color-accent)}.sf .sf-par{font-size:.7rem;color:var(--color-muted)}.sf .sf-field{display:inline-flex;align-items:center;justify-content:center;min-width:2.1rem;padding:.22rem .55rem;border:1px solid var(--color-line);border-radius:.5rem;font-size:1.1rem;font-weight:800;color:var(--color-inkdeep);transition:border-color .3s,box-shadow .3s,background .3s}.sf.is-typing .sf-field{border-color:#1f9d57;box-shadow:0 0 0 3px var(--color-greensoft)}.sf.show-done .sf-field{border-color:#1f9d57;background:var(--color-greensoft)}.sf .sf-hint{overflow:hidden;max-height:0;opacity:0;margin-top:0;font-size:.74rem;color:var(--color-muted);transition:max-height .4s var(--ease-soft),opacity .35s,margin .4s}.sf.show-hint .sf-hint{max-height:22px;opacity:1;margin-top:.5rem}.sf .sf-hint strong{color:var(--color-inkdeep);font-weight:700}.sf .sf-done{display:flex;align-items:center;gap:.4rem;overflow:hidden;max-height:0;opacity:0;margin-top:0;padding:0 .75rem;border-radius:.75rem;font-size:.82rem;font-weight:800;color:#1f9d57;background:var(--color-greensoft);transition:max-height .45s var(--ease-soft),opacity .4s,margin .45s,padding .45s}.sf.show-done .sf-done{max-height:48px;opacity:1;margin-top:1.5rem;padding:.6rem .85rem}@media(prefers-reduced-motion:reduce){.sf .sf-reticle{animation:none!important}.sf .sf-body,.sf .sf-cam,.sf .sf-check,.sf .sf-fill,.sf .sf-status,.sf .sf-hint,.sf .sf-done,.sf .sf-field{transition:none!important}}