:root{
  --bg:#eef1f7; --panel:#ffffff; --panel2:#f3f6fb; --line:#dde3ee;
  --ink:#1b2436; --muted:#5c6780; --dim:#97a1b6;
  --brand:#2f6fe0; --brand2:#245ac0;
  --green:#12915d; --green-bg:#e2f6ec; --amber:#b07414; --amber-bg:#fbefd6;
  --red:#d64545; --red-bg:#fce4e4; --violet:#6d4ff0;
  --shadow:0 1px 3px rgba(20,30,55,.06),0 1px 2px rgba(20,30,55,.04);
  --radius:10px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
a{color:var(--brand);text-decoration:none}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace}

/* ---- top bar ---- */
header.top{display:flex;align-items:center;gap:14px;padding:12px 22px;
  background:#ffffff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;box-shadow:var(--shadow)}
.logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--brand),var(--violet));
  display:grid;place-items:center;font-weight:800;color:#fff;font-size:15px}
.brand b{font-size:16px}
.brand span{display:block;color:var(--muted);font-size:11.5px;margin-top:1px}
.top .spacer{flex:1}
.pill{background:var(--panel2);border:1px solid var(--line);padding:5px 11px;border-radius:20px;color:var(--muted);font-size:12px}

/* ---- tabs ---- */
nav.tabs{display:flex;gap:4px;padding:10px 18px 0;background:#ffffff;border-bottom:1px solid var(--line);
  position:sticky;top:59px;z-index:15;flex-wrap:wrap}
nav.tabs button{background:transparent;border:0;color:var(--muted);padding:10px 16px 12px;font-size:13.5px;
  cursor:pointer;border-bottom:2px solid transparent;font-weight:600;display:flex;align-items:center;gap:8px}
nav.tabs button .ic{font-size:15px}
nav.tabs button .cnt{background:var(--panel2);border:1px solid var(--line);border-radius:11px;
  font-size:11px;padding:1px 7px;color:var(--muted)}
nav.tabs button:hover{color:var(--ink)}
nav.tabs button.active{color:var(--ink);border-bottom-color:var(--brand)}
nav.tabs button.recon.active{border-bottom-color:var(--violet)}

