:root{
  --bg:#0f172a;
  --card:#111827;
  --muted:#94a3b8;
  --text:#e5e7eb;
  --accent:#22d3ee;
  --accent-2:#38bdf8;
  --danger:#f87171;
  --ok:#34d399;
  --shadow:0 10px 25px rgba(0,0,0,.35);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif}
a{color:var(--accent)}
input,select,button{font:inherit}
button{cursor:pointer}

.app-header{
  position:sticky;top:0;z-index:10;
  display:grid;grid-template-columns:1fr auto auto;gap:16px;
  align-items:center;padding:12px 16px;background:rgba(17,24,39,.85);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand img{width:28px;height:28px}
.filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-start}
.filters input,.filters select{background:#0b1220;border:1px solid rgba(255,255,255,.1);color:var(--text);padding:8px 10px;border-radius:10px}
.filters button{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#0b1220;border:0;padding:8px 12px;border-radius:10px;font-weight:700}

.user{display:flex;align-items:center;gap:12px}
.user .email{color:var(--muted);font-size:.9rem}
.user .logout{background:#1f2937;color:#fff;padding:8px 12px;border-radius:10px;text-decoration:none}

.layout{display:grid;grid-template-columns:360px 1fr;gap:18px;padding:18px}
@media (max-width: 900px){.layout{grid-template-columns:1fr}}

.panel{background:linear-gradient(180deg,#0b1220,#0b1020);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.panel h2{margin:.2rem 0 1rem 0;font-size:1.1rem;color:#cbd5e1}

#entryForm label{display:block;margin:.5rem 0 .25rem 0;color:#cbd5e1}
#entryForm input,#entryForm select{width:100%;padding:10px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:#0b1220;color:var(--text)}
.actions{display:flex;gap:10px;margin-top:.75rem}
.actions .secondary{background:#1f2937;color:#fff;border:0;padding:10px 12px;border-radius:12px}
.actions .danger{background:var(--danger);color:#0b1020;border:0;padding:10px 12px;border-radius:12px}
#btnSave{background:linear-gradient(90deg,var(--ok),var(--accent));color:#0b1220;border:0;padding:10px 12px;border-radius:12px;font-weight:700}

.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.summary > div{background:#0b1220;border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:12px}
.summary span{display:block;color:var(--muted);font-size:.85rem}
.summary strong{font-size:1.1rem}

.list #list{display:grid;gap:8px}
.item{display:grid;grid-template-columns:110px 80px 1fr 120px 110px;gap:8px;align-items:center;background:#0b1220;border:1px solid rgba(255,255,255,.06);padding:10px;border-radius:14px}
.item .date{color:#cbd5e1}
.item .type{font-weight:700}
.item .type.income{color:var(--ok)}
.item .type.expense{color:var(--danger)}
.item .cat{color:#e2e8f0}
.item .desc{color:var(--muted);font-size:.9rem}
.item .amt{text-align:right;font-weight:800}
.item button{background:#1f2937;color:#fff;border:0;padding:6px 10px;border-radius:10px}
.item .edit{}
.item .del{background:var(--danger);color:#0b1020}

.pager{display:flex;gap:8px;justify-content:center;margin-top:12px}
.pager button{background:#1f2937;color:#fff;border:0;padding:8px 12px;border-radius:10px}

.auth,.install{display:grid;place-items:center;height:100vh;padding:16px}
.card{width:min(520px,100%);background:#0b1220;border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:var(--shadow);padding:18px}
.card h1{margin-top:0}
.card form label{display:block;margin:.5rem 0 .25rem}
.card input{width:100%;padding:10px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:#0b1220;color:var(--text)}
.card button{margin-top:10px;background:linear-gradient(90deg,var(--ok),var(--accent));color:#0b1220;border:0;padding:10px 12px;border-radius:12px;font-weight:700}
.notice{background:#112031;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:10px;margin-bottom:10px}
.muted{color:var(--muted);font-size:.9rem}
code{background:#111827;padding:2px 6px;border-radius:6px;border:1px solid rgba(255,255,255,.06)}