/* ==========================================================================
   Learning Heroes — Design & UX Override Layer
   --------------------------------------------------------------------------
   Purely presentational refinements loaded AFTER the compiled bundle CSS.
   No selectors here alter behavior; everything is visual polish:
   typography, depth, motion, focus visibility, scrollbars and theming.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Global atmosphere — deeper canvas with a subtle brand aurora
   -------------------------------------------------------------------------- */
:root {
  --lh-bg-deep: #141a26;
  --lh-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lh-ring: 0 0 0 3px rgba(var(--primary-rgb, 255, 25, 102), 0.35);
  color-scheme: dark;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--lh-bg-deep);
  background-image:
    radial-gradient(1100px 500px at 85% -10%, rgba(var(--primary-rgb, 255, 25, 102), 0.08), transparent 60%),
    radial-gradient(900px 480px at -10% 110%, rgba(16, 185, 129, 0.05), transparent 55%);
  background-attachment: fixed;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
  letter-spacing: -0.003em;
}

.app {
  background: transparent;
}

/* Brand-tinted text selection */
::selection {
  background: rgba(var(--primary-rgb, 255, 25, 102), 0.35);
  color: #fff;
  text-shadow: none;
}

/* --------------------------------------------------------------------------
   2. Typography refinement
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.dashboard-card h3,
.widget-header h3 {
  letter-spacing: -0.015em;
}

.stat-value,
.current-value,
.value-number,
.dominance-big-value,
.fear-greed-value,
.main-value,
.total-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.stat-label,
.info-label,
.bar-label,
.control-label,
.control-group label {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.72rem;
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   3. Scrollbars — slim, themed, unobtrusive
   -------------------------------------------------------------------------- */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
  transition: background 0.2s var(--lh-ease);
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--primary-rgb, 255, 25, 102), 0.5);
  border: 3px solid transparent;
  background-clip: padding-box;
}

.sidebar-nav::-webkit-scrollbar,
.dashboard-grid::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* --------------------------------------------------------------------------
   4. Keyboard accessibility — elegant brand focus rings
   -------------------------------------------------------------------------- */
:focus {
  outline: none;
}

:focus-visible {
  outline: none;
  box-shadow: var(--lh-ring);
  border-radius: 8px;
  transition: box-shadow 0.15s var(--lh-ease);
}

.nav-item:focus-visible,
.pill:focus-visible,
.chip:focus-visible,
button:focus-visible,
a:focus-visible {
  box-shadow: var(--lh-ring);
}

/* --------------------------------------------------------------------------
   5. Sidebar — glassy depth and livelier navigation
   -------------------------------------------------------------------------- */
.sidebar {
  background: linear-gradient(180deg, rgba(45, 55, 72, 0.92), rgba(26, 32, 44, 0.96));
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 12px 0 40px -24px rgba(0, 0, 0, 0.6);
}

.nav-item {
  transition: background 0.22s var(--lh-ease), color 0.22s var(--lh-ease),
    transform 0.22s var(--lh-ease), box-shadow 0.22s var(--lh-ease);
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.07);
}

