:root{
  --bg:#0F172A; --card:#111827; --muted:#9CA3AF; --text:#F8FAFC; --accent:#0EA5E9; --success:#10B981; --danger:#EF4444; --primary:#6366F1;
  --radius:16px; --shadow:0 10px 24px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#0b1220;color:var(--text);font-family: system-ui, -apple-system, Segoe UI, Roboto, Vazirmatn, Tahoma, sans-serif;-webkit-font-smoothing:antialiased}
.container{max-width:920px;margin:0 auto;padding:16px}
.app-header{display:flex;gap:12px;align-items:center;justify-content:space-between;position:sticky;top:0;background:linear-gradient(180deg, rgba(15,23,42,.95), rgba(15,23,42,.75));backdrop-filter: blur(8px);padding:12px;border-radius:var(--radius);box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:10px}
.brand-icon{width:32px;height:32px;border-radius:8px}
.month-picker label{font-size:12px;color:var(--muted);display:block;margin-bottom:4px}
.month-picker input{background:#0b1426;border:1px solid #1f2a44;color:var(--text);padding:8px 10px;border-radius:10px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:14px 0}
.card{background:linear-gradient(180deg,#0b1426,#0a1020);border:1px solid #1f2a44;border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.card-title{font-size:12px;color:var(--muted)}
.card-value{font-size:28px;margin-top:6px}
.card.success{border-color: rgba(16,185,129,.35)}
.card.danger{border-color: rgba(239,68,68,.35)}
.card.primary{border-color: rgba(99,102,241,.35)}

.forms{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.form-card{background:#0b1426;border:1px solid #1f2a44;border-radius:var(--radius);padding:16px}
.form-card h2{margin:4px 0 12px}
.grid-form{display:grid;gap:10px}
label{display:grid;gap:6px;font-size:14px}
input,select{background:#0a1020;color:var(--text);border:1px solid #1f2a44;border-radius:10px;padding:10px}
.checkbox{grid-auto-flow:column;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:transform .06s ease, box-shadow .2s}
.btn:active{transform:translateY(1px)}
.btn-success{background:linear-gradient(180deg,#059669,#047857);border-color:#2dd4bf}
.btn-danger{background:linear-gradient(180deg,#ef4444,#b91c1c);border-color:#f87171}
.btn-primary{background:linear-gradient(180deg,#6366F1,#4338CA);border-color:#93c5fd}
.btn-outline{background:transparent;border-color:#334155}

.charts{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px}
.chart-card{background:#0b1426;border:1px solid #1f2a44;border-radius:var(--radius);padding:16px}
.chart-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}

.list{margin-top:16px}
.list h2{margin:0 0 8px}
.list-head,.list-row{display:grid;grid-template-columns:120px 90px 1fr 1.2fr 80px;gap:8px;align-items:center}
.list-head{font-size:12px;color:var(--muted);padding:8px 6px;border-bottom:1px dashed #233054}
.list-body{display:flex;flex-direction:column;gap:4px}
.list-row{padding:8px;border:1px solid #1f2a44;border-radius:12px;background:#0b1426}
.badge{padding:4px 8px;border-radius:999px;font-size:12px;border:1px solid #334155}
.badge.income{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.45)}
.badge.expense{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.45)}
.action{display:flex;gap:6px}
.muted{color:var(--muted)}
.footer{display:flex;gap:8px;align-items:center;justify-content:space-between;margin:20px 4px}

@media (max-width:600px){
  .list-head,.list-row{grid-template-columns:86px 68px 1fr 1fr 64px}
  .card-value{font-size:24px}
}