:root {
      --bg-cream: #FFFBF0;
      --honey-gold: #FFB300;
      --pooh-red: #D32F2F;
      --dark-brown: #4E342E;
      --light-brown: #795548;
      --card-bg: #FFFFFFE0;
      --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.05);
      --shadow-button: 0 4px 10px rgba(255, 179, 0, 0.3);
      --border-radius-main: 2rem;
      --border-radius-sm: 1.25rem;
      --input-bg-light: #FFF8E1;
  }

  body {
      font-family: 'Baloo 2', sans-serif;
      background-image: url('bg.webp');
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      color: var(--dark-brown);
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 1rem;
  }

  input[type='number']::-webkit-inner-spin-button,
  input[type='number']::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
  }

  input[type='number'] {
      -moz-appearance: textfield;
      -webkit-appearance: none;
      appearance: none;
      margin: 0;
  }

  .swap-icon-container {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
  }

  #appContainer {
      background-color: var(--card-bg);
      border: 2px solid #FFECB3;
      border-radius: var(--border-radius-main);
      box-shadow: var(--shadow-soft);
      transition: all 0.4s ease-in-out;
      padding: 1.5rem;
  }

  .input-group {
      background-color: var(--input-bg-light);
      border-radius: var(--border-radius-sm);
      padding: 1rem;
      border: 1px solid transparent;
      transition: all 0.3s ease;
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
      position: relative;
  }

  .z-elevated {
      z-index: 20;
  }

  .input-group:focus-within {
      border-color: var(--honey-gold);
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 3px rgba(255, 179, 0, 0.2);
  }

  .input-group input {
      color: var(--dark-brown);
      font-size: 2rem;
      font-weight: 800;
      background-color: transparent;
  }

  .input-group input::placeholder {
      color: rgba(78, 52, 46, 0.4);
  }

  #swapButton {
      background: linear-gradient(135deg, var(--honey-gold) 0%, #FFD700 100%);
      color: var(--dark-brown);
      font-size: 1.5rem;
      padding: 1rem;
      border-radius: var(--border-radius-sm);
      box-shadow: var(--shadow-button);
      font-weight: 800;
      transition: all 0.2s ease-in-out;
  }

  #swapButton:hover:not(:disabled) {
      transform: translateY(-3px) scale(1.01);
      box-shadow: 0 6px 15px rgba(255, 179, 0, 0.4);
  }

  #swapButton:active:not(:disabled) {
      transform: translateY(0) scale(0.99);
      box-shadow: 0 2px 5px rgba(255, 179, 0, 0.2);
  }

  #swapButton:disabled {
      background: #BDBDBD;
      color: #757575;
      box-shadow: none;
      cursor: not-allowed;
      transform: none;
  }

  .detail-text {
      color: var(--light-brown);
      font-weight: 600;
      opacity: 0.9;
  }

  .balance-display {
      color: var(--dark-brown);
      font-weight: 700;
  }

  .lang-button {
      padding: 0.3rem 0.8rem;
      border-radius: 9999px;
      font-weight: 700;
      font-size: 0.9rem;
      transition: all 0.2s ease;
      color: var(--light-brown);
  }

  .lang-button.active {
      background-color: var(--honey-gold);
      color: var(--bg-cream);
      box-shadow: 0 2px 5px rgba(255, 179, 0, 0.2);
  }

  .slippage-button {
      padding: 0.3rem 0.8rem;
      border-radius: var(--border-radius-sm);
      font-weight: 700;
      font-size: 0.9rem;
      transition: all 0.2s ease;
      color: var(--light-brown);
  }

  .slippage-button.active {
      background-color: var(--honey-gold);
      color: var(--bg-cream);
      box-shadow: 0 2px 5px rgba(255, 179, 0, 0.2);
  }

  .social-icon {
      color: var(--light-brown);
      transition: all 0.2s ease-in-out;
  }

  .social-icon:hover {
      color: var(--honey-gold);
      transform: translateY(-2px);
  }

  #priceImpactDisplay.warning {
      color: var(--pooh-red);
  }

  .token-selector {
      position: relative;
  }

  .token-selector-button {
      background-color: var(--honey-gold);
      color: var(--dark-brown);
      border-radius: var(--border-radius-sm);
      padding: 0.5rem 1rem;
      font-size: 1.25rem;
      font-weight: 700;
      box-shadow: var(--shadow-button);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      min-width: 100px;
  }

  .token-selector-button:hover {
      filter: brightness(1.05);
  }

  .token-icon {
      width: 24px;
      height: 24px;
      margin-right: 0.5rem;
      border-radius: 9999px;
  }

  .token-selector-button svg {
      margin-left: 0.5rem;
      transition: transform 0.2s ease-in-out;
  }

  .token-selector-panel {
      display: none;
      position: absolute;
      top: 110%;
      right: 0;
      background-color: var(--card-bg);
      border: 1px solid var(--input-bg-light);
      border-radius: var(--border-radius-sm);
      box-shadow: var(--shadow-soft);
      z-index: 50;
      min-width: 150px;
      max-height: 200px;
      overflow-y: auto;
  }

  .token-selector-panel.active {
      display: block;
  }

  .token-selector-item {
      padding: 0.75rem 1rem;
      font-weight: 700;
      cursor: pointer;
      transition: background-color 0.2s ease;
  }

  .token-selector-item:hover {
      background-color: var(--input-bg-light);
  }

  #disclaimerOverlay {
      transition: opacity 0.3s ease-in-out;
  }

  .modal-overlay {
      transition: opacity 0.3s ease-in-out;
  }

  .modal-box {
      transition: all 0.3s ease-in-out;
      transform: translateY(20px) scale(0.95);
  }

  .modal-overlay.active .modal-box {
      transform: translateY(0) scale(1);
  }

  .action-button {
      background-color: var(--honey-gold);
      color: var(--dark-brown);
      padding: 0.5rem 1rem;
      border-radius: 9999px;
      font-weight: 700;
      transition: all 0.2s ease;
      box-shadow: var(--shadow-button);
  }

  .action-button:hover:not(:disabled) {
      filter: brightness(1.05);
      transform: translateY(-2px);
  }

  .action-button:disabled {
      background-color: #BDBDBD;
      color: #757575;
      cursor: not-allowed;
      box-shadow: none;
  }

  @media (min-width: 640px) {
      #appContainer {
          padding: 2.5rem;
      }

      .input-group input {
          font-size: 2.5rem;
      }

      #swapButton {
          font-size: 1.8rem;
          padding: 1.2rem 2rem;
      }
  }