:root{
  --accent:#2E8B57;
  --muted:#666;
  --bg:#f4f7f9;
}
*{box-sizing:border-box}
body{font-family:Inter,Segoe UI,Arial,sans-serif;margin:0;padding:0;background:var(--bg);color:#222}
header{background:var(--accent);color:#fff;padding:18px 12px;text-align:center}
header p{margin:6px 0 0;color:rgba(255,255,255,0.9)}
.container{display:grid;grid-template-columns:1fr;gap:16px;padding:16px;max-width:1100px;margin:18px auto}
.panel{background:#fff;padding:16px;border-radius:8px;box-shadow:0 6px 18px rgba(20,20,20,0.06)}
h2{margin:0 0 12px 0;color:#16323f}
form{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
form input, form select, form button{padding:8px;border-radius:6px;border:1px solid #dbe3e8}
form input[type="number"]{width:120px}
form input[type="date"], form input[type="time"]{width:150px}
form button{background:var(--accent);color:#fff;border:none;cursor:pointer}
.summary{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.summary div{background:#fafafa;padding:8px;border-radius:6px;border:1px solid #eef3f2}
.list{list-style:none;padding:0;margin:0}
.item{display:flex;justify-content:space-between;align-items:center;padding:10px;border-bottom:1px solid #f0f3f4}
.item .left small{display:block;color:var(--muted)}
.item.income{border-left:4px solid #2ca02c}
.item.expense{border-left:4px solid #d9534f}
.item.event{border-left:4px solid #007bff}
.item .right{display:flex;align-items:center;gap:8px}
.del{background:transparent;border:1px solid #e0e0e0;padding:6px 8px;border-radius:6px;cursor:pointer}
footer{padding:12px;text-align:center;color:var(--muted)}

@media(min-width:900px){
  .container{grid-template-columns:1fr 420px}
  form input[type="text"]{flex:1}
}

/* Login screen */
.login-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg, #eef7f2, #f6fbff);z-index:50}
.login-card{background:#fff;padding:28px;border-radius:10px;box-shadow:0 12px 30px rgba(10,20,30,0.12);width:320px;text-align:center}
.login-card h2{margin:0 0 12px}
.login-card input{width:100%;padding:10px;margin:6px 0;border-radius:8px;border:1px solid #e7eef0}
.login-card button{width:100%;padding:10px;margin-top:8px;border-radius:8px;background:var(--accent);color:#fff;border:none}

.app-header{display:flex;justify-content:space-between;align-items:center;padding:18px 16px;background:#fff;border-bottom:1px solid #eef3f4}
.app-header .left h1{margin:0}
.app-header .right{display:flex;gap:12px;align-items:center}
.app-header .user{color:var(--muted)}
.app-header button{padding:8px 10px;border-radius:6px;border:1px solid #ddd;background:#fff;cursor:pointer}