/* JWALA.CODES — live product showcase demos */
.demo{display:grid;grid-template-columns:240px 1fr;gap:20px;align-items:start}
.demo-tabs{display:flex;flex-direction:column;gap:8px}
.demo-tabs button{display:flex;align-items:center;gap:12px;text-align:left;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:var(--panel);font-family:var(--f-head);font-weight:600;font-size:.82rem;color:var(--ink-2);transition:all .3s var(--ease)}
.demo-tabs button span{font-size:.64rem;letter-spacing:.14em;color:var(--muted);transition:color .3s}
.demo-tabs button:hover{border-color:rgba(255,106,0,.45);color:#fff;transform:translateX(4px)}
.demo-tabs button.on{background:linear-gradient(120deg,rgba(255,106,0,.22),rgba(255,40,0,.06));border-color:rgba(255,106,0,.7);color:#fff;box-shadow:0 0 30px rgba(255,90,0,.15)}
.demo-tabs button.on span{color:var(--fire-1)}
.demo-stage{position:relative;border-radius:22px;background:#0a0807;border:1px solid var(--line-2);box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 90px rgba(255,90,0,.1);overflow:hidden;min-height:460px}

.dw{display:flex;flex-direction:column;min-height:460px;animation:dwIn .5s var(--ease)}
@keyframes dwIn{from{opacity:0;transform:translateY(10px)}}
.dw-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--line);background:#0f0b09}
.dw-bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)}
.dw-bar i:first-child{background:#ff5f56}.dw-bar i:nth-child(2){background:#ffbd2e}.dw-bar i:nth-child(3){background:#27c93f}
.dw-url{margin-left:10px;padding:4px 12px;border-radius:8px;background:rgba(255,255,255,.05);font-size:.72rem;color:var(--muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dw-bar em{font-style:normal;font-family:var(--f-head);font-weight:700;font-size:.56rem;letter-spacing:.16em;color:var(--fire-1);border:1px dashed rgba(255,106,0,.5);padding:3px 8px;border-radius:999px;white-space:nowrap}
.dw-body{flex:1;display:flex;min-height:0}
.d-main{flex:1;padding:20px 22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.d-side{width:150px;flex:none;border-right:1px solid var(--line);padding:18px 12px;display:flex;flex-direction:column;gap:4px;background:#0c0908}
.d-side b{font-family:var(--f-head);font-size:.8rem;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.d-side .dot{width:10px;height:10px;border-radius:3px;background:var(--grad)}
.d-side a{padding:9px 10px;border-radius:9px;font-size:.78rem;color:var(--muted)}
.d-side a.on{background:rgba(255,106,0,.14);color:#fff}
.d-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.d-top h4{font-family:var(--f-head);font-size:1.05rem;font-weight:700}
.seg{display:flex;gap:4px;padding:4px;border-radius:12px;background:rgba(255,255,255,.05)}
.seg button{border:0;background:none;padding:7px 12px;border-radius:9px;font-size:.74rem;font-weight:600;color:var(--muted);transition:all .25s}
.seg button.on{background:var(--grad);color:#1a0800}
.d-pill{font-size:.68rem;padding:5px 11px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2)}
.d-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.d-kpis div{padding:14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.d-kpis span{display:block;font-size:.68rem;color:var(--muted)}
.d-kpis b{font-family:var(--f-head);font-size:1.3rem;font-weight:800}
.d-chart{flex:1;min-height:90px;display:flex;align-items:flex-end;gap:6px;padding:6px 0}
.d-chart i{flex:1;border-radius:5px 5px 0 0;background:linear-gradient(#ff9a1f,#ff3d00);transition:height .8s var(--ease);height:10%;opacity:.9}
.d-tbl{width:100%;border-collapse:collapse;font-size:.76rem}
.d-tbl th{text-align:left;color:var(--muted);font-weight:500;padding:6px 8px;border-bottom:1px solid var(--line)}
.d-tbl td{padding:8px;border-bottom:1px solid rgba(255,255,255,.04)}
.d-tbl u{text-decoration:none;padding:2px 8px;border-radius:999px;font-size:.66rem}
.d-tbl u.ok{background:rgba(60,220,120,.14);color:#7dffb0}.d-tbl u.wait{background:rgba(255,154,31,.14);color:var(--fire-1)}

/* POS */
.d-main.pos{flex-direction:row;gap:16px}
.d-pgrid{flex:1.5;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-content:start}
.d-prod{border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:4px;text-align:left;transition:all .2s;color:#fff}
.d-prod:hover{border-color:var(--fire-2);transform:translateY(-2px)}
.d-prod:active{transform:scale(.96)}
.d-prod .th{height:46px;border-radius:9px;background:linear-gradient(135deg,rgba(255,154,31,.5),rgba(255,61,0,.25))}
.d-prod b{font-size:.78rem;font-weight:600}.d-prod em{font-style:normal;color:var(--fire-1);font-size:.8rem}
.d-cart{flex:1;min-width:190px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line);padding:16px;display:flex;flex-direction:column}
.d-cart h4{font-family:var(--f-head);font-size:.9rem;margin-bottom:10px}
.d-cl{flex:1;min-height:90px;display:flex;flex-direction:column;gap:6px;font-size:.78rem}
.d-cl p,.d-sum p{display:flex;justify-content:space-between;gap:8px}
.d-cl .empty{color:var(--muted);justify-content:center;margin-top:20px}
.d-sum{border-top:1px dashed var(--line-2);padding-top:10px;margin-top:8px;display:flex;flex-direction:column;gap:4px;font-size:.78rem;color:var(--muted)}
.d-sum .tot{color:#fff;font-weight:700;font-size:1rem;font-family:var(--f-head)}
.d-charge{margin-top:12px;border:0;border-radius:12px;padding:12px;background:var(--grad);color:#1a0800;font-family:var(--f-head);font-weight:800;letter-spacing:.14em;font-size:.76rem}

/* chat */
.chat{gap:12px}
.d-msgs{flex:1;display:flex;flex-direction:column;gap:10px;overflow:hidden;min-height:230px;justify-content:flex-end}
.d-msgs .m{max-width:82%;padding:11px 15px;border-radius:16px;font-size:.84rem;line-height:1.45;animation:dwIn .35s var(--ease)}
.d-msgs .a{background:rgba(255,255,255,.07);border-bottom-left-radius:4px;align-self:flex-start}
.d-msgs .u{background:var(--grad);color:#1a0800;font-weight:500;border-bottom-right-radius:4px;align-self:flex-end}
.d-msgs .typing{display:flex;gap:5px;padding:14px 16px}
.d-msgs .typing i{width:7px;height:7px;border-radius:50%;background:var(--fire-1);animation:blink 1.2s infinite}
.d-msgs .typing i:nth-child(2){animation-delay:.2s}.d-msgs .typing i:nth-child(3){animation-delay:.4s}
.d-chips{display:flex;flex-wrap:wrap;gap:8px}
.d-chips button{padding:8px 13px;border-radius:999px;border:1px solid rgba(255,106,0,.45);background:rgba(255,106,0,.08);font-size:.74rem;color:var(--fire-1);transition:all .2s}
.d-chips button:hover{background:rgba(255,106,0,.2);color:#fff}
.d-ask{display:flex;gap:8px}
.d-ask input{flex:1;min-width:0;padding:11px 14px;border-radius:12px;border:1px solid var(--line-2);background:rgba(0,0,0,.4);font-size:.82rem}
.d-ask input:focus{outline:none;border-color:var(--fire-2)}
.d-ask button{border:0;border-radius:12px;padding:0 16px;background:var(--grad);color:#1a0800;font-family:var(--f-head);font-weight:800;font-size:.68rem;letter-spacing:.12em}

/* kanban */
.d-kan{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.d-kan>div{border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--line);padding:10px;display:flex;flex-direction:column;gap:8px;align-content:start}
.d-kan h5{margin:0 0 2px;font-family:var(--f-head);font-size:.66rem;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.d-kan .card{text-align:left;padding:10px 11px;border-radius:10px;border:1px solid var(--line-2);background:#15100d;font-size:.76rem;color:#fff;transition:all .25s;animation:dwIn .35s var(--ease)}
.d-kan .card:hover{border-color:var(--fire-2);transform:translateY(-2px)}
.d-kan>div:nth-child(3) .card{opacity:.6;text-decoration:line-through}
.d-hint{font-size:.7rem;color:var(--muted);text-align:center}

/* feedback */
.d-fb{display:flex;gap:18px;align-items:center}
.d-fb .avg{text-align:center;padding:10px 18px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.d-fb .avg b{font-family:var(--f-head);font-size:2.2rem;font-weight:800;display:block;line-height:1}
.d-fb .avg span{color:var(--fire-1);font-size:.8rem;letter-spacing:2px}
.d-fb .avg small{display:block;color:var(--muted);font-size:.62rem}
.dist{flex:1;display:flex;flex-direction:column;gap:6px}
.dist p{height:7px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden}
.dist i,.d-src i,.mt i{display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--grad)}
.d-list{display:flex;flex-direction:column;gap:8px}
.d-list .row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line);font-size:.78rem;animation:dwIn .3s var(--ease)}
.d-list .st{color:var(--fire-1);letter-spacing:1px;font-size:.72rem;white-space:nowrap}
.d-list .st s{text-decoration:none;color:rgba(255,255,255,.15)}
.d-list .row p{flex:1;min-width:0}
.rp{border:1px solid rgba(255,106,0,.5);background:none;border-radius:999px;padding:5px 12px;font-size:.68rem;color:var(--fire-1)}
.rp.done{border-color:rgba(60,220,120,.4);color:#7dffb0}

/* smm */
.d-add{border:0;background:var(--grad);color:#1a0800;border-radius:999px;padding:9px 16px;font-family:var(--f-head);font-weight:800;font-size:.7rem;letter-spacing:.08em}
.d-acc{display:flex;gap:8px;flex-wrap:wrap}
.d-acc span{padding:5px 12px;border-radius:999px;border:1px solid var(--line-2);font-size:.7rem;color:var(--muted);cursor:pointer}
.d-acc span.on{border-color:rgba(255,106,0,.6);color:#fff;background:rgba(255,106,0,.12)}
.d-week{flex:1;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;min-height:150px}
.d-week .day{border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--line);padding:6px;display:flex;flex-direction:column;gap:4px;min-width:0}
.d-week h5{margin:0 0 2px;font-size:.62rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.po{padding:4px 6px;border-radius:6px;font-size:.62rem;background:linear-gradient(120deg,rgba(255,154,31,.8),rgba(255,61,0,.7));color:#1a0800;font-weight:700;animation:pop .4s var(--ease);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes pop{from{transform:scale(.4);opacity:0}}
.d-spark{display:flex;align-items:center;gap:14px;font-size:.72rem;color:var(--muted)}
.d-spark svg{flex:1;height:36px}
.d-spark path{fill:none;stroke:var(--fire-1);stroke-width:2;vector-effect:non-scaling-stroke}

/* matrimonial */
.d-filters{display:flex;gap:8px;flex-wrap:wrap}
.d-filters span{padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);font-size:.7rem;color:var(--ink-2)}
.d-pros{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.d-pro{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:16px 10px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.d-pro .av{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#1a0800;font-family:var(--f-head);font-weight:800}
.d-pro b{font-family:var(--f-head)}.d-pro small{color:var(--muted);font-size:.7rem}
.d-pro .mt{width:100%;height:5px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;margin-top:6px}
.d-pro em{font-style:normal;font-size:.68rem;color:var(--fire-1)}
.d-pro button{margin-top:auto;border:1px solid rgba(255,106,0,.55);background:none;color:#fff;border-radius:999px;padding:8px 12px;font-size:.7rem;font-weight:600;transition:all .25s}
.d-pro button.sent{background:var(--grad);color:#1a0800;border-color:transparent}

/* analytics */
.d-an{display:flex;flex-direction:column;gap:6px;flex:1;min-height:150px}
.d-an .big b{font-family:var(--f-head);font-size:1.9rem;font-weight:800;margin-right:10px}
.d-an .big span{color:var(--muted);font-size:.74rem}
.d-an svg{flex:1;width:100%;min-height:90px}
.d-an .ln{fill:none;stroke:#ff9a1f;stroke-width:2.5;vector-effect:non-scaling-stroke;transition:d .8s var(--ease)}
.d-an .fill{transition:d .8s var(--ease)}
.d-src{display:flex;flex-direction:column;gap:7px}
.d-src p{display:flex;align-items:center;gap:10px;font-size:.72rem;color:var(--muted)}
.d-src span{width:74px}.d-src p i{flex:1;height:6px;max-width:var(--w);background:var(--grad);border-radius:3px}

/* toast + auto cursor */
.d-toast{position:absolute;left:50%;bottom:18px;transform:translate(-50%,20px);padding:9px 16px;border-radius:999px;background:#1a1210;border:1px solid rgba(255,106,0,.5);font-size:.76rem;opacity:0;pointer-events:none;transition:all .35s var(--ease);z-index:5;white-space:nowrap}
.d-toast.on{opacity:1;transform:translate(-50%,0)}
.dw{position:relative}
.fcursor{position:absolute;left:0;top:0;width:22px;height:22px;z-index:20;pointer-events:none;opacity:0;transition:transform .75s var(--ease),opacity .3s;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.fcursor::before{content:"";position:absolute;inset:0;background:#fff;clip-path:polygon(0 0,0 100%,28% 76%,46% 100%,60% 92%,44% 70%,76% 70%);}
.fcursor::after{content:"";position:absolute;left:-8px;top:-8px;width:20px;height:20px;border-radius:50%;border:2px solid var(--fire-1);opacity:0}
.fcursor.on{opacity:1}
.fcursor.click::after{animation:rip .45s ease-out}
@keyframes rip{from{opacity:1;transform:scale(.4)}to{opacity:0;transform:scale(2.2)}}

@media(max-width:900px){
  .demo{grid-template-columns:1fr}
  .demo-tabs{flex-direction:row;overflow-x:auto;scrollbar-width:none;margin-inline:calc(clamp(16px,4vw,40px) * -1);padding:0 clamp(16px,4vw,40px) 4px}
  .demo-tabs::-webkit-scrollbar{display:none}
  .demo-tabs button{flex:none;white-space:nowrap}
  .demo-tabs button:hover{transform:none}
}
@media(max-width:640px){
  .d-side{display:none}
  .d-main{padding:14px}
  .d-main.pos{flex-direction:column}
  .d-pgrid{grid-template-columns:repeat(3,1fr)}
  .d-pros{grid-template-columns:1fr;gap:8px}
  .d-pro{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;text-align:left;padding:10px}
  .d-pro .av{width:40px;height:40px}
  .d-pro .mt,.d-pro em{display:none}
  .d-pro button{margin-top:0;margin-left:auto}
  .d-pro small{flex:1 1 60%}
  .d-kpis b{font-size:1.05rem}
  .d-week{grid-template-columns:repeat(7,1fr);gap:3px}
  .po{font-size:.5rem;padding:3px}
  .d-kan{grid-template-columns:1fr;} .d-kan>div{padding:8px}
  .dw-url{display:none}
  .dw,.demo-stage{min-height:0}
}

/* cafe POS + KDS */
.d-main.pos2{flex-direction:row;gap:16px;padding:16px}
.pos2 .p-left{flex:1.7;display:flex;flex-direction:column;gap:12px;min-width:0}
.pos2 .p-top{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.pos2 .seg button{padding:6px 10px;font-size:.7rem}
.pos2 .d-pgrid{grid-template-columns:repeat(4,1fr);gap:8px}
.pos2 .d-prod{padding:8px}
.pos2 .d-prod .th{height:40px;position:relative;overflow:hidden}
.pos2 .d-prod .th.burgers{background:linear-gradient(180deg,#ffb347 0 30%,#5a2a14 30% 55%,#8bc34a 55% 65%,#ff7043 65% 100%)}
.pos2 .d-prod .th.sides{background:repeating-linear-gradient(100deg,#ffd54f 0 8px,#ffb300 8px 14px)}
.pos2 .d-prod .th.shakes{background:linear-gradient(180deg,#fff3e0,#d7a77a 60%,#8d5524)}
.pos2 .d-prod .th.gaming{background:linear-gradient(135deg,#7c3aed,#ff3d00)}
.pos2 .d-prod .th.gaming::after{content:"";position:absolute;left:50%;top:50%;margin:-8px 0 0 -5px;border-style:solid;border-width:8px 0 8px 14px;border-color:transparent transparent transparent #fff}
.pos2 .d-prod b{font-size:.72rem;line-height:1.2}
.p-kds{border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:rgba(255,255,255,.03)}
.p-kds h5{margin:0 0 8px;font-family:var(--f-head);font-size:.62rem;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;display:flex;gap:8px;align-items:center}
.p-kds h5 i{font-style:normal;color:#7dffb0;font-size:.56rem;border:1px solid rgba(60,220,120,.4);border-radius:99px;padding:1px 7px}
.p-tk{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;min-height:50px}
.p-tk .empty{grid-column:1/-1;color:var(--muted);font-size:.74rem;text-align:center;align-self:center}
.tk{text-align:left;display:flex;flex-direction:column;gap:2px;padding:9px 10px;border-radius:10px;border:1px solid var(--line-2);background:#15100d;color:#fff;animation:pop .4s var(--ease)}
.tk b{font-family:var(--f-head);font-size:.82rem}.tk span{font-size:.68rem;color:var(--muted)}
.tk em{font-style:normal;font-size:.6rem;letter-spacing:.14em;font-weight:700}
.tk.new{border-color:#ffbd2e}.tk.new em{color:#ffbd2e}
.tk.cook{border-color:var(--fire-2)}.tk.cook em{color:var(--fire-1)}
.tk.ready{border-color:rgba(60,220,120,.6)}.tk.ready em{color:#7dffb0}
.tk.done{opacity:.45}
.pos2 .d-cart{flex:1;min-width:215px}
.d-cl .ln{align-items:center}.d-cl .ln>span:first-child{flex:1;min-width:0}
.qt{display:inline-flex;align-items:center;gap:7px;margin:0 8px;font-size:.74rem}
.qt button{width:20px;height:20px;border-radius:50%;border:1px solid var(--line-2);background:none;color:#fff;line-height:1;padding:0}
.qt button:hover{border-color:var(--fire-2);background:rgba(255,106,0,.15)}
.p-disc{margin-top:6px;border:1px dashed rgba(255,106,0,.5);background:none;color:var(--fire-1);border-radius:10px;padding:7px;font-size:.7rem}
.p-disc.on{background:rgba(255,106,0,.14);border-style:solid;color:#fff}
.pos2 .d-charge{font-size:.66rem;letter-spacing:.08em}
@media(max-width:900px){.d-main.pos2{flex-direction:column}.pos2 .d-pgrid{grid-template-columns:repeat(2,1fr)}.p-tk{grid-template-columns:1fr}}

.demo-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:26px}
.demo-links p{font-family:var(--f-head);font-weight:700;font-size:.66rem;letter-spacing:.22em;color:var(--muted);margin-right:8px}
.demo-links a{display:inline-flex;gap:8px;align-items:center;padding:10px 18px;border-radius:999px;border:1px solid var(--line-2);font-family:var(--f-head);font-weight:600;font-size:.78rem;transition:all .25s}
.demo-links a span{color:var(--fire-1);transition:transform .25s}
.demo-links a:hover{border-color:var(--fire-2);background:rgba(255,106,0,.1)}
.demo-links a:hover span{transform:translateX(4px)}