/* ══════════════════════════════════════════════════════════════════════════
   Shared UI components — used across spot, perp, and perps pages.
   Uses native CSS nesting (supported in all browsers since Dec 2023).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn, .btn-primary, .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 1rem;
  border: var(--border-hairline) solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
  text-decoration: none;
  line-height: 1.4;
}

.btn-primary {
  background-color: var(--color-accent);
  color: white;
  border-color: transparent;
  &:hover { background-color: var(--color-accent-hover); }
}

.btn-secondary {
  background-color: var(--table_bg);
  color: var(--table_text_color);
  border-color: var(--table_border);
  &:hover { background-color: var(--table_hover_bg); }
}

/* Icon-button base — shared by .btn-icon and specialized icon buttons in other files */
.btn-icon,
.ai-chat-btn-icon,
.auth-pwd-toggle,
.sidebar-search-clear,
.settings-pwd-toggle,
.tokens-search-clear {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-placeholder);
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color var(--duration-fast);
  &:hover { color: var(--color-hover-primary); }
}

.btn-pill {
  border: var(--border-table);
  background: transparent;
  color: var(--color-text-placeholder);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-family: inherit;
  transition: background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
  &:hover {
    border-color: var(--color-hover-primary);
    color: var(--color-hover-primary);
  }
  &.active {
    background: var(--color-hover-primary);
    border-color: var(--color-hover-primary);
    color: #fff;
  }
}

/* ── Page header ─────────────────────────────────────────────────────── */

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.375rem 0.75rem;
  gap: var(--space-3);

  &--sticky {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--background);
  }

  &:hover .fav-star { opacity: 1; }

    @media (width <= 64rem) { flex-wrap: wrap; gap: var(--space-2); }
    @media (width <= 48rem)  { padding: 0.5rem 0.75rem 0.375rem; flex-wrap: wrap; gap: 0.375rem; }
}

.page-title {
  font-size: 1.125rem;
  font-weight: 200;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);

  .icon {
    font-size: 1.375rem;
    color: var(--color-text-placeholder);
  }
}

/* ── Tab base (shared by all tab variants) ───────────────────────────── */

.pill-tab, .cat-tab, .nav-tab, .account-tab, .ct-tab, .alerts-chain-pill,
.perps-tab-btn, .quick-filter-tab {
  color: var(--color-text-placeholder);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, transform 0.15s, opacity 0.15s, box-shadow 0.15s;
  display: inline-flex;
  align-items: center;
  border: none;
  &:hover { color: var(--color-text-primary); }
}

/* ── Pill tabs (compact toggle row) ──────────────────────────────────── */

.pill-tabs {
  display: inline-flex;
  align-items: center;
  background: var(--color-surface-dim);
  border-radius: 0.5rem;
  padding: 0 0.1875rem;
  gap: 0.125rem;
  height: 1.5rem;

  &--wrap { flex-wrap: wrap; }
}

.pill-tab {
  height: 1.5rem;
  padding: 0 0.875rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 0.375rem;
  &.active {
    background: var(--color-surface-hover);
    color: var(--color-text-primary);
    font-weight: 600;
  }
}

/* ── Category / filter pill tabs ─────────────────────────────────────── */

.cat-tabs {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
  padding: 0;
}

.cat-tab {
  padding: 0 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: var(--border-hairline) solid var(--border-color, var(--color-border-subtle));
  user-select: none;
  height: 1.5rem;
  box-sizing: border-box;
  &:hover { border-color: var(--border-color-hover, hsl(0 0% 100% / 0.2)); }
  &.active {
    color: var(--color-text-primary);
    background: var(--accent-soft, var(--accent-dim));
    border-color: var(--accent, hsl(from var(--color-focus) h s l / 0.4));
  }
  &--sm {
    padding: var(--pad-label);
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 0.75rem;
  }
}

.cat-count {
  display: inline-block;
  margin-left: 0.25rem;
  font-size: 0.625rem;
  opacity: 0.6;
}

/* ── Page-level underline nav tabs ───────────────────────────────────── */

.nav-tabs {
  display: flex;
  gap: 1.75rem;
  border-bottom: var(--border-hairline) solid var(--table_border);
  margin-bottom: var(--space-3);
}

.nav-tab {
  padding: 0.625rem 0.125rem;
  font-size: 0.9375rem;
  font-weight: 500;
  border-bottom: 0.125rem solid transparent;
  &.active {
    color: var(--color-positive);
    border-bottom-color: var(--color-positive);
  }
}

/* ── Custom dropdown ─────────────────────────────────────────────────── */

