/**
 * ===============================================================================================
 * LOFI SWAP MODAL - FINAL POLISH & STANDARDIZATION
 * ===============================================================================================
 * 
 * This file provides the final layer of polish to ensure a cohesive, professional,
 * and premium user experience across the entire swap modal.
 * 
 * Key Improvements:
 * - Standardized spacing system
 * - Consistent color palette
 * - Typography hierarchy
 * - Premium visual effects
 * - Perfect alignment
 * - Brand consistency
 * 
 * ===============================================================================================
 */

/* ===============================================================================================
 * CSS CUSTOM PROPERTIES - DESIGN SYSTEM
 * ===============================================================================================
 */

:root {
  /* LOFI Brand Colors */
  --lofi-primary: #4F76FF;
  --lofi-primary-dark: #3a5ed8;
  --lofi-primary-light: #6b8aff;
  --lofi-accent: #a8b8ed;
  --lofi-accent-light: #c0cef5;
  --lofi-accent-dark: #8898cd;
  
  /* Background Colors */
  --lofi-bg-primary: #1a1d3e;
  --lofi-bg-secondary: #2a2d5e;
  --lofi-bg-tertiary: rgba(42, 45, 94, 0.9);
  --lofi-bg-overlay: rgba(0, 0, 0, 0.8);
  
  /* Text Colors */
  --lofi-text-primary: #ffffff;
  --lofi-text-secondary: #a8b8ed;
  --lofi-text-muted: #8898cd;
  --lofi-text-dim: #5568a0;
  
  /* Status Colors */
  --lofi-success: #10b981;
  --lofi-warning: #ffaa00;
  --lofi-error: #ff4444;
  
  /* Spacing System */
  --lofi-space-xs: 4px;
  --lofi-space-sm: 8px;
  --lofi-space-md: 16px;
  --lofi-space-lg: 24px;
  --lofi-space-xl: 32px;
  --lofi-space-2xl: 48px;
  
  /* Border Radius */
  --lofi-radius-sm: 6px;
  --lofi-radius-md: 12px;
  --lofi-radius-lg: 16px;
  --lofi-radius-xl: 24px;
  
  /* Typography */
  --lofi-font-primary: 'Gluten', 'Comic Sans MS', cursive;
  --lofi-font-mono: 'Monaco', 'Consolas', monospace;
  
  /* Shadows */
  --lofi-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --lofi-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --lofi-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --lofi-shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.6);
  --lofi-shadow-glow: 0 0 30px rgba(79, 118, 255, 0.3);
  
  /* Transitions */
  --lofi-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --lofi-transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --lofi-transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Z-index System */
  --lofi-z-base: 1;
  --lofi-z-dropdown: 10;
  --lofi-z-sticky: 20;
  --lofi-z-modal: 999999;
  --lofi-z-tooltip: 1000000;
}

/* ===============================================================================================
 * GLOBAL RESETS & STANDARDIZATION
 * ===============================================================================================
 */

/* Ensure consistent box-sizing */
#lofi-swap-modal *,
#lofi-swap-modal *::before,
#lofi-swap-modal *::after {
  box-sizing: border-box;
}

/* Standardize transitions */
#lofi-swap-modal * {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  transition-duration: var(--lofi-transition-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===============================================================================================
 * MODAL OVERLAY REFINEMENTS
 * ===============================================================================================
 */

#lofi-swap-modal {
  background: var(--lofi-bg-overlay);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: var(--lofi-z-modal);
}

/* Premium glass effect */
#lofi-swap-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(79, 118, 255, 0.05) 100%);
  pointer-events: none;
}

/* ===============================================================================================
 * CONTAINER REFINEMENTS
 * ===============================================================================================
 */

.lofi-swap-container {
  background: linear-gradient(135deg, var(--lofi-bg-secondary) 0%, var(--lofi-bg-primary) 100%);
  border: 1px solid rgba(168, 184, 237, 0.2);
  border-radius: var(--lofi-radius-xl);
  box-shadow: var(--lofi-shadow-xl), var(--lofi-shadow-glow);
}

/* Premium container glow */
.lofi-swap-container::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(135deg, 
    rgba(79, 118, 255, 0.2) 0%, 
    transparent 40%, 
    transparent 60%, 
    rgba(168, 184, 237, 0.1) 100%);
  border-radius: var(--lofi-radius-xl);
  opacity: 0.5;
  z-index: -1;
  animation: containerGlow 4s ease-in-out infinite;
}