/* ---- nested sub-tabs (Stage 1 / Stage 2) ---- */
nav.subtabs{display:flex;gap:4px;margin-bottom:14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
nav.subtabs button{background:transparent;border:0;color:var(--muted);padding:8px 13px 10px;font-size:12.5px;
  cursor:pointer;border-bottom:2px solid transparent;font-weight:600;display:flex;align-items:center;gap:6px}
nav.subtabs button .cnt{background:var(--panel2);border:1px solid var(--line);border-radius:11px;
  font-size:10.5px;padding:1px 7px;color:var(--muted)}
nav.subtabs button:hover{color:var(--ink)}
nav.subtabs button.active{color:var(--ink);border-bottom-color:var(--brand)}
nav.subtabs button.disabled{opacity:.45;cursor:not-allowed}
.subview{display:none}.subview.active{display:block}

main{padding:20px 22px 60px;max-width:1500px;margin:0 auto}
.view{display:none}.view.active{display:block}
h2.vtitle{margin:0 0 4px;font-size:19px}
.vsub{color:var(--muted);margin:0 0 16px;font-size:13px;max-width:820px}

/* ---- upload drop ---- */
.drop{border:1.5px dashed var(--line);border-radius:var(--radius);padding:22px;text-align:center;
  background:var(--panel);margin-bottom:16px;display:flex;align-items:center;gap:18px;justify-content:center}
.drop .big{font-size:26px}
.drop b{display:block}.drop small{color:var(--muted)}
.btn{background:var(--brand);color:#fff;border:0;padding:8px 15px;border-radius:8px;font-weight:600;cursor:pointer;font-size:13px}
.btn:hover{background:var(--brand2)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn.ghost:hover{background:var(--panel2)}
.btn.sm{padding:5px 10px;font-size:12px}
.btn.violet{background:var(--violet);color:#fff}.btn.violet:hover{filter:brightness(1.08)}
.btn.warn{background:var(--amber);color:#fff}
.btn.danger{background:transparent;border:1px solid var(--red);color:var(--red)}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ---- cards ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px;box-shadow:var(--shadow)}
.card .k{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.4px}
.card .v{font-size:22px;font-weight:700;margin-top:3px}
.card .v.small{font-size:17px}
.card.good .v{color:var(--green)}.card.warn .v{color:var(--amber)}.card.info .v{color:var(--brand)}
.card.bad{border-color:#f3c6c6;background:var(--red-bg)}.card.bad .v{color:var(--red)}
.card .sub{color:var(--muted);font-size:11px;margin-top:2px}

/* ---- tables ---- */
.tablewrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:auto;max-height:62vh;box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;font-size:12.7px}
th,td{padding:8px 11px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
thead th{position:sticky;top:0;background:var(--panel2);color:var(--muted);font-weight:600;z-index:2;
  font-size:11.5px;text-transform:uppercase;letter-spacing:.3px}
tbody tr:hover{background:#f2f6fd}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.tag{display:inline-block;padding:1px 8px;border-radius:20px;font-size:11px;font-weight:600;border:1px solid transparent}
.tag.web{background:#e6efff;color:#2560c9;border-color:#c5daf7}
.tag.backend{background:#efe9ff;color:#6a45d6;border-color:#dccdff}
.tag.pos{background:#ddf6f0;color:#0e8870;border-color:#b6e9de}
.tag.autocount{background:#efe9ff;color:#6a45d6;border-color:#dccdff}
.tag.ocbc{background:#fdecd9;color:#b06712;border-color:#f3d5b0}
.tag.hlbb{background:#e2f1fb;color:#1c6fa8;border-color:#bcdff3}
.tag.tng{background:#e1f6e8;color:#1a8a3f;border-color:#b8e7c5}
.tag.payex{background:#fdecd9;color:#b06712;border-color:#f3d5b0}
.tag.bank{background:#e2f1fb;color:#1c6fa8;border-color:#bcdff3}
.tag.ok{background:var(--green-bg);color:var(--green);border-color:#bfe9d2}
.tag.open{background:var(--amber-bg);color:var(--amber);border-color:#f0dcae}
.tag.ko{background:var(--red-bg);color:var(--red);border-color:#f3c6c6}
.tag.auto{background:#e6efff;color:#2560c9}
.tag.acdoc{background:#efe9ff;color:#6a45d6;border-color:#dccdff;font-family:ui-monospace,monospace}
/* 5 Razorpay payment-method groups */
.tag.pt-ld{background:#e7edfb;color:#3a52c4;border-color:#c9d4f4}
.tag.pt-lc{background:#e6efff;color:#2560c9;border-color:#c5daf7}
.tag.pt-fc{background:#fdecd9;color:#b06712;border-color:#f3d5b0}
.tag.pt-fpx{background:#efe9ff;color:#6a45d6;border-color:#dccdff}
.tag.pt-tng{background:#e1f6e8;color:#1a8a3f;border-color:#b8e7c5}
.tag.pt-ew{background:#fdeaf3;color:#c22d70;border-color:#f6cfe0}
/* pipeline status badges */
.tag.st-draft{background:#eef1f7;color:#6a7590;border-color:#dbe1ec}
.tag.st-method{background:#e6efff;color:#2560c9;border-color:#c5daf7}
.tag.st-inv{background:#efe9ff;color:#6a45d6;border-color:#dccdff}
.tag.st-or{background:#fdecd9;color:#b06712;border-color:#f3d5b0}
.tag.st-done{background:#e2f6ec;color:#12915d;border-color:#bfe9d2}
.tag.st-refund{background:#fce4e4;color:#c0392b;border-color:#f3c6c6}
tr.refund-row td{background:#fdf3f3}
.invlink{cursor:pointer;text-decoration:underline dotted;text-underline-offset:2px}
.invlink:hover{color:var(--brand)}
/* header gateway dropdown */
.gwpill{display:inline-flex;align-items:center;gap:2px;padding:2px 6px 2px 11px}
.gwpill select{border:0;background:transparent;color:var(--ink);font-weight:600;font-size:12.5px;padding:3px 4px;cursor:pointer}
/* inline selects inside tables */
select.pmsel{padding:3px 6px;font-size:12px;max-width:210px}
/* pay-type group cards (Stage 1) */
.card.pt{cursor:pointer;transition:.12s;border-top:3px solid var(--line)}
.card.pt:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(20,30,55,.10)}
.card.pt.sel{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.card.pt.ld{border-top-color:#3a52c4}.card.pt.lc{border-top-color:#2560c9}
.card.pt.fc{border-top-color:#b06712}.card.pt.fpx{border-top-color:#6a45d6}.card.pt.tng{border-top-color:#1a8a3f}.card.pt.ew{border-top-color:#c22d70}
.card.pt .sub{font-size:11px;color:var(--muted);margin-top:2px}
.muted{color:var(--muted)}.dim{color:var(--dim)}

/* ---- recon layout ---- */
.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);padding:11px 14px;margin-bottom:14px;box-shadow:var(--shadow)}
.filters label{color:var(--muted);font-size:12px;margin-right:-4px}
select,input[type=date],input[type=text],input[type=number]{background:var(--panel2);border:1px solid var(--line);
  color:var(--ink);padding:6px 9px;border-radius:7px;font-size:13px;font-family:inherit}
input[type=text]::placeholder{color:var(--dim)}
.recon-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:1050px){.recon-grid{grid-template-columns:1fr}}
.pane{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.pane-head{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--panel2)}
.pane-head h3{margin:0;font-size:14px}.pane-head .spacer{flex:1}
.pane-body{overflow:auto;max-height:60vh}
.pane.bank .pane-head{border-left:3px solid var(--amber)}
.pane.order .pane-head{border-left:3px solid var(--violet)}

tr.selectable{cursor:pointer}
tr.sel{background:#e4edfc !important;box-shadow:inset 3px 0 0 var(--brand)}
tr.matched{opacity:.62}
tr.suggest{box-shadow:inset 3px 0 0 var(--green)}
tr.dimmed{opacity:.28}
.link{cursor:pointer;color:var(--brand)}
.xbtn{cursor:pointer;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:1px 7px;font-size:11px;background:var(--panel2)}
.xbtn:hover{color:var(--ink)}

/* action bar */
.actionbar{position:sticky;bottom:0;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);padding:11px 14px;margin-top:14px;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;box-shadow:0 -2px 8px rgba(20,30,55,.06)}
.actionbar .sel-info{font-size:12.5px;color:var(--muted)}
.actionbar .sel-info b{color:var(--ink)}
.actionbar .spacer{flex:1}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(27,36,54,.35);display:none;place-items:center;z-index:50}
.modal-bg.show{display:grid}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;width:420px;max-width:92vw;box-shadow:0 12px 40px rgba(20,30,55,.22)}
.modal h3{margin:0 0 14px}
.modal .row{display:flex;flex-direction:column;gap:5px;margin-bottom:11px}
.modal .row label{color:var(--muted);font-size:12px}
.modal .foot{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px}

/* AutoCount link — header pill + config read-out */
.acpill{cursor:pointer;user-select:none}
.acpill:hover{border-color:var(--brand);color:var(--ink)}
.acpill.live{background:#efe9ff;border-color:#dccdff;color:#6a45d6;font-weight:600}
.acpill.demo{background:var(--panel2)}
.acpill.bad{background:var(--red-bg);border-color:#f3c6c6;color:var(--red);font-weight:600}
table.kv{width:100%;border-collapse:collapse;font-size:12.5px}
table.kv td{padding:5px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.kv td:first-child{color:var(--muted);width:42%;white-space:nowrap}
table.kv td:last-child{font-family:ui-monospace,"SF Mono",Menlo,monospace;word-break:break-all}

/* Master Data — config-vs-book check strip */
.mdcheck{border:1px solid var(--line);border-radius:10px;padding:11px 14px;margin-bottom:14px;background:var(--panel)}
.mdcheck.ok{border-color:#bfe9d2;background:var(--green-bg)}
.mdcheck.warn{border-color:#f0dcae;background:var(--amber-bg)}
.mdcheck.bad{border-color:#f3c6c6;background:var(--red-bg)}
.mdcheck>b{font-size:13px;cursor:pointer;user-select:none;display:inline-block}
.mdcheck-rows{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:9px}
.mdchk{font-size:11.5px;color:var(--muted);display:inline-flex;align-items:center;gap:5px}
.mdchk .mono{color:var(--ink)}
/* one slim toolbar per table, in place of a repeated header block */
.md-bar{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:12px;color:var(--muted)}
.md-bar input{min-width:200px}
.md-bar .mono{color:var(--ink);font-weight:600}
.md-bar .tag{margin-right:-4px}

#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);
  background:#1b2436;color:#fff;border:1px solid var(--line);padding:10px 18px;border-radius:9px;
  opacity:0;transition:.25s;z-index:60;font-size:13px;box-shadow:0 8px 24px rgba(20,30,55,.25)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.good{border-color:var(--green)}#toast.bad{border-color:var(--red)}
.empty{padding:34px;text-align:center;color:var(--dim)}

/* compact editable line-items grid (Invoice API create + detail) */
table.lines{width:100%;border-collapse:collapse;font-size:12px}
table.lines th{position:sticky;top:0;background:var(--panel2);text-align:left;
  padding:6px 8px;border-bottom:1px solid var(--line);color:var(--muted);font-weight:600;z-index:1}
table.lines th.num,table.lines td.num{text-align:right}
table.lines td{padding:3px 6px;border-bottom:1px solid var(--line)}
table.lines input{width:100%;padding:4px 6px;font-size:12px}
table.lines input.num{text-align:right}
table.lines td:last-child{width:26px;text-align:center}

/* ---- API invoice detail: a document, not a field dump ---------------------- */
.inv-head{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;
  border:1px solid var(--line);border-radius:10px;padding:13px 15px;background:var(--panel2);margin-bottom:13px}
.inv-head .who{flex:1 1 240px;min-width:0}
.inv-head .who b{font-size:15px;display:block;line-height:1.3}
.inv-head .who .sub{color:var(--muted);font-size:12px;margin-top:3px}
.inv-head .tot{text-align:right;flex:0 0 auto}
.inv-head .tot .amt{font-size:22px;font-weight:700;line-height:1.15;letter-spacing:-.02em}
.inv-head .tot .lbl{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.inv-head .tot .net{color:var(--muted);font-size:11.5px;margin-top:2px}

.inv-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;
  overflow:hidden;margin-bottom:15px}
.inv-facts .fld{background:var(--panel);padding:8px 12px 9px;min-width:0}
.inv-facts .fld.money{background:var(--panel2)}
.inv-facts .k{color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em}
.inv-facts .v{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12.5px;
  overflow-wrap:anywhere;margin-top:3px;min-height:17px}
.inv-facts .fld.money .v{font-size:14px}

.inv-lines-head{display:flex;align-items:baseline;gap:9px;margin:2px 0 7px}
.inv-lines-head b{font-size:13px}
table.lines td.desc{white-space:normal;word-break:break-word;color:var(--ink);min-width:230px}
table.lines td.nocode{color:var(--amber);font-style:italic}
.inv-foot{display:flex;justify-content:flex-end;gap:22px;font-size:12px;
  padding:8px 7px 0;border-top:1px solid var(--line);margin-top:-1px}
.inv-foot .gap{color:#a33}

/* ---- Invoice API "How to call" -------------------------------------------- */
.doc-g{margin-bottom:22px}
.doc-g h4{margin:0 0 9px;font-size:13px;letter-spacing:.02em}
.doc-ep{border:1px solid var(--line);border-radius:10px;background:var(--panel);
  padding:11px 13px 12px;margin-bottom:10px}
.doc-sig{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.doc-sig .path{font-size:12.5px;font-weight:600}
.doc-sig .dim{font-size:12px}
.verb{font-size:10.5px;font-weight:700;letter-spacing:.05em;padding:2px 7px;border-radius:5px;
  border:1px solid transparent}
.verb.v-get{background:#e6efff;color:#2560c9;border-color:#c5daf7}
.verb.v-post{background:var(--green-bg);color:var(--green);border-color:#bfe9d2}
.verb.v-patch{background:var(--amber-bg);color:var(--amber);border-color:#f0dcae}
.doc-q{border-collapse:collapse;font-size:12px;margin:0 0 8px 2px}
.doc-q td{padding:2px 14px 2px 0;vertical-align:top}
.doc-code{position:relative;background:var(--panel2);border:1px solid var(--line);
  border-radius:8px;padding:9px 11px;overflow:auto}
.doc-code pre,.doc-res pre{margin:0;font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:11.5px;line-height:1.55;white-space:pre;overflow-wrap:normal}
.doc-code .copy{position:absolute;top:6px;right:6px;padding:1px 8px;font-size:11px}
.doc-res{margin-top:7px;display:flex;gap:9px;align-items:flex-start}
.doc-res .k{color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  padding-top:2px;flex:0 0 auto}
.doc-note{color:var(--muted);font-size:11.5px;margin:8px 0 0;line-height:1.55}
.tag.acdoc.clickable{cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.tag.acdoc.clickable:hover{filter:brightness(.94)}

/* ---- Stage 3 selection + preview ------------------------------------------ */
th.tick,td.tick{width:30px;text-align:center;padding-left:8px}
td.tick input,th.tick input{cursor:pointer;margin:0}
.pv-job{border:1px solid var(--line);border-radius:10px;margin-bottom:14px;overflow:hidden}
.pv-job>h5{margin:0;padding:9px 13px;background:var(--panel2);border-bottom:1px solid var(--line);
  font-size:12.5px;display:flex;align-items:center;gap:9px}
.pv-job>h5 .step{background:var(--ink);color:var(--panel);border-radius:20px;width:18px;height:18px;
  display:grid;place-items:center;font-size:10.5px;font-weight:700}
.pv-job>h5 .mono{font-weight:600}
.pv-body{padding:11px 13px}
.pv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:9px 14px;margin-bottom:10px}
.pv-grid label{display:block;color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}
.pv-grid input{width:100%;padding:5px 7px;font-size:12px;font-family:ui-monospace,"SF Mono",Menlo,monospace}
.pv-lines input{width:100%;padding:3px 5px;font-size:11.5px;border:1px solid transparent;background:transparent}
.pv-lines input:focus{border-color:var(--line);background:var(--panel)}
.pv-lines input.num{text-align:right}
.pv-sum{display:flex;justify-content:flex-end;font-size:12.5px;padding:9px 4px 0;border-top:1px solid var(--line)}
.pv-sum b{font-size:15px;margin-left:8px}
.pv-grid select{width:100%;padding:5px 7px;font-size:12px;font-family:ui-monospace,"SF Mono",Menlo,monospace;
  background:var(--panel);border:1px solid var(--line);border-radius:6px}
.pv-grid select.unknown{border-color:#f0dcae;background:var(--amber-bg)}

/* ---- Sign-in ---------------------------------------------------------------- */
body.loginpage{display:grid;place-items:center;min-height:100vh;margin:0;background:var(--bg)}
.loginbox{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:30px 32px 26px;width:340px;max-width:92vw;box-shadow:var(--shadow);text-align:center}
.loginbox .logo{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  margin:0 auto 12px;background:var(--violet,#6a45d6);color:#fff;font-weight:800;font-size:15px}
.loginbox h1{margin:0;font-size:17px;letter-spacing:.01em}
.loginbox .sub{margin:4px 0 20px;color:var(--muted);font-size:12px}
.loginbox label{display:block;text-align:left;color:var(--muted);font-size:11px;
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.loginbox input{width:100%;padding:9px 11px;font-size:14px;margin-bottom:14px;
  border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.loginbox button{width:100%;padding:9px;font-size:13.5px}
.loginbox .note{margin:16px 0 0;color:var(--muted);font-size:11px;line-height:1.5}
.loginerr{background:var(--red-bg);color:var(--red);border:1px solid #f3c6c6;
  border-radius:8px;padding:8px 11px;font-size:12px;margin-bottom:14px;text-align:left}
.openwarn{background:var(--amber-bg);color:var(--amber);border-bottom:1px solid #f0dcae;
  padding:6px 14px;font-size:12px;text-align:center}