@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

#budget-app-root, .budget-auth-wrap{
  --ink:#171923; --muted:#8a8fa3; --line:#ececf1; --surface:#ffffff; --bg:#f9f9fb;
  --accent:#5b5fef; --accent-soft:#eeeefd;
  --pos:#1f9d6e; --neg:#e4574c;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink);
  max-width:1080px; margin:0 auto;
}
#budget-app-root *, .budget-auth-wrap *{box-sizing:border-box;}

/* header */
#budget-app-root h1{
  font-size:1.4rem; font-weight:700; letter-spacing:-0.01em;
  margin:8px 0 24px; display:flex; justify-content:space-between; align-items:center;
}
#budget-app-root h1 a{font-size:0.8rem; font-weight:500; color:var(--muted); text-decoration:none; border:1px solid var(--line); padding:6px 12px; border-radius:20px;}
#budget-app-root h1 a:hover{border-color:var(--accent); color:var(--accent);}

/* layout */
#budget-app-root .layout{display:grid; grid-template-columns:1fr; gap:20px;}
@media (min-width:900px){
  #budget-app-root .layout{grid-template-columns:1.1fr 0.9fr; align-items:start;}
  #budget-app-root .col-right{position:sticky; top:20px;}
}

/* cards */
#budget-app-root .card{
  background:var(--surface); border-radius:16px; overflow:hidden; margin-bottom:16px;
  box-shadow:0 1px 2px rgba(20,20,40,0.04), 0 1px 12px rgba(20,20,40,0.03);
}
#budget-app-root .head{
  padding:16px 20px 10px; font-weight:600; font-size:0.95rem; color:var(--ink);
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}
#budget-app-root .head.blue::before{content:'';} /* colour bars removed for a flatter look */

/* rows */
#budget-app-root .row{display:flex; align-items:center; gap:10px; padding:11px 20px; border-top:1px solid var(--line);}
#budget-app-root .row input.label{flex:1; border:none; background:transparent; color:var(--ink); font-size:0.92rem; padding:4px 0; min-width:0; font-family:inherit;}
#budget-app-root .row input.label:focus{outline:none;}
#budget-app-root .amount-wrap{display:flex; align-items:center; gap:4px;}
#budget-app-root .row input.amount{width:88px; text-align:right; border:none; background:var(--bg); color:var(--ink); font-size:0.92rem; padding:5px 8px; border-radius:8px; font-family:inherit;}
#budget-app-root .row input.amount:focus{outline:2px solid var(--accent-soft);}
#budget-app-root .cur{color:var(--muted); font-size:0.78rem;}
#budget-app-root .del{background:none; border:none; color:var(--muted); font-size:1rem; cursor:pointer; padding:2px 6px; border-radius:6px; opacity:0.6;}
#budget-app-root .del:hover{color:var(--neg); opacity:1;}

/* totals */
#budget-app-root .total{display:flex; justify-content:space-between; align-items:center; padding:14px 20px; font-weight:600; border-top:1px solid var(--line); background:var(--bg);}
#budget-app-root .total.blue span:last-child{color:var(--accent);}
#budget-app-root .total.red span:last-child{color:var(--neg);}

/* summary */
#budget-app-root .summary{background:var(--surface);}
#budget-app-root .summary .row{border-top:1px solid var(--line); font-weight:500;}
#budget-app-root .summary .row:first-child{border-top:none;}
#budget-app-root .summary .row span:last-child{font-weight:700; font-variant-numeric:tabular-nums;}
#budget-app-root .summary .row:first-child span:last-child{font-size:1.15rem; color:var(--accent);}

#budget-app-root .addrow{padding:12px 20px; color:var(--accent); cursor:pointer; font-size:0.88rem; font-weight:500;}
#budget-app-root .addrow:hover{background:var(--bg);}

#budget-app-root .reset{
  display:block; width:100%; text-align:center; padding:11px; background:none; border:none;
  color:var(--muted); font-size:0.82rem; margin-top:4px; cursor:pointer; font-family:inherit;
}
#budget-app-root .reset:hover{color:var(--neg);}

