html {
  background-color: var(--color-bg);
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

#globalLoader {
  background-color: var(--theme-loader-bg);
}

.loader-logo-container {
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.12));
}

.loader-progress-wrapper {
  background-color: var(--theme-surface-inset);
}

.header,
#main-header.header {
  background-color: var(--theme-header-bg) !important;
  border-bottom-color: var(--color-border) !important;
  box-shadow: var(--theme-shadow-soft);
}

.header-theme-slot {
  display: flex;
  align-items: center;
  margin-left: 18px;
  flex-shrink: 0;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--theme-surface-card-alt);
  color: var(--color-text);
  cursor: pointer;
  font: inherit;
  line-height: 1;
  transition: var(--transition);
  box-shadow: var(--theme-shadow-soft);
}

.theme-toggle:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-1px);
}

.theme-toggle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--theme-overlay-soft);
  color: var(--color-accent);
}

.theme-toggle__label {
  display: none;
}

.dropdown-menu {
  background-color: var(--theme-surface-card);
  border-color: var(--color-border);
  box-shadow: var(--theme-shadow-strong);
}

.dropdown-item {
  color: var(--color-text-muted);
  border-bottom-color: var(--theme-border-soft);
}

.dropdown-item:hover {
  background-color: var(--theme-overlay-soft);
  color: var(--color-text);
}

.menu::-webkit-scrollbar-track {
  background: var(--theme-surface-base);
}

.menu::-webkit-scrollbar-thumb {
  background: var(--theme-scrollbar-thumb);
}

.nav-link {
  color: var(--color-text-muted);
}

.page-hero .page-subtitle,
.view-all-link,
.loading-placeholder,
.article-meta,
.modal-footer,
.footer-links-list a,
.footer-bottom,
.footer-col p {
  color: var(--theme-text-subtle);
}

.sub-nav-item {
  background: var(--theme-surface-card-alt);
  color: var(--theme-text-subtle);
  border-color: var(--color-border);
}

.sub-nav-item:hover,
.sub-nav-item.active {
  box-shadow: var(--theme-shadow-accent);
}

