/* CyberPOS kitchen display demo + POS page extras (with cx-cyberbot.css for the demo badge) */
.kds{--amb:#e39b12;position:relative;width:100%;max-width:580px;background:#fff;border-radius:22px;border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(0,0,0,.28),10px 10px 0 var(--echo-2);overflow:hidden}
.kds .cb-demo{background:rgba(255,255,255,.18)}
.kds-head{display:flex;align-items:center;gap:12px;padding:16px 18px;background:var(--ink);color:#fff}
.kds-ico{flex:none;width:40px;height:40px;border-radius:12px;background:var(--red);display:grid;place-items:center;font-size:17px}
.kds-who{display:flex;flex-direction:column;line-height:1.25;flex:1;min-width:0}
.kds-who b{font-size:16px}.kds-who small{opacity:.7;font-size:12.5px}
.kds-net{display:inline-flex;align-items:center;gap:7px;margin-right:64px;font-size:12px;font-weight:600;padding:5px 11px;border-radius:99px;background:rgba(37,211,102,.16);color:#7be3a4;white-space:nowrap;transition:background .4s,color .4s}
.kds-net i{width:7px;height:7px;border-radius:50%;background:currentColor}
.kds.off .kds-net{background:rgba(227,155,18,.2);color:#ffc560}
.kds.off .kds-net i{animation:cbBlink 1s infinite}
.kds-board{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:150px;gap:10px;padding:14px;height:334px;overflow:hidden;align-content:start;background:#1b1b1b}
.kt{position:relative;display:flex;flex-direction:column;border-radius:12px;background:#fff;overflow:hidden;font-size:12px;opacity:0;transform:translateY(14px) scale(.96);transition:opacity .4s var(--ease),transform .5s var(--spring)}
.kt.in{opacity:1;transform:none}
.kt.bumping{opacity:0;transform:translateX(30px) scale(.9)}
.kt-h{display:flex;align-items:center;gap:7px;padding:7px 10px;background:#3a3a3a;color:#fff;transition:background .5s}
.kt-h b{flex:1;font-size:12.5px}
.kt-h em{font-style:normal;font-variant-numeric:tabular-nums;font-size:11.5px;opacity:.9}
.kt.amb .kt-h{background:var(--amb)}
.kt.red .kt-h{background:var(--red)}
.kt.red{box-shadow:0 0 0 2px var(--red)}
.kt-w{margin:0;padding:6px 10px 0;font-weight:600;font-size:11.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kt ul{list-style:none;margin:0;padding:4px 10px;display:flex;flex-direction:column;gap:2px;flex:1;min-height:0;overflow:hidden}
.kt li{line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.kt-f{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border-top:1px dashed var(--line)}
.kt-st{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2)}
.kt-bump{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:6px;background:var(--mist);color:#555;transition:background .3s,color .3s}
.kt.bumpnow .kt-bump{background:var(--ink);color:#fff}
.kt-dup{position:absolute;right:8px;top:34px;font-size:10px;font-weight:600;color:var(--red);background:#fff2f2;border:1px dashed #f0b3b3;padding:2px 7px;border-radius:99px;animation:crmIn .4s var(--ease) both .5s}
.kds-foot{position:relative;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--text-2)}
.kds-queue{display:inline-flex;align-items:center;gap:6px;opacity:.35;transition:opacity .3s,color .3s,transform .3s var(--spring)}
.kds-queue i{color:var(--amb)}
.kds.off .kds-queue{opacity:1;color:var(--ink)}
.kds-queue.pulse{transform:scale(1.05)}
.kds-legend{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.kds-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;background:#3a3a3a;margin-left:6px}
.kds-legend .k-amb{background:var(--amb)}.kds-legend .k-red{background:var(--red)}
.kds-toast{position:absolute;left:50%;bottom:58px;z-index:3;margin:0;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:12.5px;font-weight:600;background:#fff;color:var(--ink);padding:8px 14px;border-radius:99px;box-shadow:0 12px 26px -10px rgba(0,0,0,.55);opacity:0;transform:translate(-50%,10px) scale(.96);transition:opacity .35s var(--ease),transform .45s var(--spring);pointer-events:none}
.kds-toast i{color:var(--red)}
.kds-toast.on{opacity:1;transform:translate(-50%,0)}
@keyframes crmIn{from{opacity:0;transform:translateY(8px)}}

/* POS page: five promises */
.pos-prom{padding:clamp(60px,8vw,100px) 0 0}
.pos-prom-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.pp{position:relative;padding:26px 22px 24px;border-radius:20px;background:var(--mist);display:flex;flex-direction:column;gap:10px;transition:background .3s,box-shadow .45s var(--spring),transform .35s var(--ease)}
.pp:hover{background:#fff;box-shadow:inset 0 0 0 1px var(--line),6px 6px 0 var(--echo-2);transform:translateY(-3px)}
.pp i{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:18px;box-shadow:4px 0 0 var(--echo),8px 0 0 var(--echo-2)}
.pp:first-child i{background:var(--red)}
.pp b{font-family:var(--disp);font-weight:600;font-size:21px;line-height:1.1;letter-spacing:-.02em;margin-top:6px}
.pp span{color:var(--text-2);font-size:15px;line-height:1.5}

/* POS page visuals */
.vis-sync{padding:58px clamp(18px,3vw,34px) 28px}
.sy-track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sy-track::before{content:"";position:absolute;left:5%;right:5%;top:22px;height:3px;background:repeating-linear-gradient(90deg,var(--echo-2) 0 8px,transparent 8px 14px)}
.sy-step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .6s var(--spring);transition-delay:calc(var(--d) * .45s)}
.sy-step i{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--ink);font-size:17px;z-index:1}
.sy-step.amb i{border-color:#e39b12;color:#e39b12}
.sy-step.ok i{background:var(--ink);color:#fff}
.sy-step b{font-size:14.5px}
.sy-step small{font-size:12.5px;color:var(--text-2);line-height:1.4;max-width:20ch}
.vis.in .sy-step{opacity:1;transform:none}

.vis-hw{padding:58px clamp(18px,3vw,34px) 28px;display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.hw{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 8px;border-radius:14px;background:#fff;border:1px solid var(--line);text-align:center;font-size:13.5px;font-weight:600;opacity:0;transform:translateY(10px) rotate(-2deg);transition:opacity .45s var(--ease),transform .6s var(--spring);transition-delay:calc(var(--d) * .1s)}
.hw i{font-size:28px;color:var(--ink)}
.hw:nth-child(odd) i{color:var(--red)}
.vis.in .hw{opacity:1;transform:none}

.vis-ages{padding:58px clamp(18px,3vw,34px) 28px}
.ag-bar{position:relative;display:grid;grid-template-columns:8fr 7fr 5fr;height:40px;border-radius:10px;overflow:hidden;font-size:13px;font-weight:600;color:#fff}
.ag-bar span{display:flex;align-items:center;padding:0 12px}
.ag-bar span:nth-child(1){background:#3a3a3a}.ag-bar span:nth-child(2){background:#e39b12}.ag-bar span:nth-child(3){background:var(--red)}
.ag-bar::after{content:"";position:absolute;top:0;bottom:0;right:0;left:0;background:var(--mist);transform-origin:right;transition:transform 2.2s cubic-bezier(.45,0,.25,1) .3s}
.vis.in .ag-bar::after{transform:scaleX(0)}
.ag-scale{display:grid;grid-template-columns:8fr 7fr 5fr;margin-top:8px;font-size:12.5px;color:var(--text-2)}

.vis-po{padding:58px clamp(18px,3vw,34px) 28px;display:grid;grid-template-columns:1fr 1fr 1fr 1.1fr;gap:10px;align-items:stretch}
.po{position:relative;padding:14px 16px;border-radius:14px;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;gap:4px;opacity:0;transform:translateX(-10px);transition:opacity .45s var(--ease),transform .6s var(--spring);transition-delay:calc(var(--d) * .4s)}
.po small{font-size:12px;color:var(--text-2)}
.po b{font-family:var(--disp);font-size:24px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.po span{font-size:12.5px;color:var(--text-2)}
.po:not(:last-child)::after{content:"\f061";font:900 12px/1 "Font Awesome 6 Pro";position:absolute;right:-11px;top:50%;transform:translateY(-50%);color:var(--red);z-index:1}
.po.done{background:var(--ink);border-color:var(--ink);color:#fff}
.po.done small,.po.done span{color:#bbb}
.po.low b{color:var(--red)}
.vis.in .po{opacity:1;transform:none}

@media (max-width:1100px){.pos-prom-grid{grid-template-columns:repeat(2,1fr)}.pos-prom-grid .pp:first-child{grid-column:1/-1}}
@media (max-width:1000px){.vis-po{grid-template-columns:1fr 1fr}.po:nth-child(2)::after{display:none}}
@media (max-width:600px){
  .kds-board{grid-template-columns:repeat(2,1fr);grid-auto-rows:154px;height:338px;padding:10px;gap:8px}
  .kds-net{margin-right:0;font-size:11px}.kds .cb-demo{display:none}
  .kds-who small{display:none}
  .kds-legend{display:none}
  .kds-toast{font-size:11.5px;max-width:92%;white-space:normal;text-align:center;bottom:52px}
  .pos-prom-grid{grid-template-columns:1fr}
  .vis-hw{grid-template-columns:repeat(2,1fr)}.vis-hw .hw:last-child{grid-column:1/-1}
  .sy-track{grid-template-columns:1fr 1fr;row-gap:22px}.sy-track::before{display:none}
  .vis-po{grid-template-columns:1fr}.po::after{display:none}
}
@media (prefers-reduced-motion:reduce){.kt,.sy-step,.hw,.po{transition:none}.ag-bar::after{display:none}}