body{
  margin:0;
  font-family:system-ui;
  background:#0b0f14;
  color:#e5e7eb;
  display:flex;
  justify-content:center;
  padding:20px;
}

.app{
  width:420px;
}

.header{
  font-size:20px;
  font-weight:600;
  margin-bottom:15px;
}

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

input{
  flex:1;
  padding:10px;
  border-radius:10px;
  border:1px solid #1f2937;
  background:#0f172a;
  color:white;
}

button{
  padding:10px 14px;
  border-radius:10px;
  border:none;
  background:#2563eb;
  color:white;
  cursor:pointer;
}

.card{
  margin-top:15px;
  padding:15px;
  background:#0f172a;
  border:1px solid #1f2937;
  border-radius:14px;
}

.temp{
  font-size:40px;
  font-weight:700;
  margin:10px 0;
}

.info{
  display:flex;
  justify-content:space-between;
  margin-top:10px;
  font-size:13px;
  color:#94a3b8;
}

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

.day{
  min-width:80px;
  padding:10px;
  background:#0f172a;
  border:1px solid #1f2937;
  border-radius:10px;
  text-align:center;
}