.back-btn {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.back-btn:hover {
  color: var(--color-on-accent);
}

.slider-container,
.card,
.ad-panel,
.custom-modal__dialog,
.news-slider-wrapper,
.news-ticker-container,
.popular-card,
.static-page-container,
.article-container,
.related-card,
.profile-dropdown,
.settings-sidebar,
.cookie-modal {
  background: var(--theme-surface-card);
  border-color: var(--color-border);
  box-shadow: var(--theme-shadow-soft);
}

.card__image,
.popular-list-vertical .popular-card-img,
.popular-section .card__image {
  border-color: var(--color-border);
}

.card__image,
.popular-card-img,
.modal-article-img,
.article-inline-img,
.article-gallery img,
.article-image {
  background-color: var(--theme-image-backdrop);
}

.card .news-title,
.custom-modal__title,
.custom-modal__body,
.custom-modal__close,
.popular-card-title,
.author-name,
.footer-col h4,
.footer-col .footer-heading,
.static-page-title,
.static-content h2,
.static-content h3,
.article-title,
.article-gallery h3,
.related-news-title,
.related-card h4,
.section-title,
.ticker-text {
  color: var(--color-text);
}

.card .news-summary,
.custom-modal__body,
.author-article-title,
.static-content,
.article-content,
.related-card small,
.popular-card-meta,
.footer-desc {
  color: var(--color-text-muted);
}

.popular-card .like-btn {
  background: var(--theme-overlay-soft);
  border-color: var(--theme-border-soft);
  color: var(--color-text);
}

.popular-card .like-btn i {
  color: inherit;
}

.popular-card .like-btn:hover {
  background: rgba(227, 10, 23, 0.1);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.popular-card .like-btn.liked {
  background: rgba(227, 10, 23, 0.12);
  border-color: rgba(227, 10, 23, 0.28);
  color: var(--color-accent);
}

.empty-grid {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  padding: 28px 20px;
  border: 1px dashed var(--theme-border-soft);
  border-radius: 14px;
  background: var(--theme-surface-card-alt);
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.6;
}

.card .read-more-link:hover,
.footer-form button:hover,
.share-btn:hover,
.related-nav-btn:hover,
.theme-toggle[data-theme="light"] .theme-toggle__icon {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.custom-modal,
.settings-overlay,
.cookie-modal-overlay,
.lightbox-modal {
  background: var(--theme-scrim-strong);
}

.custom-modal__dialog::-webkit-scrollbar-track,
.related-grid::-webkit-scrollbar-track {
  background: var(--theme-surface-inset);
}

.custom-modal__dialog::-webkit-scrollbar-thumb,
.related-grid::-webkit-scrollbar-thumb {
  background: var(--theme-scrollbar-thumb);
}

.custom-modal__dialog::-webkit-scrollbar-thumb:hover,
.related-grid::-webkit-scrollbar-thumb:hover {
  background: var(--theme-scrollbar-thumb-hover);
}

.modal-article-img,
.article-inline-img,
.article-gallery img {
  border-color: var(--color-border);
  box-shadow: var(--theme-shadow-soft);
}

.modal-article-img:hover,
.article-inline-img:hover,
.article-gallery img:hover,
.related-card:hover,
.card:hover,
.popular-list-vertical .popular-card:hover {
  border-color: var(--color-accent);
}

.lightbox-content {
  box-shadow: var(--theme-shadow-strong);
}

.news-slider-wrapper {
  border-radius: 8px;
}

.slider-viewport,
.popular-card-img,
.lightbox-modal,
.lightbox-content video,
.lightbox-content img {
  background-color: var(--theme-image-backdrop);
}

.slide-content {
  background: linear-gradient(
    to top,
    var(--theme-gradient-strong) 0%,
    var(--theme-gradient-soft) 50%,
    transparent 100%
  );
}

.slide-title {
  text-shadow: 2px 2px 4px var(--theme-gradient-shadow);
}

.slider-control-bar {
  background-color: var(--theme-surface-inset);
  border-top-color: var(--color-border);
}

.control-arrow {
  color: var(--theme-text-subtle);
}

.dot {
  background-color: var(--theme-border-strong);
}

.dot:hover {
  background-color: var(--theme-text-subtle);
}

.popular-section .section-title {
  color: var(--color-text);
}

.popular-section .section-line {
  background: linear-gradient(to right, var(--color-border) 0%, transparent 100%);
}

.popular-rank {
  border-color: var(--theme-surface-card);
}

.authors-section .section-header {
  border-bottom-color: var(--color-accent);
}

.authors-section .section-title {
  color: var(--color-accent);
}

.view-all-link:hover {
  color: var(--color-text);
}

.author-img-wrapper {
  border-color: var(--theme-surface-card-alt);
  background-color: var(--theme-surface-card-alt);
  box-shadow: var(--theme-shadow-soft);
}

.author-card:hover .author-img-wrapper {
  border-color: var(--color-accent);
}

.auth-pill-button {
  background-color: var(--theme-input-bg);
  border-color: var(--color-border);
}

.auth-btn-part {
  color: var(--color-text);
}

.auth-divider {
  background-color: var(--theme-border-strong);
}

.auth-pill-button:hover {
  border-color: var(--theme-border-strong);
  box-shadow: var(--theme-shadow-soft);
}

.user-avatar {
  border-color: var(--theme-surface-card-alt);
}

.profile-dropdown {
  border-color: var(--theme-border-soft);
}

.profile-dropdown button {
  color: var(--color-text-muted);
}

.profile-dropdown button:hover {
  background-color: var(--theme-overlay-soft);
  color: var(--color-text);
}

#logoutBtn {
  border-top-color: var(--theme-border-soft);
}

.auth-form input {
  background: var(--theme-input-bg);
  border-color: var(--theme-border-strong);
  color: var(--color-text);
}

.settings-sidebar {
  background: var(--theme-surface-card);
  border-left-color: var(--theme-border-soft);
}

.settings-header {
  background: var(--theme-surface-inset);
  border-bottom-color: var(--theme-border-soft);
}

.settings-header h3,
.settings-close-btn:hover,
.settings-tab-btn.active {
  color: var(--color-text);
}

.settings-close-btn {
  background: var(--theme-overlay-soft);
  color: var(--color-text-muted);
}

.settings-close-btn:hover {
  background: var(--theme-overlay-strong);
}

.settings-tabs {
  background: var(--theme-overlay-soft);
}

.settings-tab-btn {
  color: var(--color-text-muted);
}

.settings-tab-btn.active {
  background: var(--theme-surface-card);
  box-shadow: var(--theme-shadow-soft);
}

.settings-tab-btn:hover:not(.active) {
  color: var(--color-text);
}

.static-page-container {
  color: var(--color-text-muted);
}

.static-page-title {
  border-bottom-color: var(--color-accent);
}

.static-content {
  background: var(--theme-surface-card);
  border-color: var(--color-border);
  box-shadow: var(--theme-shadow-soft);
}

.mission-box {
  background: var(--theme-surface-card-alt);
  border-left-color: var(--color-accent);
}

.main-footer {
  background-color: var(--theme-footer-bg);
  border-top-color: var(--color-border);
  color: var(--color-text-muted);
}

.footer-social a {
  background: var(--theme-overlay-soft);
  border-color: var(--theme-border-soft);
  color: var(--color-text);
}

.footer-form .input-group {
  background: var(--theme-input-bg);
  border-color: var(--color-border);
}

.footer-form input {
  color: var(--color-text);
}

.footer-bottom {
  border-top-color: var(--theme-border-soft);
}

.about-summary-section {
  background: var(--theme-surface-inset) !important;
  border-top: 1px solid var(--color-border) !important;
  margin-top: 40px !important;
  padding: 60px 20px !important;
}

.about-summary-section h2 {
  color: var(--color-text) !important;
}

.about-summary-section p {
  color: var(--theme-text-subtle) !important;
}

.about-summary-section a {
  color: #ff5a63 !important;
  border-bottom-color: #ff5a63 !important;
}

.about-summary-section > div {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.article-container {
  background: var(--theme-surface-card);
}

.article-header,
.article-gallery,
.related-news-container,
.ticker-content {
  border-color: var(--color-border);
}

.share-btn {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.share-btn i {
  color: inherit !important;
}

.article-meta,
.article-meta span,
.article-content,
.related-card small {
  color: var(--color-text-muted);
}

.related-grid {
  scrollbar-color: var(--color-accent) var(--theme-surface-card);
}

.related-nav-btn {
  background: var(--theme-scrim);
  color: var(--color-text);
  border-color: var(--color-border);
}

.related-card-content {
  background: var(--theme-surface-card);
}

html[data-theme] body.home .article-container {
  background: var(--theme-surface-card) !important;
  border-color: var(--color-border) !important;
  box-shadow: var(--theme-shadow-soft) !important;
  color: var(--color-text) !important;
}

html[data-theme] body.home .article-header,
html[data-theme] body.home .article-gallery,
html[data-theme] body.home .related-news-container {
  border-color: var(--color-border) !important;
}

html[data-theme] body.home .article-title,
html[data-theme] body.home .article-gallery h3,
html[data-theme] body.home .related-news-title,
html[data-theme] body.home .related-card h4 {
  color: var(--color-text) !important;
}

html[data-theme] body.home .article-content,
html[data-theme] body.home .article-meta,
html[data-theme] body.home .article-meta span,
html[data-theme] body.home .related-card small,
html[data-theme] body.home .related-card-footer {
  color: var(--color-text-muted) !important;
}

html[data-theme] body.home .article-content p,
html[data-theme] body.home .article-content li,
html[data-theme] body.home .article-content blockquote {
  color: inherit !important;
}

html[data-theme] body.home .related-card {
  background: var(--theme-surface-card-alt) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
  box-shadow: var(--theme-shadow-soft) !important;
}

html[data-theme] body.home .related-card-content {
  background: var(--theme-surface-card-alt) !important;
  color: var(--color-text) !important;
}

html[data-theme] body.home .related-grid {
  scrollbar-color: var(--color-accent) var(--theme-surface-inset) !important;
}

html[data-theme] body.home .related-grid::-webkit-scrollbar-track {
  background: var(--theme-surface-inset) !important;
}

html[data-theme] body.home .related-grid::-webkit-scrollbar-thumb {
  background: var(--theme-scrollbar-thumb) !important;
}

html[data-theme] body.home .related-nav-btn {
  background: var(--theme-scrim) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

html[data-theme] body.home .related-nav-btn:hover {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-on-accent) !important;
}

html[data-theme] body.home .related-cat-tag,
html[data-theme] body.home .back-link {
  color: var(--color-accent) !important;
}

html[data-theme] body.home .share-btn {
  background: transparent !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

html[data-theme] body.home .share-btn:hover {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-on-accent) !important;
}

html[data-theme] body.home .article-image,
html[data-theme] body.home .article-inline-img,
html[data-theme] body.home .article-gallery img {
  background-color: var(--theme-image-backdrop) !important;
  border-color: var(--color-border) !important;
  box-shadow: var(--theme-shadow-soft) !important;
}

html[data-theme] body.home .about-summary-section[style] {
  background: var(--theme-surface-inset) !important;
  border-top-color: var(--color-border) !important;
}

html[data-theme] body.home .about-summary-section h2[style] {
  color: var(--color-text) !important;
}

html[data-theme] body.home .about-summary-section p[style] {
  color: var(--color-text-muted) !important;
}

.category-nav-container {
  margin: 40px auto;
}

.nav-main-link {
  background: var(--theme-surface-card);
  border-color: var(--color-border);
  box-shadow: var(--theme-shadow-soft);
}

.nav-main-link:hover {
  background: var(--theme-surface-float);
  border-color: var(--color-accent);
}

.nav-sub-card {
  background: var(--theme-surface-card-alt);
  border-color: var(--color-border);
  box-shadow: var(--theme-shadow-soft);
}

.nav-sub-card:hover {
  background: var(--theme-surface-float) !important;
  border-color: var(--color-accent) !important;
}

.nav-label-small,
.nav-sub-label {
  color: var(--theme-text-subtle);
}

.nav-label {
  color: var(--color-accent);
}

.nav-main-title {
  color: var(--color-text);
}

.nav-sub-content {
  color: var(--color-text-muted);
}

.nav-sub-card:hover .nav-sub-content {
  color: var(--color-accent) !important;
}

.sub-bell-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  font-size: 1.5rem;
  margin-left: 15px;
  transition: 0.3s;
  line-height: 1;
}

.sub-bell-btn i {
  color: inherit;
}

.sub-bell-btn:hover {
  background: transparent;
  color: var(--color-accent);
}

.sub-bell-btn.active {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--color-accent);
}

.auth-form input::placeholder,
#newsletterMsg,
#settingsMsg,
.authors-grid p[style],
#subsList p[style],
#dynamicAuthorsList p[style] {
  color: var(--theme-text-subtle) !important;
}

#settingsBtn[style],
#confirmModal h3[style],
#cookieSettingsModal h3[style],
#cookieSettingsModal strong[style] {
  color: var(--color-text) !important;
}

