*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --p:#6366f1;--pl:#eef2ff;--pd:#4f46e5;
  --danger:#ef4444;--dl:#fef2f2;
  --success:#22c55e;--sl:#f0fdf4;
  --warn:#f59e0b;--wl:#fffbeb;
  --txt:#111827;--txt2:#6b7280;--txt3:#9ca3af;
  --bdr:#e5e7eb;--bg:#f3f4f6;--card:#fff;
  --shadow:0 1px 3px rgba(0,0,0,0.08);
}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--txt);min-height:100vh;overscroll-behavior:none}

/* HEADER */
.header{background:var(--p);color:#fff;padding:14px 16px 0;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(99,102,241,0.3)}
.h-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.shop-name{font-size:19px;font-weight:700;letter-spacing:-.3px}
.shop-tagline{font-size:11px;opacity:.75;margin-top:1px}
.h-badges{display:flex;gap:6px;align-items:center}
.badge{font-size:11px;padding:3px 8px;border-radius:20px;background:rgba(255,255,255,.2);display:none}
.badge.show{display:block}
.badge.offline{background:rgba(239,68,68,.4)}

/* SUMMARY CARDS */
.summary{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px 16px;background:rgba(0,0,0,.15);margin:0 -16px;padding:12px 16px}
.s-card{background:rgba(255,255,255,.15);border-radius:10px;padding:10px 12px;text-align:center}
.s-val{font-size:20px;font-weight:700}
.s-lbl{font-size:11px;opacity:.75;margin-top:2px}

/* TABS */
.tabs{display:flex;background:var(--card);border-bottom:1px solid var(--bdr);position:sticky;top:100px;z-index:90}
.tab{flex:1;padding:12px 8px;text-align:center;font-size:13px;font-weight:500;color:var(--txt2);border-bottom:2px solid transparent;cursor:pointer;transition:all .2s}
.tab.active{color:var(--p);border-bottom-color:var(--p)}

/* TOOLBAR */
.toolbar{padding:12px 16px;display:flex;gap:8px;background:var(--card);border-bottom:1px solid var(--bdr)}
.search-wrap{flex:1;display:flex;align-items:center;background:var(--bg);border:1px solid var(--bdr);border-radius:10px;padding:0 12px;gap:7px}
.search-wrap input{border:none;background:none;outline:none;font-size:14px;width:100%;padding:10px 0;color:var(--txt)}
.search-wrap input::placeholder{color:var(--txt3)}
.si{color:var(--txt3);font-size:14px}
.add-btn{background:var(--p);color:#fff;border:none;border-radius:10px;width:44px;font-size:24px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.add-btn:active{background:var(--pd);transform:scale(.96)}

/* LIST */
.list{padding:12px 16px;display:flex;flex-direction:column;gap:10px}
.c-card{background:var(--card);border-radius:14px;border:1px solid var(--bdr);overflow:hidden;box-shadow:var(--shadow)}
.c-main{display:flex;align-items:center;padding:13px 14px;gap:12px;cursor:pointer}
.avatar{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;flex-shrink:0}
.c-info{flex:1;min-width:0}
.c-name{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-phone{font-size:12px;color:var(--txt2);margin-top:2px}
.c-bal{text-align:right;flex-shrink:0}
.bal-amt{font-size:17px;font-weight:700}
.bal-lbl{font-size:11px;color:var(--txt2);margin-top:1px}

/* ACTIONS */
.c-actions{display:none;border-top:1px solid var(--bdr);padding:10px 14px;gap:7px;flex-wrap:wrap}
.c-actions.open{display:flex}
.act{flex:1;min-width:70px;padding:9px 6px;border-radius:8px;border:1px solid var(--bdr);background:var(--bg);font-size:12px;font-weight:600;cursor:pointer;text-align:center;color:var(--txt);white-space:nowrap}
.act:active{opacity:.7;transform:scale(.97)}
.act.udhari{border-color:#fca5a5;color:var(--danger);background:var(--dl)}
.act.pay{border-color:#86efac;color:#16a34a;background:var(--sl)}
.act.hist{border-color:#a5b4fc;color:var(--pd);background:var(--pl)}
.act.wa{border-color:#86efac;color:#15803d;background:var(--sl)}
.act.del{border-color:#fca5a5;color:var(--danger);background:var(--dl)}
.act.edit{border-color:var(--bdr);color:var(--txt2);background:var(--bg)}

/* EMPTY */
.empty{text-align:center;padding:60px 24px;color:var(--txt2)}
.empty-ico{font-size:52px;margin-bottom:14px}
.empty h3{font-size:17px;color:var(--txt);font-weight:600;margin-bottom:6px}
.empty p{font-size:14px;line-height:1.6}

/* MODAL */
.mbg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;align-items:flex-end;justify-content:center}
.mbg.open{display:flex}
.modal{background:var(--card);border-radius:20px 20px 0 0;width:100%;max-width:520px;padding:20px 20px 36px;max-height:90vh;overflow-y:auto}
.m-handle{width:40px;height:4px;background:var(--bdr);border-radius:2px;margin:0 auto 16px}
.m-title{font-size:17px;font-weight:700;margin-bottom:4px}
.m-sub{font-size:13px;color:var(--txt2);margin-bottom:18px}
.fg{margin-bottom:13px}
.fg label{font-size:13px;color:var(--txt2);font-weight:500;display:block;margin-bottom:5px}
.fg input,.fg select,.fg textarea{width:100%;padding:12px 14px;border:1.5px solid var(--bdr);border-radius:10px;font-size:15px;outline:none;background:var(--bg);color:var(--txt);font-family:inherit}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--p);background:#fff}
.fg textarea{resize:none;height:70px}
.fg .hint{font-size:11px;color:var(--txt3);margin-top:4px}
.mbtns{display:flex;gap:9px;margin-top:18px}
.btn-c{flex:1;padding:13px;border:1.5px solid var(--bdr);border-radius:10px;background:none;font-size:15px;cursor:pointer;color:var(--txt2);font-weight:500}
.btn-s{flex:2;padding:13px;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer}
.btn-s.primary{background:var(--p);color:#fff}
.btn-s.success{background:var(--success);color:#fff}
.btn-s.danger{background:var(--danger);color:#fff}
.btn-s:active{opacity:.85;transform:scale(.98)}

/* HISTORY */
.h-list{max-height:55vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.h-bal-bar{background:var(--pl);border-radius:10px;padding:12px 14px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center}
.h-bal-bar .lbl{font-size:13px;color:var(--txt2)}
.h-bal-bar .amt{font-size:18px;font-weight:700}
.tx-item{display:flex;justify-content:space-between;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--bdr)}
.tx-item:last-child{border-bottom:none}
.tx-left{}
.tx-type{font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;display:inline-block;margin-bottom:4px}
.tx-type.udhari{background:var(--dl);color:var(--danger)}
.tx-type.payment{background:var(--sl);color:#15803d}
.tx-note{font-size:13px;color:var(--txt2);margin-bottom:2px}
.tx-date{font-size:11px;color:var(--txt3)}
.tx-amt{font-size:16px;font-weight:700}
.tx-amt.udhari{color:var(--danger)}
.tx-amt.payment{color:var(--success)}
.tx-del{font-size:12px;color:var(--txt3);cursor:pointer;margin-top:4px;text-align:right;text-decoration:underline}
.no-tx{text-align:center;padding:30px;color:var(--txt2);font-size:14px}

/* WHATSAPP PREVIEW */
.wa-preview{background:#e7fdb5;border-radius:12px;padding:14px;font-size:13px;line-height:1.7;color:#1a1a1a;font-family:'Segoe UI',sans-serif;white-space:pre-wrap;word-break:break-word;margin-bottom:14px;border:1px solid #c8f59a}
.wa-btn{background:#25d366;color:#fff;border:none;border-radius:10px;padding:13px;font-size:15px;font-weight:700;cursor:pointer;width:100%;display:flex;align-items:center;justify-content:center;gap:8px}
.wa-btn:active{background:#1da851}

/* TOAST */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:#1f2937;color:#fff;padding:10px 20px;border-radius:10px;font-size:14px;z-index:999;transition:transform .3s;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.success{background:#16a34a}
.toast.error{background:#dc2626}

/* SYNC status */
.sync-row{display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,.7);margin-top:8px;padding-bottom:12px}
.sync-dot{width:7px;height:7px;border-radius:50%;background:var(--success);flex-shrink:0}
.sync-dot.offline{background:#f87171}
.sync-dot.syncing{background:var(--warn);animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* INSTALL */
.install-bar{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--pd);color:#fff;padding:14px 16px;z-index:150;align-items:center;gap:10px}
.install-bar.show{display:flex}
.install-bar p{flex:1;font-size:13px;line-height:1.4}
.install-bar .ib{background:#fff;color:var(--pd);border:none;border-radius:8px;padding:8px 14px;font-size:13px;font-weight:700;cursor:pointer;flex-shrink:0}
.install-bar .ic{background:none;border:none;color:#fff;font-size:22px;cursor:pointer;flex-shrink:0;line-height:1}

/* LOADING */
.loading{text-align:center;padding:40px;color:var(--txt2);font-size:14px}
.spinner{display:inline-block;width:28px;height:28px;border:3px solid var(--bdr);border-top-color:var(--p);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:10px}
@keyframes spin{to{transform:rotate(360deg)}}

/* FOOTER */
.footer{text-align:center;padding:20px 16px;font-size:11px;color:var(--txt3);line-height:1.7}
.footer a{color:var(--p);text-decoration:none}

/* OFFLINE QUEUE BADGE */
.q-badge{background:var(--warn);color:#fff;font-size:10px;padding:1px 6px;border-radius:10px;margin-left:4px;display:none}
.q-badge.show{display:inline-block}