* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background: linear-gradient(135deg, #87ceeb 0%, #98d8e8 50%, #b8e6f0 100%);
	min-height: 100vh;
	padding: 20px;
}

main {
	max-width: 1200px;
	margin: 0 auto;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 20px;
	box-shadow: 0 20px 40px rgba(0, 100, 200, 0.1);
	padding: 30px;
	backdrop-filter: blur(10px);
}

header {
	text-align: center;
	margin-bottom: 30px;
	color: #2e86c1;
}

header h1 {
	font-size: 2.5rem;
	margin-bottom: 10px;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

header p {
	color: #5499c7;
	font-size: 1.1rem;
}

.stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	margin-bottom: 30px;
}

.stat-card {
	background: linear-gradient(135deg, #3498db, #5dade2);
	color: white;
	padding: 20px;
	border-radius: 15px;
	text-align: center;
	box-shadow: 0 8px 25px rgba(52, 152, 219, 0.3);
	transition: all 0.3s ease;
}

.budget {
	background: linear-gradient(135deg, #f0f8ff, #e1f5fe);
	padding: 25px;
	border-radius: 15px;
	margin-bottom: 20px;
	border-left: 5px solid #2196f3;
}

.budget-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 15px;
}

.budget-card h3 {
	color: #1976d2;
	font-size: 1.3rem;
	margin: 0;
	flex-shrink: 0;
}

.budget-input-group {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

.budget-input-group input {
	padding: 10px 15px;
	border: 2px solid #aed6f1;
	border-radius: 10px;
	font-size: 1rem;
	min-width: 200px;
	flex: 1;
	max-width: 300px;
}

.budget-display {
	display: flex;
	align-items: center;
	gap: 15px;
	flex-wrap: wrap;
}

.budget-amount {
	font-size: 1.5rem;
	font-weight: bold;
	color: #1976d2;
}

.btn-edit {
	background: linear-gradient(135deg, #f39c12, #e67e22);
	color: white;
	border: none;
	padding: 8px 12px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 0.9rem;
	transition: all 0.3s ease;
	white-space: nowrap;
}

.btn-edit:hover {
	transform: translateY(-2px);
}

.btn-danger {
	background: linear-gradient(135deg, #e74c3c, #c0392b);
	color: white;
	border: none;
	padding: 8px 12px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 0.9rem;
	transition: all 0.3s ease;
	white-space: nowrap;
}

.btn-danger:hover {
	transform: translateY(-2px);
}

.budget-alert {
	margin-top: 15px;
	padding: 15px 20px;
	border-radius: 10px;
	font-weight: 600;
	text-align: center;
	animation: slideDown 0.5s ease;
}

.budget-alert.warning {
	background: linear-gradient(135deg, #ffe0b2, #ffcc80);
	color: #e65100;
	border-left: 5px solid #ff9800;
}

.budget-alert.danger {
	background: linear-gradient(135deg, #ffebee, #ffcdd2);
	color: #c62828;
	border-left: 5px solid #f44336;
}

.stat-card.over-budget-warning {
	background: linear-gradient(135deg, #ff9800, #f57c00);
}

.stat-card.over-budget-danger {
	background: linear-gradient(135deg, #f44336, #d32f2f);
}

#budgetDisplay,
#budgetAlert,
form button:nth-child(2) {
	display: none;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.stat-card:hover {
	transform: translateY(-5px);
}

.stat-value {
	font-size: 1.8rem;
	font-weight: bold;
	margin-bottom: 5px;
}

.stat-label {
	font-size: 0.9rem;
	opacity: 0.9;
}

.form {
	background: linear-gradient(135deg, #ebf5fb, #d6eaf8);
	padding: 25px;
	border-radius: 15px;
	margin-bottom: 30px;
	border-left: 5px solid #3498db;
}

.form h2 {
	color: #2e86c1;
	margin-bottom: 20px;
	font-size: 1.5rem;
}

#expenseForm {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 15px;
	margin-bottom: 20px;
}

#expenseForm div:nth-child(5),
#expenseForm div:nth-child(6) {
	grid-column: 1 / -1;
}

.form-group {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.form-group label {
	color: #2874a6;
	font-weight: 600;
	margin-bottom: 5px;
}

.form-group input,
.form-group select,
.form-group textarea {
	/* width: max-content; */
	padding: 12px;
	border: 2px solid #aed6f1;
	border-radius: 10px;
	font-size: 1rem;
	transition: all 0.3s ease;
	background: white;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
	outline: none;
	border-color: #3498db;
	box-shadow: 0 0 10px rgba(52, 152, 219, 0.3);
	transform: translateY(-2px);
}

button {
	padding: 12px 30px;
	border: none;
	border-radius: 25px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.btn-primary {
	background: linear-gradient(135deg, #3498db, #2980b9);
	color: white;
	box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
}

.btn-primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 25px rgba(52, 152, 219, 0.6);
}

.btn-secondary {
	background: linear-gradient(135deg, #85c1e9, #5dade2);
	color: white;
	margin-left: 10px;
	box-shadow: 0 5px 15px rgba(97, 200, 231, 0.4);
}

.btn-secondary:hover {
	transform: translateY(-3px);
	box-shadow: 0 5px 15px rgba(97, 200, 231, 0.6);
}
.expenses h2 {
	color: #2e86c1;
	margin-bottom: 20px;
	font-size: 1.5rem;
}

.expense-card {
	background: white;
	border-radius: 15px;
	padding: 20px;
	margin-bottom: 15px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
	border-left: 5px solid #3498db;
	transition: all 0.3s ease;
}

.expense-card:hover {
	transform: translateX(5px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.expense-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.expense-amount {
	font-size: 1.5rem;
	font-weight: bold;
	color: #2e86c1;
}

.expense-status {
	padding: 5px 15px;
	border-radius: 20px;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
}

.status-paid {
	background: #d5edda;
	color: #155724;
}

.status-unpaid {
	background: #f8d7da;
	color: #721c24;
}

.expense-details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
	margin-bottom: 15px;
}

.expense-detail {
	color: #5499c7;
}

.expense-detail strong {
	color: #2874a6;
}

.expense-actions {
	display: flex;
	gap: 10px;
}

.no-expenses {
	text-align: center;
	color: #85c1e9;
	font-size: 1.2rem;
	padding: 40px;
	background: #f8fbfe;
	border-radius: 15px;
	border: 2px dashed #aed6f1;
}

@media (max-width: 768px) {
	main {
		padding: 20px;
	}

	header h1 {
		font-size: 2rem;
	}

	#expenseForm {
		grid-template-columns: 1fr;
	}

	.budget {
		padding: 20px 15px;
	}

	.budget-card {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
	}

	.budget-card h3 {
		text-align: center;
		font-size: 1.2rem;
	}

	.budget-input-group {
		width: 100%;
		flex-direction: column;
		gap: 15px;
	}

	.budget-input-group input {
		width: 100%;
		min-width: unset;
		max-width: none;
		box-sizing: border-box;
	}

	.btn.btn-primary {
		width: 100%;
		padding: 12px;
		font-size: 1rem;
	}

	.btn-secondary {
		margin-left: 0px;
		margin-top: 10px;
	}

	.budget-display {
		justify-content: center;
		width: 100%;
	}

	.budget-amount {
		font-size: 1.3rem;
	}

	.expense-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.expense-actions {
		flex-wrap: wrap;
	}
}

@media (max-width: 480px) {
	.budget {
		padding: 15px 10px;
		margin-bottom: 15px;
	}

	.budget-card h3 {
		font-size: 1.1rem;
	}

	.budget-input-group input {
		padding: 12px;
		font-size: 0.95rem;
	}

	.btn.btn-primary {
		padding: 14px;
		font-size: 0.95rem;
	}

	.budget-amount {
		font-size: 1.2rem;
	}

	.btn-edit-budget {
		padding: 10px 14px;
		font-size: 0.85rem;
	}
}