@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --navy:#16233F;
  --navy-deep:#0E1830;
  --parchment:#F6F1E4;
  --parchment-2:#EFE7D2;
  --gold:#C9A227;
  --gold-bright:#E4BE3F;
  --ink:#221F1A;
  --ink-soft:#5B564B;
  --green:#2F7A57;
  --red:#B3413A;
  --white:#FFFDF8;
  --border:rgba(34,31,26,0.1);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'IBM Plex Sans', sans-serif; background:var(--parchment); color:var(--ink); line-height:1.5;}
h1,h2,h3{font-family:'Fraunces', serif; font-weight:600; color:var(--navy-deep);}
a{text-decoration:none; color:inherit;}
code, .mono{font-family:'IBM Plex Mono', monospace;}

/* LAYOUT */
.app-shell{display:flex; min-height:100vh;}
.sidebar{
  width:230px; background:var(--navy-deep); color:var(--white);
  padding:24px 18px; flex-shrink:0; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar .brand{display:flex; align-items:center; gap:10px; font-family:'Fraunces',serif; font-weight:700; font-size:18px; margin-bottom:32px;}
.brand-mark{width:32px; height:32px; border-radius:8px; background:linear-gradient(155deg,var(--gold),var(--gold-bright)); display:flex; align-items:center; justify-content:center; color:var(--navy-deep); font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:13px;}
.sidebar nav a{display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:8px; font-size:14.5px; color:rgba(255,255,255,0.7); margin-bottom:4px; transition:.15s;}
.sidebar nav a:hover{background:rgba(255,255,255,0.06); color:var(--white);}
.sidebar nav a.active{background:rgba(201,162,39,0.15); color:var(--gold-bright); font-weight:600;}
.sidebar .logout{margin-top:24px; border-top:1px solid rgba(255,255,255,0.1); padding-top:16px;}

.main{flex:1; padding:32px 40px; max-width:1100px;}
.topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:28px;}
.topbar h1{font-size:24px;}
.topbar .user-chip{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-soft);}

/* CARDS */
.card{background:var(--white); border:1px solid var(--border); border-radius:12px; padding:24px; margin-bottom:20px;}
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px;}
.stat-card{background:var(--white); border:1px solid var(--border); border-radius:12px; padding:20px;}
.stat-card .label{font-size:12.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px;}
.stat-card .value{font-family:'IBM Plex Mono',monospace; font-size:24px; font-weight:600; color:var(--navy-deep);}

/* FORMS */
.form-group{margin-bottom:18px;}
label{display:block; font-size:13.5px; font-weight:600; margin-bottom:6px; color:var(--ink);}
input, select, textarea{
  width:100%; padding:11px 14px; border:1px solid var(--border); border-radius:8px;
  font-family:'IBM Plex Sans',sans-serif; font-size:14.5px; background:var(--white); color:var(--ink);
}
input:focus, select:focus, textarea:focus{outline:2px solid var(--gold); border-color:var(--gold);}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:11px 20px; border-radius:8px; font-weight:600; font-size:14.5px; border:1px solid transparent; cursor:pointer; transition:.15s;}
.btn-primary{background:var(--navy); color:var(--white);}
.btn-primary:hover{background:var(--navy-deep);}
.btn-gold{background:var(--gold); color:var(--navy-deep);}
.btn-gold:hover{background:var(--gold-bright);}
.btn-ghost{background:transparent; border-color:var(--border); color:var(--ink);}
.btn-danger{background:var(--red); color:var(--white);}
.btn-block{width:100%;}

/* TABLE */
table{width:100%; border-collapse:collapse; font-size:14px;}
th{text-align:left; padding:10px 12px; background:var(--parchment-2); color:var(--ink-soft); font-size:12.5px; text-transform:uppercase; letter-spacing:.04em;}
td{padding:12px; border-bottom:1px solid var(--border);}
tr:last-child td{border-bottom:none;}

/* BADGES */
.badge{display:inline-block; padding:4px 10px; border-radius:20px; font-size:12px; font-weight:600;}
.badge-success{background:rgba(47,122,87,0.12); color:var(--green);}
.badge-pending{background:rgba(201,162,39,0.15); color:#8a6d10;}
.badge-failed{background:rgba(179,65,58,0.12); color:var(--red);}

/* ALERTS */
.alert{padding:14px 18px; border-radius:8px; margin-bottom:20px; font-size:14px;}
.alert-success{background:rgba(47,122,87,0.1); color:var(--green); border:1px solid rgba(47,122,87,0.25);}
.alert-error{background:rgba(179,65,58,0.1); color:var(--red); border:1px solid rgba(179,65,58,0.25);}

/* AUTH PAGES */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--parchment);}
.auth-card{width:100%; max-width:420px; background:var(--white); border:1px solid var(--border); border-radius:14px; padding:36px;}
.auth-card h1{font-size:24px; margin-bottom:6px;}
.auth-card p.sub{color:var(--ink-soft); font-size:14px; margin-bottom:26px;}
.auth-foot{margin-top:20px; text-align:center; font-size:14px; color:var(--ink-soft);}
.auth-foot a{color:var(--navy); font-weight:600;}

/* VIRTUAL ACCOUNT / SCRATCH RESULT */
.va-box{background:var(--navy-deep); color:var(--white); border-radius:12px; padding:24px; margin-bottom:20px;}
.va-box .k{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,0.55);}
.va-box .v{font-family:'IBM Plex Mono',monospace; font-size:22px; color:var(--gold-bright); margin:4px 0 12px;}

@media(max-width:860px){
  .app-shell{flex-direction:column;}
  .sidebar{width:100%; height:auto; position:relative;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .main{padding:20px;}
}