.theme-toggle {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 10;
  padding: 0;
}

@media screen and (max-width: 768px) {
  .theme-toggle {
    top: 25px;
    left: 25px;
  }
}

.btToggle .btn {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.btToggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.btToggle .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--accent);
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
}

.btToggle .moon,
.btToggle .sun {
  font-size: 14px;
  position: relative;
}

.btToggle .moon {
  opacity: 1;
}

.btToggle .sun {
  opacity: 0;
  transform: translateX(20px);
}

.btToggle input:checked + .slider {
  background-color: var(--primary);
}

.btToggle input:checked + .slider .moon {
  opacity: 0;
  transform: translateX(-20px);
}

.btToggle input:checked + .slider .sun {
  opacity: 1;
  transform: translateX(0);
}

.btToggle .slider,
.btToggle .slider .moon,
.btToggle .slider .sun {
  transition: none;
}

.btToggle.animated .slider,
.btToggle.animated .slider .moon,
.btToggle.animated .slider .sun {
  transition: all 0.4s ease;
}

html.mode-dark {
  --background: #181818;
  --text: #e0e0e0;
  --white: #212121;
  --shadow: rgba(255, 255, 255, 0.08);
  --card-bg: #212121;
  --card-bg-2: #2e2e2e;
  --card-bg-hover: #333;
  --input-bg: #303030;
  --input-text: #f5f5f5;
  --border: #424242;
}

html.mode-dark input[type='text'],
html.mode-dark input[type='email'],
html.mode-dark input[type='password'],
html.mode-dark select,
html.mode-dark textarea {
  background-color: var(--input-bg);
  color: var(--input-text);
  border-color: var(--border);
}

html.mode-dark form {
  background-color: var(--card-bg);
  box-shadow: 0 8px 16px var(--shadow);
}

html.mode-dark .card {
  background-color: var(--card-bg);
  box-shadow: 0 4px 10px var(--shadow);
  transition: background-color 0.2s ease-in-out;
}

html.mode-dark .card:hover {
  background-color: var(--card-bg-hover);
}

html.mode-dark .signup-form {
  background-color: var(--card-bg);
  box-shadow: 0 4px 12px var(--shadow);
}

html.mode-dark .stat-box {
  background-color: var(--card-bg);
  box-shadow: 0 2px 6px var(--shadow);
}

html.mode-dark .sidebar {
  background-color: var(--card-bg);
  box-shadow: 0 4px 8px var(--shadow);
}

html.mode-dark .chapter-card {
  background-color: var(--card-bg);
  box-shadow: 0 4px 8px var(--shadow);
}

html.mode-dark .course-item {
  background-color: var(--card-bg);
  border-left-color: var(--primary);
  box-shadow: 0 1px 4px var(--shadow);
  transition: background-color 0.2s ease-in-out;
}

html.mode-dark .course-item:hover {
  background-color: var(--card-bg-hover);
}

html.mode-dark .purchase-option {
  background-color: var(--card-bg);
  box-shadow: 0 8px 24px var(--shadow);
  transition:  0.2s ease-in-out;
}

html.mode-dark .purchase-option:hover {
  background-color: var(--card-bg-hover);
}

html.mode-dark .success-code {
  background-color: var(--card-bg);
  box-shadow: 0 8px 24px var(--shadow);
}

html.mode-dark .code-display {
  background-color: #333;
  color: var(--highlight);
  border-color: #555;
}

html:not(.no-js) {
  background-color: var(--background);
  color: var(--text);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.no-js body {
  opacity: 0;
}

.no-js body.loaded {
  opacity: 1;
  transition: opacity 0.3s ease;
}

html:not(.theme-loaded) .theme-toggle {
  opacity: 0;
}

html.theme-loaded .theme-toggle {
  opacity: 1;
  transition: opacity 0.3s ease;
}

iframe {
  width: 100%;
  height: 100vh;
  border: none;
  overflow: hidden;
  background-color: var(--background);
}