/* Keep ranking gestures inside a real uni scroll-view on the fixed category page. */
.category-container[data-v-64370f3f] .ranking-area {
  box-sizing: border-box;
  flex: 1 1 0%;
  width: 100%;
  height: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  touch-action: pan-y;
}
.category-container[data-v-64370f3f] .ranking-area .uni-scroll-view {
  height: 100%;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.category-container[data-v-64370f3f] .ranking-content {
  box-sizing: border-box;
  min-height: 100%;
  padding: 2px 2px calc(120px + env(safe-area-inset-bottom, 0px));
}
.category-container[data-v-64370f3f] .ranking-item { flex-shrink: 0; }

/* Match the active dark palette without leaving white panels or controls. */
html[data-ds-dark="true"] .category-container[data-v-64370f3f] .ranking-item {
  border-color: color-mix(in srgb, var(--ds-muted, #a39aaf) 22%, transparent);
  background: var(--ds-surface, #201c2b) !important;
  color: var(--ds-text, #f4efff);
  box-shadow: 0 3px 12px rgb(0 0 0 / 14%);
}
html[data-ds-dark="true"] .category-container[data-v-64370f3f] .ranking-name { color: var(--ds-text, #f4efff) !important; }
html[data-ds-dark="true"] .category-container[data-v-64370f3f] .ranking-icon {
  border-color: var(--ds-accent, #b59aff);
  background: var(--ds-soft, #34264e);
}
html[data-ds-dark="true"] .category-container[data-v-64370f3f] .ranking-bar-wrap { background: var(--ds-soft, #34264e); }
html[data-ds-dark="true"] .category-container[data-v-64370f3f] .ranking-bar { background: var(--ds-accent, #b59aff); }
html[data-ds-dark="true"] .category-container[data-v-64370f3f] .ranking-btn-review {
  border-color: color-mix(in srgb, var(--ds-muted, #a39aaf) 22%, transparent);
  background: var(--ds-soft, #34264e);
  color: var(--ds-text, #f4efff);
}
html[data-ds-dark="true"] .category-container[data-v-64370f3f] .view-toggle {
  border-color: color-mix(in srgb, var(--ds-muted, #a39aaf) 22%, transparent);
  background: var(--ds-surface, #201c2b);
}
html[data-ds-dark="true"] .category-container[data-v-64370f3f] .view-toggle-slider { background: var(--ds-accent, #b59aff); }
html[data-ds-dark="true"] .category-container[data-v-64370f3f] .toggle-btn { color: var(--ds-muted, #a39aaf); }
html[data-ds-dark="true"] .category-container[data-v-64370f3f] .toggle-btn.active { color: var(--ds-on-accent, #1a1027); }