/* ════════════════════════════════════════════════════════════
   RateFlow Design System — Token-Based Architecture
   
   All visual values are defined as Design Tokens in :root.
   Component rules reference ONLY tokens — zero hard-coded values.
   
   To modify the visual appearance, edit ONLY the :root block.
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   DESIGN TOKENS — Single Source of Truth for ALL visual values
   ════════════════════════════════════════════════════════════ */
:root {
  /* ══ Colors — Backgrounds ══ */
  --bg-primary: #0b1220;
  --bg-card: #0f172a;
  --bg-dropdown: #0f172a;

  /* ══ Colors — Accent ══ */
  --color-accent: #4f6ef7;

  /* ══ Colors — Text ══ */
  --text-primary: #ffffff;
  --text-secondary: #a8b2c1;
  --text-muted: rgba(255,255,255,0.4);
  --text-muted-solid: #6b7585;

  /* ══ Colors — Borders ══ */
  --border-subtle: rgba(255,255,255,0.08);
  --border-hover: rgba(255,255,255,0.12);
  --border-hint: rgba(255,255,255,0.06);

  /* ══ Colors — State ══ */
  --color-danger: #ef4444;
  --color-danger-hover: rgba(239,68,68,0.15);
  --color-success: #10b981;

  /* ══ Interaction ══ */
  --hover-bg: rgba(79,110,247,0.08);
  --hover-bg-strong: rgba(79,110,247,0.12);
  --hover-bg-input: rgba(255,255,255,0.08);
  --hover-bg-nav: rgba(255,255,255,0.06);
  --hover-scale: 1;
  --active-scale: 0.98;

  --focus-ring: 0 0 0 2px rgba(79,110,247,0.2);
  --focus-bg: rgba(255,255,255,0.06);

  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;

  /* ══ Shadows ══ */
  --shadow-dropdown: 0 10px 30px rgba(0,0,0,0.4);
  --shadow-hover: 0 6px 16px rgba(0,0,0,0.25);
  --shadow-accent-sm: 0 2px 8px rgba(79,110,247,0.25);
  --shadow-accent-md: 0 4px 16px rgba(79,110,247,0.35);

  /* ══ Opacity ══ */
  --opacity-disabled: 0.5;
  --opacity-other-month: 0.3;
  --opacity-other-month-hover: 0.5;
  --opacity-disabled-cell: 0.35;

  /* ══ Base Input ══ */
  --input-bg: rgba(255,255,255,0.04);
  --input-bg-focus: var(--focus-bg);
  --input-border: var(--border-subtle);
  --input-focus-border: var(--color-accent);
  --input-focus-shadow: var(--focus-ring);
  --input-color: var(--text-primary);
  --input-placeholder: var(--text-muted);
  --input-height: 40px;
  --input-radius: 8px;

  /* ══ Dropdown ══ */
  --dropdown-bg: var(--bg-dropdown);
  --dropdown-border: var(--border-subtle);
  --dropdown-radius: 10px;
  --dropdown-shadow: var(--shadow-dropdown);
  --dropdown-padding: 6px;

  /* ══ Dropdown Option ══ */
  --option-height: 36px;
  --option-color: var(--text-secondary);
  --option-hover-bg: var(--hover-bg);
  --option-selected-bg: var(--hover-bg-strong);
  --option-selected-color: var(--text-primary);
  --option-radius: 6px;

  /* ══ Button ══ */
  --btn-height: 40px;
  --btn-radius: 8px;
  --btn-font-size: 13px;
  --btn-primary-gradient: linear-gradient(135deg, var(--color-accent), #7c3aed);
  --btn-primary-shadow: var(--shadow-accent-sm);
  --btn-primary-shadow-hover: var(--shadow-accent-md);
  --btn-secondary-bg: rgba(255,255,255,0.05);
  --btn-secondary-border: var(--border-subtle);
  --btn-secondary-color: var(--text-secondary);
  --btn-secondary-hover-bg: var(--hover-bg-input);
  --btn-secondary-hover-border: var(--border-hover);
  --btn-ghost-hover-bg: var(--input-bg);

  /* ══ Button — Danger ══ */
  --btn-danger-bg: rgba(239,68,68,0.1);
  --btn-danger-border: rgba(239,68,68,0.2);
  --btn-danger-color: var(--color-danger);
  --btn-danger-hover-bg: var(--color-danger-hover);

  /* ══ Date Picker ══ */
  --date-quick-btn-height: 28px;
  --date-quick-btn-font-size: 12px;
  --date-quick-btn-bg: var(--input-bg);
  --date-quick-btn-border: var(--border-subtle);
  --date-quick-btn-color: var(--text-secondary);
  --date-quick-btn-radius: 6px;
  --date-quick-btn-hover-bg: var(--color-accent);
  --date-cell-radius: 6px;
  --date-cell-hover-bg: rgba(79,110,247,0.18);
  --date-cell-selected-bg: var(--color-accent);
  --date-cell-today-border: var(--color-accent);
  --date-cell-today-color: var(--color-accent);
  --date-cell-color: var(--text-secondary);
  --date-nav-btn-size: 30px;
  --date-nav-btn-color: var(--text-secondary);
  --date-nav-btn-hover-bg: var(--hover-bg-nav);
  --date-nav-btn-radius: var(--date-cell-radius);
  --date-weekday-color: var(--text-muted-solid);
  --date-footer-border: var(--border-subtle);
  --date-footer-btn-border: var(--border-subtle);
  --date-footer-btn-color: var(--text-muted-solid);
  --date-footer-btn-hover-border: var(--color-danger);
  --date-footer-btn-hover-color: var(--color-danger);
  --date-footer-btn-hover-bg: rgba(239,68,68,0.08);

  /* ══ Radius ══ */
  --radius-base: 8px;
  --radius-sm: 6px;
  --radius-md: 10px;

  /* ══ Typography ══ */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 13px;
  --font-size-lg: 14px;
  --font-size-xl: 16px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ══ Spacing ══ */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;

  /* ══ Table — Rate Decision Interface ══ */
  --table-radius: var(--radius-lg);
  --table-header-bg: var(--bg-elevated);
  --table-row-bg: transparent;
  --table-row-hover-bg: rgba(79,110,247,0.06);
  --table-row-hover-shadow: none;
  --table-row-border: var(--border-subtle);
  --table-cell-padding-comfortable: var(--space-lg) var(--space-lg);
  --table-cell-padding-compact: var(--space-md) var(--space-md);
  --table-font-size: var(--font-size-base);
  --table-header-font-size: var(--font-size-xs);

  /* ══ Table — Info Hierarchy ══ */
  --table-primary-weight: 500;
  --table-primary-size: var(--font-size-lg);
  --table-secondary-weight: 400;
  --table-secondary-size: var(--font-size-sm);
  --table-secondary-color: var(--text-secondary);
  --table-tertiary-weight: 400;
  --table-tertiary-size: var(--font-size-xs);

  /* ══ Table — Status Colors ══ */
  --table-status-normal-bg: rgba(16,185,129,0.1);
  --table-status-normal-color: var(--color-success);
  --table-status-normal-text: var(--color-success);
  --table-status-warning-bg: rgba(245,158,11,0.12);
  --table-status-warning-color: #f59e0b;
  --table-status-warning-text: #f59e0b;
  --table-status-expired-bg: rgba(107,115,133,0.1);
  --table-status-expired-color: var(--text-muted-solid);
  --table-status-expired-text: var(--text-muted-solid);

  /* ══ Table — Hover Actions ══ */
  --table-action-btn-size: 30px;
  --table-action-btn-radius: 6px;
  --table-action-btn-color: var(--text-muted-solid);
  --table-action-btn-hover-bg: var(--hover-bg);
  --table-action-btn-hover-color: var(--text-primary);

  /* ══ Table — Density (Compact) ══ */
  --table-compact-padding: var(--space-md) var(--space-md);
  --table-compact-gap: 0;
  --table-compact-font-size: var(--font-size-sm);
}

/* ════════════════════════════════════════════════════════════
   BaseInput — ALL inputs must use this
   ════════════════════════════════════════════════════════════ */
.ds-input {
  height: var(--input-height);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  padding: 0 var(--space-md);
  font-size: var(--font-size-base);
  color: var(--input-color);
  font-family: var(--font-family);
  outline: none;
  transition: all var(--transition-fast);
  width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.ds-input:focus {
  border-color: var(--input-focus-border);
  box-shadow: var(--input-focus-shadow);
  background: var(--input-bg-focus);
}

.ds-input::placeholder {
  color: var(--input-placeholder);
}

.ds-input:hover {
  border-color: var(--border-hover);
}

/* Input wrapper with icon */
.ds-input-wrapper {
  position: relative;
  width: 100%;
}

.ds-input-wrapper .ds-input {
  padding-right: 36px;
}

.ds-input-icon {
  position: absolute;
  right: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--input-placeholder);
  pointer-events: none;
  font-size: var(--font-size-sm);
  transition: transform var(--transition-fast);
}

.ds-input-wrapper.is-open .ds-input-icon {
  transform: translateY(-50%) rotate(180deg);
}

/* ════════════════════════════════════════════════════════════
   BaseSelect / BaseDropdown — ALL dropdowns
   ════════════════════════════════════════════════════════════ */
.ds-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--dropdown-bg);
  border: 1px solid var(--dropdown-border);
  border-radius: var(--dropdown-radius);
  box-shadow: var(--dropdown-shadow);
  padding: var(--dropdown-padding);
  max-height: 280px;
  overflow-y: auto;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
}

