:root {
  --scrollbar-size: 6px;
  --scrollbar-thumb: rgb(154 158 168 / 32%);
  --scrollbar-thumb-hover: rgb(172 178 190 / 58%);
}
:root[data-theme='light'] {
  --scrollbar-thumb: rgb(94 103 118 / 30%);
  --scrollbar-thumb-hover: rgb(75 85 101 / 55%);
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}
/* Chromium uses the exact slim geometry; Firefox uses its native thin mode. */
@supports selector(::-webkit-scrollbar) {
  html:root, html:root body, html:root body * { scrollbar-width: auto; scrollbar-color: auto; }
  html:root body :is(.tabs,.upgrade-media-track,.j-main-tabs,.j-subtabs,.j-day-sidebar) { scrollbar-width: none; }
  ::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); background: transparent; }
  ::-webkit-scrollbar-track { background: transparent; margin: 4px; }
  ::-webkit-scrollbar-thumb {
    min-height: 28px;
    min-width: 28px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--scrollbar-thumb);
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); }
  ::-webkit-scrollbar-thumb:active { background-color: var(--scrollbar-thumb-hover); }
  ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  ::-webkit-scrollbar-corner { background: transparent; }
}
@media (forced-colors: active) {
  * { scrollbar-color: auto; }
  ::-webkit-scrollbar-thumb { background-color: CanvasText; }
}