:root{--primary:#4f46e5;--primary-dark:#3730a3;--bg:#f1f5f9;--card:#fff;--text:#1e293b;--muted:#64748b;--green:#16a34a;--red:#dc2626;--radius:14px}
*{box-sizing:border-box;margin:0;padding:0;font-family:'Segoe UI',Arial,sans-serif}
body{background:var(--bg);color:var(--text)}
.container{max-width:480px;margin:60px auto;background:var(--card);padding:30px;border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,.08)}
.wide{max-width:100%;width:100%;margin:0;border-radius:0;box-shadow:none;min-height:100vh;padding:24px 40px}
h2{margin-bottom:20px;text-align:center}
input,select,button{width:100%;padding:11px;margin:8px 0;border:1px solid #e2e8f0;border-radius:8px;font-size:14px}
input:focus,select:focus{outline:none;border-color:var(--primary)}
button{background:var(--primary);color:#fff;border:none;cursor:pointer;font-weight:600;transition:.2s}
button:hover{background:var(--primary-dark)}
.error{color:var(--red);text-align:center;margin-bottom:10px}
.success{color:var(--green);text-align:center;margin-bottom:10px}
a{color:var(--primary);text-decoration:none;font-weight:500}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.topbar h2{margin:0;text-align:left}
.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:24px}
.card{padding:18px;border-radius:var(--radius);color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.1)}
.card small{opacity:.85;display:block;font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.card b{font-size:22px}
.income{background:linear-gradient(135deg,#16a34a,#22c55e)}
.expense{background:linear-gradient(135deg,#dc2626,#f87171)}
.balance{background:linear-gradient(135deg,#4f46e5,#818cf8)}
.charts{display:grid;grid-template-columns:1fr 1.3fr;gap:16px;margin-bottom:24px}
.chart-box{background:var(--card);border:1px solid #e2e8f0;border-radius:var(--radius);padding:16px;height:320px}
.chart-box canvas{max-height:260px}
.chart-box h3{font-size:14px;color:var(--muted);margin-bottom:10px}
.panel{background:var(--card);border:1px solid #e2e8f0;border-radius:var(--radius);padding:18px;margin-bottom:20px}
form.inline{display:flex;gap:10px;flex-wrap:wrap}
form.inline>*{flex:1;min-width:120px;margin:0}
table{width:100%;border-collapse:collapse;margin-top:10px}
th{text-align:left;font-size:12px;color:var(--muted);text-transform:uppercase;padding:8px}
td{padding:10px 8px;border-bottom:1px solid #f1f5f9;font-size:14px}
.tag{padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600}
.tag.income{background:#dcfce7;color:var(--green)}
.tag.expense{background:#fee2e2;color:var(--red)}
.del{color:var(--red);font-size:12px}
@media(max-width:900px){.charts{grid-template-columns:1fr}.wide{padding:20px}}