:root{--bg:#f4f6fb;--surface:#fff;--text:#0f172a;--muted:#64748b;--line:#e2e8f0;--brand:#4f46e5;--brand-2:#7c3aed;--ok:#059669;--ok-bg:#d1fae5;--warn:#b45309;--warn-bg:#fef3c7;--bad:#dc2626;--bad-bg:#fee2e2;--radius:16px;--shadow:0 1px 2px #0f172a0f, 0 8px 24px #0f172a0f;color:var(--text);background:var(--bg);font-family:Inter,system-ui,-apple-system,Segoe UI,Noto Sans Bengali,Nirmala UI,Kalpurush,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(1200px 400px at 50% -100px, #e0e7ff, transparent), var(--bg);min-height:100vh;margin:0}h1,h2{letter-spacing:-.02em;margin:0}h1{font-size:1.5rem}h2{font-size:1.1rem}p{margin:0}.app{gap:1rem;max-width:44rem;margin:0 auto;padding:0 1rem 3rem;display:grid}.stack{gap:1rem;display:grid}.topbar{z-index:5;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);background:#ffffffd9;justify-content:space-between;align-items:center;gap:.75rem;margin:0 -1rem;padding:.75rem 1rem;display:flex;position:sticky;top:0}.brand{align-items:center;gap:.6rem;font-weight:700;display:flex}.logo{color:#fff;background:linear-gradient(135deg, var(--brand), var(--brand-2));border-radius:10px;place-items:center;width:36px;height:36px;font-size:1.1rem;display:grid}.user{align-items:center;gap:.6rem;min-width:0;display:flex}.who{text-align:right;min-width:0;display:grid}.who strong{text-overflow:ellipsis;white-space:nowrap;max-width:11rem;font-size:.9rem;overflow:hidden}.who span{color:var(--muted);font-size:.75rem}.avatar{color:#fff;background:linear-gradient(135deg, #0ea5e9, var(--brand));border-radius:50%;place-items:center;width:36px;height:36px;font-weight:700;display:grid}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);gap:.75rem;padding:1.1rem;display:grid}main.card{max-width:26rem;margin:12vh auto 0}.muted{color:var(--muted);font-size:.9rem}label{gap:.3rem;font-size:.9rem;font-weight:600;display:grid}input,button{font:inherit;border-radius:12px;min-height:48px}input{border:1px solid var(--line);color:var(--text);background:#f8fafc;width:100%;padding:0 .9rem}input:focus-visible,button:focus-visible{outline-offset:1px;border-color:var(--brand);outline:3px solid #c7d2fe}button{cursor:pointer;color:#fff;background:linear-gradient(135deg, var(--brand), var(--brand-2));border:0;padding:0 1.1rem;font-weight:600;transition:transform 80ms,box-shadow .15s;box-shadow:0 4px 12px #4f46e54d}button:hover{box-shadow:0 6px 16px #4f46e566}button:active{transform:scale(.98)}button:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}button.ghost{color:var(--text);border:1px solid var(--line);box-shadow:none;background:0 0;min-height:40px}button.ghost:hover{background:#f1f5f9}.error{color:var(--bad);font-size:.9rem}.search{position:relative}.search input{background:var(--surface);box-shadow:var(--shadow);padding-left:2.6rem}.search:before{content:"🔍";font-size:1rem;position:absolute;top:50%;left:.9rem;transform:translateY(-50%)}details.card>summary{cursor:pointer;align-items:center;gap:.5rem;font-weight:700;list-style:none;display:flex}details.card>summary:before{content:"+";width:24px;height:24px;color:var(--brand);background:#eef2ff;border-radius:8px;place-items:center;display:grid}details[open].card>summary:before{content:"−"}.row{grid-template-columns:repeat(2,1fr);gap:.5rem;display:grid}.row button{grid-column:1/-1}.stats{grid-template-columns:repeat(3,1fr);gap:.6rem;display:grid}.stat{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:14px;padding:.8rem}.stat strong{letter-spacing:-.02em;font-size:1.4rem;display:block}.stat span{color:var(--muted);font-size:.8rem}.product-head{justify-content:space-between;align-items:start;gap:.5rem;display:flex}.code{color:var(--brand);background:#eef2ff;border-radius:999px;margin-bottom:.25rem;padding:.15rem .5rem;font-size:.75rem;font-weight:700;display:inline-block}.total{text-align:right}.total strong{font-size:1.4rem;line-height:1;display:block}.total span{color:var(--muted);font-size:.75rem}.variants{grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.5rem;margin:0;padding:0;list-style:none;display:grid}.variant{border:1px solid var(--line);background:#fafbff;border-radius:12px;gap:.15rem;padding:.6rem .7rem;display:grid}.variant .size{font-weight:700}.variant .meta{color:var(--muted);font-size:.8rem}.variant .qty{font-size:1.1rem;font-weight:700}.badge{border-radius:999px;padding:.1rem .5rem;font-size:.7rem;font-weight:700;display:inline-block}.badge.ok{background:var(--ok-bg);color:var(--ok)}.badge.low{background:var(--warn-bg);color:var(--warn)}.badge.out{background:var(--bad-bg);color:var(--bad)}.empty{text-align:center;color:var(--muted);padding:2rem 1rem}.empty .big{font-size:2.2rem}.skeleton{border-radius:var(--radius);background:linear-gradient(90deg,#e8ecf5,#f4f6fb,#e8ecf5) 0 0/200% 100%;height:7rem;animation:1.2s infinite shimmer}@keyframes shimmer{to{background-position:-200% 0}}@media (prefers-reduced-motion:reduce){.skeleton{animation:none}}@media (prefers-color-scheme:dark){:root{--bg:#0b1020;--surface:#131a2e;--text:#e8ecf8;--muted:#94a3b8;--line:#243049;--shadow:0 8px 24px #00000059}body{background:radial-gradient(1200px 400px at 50% -100px, #1e1b4b, transparent), var(--bg)}.topbar{background:#131a2ed9}input,.variant{background:#0f1526}.code,details.card>summary:before{color:#a5b4fc;background:#1e1b4b}button.ghost:hover{background:#1b2540}}select{font:inherit;border:1px solid var(--line);min-height:48px;color:var(--text);background:#f8fafc;border-radius:12px;width:100%;padding:0 .6rem}.tabs{gap:.4rem;padding-bottom:.2rem;display:flex;overflow-x:auto}.tab{background:var(--surface);color:var(--text);border:1px solid var(--line);box-shadow:none;white-space:nowrap;min-height:44px}.tab:hover{box-shadow:none;background:#eef2ff}.tab.active{background:linear-gradient(135deg, var(--brand), var(--brand-2));color:#fff;border-color:#0000}.line{grid-template-columns:1fr 5rem 6rem;align-items:center;gap:.4rem;display:grid}.line select,.line button{grid-column:1/-1}.okmsg{color:var(--ok);font-size:.9rem}@media (prefers-color-scheme:dark){select{background:#0f1526}.tab:hover{background:#1b2540}}.chips{flex-wrap:wrap;gap:.5rem;display:flex}.chip{background:var(--surface);color:var(--text);border:1px solid var(--line);box-shadow:none;text-align:left;min-height:56px;padding:.4rem .8rem;line-height:1.25}.chip:hover{box-shadow:none;background:#eef2ff}.chip.out{opacity:.45}.chip small{color:var(--muted)}.cart-line{border-bottom:1px solid var(--line);grid-template-columns:1fr auto 6rem;align-items:center;gap:.5rem;padding:.4rem 0;display:grid}.cart-name{font-size:.95rem;font-weight:600}.stepper{align-items:center;gap:.4rem;display:flex}.stepper button{min-width:44px;min-height:44px;padding:0;font-size:1.2rem}.stepper span{text-align:center;min-width:1.5rem;font-weight:700}.price{text-align:right}.sum{gap:.3rem;margin:0;display:grid}.sum div{justify-content:space-between;display:flex}.sum dt,.sum dd{margin:0}.sum .grand{border-top:1px solid var(--line);padding-top:.4rem;font-size:1.3rem;font-weight:800}.pay-line{grid-template-columns:1fr 1fr;gap:.4rem;display:grid}.pay-line input[placeholder^=Txn],.pay-line button{grid-column:1/-1}.sale-row{text-align:left;color:var(--text);background:var(--surface);box-shadow:var(--shadow);justify-content:space-between;align-items:center;width:100%;display:flex}.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.center{text-align:center}.receipt{width:100%;max-width:24rem;margin:0 auto}.receipt-head{text-align:center}.receipt-table{border-collapse:collapse;width:100%}.receipt-table td{vertical-align:top;border-bottom:1px dashed var(--line);padding:.35rem 0}.receipt-table .grand td{font-size:1.15rem;font-weight:800}@media print{.topbar,.tabs,.noprint,.okmsg{display:none!important}body{background:#fff}.card{box-shadow:none;border:0}}.ret-line{border-bottom:1px solid var(--line);grid-template-columns:1fr auto;align-items:center;gap:.5rem;padding:.5rem 0;display:grid}.ret-line select{grid-column:1/-1}.check{align-items:center;gap:.6rem;font-weight:500;display:flex}.check input{width:24px;min-height:24px}.plain{gap:.2rem;margin:0;padding-left:1.1rem;display:grid}h3{margin:.4rem 0 0;font-size:.95rem}.card.warn{background:var(--warn-bg);color:var(--warn);border-color:#0000}.audit-details{word-break:break-word;font-size:.8rem}.receipt-banner{background:var(--warn-bg);color:var(--warn);text-align:center;border-radius:10px;padding:.5rem .7rem;font-size:.8rem;font-weight:700}.lang{min-height:36px;padding:0 .7rem;font-weight:700}.btnlink{min-height:40px;color:var(--text);border:1px solid var(--line);border-radius:12px;place-items:center;padding:0 1.1rem;font-weight:600;text-decoration:none;display:inline-grid}.btnlink:hover{background:#f1f5f9}.chip.lowstock{background:#fffbeb;border-color:#f59e0b}.stats.today{grid-template-columns:repeat(auto-fit,minmax(7rem,1fr))}.lang-row{justify-content:flex-end;display:flex}@media (prefers-color-scheme:dark){.chip.lowstock{background:#2a2110}.btnlink:hover{background:#1b2540}}button.mini{min-height:32px;margin-top:.3rem;padding:0 .7rem;font-size:.8rem}.hidden-variant{opacity:.6;border-style:dashed}.edit-form{grid-column:1/-1}.visual .product-head{align-items:center}.cand{border:1px solid var(--line);border-radius:12px;grid-template-columns:64px 1fr auto;align-items:center;gap:.6rem;padding:.5rem;display:grid}.cand.best{border-color:var(--ok);background:var(--ok-bg)}.cand img,.noimg,.thumbs img{object-fit:cover;background:#eef2ff;border-radius:10px;width:64px;height:64px}.noimg{place-items:center;font-size:1.6rem;display:grid}.cand-text{gap:.1rem;min-width:0;display:grid}.thumbs{grid-template-columns:repeat(auto-fill,minmax(5.5rem,1fr));gap:.6rem;margin:0;padding:0;list-style:none;display:grid}.thumbs li{justify-items:center;gap:.2rem;font-size:.8rem;display:grid}.pw-field{display:block;position:relative}.pw-field input{padding-right:3.2rem}.pw-toggle{background:0 0;border:0;width:44px;min-height:40px;padding:0;font-size:1.15rem;position:absolute;top:50%;right:.3rem;transform:translateY(-50%)}label.check{align-items:center;gap:.6rem;font-weight:500;display:flex}label.check input{flex:none;width:22px;min-height:22px}