.ds-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ds-option {
  height: var(--option-height);
  display: flex;
  align-items: center;
  padding: 0 var(--space-md);
  font-size: var(--font-size-base);
  color: var(--option-color);
  border-radius: var(--option-radius);
  cursor: pointer;
  transition: background var(--transition-fast);
  gap: var(--space-sm);
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
}

.ds-option:hover,
.ds-option--highlighted {
  background: var(--option-hover-bg);
}

.ds-option--selected {
  background: var(--option-selected-bg);
  color: var(--option-selected-color);
}

/* Option label/name */
.ds-option-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Option code badge */
.ds-option-code {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-xs) var(--space-sm);
  background: var(--hover-bg-strong);
  color: var(--text-secondary);
  border-radius: 5px;
  flex-shrink: 0;
}

/* Option desc (muted, right-aligned) */
.ds-option-desc {
  font-size: var(--font-size-xs);
  color: var(--text-muted-solid);
  margin-left: auto;
  flex-shrink: 0;
}

/* Empty state */
.ds-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-muted-solid);
  font-size: var(--font-size-base);
}

/* Keyboard hint */
.ds-hint {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-xs);
  color: var(--text-muted-solid);
  background: rgba(0,0,0,0.2);
  border-radius: 0 0 var(--dropdown-radius) var(--dropdown-radius);
  border-top: 1px solid var(--border-hint);
  margin-top: var(--space-xs);
}

