:root { --bg:#f4f6fa; --panel:#fff; --line:#dfe4ee; --accent:#2563eb; --text:#1e293b; }
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--text); }
#app { display:flex; min-height:100vh; }
#sidebar { width:220px; background:#0f172a; color:#e2e8f0; padding:16px; flex-shrink:0; }
#sidebar h1 { font-size:18px; margin:0 0 16px; }
#nav button { display:block; width:100%; text-align:left; background:none; border:0; color:#cbd5e1;
  padding:9px 10px; border-radius:6px; cursor:pointer; font-size:14px; }
#nav button:hover { background:#1e293b; }
#nav button.active { background:var(--accent); color:#fff; }
#btn-backup { width:100%; margin-top:18px; background:#1e293b; color:#cbd5e1; border:1px solid #334155;
  padding:8px; border-radius:6px; cursor:pointer; }
#main { flex:1; padding:24px 32px; max-width:1100px; }
h2 { margin-top:0; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px; margin-bottom:16px; }
table { border-collapse:collapse; width:100%; font-size:14px; }
th, td { border-bottom:1px solid var(--line); padding:6px 8px; text-align:left; }
th { background:#f1f5f9; position:sticky; top:0; }
tr.clickable { cursor:pointer; }
tr:hover { background:#f8fafc; }
tr.selected { background:#dbeafe; }
tr.muted { color:#94a3b8; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
input, select, textarea { font:inherit; padding:6px 8px; border:1px solid var(--line); border-radius:6px; width:100%; }
button.btn { background:var(--accent); color:#fff; border:0; border-radius:6px; padding:7px 14px; cursor:pointer; }
button.btn.secondary { background:#e2e8f0; color:var(--text); }
button.btn.danger { background:#dc2626; }
button.btn.small { padding:4px 9px; font-size:12px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; }
.field label { display:block; font-size:12px; color:#64748b; margin-bottom:3px; }
.actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
#toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:#1e293b; color:#fff;
  padding:10px 18px; border-radius:8px; opacity:0; transition:opacity .3s; pointer-events:none; z-index:50; }
#toast.show { opacity:1; }
canvas { max-width:100%; background:#fff; border:1px solid var(--line); border-radius:8px; }
.bal-pos { color:#16a34a; } .bal-neg { color:#dc2626; }
.right { text-align:right; }
.muted { color:#64748b; font-size:13px; }
@media (max-width:760px) {
  #app { flex-direction:column; }
  #sidebar { width:100%; display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:10px; }
  #sidebar h1 { font-size:16px; margin:0 8px 0 0; }
  #nav { display:contents; }
  #nav button { width:auto; display:inline-block; padding:6px 9px; font-size:13px; }
  #btn-backup { width:auto; margin:0 0 0 auto; padding:6px 9px; font-size:12px; }
  #main { padding:14px; }
  .panel { overflow-x:auto; }
}