/* Adapted from /Users/venkatv/Downloads/dxp/dxp-package2-vendor-customer.html's design system —
   same variables/classes so this screen looks like it belongs in that same file. */
:root{
  --s9:#0E1E2E;--s8:#162436;--s7:#1E3248;--s5:#3D5578;--s4:#5B7A9E;--s3:#8BA3C0;
  --blue:#1E6FD9;--bl:#EBF3FF;--bm:#90BEF5;--bd:#1558B0;
  --amb:#F0A500;--al:#FFF8E6;--am:#F9D97A;--ad:#C47F00;
  --grn:#16A34A;--gl:#F0FDF4;--gm:#86EFAC;
  --red:#DC2626;--rl:#FEF2F2;--rm:#FCA5A5;
  --org:#EA580C;--ol:#FFF7ED;
  --w:#FFFFFF;--g50:#F8FAFC;--g100:#F1F5F9;--g200:#E2E8F0;
  --g300:#CBD5E1;--g400:#94A3B8;--g500:#64748B;--g600:#475569;
  --g700:#334155;--g900:#0F172A;
  --nw:60px;--ne:224px;--th:54px;--r:10px;--rs:6px;--rl2:14px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px}
body{font-family:'Inter',sans-serif;background:var(--g50);color:var(--g900);display:flex;min-height:100vh;overflow-x:hidden}

.scr{display:none;width:100%;min-height:100vh}
.scr.on{display:flex}

/* NAV */
.nav{width:var(--ne);background:var(--s9);display:flex;flex-direction:column;height:100vh;position:sticky;top:0;z-index:200;flex-shrink:0}
.nbrand{height:var(--th);display:flex;align-items:center;padding:0 15px;gap:10px;border-bottom:1px solid var(--s8);flex-shrink:0}
.nm{width:28px;height:28px;background:var(--blue);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;flex-shrink:0}
.nbn{font-size:13px;font-weight:700;color:#fff}
.nbs{font-size:9px;color:var(--s4);text-transform:uppercase;letter-spacing:.5px}
.nsec{padding:13px 0 2px;flex-shrink:0}
.nsl{font-size:8.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--s7);padding:0 15px;margin-bottom:3px}
.ni{display:flex;align-items:center;gap:10px;padding:7px 14px;cursor:pointer;transition:.15s;color:var(--s4);text-decoration:none;border-left:2px solid transparent}
.ni:hover{background:var(--s8);color:var(--s3)}
.ni.on{background:rgba(30,111,217,.12);color:var(--blue);border-left-color:var(--blue)}
.nic{font-size:16px;flex-shrink:0;width:26px;text-align:center}
.nil{font-size:12.5px;font-weight:500}
.nbot{margin-top:auto;border-top:1px solid var(--s8);padding:10px 0}
.nusr{display:flex;align-items:center;gap:9px;padding:7px 13px;cursor:pointer}
.nav-av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--amb));display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.nun{font-size:12px;font-weight:600;color:#fff}
.nur{font-size:10.5px;color:var(--s4)}

/* MAIN */
.main{flex:1;display:flex;flex-direction:column;min-width:0;overflow-y:auto;height:100vh}
.tb{height:var(--th);background:var(--w);border-bottom:1px solid var(--g200);display:flex;align-items:center;padding:0 20px;gap:11px;position:sticky;top:0;z-index:100;flex-shrink:0}
.ctx{display:flex;align-items:center;gap:7px;padding:5px 11px;background:var(--gl);border:1px solid var(--gm);border-radius:20px}
.cdot{width:7px;height:7px;border-radius:50%;background:var(--grn)}
.clbl{font-size:11.5px;font-weight:700;color:var(--grn)}
.bc{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--g500)}
.bc .sep{color:var(--g300)}.bc .cur{color:var(--g900);font-weight:600}
.bc .lnk{color:var(--blue);cursor:pointer}
.tba{margin-left:auto;display:flex;align-items:center;gap:8px}
.tbb{padding:6px 12px;border-radius:var(--rs);border:1.5px solid var(--g200);background:none;cursor:pointer;font-size:12px;color:var(--g600);font-family:'Inter',sans-serif}
.tbb:hover{background:var(--g50)}

/* CONTENT */
.con{padding:20px 22px;flex:1;max-width:920px;margin:0 auto;width:100%}
.ph{margin-bottom:18px;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.pey{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--blue);margin-bottom:3px}
.pt{font-size:21px;font-weight:700;color:var(--g900);letter-spacing:-.4px}
.ps{font-size:12.5px;color:var(--g500);margin-top:3px}
.pa{display:flex;gap:8px;align-items:center;flex-shrink:0}

/* CARDS */
.card{background:var(--w);border:1px solid var(--g200);border-radius:var(--r);overflow:hidden;margin-bottom:14px}
.ch{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--g100)}
.ct{font-size:13px;font-weight:700;color:var(--g900)}
.cs{font-size:11px;color:var(--g500);margin-top:1px}
.cb{padding:14px 16px}
.cf{padding:9px 16px;border-top:1px solid var(--g100);display:flex;align-items:center;justify-content:flex-end;gap:8px}

