/* =====================================================================
 * POS (retail) hero stage: the till at a shop counter.
 * template-parts/stages/pos.php, played by assets/engine.js.
 *
 * Built as objects, not cards: a counter slab, a tablet till with real
 * thickness (stacked layers) on a stand (stacked discs and a box neck), and
 * a receipt printer (a box) whose paper rises out of the slot. Floating
 * panels (.sp) carry the data: inventory, today's takings, the branch.
 *
 * Coordinates are the 620 x 520 .stage-3d box; z is toward the viewer.
 * ===================================================================== */

.stage-pos .stage-3d{--ps-ease:cubic-bezier(.2,.7,.2,1)}

/* ---------- Ambient light behind the till ---------- */
.stage-pos .ps-halo{position:absolute;left:-60px;top:-40px;width:620px;height:520px;border-radius:50%;transform:translateZ(-260px);
  background:radial-gradient(closest-side,rgba(47,125,246,.34),rgba(47,125,246,.1) 55%,transparent)}

/* ---------- Generic box: faces around a centre (--w, --h, --d) ---------- */
.stage-pos .ps-bx{position:absolute;width:var(--w);height:var(--h);transform-style:preserve-3d}
.stage-pos .ps-bx>i{position:absolute;display:block;backface-visibility:hidden}
.stage-pos .ps-bx>.f{left:0;top:0;width:100%;height:100%;transform:translateZ(calc(var(--d) / 2))}
.stage-pos .ps-bx>.r,.stage-pos .ps-bx>.l{top:0;height:100%;width:var(--d);left:calc(50% - var(--d) / 2)}
.stage-pos .ps-bx>.r{transform:rotateY(90deg) translateZ(calc(var(--w) / 2))}
.stage-pos .ps-bx>.l{transform:rotateY(-90deg) translateZ(calc(var(--w) / 2))}
.stage-pos .ps-bx>.t{left:0;width:100%;height:var(--d);top:calc(50% - var(--d) / 2);transform:rotateX(90deg) translateZ(calc(var(--h) / 2))}

/* ---------- Counter ---------- */
.stage-pos .ps-ctr{position:absolute;left:-100px;top:530px;width:820px;height:0;transform-style:preserve-3d}
.stage-pos .ps-ctr>i{position:absolute;left:0;top:0;width:820px;display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 84%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 84%,transparent)}
/* The top lies flat: its top edge at the back (z -160), its bottom edge at the
   front (z 110). x here is stage x + 100, y is z + 160. */
