body.dark-mode {
  background: rgba(42,40,45,1);
}

body.dark-mode .sidebar {
	background: #262a49;
}

body.dark-mode .main-content {
  background: rgba(42,40,45,1);
}

body.dark-mode * {
  color: #ddd !important;
}

body.dark-mode .drop-image {
  opacity: 0.1 !important;
}

body.dark-mode select {
    background-color: rgba(38,36,41,1) !important;
    color: #f2f2f2 !important;
    border: 1px solid rgba(0,0,0,0.7) !important;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    padding: 8px;
    border-radius: 6px;
}

body.dark-mode select option {
    background-color: rgba(38,36,41,1);
    color: #f2f2f2;
    border: 1px solid rgba(0,0,0,0.7) !important;
}

body.dark-mode .container {
    background-color: rgba(38,36,41,1);
    color: #f2f2f2;
    border: 1px solid rgba(0,0,0,0.7) !important;
}

body.dark-mode .container input {
  background: rgba(42,40,45,1);
    color: #f2f2f2;
    border: 1px solid rgba(0,0,0,0.7) !important;
}

body.dark-mode select option:checked,
body.dark-mode select option:hover,
body.dark-mode select option:focus {
    background-color: rgba(34,32,37,1);
    color: #fff;
    border: 1px solid rgba(0,0,0,0.7) !important;
}

body.dark-mode select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

body.dark-mode .profile-summary {
	background: rgba(0,0,0,0.2);
	border: none;
}

body.dark-mode .settings-form form {
	background: rgba(0,0,0,0.2) !important;
	border: none;
}

body.dark-mode .settings-form input,
body.dark-mode #rename-form input,
body.dark-mode #direct-url {
    background-color: rgba(0,0,0,0.2);
	border: none;
}

body.dark-mode .image-wrapper {
	border: 0;
}

body.dark-mode .settings-form button {
  background: #293661;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: none;
  border-radius: 5px;
  color: #fff;
  font-size: 0.85em;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.2s ease, transform 0.1s ease;
  line-height: 1;              /* ensures equal height */
  min-width: 120px;            /* optional, for symmetry */
}

body.dark-mode .settings-form button:hover {
	background: #38447a;
}

body.dark-mode .tab-button {
	background: rgba(0,0,0,0.2);
	border: none;
}

body.dark-mode .tab-button.active {
	background: rgba(0,0,0,0.4);
	border: none;
}

body.dark-mode .tabs {
  border-bottom: 1px solid rgba(0,0,0,0.25);
}

body.dark-mode .theme-toggle img {
    filter: brightness(0.85);
}