@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700;9..144,900&family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
:root{
  --navy:#0f1b2d;--navy2:#162236;--navy3:#1e2f45;
  --amber:#d97706;--amber-l:#fbbf24;--amber-bg:#fffbeb;--amber-10:rgba(217,119,6,.12);
  --teal:#0891b2;--teal-bg:#ecfeff;
  --green:#059669;--green-bg:#ecfdf5;
  --red:#dc2626;--red-bg:#fef2f2;
  --blue:#2563eb;--blue-bg:#eff6ff;
  --slate:#64748b;
  --bg:#f5f3ef;--surf:#fff;--surf2:#fafaf8;
  --bdr:#e7e4dc;--bdr2:#d6d3ca;
  --txt:#1a1714;--txt2:#4a453e;--txt3:#9c958a;
  --sb-w:268px;--tb-h:60px;
  --r:10px;--r-sm:6px;--r-lg:16px;
  --sh:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --sh-md:0 4px 16px rgba(0,0,0,.09);
  --sh-lg:0 16px 48px rgba(0,0,0,.15);
  --font:'DM Sans',system-ui,sans-serif;
  --serif:'Fraunces',Georgia,serif;
  --mono:'DM Mono',monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font);font-size:14px;color:var(--txt);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased;}
a{color:var(--amber);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ── LAYOUT ── */
.wrap{display:flex;min-height:100vh;}

/* ── SIDEBAR ── */
.sb{width:var(--sb-w);background:var(--navy);display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:200;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--navy3) transparent;transition:transform .28s cubic-bezier(.4,0,.2,1);}
.sb::-webkit-scrollbar{width:3px;}.sb::-webkit-scrollbar-thumb{background:var(--navy3);}
.sb-head{padding:20px 18px 16px;border-bottom:1px solid rgba(255,255,255,.05);display:flex;align-items:center;gap:11px;}
.sb-logo{width:40px;height:40px;border-radius:9px;flex-shrink:0;background:linear-gradient(145deg,var(--amber-l),var(--amber));display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 4px 14px rgba(217,119,6,.35);}
.sb-bn{font-family:var(--serif);font-size:14px;font-weight:700;color:#fff;line-height:1.2;}
.sb-bt{font-size:10px;color:rgba(255,255,255,.28);margin-top:1px;}
.sb-sec{padding:12px 10px 2px;}
.sb-lbl{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.4px;color:rgba(255,255,255,.2);padding:0 8px 6px;}
.sb-nav{list-style:none;}
.sb-nav a{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:7px;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.48);transition:all .14s;text-decoration:none;position:relative;}
.sb-nav a:hover{background:rgba(255,255,255,.05);color:rgba(255,255,255,.85);text-decoration:none;}
.sb-nav a.on{background:var(--amber-10);color:var(--amber-l);}
.sb-nav a.on::before{content:'';position:absolute;left:0;top:22%;bottom:22%;width:3px;border-radius:0 3px 3px 0;background:var(--amber-l);}
.sb-nav .ic{font-size:15px;width:20px;text-align:center;flex-shrink:0;}
.sb-nav .nb{margin-left:auto;background:var(--red);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:20px;}
.sb-foot{margin-top:auto;border-top:1px solid rgba(255,255,255,.05);padding:12px 14px;display:flex;align-items:center;gap:9px;}
.sb-av{width:34px;height:34px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--amber),var(--teal));display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:14px;font-weight:700;color:#fff;}
.sb-un{font-size:12.5px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sb-ur{font-size:10px;color:rgba(255,255,255,.3);text-transform:capitalize;}
.sb-lo{margin-left:auto;color:rgba(255,255,255,.22);font-size:16px;text-decoration:none;transition:color .14s;}
.sb-lo:hover{color:var(--red);}

/* ── MAIN ── */
.main{margin-left:var(--sb-w);flex:1;display:flex;flex-direction:column;min-width:0;}

/* ── TOPBAR ── */
.tb{height:var(--tb-h);background:var(--surf);border-bottom:1px solid var(--bdr);display:flex;align-items:center;padding:0 22px;gap:12px;position:sticky;top:0;z-index:100;}
.tb-title{font-family:var(--serif);font-size:17px;font-weight:700;color:var(--navy);flex:1;letter-spacing:-.2px;}
.tb-r{display:flex;align-items:center;gap:9px;}
#mbtn{display:none;}

/* ── PAGE ── */
.pg{padding:22px;flex:1;}

/* ── CARD ── */
.card{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r);box-shadow:var(--sh);}
.ch{padding:14px 18px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.ct{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--navy);}
.cb{padding:18px;}