@keyframes containerGlow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

/* ===============================================================================================
 * HEADER STANDARDIZATION
 * ===============================================================================================
 */

.lofi-modal-header {
  padding: var(--lofi-space-md) var(--lofi-space-lg);
  border-bottom: 1px solid rgba(168, 184, 237, 0.15);
  background: rgba(26, 29, 62, 0.5);
}

.lofi-modal-header h2 {
  font-family: var(--lofi-font-primary);
  font-size: 20px;
  font-weight: 700;
  color: var(--lofi-primary);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.5px;
}

/* LOFI Logo styling */
.lofi-modal-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(79, 118, 255, 0.4));
  animation: logoFloat 3s ease-in-out infinite;
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Close button refinement */
.lofi-modal-close {
  width: 32px;
  height: 32px;
  border-radius: var(--lofi-radius-sm);
  font-size: 20px;
  color: var(--lofi-text-muted);
  background: rgba(168, 184, 237, 0.1);
  border: 1px solid transparent;
  transition: all var(--lofi-transition-base);
}

.lofi-modal-close:hover {
  background: rgba(255, 68, 68, 0.1);
  border-color: rgba(255, 68, 68, 0.3);
  color: var(--lofi-error);
  transform: rotate(90deg) scale(1.1);
}

/* ===============================================================================================
 * CONTENT AREA STANDARDIZATION
 * ===============================================================================================
 */

.lofi-swap-content {
  padding: var(--lofi-space-lg);
}

/* ===============================================================================================
 * TOKEN SECTIONS POLISH
 * ===============================================================================================
 */

.lofi-swap-token-section {
  background: var(--lofi-bg-tertiary);
  border: 1px solid rgba(168, 184, 237, 0.15);
  border-radius: var(--lofi-radius-lg);
  padding: var(--lofi-space-lg);
  margin-bottom: var(--lofi-space-md);
  box-shadow: var(--lofi-shadow-sm);
  position: relative;
  overflow: hidden;
}

/* Token section hover effect */
.lofi-swap-token-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(79, 118, 255, 0.05), 
    transparent);
  transition: left 0.8s ease;
}

.lofi-swap-token-section:hover::before {
  left: 100%;
}

.lofi-swap-token-section:hover {
  border-color: rgba(79, 118, 255, 0.3);
  box-shadow: var(--lofi-shadow-md), 0 0 20px rgba(79, 118, 255, 0.1);
  transform: translateY(-1px);
}

/* Token header standardization */
.lofi-swap-token-header {
  margin-bottom: var(--lofi-space-md);
}

