/* Vego · Velbil POS screen — 5.2.0, new look 5.5.0 (the owner's designs). The full-screen point of sale (#posapp,
   pos-screen.js). Desktop: blue menu 240 | page | bill 380 (Sell only). Tablet: icon menu 76. Phone: menu strip on top,
   the bill opens from the bar at the bottom. Blues only — 5.9.12: the new Velbil logo's blues (#001473 → #004EB5 → #0089F7); no orange.
   Sheets (item, return, scan) open above. */
#posapp{
  --vp-acc:#0A63E6;--vp-acc2:#0089F7;--vp-acc-ink:#fff;--vp-acc-soft:rgba(10,99,230,.08);--vp-acc-line:rgba(10,99,230,.3);
  --vp-grad:linear-gradient(90deg,#004EB5 0%,#0089F7 100%);
  --vp-nav-bg:linear-gradient(180deg,#001473 0%,#004EB5 52%,#0089F7 100%);
  --vp-top-bg:linear-gradient(90deg,#00349A 0%,#0063D2 55%,#0089F7 100%);
  --vp-bg:#EEF3FC;--vp-pane:#fff;--vp-ink:#0B1530;--vp-ink2:#3A4663;--vp-muted:#6B7690;
  --vp-line:#E3E9F4;--vp-field:#F5F8FD;--vp-head:#F2F6FD;
  --vp-ok:#0F8A52;--vp-ok-bg:#E2F6EC;--vp-low:#8A6400;--vp-low-bg:#FFF2C6;--vp-out:#C8283A;--vp-out-bg:#FDE8EB;
  --vp-sh:0 1px 2px rgba(11,21,48,.04),0 10px 26px -16px rgba(11,40,120,.22);
  --t-blue:#1463F3;--t-blue-bg:#E7EFFF;--t-violet:#6E44F0;--t-violet-bg:#EFE9FF;--t-green:#12955A;--t-green-bg:#E1F6EC;
  --t-red:#E0354B;--t-red-bg:#FFE8EB;--t-teal:#0B93A3;--t-teal-bg:#DDF5F7;
  position:fixed;inset:0;z-index:55;display:grid;
  grid-template-columns:240px minmax(0,1fr) 384px;grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:"nav top top" "nav main cart";
  background:var(--vp-top-bg) top/100% 140px no-repeat,var(--vp-bg);color:var(--vp-ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px;line-height:1.4
}
#posapp.nobill{grid-template-columns:240px minmax(0,1fr);grid-template-areas:"nav top" "nav main"}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #posapp{--vp-acc:#4DA3FF;--vp-acc-soft:rgba(77,163,255,.14);--vp-acc-line:rgba(77,163,255,.4);--vp-nav-bg:linear-gradient(180deg,#000B45 0%,#00307A 55%,#0058B0 100%);--vp-top-bg:linear-gradient(90deg,#001A5C 0%,#003F94 60%,#0062C4 100%);--vp-bg:#0B1020;--vp-pane:#141A2C;--vp-ink:#EEF2FB;--vp-ink2:#C3CBE0;--vp-muted:#8E99B5;--vp-line:#242C44;--vp-field:#1B2238;--vp-head:#1A2135;--vp-ok:#55D196;--vp-ok-bg:#12301F;--vp-low:#F2CF62;--vp-low-bg:#2E2A14;--vp-out:#FF8A95;--vp-out-bg:#38191E;--vp-sh:0 1px 2px rgba(0,0,0,.4);--t-blue:#7FA8FF;--t-blue-bg:#1A2A52;--t-violet:#B49BFF;--t-violet-bg:#2A2152;--t-green:#5ED39A;--t-green-bg:#14301F;--t-red:#FF8A95;--t-red-bg:#3A1A20;--t-teal:#5DD6E2;--t-teal-bg:#113236}}
:root[data-theme="dark"] #posapp{--vp-acc:#4DA3FF;--vp-acc-soft:rgba(77,163,255,.14);--vp-acc-line:rgba(77,163,255,.4);--vp-nav-bg:linear-gradient(180deg,#000B45 0%,#00307A 55%,#0058B0 100%);--vp-top-bg:linear-gradient(90deg,#001A5C 0%,#003F94 60%,#0062C4 100%);--vp-bg:#0B1020;--vp-pane:#141A2C;--vp-ink:#EEF2FB;--vp-ink2:#C3CBE0;--vp-muted:#8E99B5;--vp-line:#242C44;--vp-field:#1B2238;--vp-head:#1A2135;--vp-ok:#55D196;--vp-ok-bg:#12301F;--vp-low:#F2CF62;--vp-low-bg:#2E2A14;--vp-out:#FF8A95;--vp-out-bg:#38191E;--vp-sh:0 1px 2px rgba(0,0,0,.4);--t-blue:#7FA8FF;--t-blue-bg:#1A2A52;--t-violet:#B49BFF;--t-violet-bg:#2A2152;--t-green:#5ED39A;--t-green-bg:#14301F;--t-red:#FF8A95;--t-red-bg:#3A1A20;--t-teal:#5DD6E2;--t-teal-bg:#113236}
#posapp[hidden]{display:none!important}
body.posmode{overflow:hidden}
body.posmode .scrim{z-index:58}
body.posmode .sheet{z-index:60}
#posapp *{box-sizing:border-box}
#posapp button{font:inherit;color:inherit;cursor:pointer}
#posapp input,#posapp select,#posapp textarea{font:inherit;color:var(--vp-ink)}
#posapp svg{width:20px;height:20px;flex:none}
#posapp .num{font-variant-numeric:tabular-nums}
#posapp .empty{padding:28px 16px;color:var(--vp-muted);text-align:center}
#posapp :focus-visible{outline:2px solid var(--vp-acc);outline-offset:2px}

/* ---- the blue menu ---- */
.vp-nav{grid-area:nav;background:var(--vp-nav-bg);color:rgba(255,255,255,.88);display:flex;flex-direction:column;gap:4px;padding:calc(22px + env(safe-area-inset-top,0px)) 14px calc(16px + env(safe-area-inset-bottom,0px));padding-inline-start:max(14px,env(safe-area-inset-left,0px));overflow-y:auto;min-height:0;position:relative;z-index:1}
.vp-nav nav{display:flex;flex-direction:column;gap:6px;flex:1}
.vp-brand{padding:0 10px 22px}
.vp-brand{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.vp-brand img{width:180px;max-width:100%;height:auto;display:block}
.vp-brand span{align-self:flex-end;margin-inline-end:22px;font-size:13px;font-weight:700;letter-spacing:.32em;color:rgba(255,255,255,.85)}
.vp-nb{display:flex;align-items:center;gap:14px;width:100%;min-height:50px;padding:0 16px;border:0;border-radius:14px;background:none;color:rgba(255,255,255,.88)!important;font-weight:500;font-size:15.5px;text-align:start;position:relative}
.vp-nb svg{width:22px!important;height:22px!important}
.vp-nb:hover{background:rgba(255,255,255,.1);color:#fff!important}
.vp-nb.on{background:linear-gradient(90deg,#1E8BFF 0%,#4DBBFF 100%);color:#fff!important;font-weight:600;box-shadow:0 10px 24px -10px rgba(0,137,247,.9),inset 0 1px 0 rgba(255,255,255,.25)}
.vp-nb em{margin-inline-start:auto;font-style:normal;font-size:11px;font-weight:700;min-width:20px;height:20px;border-radius:10px;background:#fff;color:#004EB5;display:grid;place-items:center;padding:0 5px}
.vp-nb span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-exit{margin-top:12px;border-top:1px solid rgba(255,255,255,.18);border-radius:0 0 14px 14px;padding-top:8px;min-height:56px}

/* ---- the blue bar on top ---- */
.vp-top{grid-area:top;display:flex;align-items:center;gap:16px;padding:calc(16px + env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) 16px 32px;color:#fff;min-width:0}
.vp-co{flex:1;min-width:0}
.vp-co b{font-size:19px;font-weight:700;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.vp-cob{display:inline-flex;align-items:center;gap:8px;max-width:100%;border:0;background:none;color:#fff!important;padding:4px 0}
.vp-tr{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;min-width:0}
.vp-net{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.75);color:#fff;font-size:13.5px;font-weight:600;white-space:nowrap}
.vp-net i{width:9px;height:9px;border-radius:50%;background:#3BE38A;box-shadow:0 0 0 3px rgba(59,227,138,.25)}
.vp-net.off i{background:#FF6B7A;box-shadow:0 0 0 3px rgba(255,107,122,.25)}
.vp-chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;border:0;background:rgba(255,255,255,.16);color:#fff!important;font-size:13px;font-weight:600;white-space:nowrap}
.vp-chip svg{width:16px!important;height:16px!important}
.vp-chip.warn{background:#fff;color:var(--t-red)!important}
.vp-sep{width:1px;height:28px;background:rgba(255,255,255,.35);margin:0 4px}
.vp-me{display:inline-flex;align-items:center;gap:10px;border:0;background:none;color:#fff!important;padding:2px 4px;border-radius:999px;min-width:0}
.vp-me.on,.vp-me:hover{background:rgba(255,255,255,.12)}
.vp-av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;font-weight:700;font-size:15px;background:rgba(255,255,255,.95);color:#004EB5;border:2px solid rgba(255,255,255,.55)}
.vp-av.sm,.vp-av.lg{background:hsl(var(--h,222) 90% 94%);color:hsl(var(--h,222) 64% 38%);border:0}
.vp-av.sm{width:40px;height:40px;font-size:14px}
.vp-av.lg{width:64px;height:64px;font-size:21px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vp-av.sm,:root:not([data-theme="light"]) .vp-av.lg{background:hsl(var(--h,222) 38% 22%);color:hsl(var(--h,222) 80% 80%)}}
:root[data-theme="dark"] .vp-av.sm,:root[data-theme="dark"] .vp-av.lg{background:hsl(var(--h,222) 38% 22%);color:hsl(var(--h,222) 80% 80%)}
.vp-mn{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}

/* ---- the page ---- */
.vp-main{grid-area:main;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--vp-bg);border-start-start-radius:30px}
.vp-body{flex:1;min-height:0;overflow-y:auto;padding:28px 28px 28px 32px;display:flex;flex-direction:column;gap:18px}
.vp-body > *,.vp-pane > *,.vp-cart > *:not(.vp-lines){flex-shrink:0}
.vp-pane{display:flex;flex-direction:column;gap:18px}
.vp-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;align-items:start}
.vp-ph{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.vp-pht{flex:1;min-width:200px}
.vp-pht h1{margin:0;font-family:Sora,Inter,sans-serif;font-size:36px;font-weight:800;letter-spacing:-1px;line-height:1.1;text-wrap:balance}
.vp-pht p{margin:6px 0 0;color:var(--vp-muted);font-size:16px}
.vp-pha{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* number cards */
.vp-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.vp-kpi{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:18px;background:var(--vp-pane);border:1px solid var(--vp-line);box-shadow:var(--vp-sh);text-align:start;min-width:0}
button.vp-kpi:hover{border-color:var(--vp-acc-line)}
.vp-ki{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;flex:none;background:var(--t-blue-bg);color:var(--t-blue)}
.vp-ki svg{width:26px!important;height:26px!important}
.vp-ki.sm{width:44px;height:44px;border-radius:12px}
.vp-ki.sm svg{width:22px!important;height:22px!important}
.vp-ki.big{width:68px;height:68px;border-radius:20px}
.blue > .vp-ki,.vp-ki.blue{background:var(--t-blue-bg);color:var(--t-blue)}
.violet > .vp-ki,.vp-ki.violet{background:var(--t-violet-bg);color:var(--t-violet)}
.green > .vp-ki,.vp-ki.green{background:var(--t-green-bg);color:var(--t-green)}
.red > .vp-ki,.vp-ki.red{background:var(--t-red-bg);color:var(--t-red)}
.teal > .vp-ki,.vp-ki.teal{background:var(--t-teal-bg);color:var(--t-teal)}
.vp-kt{display:flex;flex-direction:column;gap:3px;min-width:0}
.vp-kt > span{font-size:14px;font-weight:500;color:var(--vp-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-kt > b{font-size:clamp(19px,1.55vw,26px);font-weight:800;letter-spacing:-.6px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-kt > small{font-size:12.5px;color:var(--vp-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-vs{font-style:normal;font-weight:700;display:inline-flex;align-items:center;gap:2px;color:var(--vp-muted)}
.vp-vs svg{width:14px!important;height:14px!important;stroke-width:2.6}
.vp-vs.up{color:var(--vp-ok)}
.vp-vs.dn{color:var(--vp-out)}

/* search + categories */
.vp-find{display:flex;gap:10px;align-items:center}
.vp-search{flex:1;min-width:0;display:flex;align-items:center;gap:12px;height:56px;padding:0 8px 0 18px;border-radius:16px;background:var(--vp-pane);border:1px solid var(--vp-line);box-shadow:var(--vp-sh);color:var(--vp-muted)}
.vp-search:focus-within{border-color:var(--vp-acc);box-shadow:0 0 0 3px var(--vp-acc-soft)}
.vp-search input{flex:1;min-width:0;height:100%;border:0;background:none;outline:0;font-size:16px}
.vp-search.sm{height:44px;flex:0 1 340px;box-shadow:none;border-radius:12px;padding:0 14px}
.vp-search.sm input{font-size:14px}
.vp-scan{width:44px;height:44px;border-radius:12px;border:0;background:none;color:var(--vp-ink2)!important;display:grid;place-items:center}
.vp-scan:hover{background:var(--vp-acc-soft);color:var(--vp-acc)!important}
.vp-scan svg{width:26px!important;height:26px!important}
.vp-cats{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.vp-cats::-webkit-scrollbar{display:none}
.vp-cat{flex:none;display:inline-flex;align-items:center;height:42px;padding:0 22px;border-radius:999px;border:0;background:#E3ECFC;font-size:14.5px;font-weight:500;color:var(--vp-ink)!important;white-space:nowrap}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vp-cat{background:var(--vp-field)}}
:root[data-theme="dark"] .vp-cat{background:var(--vp-field)}
.vp-cat.on{background:var(--vp-grad);color:#fff!important;font-weight:600;box-shadow:0 8px 18px -10px rgba(10,99,230,.9)}

/* product cards */
#posapp .vp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin:0;max-height:none;overflow:visible;align-content:start}
#posapp .vp-it{position:relative;display:flex;align-items:stretch;gap:14px;min-height:0;padding:12px;border:1px solid var(--vp-line);border-radius:20px;background:var(--vp-pane);box-shadow:var(--vp-sh);text-align:start;transition:border-color .12s,transform .08s}
#posapp .vp-it:hover{border-color:var(--vp-acc-line)}
#posapp .vp-it:active{transform:scale(.985)}
#posapp .vp-it.out{opacity:.62}
.vp-th{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:15px;letter-spacing:.3px;background:hsl(var(--h) 85% 94%);color:hsl(var(--h) 62% 36%);flex:none}
#posapp .vp-it .vp-th{width:104px;height:104px;border-radius:16px;font-size:30px;background:linear-gradient(145deg,hsl(var(--h) 90% 95%),hsl(var(--h) 80% 86%))}
.vp-th.sm{width:44px;height:44px;border-radius:12px;font-size:14px}
.vp-th.xl{width:100%;height:150px;border-radius:16px;font-size:44px;background:linear-gradient(145deg,hsl(var(--h) 90% 95%),hsl(var(--h) 80% 86%))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vp-th,:root:not([data-theme="light"]) #posapp .vp-it .vp-th,:root:not([data-theme="light"]) .vp-th.xl{background:hsl(var(--h) 38% 20%);color:hsl(var(--h) 75% 78%)}}
:root[data-theme="dark"] .vp-th,:root[data-theme="dark"] #posapp .vp-it .vp-th,:root[data-theme="dark"] .vp-th.xl{background:hsl(var(--h) 38% 20%);color:hsl(var(--h) 75% 78%)}
.vp-itx{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;padding:6px 44px 6px 0}
#posapp .vp-it b{font-size:16px;font-weight:600;line-height:1.3;color:var(--vp-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#posapp .vp-it .vp-pr{font-size:19px;font-weight:800;color:var(--vp-ink);letter-spacing:-.3px}
#posapp .vp-it .vp-st{margin-top:auto}
#posapp .vp-add{color:#fff!important;}
.vp-add{position:absolute;inset-inline-end:12px;bottom:12px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--vp-grad);color:#fff;box-shadow:0 8px 18px -8px rgba(10,99,230,.9)}
.vp-add svg{width:22px!important;height:22px!important;stroke-width:2.6}
.vp-st{justify-self:start;align-self:flex-start;display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;background:var(--vp-field);color:var(--vp-ink2)}
.vp-st svg{width:14px!important;height:14px!important}
#posapp .vp-st.ok{background:var(--vp-ok-bg);color:var(--vp-ok)}
#posapp .vp-st.low{background:var(--vp-low-bg);color:var(--vp-low)}
#posapp .vp-st.out{background:var(--vp-out-bg);color:var(--vp-out)}
#posapp .vp-st.pts{background:var(--t-blue-bg);color:var(--t-blue)}
#posapp .vp-trow .vp-st::before,#posapp .vp-inv .vp-st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;margin-inline-end:3px}

/* buttons */
.vp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;border-radius:14px;border:1.5px solid var(--vp-acc-line);background:var(--vp-pane);font-weight:600;font-size:15px;color:var(--vp-acc)!important;white-space:nowrap;flex:none}
.vp-btn:hover{border-color:var(--vp-acc);background:var(--vp-acc-soft)}
.vp-btn.sm{height:36px;padding:0 14px;font-size:13.5px;border-radius:11px}
.vp-btn.ghost{background:var(--vp-pane)}
.vp-btn.wide{width:100%}
.vp-btn:disabled{opacity:.45;pointer-events:none}
.vp-btn svg{width:20px!important;height:20px!important}
#posapp .vp-btn.vp-pri{background:var(--vp-grad);border-color:transparent;color:#fff!important;box-shadow:0 10px 22px -12px rgba(10,99,230,.9)}
#posapp .vp-btn.vp-pri:hover{filter:brightness(1.06)}
.vp-go{display:flex;align-items:center;justify-content:center;gap:10px;height:58px;padding:0 22px;border:0;border-radius:16px;background:var(--vp-grad);color:#fff!important;font-weight:700;font-size:17px;letter-spacing:-.1px;box-shadow:0 12px 26px -12px rgba(10,99,230,.95);flex:1;min-width:0;white-space:nowrap}
.vp-go:hover{filter:brightness(1.06)}
.vp-go:disabled{background:#AFC4EE;box-shadow:none;cursor:default}
.vp-go.sm{height:46px;font-size:14.5px;flex:none;align-self:flex-start;border-radius:13px}
.vp-go svg{width:22px!important;height:22px!important}
.vp-ib{width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:10px;background:none;color:var(--vp-muted)!important;flex:none}
.vp-ib:hover{background:var(--vp-acc-soft);color:var(--vp-acc)!important}

/* ---- the bill (Sell) ---- */
.vp-cart{grid-area:cart;display:flex;flex-direction:column;min-height:0;overflow-y:auto!important;background:var(--vp-pane);margin:22px max(22px,env(safe-area-inset-right,0px)) calc(22px + env(safe-area-inset-bottom,0px)) 0;border-radius:24px;box-shadow:var(--vp-sh);border:1px solid var(--vp-line);--cp:22px;padding:var(--cp);gap:14px}
.vp-ch{display:flex;align-items:center;gap:8px}
.vp-ch > div{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px}
.vp-ch b{font-family:Sora,Inter,sans-serif;font-size:23px;font-weight:800;letter-spacing:-.5px}
.vp-ch small{font-size:13px;color:var(--vp-muted)}
.vp-x{display:none;width:38px;height:38px;border-radius:50%;border:0;background:var(--vp-field);font-size:22px;line-height:1;color:var(--vp-ink2)!important}
.vp-cust{display:grid;grid-template-columns:1fr;gap:8px}
.vp-cu{display:flex;align-items:center;gap:10px;height:50px;padding:0 14px;border-radius:14px;border:1px solid var(--vp-line);background:var(--vp-pane);color:var(--vp-muted)}
.vp-cu:focus-within{border-color:var(--vp-acc);box-shadow:0 0 0 3px var(--vp-acc-soft)}
.vp-cu input{flex:1;min-width:0;height:100%;border:0;background:none;outline:0;font-size:15px;font-weight:600}
.vp-cust > input,.vp-row input,.vp-tender input,.vp-day input,.vp-day select,.vp-f input,.vp-f select,.vp-f textarea,.vp-filters select,.vp-pin{height:44px;border-radius:12px;border:1px solid var(--vp-line);background:var(--vp-field);padding:0 12px;min-width:0;outline:0}
.vp-cust > input:focus,.vp-row input:focus,.vp-tender input:focus,.vp-lp input:focus,.vp-f input:focus,.vp-f select:focus,.vp-f textarea:focus,.vp-filters select:focus,.vp-pin:focus{border-color:var(--vp-acc);box-shadow:0 0 0 3px var(--vp-acc-soft)}
.vp-cart .lybox,.vp-cart .qiloy,.vp-cart .loybox{margin:0}
.vp-lines{flex:1 0 auto;min-height:90px;display:flex;flex-direction:column;margin:0 -6px;padding:0 6px}
#posapp .vp-ln{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;grid-template-areas:"th nm nm lx" "th qty lt lt";align-items:center;column-gap:12px;row-gap:8px;padding:12px 0;border:0;border-bottom:1px solid var(--vp-line);border-radius:0;background:none}
.vp-lnm{grid-area:nm;display:flex;flex-direction:column;gap:3px;min-width:0}
#posapp .vp-ln > .vp-th{grid-area:th;align-self:start}
#posapp .vp-ln > .vp-qty{grid-area:qty;justify-self:start}
#posapp .vp-ln > .vp-lt{grid-area:lt}
#posapp .vp-ln > .vp-lx{grid-area:lx;align-self:start}
.vp-lnm b{font-size:14.5px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.vp-lnm small{font-size:11.5px;color:var(--vp-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-lp{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--vp-muted)}
.vp-lp input{width:70px;height:26px;border-radius:8px;border:1px solid transparent;background:var(--vp-field);padding:0 8px;font-size:12.5px;outline:0}
.vp-qty{display:flex;align-items:center;height:38px;border-radius:12px;border:1px solid var(--vp-line);overflow:hidden}
.vp-qty button{width:34px;height:100%;border:0;background:none;font-size:19px;font-weight:600;line-height:1;color:var(--vp-acc)!important}
.vp-qty button:hover{background:var(--vp-acc-soft)}
.vp-qty b{min-width:30px;height:100%;display:grid;place-items:center;font-size:15px;border-inline:1px solid var(--vp-line)}
.vp-lt{text-align:end;font-size:15px;font-weight:700;white-space:nowrap}
.vp-lx{width:30px;height:30px}
.vp-lx svg{width:18px!important;height:18px!important}
.vp-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--vp-muted);text-align:center;padding:24px 0}
.vp-empty svg{width:44px!important;height:44px!important;color:var(--vp-acc);opacity:.45;margin-bottom:4px}
.vp-empty b{color:var(--vp-ink2);font-size:15px}
.vp-empty span{font-size:13px}
.vp-sum{display:flex;flex-direction:column;gap:8px;padding-top:2px}
.vp-row,.vp-off{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:15px;color:var(--vp-ink2);min-height:26px}
.vp-row b{color:var(--vp-ink);font-weight:700}
.vp-row input{width:96px;height:34px;text-align:end;padding:0 10px}
.vp-off{color:var(--vp-ok)}
.vp-off.earn{color:var(--vp-acc)}
.vp-total{margin-top:4px;padding-top:12px;border-top:1px solid var(--vp-line);font-size:17px;color:var(--vp-ink)}
.vp-total span{font-weight:800;font-size:20px}
.vp-total b{font-size:28px;font-weight:800;letter-spacing:-.6px;white-space:nowrap}
.vp-pay{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
.vp-pm{display:flex;align-items:center;justify-content:center;gap:8px;height:54px;padding:0 6px;font-size:15px;white-space:nowrap;overflow:hidden;border-radius:14px;border:1px solid var(--vp-line);background:var(--vp-pane);font-weight:600;color:var(--vp-ink2)!important}
.vp-pm svg{width:22px!important;height:22px!important}
.vp-pm.on{border-color:transparent;background:var(--vp-grad);color:#fff!important;box-shadow:0 10px 22px -12px rgba(10,99,230,.9)}
#posapp .vp-tender{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end;margin:0}
#posapp .vp-tender span{margin:0}
.vp-tender label{display:flex;flex-direction:column;align-items:stretch;text-align:start;gap:4px;font-size:12.5px;font-weight:600;color:var(--vp-muted);min-width:0}
#posapp .vp-tender input{width:100%;height:46px;font-size:17px;font-weight:600}
.vp-chg{display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding-bottom:4px}
.vp-chg span{font-size:12.5px;font-weight:600;color:var(--vp-muted)}
.vp-chg b{font-size:22px;font-weight:800;color:var(--vp-ok);letter-spacing:-.3px}
.vp-quick{display:flex;gap:6px}
.vp-quick button{flex:1;min-width:0;height:36px;border-radius:10px;border:1px solid var(--vp-line);background:var(--vp-field);font-size:13px;font-weight:600;color:var(--vp-ink2)!important}
.vp-quick button:hover{border-color:var(--vp-acc-line);color:var(--vp-acc)!important}
.vp-act{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:10px;align-items:center;position:sticky;bottom:calc(-1 * var(--cp));margin:0 calc(-1 * var(--cp)) calc(-1 * var(--cp));padding:12px var(--cp) var(--cp);background:var(--vp-pane);box-shadow:0 -10px 18px -14px rgba(11,21,48,.25);z-index:1}
.vp-act .vp-btn{height:58px;border-radius:16px;color:var(--vp-ink)!important;border-color:var(--vp-line)}
.vp-act .vp-go{flex:none}
.vp-bar{display:none}

/* sale saved */
.vp-done{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}
.vp-okc{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--vp-ok-bg);color:var(--vp-ok)}
.vp-okc svg{width:38px!important;height:38px!important}
.vp-done h2{margin:4px 0 0;font-family:Sora,Inter,sans-serif;font-size:26px;font-weight:800;letter-spacing:-.6px}
.vp-done p{margin:0;color:var(--vp-muted)}
.vp-dk{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:6px}
.vp-dk > div{display:flex;flex-direction:column;gap:2px;padding:14px;border-radius:16px;background:var(--vp-field);text-align:start}
.vp-dk span{font-size:12.5px;font-weight:600;color:var(--vp-muted)}
.vp-dk b{font-size:18px;font-weight:700}
.vp-dk .big{grid-column:1/-1;background:var(--vp-ok-bg)}
.vp-dk .big b{font-size:30px;color:var(--vp-ok)}
.vp-pts{font-size:13px;color:var(--vp-acc)!important;font-weight:600}
.vp-dact{display:flex;gap:8px;width:100%}
.vp-dact .vp-btn{flex:1}
.vp-done .vp-go{width:100%;flex:none}

/* cards, tables */
.vp-card{display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:20px;background:var(--vp-pane);border:1px solid var(--vp-line);box-shadow:var(--vp-sh);min-width:0}
.vp-card .vp-go{flex:none}
.vp-ct{font-size:19px;font-weight:800;letter-spacing:-.3px}
.vp-cth{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vp-cth > svg{width:24px!important;height:24px!important;color:var(--vp-acc)}
.vp-cth > b{font-size:19px;font-weight:800;letter-spacing:-.3px}
.vp-cth > small{margin-inline-start:auto;font-size:12.5px;color:var(--vp-muted)}
.vp-cth > .vp-search{margin-inline-start:auto}
.vp-cta{max-width:560px;align-items:flex-start}
.vp-cta > span:not(.vp-ki){color:var(--vp-muted);font-size:14px}
.vp-muted{color:var(--vp-muted);font-size:13.5px;margin:0}
.vp-hint{display:flex;align-items:center;gap:8px}
.vp-hint svg{width:18px!important;height:18px!important}
.vp-foot{padding-top:2px}
.vp-more{text-align:center}
.vp-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;padding:14px 16px;border-radius:14px;background:var(--vp-acc-soft);color:var(--vp-ink2);font-size:14px}
.vp-note > span{flex:1;min-width:0}
.vp-note svg{color:var(--vp-acc)}
.vp-note.warn{background:var(--vp-out-bg);color:var(--vp-out);font-weight:600}
.vp-date{display:flex;align-items:center;gap:8px;height:48px;padding:0 12px 0 16px;border-radius:14px;border:1px solid var(--vp-line);background:var(--vp-pane);color:var(--vp-ink2)}
.vp-date input{height:100%;border:0;background:none;outline:0;font-size:15px;font-weight:600;min-width:0}
.vp-day{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--vp-muted)}
.vp-table{display:flex;flex-direction:column;background:var(--vp-pane);border:1px solid var(--vp-line);border-radius:16px;overflow:hidden}
.vp-tcard .vp-table{border-radius:14px}
.vp-thd{display:grid;align-items:center;gap:12px;padding:0 16px;min-height:48px;background:var(--vp-head);font-size:13.5px;font-weight:600;color:var(--vp-ink2)}
.vp-tr2{display:flex;align-items:center;gap:12px;padding:10px 16px;border:0;border-top:1px solid var(--vp-line);background:none;width:100%;text-align:start;min-height:62px}
.vp-thd + .vp-tr2,.vp-tr2:first-child{border-top:0}
.vp-trb:hover,.vp-tr2:hover{background:var(--vp-acc-soft)}
.vp-tr2.on{background:var(--vp-acc-soft);box-shadow:inset 3px 0 0 var(--vp-acc)}
.vp-tr2[hidden]{display:none}
.vp-trm{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;border:0;background:none;padding:0;text-align:start}
.vp-trm b{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-trm span{font-size:12.5px;color:var(--vp-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-tr2 > b{font-size:14.5px;font-weight:700;white-space:nowrap}
/* the column tables */
.vp-tx .vp-thd,.vp-tx .vp-tr2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.7fr) minmax(0,1.5fr) minmax(0,1.1fr) minmax(0,1fr) minmax(0,.9fr) 38px}
.vp-inv .vp-thd,.vp-inv .vp-tr2{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,.7fr) minmax(0,1.1fr)}
.vp-cus .vp-thd,.vp-cus .vp-tr2{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.3fr) minmax(0,.6fr) minmax(0,1.1fr) minmax(0,1fr)}
.vp-tr2 > [class^="vp-c"]{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14.5px}
.vp-tr2 .vp-c1{display:flex;align-items:center;gap:12px;border:0;background:none;padding:0;text-align:start;font-weight:600}
.vp-tx .vp-c1{color:var(--vp-acc)!important}
.vp-c3 small{display:block;font-size:12px;color:var(--vp-muted)}
.vp-c4{display:flex;align-items:center;gap:8px}
.vp-tx .vp-c4 svg{color:var(--vp-acc)}
.vp-filters{display:flex;gap:10px;flex-wrap:wrap}
.vp-filters .vp-search{flex:1 1 260px;height:48px;box-shadow:none;border-radius:13px}
.vp-filters select{height:48px;min-width:160px;flex:0 1 200px;background-color:var(--vp-pane)}
.vp-tcard{gap:14px}
.vp-split2{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.vp-det{position:sticky;top:0}
.vp-dh{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vp-dh b{font-size:22px;font-weight:800;letter-spacing:-.4px;flex:1;min-width:0}
.vp-dh2{display:flex;align-items:center;gap:14px}
.vp-dh2 b{display:block;font-size:20px;font-weight:800;letter-spacing:-.3px}
.vp-dh2 small{display:block;color:var(--vp-muted);font-size:13px;margin-top:2px}
.vp-kv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:10px;font-size:14px}
.vp-kv span{color:var(--vp-muted)}
.vp-kv b{font-weight:600;overflow-wrap:anywhere}
.vp-pcard{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:2px;padding:20px;border-radius:18px;background:var(--vp-top-bg);color:#fff}
.vp-pcard span{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;opacity:.92}
.vp-pcard span svg{width:18px!important;height:18px!important}
.vp-pcard b{font-size:44px;font-weight:800;letter-spacing:-1px;line-height:1.1}
.vp-pcard small{opacity:.85}
.vp-k3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.vp-k3 > div{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:14px;background:var(--vp-field);min-width:0}
.vp-k3 b{font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-k3 small{font-size:12px;color:var(--vp-muted)}
.vp-rp{display:flex;flex-direction:column}
.vp-rpr{display:flex;align-items:center;gap:12px;padding:10px 0;border:0;border-top:1px solid var(--vp-line);background:none;text-align:start;width:100%}
.vp-rpr:first-child{border-top:0}
.vp-rpr > span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column}
.vp-rpr small{color:var(--vp-muted);font-size:12.5px}
.vp-split{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vp-split > div{display:flex;flex-direction:column;padding:12px;border-radius:12px;background:var(--vp-field)}
.vp-row2{display:flex;gap:10px;flex-wrap:wrap}
.vp-pane .headrow,.vp-pane > .tools{margin:0}
.vp-offers .headrow{margin-top:0}

/* Sales today: charts */
.vp-charts{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:18px}
#posapp .vp-svg{width:100%;height:auto;display:block}
.vp-svg .gl{stroke:var(--vp-line);stroke-width:1}
.vp-svg .yl{fill:var(--vp-muted);font-size:12px;text-anchor:end;font-family:inherit}
.vp-svg .xl{fill:var(--vp-muted);font-size:12px;text-anchor:middle;font-family:inherit}
.vp-svg .ln{fill:none;stroke:var(--vp-acc);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.vp-svg .ar{fill:url(#vpg)}
.vp-svg .g0{stop-color:var(--vp-acc);stop-opacity:.28}
.vp-svg .g1{stop-color:var(--vp-acc);stop-opacity:.02}
.vp-svg .pkl{stroke:var(--vp-acc);stroke-dasharray:4 4;opacity:.5}
.vp-svg .pkc{fill:var(--vp-pane);stroke:var(--vp-acc);stroke-width:3}
.vp-svg .pkt{fill:var(--vp-ink);font-size:13px;font-weight:700;text-anchor:middle;font-family:inherit}
.vp-dn{position:relative;width:min(190px,100%);margin:6px auto 0}
#posapp .vp-donut,#posapp .vp-ring{width:100%;height:auto;display:block}
.vp-donut circle,.vp-ring circle{fill:none;stroke-width:5.5}
.vp-donut .d0,.vp-ring .r0{stroke:var(--vp-field)}
.vp-donut .d1{stroke:var(--vp-acc);stroke-linecap:butt}
.vp-donut .d2{stroke:#22C7C0}
.vp-ring .r1{stroke:var(--vp-acc);stroke-linecap:round}
.vp-dnc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.vp-dnc b{font-size:18px;font-weight:800;letter-spacing:-.4px}
.vp-dnc b.big{font-size:36px}
.vp-dnc small{color:var(--vp-muted);font-size:12px}
.vp-leg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vp-leg > div{display:grid;grid-template-columns:12px 1fr auto;column-gap:8px;align-items:center}
.vp-leg i{width:12px;height:12px;border-radius:50%}
.vp-leg i.c1{background:var(--vp-acc)}
.vp-leg i.c2{background:#22C7C0}
.vp-leg span{font-weight:600}
.vp-leg small{grid-column:2/-1;color:var(--vp-muted);font-size:12.5px}
.vp-tg{display:flex;flex-direction:column;align-items:center;gap:2px;margin:6px 0 0;text-align:center}
.vp-tg b{font-size:17px;font-weight:800}
.vp-tg small{color:var(--vp-muted)}
.vp-tg0{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px}

/* Shift */
.vp-banner{position:relative;overflow:hidden;display:flex;align-items:center;gap:18px;padding:22px 26px;border-radius:20px;background:var(--vp-top-bg);color:#fff;box-shadow:0 14px 30px -18px rgba(11,60,200,.8)}
.vp-banner::after{content:"";position:absolute;inset-inline-end:-40px;top:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.18),transparent);pointer-events:none}
.vp-bi{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;border:2px solid rgba(255,255,255,.8);flex:none}
.vp-bi svg{width:30px!important;height:30px!important}
.vp-banner b{display:block;font-size:22px;font-weight:800;letter-spacing:-.3px}
.vp-banner span{opacity:.9}
.vp-rec{display:flex;flex-direction:column;border:1px solid var(--vp-line);border-radius:14px;overflow:hidden}
.vp-rec .vp-row{padding:12px 16px;border-top:1px solid var(--vp-line);min-height:0}
.vp-rec .vp-row:first-child{border-top:0}
.vp-exp{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px;border-radius:14px;background:var(--vp-acc-soft);font-size:17px;font-weight:800}
.vp-exp b{color:var(--vp-acc);font-size:21px}
.vp-bal{display:flex;align-items:center;gap:12px;padding:16px;border-radius:14px}
.vp-bal[hidden]{display:none}
.vp-bal.ok{background:var(--vp-ok-bg);color:var(--vp-ok)}
.vp-bal.off{background:var(--vp-low-bg);color:var(--vp-low)}
.vp-bok{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:currentColor;flex:none}
.vp-bok svg{color:#fff;stroke-width:2.6}
.vp-bal b{flex:1;font-size:16px}
.vp-bd{font-weight:700}
.vp-inp{display:flex;align-items:center;gap:10px;height:50px;padding:0 14px;border-radius:14px;border:1px solid var(--vp-line);background:var(--vp-pane);color:var(--vp-muted)}
.vp-inp:focus-within{border-color:var(--vp-acc);box-shadow:0 0 0 3px var(--vp-acc-soft)}
.vp-inp input{flex:1;min-width:0;height:100%;border:0;background:none;outline:0;font-size:18px;font-weight:700;color:var(--vp-ink)}

/* Settings */
.vp-tabs{display:flex;gap:6px;border-bottom:1px solid var(--vp-line);overflow-x:auto;scrollbar-width:none}
.vp-tabs::-webkit-scrollbar{display:none}
.vp-tab{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 20px;border:0;border-bottom:3px solid transparent;background:none;font-size:15.5px;font-weight:600;color:var(--vp-ink2)!important;white-space:nowrap;margin-bottom:-1px}
.vp-tab.on{color:var(--vp-acc)!important;border-bottom-color:var(--vp-acc)}
.vp-sch{display:flex;align-items:center;gap:14px}
.vp-sch > div{flex:1;min-width:0}
.vp-sch b{display:block;font-size:18px;font-weight:800;letter-spacing:-.3px}
.vp-sch small{display:block;color:var(--vp-muted);font-size:13.5px;margin-top:2px}
.vp-f{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:12px;align-items:center;font-size:14.5px;color:var(--vp-ink2)}
.vp-f.vp-fc{grid-template-columns:1fr;gap:6px;font-weight:600}
.vp-f textarea{height:auto;min-height:72px;padding:10px 12px;resize:vertical}
.vp-sw{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 52px;gap:14px;align-items:center;cursor:pointer;padding:6px 0}
.vp-sw b{display:block;font-size:14.5px;font-weight:600}
.vp-sw small{display:block;color:var(--vp-muted);font-size:12.5px;margin-top:1px}
.vp-sw input{position:absolute;inset-inline-end:0;top:50%;width:52px;height:30px;margin:-15px 0 0;opacity:0;cursor:pointer}
.vp-sw i{width:52px;height:30px;border-radius:999px;background:#C9D3E6;position:relative;transition:background .15s;pointer-events:none}
.vp-sw i::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.vp-sw input:checked + i{background:var(--vp-grad)}
.vp-sw input:checked + i::after{transform:translateX(22px)}
[dir="rtl"] .vp-sw input:checked + i::after{transform:translateX(-22px)}
.vp-sw input:focus-visible + i{outline:2px solid var(--vp-acc);outline-offset:2px}
.vp-sw input:disabled + i{opacity:.5}
.vp-chk{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--vp-ink2);cursor:pointer}
.vp-chk input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--vp-acc);flex:none}
.vp-grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.vp-grid3 .vp-day{flex-direction:column;align-items:stretch;gap:4px}
.vp-grid3 .vp-day input,.vp-grid3 .vp-day select{width:100%}
.vp-card > .vp-day{flex-wrap:wrap}
.vp-pin{flex:1 1 100%;width:100%}
.vp-row2 .vp-day input{width:130px}
.vp-shiftc{border-color:var(--vp-acc-line);background:var(--vp-acc-soft)}
.vp-table.flat{box-shadow:none;border-radius:12px}
.vp-table.flat .vp-tr2{min-height:52px}
.vp-ready{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:12px;background:var(--vp-field)}
.vp-other{display:flex;flex-direction:column;gap:8px;padding:10px 0;border-top:1px solid var(--vp-line)}
.vp-other:first-of-type{border-top:0}
.vp-card > .vp-day input{min-width:0;flex:1}
#posapp .vp-row2 > .vp-pin{flex:1 1 100%;width:100%;max-width:none}
.vp-vbacct .vp-card{max-width:620px}

/* 5.3.0: manager PIN */
.vp-modal{position:fixed;inset:0;z-index:62;display:grid;place-items:center;padding:20px;background:rgba(6,18,38,.45)}
.vp-mbox{width:min(340px,100%);display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:20px;background:var(--vp-pane);box-shadow:0 24px 60px -20px rgba(6,18,38,.6)}
.vp-mbox b{font-family:Sora,Inter,sans-serif;font-size:19px}
.vp-mbox p{margin:0;color:var(--vp-muted);font-size:13.5px}
.vp-mbox input{height:50px;border-radius:12px;border:1px solid var(--vp-line);background:var(--vp-field);padding:0 14px;font-size:22px;letter-spacing:6px;text-align:center;outline:0}
.vp-mbox input:placeholder-shown{letter-spacing:0;font-size:15px}
.vp-mbox input:focus{border-color:var(--vp-acc);box-shadow:0 0 0 3px var(--vp-acc-soft)}
.vp-mbox .vp-row2{justify-content:flex-end}
.vp-err{min-height:16px;color:var(--vp-out);font-size:12.5px;font-weight:600}
/* 5.4.0: started without internet */
.vp-offbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:20px 28px 0 32px;padding:12px 16px;border-radius:14px;background:var(--vp-low-bg);color:var(--vp-low);font-size:13.5px;font-weight:600}
.vp-offbar span{flex:1;min-width:0}
.vp-offbar.on{background:var(--vp-ok-bg);color:var(--vp-ok)}
.lk-off{display:block;margin-bottom:10px;color:var(--ink2,#3B4660);font-weight:500}
.lk-offgo{width:100%;min-height:46px;border-radius:999px!important;background:#0A63E6!important;color:#fff!important;border:0!important}
#lockmsg:has(.lk-off){background:#EEF3FF;border-color:#D5E0FB;color:inherit}

/* ---- big screens ---- */
@media (min-width:1500px){#posapp:not(.nobill){grid-template-columns:256px minmax(0,1fr) 420px}#posapp.nobill{grid-template-columns:256px minmax(0,1fr)}}
/* ---- laptop: the details panel goes under the list ---- */
@media (max-width:1439px){
  .vp-split2{grid-template-columns:minmax(0,1fr)}
  .vp-det{position:static}
  .vp-charts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vp-ch1{grid-column:1/-1}
}
/* ---- tablet + small laptop: icon menu ---- */
@media (max-width:1279px){
  #posapp:not(.nobill){grid-template-columns:80px minmax(0,1fr) 350px}
  #posapp.nobill{grid-template-columns:80px minmax(0,1fr)}
  .vp-nav{padding-inline:12px;align-items:center}
  .vp-brand{padding:0 0 16px}
  .vp-brand img{content:url("/velbil-192.png");width:46px;border-radius:13px}
  .vp-brand span{display:none}
  .vp-nb{justify-content:center;padding:0;width:54px;min-height:50px}
  .vp-nb > span{display:none}
  .vp-nb em{position:absolute;top:4px;inset-inline-end:2px;min-width:16px;height:16px;font-size:10px}
  .vp-top{padding-inline:22px max(18px,env(safe-area-inset-right,0px))}
  .vp-mn{display:none}
  .vp-body{padding:22px 20px 22px 22px}
  .vp-cart{margin:18px max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) 0;--cp:18px}
  .vp-pht h1{font-size:30px}
  #posapp .vp-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
  #posapp .vp-it .vp-th{width:84px;height:84px;font-size:24px}
  .vp-offbar{margin:16px 20px 0 22px}
}
/* ---- phone, and tablet upright when the bill would be too narrow ---- */
@media (max-width:899px){
  #posapp,#posapp.nobill,#posapp:not(.nobill){grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"nav" "top" "main";background:var(--vp-top-bg) top/100% 190px no-repeat,var(--vp-bg)}
  .vp-nav{flex-direction:row;align-items:center;gap:4px;background:none;padding:calc(8px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 4px max(12px,env(safe-area-inset-left,0px));overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .vp-nav::-webkit-scrollbar{display:none}
  .vp-nav nav{flex-direction:row;gap:4px;flex:none}
  .vp-brand{display:none}
  .vp-nb{width:auto;min-height:40px;padding:0 14px;gap:8px;font-size:14px;flex:none}
  .vp-nb > span{display:inline}
  .vp-nb svg{width:19px!important;height:19px!important}
  .vp-nb em{position:static}
  .vp-exit{order:-1;margin:0;border:0;border-radius:12px;padding:0 10px;background:rgba(255,255,255,.14);min-height:40px}
  .vp-exit > span{display:none!important}
  .vp-top{padding:6px max(16px,env(safe-area-inset-right,0px)) 14px max(16px,env(safe-area-inset-left,0px));gap:10px}
  .vp-co b{font-size:16px}
  .vp-sep{display:none}
  .vp-av{width:36px;height:36px;font-size:13px}
  .vp-main{border-radius:24px 24px 0 0}
  .vp-pht h1{font-size:28px}
  .vp-pht p{font-size:14.5px}
  .vp-body{padding:20px max(16px,env(safe-area-inset-right,0px)) calc(96px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));gap:16px}
  .vp-cart{position:fixed;inset:0;top:auto;z-index:57;margin:0;height:min(92dvh,100%);border:0;border-radius:24px 24px 0 0;box-shadow:0 -18px 40px -12px rgba(6,18,38,.35);transform:translateY(105%);transition:transform .22s ease;--cp:16px;padding:18px max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
  .vp-cart.open{transform:none}
  .vp-x{display:grid;place-items:center}
  .vp-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;position:fixed;z-index:56;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));height:60px;padding:0 24px;border:0;border-radius:18px;background:var(--vp-grad);color:#fff!important;font-weight:600;font-size:15px;box-shadow:0 14px 30px -12px rgba(10,99,230,.85)}
  .vp-bar b{font-size:19px;font-weight:800}
  .vp-charts{grid-template-columns:minmax(0,1fr)}
  .vp-offbar{margin:14px max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
  /* lists on a narrow screen: the columns that matter */
  .vp-thd{display:none!important}
  .vp-tx .vp-tr2{grid-template-columns:minmax(0,1fr) auto auto 38px}
  .vp-tx .vp-c2,.vp-tx .vp-c4{display:none}
  .vp-tx .vp-c3{grid-row:2;grid-column:1/3;font-size:12.5px;color:var(--vp-muted)}
  .vp-inv .vp-tr2{grid-template-columns:minmax(0,1fr) auto auto}
  .vp-inv .vp-c2,.vp-inv .vp-c4{display:none}
  .vp-cus .vp-tr2{grid-template-columns:minmax(0,1fr) auto auto}
  .vp-cus .vp-c2,.vp-cus .vp-c3{display:none}
}
@media (max-width:560px){
  .vp-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .vp-kpi{flex-direction:column;align-items:flex-start;gap:10px;padding:14px}
  .vp-ki{width:44px;height:44px;border-radius:12px}
  .vp-ki svg{width:22px!important;height:22px!important}
  .vp-kt > b{font-size:20px}
  #posapp .vp-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  #posapp .vp-it .vp-th{width:72px;height:72px;font-size:21px}
  .vp-pha{width:100%}
  .vp-pha > *{flex:1 1 auto}
  .vp-tr .vp-net{width:36px;padding:0;justify-content:center;font-size:0;gap:0}
  .vp-chip{padding:0 10px}
  .vp-k3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vp-f{grid-template-columns:1fr}
  .vp-banner{padding:18px}
  .vp-act{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
}
@media (max-width:899px){.vp-cus .vp-c4{display:none}.vp-cus .vp-tr2{grid-template-columns:minmax(0,1fr) auto}}
/* 5.9.0: number pad, chosen line, salesman, key hints */
#posapp .vp-ln > button.vp-th{border:0;padding:0;cursor:pointer;font:inherit}
#posapp .vp-lnm b[data-act]{cursor:pointer}
#posapp .vp-ln.sel{background:var(--vp-acc-soft);border-radius:12px;padding-inline:8px;margin-inline:-8px;border-bottom-color:transparent}
.vp-ib.on{background:var(--vp-acc-soft);color:var(--vp-acc)!important}
.vp-key{font-size:10.5px;font-weight:700;opacity:.7;margin-inline-start:2px;letter-spacing:.02em}
.vp-pad{display:grid;gap:8px;margin:10px 0 4px}
.vp-pdm{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.vp-pdm button{height:38px;border:1px solid var(--vp-line);border-radius:10px;background:var(--vp-pane);color:var(--vp-ink)!important;font-weight:700;font-size:13.5px;display:flex;align-items:center;justify-content:center;gap:4px}
.vp-pdm button small{font-size:10px;opacity:.6;font-weight:700}
.vp-pdm button.on{background:var(--vp-acc);border-color:var(--vp-acc);color:#fff!important}
.vp-pdv{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:12px;background:var(--vp-field);min-width:0}
.vp-pdv span{font-size:12.5px;color:var(--vp-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.vp-pdv b{font-size:24px;font-weight:700;color:var(--vp-ink)}
.vp-pdk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.vp-pk{height:46px;border:1px solid var(--vp-line);border-radius:12px;background:var(--vp-pane);color:var(--vp-ink)!important;font-size:21px;font-weight:600;display:grid;place-items:center;touch-action:manipulation}
.vp-pk:active{background:var(--vp-acc-soft)}
.vp-pk svg{width:22px;height:22px}
.vp-pk.cl{font-size:15px;color:var(--vp-muted)!important}
.vp-pk.en{grid-column:4;grid-row:3 / span 2;height:auto;font-size:16px;background:var(--vp-acc);border-color:var(--vp-acc);color:#fff!important;font-weight:700}
.vp-slm{display:flex;align-items:center;gap:8px;width:100%;margin-top:8px;padding:9px 12px;border:1px solid var(--vp-line);border-radius:12px;background:var(--vp-pane);color:var(--vp-ink)!important;font-weight:600;text-align:start}
.vp-slm svg{width:18px;height:18px;flex:none;color:var(--vp-acc)}
.vp-slm span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-slm small{font-size:10.5px;color:var(--vp-muted);font-weight:700}
.vp-slm.need{border-color:var(--vp-out);color:var(--vp-out)!important}
.vp-slp{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;max-height:180px;overflow:auto}
.vp-slp button{display:flex;align-items:center;gap:6px;padding:6px 10px 6px 6px;border:1px solid var(--vp-line);border-radius:999px;background:var(--vp-pane);color:var(--vp-ink)!important;font-weight:600;font-size:13px}
.vp-slp button.on{border-color:var(--vp-acc);background:var(--vp-acc-soft)}
.vp-slp .vp-av{width:24px;height:24px;font-size:10px;background:var(--vp-acc-soft);color:var(--vp-acc);border:0}
.vp-bys{display:flex;flex-direction:column}
.vp-bys div{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:baseline;padding:10px 0;border-top:1px solid var(--vp-line)}
.vp-bys div:first-child{border-top:0}
.vp-bys span{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-bys small{color:var(--vp-muted);font-size:12px}
/* 5.9.1 device codes: the code a manager makes, and the box a new till types it in */
#posapp .vp-dcode{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:10px;padding:16px;border-radius:14px;background:var(--vp-acc-soft);border:1px solid var(--vp-acc-line);text-align:center}
#posapp .vp-dcode b{font-size:34px;letter-spacing:.12em;color:var(--vp-acc);font-variant-numeric:tabular-nums}
#posapp .vp-dcode span{font-size:13px;color:var(--vp-ink2)}
#posapp .vp-dclaim input{font-size:20px;letter-spacing:.14em;min-height:44px}
#posapp .vp-dclaim .vp-go{min-height:44px}
/* 5.9.2: the pad lives in the bill's bottom dock with Hold / Charge, always in view; the lines scroll above it */
.vp-dock{position:sticky;bottom:calc(-1 * var(--cp));margin:0 calc(-1 * var(--cp)) calc(-1 * var(--cp));padding:10px var(--cp) var(--cp);background:var(--vp-pane);box-shadow:0 -10px 18px -14px rgba(11,21,48,.25);z-index:1;display:flex;flex-direction:column;gap:10px}
.vp-dock .vp-act{position:static;margin:0;padding:0;box-shadow:none;background:none}
.vp-dock .vp-pad{margin:0;gap:6px}
.vp-dock .vp-pdm button{height:34px}
.vp-dock .vp-pdv{padding:6px 12px}
.vp-dock .vp-pdv b{font-size:21px}
.vp-pk.z{grid-column:1 / span 2}
@media (max-height:760px){.vp-dock .vp-pk{height:38px}.vp-dock .vp-pdv{padding:3px 12px}.vp-dock .vp-pdv b{font-size:18px}.vp-dock .vp-pdm button{height:30px}}
/* 5.9.2: more items on screen, like a counter till — small tiles: 4–5 in a row on a till, 2 on a phone */
#posapp .vp-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
#posapp .vp-it{flex-direction:column;gap:8px;padding:10px;border-radius:16px}
#posapp .vp-it .vp-th{width:52px;height:52px;border-radius:14px;font-size:18px}
#posapp .vp-itx{padding:0;gap:3px}
#posapp .vp-it .vp-pr,#posapp .vp-it .vp-st{margin-inline-end:38px}
#posapp .vp-it b{font-size:14px;line-height:1.25;min-height:2.5em}
#posapp .vp-it .vp-pr{font-size:16px;letter-spacing:-.2px}
#posapp .vp-it .vp-st{font-size:11px;padding:2px 7px;align-self:flex-start}
#posapp .vp-it .vp-add{width:34px;height:34px;inset-inline-end:10px;bottom:10px}
#posapp .vp-it .vp-add svg{width:18px!important;height:18px!important}
@media (max-width:560px){
  #posapp .vp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #posapp .vp-it .vp-th{width:46px;height:46px;font-size:16px}
}
/* 5.9.13: Sales today like the owner's terminal mockup — a small chart in each number card, Top items beside the curve */
#posapp .vp-kpi:has(.vp-spark){flex-wrap:wrap;row-gap:10px}
#posapp .vp-kpi .vp-spark{flex:0 0 100%;width:100%;height:34px;overflow:visible}
.vp-spark .sl{fill:none;stroke:var(--vp-acc);stroke-width:2;stroke-linecap:round}
.vp-spark .sa{fill:var(--vp-acc-soft)}
.vp-spark .sb1{fill:var(--vp-acc);opacity:.45}
.vp-spark .sb2{fill:var(--vp-acc)}
.vp-spark .sb0{stroke:var(--vp-line);stroke-width:2}
.vp-charts{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr)!important;grid-template-areas:"a a t" "p g t"}
.vp-ch1{grid-area:a}.vp-ch2{grid-area:p}.vp-ch3{grid-area:g}.vp-ch4{grid-area:t}
.vpx-top{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.vpx-ti{display:flex;align-items:center;gap:12px;min-width:0}
.vpx-tin{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.vpx-tit{display:flex;justify-content:space-between;gap:8px;font-size:13.5px}
.vpx-tit b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.vpx-tit span{font-weight:700;flex:none}
.vpx-tib{height:7px;border-radius:99px;background:var(--vp-field);overflow:hidden}
.vpx-tib i{display:block;height:100%;border-radius:99px;background:var(--vp-grad)}
.vpx-tin small{color:var(--vp-muted);font-size:12px}
.vpx-empty{padding:30px 6px;text-align:center}
.vp-rf{display:flex;align-items:baseline;gap:8px;margin:12px 0 0;padding-top:10px;border-top:1px solid var(--vp-line);font-size:13px;flex-wrap:wrap}
.vp-rf span{color:var(--vp-muted)}
.vp-rf small{margin-inline-start:auto;color:var(--vp-muted);font-size:12px}
@media (max-width:1180px){.vp-charts{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-areas:"a a" "t t" "p g"}}
@media (max-width:560px){.vp-charts{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"a" "t" "p" "g"}}
.vp-spark .sl{vector-effect:non-scaling-stroke}
/* 5.9.14: big till keys (pos-keypad.js vpTill) — the bill column grows and the keys are big enough to see from the counter */
#posapp.till:not(.nobill){grid-template-columns:240px minmax(0,1fr) minmax(470px,36vw)}
.vp-till{position:sticky;bottom:calc(-1 * var(--cp));margin:8px calc(-1 * var(--cp)) calc(-1 * var(--cp));padding:12px var(--cp) var(--cp);background:var(--vp-pane);box-shadow:0 -10px 18px -14px rgba(6,18,38,.35);display:flex;flex-direction:column;gap:8px;z-index:2}
.vp-tf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
#posapp .vp-tfb{position:relative;min-height:50px;border:0;border-radius:12px;background:linear-gradient(180deg,#0A63E6,#004EB5);color:#fff!important;font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
#posapp .vp-tfb svg{width:18px!important;height:18px!important;flex:none}
#posapp .vp-tfb span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#posapp .vp-tfb .vp-key{position:absolute;top:4px;inset-inline-end:6px;font-size:10px;opacity:.8;color:#fff}
#posapp .vp-tfb:disabled{opacity:.45}
.vp-tdv{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 12px;padding:10px 14px;border-radius:14px;background:var(--vp-head);border:1px solid var(--vp-line)}
.vp-tdv span{font-size:13px;color:var(--vp-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-tdv b{grid-row:1/3;grid-column:2;font-size:34px;font-weight:800;letter-spacing:-.5px;color:var(--vp-ink)}
.vp-tdv em{font-style:normal;font-size:14px;font-weight:700;color:var(--vp-ok)}
.vp-tkeys{display:grid;grid-template-columns:1.15fr 1fr 1fr 1fr 1.1fr;gap:6px}
#posapp .vp-tk{min-height:62px;border:1px solid var(--vp-line);border-radius:12px;background:var(--vp-field);color:var(--vp-ink)!important;font-size:28px;font-weight:600;display:grid;place-items:center;touch-action:manipulation;user-select:none}
#posapp .vp-tk:active{transform:scale(.97);background:var(--vp-acc-soft)}
#posapp .vp-tk.md,#posapp .vp-tk.cl,#posapp .vp-tk.bk{font-size:17px;background:var(--vp-pane)}
#posapp .vp-tk.md small{display:block;font-size:10px;font-weight:600;color:var(--vp-muted);line-height:1}
#posapp .vp-tk.md.on{background:var(--vp-acc);color:#fff!important;border-color:var(--vp-acc)}
#posapp .vp-tk.md.on small{color:rgba(255,255,255,.85)}
#posapp .vp-tk.en{font-size:18px;background:var(--vp-grad);color:#fff!important;border:0}
#posapp .vp-tk.sd{display:flex;flex-direction:column;gap:2px;font-size:14px;background:#33435E;color:#fff!important;border:0}
#posapp .vp-tk.sd svg{width:20px!important;height:20px!important}
#posapp .vp-tk.sd.on{background:#0B1530;box-shadow:inset 0 0 0 2px #4DA3FF}
#posapp .vp-tbot{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr) minmax(0,1fr);gap:6px}
#posapp .vp-tbot .vp-tfb{min-height:60px;background:#33435E}
#posapp .vp-tbot .vp-tfb:last-child{background:#5B2333}
#posapp .vp-tgo{position:relative;min-height:60px;border:0;border-radius:14px;background:var(--vp-grad);color:#fff!important;font-weight:700;font-size:17px;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 12px 24px -12px rgba(10,99,230,.85)}
#posapp .vp-tgo svg{width:22px!important;height:22px!important}
#posapp .vp-tgo .vp-key{position:absolute;top:5px;inset-inline-end:8px;font-size:10px;color:rgba(255,255,255,.85)}
#posapp .vp-tgo:disabled{opacity:.5}
@media (max-height:980px){#posapp .vp-tk{min-height:54px;font-size:24px}#posapp #posapp .vp-tfb{min-height:44px}#posapp .vp-tbot .vp-tfb,#posapp .vp-tgo{min-height:52px}.vp-tdv b{font-size:28px}}
@media (max-height:900px){#posapp .vp-tk{min-height:48px;font-size:22px}#posapp #posapp .vp-tfb{min-height:40px;font-size:13px}#posapp .vp-tbot .vp-tfb,#posapp .vp-tgo{min-height:48px}.vp-tdv{padding:6px 12px}.vp-tdv b{font-size:24px}}
.vp-taxsum{display:flex;flex-direction:column;gap:6px;margin:12px 0;padding:12px 14px;border-radius:14px;background:var(--vp-field,#F5F8FD)}
.vp-taxsum div{display:flex;justify-content:space-between;gap:10px}
.vp-taxsum .tot{border-top:1px solid var(--vp-line,#E3E9F4);padding-top:8px;font-size:17px;font-weight:800}
.vp-keys{display:flex;flex-direction:column;gap:6px}
.vp-keys div{display:flex;align-items:center;gap:12px;padding:8px 2px;border-bottom:1px solid var(--line,#E3E9F4)}
.vp-keys kbd{flex:none;min-width:92px;text-align:center;padding:5px 8px;border-radius:8px;border:1px solid var(--line,#D5DEEE);border-bottom-width:3px;background:var(--pane,#fff);font:600 13px/1.2 ui-monospace,Menlo,monospace}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #posapp .vp-tk.sd{background:#25314A}:root:not([data-theme="light"]) #posapp .vp-tbot .vp-tfb{background:#25314A}}
:root[data-theme="dark"] #posapp .vp-tk.sd,:root[data-theme="dark"] #posapp .vp-tbot .vp-tfb{background:#25314A}
/* 5.9.23 India: UPI QR — the button under the payment choice and the QR sheet (white behind the QR so every UPI app reads it) */
.vp-upib button{display:flex;align-items:center;justify-content:center;gap:6px}.vp-upib svg{width:16px;height:16px}
.vp-upi{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.vp-upiq{background:#fff;padding:12px;border-radius:14px;border:1px solid var(--line,#e5e7eb);min-height:120px;display:flex;align-items:center;justify-content:center}
.vp-upiq img{display:block;width:240px;height:240px;max-width:68vw;max-height:68vw;image-rendering:pixelated}
.vp-upia{font-size:26px;font-weight:700}
#posapp .vp-tbot.in{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}#posapp .vp-tbot.in .vp-tfb{flex-direction:column;gap:2px;font-size:12px;line-height:1.15;padding:4px}#posapp .vp-tbot.in .vp-tfb span{white-space:normal;overflow:visible;text-overflow:clip}