/* =============================================================================
   theme-enhancements.css — xxxu.net
   Loads AFTER black_orange.css. Additive visual layer + light-mode fixes.
   Dark mode = default (html). Light mode = html.light
   Primary accent: #00D4FF (dark) / #00ADEF (light)
   ============================================================================= */


/* ─────────────────────────────────────────────────────────────────────────────
   1. GLOBAL BASE — line-height, placeholder, focus-visible
   ───────────────────────────────────────────────────────────────────────────── */

body {
  line-height: 1.55;
}

::placeholder {
  color: var(--main-grey-color);
  opacity: 0.65;
}

html.light ::placeholder {
  color: #8AAEC8;
  opacity: 1;
}

:focus-visible {
  outline: 2px solid #00D4FF;
  outline-offset: 2px;
}

html.light :focus-visible {
  outline: 2px solid #0088CC;
  outline-offset: 2px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. BODY — ambient blue glow background
   ───────────────────────────────────────────────────────────────────────────── */

body {
  background-color: var(--main-background);
  background-image:
    radial-gradient(ellipse 100% 40% at 50% 0%, rgba(0, 190, 255, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 30% at 90% 90%, rgba(0, 80, 200, 0.08) 0%, transparent 55%);
  background-attachment: fixed;
}

html.light body {
  background-color: var(--main-background);
  background-image:
    radial-gradient(ellipse 120% 35% at 50% 0%, rgba(0, 140, 220, 0.08) 0%, transparent 65%);
  background-attachment: fixed;
}


/* ─────────────────────────────────────────────────────────────────────────────
   3. HEADER
   ───────────────────────────────────────────────────────────────────────────── */

.header-holder {
  background-image: linear-gradient(180deg,
    rgba(0, 190, 255, 0.1) 0%,
    transparent 100%
  );
}

html.light .header-nav {
  -webkit-box-shadow: 0 2px 16px rgba(0, 100, 180, 0.1);
  box-shadow: 0 2px 16px rgba(0, 100, 180, 0.1);
}


/* ─────────────────────────────────────────────────────────────────────────────
   4. NAVIGATION LINKS
   ───────────────────────────────────────────────────────────────────────────── */

.header-nav .nav-link::before {
  background: linear-gradient(90deg, #00D4FF 0%, #007ACC 100%);
  height: 2px;
}

.header-nav .nav-link.active {
  color: #00D4FF;
  text-shadow: 0 0 20px rgba(0, 212, 255, 0.55);
}

html.light .header-nav .nav-link.active {
  color: #0077BB;
  text-shadow: none;
}

@media (hover: hover) {
  .header-nav .nav-link:hover {
    color: #00D4FF;
    text-shadow: 0 0 16px rgba(0, 212, 255, 0.4);
  }

  html.light .header-nav .nav-link:hover {
    color: #0077BB;
    text-shadow: none;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   5. BUTTONS — gradient CTAs + border + press animation
   ───────────────────────────────────────────────────────────────────────────── */

.btn {
  background-color: var(--btn-bg);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, transparent 100%);
  border: 1px solid rgba(0, 212, 255, 0.15);
}

html.light .btn {
  background-image: linear-gradient(180deg, #ffffff 0%, var(--btn-bg) 100%);
  border: 1px solid rgba(0, 140, 200, 0.3);
  -webkit-box-shadow: 0 1px 5px rgba(0, 100, 180, 0.1);
  box-shadow: 0 1px 5px rgba(0, 100, 180, 0.1);
}

.btn.active {
  background-color: transparent;
  background-image: linear-gradient(135deg, #00D4FF 0%, #009FCC 55%, #006FAA 100%);
  color: #000;
  border-color: transparent;
  -webkit-box-shadow: 0 2px 18px rgba(0, 212, 255, 0.55);
  box-shadow: 0 2px 18px rgba(0, 212, 255, 0.55);
}

html.light .btn.active {
  background-image: linear-gradient(135deg, #00ADEF 0%, #0077BB 100%);
  color: #fff;
  -webkit-box-shadow: 0 2px 14px rgba(0, 140, 200, 0.35);
  box-shadow: 0 2px 14px rgba(0, 140, 200, 0.35);
}

.btn:active {
  -webkit-transform: translateY(1px);
  -ms-transform: translateY(1px);
  transform: translateY(1px);
  -webkit-box-shadow: 0 2px 8px rgba(0, 212, 255, 0.4) !important;
  box-shadow: 0 2px 8px rgba(0, 212, 255, 0.4) !important;
  -webkit-transition: transform 0.08s ease;
  transition: transform 0.08s ease;
}

@media (hover: hover) {
  .btn:hover {
    background-color: transparent;
    background-image: linear-gradient(135deg, #00D4FF 0%, #009FCC 55%, #0066AA 100%);
    color: #000;
    border-color: transparent;
    -webkit-box-shadow:
      0 0 0 1px rgba(0, 212, 255, 0.55),
      0 4px 24px rgba(0, 212, 255, 0.6),
      0 0 48px rgba(0, 212, 255, 0.2);
    box-shadow:
      0 0 0 1px rgba(0, 212, 255, 0.55),
      0 4px 24px rgba(0, 212, 255, 0.6),
      0 0 48px rgba(0, 212, 255, 0.2);
  }

  html.light .btn:hover {
    background-image: linear-gradient(135deg, #00ADEF 0%, #0088CC 100%);
    color: #fff;
    border-color: transparent;
    -webkit-box-shadow: 0 4px 18px rgba(0, 140, 200, 0.35);
    box-shadow: 0 4px 18px rgba(0, 140, 200, 0.35);
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   6. SUBSCRIBE / CTA BUTTONS
   ───────────────────────────────────────────────────────────────────────────── */

.sub-btn .text {
  background-color: transparent;
  background-image: linear-gradient(135deg, #00D4FF 0%, #0099CC 65%, #0066AA 100%);
  color: #000;
  font-weight: 600;
}

html.light .sub-btn .text {
  background-image: linear-gradient(135deg, #00ADEF 0%, #007DBB 100%);
  color: #fff;
}

@media (hover: hover) {
  .sub-btn:hover {
    -webkit-box-shadow:
      0 0 0 1px rgba(0, 212, 255, 0.4),
      0 4px 24px rgba(0, 212, 255, 0.55);
    box-shadow:
      0 0 0 1px rgba(0, 212, 255, 0.4),
      0 4px 24px rgba(0, 212, 255, 0.55);
  }

  html.light .sub-btn:hover {
    -webkit-box-shadow: 0 4px 16px rgba(0, 140, 200, 0.3);
    box-shadow: 0 4px 16px rgba(0, 140, 200, 0.3);
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   7. VIDEO CARDS — border + glow + scale on hover
   ───────────────────────────────────────────────────────────────────────────── */

.thumb .img-holder {
  -webkit-transition: -webkit-box-shadow 0.3s ease, -webkit-transform 0.3s ease;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  -o-transition: box-shadow 0.3s ease, transform 0.3s ease;
}

@media (hover: hover) {
  .thumb a:hover .img-holder {
    -webkit-transform: scale(1.03) translateY(-3px);
    -ms-transform: scale(1.03) translateY(-3px);
    transform: scale(1.03) translateY(-3px);
    -webkit-box-shadow:
      0 0 0 2px rgba(0, 212, 255, 0.55),
      0 12px 32px rgba(0, 0, 0, 0.6),
      0 0 32px rgba(0, 212, 255, 0.18);
    box-shadow:
      0 0 0 2px rgba(0, 212, 255, 0.55),
      0 12px 32px rgba(0, 0, 0, 0.6),
      0 0 32px rgba(0, 212, 255, 0.18);
  }

  html.light .thumb a:hover .img-holder {
    -webkit-box-shadow:
      0 0 0 2px rgba(0, 140, 200, 0.45),
      0 10px 28px rgba(0, 60, 120, 0.18);
    box-shadow:
      0 0 0 2px rgba(0, 140, 200, 0.45),
      0 10px 28px rgba(0, 60, 120, 0.18);
  }
}

/* Card surface — gradient tint + subtle border */
.thumb-box {
  background-image: linear-gradient(160deg,
    rgba(0, 190, 255, 0.07) 0%,
    transparent 50%
  );
  background-color: var(--thumb-box-bg);
  border: 1px solid rgba(0, 212, 255, 0.08);
  -webkit-transition: border-color 0.25s ease, -webkit-box-shadow 0.25s ease;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  -o-transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

@media (hover: hover) {
  .thumb-box:hover {
    border-color: rgba(0, 212, 255, 0.2);
    -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  }
}

html.light .thumb-box {
  background-color: #ffffff;
  background-image: linear-gradient(160deg, #ffffff 0%, #F0F8FF 100%);
  border: 1px solid rgba(0, 100, 160, 0.1);
  -webkit-box-shadow: 0 2px 12px rgba(0, 50, 110, 0.07);
  box-shadow: 0 2px 12px rgba(0, 50, 110, 0.07);
}

@media (hover: hover) {
  html.light .thumb-box:hover {
    -webkit-box-shadow: 0 6px 24px rgba(0, 60, 130, 0.14);
    box-shadow: 0 6px 24px rgba(0, 60, 130, 0.14);
    border-color: rgba(0, 140, 200, 0.3);
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   8. TAGS — glowing pill border + gradient hover
   ───────────────────────────────────────────────────────────────────────────── */

.tags-row a {
  border: 1px solid rgba(0, 212, 255, 0.28);
  background-image: linear-gradient(135deg,
    rgba(0, 190, 255, 0.08) 0%,
    transparent 70%
  );
  background-color: var(--tags-link-bg);
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

html.light .tags-row a {
  border: 1px solid rgba(0, 140, 200, 0.45);
  background-image: none;
  background-color: transparent;
}

@media (hover: hover) {
  .tags-row a:hover {
    background-color: transparent;
    background-image: linear-gradient(135deg, #00D4FF 0%, #0099CC 100%);
    border-color: transparent;
    color: #000;
    -webkit-box-shadow: 0 0 16px rgba(0, 212, 255, 0.45);
    box-shadow: 0 0 16px rgba(0, 212, 255, 0.45);
  }

  html.light .tags-row a:hover {
    background-image: linear-gradient(135deg, #00ADEF 0%, #0077BB 100%);
    border-color: transparent;
    color: #fff;
    -webkit-box-shadow: 0 2px 10px rgba(0, 140, 200, 0.3);
    box-shadow: 0 2px 10px rgba(0, 140, 200, 0.3);
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   9. SORT DROPDOWNS — gradient + dropdown panel hover
   ───────────────────────────────────────────────────────────────────────────── */

.sort .sort-title,
.sort-box .btn-holder .sort-title {
  background-color: var(--sort-bg);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, transparent 100%);
  border: 1px solid rgba(0, 212, 255, 0.1);
}

html.light .sort .sort-title,
html.light .sort-box .btn-holder .sort-title {
  background-image: linear-gradient(160deg, #ffffff 0%, var(--sort-bg) 100%);
  border: 1px solid rgba(0, 140, 200, 0.2);
  -webkit-box-shadow: 0 1px 6px rgba(0, 100, 180, 0.08);
  box-shadow: 0 1px 6px rgba(0, 100, 180, 0.08);
}

.sort.sort-open .sort-title {
  background-color: transparent;
  background-image: linear-gradient(135deg, #00D4FF 0%, #009FCC 100%);
  color: #000;
  border-color: transparent;
}

html.light .sort.sort-open .sort-title {
  background-image: linear-gradient(135deg, #00ADEF 0%, #007BBB 100%);
  color: #fff;
  border-color: transparent;
}

/* Dropdown panel */
.sort .sort-drop {
  border: 1px solid rgba(0, 212, 255, 0.14);
  border-top: none;
  -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

html.light .sort .sort-drop {
  border: 1px solid rgba(0, 140, 200, 0.18);
  border-top: none;
  -webkit-box-shadow: 0 8px 24px rgba(0, 60, 130, 0.14);
  box-shadow: 0 8px 24px rgba(0, 60, 130, 0.14);
}

@media (hover: hover) {
  .sort .sort-drop a:hover,
  .sort .sort-drop span:hover {
    background-color: rgba(0, 212, 255, 0.1);
    color: #00D4FF;
  }

  html.light .sort .sort-drop a:hover,
  html.light .sort .sort-drop span:hover {
    background-color: rgba(0, 140, 200, 0.1);
    color: #0077BB;
  }

  .sort .sort-title:hover,
  .sort-box .btn-holder .sort-title:hover,
  .more-title:hover {
    background-color: transparent;
    background-image: linear-gradient(135deg, #00D4FF 0%, #0099CC 100%);
    color: #000;
    border-color: transparent;
    -webkit-box-shadow: 0 4px 18px rgba(0, 212, 255, 0.5);
    box-shadow: 0 4px 18px rgba(0, 212, 255, 0.5);
  }

  html.light .sort .sort-title:hover,
  html.light .sort-box .btn-holder .sort-title:hover,
  html.light .more-title:hover {
    background-image: linear-gradient(135deg, #00ADEF 0%, #007BBB 100%);
    color: #fff;
    border-color: transparent;
    -webkit-box-shadow: 0 4px 14px rgba(0, 140, 200, 0.3);
    box-shadow: 0 4px 14px rgba(0, 140, 200, 0.3);
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   10. PAGINATION — gradient active + hover
   ───────────────────────────────────────────────────────────────────────────── */

.pagination a,
.pagination span {
  background-color: var(--pagination-bg);
  border: 1px solid rgba(0, 212, 255, 0.12);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, transparent 100%);
}

html.light .pagination a,
html.light .pagination span {
  border: 1px solid rgba(0, 140, 200, 0.15);
  background-image: linear-gradient(160deg, #ffffff 0%, var(--pagination-bg) 100%);
  -webkit-box-shadow: 0 1px 5px rgba(0, 100, 180, 0.08);
  box-shadow: 0 1px 5px rgba(0, 100, 180, 0.08);
}

.pagination span.active,
.pagination a.active {
  background-color: transparent;
  background-image: linear-gradient(135deg, #00D4FF 0%, #0099CC 100%);
  color: #000;
  font-weight: 700;
  border-color: transparent;
  -webkit-box-shadow: 0 2px 18px rgba(0, 212, 255, 0.5);
  box-shadow: 0 2px 18px rgba(0, 212, 255, 0.5);
}

html.light .pagination span.active,
html.light .pagination a.active {
  background-image: linear-gradient(135deg, #00ADEF 0%, #007BBB 100%);
  color: #fff;
  -webkit-box-shadow: 0 2px 14px rgba(0, 140, 200, 0.35);
  box-shadow: 0 2px 14px rgba(0, 140, 200, 0.35);
}

@media (hover: hover) {
  .pagination a:hover:not(.active) {
    background-color: transparent;
    background-image: linear-gradient(135deg, #00D4FF 0%, #0099CC 100%);
    color: #000;
    border-color: transparent;
  }

  html.light .pagination a:hover:not(.active) {
    background-image: linear-gradient(135deg, #00ADEF 0%, #007BBB 100%);
    color: #fff;
    border-color: transparent;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   11. INPUTS — cyan focus ring + placeholder
   ───────────────────────────────────────────────────────────────────────────── */

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]):focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: rgba(0, 212, 255, 0.75) !important;
  -webkit-box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.2);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.2);
}

html.light input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]):focus,
html.light textarea:focus,
html.light select:focus {
  border-color: rgba(0, 140, 200, 0.65) !important;
  -webkit-box-shadow: 0 0 0 3px rgba(0, 140, 200, 0.16);
  box-shadow: 0 0 0 3px rgba(0, 140, 200, 0.16);
}


/* ─────────────────────────────────────────────────────────────────────────────
   12. COMMENTS — left accent strip + gradient
   ───────────────────────────────────────────────────────────────────────────── */

.comments-thumb .comment-content .text {
  border-left: 3px solid rgba(0, 212, 255, 0.45);
  background-image: linear-gradient(135deg,
    rgba(0, 190, 255, 0.05) 0%,
    transparent 50%
  );
  background-color: var(--comment-item-bg);
}

html.light .comments-thumb .comment-content .text {
  border-left: 3px solid rgba(0, 140, 200, 0.4);
  background-image: none;
}


/* ─────────────────────────────────────────────────────────────────────────────
   13. MODALS — gradient surface + accent top bar
   ───────────────────────────────────────────────────────────────────────────── */

.modal-inner {
  background-image: linear-gradient(160deg,
    rgba(0, 190, 255, 0.1) 0%,
    transparent 40%
  );
  background-color: var(--modal-bg);
  -webkit-box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(0, 212, 255, 0.16),
    inset 0 1px 0 rgba(0, 212, 255, 0.12);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(0, 212, 255, 0.16),
    inset 0 1px 0 rgba(0, 212, 255, 0.12);
}

.modal-inner::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, #00D4FF 0%, #0077CC 60%, transparent 100%);
  pointer-events: none;
}

html.light .modal-inner {
  background-color: #ffffff;
  background-image: linear-gradient(160deg,
    rgba(0, 140, 200, 0.07) 0%,
    transparent 40%
  );
  -webkit-box-shadow:
    0 16px 52px rgba(0, 40, 100, 0.18),
    0 0 0 1px rgba(0, 140, 200, 0.15);
  box-shadow:
    0 16px 52px rgba(0, 40, 100, 0.18),
    0 0 0 1px rgba(0, 140, 200, 0.15);
}

html.light .modal-inner::before {
  background: linear-gradient(90deg, #00ADEF 0%, #0066AA 60%, transparent 100%);
}


/* ─────────────────────────────────────────────────────────────────────────────
   14. PROFILE section
   ───────────────────────────────────────────────────────────────────────────── */

.profile {
  background-image: linear-gradient(180deg,
    rgba(0, 190, 255, 0.07) 0%,
    transparent 60%
  );
  background-color: var(--profile-bg);
}

html.light .profile {
  background-image: linear-gradient(180deg,
    rgba(0, 140, 200, 0.06) 0%,
    transparent 55%
  );
  -webkit-box-shadow: 0 2px 18px rgba(0, 60, 130, 0.08);
  box-shadow: 0 2px 18px rgba(0, 60, 130, 0.08);
}

.info-heading .btn {
  background-color: transparent;
  background-image: linear-gradient(135deg, #00D4FF 0%, #0099CC 65%, #0066AA 100%);
  color: #000;
  border-color: transparent;
  -webkit-box-shadow: 0 2px 16px rgba(0, 212, 255, 0.35);
  box-shadow: 0 2px 16px rgba(0, 212, 255, 0.35);
}

html.light .info-heading .btn {
  background-image: linear-gradient(135deg, #00ADEF 0%, #0077BB 100%);
  color: #fff;
}

@media (hover: hover) {
  .info-heading .btn:hover {
    background-image: linear-gradient(135deg, #33DDFF 0%, #00ADEF 100%);
    -webkit-box-shadow: 0 4px 24px rgba(0, 212, 255, 0.55);
    box-shadow: 0 4px 24px rgba(0, 212, 255, 0.55);
    color: #000;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   15. CATEGORY CARDS — glow border on hover
   ───────────────────────────────────────────────────────────────────────────── */

@media (hover: hover) {
  .categories-thumbs .thumb a:hover {
    -webkit-box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.55),
      0 0 0 2px rgba(0, 212, 255, 0.45);
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.55),
      0 0 0 2px rgba(0, 212, 255, 0.45);
  }

  html.light .categories-thumbs .thumb a:hover {
    -webkit-box-shadow:
      0 8px 26px rgba(0, 60, 130, 0.18),
      0 0 0 2px rgba(0, 140, 200, 0.4);
    box-shadow:
      0 8px 26px rgba(0, 60, 130, 0.18),
      0 0 0 2px rgba(0, 140, 200, 0.4);
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   16. FOOTER
   ───────────────────────────────────────────────────────────────────────────── */

.footer {
  background-image: linear-gradient(0deg,
    rgba(0, 190, 255, 0.05) 0%,
    transparent 40%
  );
  background-color: var(--footer-bg);
}

html.light .footer {
  background-image: none;
  -webkit-box-shadow: inset 0 1px 0 rgba(0, 120, 200, 0.12);
  box-shadow: inset 0 1px 0 rgba(0, 120, 200, 0.12);
}

@media (hover: hover) {
  .footer .footer-nav a:hover {
    color: #00D4FF;
    text-shadow: 0 0 14px rgba(0, 212, 255, 0.35);
  }

  html.light .footer .footer-nav a:hover {
    color: #0077BB;
    text-shadow: none;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   17. SCROLLBAR — gradient cyan thumb
   ───────────────────────────────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.25); border-radius: 4px; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00D4FF 0%, #0077CC 100%);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #33DDFF 0%, #00ADEF 100%);
}
* { scrollbar-width: thin; scrollbar-color: #00D4FF rgba(0,0,0,0.2); }

html.light ::-webkit-scrollbar-track { background: rgba(160,200,230,0.3); }
html.light ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #00ADEF 0%, #0077CC 100%); }
html.light * { scrollbar-color: #00ADEF rgba(0,120,200,0.15); }


/* ─────────────────────────────────────────────────────────────────────────────
   18. SIDEBAR / ASSIDE surfaces
   ───────────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────────
   19. ALPHABET pagination active
   ───────────────────────────────────────────────────────────────────────────── */

.alphabet a.active {
  background-color: transparent;
  background-image: linear-gradient(135deg, #00D4FF 0%, #0099CC 100%);
  color: #000;
  border-color: transparent;
}

html.light .alphabet a.active {
  background-image: linear-gradient(135deg, #00ADEF 0%, #007BBB 100%);
  color: #fff;
}


/* =============================================================================
   LIGHT MODE WHITE-TEXT FIXES
   Selectors that hardcode color:#fff without CSS variables.
   Scoped to html.light only.
   ============================================================================= */

html.light .search-filter .check-label span { color: var(--general-color); }
html.light .asside-thumb .title-asside { color: var(--heading-title-color); }
html.light .holder-box .asside .title { color: var(--heading-title-color); }
html.light .playlist-thumbs .thumb .count-holder .text { color: var(--thumb-text-color); }
html.light .modal-inner .modal-title { color: var(--heading-title-color); }
html.light .modal-inner .section-title { color: var(--heading-title-color); }
html.light .modal-inner .links a { color: var(--btn-gold); }
html.light .modal-inner .links a:hover { color: #005F99; }
html.light .list-comments .item { color: var(--comment-item-color); }
html.light .modal-inner,
html.light .modal-inner label,
html.light .modal-inner p { color: var(--general-color); }
html.light .modal-inner .btn.active,
html.light .modal-inner .btn:hover { color: #fff; }
html.light .block-inner .title,
html.light .asside-link .title,
html.light .thumb-box .title { color: var(--heading-title-color); }
html.light .upload-wrapper label,
html.light .upload-wrapper .form-title,
html.light .upload-wrapper .section-title { color: var(--general-color); }
html.light .heading-title,
html.light .seo-text h1,
html.light .seo-text h2,
html.light .seo-text h3 { color: var(--seo-title-color); }
html.light .seo-text p,
html.light .seo-text li { color: var(--seo-text-color); }
html.light .holder-box .asside .asside-desc span { color: var(--main-grey-color); }

/* =============================================================================
   END theme-enhancements.css
   ============================================================================= */