html.dark {
  --background-bg-primary: #212529;
  --background-bg-secondary: #1a1d20;
  --background-bg-tertiary: #16191b;
  --background-bg-header: rgba(26, 29, 32, 0.9);
  --background-component-default: #212529;
  --background-component-hovered: #343a40;
  --background-input-default: #212529;
  --background-input-active: #1a1d20;
  --background-overlay: rgba(0, 0, 0, 0.5);

  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-tertiary: rgba(255, 255, 255, 0.5);
  --text-disabled: rgba(255, 255, 255, 0.3);

  --icon-primary: #ffffff;
  --icon-secondary: rgba(255, 255, 255, 0.7);
  --icon-tertiary: rgba(255, 255, 255, 0.5);
  --icon-disabled: rgba(255, 255, 255, 0.3);

  --border-light: #343a40;
  --border-subtle: #495057;
  --border-strong: #6c757d;
  --border-alpha-light: rgba(255, 255, 255, 0.08);
  --border-alpha-subtle: rgba(255, 255, 255, 0.12);
  --border-alpha-strong: rgba(255, 255, 255, 0.2);

  --states-primary-secondary: #343a40;
  --states-primary-secondary-hover: #495057;
  --states-primary-tertiary: rgba(255, 255, 255, 0.08);
  --states-primary-tertiary-hover: rgba(255, 255, 255, 0.12);
  --states-primary-ghost: transparent;
  --states-primary-ghost-hover: rgba(255, 255, 255, 0.08);

  --border-button-secondary: transparent;
  --border-button-secondary-hover: transparent;

  --background-card-top: rgba(255, 255, 255, 0.05);
  --background-card-bottom: transparent;

  --post-gradient: linear-gradient(
    180deg,
    rgba(33, 37, 41, 0) 0%,
    #16191b 100%
  );

  --basic-gray-bg-surface: #343a40;
  --basic-gray-bg-subtle: #495057;
}

html.dark .dark-only {
  display: flex;
}

html.dark .light-only {
  display: none;
}

html.dark .search-button img,
html.dark .search-button__clear img {
  filter: brightness(0) invert(1);
}

html.dark .btn-secondary {
  background: #343a40;
  border-color: transparent;
}

html.dark .btn-secondary:hover {
  background: #495057;
}

html.dark details {
  background-color: #212529;
  color: #e9ecef;
}

html.dark details.toc-block ul::-webkit-scrollbar-track {
  background: transparent;
}

html.dark details.toc-block ul::-webkit-scrollbar-thumb {
  background: transparent;
}

html.dark details.toc-block:hover ul::-webkit-scrollbar-thumb {
  background: #6c757d;
}

html.dark details.toc-block ul {
  scrollbar-color: transparent transparent;
}

html.dark details.toc-block:hover ul {
  scrollbar-color: #6c757d transparent;
}

html.dark details.toc-block > ul > li:has(a[data-status="active"]) {
  background-color: #343a4080;
}

html.dark .blog__image__subtitle:not(:has(.custom-video-wrapper)) {
  background: rgba(52, 58, 64, 0.5);
}

html.dark .blog__image__subtitle:has(.custom-video-wrapper) {
  background: rgba(255, 255, 255, 0.05) !important;
}

html.dark .blog__image__img.custom-video-wrapper {
  background: rgba(255, 255, 255, 0.05);
}

html.dark .tab {
  border-bottom-color: #ffffff40;
}

html.dark .video-block {
  background: rgba(52, 58, 64, 0.5);
}

html.dark .shop-banner {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(13, 110, 253, 0.04) 100%
    ),
    #343a4080;
}

html.dark .shop-header-title {
  color: #ffffff;
}

html.dark a.shop-header-title,
html.dark a.shop-header-title:hover,
html.dark a.shop-header-title:visited,
html.dark a.shop-header-title:active {
  color: #ffffff !important;
}

html.dark .shop-header-title svg {
  color: #ffffff;
}