#newUsername[style],
#newEmail[style] {
  background: var(--theme-input-bg) !important;
  border-color: var(--theme-border-strong) !important;
  color: var(--color-text) !important;
}

#newUsername::placeholder,
#newEmail::placeholder {
  color: var(--theme-text-subtle) !important;
}

#saveUsernameBtn[style],
#saveEmailBtn[style],
#confirmOk[style],
.notification-toast > div:first-child[style] {
  color: var(--color-on-accent) !important;
}

#confirmModal p[style],
#confirmCancel[style],
#cookieSettingsModal small[style] {
  color: var(--color-text-muted) !important;
}

#confirmCancel[style] {
  border-color: var(--theme-border-strong) !important;
}

button.like-btn[style],
.related-card .like-btn[style] {
  border-color: var(--color-border) !important;
}

video.article-image,
video.article-inline-img {
  background: var(--theme-image-backdrop) !important;
  border-color: var(--color-border) !important;
}

#lightboxContent img,
#lightboxContent video {
  border-radius: 8px;
  box-shadow: var(--theme-shadow-strong) !important;
}

html[data-theme="light"] .social-icons img {
  filter: none;
  opacity: 0.75;
}

html[data-theme="light"] .theme-toggle {
  background: var(--theme-surface-card);
}

html[data-theme="light"] .theme-toggle__icon {
  background: rgba(227, 10, 23, 0.08);
}

html[data-theme="light"] .slide-title {
  text-shadow: none;
}

html[data-theme="light"] .lightbox-content,
html[data-theme="light"] .modal-article-img,
html[data-theme="light"] .article-inline-img,
html[data-theme="light"] .article-image {
  box-shadow: var(--theme-shadow-soft);
}

@media (max-width: 1100px) {
  .header-theme-slot {
    order: 2;
    margin-left: auto;
    margin-right: 10px;
  }
}

@media (max-width: 900px) {
  .theme-toggle {
    width: 38px;
    height: 38px;
  }

  .theme-toggle__icon {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 480px) {
  .theme-toggle {
    width: 34px;
    height: 34px;
  }

  .theme-toggle__icon {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 380px) {
  .theme-toggle {
    width: 30px;
    height: 30px;
  }

  .theme-toggle__icon {
    width: 22px;
    height: 22px;
  }
}