.stage-pos .ps-ctr-t{height:270px;transform-origin:0 0;transform:translateZ(-160px) rotateX(90deg);
  background:
    radial-gradient(92px 46px at 310px 138px,rgba(0,0,0,.7),transparent 72%),
    radial-gradient(86px 66px at 615px 186px,rgba(0,0,0,.65),transparent 72%),
    radial-gradient(330px 170px at 310px 196px,rgba(47,125,246,.42),transparent 72%),
    radial-gradient(140px 90px at 615px 200px,rgba(90,160,255,.14),transparent 72%),
    linear-gradient(rgba(150,190,255,.07) 1px,transparent 1px) 0 0/100% 27px,
    linear-gradient(90deg,rgba(150,190,255,.055) 1px,transparent 1px) 0 0/41px 100%,
    linear-gradient(180deg,#09111F,#13203A 62%,#1E2D4A);
  box-shadow:inset 0 -2px 0 rgba(160,205,255,.75),inset 0 -14px 18px -12px rgba(120,180,255,.35)}
.stage-pos .ps-ctr-f{height:32px;transform:translateZ(110px);background:linear-gradient(180deg,#1A2539,#0B111E 55%,#060A12)}
.stage-pos .ps-ctr-f::after{content:"";position:absolute;left:0;right:0;top:10px;height:2px;border-radius:2px;background:#7DB7FF;box-shadow:0 0 12px 2px rgba(90,160,255,.7)}

/* ---------- Objects: rise into place (transform only; the faces fade) ---------- */
.stage-pos .ps-obj{transform-style:preserve-3d;animation:ps-rise 1.1s var(--ps-ease) both}
.stage-pos .ps-prn{animation-delay:.18s}
@keyframes ps-rise{from{translate:0 34px}}
.stage-pos .ps-obj i,.stage-pos .ps-face{animation:ps-fade .7s ease-out both}
@keyframes ps-fade{from{opacity:0}}

/* ---------- The till: base, neck, tablet ---------- */
/* Term box is the tablet (400 x 280); the counter top is at y 384 here. */
.stage-pos .ps-term{position:absolute;left:20px;top:186px;width:380px;height:266px}
.stage-pos .ps-base{position:absolute;left:0;top:0;transform-style:preserve-3d}
.stage-pos .ps-base i{position:absolute;display:block;left:115px;top:calc(269px - var(--k) * 2px);width:150px;height:150px;border-radius:50%;
  transform:translateZ(-22px) rotateX(90deg);background:#202A3C}
.stage-pos .ps-base i:nth-child(n+3){background:#2A3549}
.stage-pos .ps-base i:last-child{background:radial-gradient(circle at 50% 30%,#5D6C88,#36425A 58%,#283247);box-shadow:inset 0 0 0 1.5px rgba(190,215,255,.3),0 0 30px rgba(47,125,246,.35)}
.stage-pos .ps-neck{--w:30px;--h:192px;--d:18px;left:175px;top:140px;transform:translateZ(-30px)}
.stage-pos .ps-neck>.f{background:linear-gradient(90deg,#1B2333,#323D52 45%,#1B2333)}
.stage-pos .ps-neck>.r{background:#121926}
.stage-pos .ps-neck>.l{background:#0E141F}

.stage-pos .ps-tab{position:absolute;left:0;top:0;width:380px;height:266px;transform-style:preserve-3d;transform:rotateX(12deg)}
.stage-pos .ps-ly{position:absolute;inset:0;display:block;border-radius:24px;background:#1E2634;transform:translateZ(calc(-7px + var(--k) * 1.75px))}
.stage-pos .ps-ly:nth-child(n+5){background:#2A3446}
.stage-pos .ps-ly:nth-child(8){background:#3C485E}
.stage-pos .ps-face{position:absolute;inset:0;border-radius:24px;padding:12px;transform:translateZ(7.5px);background:#04070D;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.2),0 0 110px -24px rgba(47,125,246,.55)}

/* ---------- The screen ---------- */
.stage-pos .ps-scr{position:relative;height:100%;border-radius:13px;overflow:hidden;color:#E6EDF8;font:11px/1.3 var(--f-body);
  background:radial-gradient(120% 80% at 80% 0%,rgba(47,125,246,.14),transparent 60%),linear-gradient(180deg,#0F1729,#0A0F1C)}
.stage-pos .ps-scr::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.08),transparent 34%)}
.stage-pos .ps-bar{display:flex;align-items:center;gap:8px;height:24px;padding:0 11px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025);font:500 9.5px/1 var(--f-mono);color:rgba(230,237,248,.55)}
.stage-pos .ps-bar b{font:600 11px/1 var(--f-disp);letter-spacing:-.01em;color:#fff}
.stage-pos .ps-bar em{margin-left:auto;font-style:normal}
.stage-pos .ps-bar i{width:6px;height:6px;border-radius:50%;background:#3ED598;box-shadow:0 0 6px #3ED598}
.stage-pos .ps-main{display:grid;grid-template-columns:150px minmax(0,1fr);height:218px}
.stage-pos .ps-lft{position:relative;padding:9px;border-right:1px solid rgba(255,255,255,.06)}
.stage-pos .ps-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.stage-pos .ps-pr{position:relative;display:block;height:60px;padding:7px 7px 0;border-radius:9px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}
.stage-pos .ps-pr i{display:block;width:20px;height:20px;border-radius:6px;margin-bottom:5px}
.stage-pos .ps-pr b{display:block;font-size:10.5px;font-weight:600;color:#fff;line-height:1.15}
.stage-pos .ps-pr small{display:block;font:500 9.5px var(--f-mono);color:rgba(230,237,248,.55)}
.stage-pos .ps-pr em{position:absolute;right:6px;top:6px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#2F7DF6;color:#fff;font:700 9.5px/17px var(--f-body);font-style:normal;text-align:center}
.stage-pos .ps-pr.in{border-color:rgba(90,160,255,.5);background:rgba(47,125,246,.13)}
/* Product swatches (tiles and the inventory rows) */
.stage-pos i.pa{background:linear-gradient(135deg,#7DB7FF,#2F7DF6)}
.stage-pos i.pb{background:linear-gradient(135deg,#FF8A8D,#ED3237)}
.stage-pos i.pc{background:linear-gradient(135deg,#6EE7B7,#1F9D63)}
.stage-pos i.pd{background:linear-gradient(135deg,#FFD88A,#E59F12)}
.stage-pos i.pe{background:linear-gradient(135deg,#C9B8FF,#7C5CF0)}
.stage-pos i.pf{background:linear-gradient(135deg,#9BE7F5,#1BA3C2)}

/* Order column */
.stage-pos .ps-rgt{display:flex;flex-direction:column;min-width:0;padding:9px 10px 10px}
.stage-pos .ps-oh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:2px}
.stage-pos .ps-oh b{font:600 11.5px var(--f-disp);color:#fff}
.stage-pos .ps-oh small{font:500 9px var(--f-mono);color:rgba(230,237,248,.5)}
.stage-pos .ps-li{display:grid;grid-template-columns:minmax(0,1fr) auto 46px;align-items:baseline;column-gap:8px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.stage-pos .ps-li b{font-size:11px;font-weight:600;color:#fff;white-space:nowrap}
.stage-pos .ps-li small{font:500 9.5px var(--f-mono);color:rgba(230,237,248,.55);white-space:nowrap}
.stage-pos .ps-li em{text-align:right;font:600 11px var(--f-mono);font-style:normal;color:#fff;font-variant-numeric:tabular-nums}
.stage-pos .ps-tot{margin-top:5px}
.stage-pos .ps-tot p{display:flex;justify-content:space-between;margin:0;padding:1.5px 0;font-size:10px;color:rgba(230,237,248,.6)}
.stage-pos .ps-tot b{font:500 10px var(--f-mono);color:#E6EDF8;font-variant-numeric:tabular-nums}
.stage-pos .ps-tot p.g{margin-top:3px;align-items:baseline;font-size:11px;font-weight:600;color:#fff}
.stage-pos .ps-tot p.g b{font:700 14.5px var(--f-disp);letter-spacing:-.01em;color:#fff}
.stage-pos .ps-meth{display:flex;gap:5px;margin-top:auto}
.stage-pos .ps-meth button{flex:1;padding:6px 0;border-radius:7px;cursor:pointer;pointer-events:auto;font:600 10px/1 var(--f-body);color:rgba(230,237,248,.72);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.13);transition:color .25s,background .25s,border-color .25s}
.stage-pos .ps-meth button:hover{color:#fff;border-color:rgba(90,160,255,.6)}
.stage-pos .ps-meth button.cur{color:#fff;background:rgba(47,125,246,.28);border-color:rgba(120,180,255,.8)}
.stage-pos .ps-charge{position:relative;display:grid;margin-top:6px;padding:9px 0;border:0;border-radius:9px;cursor:pointer;pointer-events:auto;overflow:hidden;
  font:600 12px/1 var(--f-body);color:#fff;background:#2F7DF6;box-shadow:0 8px 18px -8px rgba(47,125,246,.9),inset 0 1px 0 rgba(255,255,255,.25);transition:background .35s,box-shadow .35s,translate .12s}
.stage-pos .ps-charge:hover{background:#3D89FF}
.stage-pos .ps-charge>span{grid-area:1/1;text-align:center;transition:opacity .25s}
.stage-pos .ps-charge .y{opacity:0}
.stage-pos .ps-charge.dn:not(.up){translate:0 1px;background:#1F66D8;box-shadow:inset 0 2px 6px rgba(0,0,0,.35)}
.stage-pos .ps-charge.paid{background:#1F9D63;box-shadow:0 8px 18px -8px rgba(31,157,99,.9),inset 0 1px 0 rgba(255,255,255,.25)}
.stage-pos .ps-charge.paid .x{opacity:0}
.stage-pos .ps-charge.paid .y{opacity:1}
.stage-pos .ps-rip{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:rgba(255,255,255,.45);opacity:0;pointer-events:none}
.stage-pos .ps-charge.dn .ps-rip{animation:ps-rip .7s ease-out}
@keyframes ps-rip{from{opacity:.9;transform:scale(.2)}to{opacity:0;transform:scale(4)}}

/* Payment views, over the product grid */
.stage-pos .ps-pay{position:absolute;inset:0;display:flex;flex-direction:column;padding:10px 10px 9px;background:radial-gradient(90% 60% at 50% 30%,rgba(47,125,246,.14),transparent 70%),linear-gradient(180deg,#0F1729,#0B111E);opacity:0;transition:opacity .35s}
.stage-pos .ps-pay.on{opacity:1}
.stage-pos .ps-v{display:none;position:relative;flex:1}
.stage-pos .stage-3d:not([data-on]) .ps-v.c,.stage-pos .stage-3d[data-on="card"] .ps-v.c,
.stage-pos .stage-3d[data-on="cash"] .ps-v.k,.stage-pos .stage-3d[data-on="tabby"] .ps-v.t{display:block}
.stage-pos .ps-paper p.ps-v{display:none;flex:none}
.stage-pos .stage-3d:not([data-on]) .ps-paper p.ps-v.c,.stage-pos .stage-3d[data-on="card"] .ps-paper p.ps-v.c,
.stage-pos .stage-3d[data-on="cash"] .ps-paper p.ps-v.k,.stage-pos .stage-3d[data-on="tabby"] .ps-paper p.ps-v.t{display:flex}
.stage-pos .ps-a,.stage-pos .ps-b{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;opacity:0;transition:opacity .3s}
.stage-pos .ps-a.on,.stage-pos .ps-b.on{opacity:1}
.stage-pos .ps-a small{font:500 9.5px/1.2 var(--f-mono);color:rgba(230,237,248,.6)}
.stage-pos .ps-b small{font:500 10px/1.25 var(--f-body);color:rgba(230,237,248,.66);white-space:nowrap}
.stage-pos .ps-a>b{font:700 17px/1.1 var(--f-disp);letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.stage-pos .ps-a p{margin:2px 0 0;font-size:10.5px;line-height:1.3;color:rgba(230,237,248,.8)}
.stage-pos .ps-b>b{margin-top:4px;font:700 15px/1.1 var(--f-disp);color:#fff}
.stage-pos .ps-nfc{position:relative;width:46px;height:46px;margin:8px 0 4px;border-radius:50%;background:rgba(47,125,246,.2);box-shadow:inset 0 0 0 1px rgba(90,160,255,.5)}
.stage-pos .ps-nfc::before{content:"";position:absolute;inset:13px;background:#9CC8FF;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M7 7.5a6 6 0 0 1 0 9M11 5a10 10 0 0 1 0 14M15 3a13.5 13.5 0 0 1 0 18'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M7 7.5a6 6 0 0 1 0 9M11 5a10 10 0 0 1 0 14M15 3a13.5 13.5 0 0 1 0 18'/%3E%3C/svg%3E") center/contain no-repeat}
.stage-pos .ps-nfc i{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(120,180,255,.7);opacity:0}
.stage-pos .ps-a.on .ps-nfc i{animation:ps-ring 1.5s ease-out infinite}
.stage-pos .ps-a.on .ps-nfc i:nth-child(2){animation-delay:.5s}
.stage-pos .ps-a.on .ps-nfc i:nth-child(3){animation-delay:1s}
@keyframes ps-ring{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.9)}}
.stage-pos .ps-ok{position:relative;width:38px;height:38px;border-radius:50%;background:#1F9D63;box-shadow:0 0 0 6px rgba(62,213,152,.14),0 0 22px rgba(62,213,152,.55)}
.stage-pos .ps-ok::after{content:"";position:absolute;left:14px;top:9px;width:8px;height:15px;border:solid #fff;border-width:0 2.6px 2.6px 0;transform:rotate(45deg)}
.stage-pos .ps-row{display:flex;justify-content:space-between;align-self:stretch;gap:8px;margin-top:8px;padding:7px 8px;border-radius:8px;background:rgba(62,213,152,.1);border:1px solid rgba(62,213,152,.3);font-size:10px;color:rgba(230,237,248,.8)}
.stage-pos .ps-row em{font:600 10px var(--f-mono);font-style:normal;color:#7EE8B5}
.stage-pos .ps-qr{width:74px;height:74px;padding:5px;border-radius:9px;background:#F4F7FB;box-shadow:0 0 0 1px rgba(255,255,255,.2),0 0 26px rgba(59,255,193,.18)}
.stage-pos .ps-qr svg{display:block;width:100%;height:100%;fill:#0B111E}
.stage-pos .ps-tb{display:inline-block;padding:1px 5px;border-radius:4px;background:#3BFFC1;color:#0b1a14;font:800 9.5px/1.3 var(--f-body)}
.stage-pos .ps-sch{display:flex;gap:4px;margin-top:6px}
.stage-pos .ps-sch i{width:22px;height:5px;border-radius:3px;background:rgba(255,255,255,.14)}
.stage-pos .ps-sch i.paid{background:#3BFFC1;box-shadow:0 0 8px rgba(59,255,193,.6)}
.stage-pos .ps-note{display:grid;margin:0;padding-top:7px;border-top:1px solid rgba(255,255,255,.07);font:500 9.5px/1.2 var(--f-mono);color:rgba(230,237,248,.62);text-align:center;min-height:19px}
.stage-pos .ps-note>span{grid-area:1/1}
.stage-pos .ps-note .g{color:#7EE8B5}

/* ---------- The goods being sold: 2 x Item A, 1 x Item B ---------- */
.stage-pos .ps-goods{position:absolute;left:0;top:0;width:0;height:0}
.stage-pos .ps-gd{--w:50px;--h:38px;--d:44px}
.stage-pos .ps-gd.a1{left:2px;top:492px;transform:translateZ(54px)}
.stage-pos .ps-gd.a2{left:6px;top:454px;transform:translateZ(52px) rotateY(-7deg)}
.stage-pos .ps-gd.b1{--w:44px;--h:30px;--d:40px;left:62px;top:500px;transform:translateZ(74px) rotateY(9deg)}
.stage-pos .ps-gd>.f{display:flex;flex-direction:column;justify-content:flex-end;padding:0 6px 5px;border-radius:3px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.stage-pos .ps-gd>.f b{font:700 7.5px/1 var(--f-body);color:#fff;letter-spacing:.02em}
.stage-pos .ps-gd>.f span{display:block;height:6px;margin-top:3px;width:60%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.85) 0 1px,transparent 1px 2.5px)}
.stage-pos .ps-gd.pa>.f{background:linear-gradient(180deg,#4C95FF,#1F5FD0)}
.stage-pos .ps-gd.pa>.t{background:linear-gradient(0deg,#7DB2FF,#5C9BFF)}
.stage-pos .ps-gd.pa>.r{background:linear-gradient(180deg,#1E54B8,#163F8C)}
.stage-pos .ps-gd.pb>.f{background:linear-gradient(180deg,#FF5A5F,#C9262B)}
.stage-pos .ps-gd.pb>.t{background:linear-gradient(0deg,#FF9497,#FF7A7E)}
.stage-pos .ps-gd.pb>.r{background:linear-gradient(180deg,#B22025,#861519)}
.stage-pos .ps-gd>.l{background:#0E1626}

/* ---------- Receipt printer ---------- */
.stage-pos .ps-prn{--w:126px;--h:66px;--d:128px;left:452px;top:464px;transform:translateZ(26px)}
.stage-pos .ps-prn>.f{border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,#323D52,#1A2232 40%,#0F151F);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.stage-pos .ps-prn>.r{border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,#1E2737,#0C111A)}
.stage-pos .ps-prn>.l{background:#0A0F17}
.stage-pos .ps-prn>.t{border-radius:7px;background:linear-gradient(0deg,#56647E,#3A465C 55%,#2A3446);box-shadow:inset 0 -1px 0 rgba(255,255,255,.25)}
.stage-pos .ps-prn>.t::before{content:"";position:absolute;left:12px;right:12px;top:82px;height:5px;border-radius:3px;background:#020409;box-shadow:inset 0 1.5px 2px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.16)}
.stage-pos .ps-prn>.t::after{content:"";position:absolute;left:0;right:0;top:44px;height:1px;background:rgba(0,0,0,.35);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.stage-pos .ps-cut{position:absolute;left:14px;right:14px;top:10px;height:3px;border-radius:2px;background:linear-gradient(90deg,#4B5870,#8695AE,#4B5870);opacity:.7}
.stage-pos .ps-led{position:absolute;right:13px;bottom:12px;width:6px;height:6px;border-radius:50%;background:#1F9D63;box-shadow:0 0 6px #3ED598}
.stage-pos .ps-led.on{background:#7DFFC4;animation:blink .35s steps(2) infinite}
/* The slot is at local y 0, z +20 (44px from the front edge). */
.stage-pos .ps-feed{position:absolute;left:18px;top:-176px;width:90px;height:176px;overflow:hidden;transform-origin:50% 100%;transform:translateZ(20px) rotateX(5deg)}
.stage-pos .ps-paper{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;padding:9px 8px 8px;
  background:linear-gradient(180deg,#E9EDF3,#F7F9FC 30%,#EEF1F6);color:#1A2230;font:500 7.6px/1.5 var(--f-mono);text-transform:uppercase;
  box-shadow:inset 0 -12px 10px -10px rgba(0,0,0,.35);
  transform:translateY(102%);opacity:0;transition:opacity .35s,transform 0s .35s}
.stage-pos .ps-paper.on{transform:none;opacity:1;transition:opacity .15s,transform 1.9s cubic-bezier(.35,.1,.45,1)}
.stage-pos .ps-paper>b{font:700 9.5px/1.2 var(--f-disp);letter-spacing:.06em;text-align:center}
.stage-pos .ps-paper>.c{text-align:center;font-size:6.8px;color:#5A6577}
.stage-pos .ps-paper p{display:flex;justify-content:space-between;gap:4px;margin:0;white-space:nowrap}
.stage-pos .ps-paper p.g{font-weight:700;font-size:8px}
.stage-pos .ps-paper .hr{display:block;height:0;margin:4px 0;border-top:1px dashed rgba(26,34,48,.4)}
.stage-pos .ps-paper .bc{display:block;height:14px;margin:6px 4px 0;background:repeating-linear-gradient(90deg,#1A2230 0 1px,transparent 1px 3px,#1A2230 3px 5px,transparent 5px 6px,#1A2230 6px 7px,transparent 7px 9px)}

/* ---------- Wires: the sale leaving the till ---------- */
.stage-pos .ps-wire{position:absolute;left:0;top:0;width:620px;height:520px;overflow:visible;transform:translateZ(64px);pointer-events:none}
.stage-pos .ps-w{fill:none;stroke:rgba(140,190,255,.5);stroke-width:1.4;stroke-dasharray:.012 .016}
.stage-pos .ps-wg{opacity:0;transition:opacity .5s}
.stage-pos .ps-wg.on{opacity:1;transition-duration:.2s}
.stage-pos .ps-pk{fill:none;stroke:#BFDBFF;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:.14 1.2;stroke-dashoffset:.14;opacity:0;filter:drop-shadow(0 0 4px #5AA0FF)}
.stage-pos .ps-pk.on{animation:ps-pk 1s cubic-bezier(.5,0,.3,1) forwards}
@keyframes ps-pk{0%{stroke-dashoffset:.14;opacity:1}88%{opacity:1}100%{stroke-dashoffset:-1;opacity:0}}

/* ---------- Floating panels ---------- */
.stage-pos .ps-pn{position:relative;border-radius:15px;color:#EAF1FF;font:12px/1.35 var(--f-body);
  background:linear-gradient(180deg,rgba(24,33,52,.94),rgba(11,15,25,.96));border:1px solid rgba(140,180,255,.2);
  box-shadow:0 40px 70px -36px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.09)}
.stage-pos .ps-ph{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px 8px;border-bottom:1px solid rgba(255,255,255,.07)}
.stage-pos .ps-ph b{font:600 13px var(--f-disp);letter-spacing:-.01em;color:#fff}
.stage-pos .ps-ph small{font:500 9.5px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(234,241,255,.5)}
.stage-pos .ps-live{display:inline-flex;align-items:center;gap:6px;font:500 9.5px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#6EE7B7;background:rgba(62,213,152,.12);padding:3px 8px;border-radius:99px}
.stage-pos .ps-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#3ED598;animation:blink 1.4s infinite}
.stage-pos .ps-pf{display:flex;align-items:center;gap:7px;margin:0;padding:8px 14px 10px;font-size:10.5px;line-height:1.35;color:rgba(234,241,255,.6)}

.stage-pos .ps-chip{display:flex;align-items:center;gap:10px;padding:9px 13px 9px 10px;border-radius:13px}
.stage-pos .ps-pin{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:#CFE1FF;background:rgba(47,125,246,.24);box-shadow:inset 0 0 0 1px rgba(90,160,255,.4);transition:background .4s,color .4s,box-shadow .4s}
.stage-pos .ps-pin svg{width:16px;height:16px}
.stage-pos .ps-chip b{display:block;font:600 12.5px var(--f-disp);color:#fff}
.stage-pos .ps-chip small{display:grid;font-size:10.5px;color:rgba(234,241,255,.6)}
.stage-pos .ps-chip small>span{grid-area:1/1;transition:opacity .3s}
.stage-pos .ps-chip .y{opacity:0;color:#7EE8B5}
.stage-pos .ps-chip.sync .x{opacity:0}
.stage-pos .ps-chip.sync .y{opacity:1}
.stage-pos .ps-chip.sync .ps-pin{color:#C8F5DF;background:rgba(62,213,152,.22);box-shadow:inset 0 0 0 1px rgba(62,213,152,.5),0 0 16px rgba(62,213,152,.45)}

.stage-pos .ps-inv{width:178px}
.stage-pos .ps-ir{display:grid;grid-template-columns:16px minmax(0,1fr) auto 28px;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.06);transition:background .5s}
.stage-pos .ps-ir>i{width:16px;height:16px;border-radius:5px}
.stage-pos .ps-ir>span{font-size:12px;color:rgba(234,241,255,.8)}
.stage-pos .ps-ir>b{font:700 16px/1 var(--f-disp);letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums;text-align:right}
.stage-pos .ps-ir>em{justify-self:end;font:600 10px var(--f-mono);font-style:normal;color:#FF9497;background:rgba(255,74,79,.14);padding:2px 5px;border-radius:5px}
.stage-pos .ps-ir.hit{animation:ps-hit 1.4s ease-out}
@keyframes ps-hit{0%,100%{background:transparent}20%{background:rgba(90,160,255,.16)}}
.stage-pos .ps-inv .ps-pf{font-size:10px}

.stage-pos .ps-day{width:236px}
.stage-pos .ps-k{display:grid;grid-template-columns:.7fr 1.3fr;gap:8px;padding:9px 14px 2px}
.stage-pos .ps-k>div+div{border-left:1px solid rgba(255,255,255,.08);padding-left:12px}
.stage-pos .ps-k small{display:block;font-size:10.5px;color:rgba(234,241,255,.55)}
.stage-pos .ps-k b{display:block;margin-top:4px;font:700 19px/1 var(--f-disp);letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.stage-pos .ps-bars{display:flex;align-items:flex-end;gap:5px;height:24px;margin:8px 14px 0}
.stage-pos .ps-bars i{flex:1;height:var(--h);border-radius:3px 3px 1px 1px;background:linear-gradient(180deg,rgba(106,171,255,.85),rgba(47,125,246,.25))}
.stage-pos .ps-bars i.gr{height:52%;transition:height .9s var(--ps-ease),background .4s}
.stage-pos .ps-bars i.gr.on{height:var(--h);background:linear-gradient(180deg,#fff,#5AA0FF)}
.stage-pos .ps-tk{flex:none;width:15px;height:15px;border-radius:50%;background:rgba(255,255,255,.1);position:relative;transition:background .3s}
.stage-pos .ps-tk.on{background:#1F9D63}
.stage-pos .ps-tk.on::after{content:"";position:absolute;left:5px;top:2.5px;width:3.5px;height:7px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.stage-pos .ps-day .ps-pf span[data-to]{color:#fff;font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* ---------- Phones ---------- */
@media (max-width:899px){
  .stage-pos .ps-pf{display:none}
}

@media (prefers-reduced-motion:reduce){
  .stage-pos .ps-obj,.stage-pos .ps-obj i,.stage-pos .ps-face{animation:none}
  .stage-pos .ps-paper{transition:none}
}