body {
font-family: 'Segoe UI', Tahoma, sans-serif;
margin: 20px;
background: radial-gradient(circle at top, #0b1220, #020617);
color: #e5e7eb;
transition: all 0.4s ease;
}

.container {
background: rgba(255,255,255,0.06);
backdrop-filter: blur(14px);
padding: 20px;
border-radius: 18px;
box-shadow: 0 15px 40px rgba(0,0,0,0.5);
max-width: 850px;
margin: auto;
animation: fadeIn 0.6s ease;
border: 1px solid rgba(255,255,255,0.08);
}

body.light .container {
background: rgba(255,255,255,0.7);
color: #0f172a;
}

h2, h3 {
text-align: center;
color: inherit;
letter-spacing: 0.5px;
}

input, select {
padding: 10px;
margin: 5px;
border-radius: 10px;
border: none;
outline: none;
background: rgba(255,255,255,0.08);
color: inherit;
transition: 0.3s ease;
}

input:focus, select:focus {
transform: scale(1.03);
box-shadow: 0 0 10px rgba(59,130,246,0.6);
}

button {
cursor: pointer;
margin-left: 5px;
border: none;
background: linear-gradient(135deg, #3b82f6, #06b6d4);
color: white;
padding: 9px 12px;
border-radius: 10px;
transition: all 0.25s ease;
box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}

button:hover {
transform: translateY(-3px) scale(1.08);
box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

.task {
padding: 15px;
margin: 10px 0;
border-radius: 14px;
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(255,255,255,0.06);
border-left: 6px solid #64748b;
transition: all 0.3s ease;
animation: fadeIn 0.3s ease;
backdrop-filter: blur(8px);
}

.task:hover {
transform: translateY(-5px);
box-shadow: 0 12px 25px rgba(0,0,0,0.5);
background: rgba(255,255,255,0.1);
}

.completed {
text-decoration: line-through;
opacity: 0.55;
background: rgba(34,197,94,0.15);
animation: completeAnim 0.4s ease;
}

.high { border-left-color: #ef4444; box-shadow: 0 0 10px rgba(239,68,68,0.3);} 
.medium { border-left-color: #f59e0b; box-shadow: 0 0 10px rgba(245,158,11,0.3);} 
.low { border-left-color: #22c55e; box-shadow: 0 0 10px rgba(34,197,94,0.3);} 

.material-icons {
font-size: 20px;
color: white;
}

.progress {
height: 18px;
background: rgba(255,255,255,0.1);
border-radius: 999px;
overflow: hidden;
box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
}

.progress-bar {
height: 100%;
background: linear-gradient(90deg, #22c55e, #06b6d4, #3b82f6);
width: 0%;
transition: width 0.5s ease;
}

.task:active {
transform: scale(0.97);
}

/* Animations */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}

@keyframes completeAnim {
0% { transform: scale(1); }
50% { transform: scale(1.06); background: rgba(34,197,94,0.35); }
100% { transform: scale(1); }
}