:root{--bg:#0b0d10;--surface:#14181d;--surface2:#1b2027;--border:#2a313b;--text:#edeff2;--muted:#8e98a6;--accent:#3ddc84;--on-accent:#04210f;--ring:#3ddc8433;--gold:#e5b84b}
html,body{background:var(--bg);color:var(--text);overflow:hidden;user-select:none;-webkit-user-select:none}
input,textarea{user-select:text;-webkit-user-select:text}
#app{height:100vh;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:14px;padding:10px 18px;background:var(--surface);border-bottom:1px solid var(--border);flex:none}
.brand{white-space:nowrap;font-weight:800;font-size:18px;letter-spacing:-.01em;display:flex;align-items:center;gap:9px}.brand i{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#3ddc84,#1aa35a);display:grid;place-items:center;font-style:normal;color:#04210f;font-size:17px}
.tabs{display:flex;gap:6px;background:var(--bg);padding:4px;border-radius:14px;border:1px solid var(--border);margin-left:12px}
.tab{padding:9px 22px;border-radius:10px;font-weight:700;color:var(--muted)}.tab.on{background:var(--surface2);color:var(--text);box-shadow:0 1px 0 #fff1 inset}.tab.t-share.on{color:var(--gold)}
.top-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.userchip{display:flex;align-items:center;gap:9px;padding:5px 12px 5px 6px;border-radius:99px;background:var(--surface2);border:1px solid var(--border);font-weight:600}.userchip b{width:30px;height:30px;border-radius:50%;background:#2d6a4a;display:grid;place-items:center;font-size:13px}
.main{flex:1;min-height:0;display:flex}
/* POS */
.pos{display:grid;grid-template-rows:minmax(0,1fr);min-height:0;overflow:hidden;grid-template-columns:minmax(0,1fr) 390px;gap:0;flex:1;min-width:0}
.catalog{min-height:0;display:flex;flex-direction:column;min-width:0;padding:14px 16px 0 18px}
.search{position:relative}.search input{padding:14px 16px 14px 44px;font-size:16px;border-radius:14px}.search::before{content:"⌕";position:absolute;left:15px;top:9px;font-size:24px;color:var(--muted)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:12px 2px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:8px 16px;border-radius:99px;background:var(--surface);border:1px solid var(--border);font-weight:600;color:var(--muted)}.chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.grid{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:max-content;gap:12px;padding:2px 2px 18px;align-content:start}
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;text-align:left;display:flex;flex-direction:column;transition:.1s;position:relative}.card:active{transform:scale(.97);border-color:var(--accent)}.card:hover{border-color:#3a4452}
.card .ph{aspect-ratio:4/3;background:#222a33 center/cover no-repeat;display:grid;place-items:center;font-size:30px;font-weight:800;color:#ffffff88}
.card .nm{padding:9px 11px 0;font-weight:650;font-size:14px;line-height:1.2;min-height:36px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .pr{padding:3px 11px 10px;color:var(--accent);font-weight:800;font-size:15px;display:flex;justify-content:space-between;align-items:baseline}.card .pr small{color:var(--muted);font-weight:600;font-size:11px}
.card .st{position:absolute;top:8px;right:8px;font-size:11px;font-weight:700;background:#000b;padding:3px 8px;border-radius:99px}.card .st.low{background:#7a5a10;color:#ffe29a}.card .st.out{background:#7a1f24}
.card.out{opacity:.45}.card .wt{position:absolute;top:8px;left:8px;font-size:11px;font-weight:800;background:var(--accent);color:var(--on-accent);padding:3px 8px;border-radius:99px}
.cartp{background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;min-height:0}
.cart-h{display:flex;align-items:center;gap:8px;padding:14px 16px 10px}.cart-h h2{margin:0;font-size:18px}
.cust{padding:7px 12px;border-radius:99px;background:var(--surface2);border:1px solid var(--border);font-size:13px;font-weight:600;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lines{flex:1;overflow:auto;padding:0 10px}
.empty{height:100%;display:grid;place-items:center;text-align:center;color:var(--muted);padding:30px}.empty big{font-size:44px;display:block;margin-bottom:6px;opacity:.5}
.ln{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:11px 8px;border-bottom:1px solid var(--border);border-radius:12px}.ln:active{background:var(--surface2)}
.ln .n{font-weight:650}.ln .q{color:var(--muted);font-size:13px}.ln .t{font-weight:800;text-align:right}.ln .d{grid-column:1/3;color:var(--gold);font-size:12.5px;font-weight:600}
.ln .t s{display:block;color:var(--muted);font-weight:500;font-size:12px}
.totals{padding:12px 18px 6px;border-top:1px solid var(--border)}.tr{display:flex;justify-content:space-between;padding:3px 0;color:var(--muted)}.tr.big{color:var(--text);font-size:26px;font-weight:800;padding-top:8px}.tr.disc{color:var(--gold)}
.cart-f{padding:6px 14px 16px;display:flex;flex-direction:column;gap:9px}.cart-f .row .btn{flex:1}
.charge{width:100%;padding:18px;font-size:20px;border-radius:16px;background:var(--accent);color:var(--on-accent);font-weight:800;box-shadow:0 8px 24px #3ddc8433}.charge[disabled]{background:var(--surface2);color:var(--muted);box-shadow:none}
/* numpad */
.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.numpad button{padding:20px 0;font-size:26px;font-weight:700;border-radius:16px;background:var(--surface2);border:1px solid var(--border)}.numpad button:active{background:#2a323d}.numpad .fn{font-size:16px;color:var(--muted)}
/* lock */
.lock{flex:1;display:grid;place-items:center;background:radial-gradient(1200px 600px at 50% -10%,#143324 0,transparent 60%),var(--bg)}
.lockbox{width:360px;text-align:center}.lockbox h1{margin:0 0 4px;font-size:28px}.dots{display:flex;gap:14px;justify-content:center;margin:20px 0 22px;height:20px}.dots i{width:16px;height:16px;border-radius:50%;border:2px solid #556;transition:.1s}.dots i.f{background:var(--accent);border-color:var(--accent)}
.clock-big{font-size:54px;font-weight:200;letter-spacing:-.02em;margin:0}
.lock-links{display:flex;gap:10px;justify-content:center;margin-top:20px}
.shake{animation:shake .35s}@keyframes shake{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
/* tender */
.tender{display:grid;grid-template-columns:1.1fr 1fr;gap:20px}.due{font-size:46px;font-weight:800;letter-spacing:-.02em}.tcard{background:var(--surface2);border:1px solid var(--border);border-radius:16px;padding:14px 16px}
.methods{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.methods button{padding:14px;border-radius:14px;background:var(--surface2);border:2px solid var(--border);font-weight:700}.methods button.on{border-color:var(--accent);color:var(--accent);background:#10281c}
.quick{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.quick button{padding:12px 16px;border-radius:12px;background:var(--surface2);border:1px solid var(--border);font-weight:700}
.amt{font-size:34px;font-weight:800;text-align:right;padding:10px 14px;background:var(--bg);border-radius:14px;border:1px solid var(--border);min-height:62px}
.pay-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--border)}
.change{background:#0f3a22;border:1px solid #1b7a43;border-radius:14px;padding:12px 16px;text-align:center}.change b{font-size:34px;display:block;color:#7ef0ad}
/* receipt preview */
.rcpt-wrap{background:#d9dce1;border-radius:14px;padding:18px;display:flex;justify-content:center;max-height:62vh;overflow:auto}
.receipt-paper{font-family:"Courier New",Courier,monospace;font-size:12px;line-height:1.3;color:#111;width:calc(42ch + 34px);background:#fff;padding:18px 16px;box-shadow:0 6px 20px #0004}.rl{white-space:pre}
/* lists */
.list .it{display:flex;align-items:center;gap:12px;padding:12px;border-bottom:1px solid var(--border);border-radius:10px}.list .it:active{background:var(--surface2)}.list .it .main{flex:1}
.stepper{display:inline-flex;align-items:center;gap:0;border:1px solid var(--border);border-radius:12px;overflow:hidden}.stepper button{width:44px;height:42px;font-size:22px;background:var(--surface2)}.stepper span{min-width:54px;text-align:center;font-weight:800}
.banner{background:#44330f;border-bottom:1px solid #8a6a1e;color:#ffd77a;padding:8px 18px;font-weight:600;display:flex;gap:12px;align-items:center}.banner.bad{background:#491619;border-color:#8c2a30;color:#ff9aa0}.banner.demo{background:#2b2150;border-color:#5b47b0;color:#cfc3ff}
.sheet-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.big-btn{padding:16px;border-radius:14px;background:var(--surface2);border:1px solid var(--border);font-weight:700;text-align:left}.big-btn small{display:block;color:var(--muted);font-weight:500;margin-top:2px}
.tcstat{text-align:center;padding:12px}.tcstat .s{font-size:30px;font-weight:800}.tcstat .s.in{color:var(--accent)}.tcstat .s.break{color:var(--gold)}
.tcbtns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.tcbtns .btn{padding:22px;font-size:19px}
/* ---- UnitCalc share (UnitCalc look: near-black + gold) ---- */
.share{flex:1;display:grid;grid-template-columns:1fr 430px;background:#08090B;--gold:#E6B94E}.share .col{display:flex;flex-direction:column;min-height:0;padding:16px 18px}
.sh-h{display:flex;align-items:center;gap:12px;margin-bottom:12px}.sh-h h1{margin:0;font-size:26px;letter-spacing:-.02em}.sh-h .sub{color:var(--muted)}
.seg{display:inline-flex;background:#14161A;border:1px solid #23262C;border-radius:12px;padding:3px}.seg button{padding:9px 16px;border-radius:9px;font-weight:700;color:#8b919b;font-size:14px}.seg button.on{background:#262A31;color:var(--gold)}
.strains{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;align-content:start;padding:4px 2px 18px}
.strain{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:14px;background:#111317;border:1px solid #20242A;text-align:left}.strain.in{border-color:var(--gold);background:#1a1710}.strain.sold{opacity:.4}
.strain .chk{width:26px;height:26px;border-radius:50%;border:2px solid #444a55;display:grid;place-items:center;font-size:15px;color:#08090B;flex:none}.strain.in .chk{background:var(--gold);border-color:var(--gold)}
.strain .nm{font-weight:700}.strain .sb{color:#8b919b;font-size:13px}.strain .pr{margin-left:auto;font-weight:800;font-size:17px;text-align:right}.strain .pr small{display:block;color:#8b919b;font-size:11px;font-weight:600}
.ptsbar{display:flex;align-items:center;gap:8px;color:#8b919b;font-size:13px}.ptsbar .stepper{border-color:#262A31}.ptsbar .stepper button{background:#14161A;width:38px;height:36px}.ptsbar .stepper span{color:var(--gold)}
.sharecard{background:#111317;border:1px solid #20242A;border-radius:18px;padding:16px;display:flex;flex-direction:column;flex:1;min-height:0}
.sharetext{flex:1;overflow:auto;white-space:pre-wrap;font:600 15px/1.65 ui-monospace,Menlo,Consolas,monospace;color:#f2f2f2;margin:8px 0 12px;user-select:text;-webkit-user-select:text}
.sharecard .note{color:#8b919b;font-size:12.5px;margin-top:10px}.gold{background:var(--gold)!important;border-color:var(--gold)!important;color:#1a1403!important}
.spills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}.spill{padding:5px 10px;border-radius:99px;background:#1c1f25;border:1px solid #2a2e36;font-size:12.5px;font-weight:600}.spill b{color:#8b919b;margin-left:5px}
.sec{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#8b919b;font-weight:700;margin:6px 0}
.demo-tag{font-size:11px;font-weight:800;background:#2b2150;color:#cfc3ff;border-radius:6px;padding:2px 7px;margin-left:6px}

.receipt-paper.mm58{width:calc(32ch + 34px)}

/* ---- phone number pad (Add customer) ---- */
.ph-wrap{display:flex;flex-direction:column;gap:10px;min-width:min(440px,86vw)}
.ph-disp{font-size:38px;font-weight:800;letter-spacing:.02em;text-align:center;padding:14px 8px;background:var(--surface2,#1b222b);border-radius:16px;min-height:72px;font-variant-numeric:tabular-nums}
.ph-disp.empty{color:var(--muted);font-size:24px;font-weight:600;line-height:44px}
.ph-info{min-height:22px;text-align:center;color:var(--muted);font-size:15px}
.ph-list{display:flex;flex-direction:column;gap:6px}
.ph-match{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:12px;background:var(--surface2,#1b222b);border:1px solid var(--border);font-size:17px;color:inherit;text-align:left}
.ph-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ph-key{height:78px;font-size:32px;font-weight:700;border-radius:18px;background:var(--surface2,#1b222b);border:1px solid var(--border);color:inherit;touch-action:manipulation}
.ph-key:active{transform:scale(.96);border-color:var(--accent);background:#26303b}
.ph-key.fn{font-size:20px;color:var(--muted)}
.ph-create-box{display:flex;flex-direction:column;gap:10px}
.ph-name{font-size:18px;padding:14px;border-radius:12px}
.ph-create{width:100%}
.ph-foot{display:flex;justify-content:space-between;gap:8px;margin-top:2px}
.edit-pen{position:absolute;top:8px;left:8px;width:34px;height:34px;border-radius:99px;background:#000b;display:grid;place-items:center;font-size:17px;color:var(--accent);z-index:2}
.edit-pen:active{background:var(--accent);color:#000}
.card{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* ===== v3 layout: logo, left icon rail, uniform tiles, swipe cart ===== */
.brand .logo-img{height:34px;width:auto;background:#fff;border-radius:10px;padding:5px 10px;display:block}.brand .logo-img.lg{height:54px;padding:8px 16px;border-radius:14px}
.brand-pos{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--muted);border:1px solid var(--border);border-radius:7px;padding:3px 7px}
.lock-brand{gap:12px;margin-bottom:6px}
.icw{display:inline-grid;place-items:center;line-height:0}.icw svg{display:block}
.catalog{display:grid;grid-template-columns:92px minmax(0,1fr);grid-template-rows:minmax(0,1fr);padding:0;min-height:0;min-width:0}
.cat-main{display:flex;flex-direction:column;min-height:0;min-width:0;padding:14px 16px 0 14px}
.cat-top{display:flex;gap:10px;align-items:stretch}.cat-top .search{flex:1}
.add-prod{flex:none;padding:0 18px;font-weight:800;color:var(--on-accent);background:var(--accent);border-color:var(--accent);border-radius:14px;min-height:50px}
.rail{display:flex;flex-direction:column;gap:3px;overflow-y:auto;padding:8px 8px;background:var(--surface);border-right:1px solid var(--border);scrollbar-width:none}.rail::-webkit-scrollbar{display:none}
.rail-btn{flex:none;height:64px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--muted);font-size:11.5px;font-weight:700;line-height:1.1;text-align:center;padding:0 3px;border:1px solid transparent;background:transparent}
.rail-btn .icw{color:var(--muted)}.rail-btn span:last-child{max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.rail-btn:active{transform:scale(.96)}
.rail-btn.on{background:var(--surface2);border-color:var(--accent);color:var(--text);box-shadow:0 0 0 3px var(--ring)}.rail-btn.on .icw{color:var(--accent)}
.subchips{display:flex;flex-wrap:wrap;gap:8px;padding:12px 2px 0;flex:none}
.subchips .chip{height:42px;min-width:0;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px}.subchips .chip em{font-style:normal;font-size:11px;background:#ffffff14;border-radius:99px;padding:2px 7px}
.subchips .chip.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.subchips .chip.on em{background:#0003}
.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:218px;gap:12px;padding:14px 2px 18px}
.card{height:218px;min-width:0;display:flex;flex-direction:column;padding:0}
.card .ph{flex:none;width:100%;height:138px;aspect-ratio:auto;background:#222a33 center/cover no-repeat;position:relative}
.card .ph.none{background:linear-gradient(145deg,hsl(var(--h,150) 28% 20%),hsl(var(--h,150) 30% 12%));color:hsl(var(--h,150) 55% 68%)}
.card .nm{flex:none;box-sizing:border-box;height:43px;padding:8px 11px 0;font-size:14px;line-height:17px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.card .nm .demo-tag{display:none}
.card .pr{flex:none;height:32px;padding:0 11px 8px;align-items:flex-end}
.card .edit-pen{top:6px;left:auto;right:6px;width:32px;height:32px;font-size:16px}
.card .st{top:auto;right:8px;bottom:auto;top:104px;z-index:1}.card .wt{top:104px;left:8px}
.ln-wrap{position:relative;overflow:hidden;border-bottom:1px solid var(--border);max-height:120px;transition:max-height .16s ease,opacity .16s;touch-action:pan-y}
.ln-wrap.gone{max-height:0;opacity:0;border-bottom-width:0}
.ln-wrap .ln{position:relative;background:var(--surface);border-bottom:0;touch-action:pan-y;will-change:transform}
.ln-del{position:absolute;right:0;top:0;bottom:0;width:96px;background:#d92d3a;color:#fff;font-weight:800;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:13px;border-radius:0;opacity:0;pointer-events:none}.ln-del span{font-size:20px}
.ln-wrap.swiping .ln-del{opacity:1;pointer-events:auto}
.photo-prev{width:100%;height:230px;border-radius:16px;background:#222a33 center/cover no-repeat;display:grid;place-items:center;color:var(--muted);border:1px dashed var(--border)}.photo-prev:not(.none){border-style:solid}
.pe{width:100%;min-width:0;box-sizing:border-box}.pe .tgl{width:100%;justify-content:flex-start;margin:8px 0;padding:14px 16px;font-weight:700}.pe .tgl.on{border-color:var(--accent);color:var(--accent)}
.pe .field{margin-bottom:10px}.pe .field label{display:block;margin-bottom:5px;font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.pe select,.pe input[type=text]{min-height:46px;font-size:16px}
.stock-clear{margin-bottom:6px}

.ps-guide{background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:12px 16px;margin:6px 0 12px;font-size:14px}.ps-guide ol{margin:8px 0 0;padding-left:20px;line-height:1.5}.ps-guide li{margin:5px 0}
.ps-shared{color:var(--accent);font-size:12.5px;font-weight:700;margin-top:2px}.ps-row{margin:10px 0}.ps .list .it{padding:12px 8px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;cursor:pointer}.ps .list .it .main{flex:1}