/* ── STAT GRID ── */
.sg{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:13px;margin-bottom:20px;}
.sc{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r);padding:15px 17px;display:flex;align-items:flex-start;gap:11px;box-shadow:var(--sh);transition:box-shadow .18s,transform .18s;}
.sc:hover{box-shadow:var(--sh-md);transform:translateY(-1px);}
.si{width:42px;height:42px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;}
.ic-a{background:var(--amber-bg);color:var(--amber);}
.ic-g{background:var(--green-bg);color:var(--green);}
.ic-t{background:var(--teal-bg);color:var(--teal);}
.ic-r{background:var(--red-bg);color:var(--red);}
.ic-b{background:var(--blue-bg);color:var(--blue);}
.ic-n{background:rgba(15,27,45,.07);color:var(--navy);}
.sl{font-size:11.5px;color:var(--txt3);font-weight:600;}
.sv{font-family:var(--serif);font-size:21px;font-weight:700;color:var(--navy);line-height:1.2;}
.ss{font-size:11px;color:var(--txt3);margin-top:2px;}

/* ── TABLE ── */
.tw{overflow-x:auto;}
table{width:100%;border-collapse:collapse;}
thead th{background:var(--surf2);padding:9px 13px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--txt3);border-bottom:1px solid var(--bdr);text-align:left;white-space:nowrap;}
tbody td{padding:11px 13px;border-bottom:1px solid #f0ece4;vertical-align:middle;font-size:13.5px;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover td{background:var(--surf2);}

/* ── FORMS ── */
.fg{display:flex;flex-direction:column;gap:4px;}
.fl{font-size:12px;font-weight:700;color:var(--txt2);letter-spacing:.2px;}
.fl .r{color:var(--red);}
.fc,.fs{width:100%;padding:9px 12px;font-size:13.5px;font-family:var(--font);color:var(--txt);background:var(--surf);border:1.5px solid var(--bdr2);border-radius:var(--r-sm);transition:border-color .14s,box-shadow .14s;outline:none;}
.fc:focus,.fs:focus{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-10);}
textarea.fc{resize:vertical;min-height:76px;}
.grid{display:grid;gap:13px;}
.g2{grid-template-columns:1fr 1fr;}
.g3{grid-template-columns:1fr 1fr 1fr;}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 17px;font-size:13.5px;font-weight:600;font-family:var(--font);border-radius:var(--r-sm);border:none;cursor:pointer;transition:all .14s;text-decoration:none;white-space:nowrap;line-height:1;}
.btn:hover{text-decoration:none;filter:brightness(1.07);}
.btn-sm{padding:5px 11px;font-size:12px;}
.btn-lg{padding:11px 24px;font-size:15px;}
.btn-w{width:100%;justify-content:center;}
.btn-a{background:var(--amber);color:#fff;box-shadow:0 2px 8px rgba(217,119,6,.28);}
.btn-g{background:var(--green);color:#fff;}
.btn-r{background:var(--red);color:#fff;}
.btn-t{background:var(--teal);color:#fff;}
.btn-b{background:var(--blue);color:#fff;}
.btn-gh{background:var(--surf2);color:var(--txt2);border:1.5px solid var(--bdr);}
.btn-gh:hover{background:var(--bdr);}
.btn-ol{background:transparent;color:var(--amber);border:1.5px solid var(--amber);}
.btn-ol:hover{background:var(--amber);color:#fff;}

/* ── PILLS ── */
.pill{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;}
.pill-g{background:var(--green-bg);color:#065f46;}
.pill-r{background:var(--red-bg);color:#991b1b;}
.pill-a{background:var(--amber-bg);color:#92400e;}
.pill-b{background:var(--blue-bg);color:#1e40af;}
.pill-s{background:#f1f5f9;color:#475569;}

/* ── ALERTS ── */
.alert{padding:11px 15px;border-radius:var(--r-sm);font-size:13.5px;margin-bottom:14px;border-left:4px solid transparent;}
.al-ok{background:var(--green-bg);border-color:var(--green);color:#065f46;}
.al-er{background:var(--red-bg);border-color:var(--red);color:#991b1b;}
.al-wa{background:var(--amber-bg);border-color:var(--amber);color:#92400e;}
.al-in{background:var(--blue-bg);border-color:var(--blue);color:#1e40af;}

/* ── MODAL ── */
.ov{display:none;position:fixed;inset:0;background:rgba(15,27,45,.55);z-index:500;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.ov.show{display:flex;}
.modal{background:var(--surf);border-radius:var(--r-lg);box-shadow:var(--sh-lg);width:90%;max-width:560px;max-height:90vh;overflow-y:auto;animation:ms .22s ease;}
.modal-lg{max-width:740px;}
@keyframes ms{from{transform:translateY(-16px);opacity:0}to{transform:translateY(0);opacity:1}}
.mh{padding:17px 20px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;}
.mt-m{font-family:var(--serif);font-size:16px;font-weight:700;color:var(--navy);}
.mx{background:none;border:none;font-size:19px;cursor:pointer;color:var(--txt3);width:28px;height:28px;border-radius:5px;display:flex;align-items:center;justify-content:center;}
.mx:hover{background:var(--surf2);}
.mb{padding:20px;}
.mf{padding:13px 20px;border-top:1px solid var(--bdr);display:flex;justify-content:flex-end;gap:8px;}

/* ── TXN ROW ── */
.tr-row{display:flex;align-items:center;gap:11px;padding:11px 18px;border-bottom:1px solid #f0ece4;transition:background .1s;}
.tr-row:last-child{border-bottom:none;}
.tr-row:hover{background:var(--surf2);}
.tr-dot{width:36px;height:36px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;}
.tr-dot.cr{background:var(--green-bg);color:var(--green);}
.tr-dot.dr{background:var(--red-bg);color:var(--red);}
.tr-inf{flex:1;min-width:0;}
.tr-nm{font-size:13.5px;font-weight:600;color:var(--txt);}
.tr-mt{font-size:11px;color:var(--txt3);}
.tr-am{font-family:var(--serif);font-size:15px;font-weight:700;white-space:nowrap;}
.tr-am.cr{color:var(--green);}
.tr-am.dr{color:var(--red);}

/* ── ACCOUNT CARD ── */
.acc-card{background:linear-gradient(135deg,var(--navy) 0%,var(--navy3) 100%);border-radius:14px;padding:22px;color:#fff;position:relative;overflow:hidden;box-shadow:0 8px 28px rgba(15,27,45,.22);}
.acc-card::after{content:'';position:absolute;bottom:-50px;right:-30px;width:180px;height:180px;border-radius:50%;background:rgba(217,119,6,.09);pointer-events:none;}
.ac-type{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;opacity:.5;}
.ac-no{font-family:var(--mono);font-size:16px;font-weight:500;margin:5px 0;letter-spacing:2px;opacity:.85;}
.ac-nm{font-size:12px;opacity:.55;}
.ac-bl{font-family:var(--serif);font-size:30px;font-weight:900;margin-top:16px;letter-spacing:-.5px;}
.ac-bll{font-size:10px;opacity:.45;text-transform:uppercase;letter-spacing:1px;margin-top:1px;}

/* ── PROGRESS ── */
.prog{height:5px;background:var(--bdr);border-radius:3px;overflow:hidden;}
.pb{height:100%;border-radius:3px;transition:width .4s;}
.pb-a{background:var(--amber);}
.pb-g{background:var(--green);}
.pb-r{background:var(--red);}

/* ── SEARCH ── */
.srch{position:relative;}
.srch input{padding-left:34px;}
.si-ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--txt3);font-size:14px;pointer-events:none;}

/* ── PAGINATION ── */
.pgn{display:flex;gap:3px;align-items:center;}
.pgn a,.pgn span{padding:5px 11px;border-radius:5px;border:1px solid var(--bdr);font-size:12.5px;color:var(--txt2);text-decoration:none;transition:all .13s;}
.pgn a:hover{background:var(--amber-bg);border-color:var(--amber);color:var(--amber);}
.pgn span.now{background:var(--amber);color:#fff;border-color:var(--amber);}

/* ── SUMMARY BOX ── */
.sum-box{background:var(--amber-bg);border:1px solid rgba(217,119,6,.2);border-radius:var(--r-sm);padding:13px 15px;}
.sum-row{display:flex;justify-content:space-between;padding:3px 0;font-size:13px;}

/* ── LOGIN ── */
.lp{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--navy);position:relative;overflow:hidden;}
.lp::before{content:'';position:absolute;top:-10%;right:-8%;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(217,119,6,.1) 0%,transparent 70%);}
.lp::after{content:'';position:absolute;bottom:-15%;left:-5%;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(8,145,178,.08) 0%,transparent 70%);}
.lb{background:var(--surf);border-radius:18px;padding:42px 38px;width:100%;max-width:420px;box-shadow:0 28px 72px rgba(0,0,0,.4);position:relative;z-index:2;}
.lb-ic{width:56px;height:56px;border-radius:13px;background:linear-gradient(145deg,var(--amber-l),var(--amber));display:inline-flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:13px;box-shadow:0 8px 20px rgba(217,119,6,.3);}
.lb-nm{font-family:var(--serif);font-size:22px;font-weight:900;color:var(--navy);letter-spacing:-.3px;}
.lb-tg{font-size:12.5px;color:var(--txt3);margin-top:3px;}

/* ── UTILS ── */
.df{display:flex;}.dfc{display:flex;flex-direction:column;}.aic{align-items:center;}.jb{justify-content:space-between;}.jc{justify-content:center;}
.g8{gap:8px;}.g12{gap:12px;}.g16{gap:16px;}.g20{gap:20px;}
.mb8{margin-bottom:8px;}.mb12{margin-bottom:12px;}.mb16{margin-bottom:16px;}.mb20{margin-bottom:20px;}
.mt8{margin-top:8px;}.mt16{margin-top:16px;}
.w100{width:100%;}.tr{text-align:right;}.tc{text-align:center;}
.mono{font-family:var(--mono);}.bold{font-weight:700;}.serif{font-family:var(--serif);}
.c2{color:var(--txt2);}.c3{color:var(--txt3);}.c-r{color:var(--red);}.c-g{color:var(--green);}.c-a{color:var(--amber);}.c-n{color:var(--navy);}
.sm{font-size:12px;}.xs{font-size:11px;}
.empty{text-align:center;padding:42px 20px;color:var(--txt3);}
.empty-i{font-size:38px;margin-bottom:10px;opacity:.4;}
.fw{flex-wrap:wrap;}

/* ── RESPONSIVE ── */
@media(max-width:960px){.sb{transform:translateX(-100%);}.sb.open{transform:translateX(0);}.main{margin-left:0;}#mbtn{display:inline-flex;}.g3{grid-template-columns:1fr 1fr;}}
@media(max-width:620px){.g2,.g3{grid-template-columns:1fr;}.sg{grid-template-columns:1fr 1fr;}.pg{padding:13px;}.lb{padding:26px 18px;}}