.lofi-swap-token-header label {
  font-family: var(--lofi-font-primary);
  font-size: 14px;
  font-weight: 600;
  color: var(--lofi-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ===============================================================================================
 * BALANCE DISPLAY POLISH
 * ===============================================================================================
 */

.lofi-balance-display {
  font-size: 13px;
  color: var(--lofi-text-muted);
  font-family: var(--lofi-font-mono);
}

.lofi-balance-value {
  color: var(--lofi-primary);
  font-weight: 600;
  font-size: 14px;
}

/* MAX button premium styling */
.lofi-max-button {
  background: linear-gradient(135deg, rgba(79, 118, 255, 0.1) 0%, rgba(79, 118, 255, 0.2) 100%);
  border: 1px solid var(--lofi-primary);
  color: var(--lofi-primary);
  padding: 6px 12px;
  border-radius: var(--lofi-radius-sm);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--lofi-font-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
}

.lofi-max-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.lofi-max-button:hover::before {
  left: 100%;
}

.lofi-max-button:hover {
  background: linear-gradient(135deg, rgba(79, 118, 255, 0.2) 0%, rgba(79, 118, 255, 0.3) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 118, 255, 0.3);
}

/* ===============================================================================================
 * INPUT REFINEMENTS
 * ===============================================================================================
 */

.lofi-swap-input {
  font-family: var(--lofi-font-primary);
  font-size: 28px;
  font-weight: 700;
  color: var(--lofi-text-primary);
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.lofi-swap-input::placeholder {
  color: var(--lofi-text-dim);
  font-weight: 400;
}

/* Input value USD display */
.lofi-input-value-usd {
  font-family: var(--lofi-font-mono);
  font-size: 13px;
  color: var(--lofi-text-muted);
  margin-top: var(--lofi-space-sm);
  font-style: normal;
  opacity: 0.8;
}

/* ===============================================================================================
 * TOKEN SELECTOR PREMIUM STYLING
 * ===============================================================================================
 */

.lofi-token-selector {
  background: linear-gradient(135deg, rgba(138, 138, 237, 0.1) 0%, rgba(138, 138, 237, 0.15) 100%);
  border: 1px solid rgba(138, 138, 237, 0.2);
  padding: var(--lofi-space-sm) var(--lofi-space-md);
  border-radius: var(--lofi-radius-md);
  cursor: default; /* Fixed direction */
  position: relative;
}

.lofi-token-selector img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.lofi-token-selector span {
  font-family: var(--lofi-font-primary);
  font-weight: 700;
  font-size: 16px;
  color: var(--lofi-text-primary);
  letter-spacing: 0.5px;
}

/* ===============================================================================================
 * SWAP DIRECTION INDICATOR (LOCKED)
 * ===============================================================================================
 */

.lofi-swap-direction-indicator {
  margin: calc(var(--lofi-space-sm) * -1) 0;
  z-index: var(--lofi-z-base);
}

.lofi-swap-direction-indicator button {
  background: var(--lofi-bg-secondary);
  border: 1px solid rgba(138, 138, 237, 0.2);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: default;
  box-shadow: var(--lofi-shadow-md);
  color: var(--lofi-text-muted);
  opacity: 0.6;
}

/* ===============================================================================================
 * SWAP DETAILS SECTION
 * ===============================================================================================
 */

.lofi-swap-details {
  background: var(--lofi-bg-tertiary);
  border: 1px solid rgba(138, 138, 237, 0.15);
  border-radius: var(--lofi-radius-md);
  padding: var(--lofi-space-md);
  margin: var(--lofi-space-lg) 0;
  box-shadow: var(--lofi-shadow-sm);
}

.lofi-swap-detail-row {
  padding: var(--lofi-space-sm) 0;
  font-family: var(--lofi-font-primary);
  font-size: 14px;
}

.lofi-swap-detail-row:not(:last-child) {
  border-bottom: 1px solid rgba(138, 138, 237, 0.1);
}

.lofi-swap-detail-row span:first-child {
  color: var(--lofi-text-muted);
  font-weight: 500;
}

.lofi-swap-detail-row span:last-child {
  color: var(--lofi-text-primary);
  font-weight: 600;
}

/* Price value animation */
.lofi-price-value {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.lofi-price-text {
  transition: color var(--lofi-transition-base);
}

/* ===============================================================================================
 * SLIPPAGE CONTROLS POLISH
 * ===============================================================================================
 */

.lofi-slippage-preset {
  background: var(--lofi-bg-tertiary);
  border: 1px solid rgba(138, 138, 237, 0.15);
  color: var(--lofi-text-secondary);
  padding: var(--lofi-space-sm) var(--lofi-space-md);
  border-radius: var(--lofi-radius-sm);
  font-family: var(--lofi-font-primary);
  font-size: 12px;
  font-weight: 600;
  transition: all var(--lofi-transition-fast);
}

.lofi-slippage-preset:hover {
  background: rgba(138, 138, 237, 0.15);
  border-color: rgba(138, 138, 237, 0.3);
  color: var(--lofi-text-primary);
  transform: translateY(-1px);
}

.lofi-slippage-preset.active {
  background: linear-gradient(135deg, rgba(79, 118, 255, 0.15) 0%, rgba(79, 118, 255, 0.25) 100%);
  border-color: var(--lofi-primary);
  color: var(--lofi-primary);
  box-shadow: 0 0 12px rgba(79, 118, 255, 0.2);
}

.lofi-slippage-input {
  background: var(--lofi-bg-tertiary);
  border: 1px solid rgba(138, 138, 237, 0.15);
  border-radius: var(--lofi-radius-sm);
  padding: var(--lofi-space-sm) var(--lofi-space-md);
  color: var(--lofi-text-primary);
  font-family: var(--lofi-font-primary);
  font-size: 14px;
  font-weight: 600;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.lofi-slippage-input:focus {
  border-color: var(--lofi-primary);
  box-shadow: 0 0 0 3px rgba(79, 118, 255, 0.1), inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ===============================================================================================
 * SWAP BUTTON - PREMIUM STYLING
 * ===============================================================================================
 */

.lofi-swap-button {
  background: linear-gradient(135deg, var(--lofi-primary) 0%, var(--lofi-primary-dark) 100%);
  border: none;
  border-radius: var(--lofi-radius-lg);
  padding: 18px var(--lofi-space-xl);
  color: white;
  font-family: var(--lofi-font-primary);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(79, 118, 255, 0.3);
  transition: all var(--lofi-transition-base);
}

/* Shine effect */
.lofi-swap-button::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  transform: scale(0);
  transition: transform 0.6s ease;
}

.lofi-swap-button:hover:not(:disabled)::before {
  transform: scale(1);
}

.lofi-swap-button:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--lofi-primary-light) 0%, var(--lofi-primary) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(79, 118, 255, 0.4), 0 0 40px rgba(79, 118, 255, 0.2);
}

.lofi-swap-button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(79, 118, 255, 0.3);
}

.lofi-swap-button:disabled {
  background: var(--lofi-bg-tertiary);
  color: var(--lofi-text-dim);
  cursor: not-allowed;
  box-shadow: none;
}

/* Success state */
.lofi-swap-button.success {
  background: linear-gradient(135deg, var(--lofi-success) 0%, #059669 100%);
  animation: successPulse 0.6s ease;
}

/* Error state */
.lofi-swap-button.error {
  background: linear-gradient(135deg, var(--lofi-error) 0%, #cc0000 100%);
  animation: errorShake 0.5s ease;
}

/* ===============================================================================================
 * MESSAGE STATES
 * ===============================================================================================
 */

.lofi-swap-message {
  padding: var(--lofi-space-md);
  border-radius: var(--lofi-radius-md);
  margin-top: var(--lofi-space-md);
  font-family: var(--lofi-font-primary);
  font-size: 14px;
  text-align: center;
  font-weight: 600;
  animation: messageSlideIn 0.3s ease;
  box-shadow: var(--lofi-shadow-sm);
}

.lofi-swap-message-info {
  background: linear-gradient(135deg, rgba(79, 118, 255, 0.1) 0%, rgba(79, 118, 255, 0.15) 100%);
  border: 1px solid var(--lofi-primary);
  color: var(--lofi-primary);
}

.lofi-swap-message-warning {
  background: linear-gradient(135deg, rgba(255, 170, 0, 0.1) 0%, rgba(255, 170, 0, 0.15) 100%);
  border: 1px solid var(--lofi-warning);
  color: var(--lofi-warning);
}

.lofi-swap-message-error {
  background: linear-gradient(135deg, rgba(255, 68, 68, 0.1) 0%, rgba(255, 68, 68, 0.15) 100%);
  border: 1px solid var(--lofi-error);
  color: var(--lofi-error);
}

/* ===============================================================================================
 * RECENT TRANSACTIONS POLISH
 * ===============================================================================================
 */

.lofi-recent-section {
  margin-top: var(--lofi-space-xl);
  padding-top: var(--lofi-space-lg);
  border-top: 1px solid rgba(138, 138, 237, 0.1);
}

.lofi-recent-header h3 {
  font-family: var(--lofi-font-primary);
  font-size: 16px;
  font-weight: 700;
  color: var(--lofi-text-primary);
  letter-spacing: 0.5px;
}

/* Transaction controls */
.lofi-tx-nav {
  background: var(--lofi-bg-tertiary);
  border: 1px solid rgba(138, 138, 237, 0.15);
  color: var(--lofi-text-secondary);
  width: 28px;
  height: 28px;
  border-radius: var(--lofi-radius-sm);
  font-size: 14px;
  transition: all var(--lofi-transition-fast);
}

.lofi-tx-nav:hover:not(:disabled) {
  background: rgba(138, 138, 237, 0.15);
  border-color: rgba(138, 138, 237, 0.3);
  color: var(--lofi-text-primary);
  transform: scale(1.1);
}

.lofi-tx-counter {
  font-family: var(--lofi-font-mono);
  font-size: 12px;
  color: var(--lofi-text-muted);
  font-weight: 500;
}

.lofi-clear-recent {
  font-family: var(--lofi-font-primary);
  font-size: 11px;
  font-weight: 600;
  color: var(--lofi-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: var(--lofi-space-xs) var(--lofi-space-sm);
  transition: color var(--lofi-transition-fast);
}

.lofi-clear-recent:hover {
  color: var(--lofi-error);
}

/* ===============================================================================================
 * LOADING STATES & SKELETONS
 * ===============================================================================================
 */

.lofi-skeleton {
  background: linear-gradient(90deg, 
    rgba(138, 138, 237, 0.05) 25%, 
    rgba(138, 138, 237, 0.15) 50%, 
    rgba(138, 138, 237, 0.05) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--lofi-radius-sm);
}

/* ===============================================================================================
 * SCROLLBAR STYLING
 * ===============================================================================================
 */

.lofi-swap-container::-webkit-scrollbar,
.lofi-swap-content::-webkit-scrollbar {
  width: 6px;
}

.lofi-swap-container::-webkit-scrollbar-track,
.lofi-swap-content::-webkit-scrollbar-track {
  background: rgba(42, 45, 94, 0.3);
  border-radius: 3px;
}

.lofi-swap-container::-webkit-scrollbar-thumb,
.lofi-swap-content::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(138, 138, 237, 0.4) 0%, rgba(138, 138, 237, 0.6) 100%);
  border-radius: 3px;
}

.lofi-swap-container::-webkit-scrollbar-thumb:hover,
.lofi-swap-content::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(138, 138, 237, 0.6) 0%, rgba(138, 138, 237, 0.8) 100%);
}

/* ===============================================================================================
 * MOBILE OPTIMIZATIONS
 * ===============================================================================================
 */

@media (max-width: 767px) {
  :root {
    --lofi-space-lg: 20px;
    --lofi-space-xl: 28px;
  }
  
  .lofi-modal-header {
    padding: var(--lofi-space-md);
  }
  
  .lofi-swap-content {
    padding: var(--lofi-space-md);
  }
  
  .lofi-swap-token-section {
    padding: var(--lofi-space-md);
  }
  
  .lofi-swap-input {
    font-size: 24px;
  }
  
  .lofi-swap-button {
    font-size: 16px;
    padding: 16px var(--lofi-space-lg);
  }
  
  /* Bottom sheet styling */
  .lofi-swap-container {
    border-radius: var(--lofi-radius-xl) var(--lofi-radius-xl) 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
  }
}

/* ===============================================================================================
 * TABLET OPTIMIZATIONS
 * ===============================================================================================
 */

@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    --lofi-space-lg: 24px;
    --lofi-space-xl: 36px;
  }
  
  .lofi-swap-input {
    font-size: 30px;
  }
  
  .lofi-swap-button {
    font-size: 19px;
    padding: 20px var(--lofi-space-xl);
  }
}