.nav-item.active {
  box-shadow: 0 8px 24px -6px rgba(var(--primary-rgb, 255, 25, 102), 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.nav-item.active::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  opacity: 0.9;
}

.sidebar.collapsed .nav-item.active::before {
  display: none;
}

/* --------------------------------------------------------------------------
   6. Cards & surfaces — crisper borders, top highlight, gentle lift
   -------------------------------------------------------------------------- */
.dashboard-card,
.surface,
.surface-alt,
.stat-card,
.cmc-widget,
.btc-reserves-widget,
.etf-flows-widget,
.etf-evolution-widget,
.dominance-altseason-widget,
.altcoin-season-widget,
.fg-panel,
.lh-index-panel,
.protocol-widget,
.etf-chart-container,
.staking-rewards-vertical,
.fear-greed-card,
.login-card,
.login-card-expanded {
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 44px rgba(0, 0, 0, 0.32);
  transition: transform 0.28s var(--lh-ease), box-shadow 0.28s var(--lh-ease),
    border-color 0.28s var(--lh-ease);
}

.dashboard-card:hover,
.protocol-widget:hover,
.stat-card:hover {
  border-color: rgba(var(--primary-rgb, 255, 25, 102), 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 54px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(var(--primary-rgb, 255, 25, 102), 0.08);
}

.stat-card:hover {
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   7. Buttons, pills, chips — tactile press feedback & smoother states
   -------------------------------------------------------------------------- */
.primary-btn,
.ghost-btn,
.pill,
.chip,
.etf-chip,
.range-btn,
.page-btn,
.filters-btn,
.compare-btn,
.refresh-btn,
.refresh-button,
.reset-button,
.reset-zoom-btn,
.retry-button,
.selector-btn,
.icon-btn,
.external-link-btn,
.login-submit,
.login-button,
.login-toggle-button,
.collapse-btn,
.mobile-menu-btn,
.carousel-arrow,
.ver-mas {
  transition: transform 0.18s var(--lh-ease), box-shadow 0.22s var(--lh-ease),
    background 0.22s var(--lh-ease), border-color 0.22s var(--lh-ease),
    filter 0.22s var(--lh-ease), color 0.22s var(--lh-ease);
  will-change: transform;
}

.primary-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px -8px rgba(var(--primary-rgb, 255, 25, 102), 0.6);
  filter: brightness(1.07);
}

.primary-btn:active,
.ghost-btn:active,
.pill:active,
.chip:active,
.login-submit:active,
.refresh-button:active,
.page-btn:active,
.range-btn:active {
  transform: translateY(0) scale(0.97);
}

.pill:hover,
.chip:hover,
.etf-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.5);
}

.pill.active,
.etf-chip.active,
.range-btn.active {
  box-shadow: 0 10px 26px -8px rgba(var(--primary-rgb, 255, 25, 102), 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

button:disabled,
.page-btn:disabled,
.login-submit:disabled,
.login-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  filter: saturate(0.6);
}

/* --------------------------------------------------------------------------
   8. Form controls — confident focus glow
   -------------------------------------------------------------------------- */
.search-input,
.form-group input,
.login-input-group input,
.etf-select,
.etf-selector,
.token-select,
.timeframe-select,
.range-input {
  transition: border-color 0.2s var(--lh-ease), box-shadow 0.2s var(--lh-ease),
    background 0.2s var(--lh-ease);
}

.search-input:focus,
.form-group input:focus,
.login-input-group input:focus,
.etf-select:focus,
.etf-selector:focus,
.token-select:focus,
.timeframe-select:focus,
.range-input:focus {
  border-color: rgba(var(--primary-rgb, 255, 25, 102), 0.65);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 255, 25, 102), 0.18),
    0 0 24px -6px rgba(var(--primary-rgb, 255, 25, 102), 0.35);
  background: rgba(0, 0, 0, 0.4);
}

.search-input:hover:not(:focus),
.login-input-group input:hover:not(:focus) {
  border-color: rgba(255, 255, 255, 0.22);
}

/* --------------------------------------------------------------------------
   9. Tables — calmer rows, clearer hover, refined header
   -------------------------------------------------------------------------- */