/* Shared chrome for native <select> elements that paint their own arrow */
.perps-filter-select,
.box select {
  appearance: none;
  -webkit-appearance: none;
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  cursor: pointer;
}

/* Floating menus hidden by default, toggled via .active / .open classes */
.search-results-dropdown,
.auth-user-menu,
.rp-contracts-dropdown,
.wbs-chain-menu {
  display: none;
  position: absolute;
}

.custom-dropdown {
  position: relative;
  display: inline-block;
}
.custom-dropdown--compact .custom-dropdown__trigger {
  padding: 0 0.375rem;
  font-size: var(--fs-sm);
  gap: 0.25rem;
  background: var(--table_bg);
  color: var(--color-text-placeholder);
  border-color: var(--table_border);
}

.custom-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 0.625rem;
  height: 1.5rem;
  box-sizing: border-box;
  font-size: 0.8125rem;
  font-family: inherit;
  background: var(--table_header_bg);
  border: var(--border-hairline) solid var(--indigo-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.custom-dropdown__trigger:hover {
  border-color: var(--color-hover-primary);
  color: var(--color-hover-primary);
}

.custom-dropdown__arrow {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.custom-dropdown__menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: 16.25rem;
  max-height: 26.25rem;
  overflow-y: auto;
  background: var(--table_header_bg);
  border: var(--border-hairline) solid hsl(from var(--color-indigo) h s l / 0.3);
  border-radius: var(--radius-lg);
  box-shadow: 0 0.5rem 2rem hsl(0 0% 0% / 0.45), 0 0.125rem 0.5rem var(--overlay-30);
  z-index: 1000;
  padding: var(--space-1);
  /* scrollbar via .scrollbar-thin utility on the element */
}
.custom-dropdown--right .custom-dropdown__menu {
  left: auto;
  right: 0;
}

.custom-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 0.4375rem 0.625rem;
  font-size: 0.8125rem;
  font-family: inherit;
  color: var(--color-text-primary);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background 0.1s;
}
.custom-dropdown--compact .custom-dropdown__item {
  padding: 0.4375rem 0.375rem;
}
.custom-dropdown__item:hover,
.custom-dropdown__item.focused { background: var(--indigo-dim); }
.custom-dropdown__item.selected {
  background: var(--indigo-border);
  color: var(--color-indigo-light);
  font-weight: 600;
}

.custom-dropdown.open {
  z-index: 1000;
}
.custom-dropdown.open .custom-dropdown__trigger {
  border-color: var(--color-indigo);
  box-shadow: 0 0 0 0.125rem var(--indigo-dim);
}
.custom-dropdown.open .custom-dropdown__arrow { transform: rotate(180deg); }
.custom-dropdown.open .custom-dropdown__menu {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  animation: dropdown-appear 0.15s ease-out;
}

