:root{--bg:#F3F5F7;--navy:#172633;--navy2:#29434D;--teal:#007F7A;--teal2:#006661;--mint:#E6F5F0;--mint2:#EDF4F3;--accent:#65D9C6;--line:#E0E6EC;--muted:#667585;--ink:#172633;--soft:#F7F9FA;--bad:#B3261E;--badbg:#FCEBEA;--warn:#9A6200;--warnbg:#FFF3DC;--info:#1F5FA8;--infobg:#E6F0FB;--r:10px;--side:222px}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"DejaVu Sans",Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--teal);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{margin:0;font-weight:500}
.muted{color:var(--muted)}.right{text-align:right}.center{text-align:center}.mono{font-variant-numeric:tabular-nums}
.hide{display:none!important}
/* shell */
.shell{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}
.side{background:var(--navy);color:#B8C7D2;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:0 13px;z-index:30}
.brand{display:flex;align-items:center;gap:10px;padding:29px 11px 0;color:#fff;font-size:25px;font-weight:500;letter-spacing:.2px}
.brand i{width:36px;height:36px;border-radius:8px;background:#65D9C6;color:var(--navy);display:grid;place-items:center;font-style:normal;font-size:24px}
.side small{display:block;font-size:11px;letter-spacing:.8px;color:#91A6B7;padding:30px 14px 14px;font-weight:500}
.side nav{display:flex;flex-direction:column;gap:6px;overflow:auto}
.side nav a{display:flex;align-items:center;gap:14px;color:#B8C7D2;padding:11px 14px;border-radius:7px;font-size:16px}
.side nav a svg{width:18px;height:18px;flex:none;stroke:#718898;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.side nav a:hover{background:#1f3342;text-decoration:none}
.side nav a.on{background:var(--navy2);color:#88ECD9;font-weight:500}.side nav a.on svg{stroke:#69DAC7}
.me{margin-top:auto;display:flex;align-items:center;gap:12px;padding:18px 9px;color:#fff;position:relative}
.me .av{width:40px;height:40px;border-radius:50%;background:#365162;display:grid;place-items:center;font-size:13px;font-weight:500}
.me b{display:block;font-weight:400;font-size:15px}.me span{font-size:12px;color:#91A6B7}
.me button{margin-left:auto;background:none;border:0;color:#91A6B7;cursor:pointer;font-size:12px;padding:4px}
.main{min-width:0;display:flex;flex-direction:column}
.top{height:80px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:18px;padding:0 30px;position:sticky;top:0;z-index:20}
.top .loc{font-size:17px;font-weight:500;cursor:pointer;background:none;border:0;color:var(--ink);display:flex;gap:6px;align-items:center;padding:6px 0}
.top .sp{flex:1}.top .meta{color:var(--muted);font-size:14px}
.top .avatar{width:36px;height:36px;border-radius:50%;background:var(--mint);color:var(--teal);display:grid;place-items:center;font-size:12px;font-weight:500}
.burger{display:none;background:none;border:0;padding:6px;cursor:pointer}
.bell{position:relative;background:none;border:0;cursor:pointer;color:var(--muted);padding:6px}
.bell b{position:absolute;top:0;right:0;background:var(--bad);color:#fff;border-radius:9px;font-size:10px;padding:1px 5px;font-weight:600}
#view{padding:26px 33px 20px;flex:1;max-width:1500px;width:100%;transition:opacity .15s}
#view.loading{opacity:.45}
.foot{margin:0 33px;border-top:1px solid var(--line);padding:16px 0 20px;font-size:12px;color:var(--muted);display:flex;justify-content:space-between}
#bar{position:fixed;top:0;left:0;height:3px;background:var(--accent);width:0;z-index:100;transition:width .25s,opacity .3s}
/* page head */
.crumb{font-size:12px;font-weight:500;color:var(--teal);letter-spacing:.3px;text-transform:uppercase}
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:6px 0 24px;flex-wrap:wrap}
.ph h1{font-size:32px;line-height:1.2}.ph p{margin:8px 0 0;color:var(--muted);font-size:16px}
.ph .acts{display:flex;gap:10px;flex-wrap:wrap}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;border-radius:7px;border:1px solid var(--teal);background:var(--teal);color:#fff;font:inherit;font-size:15px;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--teal2);text-decoration:none}.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line)}.btn.ghost:hover{background:var(--soft)}
.btn.danger{background:#fff;color:var(--bad);border-color:#EBC4C1}.btn.danger:hover{background:var(--badbg)}
.btn.sm{height:34px;padding:0 14px;font-size:14px}.btn.block{width:100%}.btn.lg{height:50px;font-size:16px}
/* cards */
.card{background:#fff;border:1px solid var(--line);border-radius:11px;padding:22px 24px}
.card>h2,.card-h h2{font-size:20px;margin-bottom:16px}
.card-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px}.card-h h2{margin:0}
.grid{display:grid;gap:20px}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.g21{grid-template-columns:2fr 1fr}.g12{grid-template-columns:1fr 2fr}.g32{grid-template-columns:3fr 2fr}
.stack>*+*{margin-top:20px}
.stat .l{color:var(--muted);font-size:15px}.stat .v{font-size:36px;margin:10px 0 8px;font-weight:500;letter-spacing:-.5px}.stat .d{font-size:14px;color:var(--teal)}.stat .d.neg{color:var(--bad)}
.list .row{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-top:1px solid var(--line);align-items:center}
.list .row:first-child{border-top:0}.list .row small{display:block;color:var(--muted);font-size:13px}
.kv{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}.kv:last-child{border-bottom:0}.kv span:first-child{color:var(--muted)}
/* tables */
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{background:var(--soft);color:var(--muted);font-weight:400;font-size:14px;text-align:left;padding:12px 14px;white-space:nowrap}
th:first-child{border-radius:7px 0 0 7px}th:last-child{border-radius:0 7px 7px 0}
td{padding:14px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}tbody tr[data-href]{cursor:pointer}tbody tr[data-href]:hover{background:var(--soft)}
td.num,th.num{text-align:right}
/* forms */
label.f{display:block;font-size:14px;color:var(--muted);margin-bottom:6px}
.fld{margin-bottom:18px}
input,select,textarea{width:100%;font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:7px;padding:0 14px;height:48px;outline:0;transition:border-color .15s,box-shadow .15s}
textarea{height:auto;padding:12px 14px;min-height:90px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,127,122,.12)}
input[type=checkbox],input[type=radio]{width:auto;height:auto;accent-color:var(--teal)}
.search{background:var(--soft)}
.err{color:var(--bad);font-size:13px;margin-top:5px}.is-bad{border-color:var(--bad)!important}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.inline>input,.inline>select{width:auto;flex:1;min-width:140px}
.chk{display:flex;gap:10px;align-items:center;font-size:15px;margin-bottom:12px;cursor:pointer}
/* badges / tabs */
.badge{display:inline-block;font-size:13px;padding:3px 11px;border-radius:5px;background:var(--mint);color:var(--teal)}
.b-warn{background:var(--warnbg);color:var(--warn)}.b-bad{background:var(--badbg);color:var(--bad)}.b-info{background:var(--infobg);color:var(--info)}.b-muted{background:#EEF1F4;color:var(--muted)}
.tabs{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.tabs a,.tabs button{padding:6px 14px;border-radius:5px;color:var(--muted);font-size:15px;border:0;background:none;cursor:pointer;font-family:inherit}
.tabs a:hover{text-decoration:none;background:var(--soft)}.tabs .on{background:var(--mint);color:var(--teal);font-size:14px}
/* bars */
.bars{display:flex;align-items:flex-end;gap:14px;height:220px;padding:10px 6px 0;border-bottom:1px solid var(--line)}
.bars div{flex:1;background:var(--teal);border-radius:3px 3px 0 0;min-height:3px;position:relative}
.bars div:hover{background:var(--teal2)}.bars div span{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:12px;color:var(--muted);white-space:nowrap;display:none}.bars div:hover span{display:block}
.blabels{display:flex;gap:14px;padding:8px 6px;font-size:12px;color:var(--muted)}.blabels span{flex:1;text-align:center}
.hbar{height:9px;background:var(--mint);border-radius:5px;overflow:hidden;margin:7px 0 16px}.hbar i{display:block;height:100%;background:var(--teal);border-radius:5px}
/* pos */
.pos{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:24px;align-items:start}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;margin-top:18px}
.pc{border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;overflow:hidden;text-align:left;font:inherit;padding:0;transition:box-shadow .15s,transform .05s}
.pc:hover{box-shadow:0 4px 14px rgba(23,38,51,.09)}.pc:active{transform:scale(.99)}.pc.out{opacity:.55}
.pc .im{background:var(--mint2);height:92px;margin:1px;border-radius:7px;display:grid;place-items:center;color:var(--teal);font-size:22px;font-weight:500}
.pc .tx{padding:14px 16px 16px}.pc b{font-weight:500;font-size:17px;display:block}.pc small{color:var(--muted);font-size:12px;display:block;margin:6px 0 10px}.pc .pr{font-size:20px;font-weight:500}
.cart{position:sticky;top:100px}
.cart .it{padding:14px 0;border-bottom:1px solid var(--line)}
.cart .it .t{display:flex;justify-content:space-between;font-size:18px;gap:10px}.cart .it small{color:var(--muted);font-size:15px}
.qty{display:inline-flex;align-items:center;gap:0;margin-top:10px}.qty button{width:43px;height:42px;border:1px solid var(--line);background:#fff;border-radius:6px;font-size:18px;cursor:pointer}
.qty span{width:48px;text-align:center}.qty .rm{margin-left:12px;width:auto;border:0;color:var(--bad);font-size:13px;background:none}
.tot .kv{border:0;padding:7px 0;font-size:17px}.tot .grand{font-size:30px;font-weight:500;padding-top:18px}.tot .grand span:first-child{color:var(--ink);font-size:25px}
.custbar{background:var(--soft);border-radius:7px;padding:15px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;font-size:16px}
.empty{padding:36px 10px;text-align:center;color:var(--muted)}
.pmeth{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pm{border:1px solid var(--line);border-radius:8px;background:var(--soft);padding:34px 24px;cursor:pointer;text-align:left;font:inherit;color:var(--ink)}
.pm b{display:block;font-size:26px;font-weight:400;margin-bottom:14px}.pm span{color:var(--muted)}
.pm.on{background:var(--mint);border-color:var(--teal)}.pm.on b{color:var(--teal)}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:340px}
.keypad button{height:62px;font-size:24px;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;font-family:inherit}.keypad button:hover{background:var(--soft)}
.pin{display:flex;gap:14px;justify-content:center;margin:24px 0}.pin i{width:16px;height:16px;border-radius:50%;border:2px solid var(--line)}.pin i.f{background:var(--teal);border-color:var(--teal)}
/* modal & toast */
#modal{position:fixed;inset:0;background:rgba(23,38,51,.5);display:none;align-items:flex-start;justify-content:center;padding:6vh 16px;z-index:60;overflow:auto}
#modal.open{display:flex}
.mbox{background:#fff;border-radius:12px;width:100%;max-width:560px;padding:26px 28px;box-shadow:0 20px 60px rgba(0,0,0,.25);animation:pop .15s}
.mbox.wide{max-width:820px}
@keyframes pop{from{transform:translateY(8px);opacity:0}}
.mh{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.mh h2{font-size:22px}
.mh .x{background:none;border:0;font-size:26px;color:var(--muted);cursor:pointer;line-height:1}
.mf{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}
#toasts{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;z-index:90}
.toast{background:var(--navy);color:#fff;padding:13px 18px;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.2);animation:pop .2s;max-width:380px}.toast.bad{background:var(--bad)}
.alert{padding:13px 16px;border-radius:7px;background:var(--warnbg);color:var(--warn);margin-bottom:16px}
.alert.bad{background:var(--badbg);color:var(--bad)}.alert.ok{background:var(--mint);color:var(--teal)}
.dd{position:absolute;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(23,38,51,.15);min-width:260px;z-index:50;padding:6px;margin-top:6px}
.dd a,.dd button{display:flex;justify-content:space-between;width:100%;padding:10px 12px;border-radius:6px;color:var(--ink);font:inherit;background:none;border:0;cursor:pointer;text-align:left}.dd a:hover,.dd button:hover{background:var(--soft);text-decoration:none}.dd .on{color:var(--teal);font-weight:500}
.pager{display:flex;gap:8px;justify-content:center;margin-top:18px;align-items:center;color:var(--muted);font-size:14px}
/* auth — scales with the viewport so it never needs scrolling */
.auth{display:grid;grid-template-columns:minmax(300px,38%) 1fr;height:100vh;height:100dvh;overflow:hidden}
.auth .l{background:var(--navy);color:#fff;padding:clamp(20px,5vh,55px) clamp(24px,4vw,60px);display:flex;flex-direction:column;min-height:0}
.auth .l h2{font-size:clamp(28px,5.2vh,48px);line-height:1.3;margin-top:auto;font-weight:400}.auth .l h2 em{color:#7FE3D1;font-style:normal;display:block}
.auth .l p{color:#B8C7D2;font-size:clamp(15px,2.4vh,22px);line-height:1.6;margin:clamp(12px,3vh,30px) 0 clamp(16px,6vh,70px)}
.auth .l .st{border-top:2px solid #3b4e5d;padding:clamp(8px,2vh,22px) 0;display:flex;gap:clamp(24px,4vw,70px);align-items:center;font-size:clamp(14px,2vh,19px);color:#B8C7D2}.auth .l .st b{font-size:clamp(18px,3vh,28px);font-weight:400;color:#fff;min-width:60px}
.auth .l .ft{font-size:12px;color:#91A6B7;letter-spacing:.5px;margin-top:clamp(12px,3vh,40px)}
.auth .r{display:grid;place-items:center;padding:16px;overflow:auto;min-height:0}
.auth .box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:clamp(20px,4.5vh,42px) clamp(20px,3vw,42px);width:100%;max-width:560px}
.auth .box h1{font-size:clamp(24px,4vh,34px);margin-bottom:8px}.auth .box>p{color:var(--muted);margin:0 0 clamp(14px,3.5vh,32px);font-size:clamp(14px,2vh,17px)}
.auth .box .fld{margin-bottom:clamp(10px,2.4vh,18px)}
.auth .box input,.auth .box select{height:clamp(42px,6vh,48px)}
.auth .box .btn.lg{height:clamp(44px,6.4vh,50px)}
/* mobile */
.mshell{max-width:540px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);box-shadow:0 0 0 1px var(--line)}
.mtop{background:var(--navy);color:#fff;height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-size:28px;position:sticky;top:0;z-index:20}
.mtop a{color:#65D9C6;font-size:16px}
#mview{padding:24px 24px 100px;flex:1}
.mnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:540px;background:#fff;border-top:1px solid var(--line);display:flex;z-index:30}
.mnav a{flex:1;text-align:center;padding:14px 0 16px;color:var(--muted);font-size:15px;position:relative}.mnav a.on{color:var(--teal)}.mnav a:hover{text-decoration:none}
.mnav a b{position:absolute;top:6px;left:56%;background:var(--bad);color:#fff;border-radius:9px;font-size:10px;padding:1px 6px}
.mh1{font-size:34px;margin:6px 0 4px}.msub{color:var(--muted);margin:0 0 22px}
.mcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin-bottom:14px;display:block;color:inherit}a.mcard:hover{text-decoration:none;background:var(--soft)}
.mcard .l{font-size:19px}.mcard .v{font-size:38px;margin-top:10px}
.mlist .it{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-top:1px solid var(--line);gap:10px;color:inherit}.mlist .it:first-child{border:0}
.viewfinder{aspect-ratio:1;background:#0f1b25;border-radius:14px;display:grid;place-items:center;position:relative;overflow:hidden;margin-bottom:16px}
.viewfinder video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.viewfinder .fr{width:62%;height:42%;border:3px solid var(--accent);border-radius:12px;position:relative;z-index:2}
.viewfinder .fr::after{content:"";position:absolute;left:6%;right:6%;top:50%;height:2px;background:#ff5a5a;animation:scan 1.8s infinite alternate}@keyframes scan{from{top:12%}to{top:88%}}
/* responsive */
@media(max-width:1180px){.pos{grid-template-columns:1fr}.cart{position:static}.g4{grid-template-columns:1fr 1fr}.g21,.g12,.g32{grid-template-columns:1fr}}
@media(max-width:900px){.shell{grid-template-columns:1fr}.side{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .2s;width:250px}.side.open{transform:none;box-shadow:0 0 0 100vmax rgba(23,38,51,.5)}.burger{display:block}.top{padding:0 16px}#view{padding:20px 16px}.foot{margin:0 16px}.g2,.g3,.row2,.row3{grid-template-columns:1fr}.auth{grid-template-columns:1fr}.auth .l{display:none}.ph h1{font-size:26px}.pmeth{grid-template-columns:1fr}.top .meta.h{display:none}}
@media print{.side,.top,.foot,.ph .acts,.noprint{display:none!important}.shell{display:block}body{background:#fff}#view{padding:0}.card{border:0}}
.receipt{max-width:380px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:8px;padding:28px;font-family:"SFMono-Regular",Consolas,monospace;font-size:13px}
.receipt h3{text-align:center;font-size:18px;font-family:inherit}.receipt hr{border:0;border-top:1px dashed #999;margin:12px 0}.receipt .rl{display:flex;justify-content:space-between;gap:10px;padding:2px 0}
.tick{width:68px;height:68px;border-radius:50%;background:var(--mint);color:var(--teal);display:grid;place-items:center;font-size:34px;margin:0 auto 14px}