/* BUTTONS */
.btn{padding:8px 15px;border-radius:var(--rs);font-size:12.5px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;border:none;transition:.15s;display:inline-flex;align-items:center;gap:5px}
.bp{background:var(--blue);color:#fff}.bp:hover{background:var(--bd)}
.bp:disabled{background:var(--g300);cursor:not-allowed}
.bo{background:none;border:1.5px solid var(--g200);color:var(--g600)}.bo:hover{border-color:var(--g300);background:var(--g50)}
.bs{padding:5px 11px;font-size:11.5px}
.bg{background:none;border:none;color:var(--blue);font-size:12px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;padding:0}

/* TABLES */
.t{width:100%;border-collapse:collapse}
.t th{padding:8px 12px;text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--g500);background:var(--g50);border-bottom:1px solid var(--g200)}
.t td{padding:10px 12px;font-size:12.5px;color:var(--g700);border-bottom:1px solid var(--g100);vertical-align:middle}
.t tr:last-child td{border-bottom:none}
.t tr:hover td{background:var(--g50)}
.lt{width:100%;border-collapse:collapse;border:1px solid var(--g200);border-radius:var(--rs);overflow:hidden}
.lt th{padding:8px 11px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--g500);background:var(--g50);text-align:left}
.lt td{padding:9px 11px;font-size:12.5px;color:var(--g700);border-top:1px solid var(--g100)}
.lt tr:first-child td{border-top:none}

/* STATUS */
.sp{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:20px;white-space:nowrap}
.s-open{background:#EFF6FF;color:#1D4ED8}
.s-pend{background:var(--ol);color:var(--org)}
.s-ack{background:var(--bl);color:var(--blue)}
.s-act{background:var(--gl);color:var(--grn)}
.s-over{background:var(--rl);color:var(--red)}

/* MONO / AMOUNTS */
.mono{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--g700)}
.amt{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;color:var(--g900)}

/* FORMS */
.fgrp{margin-bottom:13px}
.fl{font-size:11.5px;font-weight:600;color:var(--g700);margin-bottom:4px;display:block}
.fh{font-size:10.5px;color:var(--g500);margin-top:3px}
.fi{width:100%;padding:9px 11px;border:1.5px solid var(--g200);border-radius:var(--rs);font-size:13px;font-family:'Inter',sans-serif;color:var(--g900);background:var(--g50);outline:none;transition:.15s}
.fi:focus{border-color:var(--blue);background:var(--w)}
.fi::placeholder{color:var(--g400)}
textarea.fi{resize:vertical;min-height:64px;font-family:'Inter',sans-serif}
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.fb{display:flex;align-items:flex-end;gap:9px;padding:12px 16px;border-bottom:1px solid var(--g100);flex-wrap:wrap}
.fb .fgrp{margin-bottom:0;min-width:160px}

/* TABS */
.tabs{display:flex;border-bottom:1px solid var(--g200)}
.tab{padding:9px 13px;font-size:12.5px;font-weight:600;color:var(--g500);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab.on{color:var(--blue);border-bottom-color:var(--blue)}
.tabpanel{display:none}
.tabpanel.on{display:block}

/* CALLOUT */
.co{border-radius:var(--rs);padding:9px 12px;display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.55;margin-bottom:13px}
.co-info{background:var(--bl);border:1px solid var(--bm);color:var(--bd)}
.co-warn{background:var(--rl);border:1px solid var(--rm);color:var(--red)}
.co-ok{background:var(--gl);border:1px solid var(--gm);color:var(--grn)}

/* MODAL */
.mov{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:500;display:none;align-items:center;justify-content:center;padding:20px}
.mov.on{display:flex}
.modal{background:var(--w);border-radius:var(--rl2);width:100%;max-width:480px;max-height:88vh;overflow-y:auto;box-shadow:0 20px 48px rgba(0,0,0,.18)}
.mh{padding:18px 20px 14px;border-bottom:1px solid var(--g100)}
.mt{font-size:15px;font-weight:700;color:var(--g900);margin-bottom:2px}
.mst{font-size:12px;color:var(--g500);line-height:1.5}
.mb{padding:16px 20px}
.mf{padding:12px 20px;border-top:1px solid var(--g100);display:flex;gap:7px;justify-content:flex-end}

/* MISC */
.stack{display:flex;flex-direction:column;gap:14px}
.center-screen{align-items:center;justify-content:center}
.auth-card{width:100%;max-width:380px}
.auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:22px;justify-content:center}
.linklike{color:var(--blue);cursor:pointer;font-weight:600}
.empty{padding:28px 16px;text-align:center;color:var(--g500);font-size:12.5px}
.dropzone{border:1.5px dashed var(--g300);border-radius:var(--rs);padding:16px;text-align:center;font-size:12px;color:var(--g500);cursor:pointer;background:var(--g50)}
.dropzone:hover{border-color:var(--blue);color:var(--blue)}
.dropzone input{display:none}
.spin{display:inline-block;width:12px;height:12px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:sp .6s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}