@keyframes dropdown-appear {
  from { opacity: 0; transform: translateY(-0.25rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Glass card ──────────────────────────────────────────────────────── */

.glass-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: hsl(0 0% 100% / 0.02);
  border: var(--border-hairline) solid var(--color-surface-hover);
  border-radius: 0.625rem;
  padding: var(--space-3);
  -webkit-backdrop-filter: blur(0.5rem);
  backdrop-filter: blur(0.5rem);
  transition: border-color 0.2s;
  &:hover { border-color: hsl(0 0% 100% / 0.15); }
  @media (width <= 48rem) { padding: 0.625rem 0.5rem; }
}
.glass-card--sectioned { padding: 0; overflow: visible; }
.glass-card--has-dropdown { position: relative; z-index: 2; overflow: visible; }

/* ── Card section utilities ──────────────────────────────────────────── */

.card-section         { padding: var(--space-3); }
.card-section-title   { padding: 0.25rem 0.75rem 0; }
.card-section-body    { padding: 0 0.75rem 0.75rem; }
.card-section-divider { padding: var(--space-3); border-top: var(--border-hairline) solid var(--color-surface-overlay); }

/* ── Page sections ───────────────────────────────────────────────────── */

.page-sections {
  padding: 0 0.75rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);

    @media (width <= 48rem) {
    padding: 0 0.625rem 0.625rem;
    gap: var(--space-1-5);
    & > div[style*="grid-template-columns: 1fr 1fr"],
    & > div[style*="grid-template-columns:1fr 1fr"] {
      display: flex !important;
      flex-direction: column !important;
      gap: 0.75rem !important;
    }
  }
}

.page-sections--top    { padding-top: 0.75rem; }
.page-sections--full   { height: calc(100vh - 0.75rem); overflow: hidden; }
.page-sections--gap-sm { gap: 0.375rem; }

.section-title {
  font-size: 0.75rem;
  font-weight: 200;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  &--flex   { display: flex; align-items: center; gap: var(--space-2); }
  &--spread { display: flex; align-items: center; justify-content: space-between; }
}

.flex-fill   { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.scroll-fill { flex: 1; min-height: 0; overflow-y: auto; }

/* ── Wallet label badges ─────────────────────────────────────────────── */

.wallet-label {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.0625rem 0.375rem;
  border-radius: 0.25rem;
  vertical-align: middle;
  white-space: nowrap;
  background: var(--color-bg-secondary);
  color: var(--color-text-placeholder);
  border: var(--border-subtle);
}

/* ── Favourite star ──────────────────────────────────────────────────── */

.fav-star {
  cursor: pointer;
  font-size: 1.125rem;
  color: var(--color-text-placeholder);
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  vertical-align: middle;
  user-select: none;
  line-height: 1;
  &:hover { color: var(--color-warning); }
  &.active {
    color: var(--color-warning);
    opacity: 1;
  }
}

tr:hover .fav-star { opacity: 1; }

.fav-star-header {
  cursor: pointer;
  font-size: 1.375rem;
  color: var(--color-text-placeholder);
  transition: color 0.15s;
  vertical-align: middle;
  user-select: none;
  line-height: 1;
  margin-left: 0.25rem;
  &:hover { color: var(--color-warning); }
  &.active {
    color: var(--color-warning);
  }
}

/* ── Search results dropdown ──────────────────────────────────────────── */

.search-results-dropdown {
  top: calc(100% + 0.3125rem);
  left: 0;
  right: 0;
  background-color: var(--table_bg);
  border: var(--border-table);
  border-radius: var(--radius-lg);
  box-shadow: 0 0.625rem 1.5625rem var(--color-shadow);
  z-index: 1000;
  max-height: 21.875rem;
  overflow-y: auto;
  padding-bottom: 0.25rem;
  &.active { display: block; }
}

.search-item {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: 0.5rem 0.9375rem;
  border-bottom: var(--border-hairline) solid var(--table_border);
  cursor: pointer;
  transition: background 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  &:last-child { border-bottom: none; }
  &:hover { background-color: var(--table_hover_bg); }
  .token-symbol {
    font-weight: 600;
    font-size: var(--fs-md);
    color: var(--table_text_color);
    flex-shrink: 0;
  }
  .token-name {
    font-size: var(--fs-base);
    color: var(--color-text-placeholder);
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .token-address {
    font-size: var(--fs-sm);
    color: var(--color-text-placeholder);
    margin-left: auto;
    flex-shrink: 0;
  }
}

.search-item-logo {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.search-item-logo-fallback {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-icon-fallback-bg);
  color: var(--color-icon-fallback-text);
  font-size: var(--fs-xs);
  font-weight: bold;
}
.search-item-logo-fallback.hidden { display: none; }

/* ── Sparkline ───────────────────────────────────────────────────────── */

.sparkline-header-icon {
  font-size: 1rem;
  color: var(--color-text-placeholder);
  opacity: 0.6;
}

.sparkline-cell {
  padding: 0.25rem !important;
  text-align: center !important;
}

.sparkline-svg {
  width: 4.375rem;
  height: 1.5rem;
  display: block;
  margin: 0 auto;
}

.funding-spark-cell {
  padding: 0.25rem !important;
  text-align: center !important;
}

.funding-spark-svg {
  width: 6.25rem;
  height: 1.5rem;
  display: block;
  margin: 0 auto;
}

/* ── Chart with legend overlay ───────────────────────────────────────── */

.chart-with-legend {
  position: relative;
  height: 13.75rem;
  min-height: 13.75rem;
  max-height: 13.75rem;
  overflow: hidden;
  flex-shrink: 0;
    @media (width <= 48rem) {
    height: 11.25rem;
    min-height: 11.25rem;
    max-height: 11.25rem;
  }
}

/* ── Value-cell variants ─────────────────────────────────────────────── */

.value-cell--bold  { font-weight: 600 !important; }
.value-cell--sm    { font-size: var(--fs-xs) !important; }
.value-cell--muted { color: var(--color-text-placeholder) !important; }

/* ── Icon size helpers ───────────────────────────────────────────────── */

.icon-13 { font-size: 0.8125rem; }
.icon-14 { font-size: 0.875rem; }
.icon-15 { font-size: 0.9375rem; }
.icon-16 { font-size: 1rem; }
.icon-18 { font-size: 1.125rem; }

/* ── General utilities ───────────────────────────────────────────────── */

.fw-600        { font-weight: 600; }
.text-muted-sm { font-size: var(--fs-sm); color: var(--color-text-placeholder); }
.text-muted-xs { font-size: var(--fs-xs); color: var(--color-text-placeholder); }
.clickable     { cursor: pointer; }
.sub-heading   { font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--space-2); }
.flex-between  { display: flex; align-items: center; justify-content: space-between; }
.gap-4  { gap: var(--space-1); }
.gap-8  { gap: var(--space-2); }
.gap-12 { gap: var(--space-3); }

.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.col-center { text-align: center; }
.col-right  { text-align: right; }
.mono       { font-family: monospace; font-size: 0.75rem; }

.sr-only {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  padding: 0;
  margin: -0.0625rem;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   Pagination (merged from pagination.css)
   ══════════════════════════════════════════════════════════════════════════ */

.pagination {
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  gap: var(--space-1);
  margin: 0;
  user-select: none;
  -webkit-user-select: none;
}

.pagination a {
    border: var(--border-table);
    border-radius: 0.25rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.5rem;
    padding: 0 0.5rem;
    text-decoration: none;
    background-color: var(--table_bg);
    color: var(--table_text_color);
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
    min-width: 1.5rem;
    font-size: var(--fs-sm);
    box-sizing: border-box;
    cursor: pointer;
}

.pagination a:hover:not(.active):not(.disabled) {
    background-color: var(--color-hover-secondary);
    border-color: var(--color-hover-primary);
}

.pagination a.active {
    background-color: var(--color-hover-primary);
    color: #fff;
    border-color: var(--color-hover-primary);
    cursor: default;
    font-weight: 600;
}

.pagination a.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   Calendar (merged from calendar.css)
   ══════════════════════════════════════════════════════════════════════════ */

.calendar-container {
    width: 100%;
    background: var(--table_bg);
    border-radius: 0.5rem;
    overflow: hidden;
}

.calendar-scroll-container {
    max-height: 16.25rem;
    overflow-y: auto;
    padding-right: 0.3125rem;
    /* scrollbar via .scrollbar-thin utility on the element */
}

.calendar-month {
    padding-bottom: 0.9375rem;
    border-bottom: var(--border-hairline) solid var(--table_border);
    margin-bottom: 0.9375rem;
}

.calendar-month:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.calendar-month-title {
    padding: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--table_text_color);
    text-align: left;
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.0625rem;
    opacity: 0.9;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-1);
    padding: 0 0.5rem;
}

.calendar-weekday {
    text-align: center;
    font-size: 0.625rem;
    color: var(--color-muted);
    padding-bottom: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.6875rem;
    border-radius: 0.375rem;
    color: var(--table_text_color);
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.calendar-day:hover {
    background: var(--color-accent-10);
    color: var(--color-accent);
}

.calendar-day.today {
    border: var(--border-hairline) solid var(--color-accent);
    color: var(--color-accent);
    font-weight: 600;
}

.calendar-day.future {
    color: var(--color-muted);
    cursor: default;
    opacity: 0.4;
}

.calendar-day.selected {
    background: var(--color-accent) !important;
    color: white;
    border-color: var(--color-accent);
    font-weight: 600;
}

.calendar-day.in-range {
    background: var(--color-accent-20);
    border-radius: 0;
}

.calendar-day.in-range:hover {
    background: var(--color-accent-30);
}

#time_modal {
    width: 20rem;
    max-height: 90vh;
    overflow-y: auto;
    background-color: var(--table_bg);
}

/* ══════════════════════════════════════════════════════════════════════════
   Filters (merged from filters.css)
   ══════════════════════════════════════════════════════════════════════════ */

.icon-for-filter:hover, .icon-for-filter:active {
    color: var(--color-accent);
}

.icon-for-filter{
    font-size: 0.875rem;
    position: relative;
    cursor: pointer;
    color: var(--color-text-placeholder);
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    transition-duration: .6s;
    outline: none;
    border: none;
    margin: 0;
}

.icon-for-filter .icon {
    font-size: 0.875rem;
}

.modal-container {
    position: relative;
    display: inline-block;
}

.sortable-filter-header {
    position: relative;
    z-index: 10;
}

/* extends .modal-card base from base.css — bg, border, radius, shadow */
.filter-modal-container {
    display: none;
    padding: 1.5rem;
    position: absolute;
    top: calc(100% + 0.3125rem);
    right: 0;
    z-index: 9999;
    width: 18.75rem;
    max-width: calc(100vw - 2.5rem);
    flex-direction: column;
    border-radius: var(--radius-lg);
}

.filter-modal-container.active {
    display: flex;
}

/* Exchange filter modal on /perp/tokens — styled to match the page-size
 * custom-dropdown look: tight padding, flex rows with logo + label,
 * rounded indigo pill for the selected item, no per-item borders. */
#cex_ex_modal {
    padding: var(--space-1);
    width: max-content;
    max-width: 16.25rem;
}
.ex-filter-options {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.ex-filter-options .btn-pill {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    justify-content: flex-start;
    text-align: left;
    padding: 0.4375rem 0.375rem;
    font-size: 0.8125rem;
    font-weight: 400;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-primary);
    white-space: nowrap;
    transition: background 0.1s;
}
.ex-filter-options .btn-pill img {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ex-filter-options .btn-pill:hover {
    background: var(--indigo-dim);
    border-color: transparent;
    color: var(--color-text-primary);
}
.ex-filter-options .btn-pill.active {
    background: var(--indigo-border);
    color: var(--color-indigo-light);
    font-weight: 600;
    border-color: transparent;
}

.price-input-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 0.9375rem;
  color: var(--color-text-placeholder);
  width: 100%;
}

