:root {
  --mac-dark-bg: #111;
  --mac-dark-panel: #e6e6e6;
  --mac-dark-panel-alt: #d0d0d0;
  --mac-dark-border: #050505;
  --mac-dark-text: #050505;
  --mac-dark-text-invert: #000;
  /* --mac-dark-text-invert: #f8f8f8; */
}

#darkModeToggle {
  position: fixed;
  top: 18px;
  left: 18px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid var(--mac-dark-border);
  background: rgba(255, 255, 255, 0.92);
  color: var(--mac-dark-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.65);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
  z-index: 1200;
}

#darkModeToggle:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.65);
}

body.mac-dark {
  background: var(--mac-dark-bg);
  color: var(--mac-dark-text-invert);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.08) 1px, rgba(0, 0, 0, 0) 0),
    radial-gradient(circle at 3px 3px, rgba(255, 255, 255, 0.04) 1.5px, rgba(0, 0, 0, 0) 0);
  background-size: 6px 6px, 8px 8px;
  /*transition: background 0.3s ease, color 0.3s ease;*/
}

body.mac-dark h1,
body.mac-dark h2,
body.mac-dark h3,
body.mac-dark h4,
body.mac-dark h5,
body.mac-dark h6 {
  color: var(--mac-dark-text-invert);
  text-shadow: none;
  letter-spacing: 0.03em;
}

body.mac-dark .hero-card,
body.mac-dark .output-card,
body.mac-dark .info-container,
body.mac-dark .options-container,
body.mac-dark .input-container {
  background: var(--mac-dark-panel);
  color: var(--mac-dark-text);
  border: 3px solid var(--mac-dark-border);
  border-radius: 22px;
  box-shadow:
    inset 0 0 0 2px #fff,
    6px 6px 0 0 rgba(0, 0, 0, 0.8);
}

body.mac-dark .input-container textarea::placeholder {
  color: rgba(55, 55, 55, 0.65);
}

body.mac-dark .hero-card {
  padding: 28px 24px 36px;
}

body.mac-dark .input-container {
  background: var(--mac-dark-panel-alt);
  box-shadow:
    inset 0 0 0 2px #fff,
    3px 3px 0 0 rgba(0, 0, 0, 0.7);
}

body.mac-dark textarea {
  color: var(--mac-dark-text);
  background: transparent;
}

body.mac-dark #clearButton {
  background: var(--mac-dark-panel);
  color: var(--mac-dark-text);
  border: 2px solid var(--mac-dark-border);
  box-shadow: inset -2px -2px 0 0 #fff;
}

body.mac-dark #clearButton:hover {
  background: #fff;
}

body.mac-dark .cta-button,
body.mac-dark .settings-button,
body.mac-dark .output-button {
  background: var(--mac-dark-panel-alt);
  color: var(--mac-dark-text);
  border: 2px solid var(--mac-dark-border);
  border-radius: 12px;
  box-shadow:
    inset -2px -2px 0 0 #fff,
    4px 4px 0 0 rgba(0, 0, 0, 0.8);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body.mac-dark .cta-button:hover,
body.mac-dark .settings-button:hover,
body.mac-dark .output-button:hover {
  transform: translate(-1px, -1px);
  box-shadow:
    inset -2px -2px 0 0 #fff,
    5px 5px 0 0 rgba(0, 0, 0, 0.8);
}

body.mac-dark .primary-actions {
  gap: 16px;
}

body.mac-dark .output-actions {
  gap: 12px;
}

body.mac-dark #spinner .spinner {
  border-color: rgba(0, 0, 0, 0.2);
  border-top-color: rgba(0, 0, 0, 0.75);
}

body.mac-dark .toast {
  background: var(--mac-dark-panel-alt);
  color: var(--mac-dark-text);
  border: 2px solid var(--mac-dark-border);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.8);
}

body.mac-dark footer,
body.mac-dark footer a {
  color: #aaa;
}

body.mac-dark #toggleOptionsButton2 {
  background: var(--mac-dark-panel-alt);
}

body.mac-dark .toggles label {
  color: var(--mac-dark-text);
}

body.mac-dark input[type="radio"] {
  accent-color: var(--mac-dark-text);
}

body.mac-dark .store-badges img {
  filter: grayscale(100%) contrast(110%);
}

body.mac-dark img,
body.mac-dark svg {
  filter: grayscale(100%) contrast(115%);
}

body.mac-dark .emojithing {
  filter: grayscale(100%);
  opacity: 0.35;
}

body.mac-dark #darkModeToggle {
  background: var(--mac-dark-bg);
  border-color: #fff;
  color: #fff;
  box-shadow: 4px 4px 0 0 rgba(255, 255, 255, 0.55);
}

body.mac-dark #darkModeToggle:hover {
  box-shadow: 5px 5px 0 0 rgba(255, 255, 255, 0.55);
}

body.mac-dark #category-index h1, body.mac-dark #category-index a {
  color: #999;
}

body.mac-dark header.hero-header p {
  color: #555;
}

body.mac-dark footer h3 {
  color: #555;
}

@media (max-width: 600px) {
  #darkModeToggle {
    top: 14px;
    right: 14px;
    width: 48px;
    height: 48px;
    font-size: 1rem;
  }

  body.mac-dark .hero-card,
  body.mac-dark .output-card,
  body.mac-dark .info-container {
    border-radius: 18px;
    box-shadow:
      inset 0 0 0 2px #fff,
      3px 3px 0 0 rgba(0, 0, 0, 0.75);
  }
}


body.mac-dark .toggles {
  background: var(--mac-dark-panel-alt);
  border: 2px solid var(--mac-dark-border);
  border-radius: 18px;
  box-shadow:
    inset 0 0 0 2px #fff,
    3px 3px 0 0 rgba(0, 0, 0, 0.75);
}

body.mac-dark .instructions-container {
  background: var(--mac-dark-panel);
  border: 3px solid var(--mac-dark-border);
  border-radius: 20px;
  box-shadow:
    inset 0 0 0 2px #fff,
    5px 5px 0 0 rgba(0, 0, 0, 0.8);
  color: var(--mac-dark-text);
}

body.mac-dark .instruction,
body.mac-dark .instruction:nth-child(odd),
body.mac-dark .instruction:nth-child(even) {
  background: var(--mac-dark-panel-alt);
  border: 2px solid var(--mac-dark-border);
  border-radius: 16px;
  box-shadow:
    inset -2px -2px 0 0 #fff,
    3px 3px 0 0 rgba(0, 0, 0, 0.7);
}

body.mac-dark .instruction h3,
body.mac-dark .instruction p,
body.mac-dark .instruction strong {
  color: var(--mac-dark-text);
}