:root {
  --primary-dark: #168bff;
  --bg-dark: #121212;
  --bg-dark-secondary: #1e1e1e;
  --text-dark: #e0e0e0;
}

.dark body {
  background: linear-gradient(to bottom right, #121212, #1e1e1e) !important;
  color: var(--text-dark);
}

.dark header {
  background-color: black !important;
}

.dark #mobileMenu {
  background-color: #1a1a1a !important;
}

.dark section.bg-gradient-to-r {
  background: linear-gradient(to right, black, #1a1a1a) !important;
}

.dark section.bg-white {
  background-color: #1a1a1a !important;
}

.dark section.bg-gray-50 {
  background-color: black !important;
}

.dark h2, .dark h3 {
  color: var(--primary-dark) !important;
}

.dark div.bg-gray-50 {
  background-color: #171717 !important;
}

.dark p.text-gray-600, .dark p.text-gray-700 {
  color: #b0b0b0 !important;
}

.dark a.bg-white {
  background-color: var(--primary-dark) !important;
  color: black !important;
}

.dark div.bg-white {
  background-color: #161616 !important;
}

.dark footer {
  background-color: black !important;
}

.dark .w-12.h-12.bg-blue-100 {
  background-color: #1f1f1f !important;
}

.dark .fas.fa-comments, 
.dark .fas.fa-code, 
.dark .fas.fa-bolt {
  color: var(--primary-dark) !important;
}

.dark span.font-medium.text-\[\#0466C8\] {
  color: var(--primary-dark) !important;
}

.dark .nav-link:hover,
.dark {
  background-color: rgba(101, 148, 241, 0.321) !important;
}

.switch {
  display: block;
  --width-of-switch: 3.2em;
  --height-of-switch: 1.7em;
  --size-of-icon: 1.3em;
  --slider-offset: 0.3em;
  position: relative;
  width: var(--width-of-switch);
  height: var(--height-of-switch);
}

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

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #97cdff;
  transition: .4s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "";
  height: var(--size-of-icon,1.4em);
  width: var(--size-of-icon,1.4em);
  border-radius: 20px;
  left: var(--slider-offset,0.3em);
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(80deg,#0095ff,#0276d4 80%);
  transition: .4s;
}

input:checked + .slider {
  background-color: #27282c;
}

input:checked + .slider:before {
  left: calc(100% - (var(--size-of-icon,1.4em) + var(--slider-offset,0.3em)));
  background: #27282c;
  box-shadow: inset -3px -2px 5px -2px #006ef4, inset -10px -4px 0 0 #00b5fd;
}

.dark main div.bg-white {
  background-color: #161616 !important;
}

.dark .bg-gradient-to-r.from-\[\#0466C8\].to-\[\#0353A4\] {
  background: linear-gradient(to right, #0a0a0a, #0a0a0a) !important;
}

.dark label.text-gray-700, 
.dark .text-gray-700 {
  color: #b0b0b0 !important;
}

.dark input, 
.dark textarea {
  background-color: #1e1e1e !important;
  border-color: #333 !important;
  color: var(--text-dark) !important;
}

.dark input::placeholder, 
.dark textarea::placeholder {
  color: #777 !important;
}

.dark .text-blue-700 {
  color: var(--primary-dark) !important;
}

.dark .fas.fa-heading, 
.dark .fas.fa-align-left, 
.dark .fas.fa-tags {
  color: #777 !important;
}

.dark .border-gray-200 {
  border-color: #333 !important;
}

.dark .border-gray-300 {
  border-color: #333 !important;
}

.dark #previewArea {
  background-color: #1a1a1a !important;
  color: var(--text-dark) !important;
}

.dark button.text-gray-500 {
  color: #999 !important;
}

.dark button.text-gray-500:hover {
  color: #ccc !important;
}

.dark button.text-\[\#0466C8\] {
  color: var(--primary-dark) !important;
}

.dark .bg-\[\#0466C8\] {
  background-color: #1a1a1a !important;
}

.dark .bg-blue-50 {
  background-color: #1a1a1a !important;
}

.dark .text-\[\#023E7D\] {
  color: var(--primary-dark) !important;
}

.dark .text-\[\#0466C8\] {
  color: var(--primary-dark) !important;
}

.dark .bg-red-100 {
  background-color: #2a1010 !important;
}

.dark .text-red-600 {
  color: #ff9e9e !important;
}

.dark .hover\:bg-red-200:hover {
  background-color: #3a1515 !important;
}

.dark .hover\:bg-gray-50:hover {
  background-color: #252525 !important;
}

.dark .border-gray-100 {
  border-color: #333 !important;
}

.dark .divide-gray-100 > * + * {
  border-color: #333 !important;
}

.dark .text-gray-500,
.dark .text-gray-400 {
  color: #999 !important;
}

.dark .bg-blue-100.text-\[\#0466C8\] {
  background-color: #1a2735 !important;
  color: var(--primary-dark) !important;
}

.dark .p-6.bg-\[\#0279f0\] {
  background-color: #162030 !important;
}

.dark .markdown-content {
  color: var(--text-dark) !important;
}

.dark .markdown-content code {
  background-color: #1a1a1a !important;
  color: #e0e0e0 !important;
  border-color: #333 !important;
}

.dark .markdown-content pre {
  background-color: #1a1a1a !important;
  border-color: #333 !important;
}

.dark .bg-white.text-\[\#0466C8\] {
  background-color: var(--primary-dark) !important;
  color: #121212 !important;
}

.dark .hover\:bg-gray-200:hover {
  background-color: #02aff9 !important;
}

.dark .bg-gradient-to-br.from-\[\#0466C8\].to-\[\#0353A4\] {
  background: linear-gradient(to bottom right, #121212, #1a1a1a) !important;
}

.dark .bg-white.border-l-4.border-red-500 {
  background-color: #1e1e1e !important;
  border-color: #ff4d4d !important;
}

.dark #toast-text {
  color: var(--text-dark) !important;
}

.dark .text-gray-400.hover\:text-gray-900 {
  color: #999 !important;
}

.dark .text-gray-400.hover\:text-gray-900:hover {
  color: #ccc !important;
}

.dark .flex-grow.border-t.border-gray-300 {
  border-color: #333 !important;
}

.dark .bg-white.border.border-gray-300 {
  background-color: #1a1a1a !important;
  border-color: #444 !important;
}

.dark .text-gray-700.py-2\.5 {
  color: #bbb !important;
}

.dark .text-gray-700.py-2\.5:hover {
  background-color: #252525 !important;
}

.dark .text-\[\#0466C8\].hover\:text-\[\#0353A4\] {
  color: var(--primary-dark) !important;
}

.dark .text-\[\#0466C8\].hover\:text-\[\#0353A4\]:hover {
  color: #59f5ff !important;
}

.dark .bg-blue-100.text-\[\#0466C8\] {
  background-color: #1a2735 !important;
  color: var(--primary-dark) !important;
}

.dark .edit-answer-text,
.dark #editQuestionText {
  background-color: #1e1e1e !important;
  border-color: #333 !important;
  color: var(--text-dark) !important;
}

