@media (max-width: 980px) {
  html[data-theme="dark"] .main-nav,
  html[data-theme="dark"] .front .main-nav,
  html[data-theme="dark"] .admin .main-nav,
  html[data-theme="dark"] .member .main-nav {
    background: rgba(9, 13, 22, 0.98) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42) !important;
  }

  html[data-theme="dark"] .main-nav a,
  html[data-theme="dark"] .front .main-nav a,
  html[data-theme="dark"] .admin .main-nav a,
  html[data-theme="dark"] .member .main-nav a,
  html[data-theme="dark"] .main-nav .lang-switch a {
    color: #e5edf8 !important;
    background: transparent !important;
  }

  html[data-theme="dark"] .main-nav a:hover,
  html[data-theme="dark"] .front .main-nav a:hover,
  html[data-theme="dark"] .admin .main-nav a:hover,
  html[data-theme="dark"] .member .main-nav a:hover,
  html[data-theme="dark"] .main-nav a.active,
  html[data-theme="dark"] .main-nav .lang-switch a.active {
    background: rgba(236, 112, 37, 0.16) !important;
    color: #ffffff !important;
  }

  html[data-theme="dark"] .main-nav .lang-switch {
    background: rgba(15, 23, 42, 0.92) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
  }
}

@media (max-width: 980px) and (prefers-color-scheme: dark) {
  html:not([data-theme]) .main-nav,
  html:not([data-theme]) .front .main-nav,
  html:not([data-theme]) .admin .main-nav,
  html:not([data-theme]) .member .main-nav {
    background: rgba(9, 13, 22, 0.98) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42) !important;
  }

  html:not([data-theme]) .main-nav a,
  html:not([data-theme]) .front .main-nav a,
  html:not([data-theme]) .admin .main-nav a,
  html:not([data-theme]) .member .main-nav a,
  html:not([data-theme]) .main-nav .lang-switch a {
    color: #e5edf8 !important;
    background: transparent !important;
  }

  html:not([data-theme]) .main-nav a:hover,
  html:not([data-theme]) .front .main-nav a:hover,
  html:not([data-theme]) .admin .main-nav a:hover,
  html:not([data-theme]) .member .main-nav a:hover,
  html:not([data-theme]) .main-nav a.active,
  html:not([data-theme]) .main-nav .lang-switch a.active {
    background: rgba(236, 112, 37, 0.16) !important;
    color: #ffffff !important;
  }

  html:not([data-theme]) .main-nav .lang-switch {
    background: rgba(15, 23, 42, 0.92) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
  }
}