.price-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.price-field label {
    font-size: var(--fs-sm);
    margin-bottom: var(--space-2);
    color: var(--table_text_color);
    text-transform: uppercase;
    font-weight: 600;
}

/* extends .form-input base from base.css — border, radius, bg, color, font */
.price-field input, .date-input, .address-input {
    width: 100%;
    height: 2rem;
    font-size: var(--fs-sm);
    border-radius: var(--radius-md);
    border: var(--border-table);
    background: var(--background);
    color: var(--table_text_color);
    padding: 0 0.625rem;
}

.price-field input, .date-input {
    text-align: center;
}

.price-field input:focus {
    outline: none;
    border: var(--border-hairline) solid var(--color-hover-primary);
    box-shadow: 0 0 0 0.125rem hsl(from var(--color-focus) h s l / 0.2);
}

.price-field input::-webkit-outer-spin-button,
.price-field input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.modal-footer {
    margin-top: var(--space-1-5);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-1-5);
}

.filter-modal-container .calendar-container {
    margin-bottom: var(--space-1-5);
}

.token-modal-search-wrapper {
    padding: 0 1rem 0.75rem 1rem;
    position: relative;
    border-bottom: var(--border-hairline) solid var(--table_border);
}

.token-modal-search-wrapper .search-icon {
    position: absolute;
    left: 1.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-placeholder);
    font-size: 1.125rem;
    margin-top: -0.375rem;
}

