/* Dark page shell — tokens are defined in base.css :root */

body.home-page {
  background: var(--page-bg);
  color: var(--text-primary);
  color-scheme: dark;
}

html:has(> body.home-page) {
  background: var(--page-bg);
}

body.home-page .page-main {
  gap: 0;
  padding: 0;
  max-width: none;
  width: 100%;
}

body.home-page .page-main.home-static {
  padding: 0;
}

body.home-page .to-top {
  width: 60px;
  height: 60px;
  background: transparent;
}

body.home-page .to-top img {
  width: 60px;
  height: 60px;
  filter: none;
}

@media (max-width: 768px) {
  body.home-page .page-main {
    padding: 0 0 32px;
  }

  body.home-page .to-top {
    display: none;
  }
}

/* Unified scrollbar — dark floating pill (html + body + scroll surfaces) */
html:has(> body.home-page),
body.home-page,
body.home-page textarea,
body.home-page select[multiple],
body.home-page .home-scroll,
body.home-page .site-header__nav {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb-hover) var(--scroll-track);
}

html:has(> body.home-page)::-webkit-scrollbar,
body.home-page::-webkit-scrollbar,
body.home-page textarea::-webkit-scrollbar,
body.home-page select[multiple]::-webkit-scrollbar,
body.home-page .home-scroll::-webkit-scrollbar,
body.home-page .site-header__nav::-webkit-scrollbar {
  width: var(--scroll-size);
  height: var(--scroll-size);
}

html:has(> body.home-page)::-webkit-scrollbar-button,
body.home-page::-webkit-scrollbar-button,
body.home-page textarea::-webkit-scrollbar-button,
body.home-page .home-scroll::-webkit-scrollbar-button,
body.home-page .site-header__nav::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

html:has(> body.home-page)::-webkit-scrollbar-track,
body.home-page::-webkit-scrollbar-track,
body.home-page textarea::-webkit-scrollbar-track,
body.home-page select[multiple]::-webkit-scrollbar-track,
body.home-page .home-scroll::-webkit-scrollbar-track,
body.home-page .site-header__nav::-webkit-scrollbar-track {
  background: var(--scroll-track);
  border-radius: 999px;
}

html:has(> body.home-page)::-webkit-scrollbar-thumb,
body.home-page::-webkit-scrollbar-thumb,
body.home-page textarea::-webkit-scrollbar-thumb,
body.home-page select[multiple]::-webkit-scrollbar-thumb,
body.home-page .home-scroll::-webkit-scrollbar-thumb,
body.home-page .site-header__nav::-webkit-scrollbar-thumb {
  background-color: var(--scroll-thumb);
  border-radius: 999px;
  border: 2px solid var(--scroll-track);
  background-clip: padding-box;
  min-height: 40px;
}

html:has(> body.home-page)::-webkit-scrollbar-thumb:hover,
body.home-page::-webkit-scrollbar-thumb:hover,
body.home-page textarea::-webkit-scrollbar-thumb:hover,
body.home-page select[multiple]::-webkit-scrollbar-thumb:hover,
body.home-page .home-scroll::-webkit-scrollbar-thumb:hover,
body.home-page .site-header__nav::-webkit-scrollbar-thumb:hover {
  background-color: var(--scroll-thumb-hover);
}

html:has(> body.home-page)::-webkit-scrollbar-thumb:active,
body.home-page::-webkit-scrollbar-thumb:active,
body.home-page textarea::-webkit-scrollbar-thumb:active,
body.home-page select[multiple]::-webkit-scrollbar-thumb:active,
body.home-page .home-scroll::-webkit-scrollbar-thumb:active,
body.home-page .site-header__nav::-webkit-scrollbar-thumb:active {
  background-color: var(--scroll-thumb-active);
}

html:has(> body.home-page)::-webkit-scrollbar-corner,
body.home-page::-webkit-scrollbar-corner,
body.home-page textarea::-webkit-scrollbar-corner,
body.home-page select[multiple]::-webkit-scrollbar-corner,
body.home-page .home-scroll::-webkit-scrollbar-corner,
body.home-page .site-header__nav::-webkit-scrollbar-corner {
  background: var(--scroll-track);
}

body.home-page .home-err {
  padding: 12px 16px;
  margin-bottom: 16px;
  color: #ffb4b4;
  background: rgba(180, 40, 40, 0.22);
  border: 1px solid rgba(255, 120, 120, 0.28);
  border-radius: 8px;
}