body, html { 
  direction: rtl; 
  text-align: right; 
  font-family: 'Vazirmatn', Tahoma, sans-serif; 
}
:root { 
  --pink: #ff4f9a; 
  --black: #181818; 
  --white: #fff; 
  --bg: var(--white); 
  --text: var(--black); 
}
body.dark { 
  --bg: var(--black); 
  --text: var(--white); 
}
body { 
  background: var(--bg); 
  color: var(--text); 
  margin: 0; 
  padding: 0; 
}
header, main, form, .card { 
  max-width: 600px; 
  margin: 2rem auto; 
  padding: 1rem; 
  background: rgba(255,255,255,0.8); 
  border-radius: 16px; 
  box-shadow: 0 2px 8px #0001; 
}
body.dark header, body.dark main, body.dark form, body.dark .card { 
  background: #222; 
}
a, button, input[type=submit] { 
  background: var(--pink); 
  color: var(--white); 
  border: none; 
  border-radius: 8px; 
  padding: 0.5rem 1rem; 
  text-decoration: none; 
  cursor: pointer; 
  font-weight: bold; 
  margin: 0.2rem; 
}
input, textarea { 
  width: 100%; 
  margin: 0.5rem 0; 
  padding: 0.5rem; 
  border-radius: 8px; 
  border: 1px solid #ccc; 
}
.music-list audio { 
  width: 100%; 
  margin-top: 0.5rem; 
}
@media (max-width: 700px) { 
  header, main, form, .card { max-width: 98vw; } 
}
.theme-switch { 
  float: left; 
  background: none; 
  color: var(--pink); 
  font-size: 1.5rem; 
  border: none; 
}