:root {
  --bg:#f4f7fb; --card:#ffffff; --text:#101828; --muted:#667085;
  --line:#e4e7ec; --primary:#166b8f; --accent:#f3702b; --good:#16a34a; --bad:#dc2626;
}
:root[data-theme="dark"] {
  --bg:#101820; --card:#162330; --text:#f8fafc; --muted:#a6b3c2;
  --line:#28394d; --primary:#1f9ac6; --accent:#f3702b;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Arial,sans-serif}
header{min-height:64px;display:flex;align-items:center;justify-content:space-between;padding:12px 24px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.brand{display:flex;gap:14px;align-items:center}
header span,.muted{color:var(--muted)}
nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
a{color:var(--text);text-decoration:none}
button{border:0;border-radius:12px;background:var(--primary);color:white;padding:10px 14px;cursor:pointer;font-weight:700}
input,select{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:12px;padding:10px}
main{padding:22px;max-width:1500px;margin:auto}
.small{max-width:620px}
.toolbar{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.toolbar form{display:flex;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:14px;margin-bottom:16px}
.card,.panel,.empty,.login-card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:0 12px 30px rgba(16,24,40,.06)}
.card span{color:var(--muted);display:block}
.card strong{font-size:30px}
.highlight strong.positive{color:var(--good)}
.highlight strong.negative{color:var(--bad)}
.grid{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.wide{grid-column:span 2}
.panel-title{display:flex;justify-content:space-between;align-items:center;gap:10px}
#budgetGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:14px;margin-top:14px}
.category{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.02)}
.category-header{display:flex;justify-content:space-between;align-items:center;background:var(--primary);color:white;padding:10px 12px}
.category-header.expense{background:var(--accent)}
.category-header.income,.category-header.asset{background:#3fa32e}
.category-header.saving{background:#a72ba0}
.category-header.debt{background:#111827}
.line{display:grid;grid-template-columns:1fr 110px 36px;gap:8px;padding:8px;border-bottom:1px solid var(--line)}
.line input{width:100%;padding:8px;border-radius:10px}
.empty-small{padding:12px;color:var(--muted)}
.total{display:flex;justify-content:space-between;padding:10px 12px;font-weight:800}
.login-page{min-height:100vh;display:grid;place-items:center}
.login-card{width:min(420px,92vw);display:grid;gap:12px}
.alert{background:#fee2e2;color:#991b1b;border-radius:12px;padding:10px;margin-bottom:12px}
.alert.ok{background:#dcfce7;color:#166534}
.form{display:grid;gap:10px}
.form.row{grid-template-columns:1fr 1fr 160px auto;align-items:center}
table{width:100%;border-collapse:collapse}
th,td{border-bottom:1px solid var(--line);padding:10px;text-align:left}
@media(max-width:900px){
  header{align-items:flex-start;gap:12px;flex-direction:column}
  .kpis,.grid{grid-template-columns:1fr}
  .wide{grid-column:span 1}
  .toolbar form,.form.row{width:100%;grid-template-columns:1fr;flex-wrap:wrap}
}