body {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(-45deg,#5f6cff,#7b2cbf,#3a86ff,#8338ec);
  background-size:400% 400%;
  animation: gradientMove 10s ease infinite;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}

@keyframes gradientMove{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}


.container{
  backdrop-filter: blur(20px);
  background: rgba(255,255,255,0.15);
  border-radius:20px;
  padding:30px;
  width:340px;
  text-align:center;
  box-shadow:0 8px 30px rgba(0,0,0,0.2);
  border:1px solid rgba(255,255,255,0.2);
}


h2 {
  margin-bottom: 10px;
}

.toggle-btn {
  background: #222;
  color: white;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 10px;
}

input {
  width: 100%;
  padding: 10px;
  margin-bottom: 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

button {
  padding: 10px 15px;
  margin: 5px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
}

button:nth-of-type(2) {
  background-color: #4CAF50;
  color: white;
}

button:nth-of-type(3) {
  background-color: #f44336;
  color: white;
}

#timer{
  font-size:60px;
  font-weight:600;
  letter-spacing:2px;
}

#result {
  font-weight: bold;
  margin-top: 10px;
}

ul {
  padding-left: 20px;
  text-align: left;
}

/* DARK MODE */
body.dark {
  background: #121212;
}

body.dark .container {
  background: #1e1e1e;
  color: white;
}

body.dark input {
  background: #333;
  color: white;
  border: 1px solid #555;
}
.progress{
  width:100%;
  height:10px;
  background:#ddd;
  border-radius:10px;
  margin-top:15px;
}

#progressBar{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#00f5d4,#00bbf9);
  border-radius:10px;
}