@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20,500,0,0');

:root{
  --bg: #EFECFB;
  --panel: #FFFFFF;
  --ink: #2E2A4A;
  --ink-soft: #746E96;
  --accent: #8C7EE0;
  --accent-dark: #6F5FD1;
  --accent-soft: #E7E3FA;
  --income: #1FAE6D;
  --income-soft: #E1F7EC;
  --expense: #E5484D;
  --expense-soft: #FCE6E7;
  --gold: #C99A2E;
  --gold-soft: #FBF0DA;
  --rule: #E7E3F6;
  --rule-strong: #D8D2F1;
  --radius: 14px;
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Poppins', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a{ color: inherit; text-decoration: none; }
h1,h2,h3{ font-family: var(--font-display); font-weight: 700; margin: 0 0 4px; letter-spacing: -0.01em; color: var(--ink); }
.num{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.msy{ font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; font-size: 20px; line-height: 1; vertical-align: middle; }

/* ---------- App shell ---------- */
.app{ min-height:100vh; }
.topnav-wrap{ background: var(--bg); padding: 20px 28px 0; }
.brandrow{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.brand{ font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--ink); display:flex; align-items:center; gap:8px; }
.brand .msy{ color: var(--accent); font-size:24px; }
.userchip{ display:flex; align-items:center; gap:10px; font-size:13px; color: var(--ink-soft); }
.userchip a{ background:#fff; border:1px solid var(--rule-strong); padding:7px 12px; border-radius:20px; display:flex; align-items:center; gap:6px; font-weight:600; }
.userchip a:hover{ background:var(--accent-soft); color:var(--accent-dark); }

.iconnav{
  display:flex; gap:8px; background:#fff; border-radius: 18px; padding:8px;
  box-shadow: 0 2px 10px rgba(140,126,224,0.08);
  margin-bottom: 22px; flex-wrap: wrap;
}
.iconnav a{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding: 10px 18px; border-radius: 13px; font-size: 12px; font-weight: 600;
  color: var(--ink-soft); flex:1; min-width: 88px;
  transition: background .15s, color .15s;
}
.iconnav a .msy{ font-size:22px; }
.iconnav a:hover{ background: var(--accent-soft); color: var(--accent-dark); }
.iconnav a.active{ background: var(--accent); color: #fff; }
.iconnav a.active .msy{ color:#fff; }

.main{ flex:1; min-width:0; }
.content{ padding: 0 28px 60px; max-width: 1180px; }

.flash{ display:flex; align-items:center; gap:10px; padding: 13px 18px; border-radius: var(--radius); font-size:14px; font-weight:600; margin-bottom:18px; }
.flash.ok{ background: var(--income-soft); color: #12784A; }
.flash.warn{ background: var(--expense); color: #fff; }

/* ---------- Cards / summary ---------- */
.cards{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
@media (max-width: 900px){ .cards{ grid-template-columns: repeat(2,1fr);} }
.card{
  background: var(--panel);
  border: none;
  box-shadow: 0 2px 10px rgba(140,126,224,0.07);
  border-radius: var(--radius);
  padding: 16px 18px;
  position: relative;
}
.card .eyebrow{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color: var(--ink-soft); font-weight:700; }
.card .amount{ font-family: var(--font-mono); font-size: 20px; font-weight:600; margin-top:8px; }
.card.saldo .amount{ color: var(--accent-dark); }
.card.masuk .amount{ color: var(--income); }
.card.keluar .amount{ color: var(--expense); }
.card.tabungan .amount{ color: var(--gold); }
.card.count{ background: var(--accent-soft); box-shadow:none; }
.card.count .amount{ color: var(--accent-dark); font-size:26px; }

.panel{
  background: var(--panel);
  border: none;
  box-shadow: 0 2px 10px rgba(140,126,224,0.07);
  border-radius: var(--radius);
  margin-bottom: 18px;
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--rule);
}
.panel-head h2{ font-size: 16px; }
.panel-body{ padding: 18px 20px; }

/* ---------- Ledger table ---------- */
table.ledger{ width:100%; border-collapse: collapse; }
table.ledger th{
  text-align:left; font-size: 11px; text-transform:uppercase; letter-spacing:.05em;
  color: var(--ink-soft); font-weight:700;
  padding: 8px 10px; border-bottom: 2px solid var(--rule);
}
table.ledger td{
  padding: 11px 10px; border-bottom: 1px solid var(--rule);
  font-size: 14px; vertical-align: middle;
}
table.ledger tbody tr:hover{ background: #FAF9FE; }
table.ledger td.amount{ font-family: var(--font-mono); font-weight:600; text-align:right; white-space:nowrap; }
table.ledger td.amount.plus{ color: var(--income); }
table.ledger td.amount.minus{ color: var(--expense); }
table.ledger td.actions{ text-align:right; white-space:nowrap; }

.tag{ display:inline-block; padding: 4px 11px; border-radius: 20px; font-size:12px; font-weight:600; }
.tag.pemasukan{ background: var(--income-soft); color: var(--income); }
.tag.pengeluaran{ background: var(--expense-soft); color: var(--expense); }

.empty{ text-align:center; color: var(--ink-soft); padding: 34px 10px; font-size:14px; }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.form-grid.full{ grid-template-columns: 1fr; }
@media (max-width:700px){ .form-grid{ grid-template-columns: 1fr; } }
.field label{ display:block; font-size:12px; font-weight:700; color: var(--ink-soft); margin-bottom:5px; }
.field input, .field select, .field textarea{
  width:100%; padding: 10px 13px; border: 1px solid var(--rule-strong); border-radius: 12px;
  font-family: var(--font-body); font-size: 14px; background:#FBFAFF; color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); background:#fff;
}
.field.span2{ grid-column: span 2; }
@media (max-width:700px){ .field.span2{ grid-column: span 1; } }

.btn{
  display:inline-flex; align-items:center; gap:6px;
  padding: 10px 18px; border-radius: 20px; border:1px solid transparent;
  font-size: 14px; font-weight:700; cursor:pointer; font-family: var(--font-body);
}
.btn-primary{ background: var(--accent); color:#fff; }
.btn-primary:hover{ background: var(--accent-dark); }
.btn-ghost{ background: #fff; color: var(--ink-soft); border-color: var(--rule-strong); }
.btn-ghost:hover{ background: var(--accent-soft); color:var(--accent-dark); }
.btn-danger{ background: var(--expense-soft); color: var(--expense); }
.btn-danger:hover{ background:#F8CDCF; }
.btn-sm{ padding:6px 13px; font-size:12px; border-radius:16px; }

.actions-row{ display:flex; justify-content:flex-end; gap:8px; margin-top: 16px; }

.searchbar{ display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--rule-strong); border-radius: 24px; padding: 10px 16px; margin-bottom:14px; }
.searchbar .msy{ color: var(--ink-soft); }
.searchbar input{ border:none; outline:none; flex:1; font-size:14px; background:transparent; }

/* ---------- Login ---------- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, #EFECFB, #E3DDFA);
  padding: 20px;
}
.login-card{
  background: var(--panel); width: 100%; max-width: 360px;
  border-radius: 20px; padding: 34px 30px; box-shadow: 0 20px 50px rgba(111,95,209,0.18);
}
.login-card h1{ font-size:24px; }
.login-card .sub{ color: var(--ink-soft); font-size:13px; margin-bottom:22px; }
.login-card .field{ margin-bottom:14px; }
.login-card .btn{ width:100%; justify-content:center; margin-top:6px; }
.err{ background: var(--expense-soft); color: var(--expense); padding:10px 14px; border-radius:12px; font-size:13px; margin-bottom:14px; font-weight:600; }
.ok{ background: var(--income-soft); color: #12784A; padding:10px 14px; border-radius:12px; font-size:13px; margin-bottom:14px; font-weight:600; }

/* ---------- Progress (tabungan) ---------- */
.progress-bar{ height:9px; border-radius:8px; background: var(--rule); overflow:hidden; margin: 8px 0; }
.progress-bar > span{ display:block; height:100%; background: var(--gold); }

.badge-flat{ font-size:11px; color: var(--ink-soft); }

.flex-between{ display:flex; align-items:center; justify-content:space-between; gap: 12px; flex-wrap:wrap; }