/* ════════════════════════════════════════════════════════════
   BaseButton — ALL buttons
   ════════════════════════════════════════════════════════════ */
.ds-btn {
  height: var(--btn-height);
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family);
  cursor: pointer;
  border: none;
  outline: none;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0 20px;
  white-space: nowrap;
  box-sizing: border-box;
  text-decoration: none;
}

.ds-btn-primary {
  background: var(--btn-primary-gradient);
  color: var(--text-primary);
  box-shadow: var(--btn-primary-shadow);
}

.ds-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--btn-primary-shadow-hover);
}

.ds-btn-primary:active {
  transform: scale(var(--active-scale));
}

.ds-btn-primary:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.ds-btn-secondary {
  background: var(--btn-secondary-bg);
  border: 1px solid var(--btn-secondary-border);
  color: var(--btn-secondary-color);
}

.ds-btn-secondary:hover {
  background: var(--btn-secondary-hover-bg);
  color: var(--text-primary);
  border-color: var(--btn-secondary-hover-border);
}

.ds-btn-ghost {
  background: transparent;
  color: var(--btn-secondary-color);
  border: 1px solid transparent;
}

.ds-btn-ghost:hover {
  background: var(--btn-ghost-hover-bg);
  color: var(--text-primary);
}

.ds-btn-danger {
  background: var(--btn-danger-bg);
  color: var(--btn-danger-color);
  border: 1px solid var(--btn-danger-border);
}