/* add expense form */
#budget-app-root .addform{display:flex; flex-wrap:wrap; gap:8px; padding:14px 20px;}
#budget-app-root .addform input{border:1px solid var(--line); background:var(--bg); color:var(--ink); border-radius:10px; padding:9px 12px; font-size:0.88rem; font-family:inherit;}
#budget-app-root .addform input:focus{outline:none; border-color:var(--accent);}
#budget-app-root .addform input.f-date{flex:1 1 130px;}
#budget-app-root .addform input.f-label{flex:2 1 140px;}
#budget-app-root .addform input.f-amount{flex:1 1 90px;}
#budget-app-root .addform button{flex:0 0 auto; border:none; background:var(--ink); color:#fff; border-radius:10px; padding:9px 18px; font-size:0.88rem; cursor:pointer; font-weight:500; font-family:inherit;}
#budget-app-root .addform button:hover{background:var(--accent);}
#budget-app-root #monthPicker{border:1px solid var(--line); background:var(--bg); border-radius:8px; padding:6px 10px; font-size:0.82rem; font-family:inherit; color:var(--muted);}

/* expense list */
#budget-app-root .expense-list{max-height:280px; overflow-y:auto;}
#budget-app-root .expense-row{display:flex; align-items:center; gap:10px; padding:9px 20px; border-top:1px solid var(--line); font-size:0.86rem;}
#budget-app-root .expense-date{color:var(--muted); flex:0 0 66px; font-variant-numeric:tabular-nums;}
#budget-app-root .expense-label{flex:1;}
#budget-app-root .empty{padding:24px 20px; color:var(--muted); font-size:0.86rem; text-align:center;}

/* reminder banner */
#budget-app-root .banner{background:var(--ink); color:#fff; border-radius:16px; padding:16px 20px; margin-bottom:20px; display:none;}
#budget-app-root .banner.show{display:block;}
#budget-app-root .banner-text{font-weight:600; margin-bottom:10px; font-size:0.9rem;}
#budget-app-root .banner .addform{padding:0;}
#budget-app-root .banner .addform input{background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.2); color:#fff;}
#budget-app-root .banner .addform input::placeholder{color:rgba(255,255,255,0.55);}
#budget-app-root .banner .addform button{background:var(--accent);}

/* settings */
#budget-app-root .settings{padding:14px 20px; font-size:0.85rem; color:var(--muted); display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
#budget-app-root .settings select{border:1px solid var(--line); background:var(--bg); color:var(--ink); border-radius:8px; padding:5px 8px; font-family:inherit;}

#budget-app-root #barChart{color:var(--ink);}

/* ---------- login / register pages ---------- */
.budget-auth-wrap{max-width:380px; margin:60px auto; padding:0 16px;}
.budget-auth-card{
  background:var(--surface); border-radius:20px; padding:36px 32px;
  box-shadow:0 1px 2px rgba(20,20,40,0.04), 0 4px 24px rgba(20,20,40,0.06);
}
.budget-auth-card h2{font-size:1.3rem; font-weight:700; margin:0 0 22px; letter-spacing:-0.01em;}
.budget-auth-card label{display:block; font-size:0.82rem; color:var(--muted); margin-bottom:6px; font-weight:500;}
.budget-auth-card p{margin:0 0 16px;}
.budget-auth-card input[type=text], .budget-auth-card input[type=email], .budget-auth-card input[type=password]{
  width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:10px; font-size:0.92rem; font-family:inherit;
}
.budget-auth-card input:focus{outline:none; border-color:var(--accent);}
.budget-auth-card button, .budget-auth-card input[type=submit]{
  width:100%; border:none; background:var(--ink); color:#fff; border-radius:10px; padding:12px;
  font-size:0.92rem; font-weight:600; cursor:pointer; margin-top:6px; font-family:inherit;
}
.budget-auth-card button:hover, .budget-auth-card input[type=submit]:hover{background:var(--accent);}
.budget-auth-switch{margin-top:20px; font-size:0.86rem; color:var(--muted); text-align:center;}
.budget-auth-switch a{color:var(--accent); text-decoration:none; font-weight:600;}
.budget-error{background:#fdeceb; color:var(--neg); padding:10px 14px; border-radius:10px; font-size:0.85rem; margin-bottom:16px;}