:root[data-theme="light"] {
  --bg: #f4f6f1;
  --surface: #ffffff;
  --surface2: #edf1e7;
  --border: #d3dacb;
  --primary: #78a92d;
  --primary-d: #628d21;
  --text: #20251f;
  --text-2: #657060;
  --green: #78a92d;
  --green-bg: rgba(120,169,45,.13);
  --gray: #757b73;
  --gray-bg: rgba(117,123,115,.12);
}

.theme-toggle {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-2);
  background: var(--surface2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s, border-color .2s, background .2s;
}

.theme-toggle:active {
  color: var(--primary);
  border-color: var(--primary);
}

.theme-toggle .material-symbols-outlined {
  font-size: 21px;
}

.theme-toggle.login-theme {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: 18px;
}