:root{
  --bg: #0b0f14; --card:#121821; --text:#e6edf3; --muted:#9fb0c3;
  --pos:#11a36a; --neg:#d64545; --accent:#6aa6ff; --border:#1f2835;
}
:root.light{
  --bg:#f7f9fc; --card:#ffffff; --text:#111827; --muted:#5b6b7f;
  --pos:#0b7a4b; --neg:#c0392b; --accent:#2266ff; --border:#e6eaf0;
}

*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
.container{max-width:1100px;margin:auto;padding:1rem}
.app-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:10}
.header-actions{display:flex;gap:.5rem}

.btn{background:var(--accent);border:none;color:#fff;padding:.6rem .9rem;border-radius:.6rem;cursor:pointer}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn:focus{outline:2px solid var(--accent);outline-offset:2px}
.import-btn span{display:inline-block}

.card{background:var(--card);border:1px solid var(--border);border-radius:1rem;padding:1rem;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.card-head{display:flex;justify-content:space-between;align-items:center}
.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-block:1rem}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.grid-2{display:grid;grid-template-columns:2fr 1.2fr;gap:1rem;margin-block:1rem}
.grid .full{grid-column:1/-1}

label{display:block;margin-bottom:.25rem;color:var(--muted)}
input,select{width:100%;padding:.55rem;border:1px solid var(--border);border-radius:.6rem;background:transparent;color:var(--text)}
input::placeholder{color:var(--muted)}

.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table thead th{font-weight:600;text-align:left;color:var(--muted)}
.table tbody tr{background:var(--card);border:1px solid var(--border)}
.table td,.table th{padding:.6rem .7rem}
.table .right{text-align:right}

.money{font-size:1.4rem}
.money.positive{color:var(--pos)}
.money.negative{color:var(--neg)}

.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.8rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips .chip{padding:.35rem .6rem;border:1px solid var(--border);border-radius:999px}
.chip.warn{border-color:var(--neg);color:var(--neg)}

#toast{position:fixed;bottom:1rem;right:1rem;max-width:320px;padding:.8rem 1rem;background:var(--card);border:1px solid var(--border);border-radius:.7rem;opacity:0;transition:.2s;pointer-events:none}
#toast.show{opacity:1;transform:translateY(-4px)}

dialog{border:none;border-radius:1rem;padding:1rem;background:var(--card);color:var(--text);border:1px solid var(--border)}
menu{display:flex;justify-content:flex-end;gap:.6rem}

@media (max-width:900px){
  .summary{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
}