*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Segoe UI, sans-serif;
}

/*COLOR VARIABLES*/
:root{

--primary:#5f9cff;

--danger:red;
--warning:orange;
--success:green;

--glass-bg:rgba(255,255,255,0.08);
--glass-border:rgba(255,255,255,0.15);

--card-shadow:0 10px 40px rgba(0,0,0,0.35);

}

/*BODY BACKGROUND*/

body{

height:100vh;
display:flex;
justify-content:center;
align-items:center;

background:
radial-gradient(at 20% 30%, #6674e2 0px, transparent 50%),
radial-gradient(at 80% 20%, #080447 0px, transparent 50%),
radial-gradient(at 40% 80%, #10382d 0px, transparent 50%),
radial-gradient(at 90% 70%, #580f3a 0px, transparent 50%),
#0b1220;

background-size:200% 200%;

animation:meshMove 15s ease infinite;

overflow:hidden;

}

/*APP CONTAINER*/

.app{

width:420px;
padding:32px;

background:var(--glass-bg);

backdrop-filter:blur(22px);
-webkit-backdrop-filter:blur(22px);

border-radius:18px;

border:1px solid var(--glass-border);

box-shadow:
var(--card-shadow),
inset 0 1px 0 rgba(255,255,255,0.15);

color:white;

animation:fadeIn 0.6s ease;

}

/*TITLE*/

h1{
text-align:center;
margin-bottom:20px;
color:white;
}

/*INPUT AREA*/

.input-section{
display:flex;
gap:10px;
}

input{

flex:1;
padding:10px;

border-radius:8px;
border:1px solid #ddd;

transition:0.2s;

}

input:focus{

border-color:var(--primary);
box-shadow:0 0 8px rgba(95,156,255,0.4);

transform:scale(1.02);

outline:none;

}

select{

padding:10px;
border-radius:8px;
border:1px solid #ddd;

}

/*BUTTONS*/

button{

padding:10px 15px;

border:none;

background:var(--primary);

color:white;

border-radius:8px;

cursor:pointer;

transition:0.2s;

}

button:hover{

transform:translateY(-2px);

box-shadow:0 6px 15px rgba(0,0,0,0.2);

}

button:active{

transform:scale(0.95);

}

/*FILTER BUTTONS*/

.filters{

margin-top:15px;

display:flex;
gap:10px;

}

.filters button{

background:#eee;
color:black;

}

/* TASK LIST*/

ul{

list-style:none;

margin-top:20px;

max-height:300px;

overflow-y:auto;

}

/* scrollbar */

ul::-webkit-scrollbar{
width:6px;
}

ul::-webkit-scrollbar-thumb{
background:var(--primary);
border-radius:10px;
}

/* TASK ITEM */

li{

display:flex;
align-items:center;
gap:10px;

padding:10px;
margin-bottom:10px;

border-radius:10px;

background:rgba(255,255,255,0.15);

backdrop-filter:blur(6px);

color:white;

transition:0.25s;

animation:slideIn 0.3s ease;

}

li:hover{

transform:translateY(-4px) scale(1.02);

box-shadow:0 10px 20px rgba(0,0,0,0.12);

background:rgb(54,124,182);

}

li.dragging{
opacity:0.5;
}

/*PRIORITY COLORS*/

.high{
border-left:6px solid var(--danger);
}

.medium{
border-left:6px solid var(--warning);
}

.low{
border-left:6px solid var(--success);
}

/*COMPLETED TASK*/

.completed{

text-decoration:line-through;

opacity:0.7;

animation:taskDone 0.3s ease;

}

/*DELETE ICON*/

.delete{

cursor:pointer;

color:red;

transition:0.2s;

}

.delete:hover{

transform:rotate(10deg) scale(1.2);

color:#ff3b3b;

}

/*COMPLETE BUTTON */

.complete-btn{

background:#2ecc71;

color:white;

border:none;

padding:5px 8px;

border-radius:5px;

cursor:pointer;

margin-right:10px;

}

.complete-btn:hover{

background:#07aa1d;

}

/* TASK COUNT */

#taskCount{

margin-top:10px;

font-size:14px;

}

/*THEME BUTTON */

#themeToggle{

position:absolute;

top:20px;
right:20px;

background:none;

font-size:18px;

cursor:pointer;

}

/* DARK MODE*/

body.dark{

background:linear-gradient(135deg,#1e1e2f,#121212);

}

body.dark .app{

background:#1f1f2e;

color:white;

}

body.dark li{

background:#2a2a3a;

}

body.dark input{

background:#2a2a3a;

color:white;

border:none;

}

/*ANIMATIONS */

@keyframes meshMove{

0%{ background-position:0% 50%; }

50%{ background-position:100% 50%; }

100%{ background-position:0% 50%; }

}

@keyframes fadeIn{

0%{

opacity:0;
transform:translateY(20px);

}

100%{

opacity:1;
transform:translateY(0);

}

}

@keyframes slideIn{

0%{

opacity:0;
transform:translateY(10px);

}

100%{

opacity:1;
transform:translateY(0);

}

}

@keyframes taskDone{

0%{ transform:scale(1); }

50%{ transform:scale(1.1); }

100%{ transform:scale(1); }

}