/* Business dashboard scenes for the public site (views/_biz_scene.php).
 * A light app window: a navy side rail and one screen at a time. Every size is
 * in em, and the em follows the window's width (container units), so a scene
 * keeps its proportions from a 320px phone to a wide desktop; below 460px the
 * rail folds away and the type grows back to stay readable. Each story is 7.5s
 * and runs only while the window is on screen (.is-live); reduced motion shows
 * every scene in its finished state. */
.bz{--bz-navy:#1a2842;--bz-navy2:#0d1526;--bz-gold:#D6B370;--bz-gold2:#c39a4e;--bz-ink:#0f172a;--bz-muted:#64748b;--bz-line:#e8ebf1;--bz-ok:#067647;
  position:relative;width:100%;max-width:680px;margin-inline:auto;border-radius:18px;overflow:hidden;background:#f5f6f9;border:1px solid #dde2ea;container-type:inline-size;
  box-shadow:0 50px 90px -45px rgba(13,21,38,.55),0 2px 6px rgba(13,21,38,.05);text-align:start}
.bz::after{content:"";position:absolute;inset:auto 12% -40px;height:80px;z-index:-1;background:radial-gradient(closest-side,rgba(214,179,112,.35),transparent);filter:blur(14px)}
.bz-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;background:#eceff4;border-bottom:1px solid #dde2ea}
.bz-bar>i{width:10px;height:10px;border-radius:99px;background:#f87171}.bz-bar>i:nth-child(2){background:#fbbf24}.bz-bar>i:nth-child(3){background:#34d399}
.bz-url{margin-inline:auto;display:inline-flex;align-items:center;gap:6px;max-width:62%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:3px 12px;border-radius:99px;background:#fff;color:#64748b;font:500 11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}
.bz-url .ui-icon{width:11px;height:11px;color:#16a34a;flex:none}
.bz-screen{position:relative}

.bzs{display:grid;grid-template-columns:3.6em minmax(0,1fr);min-height:27em;font-size:clamp(9.5px,2.05cqw,13.5px);line-height:1.45;color:var(--bz-ink)}
.bzs .ui-icon{width:1.2em;height:1.2em;flex:none}
.bzs b{font-weight:700}
.bzs small{color:var(--bz-muted);font-size:.84em}
.bzs-side{display:flex;flex-direction:column;align-items:center;gap:.55em;padding:.9em 0;background:linear-gradient(180deg,var(--bz-navy),var(--bz-navy2))}
.bzs-logo{width:2.2em;height:2.2em;display:grid;place-items:center;margin-bottom:.5em}
.bzs-logo svg{width:1.7em;height:1.7em;fill:var(--bz-gold)}
.bzs-side>i{width:2.3em;height:2.3em;display:grid;place-items:center;border-radius:.75em;color:#7f8ba3}
.bzs-side>i.is-on{background:rgba(214,179,112,.16);color:var(--bz-gold)}
.bzs-main{position:relative;display:flex;flex-direction:column;gap:.85em;min-width:0;padding:1.15em 1.3em 1.3em}
.bzs-head{display:flex;align-items:center;justify-content:space-between;gap:.6em;min-width:0}
.bzs-head>b{font-size:1.28em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bzs-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;padding:.6em .95em;border-radius:.8em;background:linear-gradient(150deg,var(--bz-navy),var(--bz-navy2));color:#fff;font-weight:700;font-size:.92em;white-space:nowrap}
.bzs-btn .ui-icon{color:var(--bz-gold)}
.bzs-btn.is-ghost{background:#fff;color:var(--bz-ink);border:1px solid var(--bz-line)}
.bzs-btn.is-ghost .ui-icon{color:#8a6b30}
.bzs-btn.is-wide{width:100%;padding:.8em}
.bzs-pill{padding:.3em .75em;border-radius:99px;background:#eef1f6;color:var(--bz-muted);font-size:.82em;font-weight:700}
.bzs-pill.is-ok{background:#e7f8ee;color:var(--bz-ok)}
.bzs-chips{display:inline-flex;gap:.35em;flex-wrap:wrap}
.bzs-chips span{padding:.3em .75em;border-radius:99px;background:#fff;border:1px solid var(--bz-line);font-size:.82em;font-weight:600;color:var(--bz-muted)}
.bzs-chips span.is-on{background:var(--bz-navy);border-color:var(--bz-navy);color:#fff}
.bzs-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6em}
.bzs-kpis>span{position:relative;display:grid;gap:.15em;padding:.75em .85em;border-radius:.95em;background:#fff;border:1px solid var(--bz-line);min-width:0}
.bz-num{font-size:1.22em;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.bz-num.is-in{font-size:1em;color:var(--bz-ok)}
.bzs-kpis em.is-up{justify-self:start;font-style:normal;font-size:.74em;font-weight:800;color:var(--bz-ok);background:#e7f8ee;padding:.1em .45em;border-radius:99px}
.bzs-panel{padding:.85em .95em;border-radius:.95em;background:#fff;border:1px solid var(--bz-line);min-width:0}
.bzs-label{margin:0 0 .55em;font-size:.84em;color:var(--bz-muted);font-weight:600}
.bzs-bars{display:flex;align-items:flex-end;gap:.5em;height:5.6em}
.bzs-bars i{flex:1;height:var(--h);border-radius:.4em .4em .15em .15em;background:linear-gradient(180deg,var(--bz-gold),var(--bz-gold2));transform-origin:bottom}
.bzs-bars i:nth-child(6){background:linear-gradient(180deg,#2f4470,var(--bz-navy))}
.bzs-bars.is-dense{height:7.2em;gap:.32em}
.bzs-bars.is-dense i:nth-child(6){background:linear-gradient(180deg,var(--bz-gold),var(--bz-gold2))}
.bzs-bars.is-dense i:last-child{background:linear-gradient(180deg,#2f4470,var(--bz-navy))}
.bzs-feed,.bzs-rows,.bzs-orders,.bzs-top{list-style:none;margin:0;padding:0;display:grid;gap:.45em}
.bzs-feed li,.bzs-rows li{display:grid;grid-template-columns:2.3em minmax(0,1fr) auto;align-items:center;gap:.65em;padding:.55em .7em;border-radius:.85em;background:#fff;border:1px solid var(--bz-line)}
.bzs-feed li>i{width:2.3em;height:2.3em;display:grid;place-items:center;border-radius:.7em;background:#f7efdf;color:#8a6b30}
.bzs-feed li>span,.bzs-rows li>span,.bzs-orders li>span:nth-child(2){display:grid;min-width:0}
.bzs-feed b,.bzs-rows b,.bzs-orders b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bzs-feed small,.bzs-rows small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bzs-feed li.is-new{border-color:#eadfc6;box-shadow:0 0 0 3px rgba(214,179,112,.15)}
.bzs-av{width:2.3em;height:2.3em;display:grid;place-items:center;border-radius:.75em;background:#eef1f6;color:var(--bz-navy);font-weight:800}
.bzs-av.is-dark{background:var(--bz-navy);color:var(--bz-gold)}
.bzs-av.is-light{background:rgba(255,255,255,.9);color:#8b5e3c}

/* Invoice */
.bzs-form{display:grid;gap:.6em}
.bzs-form label{display:grid;gap:.25em}
.bzs-form label>span{display:block;padding:.6em .8em;border-radius:.75em;background:#fff;border:1px solid var(--bz-line);min-height:2.6em}
.bzs-form em{display:inline-block;max-width:100%;overflow:hidden;white-space:nowrap;vertical-align:top;font-style:normal;font-weight:600}
.bzs-result{display:grid;gap:.55em;padding:.85em;border-radius:.95em;background:#fff;border:1px dashed #d8c08a}
.bzs-link{display:flex;align-items:center;gap:.5em;min-width:0;padding:.55em .75em;border-radius:.75em;background:#f5f6f9;font:600 .92em/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:#334155}
.bzs-link>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bzs-link .ui-icon{color:#8a6b30}
.bzs-link em{display:grid;place-items:center;width:2em;height:2em;border-radius:.6em;background:#fff;border:1px solid var(--bz-line)}
.bzs-link em.is-wa .ui-icon{color:#16a34a}
.bzs-link.is-small{font-size:.82em;width:100%}
.bzs-status{position:relative;height:2.2em}
.bzs-status span{position:absolute;inset:0;display:inline-flex;align-items:center;gap:.4em;width:max-content;padding:.35em .8em;border-radius:99px;font-weight:700;font-size:.9em}
.bzs-status .is-wait{background:#fff7e6;color:#9a6700}
.bzs-status .is-paid{background:#e7f8ee;color:var(--bz-ok)}

/* Payment link */
.bzs-split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:.7em}
.bzs-split.is-wide{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.bzs-linkcard{display:grid;justify-items:center;align-content:center;gap:.6em;text-align:center;background:linear-gradient(160deg,#fff,#faf6ee)}
.bzs-qr{display:grid;grid-template-columns:repeat(5,1fr);gap:.18em;width:5.4em;padding:.45em;border-radius:.7em;background:#fff;border:1px solid var(--bz-line)}
.bzs-qr i{aspect-ratio:1;border-radius:.12em;background:#eef1f6}
.bzs-qr i.on{background:var(--bz-navy)}
.bzs-rows li{padding:.5em .6em}

/* Store orders */
.bzs-orders li{position:relative;display:grid;grid-template-columns:2.5em minmax(0,1fr) auto auto auto;align-items:center;gap:.6em;padding:.55em .7em;border-radius:.85em;background:#fff;border:1px solid var(--bz-line)}
.bzs-orders li.is-new{border-color:#eadfc6;box-shadow:0 0 0 3px rgba(214,179,112,.15)}
.bzs-thumb{width:2.5em;height:2.5em;border-radius:.65em;background:linear-gradient(150deg,#c8a37a,#8b5e3c)}
.bzs-thumb.t2{background:linear-gradient(150deg,#9aa8c4,#2f4470)}.bzs-thumb.t3{background:linear-gradient(150deg,#a78bfa,#5b21b6)}
.bzs-state{position:relative;display:grid;min-width:6.4em;height:1.9em}
.bzs-state em{position:absolute;inset:0;display:grid;place-items:center;border-radius:99px;font-style:normal;font-weight:700;font-size:.8em;white-space:nowrap}
.bzs-state .s1{background:#e7f8ee;color:var(--bz-ok)}.bzs-state .s2{background:#fff7e6;color:#9a6700}.bzs-state .s3,.bzs-state .is-ship{background:#eaf1ff;color:#1d4ed8}
.bzs-state .is-done{background:#eef1f6;color:var(--bz-muted)}
.bzs-mini{padding:.4em .7em;border-radius:.6em;background:var(--bz-navy);color:#fff;font-weight:700;font-size:.8em;white-space:nowrap}
.bzs-orders li:not(.is-new){grid-template-columns:2.5em minmax(0,1fr) auto auto}
.bzs-toast{position:absolute;bottom:1.1em;inset-inline:0;margin-inline:auto;width:max-content;max-width:90%;display:flex;align-items:center;gap:.45em;padding:.6em 1em;border-radius:99px;background:var(--bz-navy);color:#fff;font-weight:700;font-size:.9em;box-shadow:0 14px 30px -12px rgba(13,21,38,.6);opacity:0}
.bzs-toast .ui-icon{color:#6ee7b7}

/* Checkout */
.bzs-co{position:relative;display:grid;gap:.75em;width:100%;max-width:24em;margin:auto;padding:1.1em;border-radius:1.1em;background:#fff;border:1px solid var(--bz-line);box-shadow:0 20px 40px -28px rgba(13,21,38,.5)}
.bzs-merchant{display:flex;align-items:center;gap:.6em}
.bzs-merchant>span:last-child{display:grid}
.bzs-merchant b{display:inline-flex;align-items:center;gap:.3em}
.bzs-merchant b .ui-icon{color:#16a34a;width:1em;height:1em}
.bzs-amount{font-size:2em;font-weight:800;text-align:center;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bzs-amount small{font-size:.42em}
.bzs-methods{display:grid;gap:.4em}
.bzs-methods>span{display:flex;align-items:center;gap:.55em;padding:.6em .75em;border-radius:.8em;border:1px solid var(--bz-line);font-size:.92em;min-width:0}
.bzs-methods>span>b{flex:none}
.bzs-methods>span .ui-icon{color:var(--bz-muted)}
.bzs-methods>span.is-on{border-color:var(--bz-navy);box-shadow:0 0 0 1px var(--bz-navy)}
.bzs-methods .is-local .lc-flags{margin-inline-start:auto}
.bzs-done{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.6em;border-radius:1.1em;background:#fff;opacity:0;visibility:hidden}
.bzs-done svg{width:4.4em;height:4.4em;fill:none;stroke:var(--bz-ok);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.bzs-done circle{stroke:#bbf7d0;fill:#ecfdf3}.bzs-done path{stroke-dasharray:40;stroke-dashoffset:40}
.bzs-done b{font-size:1.15em}

/* Sales report */
.bzs-chips.is-row{margin-top:-.3em}
.bzs-top li{display:grid;gap:.3em}
.bzs-top li span{font-size:.88em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bzs-top li i{display:block;height:.5em;width:var(--w);border-radius:99px;background:linear-gradient(90deg,var(--bz-gold),var(--bz-gold2));transform-origin:left}
[dir="rtl"] .bzs-top li i{transform-origin:right}

/* Store front */
.bzs-shop{position:relative;display:grid;gap:.75em}
.bzs-shop-hero{display:flex;align-items:center;gap:.7em;padding:.9em 1em;border-radius:1em;background:linear-gradient(135deg,#8b5e3c,#5b3a22);color:#fff}
.bzs-shop-hero>span:nth-child(2){display:grid;flex:1;min-width:0}
.bzs-shop-hero small{color:rgba(255,255,255,.75)}
.bzs-cart{position:relative;width:2.4em;height:2.4em;display:grid;place-items:center;border-radius:.75em;background:rgba(255,255,255,.14)}
.bzs-cart em{position:absolute;top:-.35em;inset-inline-end:-.35em;min-width:1.4em;height:1.4em;display:grid;place-items:center;border-radius:99px;background:var(--bz-gold);color:var(--bz-navy);font-style:normal;font-weight:800;font-size:.75em;transform:scale(0)}
.bzs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6em}
.bzs-prod{display:grid;gap:.25em;padding:.45em .45em .6em;border-radius:.9em;background:#fff;border:1px solid var(--bz-line);min-width:0}
.bzs-prod>i{aspect-ratio:4/4.4;border-radius:.65em;background:linear-gradient(160deg,#e8d5bd,#c8a37a)}
.bzs-prod.p2>i{background:linear-gradient(160deg,#dde3ee,#9aa8c4)}.bzs-prod.p3>i{background:linear-gradient(160deg,#ede9fe,#a78bfa)}.bzs-prod.p4>i{background:linear-gradient(160deg,#fde2d6,#e4572e)}
.bzs-prod>b{font-size:.88em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bzs-prod .bz-num{font-size:.9em;color:#8b5e3c}
.bzs-prod em{display:grid;place-items:center;padding:.35em;border-radius:.55em;background:#8b5e3c;color:#fff;font-style:normal;font-weight:700;font-size:.8em}

/* Narrow windows: no rail, larger type, stacked panels */
@container (max-width:460px){
  .bzs{grid-template-columns:minmax(0,1fr);font-size:clamp(10px,3.1cqw,12.5px);min-height:25em}
  .bzs-side{display:none}
  .bzs-main{padding:1em}
  .bzs-split,.bzs-split.is-wide{grid-template-columns:minmax(0,1fr)}
  .bzs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bzs-prod.p3,.bzs-prod.p4{display:none}
  .bzs-kpis .bz-num{font-size:1.05em}
  .bzs-orders li.is-new{grid-template-columns:2.5em minmax(0,1fr) auto}
  .bzs-orders li.is-new .bzs-state{grid-column:2/4;justify-self:start}
  .bzs-orders li.is-new .bzs-mini{grid-column:3;grid-row:1}
  .bzs-orders li.is-new>.bz-num{display:none}
  .bzs-orders li:not(.is-new)>.bz-num{display:none}
  .bzs-sales .bzs-split .bzs-panel:last-child{display:none}
}

/* ---- Motion ------------------------------------------------------------ */
.bz:not(.is-live) *{animation-play-state:paused!important}
.bzs-bars i{animation:bzBar 7.5s cubic-bezier(.2,.8,.2,1) infinite;animation-delay:calc(var(--i) * .07s)}
.bzs-overview .bzs-feed li.is-new{animation:bzIn 7.5s cubic-bezier(.2,.9,.3,1.1) infinite}
.bzs-overview .bzs-kpis em.is-up{animation:bzPop 7.5s ease-out infinite}
.bzs-overview .bzs-btn{animation:bzPress 7.5s ease-in-out infinite}
.bzs-form .f1 em{animation:bzType1 7.5s steps(20,end) infinite}
.bzs-form .f2 em{animation:bzType2 7.5s steps(22,end) infinite}
.bzs-form .f3 em{animation:bzType3 7.5s steps(12,end) infinite}
.bzs-invoice .bzs-btn{animation:bzPress 7.5s ease-in-out infinite}
.bzs-result{animation:bzResult 7.5s ease-out infinite}
.bzs-status .is-wait{animation:bzWait 7.5s ease-out infinite}
.bzs-status .is-paid{animation:bzPaid 7.5s cubic-bezier(.2,.9,.3,1.3) infinite}
.bzs-link em[data-tap]{animation:bzPress 7.5s ease-in-out infinite}
.bzs-rows li{animation:bzIn 7.5s cubic-bezier(.2,.9,.3,1.1) infinite}
.bzs-rows .r1{animation-name:bzRow1}.bzs-rows .r2{animation-name:bzRow2}.bzs-rows .r3{animation-name:bzRow3}
.bzs-orders li.is-new{animation:bzIn 7.5s cubic-bezier(.2,.9,.3,1.1) infinite}
.bzs-state .s1{animation:bzS1 7.5s ease infinite}.bzs-state .s2{animation:bzS2 7.5s ease infinite}.bzs-state .s3{animation:bzS3 7.5s ease infinite}
.bzs-mini{animation:bzPress 7.5s ease-in-out infinite}
.bzs-orders~.bzs-toast,.bzs-shop .bzs-toast{animation:bzToast 7.5s cubic-bezier(.2,.9,.3,1.2) infinite}
.bzs-shop .bzs-toast{animation-name:bzToastLate}
.bzs-methods>span.is-on{animation:bzPick 7.5s ease-in-out infinite}
.bzs-btn.is-pay{animation:bzPress 7.5s ease-in-out infinite}
.bzs-done{animation:bzDone 7.5s ease-out infinite}
.bzs-done path{animation:bzCheck 7.5s ease-out infinite}
.bzs-sales .bzs-btn{animation:bzPress 7.5s ease-in-out infinite}
.bzs-top li i{animation:bzGrow 7.5s cubic-bezier(.2,.8,.2,1) infinite;animation-delay:calc(var(--i) * .15s)}
.bzs-prod em[data-tap]{animation:bzPress 7.5s ease-in-out infinite}
.bzs-cart em{animation:bzBadge 7.5s cubic-bezier(.2,.9,.3,1.4) infinite}
.lc-flag{animation:bzFlag 7.5s ease-in-out infinite;animation-delay:calc(var(--f) * .4s)}
@keyframes bzBar{0%{transform:scaleY(0)}18%,92%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes bzGrow{0%,8%{transform:scaleX(0)}28%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes bzIn{0%,12%{opacity:0;transform:translateY(-.8em)}20%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes bzPop{0%,30%{opacity:0;transform:scale(.6)}36%{opacity:1;transform:scale(1.15)}40%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes bzPress{0%,38%{transform:none}41%{transform:scale(.93)}44%,100%{transform:none}}
@keyframes bzType1{0%,4%{max-width:0}14%,96%{max-width:100%}100%{max-width:0}}
@keyframes bzType2{0%,14%{max-width:0}26%,96%{max-width:100%}100%{max-width:0}}
@keyframes bzType3{0%,26%{max-width:0}34%,96%{max-width:100%}100%{max-width:0}}
@keyframes bzResult{0%,42%{opacity:0;transform:translateY(.6em)}48%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes bzWait{0%,46%{opacity:0}50%,70%{opacity:1}74%,100%{opacity:0}}
@keyframes bzPaid{0%,72%{opacity:0;transform:scale(.8)}77%{opacity:1;transform:scale(1.06)}80%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes bzRow1{0%,44%{opacity:0;transform:translateY(-.8em)}50%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes bzRow2{0%,58%{opacity:0;transform:translateY(-.8em)}64%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes bzRow3{0%,72%{opacity:0;transform:translateY(-.8em)}78%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes bzS1{0%,40%{opacity:1}44%,100%{opacity:0}}
@keyframes bzS2{0%,40%{opacity:0}44%,68%{opacity:1}72%,100%{opacity:0}}
@keyframes bzS3{0%,68%{opacity:0}72%,96%{opacity:1}100%{opacity:0}}
@keyframes bzToast{0%,10%{opacity:0;transform:translateY(.8em)}15%,32%{opacity:1;transform:none}38%,100%{opacity:0;transform:translateY(.4em)}}
@keyframes bzToastLate{0%,50%{opacity:0;transform:translateY(.8em)}56%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes bzPick{0%,24%{box-shadow:0 0 0 1px var(--bz-navy)}28%{box-shadow:0 0 0 4px rgba(214,179,112,.55)}34%,100%{box-shadow:0 0 0 1px var(--bz-navy)}}
@keyframes bzDone{0%,46%{opacity:0;visibility:hidden}50%,94%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes bzCheck{0%,48%{stroke-dashoffset:40}58%,100%{stroke-dashoffset:0}}
@keyframes bzBadge{0%,42%{transform:scale(0)}47%{transform:scale(1.3)}50%,94%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes bzFlag{0%,100%{transform:none}6%{transform:translateY(-.18em)}12%{transform:none}}
@media (prefers-reduced-motion:reduce){
  .bz *{animation:none!important}
  .bzs-done,.bzs-status .is-wait,.bzs-toast{opacity:0}
}