.ds-btn-danger:hover {
  background: var(--btn-danger-hover-bg);
}

.ds-btn-sm {
  height: 32px;
  padding: 0 var(--space-md);
  font-size: var(--font-size-sm);
}

.ds-btn-icon {
  width: 34px;
  height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ════════════════════════════════════════════════════════════
   BaseDatePicker — Date input & calendar panel
   ════════════════════════════════════════════════════════════ */
.ds-date-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--dropdown-bg);
  border: 1px solid var(--dropdown-border);
  border-radius: var(--dropdown-radius);
  box-shadow: var(--dropdown-shadow);
  width: 310px;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
}

.ds-date-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Quick buttons */
.ds-date-quick-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.ds-date-quick-btn {
  flex: 1;
  height: var(--date-quick-btn-height);
  font-size: var(--date-quick-btn-font-size);
  border: 1px solid var(--date-quick-btn-border);
  border-radius: var(--date-quick-btn-radius);
  background: var(--date-quick-btn-bg);
  color: var(--date-quick-btn-color);
  font-family: var(--font-family);
  cursor: pointer;
  text-align: center;
  transition: all var(--transition-fast);
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ds-date-quick-btn:hover {
  background: var(--date-quick-btn-hover-bg);
  color: var(--text-primary);
  border-color: var(--date-quick-btn-hover-bg);
}

/* Calendar navigation */
.ds-calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ds-calendar-nav-group {
  display: flex;
  gap: var(--space-xs);
}

.ds-calendar-nav-btn {
  width: var(--date-nav-btn-size);
  height: var(--date-nav-btn-size);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--date-nav-btn-radius);
  background: transparent;
  color: var(--date-nav-btn-color);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: var(--font-size-base);
}

.ds-calendar-nav-btn:hover {
  background: var(--date-nav-btn-hover-bg);
  color: var(--text-primary);
}

.ds-calendar-nav-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  user-select: none;
}

/* Weekday headers */
.ds-date-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: var(--space-xs);
}

.ds-date-weekday {
  text-align: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--date-weekday-color);
  padding: var(--space-xs) 0;
  user-select: none;
}

/* Date grid */
.ds-date-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.ds-date-cell {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--date-cell-radius);
  font-size: var(--font-size-base);
  color: var(--date-cell-color);
  cursor: pointer;
  user-select: none;
  transition: all var(--transition-fast);
}

.ds-date-cell:hover {
  background: var(--date-cell-hover-bg);
  color: var(--text-primary);
}

.ds-date-cell--other {
  opacity: var(--opacity-other-month);
}

.ds-date-cell--other:hover {
  opacity: var(--opacity-other-month-hover);
  color: var(--date-cell-color);
}

.ds-date-cell--today {
  font-weight: var(--font-weight-semibold);
  color: var(--date-cell-today-color);
  border: 1px solid var(--date-cell-today-border);
}

.ds-date-cell--selected {
  background: var(--date-cell-selected-bg) !important;
  color: var(--text-primary) !important;
  font-weight: var(--font-weight-semibold);
}

.ds-date-cell--disabled {
  opacity: var(--opacity-disabled-cell);
  pointer-events: none;
  cursor: not-allowed;
}

/* Calendar footer */
.ds-date-footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--date-footer-border);
  display: flex;
  justify-content: flex-start;
}

.ds-date-footer-btn {
  height: var(--date-quick-btn-height);
  padding: 0 14px;
  border: 1px solid var(--date-footer-btn-border);
  border-radius: var(--date-cell-radius);
  background: transparent;
  color: var(--date-footer-btn-color);
  font-size: var(--date-quick-btn-font-size);
  font-family: var(--font-family);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ds-date-footer-btn:hover {
  border-color: var(--date-footer-btn-hover-border);
  color: var(--date-footer-btn-hover-color);
  background: var(--date-footer-btn-hover-bg);
}

.ds-date-footer-btn i {
  font-size: var(--font-size-xs);
}

/* ════════════════════════════════════════════════════════════
   Form Layout
   ════════════════════════════════════════════════════════════ */
.ds-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ds-form-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted-solid);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ════════════════════════════════════════════════════════════
   Spacing Utilities
   ════════════════════════════════════════════════════════════ */

