:root{
  --bg1: linear-gradient(135deg,#0f172a,#0b1220);
  --card: rgba(255,255,255,0.04);
  --accent: linear-gradient(90deg,#06b6d4,#3b82f6);
  --glass: rgba(255,255,255,0.03);
}
*{box-sizing:border-box;font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial;}
body{
  margin:0;min-height:100vh;background:var(--bg1);color:#e6eef8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:32px;
}
.container{max-width:1100px;margin:0 auto;display:grid;gap:18px;grid-template-columns:1fr;}

/* Header */
.header{text-align:left}
.header h1{margin:0;font-size:28px;letter-spacing:0.2px;}
.header .sub{margin:6px 0 0;color:#9fb3d6;}

/* Cards */
.card{background:var(--card);padding:16px;border-radius:12px;box-shadow:0 6px 20px rgba(2,6,23,0.6);border:1px solid rgba(255,255,255,0.03);}
.balance-card{display:flex;justify-content:space-between;align-items:center;gap:12px}
.balance-value{font-size:28px;margin-top:6px;font-weight:700;}

/* Buttons */
.btn{background:linear-gradient(90deg,#06b6d4,#3b82f6);border:none;color:#001;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:700;}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:inherit;}
.btn.small{padding:6px 8px;font-size:13px;border-radius:8px;}
.actions{display:flex;gap:8px;align-items:center}

/* Forms */
.form input, .form select{background:var(--glass);border:1px solid rgba(255,255,255,0.03);padding:10px;border-radius:8px;color:inherit;width:100%;}
.row{display:flex;gap:8px;margin-bottom:10px}
.row input[type=date]{padding:8px;}
.forms .form{display:block}

/* Filters */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* Content layout */
.content{display:grid;grid-template-columns:1fr 420px;gap:18px;}
.left .list ul{list-style:none;padding:0;margin:0;max-height:420px;overflow:auto;}
.left .list li{display:flex;justify-content:space-between;align-items:center;padding:10px;border-radius:8px;margin-bottom:8px;background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);border:1px solid rgba(255,255,255,0.02);}
.txn-meta{display:flex;gap:10px;align-items:center}
.txn-cat{padding:6px 8px;border-radius:8px;background:rgba(255,255,255,0.03);font-weight:700;font-size:13px;color:#cfe9ff;}
.txn-amount{font-weight:800;color:#fff;}
.txn-amount.negative{color:#ffb3b3;}
.txn-amount.positive{color:#b8ffda;}

/* Charts */
.chart canvas{width:100% !important;height:auto !important;}

/* Footer */
.footer{text-align:center;color:#8fa7c6;margin-top:8px;font-size:13px;}

/* Responsive */
@media (max-width:900px){
  .content{grid-template-columns:1fr;}.balance-card{flex-direction:column;align-items:flex-start;}
}