/* v52.70 — shared vertical scrollbar system */
html.customer-surface{
  --sb-track:rgba(255,255,255,.035);
  --sb-track-edge:rgba(255,255,255,.055);
  --sb-thumb-a:#d7b85b;
  --sb-thumb-b:#8f62d2;
  --sb-thumb-hover-a:#ffe08a;
  --sb-thumb-hover-b:#a77be8;
  --sb-corner:#130b20;
}
html.admin-surface{
  --sb-track:#edf0f6;
  --sb-track-edge:#e2e6ef;
  --sb-thumb-a:#8e99b4;
  --sb-thumb-b:#6b73c8;
  --sb-thumb-hover-a:#727f9e;
  --sb-thumb-hover-b:#555fc0;
  --sb-corner:#f4f6fa;
}

/* Firefox. :where() keeps specificity at zero so components that intentionally hide a scrollbar still win. */
:where(html.customer-surface,html.admin-surface),
:where(html.customer-surface,html.admin-surface) *{
  scrollbar-width:thin;
  scrollbar-color:var(--sb-thumb-a) var(--sb-track);
}

/* Chromium / Edge / Safari */
:where(html.customer-surface,html.admin-surface)::-webkit-scrollbar,
:where(html.customer-surface,html.admin-surface) *::-webkit-scrollbar{
  width:10px;
  height:10px;
}
:where(html.customer-surface,html.admin-surface)::-webkit-scrollbar-track,
:where(html.customer-surface,html.admin-surface) *::-webkit-scrollbar-track{
  background:var(--sb-track);
  border:1px solid var(--sb-track-edge);
  border-radius:999px;
}
:where(html.customer-surface,html.admin-surface)::-webkit-scrollbar-thumb,
:where(html.customer-surface,html.admin-surface) *::-webkit-scrollbar-thumb{
  min-height:36px;
  border:2px solid transparent;
  border-radius:999px;
  background:linear-gradient(180deg,var(--sb-thumb-a),var(--sb-thumb-b)) padding-box;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
:where(html.customer-surface,html.admin-surface)::-webkit-scrollbar-thumb:hover,
:where(html.customer-surface,html.admin-surface) *::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,var(--sb-thumb-hover-a),var(--sb-thumb-hover-b)) padding-box;
}
:where(html.customer-surface,html.admin-surface)::-webkit-scrollbar-thumb:active,
:where(html.customer-surface,html.admin-surface) *::-webkit-scrollbar-thumb:active{
  background:linear-gradient(180deg,var(--sb-thumb-hover-b),var(--sb-thumb-hover-a)) padding-box;
}
:where(html.customer-surface,html.admin-surface)::-webkit-scrollbar-corner,
:where(html.customer-surface,html.admin-surface) *::-webkit-scrollbar-corner{
  background:var(--sb-corner);
}

/* History gets a deliberately clearer vertical handle because it is a modal list. */
html.customer-surface .reward-history-list{
  scrollbar-width:auto;
  scrollbar-color:#e8c765 rgba(255,255,255,.045);
}
html.customer-surface .reward-history-list::-webkit-scrollbar{width:11px}
html.customer-surface .reward-history-list::-webkit-scrollbar-track{
  margin-block:8px 3px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.065);
  border-radius:999px;
}
html.customer-surface .reward-history-list::-webkit-scrollbar-thumb{
  min-height:44px;
  border:2px solid transparent;
  border-radius:999px;
  background:linear-gradient(180deg,#ffe08a,#d7ad49 48%,#9a69dc) padding-box;
  box-shadow:0 0 14px rgba(232,199,101,.14),inset 0 0 0 1px rgba(255,255,255,.16);
}
html.customer-surface .reward-history-list::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#fff0ae,#e7c35b 46%,#b185ee) padding-box;
}

/* Touch devices still use native momentum scrolling; keep the visual rail compact. */
@media(max-width:640px){
  :where(html.customer-surface,html.admin-surface)::-webkit-scrollbar,
  :where(html.customer-surface,html.admin-surface) *::-webkit-scrollbar{width:7px;height:7px}
  html.customer-surface .reward-history-list::-webkit-scrollbar{width:8px}
}