/* ============================================
   DEX Container Customization - FINAL v6 (Pixel-Perfect)
   Slippage buttons exactly match input width + tiny 3% downscale
   + fixed cage width so AGENTIC label/rate cannot widen the box
   ============================================ */

/* Main DEX Container — fixed width (was min 464 / max 580 → content grew cage) */
.dex-container {
  width: 464px !important;
  max-width: 464px !important;
  min-width: 464px !important;
  margin: 25px auto 0 !important;
  margin-left: calc(50% - 232px + 0.52px) !important;
  padding: 1rem !important;
  transform-origin: center top !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
}

/* DEX Header - unchanged */
.dex-header {
  margin-bottom: 0.75rem !important;
  padding-bottom: 0.25rem !important;
}
.dex-header h1 { font-size: 1.8rem !important; margin-bottom: 0.25rem !important; }
.dex-header p { font-size: 1rem !important; margin-top: 0.25rem !important; }

/* Slippage Buttons Parent */
.dex-tabs {
  display: flex !important;
  gap: 16px !important;
  justify-content: center !important;
  margin-bottom: 1rem !important;
  width: 100% !important;
  padding: 0 8px !important;
  box-sizing: border-box !important;
}

/* Slippage Buttons - perfect alignment + exact 3% downscale */
.tab-btn {
  flex: 1 !important;
  min-width: 0 !important;
  max-width: none !important;
  border-radius: 12px !important;
  padding: 0.65rem 0.5rem !important;
  font-size: inherit !important;
  white-space: nowrap !important;
  text-align: center !important;

  /* The magic 3% reduction you wanted */
  transform: scale(0.948) !important;
  transform-origin: center !important;
}

/* This counter-scales the container so the gap stays exactly 16px and edges stay perfect */
.dex-tabs {
  gap: 17.2px !important; /* 16px × 1/0.97 to compensate for the child scale */
}

/* All your other compact styling - untouched */
.swap-container { padding: 0.8rem !important; gap: 0.75rem !important; }
.token-input { margin-bottom: 0.5rem !important; padding: 0.6rem !important; }
.token-header { margin-bottom: 0.5rem !important; padding-bottom: 0.25rem !important; }
.swap-arrow { margin: 0.3rem 0 !important; font-size: 1.5rem !important; padding: 0.3rem !important; }
.swap-info { margin-top: 0.5rem !important; padding: 0.5rem 0.6rem !important; gap: 0.4rem !important; }
.info-row { padding: 0.25rem 0 !important; font-size: 0.85rem !important; margin-bottom: 0.2rem !important; }
.swap-btn { margin-top: 0.75rem !important; padding: 0.8rem 1.5rem !important; font-size: 0.95rem !important; }
.amount-input { font-size: 1.5rem !important; padding: 0.75rem !important; }
.token-select { padding: 0.75rem 1rem !important; font-size: 0.9rem !important; }