html,body{height:100%}
body{display:flex;flex-direction:column;overflow:hidden}
.pos-top{display:flex;align-items:center;gap:16px;padding:10px 18px;border-bottom:1px solid var(--line);background:var(--bg2)}
.pos-top .brand{font-size:18px}
.tabs{display:flex;gap:6px;margin-left:auto}
.tab{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:8px 16px;font-weight:600;color:var(--muted)}
.tab.on{background:var(--sky);border-color:var(--sky);color:#031018}
.live{font-size:12px;color:var(--ok);display:flex;align-items:center;gap:6px;white-space:nowrap}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;animation:blink 2s infinite}
.live.off{color:var(--err)}
@keyframes blink{50%{opacity:.3}}
.view{flex:1;min-height:0;display:none}
.view.on{display:flex}
/* sell */
.sell{gap:0}
.catalog{flex:1;min-width:0;display:flex;flex-direction:column;padding:14px 16px;gap:12px}
.catalog__bar{display:flex;gap:10px;flex-wrap:wrap}
.catalog__bar input{flex:1;min-width:180px;background:var(--card);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:11px 14px;font:inherit}
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.cat{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;
background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-height:58px;color:var(--text);transition:.15s}
.cat i{grid-row:1/3;font-style:normal;font-size:24px;line-height:1}
.cat b{font:700 14px/1.15 var(--head)}
.cat small{color:var(--muted);font-size:12px}
.cat:hover{border-color:var(--sky)}
.cat:active{transform:scale(.97)}
.cat.on{background:var(--sky);border-color:var(--sky);color:#031018}
.cat.on small{color:#063349}
.cats.dim .cat.on{background:var(--card);color:var(--text);border-color:var(--line)}
.cats.dim .cat.on small{color:var(--muted)}
.chips[hidden]{display:none}
.tiles{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;align-content:start;padding-bottom:12px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px;text-align:left;display:flex;flex-direction:column;gap:6px;transition:.15s}
.tile:active{transform:scale(.97)}
.tile:hover{border-color:var(--sky)}
.tile img{width:100%;aspect-ratio:1;object-fit:contain;background:radial-gradient(circle at 50% 40%,#1c2636,#0b0f15);border-radius:8px}
.tile b{font:700 14px/1.2 var(--head)}
.tile .meta{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted)}
.tile .meta span:first-child{color:var(--text);font-weight:600}
.tile[disabled]{opacity:.4}
.tile.zero{opacity:.55;border-style:dashed}
.tile em{font-style:normal;color:var(--warn)}
.savechk{display:flex;gap:10px;align-items:center;margin:4px 0 14px;font-size:14px}
.savechk input{width:20px;height:20px;accent-color:var(--sky)}
.ticket{width:min(380px,40vw);border-left:1px solid var(--line);background:var(--bg2);display:flex;flex-direction:column}
.ticket__head{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.ticket__head h3{margin:0}
.ticket__lines{flex:1;overflow:auto;padding:4px 18px}
.tline{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.tline small{color:var(--muted)}
.tline .qty{justify-self:start}
.tline .qty button{width:32px;height:32px}
.ticket__foot{padding:14px 18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.pay{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pay .btn{padding:16px;font-size:16px}
.btn--cash{background:var(--ok);color:#03200f}
.ticket .empty{color:var(--muted);text-align:center;padding:50px 0}
/* sheets */
.opt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:12px}
.opt-grid button{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:12px;text-align:left;display:flex;justify-content:space-between;gap:8px;font-size:14px}
.opt-grid button:hover{border-color:var(--sky)}
.opt-grid button span{font-weight:700;color:var(--ok)}
.opt-grid button.low span{color:var(--warn)}
.opt-grid button[disabled]{opacity:.35;text-decoration:line-through}
.opt-grid button[disabled] span{color:var(--err)}
.opt-grid button{flex-wrap:wrap}
.opt-grid button.zero{border-style:dashed;opacity:.75}
.opt-grid button.zero span{color:var(--err)}
.opt-grid button small{flex-basis:100%;font-size:11px;opacity:.8;font-weight:400}
.warnbox{background:rgba(255,184,77,.1);border:1px solid rgba(255,184,77,.4);border-radius:10px;padding:10px 12px;margin:8px 0;font-size:13.5px}
.alertbar{display:block;width:100%;border:0;background:var(--err);color:#fff;font-weight:700;padding:9px 18px;text-align:left;font-size:14px;cursor:pointer}
.alertbar[hidden]{display:none}
.alert{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin:8px 0;font-size:13.5px}
.alert.on{border-color:rgba(255,92,92,.6);background:rgba(255,92,92,.08)}
.alert .btn{padding:6px 12px;flex:none}
td.hold{white-space:nowrap}
td.hold span{display:inline-block;min-width:22px;text-align:center;color:var(--muted)}
td.hold span.on{color:var(--warn);font-weight:700}
td.hold button{border:1px solid var(--line);background:var(--card2);border-radius:6px;width:26px;height:26px}
td.hold button[disabled]{opacity:.3}
.quick{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.quick button{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:10px 14px;font-weight:600}
.big{font:800 34px/1.1 var(--head)}
.receipt{font-family:ui-monospace,Consolas,monospace;font-size:13.5px;background:#fff;color:#111;border-radius:10px;padding:16px;margin:12px 0}
.receipt .row{margin:2px 0}
/* stock + sales */
th.r{text-align:right} td.cur,th.cur{background:rgba(255,255,255,.05)} th.cur{color:var(--text)}
.pick{color:var(--muted)} .pick .mine{color:var(--ok);font-weight:700}
.scroll{flex:1;overflow:auto;padding:16px 18px}
.stock-tools{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.stock-tools input{flex:1;min-width:180px;background:var(--card);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:10px 12px;font:inherit}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:left}
th{color:var(--muted);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;position:sticky;top:-16px;background:var(--bg)}
td.n{font:700 16px var(--head);text-align:right;width:60px}
td.n.low{color:var(--warn)} td.n.out{color:var(--err)}
td.n.neg{color:#fff;background:rgba(255,92,92,.55)}
.adj{display:flex;gap:6px;justify-content:flex-end}
.adj button{border:1px solid var(--line);background:var(--card);border-radius:8px;min-width:40px;height:34px;font-weight:600}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:18px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px}
.kpi b{display:block;font:800 28px/1.1 var(--head)}
.kpi span{color:var(--muted);font-size:13px}
.chan{font-size:11px;font-weight:700;padding:3px 7px;border-radius:5px}
.chan--shop{background:rgba(61,220,151,.15);color:var(--ok)} .chan--online{background:rgba(76,195,245,.15);color:var(--sky)}
.who{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);white-space:nowrap}
.who b{color:var(--text)}
.who select{width:auto;padding:5px 8px;font-size:13px;border-radius:8px}
.who .link{font-size:13px}
.navbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--sky);color:var(--sky);background:rgba(76,195,245,.1);border-radius:999px;padding:6px 14px;font-weight:600;font-size:13px;text-decoration:none;white-space:nowrap}
.navbtn:hover{background:var(--sky);color:#031018}
.store-tabs{margin-bottom:16px}
.store-tabs .chip b{margin-left:6px;font-weight:700}
.demo-pins{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.6}
.demo-pins span{display:inline-block;margin:0 6px;white-space:nowrap}
td.r{text-align:right} tr.tot td{font-weight:700;border-top:2px solid var(--line)}
#sheet{z-index:100}
/* pin */
.pin{position:fixed;inset:0;z-index:95;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#10202c,#020305 70%)}
.pin[hidden]{display:none}
.pin__card{text-align:center;width:300px}
.pin__dots{display:flex;gap:12px;justify-content:center;margin:18px 0}
.pin__dots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--muted)}
.pin__dots i.on{background:var(--sky);border-color:var(--sky)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pad button{height:64px;border-radius:14px;border:1px solid var(--line);background:var(--card);font:700 22px var(--head)}
.pad button:active{background:var(--card2)}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
@media (max-width:760px){
.sell{flex-direction:column}
.ticket{width:100%;border-left:0;border-top:1px solid var(--line);max-height:45%}
.tiles{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.cats{display:flex;overflow-x:auto;padding-bottom:4px}
.cat{flex:none;min-width:140px}
.pos-top{flex-wrap:wrap}
.tabs{margin-left:0;order:3;width:100%}
.who{order:2;margin-left:auto;flex-wrap:wrap;white-space:normal;justify-content:flex-end}
.tab{flex:1}
}