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

body{
  background:#020617;
  color:white;
  min-height:100vh;
  padding:20px;
}

body.light-mode{
  background:#f1f5f9;
  color:#111827;
}

.app{
  max-width:550px;
  margin:auto;
}

.top-bar{
  display:flex;
  justify-content:flex-end;
  margin-bottom:20px;
}

#themeButton{
  width:45px;
  height:45px;
  border:none;
  border-radius:50%;
  background:#2563eb;
  color:white;
  cursor:pointer;
  font-size:18px;
}

h1{
  text-align:center;
  margin-bottom:10px;
}

.subtitle{
  text-align:center;
  margin-bottom:20px;
  opacity:0.8;
}

.converter-card{
  background:#0f172a;
  border-radius:20px;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

body.light-mode .converter-card{
  background:white;
}

input,
select,
button{
  width:100%;
  padding:14px;
  border:none;
  border-radius:12px;
  font-size:16px;
}

input,
select{
  background:#1e293b;
  color:white;
}

body.light-mode input,
body.light-mode select{
  background:#e2e8f0;
  color:#111827;
}

button{
  background:#2563eb;
  color:white;
  cursor:pointer;
}

button:hover{
  opacity:0.9;
}

#swapButton{
  font-size:22px;
}

#result{
  text-align:center;
  font-size:22px;
  font-weight:bold;
  margin-top:10px;
}

#updateTime{
  text-align:center;
  opacity:0.7;
  font-size:14px;
}

#loadingSpinner{
  width:40px;
  height:40px;
  border:4px solid rgba(255,255,255,0.2);
  border-top:4px solid white;
  border-radius:50%;
  display:none;
  margin:auto;
  animation:spin 1s linear infinite;
}

@keyframes spin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

#favoritesContainer{
  margin-top:20px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.favorite-item{
  background:#0f172a;
  border-radius:16px;
  padding:15px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

body.light-mode .favorite-item{
  background:white;
}

.favorite-buttons{
  display:flex;
  gap:10px;
}

.load-btn{
  background:#16a34a;
}

.delete-btn{
  background:#dc2626;
}