:root{
  --maroon:#3b0d1c; --maroon-2:#5a1a2e; --gold:#c49a2c; --gold-2:#e6c56a; --gold-soft:#f6ecd2;
  --bg:#f8f5ef; --card:#ffffff; --ink:#1f1a17; --muted:#7b7068; --line:#e9e2d6; --line-2:#f1ece3;
  --green:#1f7a4d; --green-bg:#e3f3ea; --red:#b3261e; --red-bg:#fbe7e5; --blue:#1d5fa8; --blue-bg:#e6effa;
  --amber:#9a6200; --amber-bg:#fbf0d9; --radius:14px; --shadow:0 1px 2px rgba(59,13,28,.06),0 6px 20px rgba(59,13,28,.06);
  --side:248px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14.5px;color:var(--ink);background:var(--bg);line-height:1.45}
a{color:var(--maroon-2)}
h1,h2,h3{margin:0;font-weight:600}
.ic{flex:none;vertical-align:middle}
.muted{color:var(--muted)}
.right{text-align:right}.center{text-align:center}
.nowrap{white-space:nowrap}
.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.hide{display:none!important}

/* ---------- shell ---------- */
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--side);background:linear-gradient(180deg,var(--maroon),#2a0913);color:#f3e9e1;display:flex;flex-direction:column;z-index:40;transition:transform .25s}
.brand{display:flex;gap:12px;align-items:center;padding:20px 18px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand .logo{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--gold-2),var(--gold));color:var(--maroon);display:grid;place-items:center}
.bname{font-family:"Cormorant Garamond",serif;font-size:19px;font-weight:700;line-height:1.1;color:#fff}
.bsub{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-2);opacity:.85}
.sidebar nav{flex:1;overflow:auto;padding:10px}
.sidebar nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:#e9dcd3;text-decoration:none;font-weight:500;margin-bottom:2px}
.sidebar nav a:hover{background:rgba(255,255,255,.06)}
.sidebar nav a.on{background:rgba(230,197,106,.16);color:#fff}
.sidebar nav a.on .ic{color:var(--gold-2)}
.sidebar nav a.cta{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:var(--maroon);font-weight:700;margin:6px 0 10px}
.who{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-top:1px solid rgba(255,255,255,.08);font-size:13px}
.who .muted{color:#bba79b}.who a{color:#e9dcd3}
.main{margin-left:var(--side);min-height:100vh;padding:0 24px 40px}
.topbar{display:flex;align-items:center;gap:12px;padding:18px 0 14px;position:sticky;top:0;background:var(--bg);z-index:20}
.topbar h1{font-family:"Cormorant Garamond",serif;font-size:28px;font-weight:700;color:var(--maroon);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topactions{display:flex;gap:8px;flex-wrap:wrap}
.iconbtn{border:0;background:#fff;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;box-shadow:var(--shadow);color:var(--maroon);cursor:pointer}
.only-mobile{display:none}
.bottombar{display:none}
.scrim{display:none}

/* ---------- cards / grid ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:16px}
.card h2{font-size:15px;font-weight:700;color:var(--maroon);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.card h2 .sp{flex:1}
.card.empty{text-align:center;padding:40px 18px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;align-items:start}
.split>*{min-width:0}
.row>*{min-width:0}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpi .l{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.kpi .v{font-size:24px;font-weight:700;margin-top:6px;font-variant-numeric:tabular-nums;color:var(--ink)}
.kpi .s{font-size:12.5px;color:var(--muted);margin-top:2px}
.kpi.gold{background:linear-gradient(135deg,var(--maroon),var(--maroon-2));color:#fff;border:0}
.kpi.gold .l,.kpi.gold .s{color:var(--gold-2)}.kpi.gold .v{color:#fff}
.up{color:var(--green)}.down{color:var(--red)}

/* ---------- forms ---------- */
label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:5px}
.f{margin-bottom:12px;min-width:0}
input,select,textarea{width:100%;font:inherit;color:var(--ink);background:#fff;border:1px solid #d9cfbf;border-radius:10px;padding:10px 12px;min-height:42px;outline:none;transition:border .15s,box-shadow .15s}
textarea{min-height:80px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(196,154,44,.18)}
input[readonly]{background:#faf7f1;color:#5c534c}
input.big{font-size:20px;font-weight:600;letter-spacing:.04em;min-height:52px}
.row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.inline{display:flex;gap:8px;align-items:center}
.inline>input{flex:1}
.check{display:flex;gap:8px;align-items:center;font-weight:500;color:var(--ink);font-size:14px}
.check input{width:18px;min-height:18px;height:18px}
.hint{font-size:12px;color:var(--muted);margin-top:4px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:600;border-radius:10px;padding:10px 16px;min-height:42px;border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;background:var(--maroon);color:#fff}
.btn:hover{background:var(--maroon-2)}
.btn.gold{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:var(--maroon)}
.btn.ghost{background:#fff;color:var(--maroon);border-color:#dccfbd}
.btn.ghost:hover{background:var(--gold-soft)}
.btn.danger{background:#fff;color:var(--red);border-color:#efc4c0}
.btn.green{background:var(--green)}
.btn.sm{padding:6px 10px;min-height:34px;font-size:13px}
.btn[disabled]{opacity:.55;cursor:not-allowed}

.flash{padding:12px 16px;border-radius:12px;margin:0 0 14px;font-weight:500}
.flash.ok{background:var(--green-bg);color:var(--green)}
.flash.err{background:var(--red-bg);color:var(--red)}
.flash.warn{background:var(--amber-bg);color:var(--amber)}

.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap}
.badge.green{background:var(--green-bg);color:var(--green)}.badge.red{background:var(--red-bg);color:var(--red)}
.badge.blue{background:var(--blue-bg);color:var(--blue)}.badge.amber{background:var(--amber-bg);color:var(--amber)}
.badge.grey{background:#eee8e0;color:#6b6058}.badge.gold{background:var(--gold-soft);color:#7a5a0e}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -18px;padding:0 18px}
table.t{width:100%;border-collapse:collapse;font-size:13.5px}
.t th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap;background:#fcfaf6}
.t td{padding:10px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.t tr:hover td{background:#fdfbf7}
.t tfoot td{font-weight:700;background:#fcfaf6;border-top:1px solid var(--line)}
.t a{text-decoration:none;font-weight:600}

.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.filters .f{margin:0;flex:1 1 140px}
.filters .btn{flex:none}
.pager{display:flex;gap:6px;align-items:center;margin-top:14px;flex-wrap:wrap}
.pager a{min-width:34px;height:34px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--line);text-decoration:none;background:#fff}
.pager a.on{background:var(--maroon);color:#fff;border-color:var(--maroon)}
.tabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:14px;padding-bottom:2px}
.tabs a{padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);text-decoration:none;white-space:nowrap;font-weight:500;color:var(--ink)}
.tabs a.on{background:var(--maroon);color:#fff;border-color:var(--maroon)}

.list-item{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line-2)}
.list-item:last-child{border-bottom:0}
.list-item .grow{flex:1;min-width:0}
.list-item .t1{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-item .t2{font-size:12.5px;color:var(--muted)}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--gold-soft);color:#7a5a0e;display:grid;place-items:center;font-weight:700;flex:none}

.rates-strip{display:flex;gap:10px;overflow-x:auto}
.rate-chip{flex:1 0 110px;background:var(--gold-soft);border-radius:12px;padding:10px 12px}
.rate-chip .p{font-size:11.5px;font-weight:700;color:#7a5a0e;text-transform:uppercase;letter-spacing:.05em}
.rate-chip .r{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.rate-chip .u{font-size:11px;color:var(--muted)}

/* ---------- challan entry ---------- */
.cust-found{display:flex;gap:10px;align-items:center;background:var(--green-bg);color:var(--green);padding:10px 12px;border-radius:10px;margin-bottom:12px;font-size:13.5px}
.cust-new{background:var(--amber-bg);color:var(--amber)}
.sku-bar{display:flex;gap:8px;position:relative}
.sku-bar input{flex:1;text-transform:uppercase}
.suggest{position:absolute;left:0;right:0;top:100%;margin-top:4px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);z-index:30;max-height:300px;overflow:auto}
.suggest div{padding:10px 12px;border-bottom:1px solid var(--line-2);cursor:pointer}
.suggest div:hover,.suggest div.act{background:var(--gold-soft)}
.suggest small{color:var(--muted);display:block}
.line{border:1px solid var(--line);border-radius:12px;padding:12px;margin-top:12px;background:#fffdf9;position:relative}
.line-head{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.line-head .nm{flex:1;min-width:0}
.line-head .nm input{font-weight:600;border-color:transparent;background:transparent;padding:4px 6px;min-height:34px}
.line-head .nm input:focus{border-color:var(--gold);background:#fff}
.line-head .meta{font-size:12px;color:var(--muted);padding-left:6px}
.line-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.line-grid label{font-size:11px;margin-bottom:3px}
.line-grid input{min-height:38px;padding:7px 8px;font-variant-numeric:tabular-nums}
.line-grid .tot input{font-weight:700;color:var(--maroon);background:var(--gold-soft);border-color:#e7d5a7}
.line .rm{border:0;background:none;color:var(--red);cursor:pointer;padding:4px}
.pay-row{display:grid;grid-template-columns:1.2fr 1.4fr 1fr auto;gap:8px;margin-bottom:8px}
.summary{position:sticky;top:76px}
.sum-row{display:flex;justify-content:space-between;padding:6px 0;font-variant-numeric:tabular-nums}
.sum-row.big{font-size:22px;font-weight:700;color:var(--maroon);border-top:1px dashed var(--line);margin-top:6px;padding-top:12px}
.sum-row.bal{font-weight:700}
.actionbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.actionbar .btn{flex:1}
.mobile-total{display:none}

#scanner{position:fixed;inset:0;background:rgba(20,6,10,.9);z-index:100;display:none;flex-direction:column;align-items:center;justify-content:center;padding:20px}
#scanner.on{display:flex}
#scanReader{width:100%;max-width:420px;background:#000;border-radius:14px;overflow:hidden}
#scanner .btn{margin-top:16px}

.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 20% 10%,#5a1a2e 0,#3b0d1c 45%,#1e060d 100%)}
.login{width:100%;max-width:380px;background:#fff;border-radius:20px;padding:28px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.login .logo{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,var(--gold-2),var(--gold));color:var(--maroon);display:grid;place-items:center;margin-bottom:14px}
.login h1{font-family:"Cormorant Garamond",serif;font-size:28px;color:var(--maroon)}
body.bare .main{margin:0;padding:0}

.chart-box{position:relative;height:260px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:500}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .line-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:900px){
  .split{grid-template-columns:minmax(0,1fr)}
  .summary{position:static}
}
@media (max-width:860px){
  .sidebar{transform:translateX(-100%);box-shadow:0 0 40px rgba(0,0,0,.3)}
  body.nav-open .sidebar{transform:none}
  body.nav-open .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:35}
  .main{margin-left:0;padding:0 16px calc(96px + env(safe-area-inset-bottom))}
  .only-mobile{display:grid}
  .topbar{padding:12px 0 10px}
  .topbar h1{font-size:23px}
  .topactions .btn span{display:none}
  .g2,.g3{grid-template-columns:minmax(0,1fr)}
  .row{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
  .row>[style*="span 2"]{grid-column:1/-1!important}
  .card{padding:14px}
  .tablewrap{margin:0 -14px;padding:0 14px}
  .bottombar{display:flex;position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);z-index:30;padding:6px 6px calc(6px + env(safe-area-inset-bottom));justify-content:space-around;align-items:center}
  .bottombar a{display:flex;flex-direction:column;align-items:center;font-size:10.5px;color:var(--muted);text-decoration:none;gap:2px;flex:1}
  .bottombar a.on{color:var(--maroon);font-weight:600}
  .bottombar .fab{flex:none;width:56px;height:56px;border-radius:18px;background:linear-gradient(135deg,var(--gold-2),var(--gold));color:var(--maroon);display:grid;place-items:center;margin-top:-26px;box-shadow:0 8px 20px rgba(196,154,44,.45)}
  .line-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pay-row{grid-template-columns:1fr 1fr}
  .pay-row .rm{grid-column:span 2}
  .mobile-total{display:flex;position:fixed;left:0;right:0;bottom:calc(68px + env(safe-area-inset-bottom));background:var(--maroon);color:#fff;padding:10px 16px;z-index:29;justify-content:space-between;align-items:center;font-weight:600}
  .mobile-total b{font-size:19px;color:var(--gold-2)}
  body.has-mtotal .main{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
  .hide-m{display:none}
}
@media (max-width:420px){
  .g4{grid-template-columns:1fr 1fr}
  .kpi .v{font-size:20px}
}
@media print{
  .sidebar,.bottombar,.topbar,.no-print{display:none!important}
  .main{margin:0;padding:0}
}