.explorer-table th,
.lp-table th {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.explorer-table tbody tr,
.lp-table-row {
  transition: background 0.18s var(--lh-ease), transform 0.18s var(--lh-ease);
}

.explorer-table tbody tr:hover,
.lp-table-row:hover,
.lp-table-row.clickable-row:hover {
  background: rgba(var(--primary-rgb, 255, 25, 102), 0.06);
}

.lp-item {
  transition: transform 0.22s var(--lh-ease), box-shadow 0.22s var(--lh-ease),
    border-color 0.22s var(--lh-ease);
}

.lp-item:hover {
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   10. Charts & tooltips — softer grid, glass tooltips
   -------------------------------------------------------------------------- */
.recharts-cartesian-grid line {
  stroke: rgba(255, 255, 255, 0.06);
}

.recharts-cartesian-axis-tick-value {
  fill: var(--text-muted);
  font-size: 0.72rem;
}

.custom-tooltip,
.etf-tooltip,
.etf-evolution-tooltip,
.donut-tooltip {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* --------------------------------------------------------------------------
   11. Loading & micro-interactions
   -------------------------------------------------------------------------- */
.loading-spinner {
  border-top-color: var(--primary) !important;
  box-shadow: 0 0 24px -4px rgba(var(--primary-rgb, 255, 25, 102), 0.4);
}

@keyframes lh-fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn,
.dashboard-card,
.stat-card,
.surface {
  animation: lh-fade-up 0.5s var(--lh-ease) both;
}

.vertical-bar,
.bar-fill,
.inflation-segment,
.reward-segment,
.stack-segment,
.dominance-stacked-segment {
  transition: height 0.4s var(--lh-ease), width 0.4s var(--lh-ease),
    filter 0.2s var(--lh-ease), opacity 0.2s var(--lh-ease);
}

.vertical-bar:hover,
.bar-item:hover .bar-fill {
  filter: brightness(1.15) saturate(1.1);
}

/* Progress & gauges get a soft brand glow */
.progress-indicator {
  box-shadow: 0 0 16px rgba(var(--primary-rgb, 255, 25, 102), 0.45);
}

/* Carousel arrows float above cards */
.carousel-arrow:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 26px -8px rgba(var(--primary-rgb, 255, 25, 102), 0.5);
}

/* External links & pagination hover lift */
.external-link-btn:hover,
.page-btn:not(:disabled):hover {
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   12. Login page — richer ambience
   -------------------------------------------------------------------------- */
.login-page,
.login-background {
  background:
    radial-gradient(900px 480px at 20% 10%, rgba(var(--primary-rgb, 255, 25, 102), 0.14), transparent 60%),
    radial-gradient(760px 420px at 85% 85%, rgba(87, 33, 187, 0.12), transparent 55%),
    var(--lh-bg-deep);
}

.login-card,
.login-card-expanded {
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
}

/* --------------------------------------------------------------------------
   13. Motion preferences — respect users who reduce motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   14. Small screens — tighter, calmer hierarchy
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .dashboard-card,
  .surface {
    border-radius: 16px;
  }

  .stat-label,
  .info-label,
  .control-label {
    font-size: 0.66rem;
  }
}

/* ==========================================================================
   15. Density rebalance — counters the "everything feels zoomed" effect
       without touching any layout logic
   ========================================================================== */
@media (min-width: 769px) {
  html {
    font-size: 15px;
  }
}

@media (min-width: 769px) {
  .main-content {
    padding: 1.5rem 1.75rem;
  }

  .liquidity-pools,
  .lp-explorer,
  .markets,
  .defi-yield {
    padding: clamp(0.75rem, 1.5vw, 1.5rem);
  }

  .lp-hero,
  .markets-hero,
  .defi-hero {
    padding: clamp(1.25rem, 2vw, 1.9rem);
  }

  .lp-hero h1,
  .markets-hero h1,
  .defi-hero h1,
  .liquidity-pools-header h1,
  .defi-yield-header h1 {
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  }
}

/* ==========================================================================
   16. Table repair — metrics readable at every breakpoint, aligned numbers
   --------------------------------------------------------------------------
   The bundle shrinks .metric-value to 0.55rem below 1200px (headers stay
   bigger than the values, so APR/TVL look broken). Restore a sane scale.
   ========================================================================== */
@media (max-width: 1200px) {
  .metric-value {
    font-size: 0.88rem;
  }

  .metric-value.secondary {
    font-size: 0.75rem;
  }
}

@media (max-width: 768px) {
  .metric-value {
    font-size: 0.82rem;
  }

  .metric-value.secondary {
    font-size: 0.72rem;
  }
}

@media (max-width: 480px) {
  .metric-value {
    font-size: 0.8rem;
  }

  .metric-value.secondary {
    font-size: 0.7rem;
  }
}

/* Numeric columns read best right-aligned with tabular figures.
   LP table column order: # | Par/DEX | APR | TVL | Volume | Vol/TVL */
.lp-table th:nth-child(3),
.lp-table th:nth-child(4),
.lp-table th:nth-child(5),
.lp-table th:nth-child(6),
.lp-table td:nth-child(3),
.lp-table td:nth-child(4),
.lp-table td:nth-child(5),
.lp-table td:nth-child(6) {
  text-align: right;
}

.lp-table th:nth-child(2),
.lp-table td:nth-child(2) {
  text-align: left;
}

.lp-table td .metric-value {
  font-variant-numeric: tabular-nums;
  width: 100%;
}

.lp-table th {
  white-space: nowrap;
  vertical-align: bottom;
  padding-bottom: 0.7rem;
}

.lp-table td {
  vertical-align: middle;
}

/* Hovering a <tr> with transform detaches it from the table grid and makes
   columns look misaligned — keep the highlight, drop the lift */
.lp-table-row:hover,
.lp-table-row.clickable-row:hover,
.explorer-table tbody tr:hover {
  transform: none;
}

.lp-table-row.clickable-row:hover {
  box-shadow: inset 3px 0 0 rgba(var(--primary-rgb, 255, 25, 102), 0.7);
  background: rgba(var(--primary-rgb, 255, 25, 102), 0.07);
}

/* Explorer (markets) table — solid sticky header, aligned numerics */
.explorer-table th {
  background: rgba(20, 26, 38, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.explorer-table .price-cell,
.explorer-table .apr-cell,
.explorer-table .tvl-cell,
.explorer-table .volume-cell,
.explorer-table .vol-tvl-cell,
.explorer-table .change-percent {
  font-variant-numeric: tabular-nums;
}

/* Positive/negative change chips keep a steady width so rows don't jump */
.change-percent {
  display: inline-block;
  min-width: 4.5ch;
  text-align: right;
}

/* Tier badge next to the pair name stays on one line */
.pair-cell,
.pair-info {
  min-width: 0;
}

.tier-badge {
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   17. Table containers — let tables breathe, keep scrolling discoverable
   The bundle caps the LP table at 500px with HIDDEN scrollbars, so rows
   are silently cut off. Raise the cap and show a slim scrollbar.
   -------------------------------------------------------------------------- */
.lp-table-container {
  max-height: 72vh;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

.lp-table-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  display: block;
}

.lp-table-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}

.lp-table-container::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--primary-rgb, 255, 25, 102), 0.5);
}

/* Explorer table (LP explorer / markets): numeric columns 5-8 right-aligned,
   actions centered. Column order:
   Pair | Chain | DEX | Tier | TVL | APY 24h | Volume 24h | Vol/TVL | Actions */
.explorer-table th:nth-child(5),
.explorer-table th:nth-child(6),
.explorer-table th:nth-child(7),
.explorer-table th:nth-child(8),
.explorer-table td:nth-child(5),
.explorer-table td:nth-child(6),
.explorer-table td:nth-child(7),
.explorer-table td:nth-child(8) {
  text-align: right;
}

.explorer-table th:nth-child(4),
.explorer-table td:nth-child(4),
.explorer-table th:nth-child(9),
.explorer-table td:nth-child(9) {
  text-align: center;
}

.explorer-table td {
  white-space: nowrap;
  vertical-align: middle;
}

.explorer-table .compare-btn {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   18. LP compact tables — make # and Par/DEX actually readable
   In the dashboard panels (~570px) the pair column collapsed to "US…".
   Rebalance column widths and slim down the tier badge and icons.
   CRITICAL FIX: the bundle ships .pair-cell{display:flex} as a BASE rule
   (meant for the explorer table's inner div). Applied to <td class="pair-cell">
   it removes the cell from the table grid and every column collapses/shifts.
   Restore table-cell display ONLY for the td variant.
   -------------------------------------------------------------------------- */
.lp-table td.pair-cell {
  display: table-cell;
}

.lp-table th:first-child,
.lp-table td:first-child {
  width: 5%;
}

.lp-table th:nth-child(2),
.lp-table td:nth-child(2) {
  width: 34%;
}

.lp-table th:nth-child(3),
.lp-table td:nth-child(3) {
  width: 15%;
}

.lp-table th:nth-child(4),
.lp-table td:nth-child(4),
.lp-table th:nth-child(5),
.lp-table td:nth-child(5) {
  width: 15.5%;
}

.lp-table th:nth-child(6),
.lp-table td:nth-child(6) {
  width: 15%;
}

/* Slimmer rank, keeps brand color */
.lp-table .rank-cell .idtext {
  font-size: 0.8rem;
  font-weight: 700;
}

/* Compact pair cell: smaller icons, tighter rhythm */
.lp-table .pair-info {
  gap: 0.45rem;
}

.lp-table .pair-icons {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-right: 0;
}

.lp-table .pair-icons .blockchain-icon {
  width: 24px;
  height: 24px;
}

.lp-table .pair-icons .dex-icon {
  width: 12px;
  height: 12px;
  border-width: 1px;
  bottom: -1px;
  right: -1px;
}

.lp-table .pair-name {
  font-size: 0.82rem;
  letter-spacing: -0.01em;
}

/* Tier badge becomes a quiet caption instead of a chunky chip */
.lp-table .tier-badge {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 5px;
  padding: 0.1rem 0.3rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

@media (max-width: 480px) {
  .lp-table .pair-name {
    font-size: 0.78rem;
  }

  .lp-table .tier-badge {
    font-size: 0.6rem;
  }
}

/* --------------------------------------------------------------------------
   19. Sidebar collapse icon — replace garbled glyph with a real chevron
   The bundle ships a double-encoded character; hide it and draw a clean
   state-aware chevron: open = points left (collapse), collapsed = right.
   -------------------------------------------------------------------------- */
.collapse-icon {
  font-size: 0 !important;
  line-height: 0;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  border-radius: 1px;
  transform: rotate(-135deg) translate(-1px, 1px);
  transition: transform 0.3s var(--lh-ease);
  display: block;
}

.collapse-icon.collapsed {
  transform: rotate(45deg) translate(-1px, 1px);
}

.collapse-btn:hover .collapse-icon {
  color: #fff;
}

/* --------------------------------------------------------------------------
   20. Dominance & Altcoin Season — equal card heights, balanced content
   The grid uses align-items:start, so stretch just this widget pair to the
   row height and distribute the dominance content to fill its card.
   -------------------------------------------------------------------------- */
.col-6:has(> .altcoin-season-widget),
.col-6:has(> .dominance-altseason-widget) {
  align-self: stretch;
}

.col-6 > .altcoin-season-widget,
.col-6 > .dominance-altseason-widget {
  height: 100%;
  box-sizing: border-box;
}

.dominance-altseason-widget {
  justify-content: space-evenly;
  align-content: stretch;
}

.dominance-altseason-widget .dominance-legend-row,
.dominance-altseason-widget .dominance-values-row {
  margin-bottom: 0;
}

.dominance-altseason-widget .dominance-stacked-bar {
  margin-bottom: 0;
}

.altcoin-season-widget {
  display: flex;
  flex-direction: column;
}

.altcoin-season-widget .widget-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.altcoin-season-widget .season-display {
  flex: 1;
  justify-content: center;
  margin-bottom: 1rem;
}

/* Same balance for the Fear & Greed panel pair */
.fg-panel .widget-columns .column > * {
  height: 100%;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   21. Mobile overflow containment
   Grid items default to min-width:auto, so a wide child (600px table,
   chart wrappers) blows out the whole page on small screens. Let items
   shrink and keep scrolling inside the proper containers.
   -------------------------------------------------------------------------- */
.lp-grid > *,
.markets-grid > *,
.defi-grid > *,
.widget-columns > * {
  min-width: 0;
}

/* Error/empty states never overflow narrow screens */
.loading-container,
.error-container,
.empty-state,
.loading-state,
.error-state {
  max-width: 100%;
  box-sizing: border-box;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.error-container p,
.loading-container p {
  overflow-wrap: break-word;
}

@media (max-width: 480px) {
  .liquidity-pools,
  .lp-explorer,
  .markets,
  .defi-yield {
    width: 100%;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    box-sizing: border-box;
  }

  .lp-hero,
  .markets-hero,
  .defi-hero {
    padding: 1.1rem;
  }

  /* Keep panel headers on one row without clipping */
  .ver-mas {
    padding: 0.4rem 0.65rem;
    font-size: 0.85rem;
  }
}

/* --------------------------------------------------------------------------
   22. LP panel tables — show the full figures, scroll sideways instead
   Section 18 fits six columns into a ~570px panel with percentage widths.
   The bundle then clips whatever overflows:
     .lp-table td   { white-space: nowrap; text-overflow: ellipsis; overflow: hidden }
     .metric-value  { white-space: nowrap; text-overflow: ellipsis; overflow: hidden }
   So real values arrive truncated — "$121.1…", "$921.9…", "27806…", and rank
   10 renders as "1…". On a data product an unreadable TVL is a broken cell.
   Fix: let the table take the width its content needs and scroll the container
   horizontally. .lp-table-container already has overflow:auto (bundle) and a
   slim scrollbar (section 17), so it only needed a table wider than the panel.
   -------------------------------------------------------------------------- */
.lp-table {
  min-width: 680px;
  table-layout: auto;
}

/* Neutralise section 18's percentage widths — they were a workaround for the
   clipping this section removes. Same selectors, so later-wins applies. */
.lp-table th:first-child,
.lp-table td:first-child {
  width: auto;
  min-width: 2.5rem;
}

.lp-table th:nth-child(2),
.lp-table td:nth-child(2) {
  width: auto;
  min-width: 200px;
}

.lp-table th:nth-child(3),
.lp-table td:nth-child(3),
.lp-table th:nth-child(4),
.lp-table td:nth-child(4),
.lp-table th:nth-child(5),
.lp-table td:nth-child(5),
.lp-table th:nth-child(6),
.lp-table td:nth-child(6) {
  width: auto;
  min-width: 92px;
}

/* Stop clipping: nowrap stays (it is what forces the horizontal scroll), but
   the ellipsis and hidden overflow that ate the digits go. */
.lp-table td,
.lp-table td .metric-value,
.lp-table td.pair-cell {
  overflow: visible;
  text-overflow: clip;
}

/* The horizontal scrollbar must be discoverable, not just present. */
.lp-table-container {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.lp-table-container::-webkit-scrollbar:horizontal {
  height: 8px;
  display: block;
}

/* --------------------------------------------------------------------------
   23. Stablecoins / Blue Chips — stack them when six columns cannot fit
   Section 22 stops the clipping, but two col-6 panels beside a 280px sidebar
   leave each table ~570px for a 680px minimum, so Volume and Vol/TVL sit off
   screen behind a scrollbar the reader has to discover. Full width is the real
   fix: at 1600px each panel then gets ~1230px and all six columns are visible
   at once. Side by side is kept only where it genuinely fits.
   `1 / -1` rather than `span 12`: the bundle redefines .lp-grid at narrower
   breakpoints (8 columns, then auto-fit), and only `1 / -1` spans them all.
   -------------------------------------------------------------------------- */
@media (max-width: 1800px) {
  .lp-grid > .col-6 {
    grid-column: 1 / -1;
  }
}