/* 浅色细线滚动条 — 全站与 showcase 预览共用 */
:root {
  --scrollbar-size: 5px;
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(148, 163, 184, 0.55);
  --scrollbar-thumb-hover: rgba(100, 116, 139, 0.75);
  --scrollbar-thumb-dark: rgba(255, 255, 255, 0.26);
  --scrollbar-thumb-dark-hover: rgba(255, 255, 255, 0.4);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

*::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 999px;
  transition: background-color 0.2s ease;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

/* 深色背景页面（landing 等） */
.scrollbar-on-dark,
.scrollbar-on-dark * {
  scrollbar-color: var(--scrollbar-thumb-dark) var(--scrollbar-track);
}

.scrollbar-on-dark::-webkit-scrollbar-thumb,
.scrollbar-on-dark *::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-dark);
}

.scrollbar-on-dark::-webkit-scrollbar-thumb:hover,
.scrollbar-on-dark *::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-dark-hover);
}