/* KOSMOS base — шрифт и тема как на kosmosvpn.app */

:root {
  --kosmos-content-max: 1112px;
  --kosmos-font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --kosmos-lime: #d0f8a0;
  --kosmos-navy: #0b253e;
  --kosmos-blue: #3b648c;
  --kosmos-muted: #8d8d8d;
  --kosmos-bg-dark: #070707;
  --kosmos-bg-light: #ffffff;
  --kosmos-fg-dark: #ffffff;
  --kosmos-fg-light: #070707;
}

html {
  --kosmos-page-bg: var(--kosmos-bg-light);
  --kosmos-page-fg: var(--kosmos-fg-light);
}

html[data-theme="dark"] {
  --kosmos-page-bg: var(--kosmos-bg-dark);
  --kosmos-page-fg: var(--kosmos-fg-dark);
  color-scheme: dark;
}

html[data-theme="light"] {
  --kosmos-page-bg: var(--kosmos-bg-light);
  --kosmos-page-fg: var(--kosmos-fg-light);
  color-scheme: light;
}

html,
body,
button,
input,
select,
textarea,
.site,
.kosmos-header,
.kosmos-footer {
  font-family: var(--kosmos-font) !important;
}

body {
  background: var(--kosmos-page-bg);
  color: var(--kosmos-page-fg);
  transition: background-color 0.2s ease, color 0.2s ease;
  -webkit-text-size-adjust: 100%;
}

/* Пока светлая/тёмная тема полностью только на chrome; контент Reboot чуть подстраиваем */
html[data-theme="dark"] .site-content,
html[data-theme="dark"] .site-content a {
  color: inherit;
}

/* Theme switch — как на лендинге */
.kosmos-theme-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 56px;
  height: 32px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid #b2b2b2;
  background: #000;
  cursor: pointer;
  flex-shrink: 0;
  box-sizing: border-box;
  z-index: 3;
}

.kosmos-theme-switch__knob,
.kosmos-theme-switch__icons {
  pointer-events: none;
}

.kosmos-theme-switch__knob {
  position: absolute;
  left: 6px;
  top: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transform: translate(0, -50%);
  transition: transform 0.3s ease;
  z-index: 2;
}

html[data-theme="dark"] .kosmos-theme-switch__knob {
  transform: translate(22px, -50%);
}

.kosmos-theme-switch__icons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 4px;
  color: #fff;
  z-index: 1;
}

.kosmos-theme-switch__icon {
  display: block;
}

/* Scroll top — круг как CTA; стрелка по центру; плавный show/hide */
button.scrolltop.js-scrolltop {
  width: 48px !important;
  height: 48px !important;
  right: 20px !important;
  bottom: 24px !important;
  left: auto !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--kosmos-lime) !important;
  color: var(--kosmos-navy) !important;
  box-shadow: 0 0 32px rgba(208, 248, 160, 0.4) !important;
  outline: none !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  line-height: 0 !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 12px, 0) scale(0.94);
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.45s,
    box-shadow 0.25s ease,
    background-color 0.2s ease !important;
}

button.scrolltop.js-scrolltop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
}

button.scrolltop.js-scrolltop:before {
  content: none !important;
  display: none !important;
}

.scrolltop__icon {
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  /* оптический центр: вверх-шеврон визуально «тяжёлый» снизу */
  transform: translateY(0.5px);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

button.scrolltop.js-scrolltop:hover .scrolltop__icon,
button.scrolltop.js-scrolltop:focus-visible .scrolltop__icon {
  transform: translateY(-1px);
}

button.scrolltop.js-scrolltop.is-visible:hover,
button.scrolltop.js-scrolltop.is-visible:focus-visible {
  background: #e2ffb8 !important;
  box-shadow: 0 0 48px rgba(208, 248, 160, 0.55) !important;
  transform: translate3d(0, -3px, 0) scale(1.04);
}

button.scrolltop.js-scrolltop.is-visible:active {
  transform: translate3d(0, -1px, 0) scale(1.01);
}

html[data-theme="light"] button.scrolltop.js-scrolltop {
  background: var(--kosmos-blue) !important;
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(59, 100, 140, 0.35) !important;
}

html[data-theme="light"] button.scrolltop.js-scrolltop.is-visible:hover,
html[data-theme="light"] button.scrolltop.js-scrolltop.is-visible:focus-visible {
  background: #2f5478 !important;
  box-shadow: 0 14px 36px rgba(59, 100, 140, 0.45) !important;
}

@media (min-width: 1600px) {
  button.scrolltop.js-scrolltop {
    right: 40px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  button.scrolltop.js-scrolltop,
  .scrolltop__icon {
    transition: none !important;
  }
}