.dark .bg-gray-200.text-gray-700 {
  background-color: #2d2d2d !important;
  color: #d0d0d0 !important;
}

.dark .bg-gray-200.text-gray-700:hover {
  background-color: #3d3d3d !important;
}

.dark .answer-edit-form.bg-gray-50,
.dark #questionEditForm.bg-gray-50 {
  background-color: #1f1f1f !important;
}
.dark .markdown-content pre {
  max-width: 100%;
  overflow-x: auto;
}

.dark .markdown-content code {
  white-space: pre-wrap;
  word-break: break-word;
}

.dark select {
  background-color: #1e1e1e !important;
  border-color: #333 !important;
  color: var(--text-dark) !important;
}

.dark select option {
  background-color: #1e1e1e !important;
  color: var(--text-dark) !important;
}

.dark .text-gray-700 {
  color: #b0b0b0 !important;
}

.dark button[type="submit"] {
  background-color: #1a2735 !important;
  color: var(--primary-dark) !important;
}

.dark button[type="submit"]:hover {
  background-color: #223242 !important;
}

.dark .bg-blue-100.text-\[\#0466C8\].rounded-full {
  background-color: #1a2735 !important;
  color: var(--primary-dark) !important;
}

.dark .text-gray-500.hover\:text-gray-700 {
  color: #999 !important;
}

.dark .text-gray-500.hover\:text-gray-700:hover {
  color: #ccc !important;
}

.dark .flex-wrap.gap-2 button {
  margin-bottom: 0.25rem;
}

.dark .bg-[#0466C8\/10],
.dark .hover\:bg-\[#0466C8\/10\]:hover {
  background-color: rgba(22, 139, 255, 0.15) !important;
}

.dark .text-[#0466C8] {
  color: var(--primary-dark) !important;
}
.dark .bg-gray-100.text-gray-600 {
  background-color: #1f1f1f !important;
  color: #999 !important;
}

.dark button[id^="like-btn-"]:hover {
  background-color: rgba(22, 139, 255, 0.2) !important;
}

.dark .fa-thumbs-up {
  color: inherit;
}

.dark .fas.fa-thumbs-up {
  color: var(--primary-dark) !important;
}

.dark .text-[#0466C8] .fa-thumbs-up {
  color: var(--primary-dark) !important;
}

@media (max-width: 640px) {
  .dark button[id^="like-btn-"] {
    background-color: rgba(22, 139, 255, 0.15) !important;
    display: inline-flex !important;
    align-items: center;
  }
  
  .dark button[id^="like-btn-"].bg-gray-100 {
    background-color: #1f1f1f !important;
  }
}