/* extends shared search input base from base.css */
.token-search-input {
    background-color: var(--background);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem 0.5rem 2.5rem;
    font-size: var(--fs-sm);
}
.token-search-input:focus {
    border-color: var(--color-focus);
}

.token-section-header {
    padding: 1rem 1rem 0.5rem 1rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-text-placeholder);
    letter-spacing: 0.0625rem;
}

.token-list {
    display: flex;
    flex-direction: column;
}

.token-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.token-item:hover {
    background-color: var(--table_hover_bg);
}

.token-item-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.token-icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: var(--color-border-hr);
}

.token-icon-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-icon-fallback-bg);
    color: var(--color-icon-fallback-text);
    font-size: var(--fs-xs);
    font-weight: bold;
}

.token-address-muted {
    font-size: var(--fs-xs);
    color: var(--color-text-placeholder);
}

.token-list-empty, .empty-state {
    padding: 1.25rem;
    text-align: center;
    color: var(--color-text-placeholder);
    font-size: var(--fs-base);
}
.empty-state-lg {
    padding: 2.5rem;
}

.token-info {
    display: flex;
    flex-direction: column;
}

.token-info .token-symbol {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--table_text_color);
}

.token-info .token-name-muted {
    font-size: var(--fs-xs);
    color: var(--color-text-placeholder);
}

.token-item-right {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    text-align: right;
}

.token-price {
    font-size: var(--fs-sm);
    color: var(--table_text_color);
}

.token-change {
    font-size: var(--fs-xs);
    padding: var(--pad-badge);
    border-radius: var(--radius-sm);
    min-width: 3.75rem;
    text-align: center;
}

.token-change.up {
    color: var(--color-positive);
    background-color: var(--positive-dim);
}

.token-change.down {
    color: var(--color-negative);
    background-color: var(--negative-dim);
}