body{
  margin:0;
  font-family:Segoe UI, Arial;
  background:#f4f6fb;
  color:#111;
  transition: background 0.4s, color 0.4s;
}

body.dark{
  background:#020617;
  color:#e5e7eb;
}

header{
  background:#1e3a8a;
  color:white;
  padding:15px;
  text-align:center;
}

header .header-controls{
  margin-top:10px;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

header input{
  padding:8px;
  width:60%;
  max-width:300px;
  border-radius:8px;
  border:none;
}

nav{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  background:#111827;
  padding:10px;
}

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

nav button:hover{
  background:#1d4ed8;
  transform:scale(1.05);
}

.container{
  max-width:1000px;
  margin:20px auto;
  padding:20px;
}

.hidden{
  display:none;
}

.card{
  background:white;
  padding:15px;
  margin:10px 0;
  border-radius:12px;
  display:flex;
  align-items:center;
  gap:10px;
  box-shadow:0 5px 15px rgba(0,0,0,0.1);
  transition:0.3s;
}

.card:hover{
  box-shadow:0 8px 25px rgba(0,0,0,0.2);
}

.card img{
  width:40px;
}

body.dark .card{
  background:#020617;
}