* { margin:0; padding:0; box-sizing:border-box; font-family:'Poppins',sans-serif; }
body { background: linear-gradient(135deg,#6a11cb,#2575fc); display:flex; justify-content:center; align-items:center; min-height:100vh; padding:20px; }
.hidden { display:none; }
.container { background:#fff; border-radius:20px; box-shadow:0 10px 25px rgba(0,0,0,0.2); width:380px; padding:40px; text-align:center; transition:all 0.4s ease; animation:fadeIn 0.8s ease; }
@keyframes fadeIn { from{opacity:0;transform:scale(0.95);} to{opacity:1;transform:scale(1);} }
.icon { font-size:65px; color:#2575fc; margin-bottom:15px; }
h2 { color:#333; font-weight:600; margin-bottom:20px; }
.input-field { margin:15px 0; text-align:left; }
.input-field label { font-size:14px; color:#444; font-weight:500; }
.input-field input { width:100%; padding:10px 12px; margin-top:6px; border-radius:10px; border:1px solid #ccc; outline:none; font-size:15px; transition:0.3s; }
.input-field input:focus { border-color:#2575fc; }
.btn { width:100%; background:#2575fc; color:white; padding:12px; border:none; border-radius:10px; cursor:pointer; font-size:16px; font-weight:600; transition:0.3s; margin-top:15px; }
.btn:hover { background:#6a11cb; }
.toggle-text { margin-top:18px; font-size:14px; }
.toggle-text span { color:#2575fc; font-weight:600; cursor:pointer; }
.success-msg, .error-msg { font-size:14px; margin-top:10px; font-weight:500; }
.success-msg { color:green; }
.error-msg { color:red; }
.screen { width:95%; max-width:1000px; background:#fff; border-radius:16px; box-shadow:0 12px 30px rgba(0,0,0,.15); padding:28px; display:none; }
.row { display:flex; gap:8px; margin:12px 0; flex-wrap:wrap; }
button.action-btn { cursor:pointer; background:#4caf50; color:white; border:none; border-radius:10px; padding:10px; transition:.15s; }
.back-btn { background:#777;margin-bottom:20px;color:white;border:none;padding:10px 15px;border-radius:10px;cursor:pointer;}
.reset-btn{background:#e53935;color:white;border:none;padding:10px;border-radius:10px;}
.restore-btn{background:#2196F3;color:white;border:none;padding:10px;border-radius:10px;}
.history-btn{background:#ff9800;color:white;border:none;padding:10px;border-radius:10px;}
.summary { display:flex; justify-content:space-around; margin:20px 0; text-align:center; flex-wrap:wrap; }
.summary div { background:#eef2f7; padding:12px; border-radius:10px; width:30%; min-width:150px; font-weight:bold; }
.overspend { background:#ffebee !important; color:#c62828 !important; border:2px solid #c62828; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:25px; }
.card { background:#f9f9f9; border-radius:15px; padding:20px; box-shadow:0 5px 15px rgba(0,0,0,0.05); }
input[type="number"],input[type="text"]{width:100%;margin-top:10px;padding:10px;border-radius:10px;border:1px solid #ccc;}
table{width:100%;margin-top:20px;border-collapse:collapse;}
th,td{padding:12px;border-bottom:1px solid #ddd;text-align:center;}
th{background:#f1f1f1;}
.warning{display:none;font-weight:bold;color:#c62828;margin-top:8px;}
.reminder{display:none;font-weight:bold;color:#f57c00;margin-top:8px;}
#historyModal { display:none; position:fixed; z-index:999; left:0; top:0; width:100%; height:100%; overflow:auto; background:rgba(0,0,0,0.6); justify-content:center; align-items:center; }
#historyContent { background:#fff; padding:20px; border-radius:15px; width:90%; max-width:700px; box-shadow:0 5px 15px rgba(0,0,0,0.3); max-height:80vh; overflow-y:auto; }
#historyContent h3{margin-bottom:15px;}
#historyContent table{width:100%; border:1px solid #ddd; margin-top:0;}
#historyContent th, #historyContent td{padding:10px; border-bottom:1px solid #ddd;}
#closeHistory{background:#e53935;color:white;border:none;padding:8px 12px;border-radius:8px;cursor:pointer;}
#closeHistory:hover{background:#c62828;}
.expense-list{margin-left:15px;font-size:14px;}
.expense-list li{margin-bottom:3px;}

/* History modal - improved card design */
.budget-card{background:#f8f9fb;border-radius:10px;padding:14px;margin-bottom:12px;box-shadow:0 4px 10px rgba(0,0,0,0.06);}
.budget-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:12px}
.budget-header .title{font-weight:700;font-size:15px;color:#222}
.budget-header .meta{font-size:12px;color:#666}
.budget-totals{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.badge{background:#eef2f7;padding:6px 10px;border-radius:8px;font-weight:700;color:#0b5394}
.badge.remaining{background:#fff3e0;color:#e65100;border:1px solid #ffdcc1}
.toggle-btn{margin-left:auto;background:#2575fc;color:#fff;border:none;padding:8px 10px;border-radius:8px;cursor:pointer}
.expense-section{margin-top:8px}
.expense-table{width:100%;border-collapse:collapse}
.expense-table th,.expense-table td{padding:8px;border-bottom:1px solid #e8e8e8;text-align:left;font-size:13px}
.small-muted{font-size:12px;color:#888}