/* ===============================================================================================
 * ACCESSIBILITY ENHANCEMENTS
 * ===============================================================================================
 */

/* Focus visible states */
*:focus-visible {
  outline: 2px solid var(--lofi-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(79, 118, 255, 0.2);
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .lofi-swap-container {
    border-width: 2px;
  }
  
  .lofi-swap-token-section,
  .lofi-swap-details {
    border-width: 2px;
  }
  
  .lofi-swap-button {
    font-weight: 800;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===============================================================================================
 * FINAL TOUCHES
 * ===============================================================================================
 */

/* Ensure text is crisp */
.lofi-swap-container {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Prevent text selection on interactive elements */
.lofi-swap-button,
.lofi-max-button,
.lofi-slippage-preset,
.lofi-modal-close,
.lofi-tx-nav,
.lofi-clear-recent {
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Ensure inputs are not zoomed on mobile */
input[type="number"],
input[type="text"] {
  font-size: 16px !important;
}

/* Perfect pixel alignment */
.lofi-swap-container *::before,
.lofi-swap-container *::after {
  pointer-events: none;
}

/* Ensure modal is always on top */
#lofi-swap-modal {
  isolation: isolate;
}

/* Premium feel with subtle animations */
@keyframes breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.95; }
}

.lofi-swap-container {
  animation: breathe 4s ease-in-out infinite;
}

/* ===============================================================================================
 * END OF FINAL POLISH
 * ===============================================================================================
 */