/* Margin utilities */
.ds-mt-1 { margin-top: var(--space-xs); }
.ds-mt-2 { margin-top: var(--space-sm); }
.ds-mt-3 { margin-top: var(--space-md); }
.ds-mt-4 { margin-top: var(--space-lg); }
.ds-mt-5 { margin-top: var(--space-xl); }

.ds-mb-1 { margin-bottom: var(--space-xs); }
.ds-mb-2 { margin-bottom: var(--space-sm); }
.ds-mb-3 { margin-bottom: var(--space-md); }
.ds-mb-4 { margin-bottom: var(--space-lg); }
.ds-mb-5 { margin-bottom: var(--space-xl); }

.ds-ml-1 { margin-left: var(--space-xs); }
.ds-ml-2 { margin-left: var(--space-sm); }
.ds-ml-3 { margin-left: var(--space-md); }
.ds-ml-4 { margin-left: var(--space-lg); }
.ds-ml-5 { margin-left: var(--space-xl); }

.ds-mr-1 { margin-right: var(--space-xs); }
.ds-mr-2 { margin-right: var(--space-sm); }
.ds-mr-3 { margin-right: var(--space-md); }
.ds-mr-4 { margin-right: var(--space-lg); }
.ds-mr-5 { margin-right: var(--space-xl); }

/* Padding utilities */
.ds-p-1 { padding: var(--space-xs); }
.ds-p-2 { padding: var(--space-sm); }
.ds-p-3 { padding: var(--space-md); }
.ds-p-4 { padding: var(--space-lg); }
.ds-p-5 { padding: var(--space-xl); }

.ds-px-1 { padding-left: var(--space-xs); padding-right: var(--space-xs); }
.ds-px-2 { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.ds-px-3 { padding-left: var(--space-md); padding-right: var(--space-md); }
.ds-px-4 { padding-left: var(--space-lg); padding-right: var(--space-lg); }
.ds-px-5 { padding-left: var(--space-xl); padding-right: var(--space-xl); }

.ds-py-1 { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.ds-py-2 { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.ds-py-3 { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.ds-py-4 { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.ds-py-5 { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }

/* Gap utilities */
.ds-gap-1 { gap: var(--space-xs); }
.ds-gap-2 { gap: var(--space-sm); }
.ds-gap-3 { gap: var(--space-md); }
.ds-gap-4 { gap: var(--space-lg); }
.ds-gap-5 { gap: var(--space-xl); }

/* Flex utilities */
.ds-flex { display: flex; }
.ds-flex-col { flex-direction: column; }
.ds-flex-wrap { flex-wrap: wrap; }
.ds-items-center { align-items: center; }
.ds-items-start { align-items: flex-start; }
.ds-justify-between { justify-content: space-between; }
.ds-justify-center { justify-content: center; }
.ds-flex-1 { flex: 1; }
.ds-shrink-0 { flex-shrink: 0; }

/* Grid utilities */
.ds-grid { display: grid; }

/* ════════════════════════════════════════════════════════════
   Port Code Badge (reusable across tables and selects)
   ════════════════════════════════════════════════════════════ */
.ds-port-code {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-xs) var(--space-sm);
  background: var(--hover-bg-strong);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.ds-port-code--dest {
  background: rgba(16,185,129,0.12);
  color: var(--color-success);
}

/* ════════════════════════════════════════════════════════════
   Scrollbar
   ════════════════════════════════════════════════════════════ */
.ds-scrollbar::-webkit-scrollbar,
.ds-dropdown::-webkit-scrollbar,
.ps-dropdown::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.ds-scrollbar::-webkit-scrollbar-track,
.ds-dropdown::-webkit-scrollbar-track,
.ps-dropdown::-webkit-scrollbar-track {
  background: transparent;
}
.ds-scrollbar::-webkit-scrollbar-thumb,
.ds-dropdown::-webkit-scrollbar-thumb,
.ps-dropdown::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: 3px;
}