html.dark .shop-rating-value {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

html.dark .shop-tab {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

html.dark .shop-tab span {
  color: #ffffff;
}

html.dark .shop-tab-active {
  background: rgba(214, 51, 132, 0.08);
}

html.dark .shop-tab-active span {
  color: #f06292;
}

html.dark .shop-item {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}

html.dark .shop-article-card {
  background: var(--background-bg-primary);
  box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.3);
}

html.dark .shop-article-content {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(13, 110, 253, 0.04) 100%
    ),
    #343a4080;
}

html.dark .shop-inline-card {
  background: var(--background-bg-primary);
  box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.3);
}

html.dark .link-underline {
  color: #5a9cfc;
  border-bottom-color: rgba(90, 156, 252, 0.3);
}

html.dark .link-underline:hover {
  color: #7db3ff;
  border-bottom-color: rgba(90, 156, 252, 0.6);
}

html.dark .auth-required-block {
  background: rgba(52, 58, 64, 0.5);
  border-color: #343a40 !important;
}

html.dark .auth-required-title {
  color: #ffffff !important;
}

html.dark .auth-required-description {
  color: rgba(255, 255, 255, 0.6) !important;
}

html.dark .toc-mobile {
  background: #212529;
  border-color: rgba(255, 255, 255, 0.12);
}

html.dark .toc-mobile-header {
  background: #212529;
}

html.dark .toc-mobile-title {
  color: #fff;
}

html.dark .toc-mobile-icon {
  color: rgba(255, 255, 255, 0.64);
}

html.dark .toc-mobile-list::before {
  background: #212529;
}

html.dark .toc-mobile-list > li > a {
  color: rgba(255, 255, 255, 0.64);
}

html.dark .toc-mobile-list > li > a:active,
html.dark .toc-mobile-list > li > a.active,
html.dark .toc-mobile-list > li > a[data-status="active"] {
  color: #fff;
}

html.dark .toc-mobile-list > li:has(a[data-status="active"]) {
    background-color: #343a4080;
}

html.dark .toc-mobile-list li ul a {
  color: rgba(255, 255, 255, 0.64);
}

html.dark .toc-mobile-list li ul a:active,
html.dark .toc-mobile-list li ul a.active,
html.dark .toc-mobile-list li ul a[data-status="active"] {
  color: #fff;
  background-color: transparent;
}

html.dark .toc-mobile.open .toc-mobile-content {
  scrollbar-color: transparent transparent;
}

html.dark .toc-mobile.open:hover .toc-mobile-content {
  scrollbar-color: #6c757d transparent;
}

/* Scrollbar styles for dark mode */
html.dark .toc-mobile.open .toc-mobile-content::-webkit-scrollbar {
  width: 4px;
}

html.dark .toc-mobile.open .toc-mobile-content::-webkit-scrollbar-track {
  background: transparent;
}

html.dark .toc-mobile.open .toc-mobile-content::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 800px;
}

html.dark .toc-mobile.open:hover .toc-mobile-content::-webkit-scrollbar-thumb {
  background: #6c757d;
}

@media (max-width: 991px) {
}

html.dark .blog blockquote {
  background: rgba(52, 58, 64, 0.5);
  color: rgba(255, 255, 255, 0.72);
}

html.dark .reaction-item {
  background: rgba(255, 255, 255, 0.08);
}

html.dark .reaction-item:hover {
  background: rgba(255, 255, 255, 0.12);
}

html.dark .reaction-item.active {
  background: rgba(13, 110, 253, 0.16);
}

html.dark .reaction-count {
  color: rgba(255, 255, 255, 0.8);
}

html.dark .reaction-item.active .reaction-count {
  color: #4a9eff;
}

html.dark .categories-list__item__icon {
  background: rgba(255, 255, 255, 0.08);
}

html.dark .featured-post {
  background: #16191b;
}

html.dark .featured-post__preview::after {
  background: linear-gradient(to bottom, transparent 0%, #16191b 100%);
}