body {
  margin: 0;
  font-family: Arial;
  transition: 0.4s;
}

.app {
  width: 360px;
  margin: 80px auto;
  padding: 30px;
  border-radius: 28px;
  text-align: center;

  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.25),
    rgba(255,255,255,0.10)
  );

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

  border: 1px solid rgba(255,255,255,0.4);

  box-shadow:
    0 15px 40px rgba(0,0,0,0.35),
    inset 0 0 10px rgba(255,255,255,0.2);
}

.search-box {
  display: flex;
  gap: 10px;
}

input, button {
  padding: 10px;
  border-radius: 10px;
  border: none;
}

button {
  background: #00c6ff;
  color: white;
  cursor: pointer;
}

.temp { font-size: 40px; }
.icon { width: 80px; }

.forecast {
  display: flex;
  gap: 10px;
  overflow-x: auto;
}

.forecast-card {
  background: rgba(255,255,255,0.2);
  padding: 10px;
  border-radius: 10px;
}

/* Autocomplete */
#suggestions {
  list-style: none;
  padding: 0;
  margin-top: 5px;
  background: white;
  color: black;
  position: absolute;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  z-index: 10;
}

#suggestions li {
  padding: 10px;
  cursor: pointer;
}

#suggestions li:hover {
  background: #eee;
}

/* Modes */
.dark-mode .app {
  background: linear-gradient(
    145deg,
    rgba(0,0,0,0.5),
    rgba(0,0,0,0.25)
  );

  border: 1px solid rgba(255,255,255,0.1);

  box-shadow:
    0 15px 40px rgba(0,0,0,0.7),
    inset 0 0 8px rgba(255,255,255,0.05);
}
.light-mode { background: #fbc2eb; }

.sunny { background: #fbc2eb; }
.rainy { background: #4e54c8; }
.cloudy {background: linear-gradient(to right, #5f6c7b, #a1a8b3);}

#modeBtn {
  position: absolute;
  top: 20px;
  right: 20px;
}