:root {
      --bg-a: #04160f;
      --bg-b: #0a2a1d;
      --panel: rgba(9, 35, 24, 0.82);
      --panel-2: rgba(8, 32, 22, 0.9);
      --line: rgba(110, 246, 162, 0.24);
      --text: #e9fff2;
      --muted: #9fd7b8;
      --green: #6ef6a2;
      --green-strong: #30c975;
      --warn: #ffd36a;
      --danger: #ff7e9a;
      --radius: 20px;
      --shadow: 0 20px 50px rgba(0, 0, 0, 0.38);
      --swap-shell-width: min(420px, 100%);
    }

    @media (min-width: 641px) {
      :root {
        --swap-shell-width: min(440px, 100%);
      }
    }

    * { box-sizing: border-box; }

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

    html, body {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }

    body {
      margin: 0;
      font-family: "Montserrat", "Nunito Sans", "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(1200px 600px at 10% -10%, #0f4f33 0%, transparent 52%),
        radial-gradient(900px 500px at 90% 0%, #113f2d 0%, transparent 54%),
        linear-gradient(145deg, var(--bg-a) 0%, var(--bg-b) 100%);
      min-height: 100vh;
    }

    .layout {
      width: min(1180px, 100%);
      margin: 0 auto;
      padding: 28px;
      display: grid;
      gap: 14px;
      grid-template-columns: 1fr;
      justify-items: center;
    }

    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      backdrop-filter: blur(6px);
      overflow: visible;
    }

    .site-bar {
      grid-column: 1 / -1;
      width: var(--swap-shell-width);
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 4px 2px 0;
      animation: dex-reveal-up 0.72s ease both;
      position: relative;
      z-index: 30;
    }

    .site-back {
      color: var(--muted);
      font-size: 0.78rem;
      text-decoration: none;
      white-space: nowrap;
    }

    .site-back:hover {
      color: var(--green);
    }

    .site-brand {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .site-brand .logo {
      width: 28px;
      height: 28px;
      border-radius: 8px;
    }

    .site-brand span {
      font-size: 0.92rem;
      font-weight: 800;
      letter-spacing: 0.01em;
    }

    .site-bar .menu-btn {
      min-width: 0;
      width: auto;
      padding: 6px 10px;
      font-size: 0.74rem;
      border-radius: 999px;
    }

    .swap {
      animation: dex-reveal-up 0.84s ease both;
      animation-delay: 0.08s;
    }

    @keyframes dex-reveal-up {
      from {
        opacity: 0;
        transform: translateY(18px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .logo-row {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .logo {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      border: 1px solid var(--line);
      object-fit: cover;
      background: rgba(255, 255, 255, 0.08);
    }

    h1 {
      margin: 0;
      font-size: clamp(1.05rem, 2.8vw, 1.35rem);
      letter-spacing: 0.01em;
    }

    .sub {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 0.82rem;
      max-width: 42ch;
      line-height: 1.4;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 8px 12px;
      color: var(--muted);
      font-size: 0.84rem;
    }

    .hero-right {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
      margin-left: auto;
      position: relative;
    }

    .menu-wrap {
      position: relative;
      flex-shrink: 0;
    }

    .wallet-dropdown-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.62);
      backdrop-filter: blur(2px);
    }

    .history-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 100000;
      align-items: center;
      justify-content: center;
      padding: 16px;
      pointer-events: none;
    }

    .history-overlay.open {
      display: flex;
      pointer-events: auto;
    }

    .history-overlay .history-panel {
      position: relative;
      top: auto;
      right: auto;
      left: auto;
      z-index: 1;
      width: min(420px, 100%);
      max-height: min(75vh, 520px);
      border-radius: 16px;
      border: 1px solid var(--line);
      background: rgba(8, 32, 22, 0.98);
      box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);
      overflow: hidden;
      display: block;
      pointer-events: auto;
    }

    .history-panel .dropdown-body {
      max-height: calc(min(75vh, 520px) - 46px);
      overflow: auto;
    }

    .menu-btn {
      width: auto;
      min-width: 170px;
      padding: 8px 12px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.05);
      color: #d9ffe9;
      font-size: 0.84rem;
      font-weight: 700;
      transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    }

    .menu-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(110, 246, 162, 0.32);
      background: rgba(110, 246, 162, 0.12);
    }

    .dropdown {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      width: min(420px, 92vw);
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(8, 32, 22, 0.97);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.42);
      display: none;
      z-index: 9999;
      overflow: hidden;
    }

    .dropdown.open {
      display: block;
    }

    .dropdown-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 10px 12px;
      border-bottom: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.05);
    }

    .dropdown-head span {
      font-size: 0.84rem;
      color: var(--muted);
    }

    .mini-btn {
      width: auto;
      border-radius: 9px;
      padding: 6px 10px;
      font-size: 0.78rem;
      background: linear-gradient(130deg, rgba(110, 246, 162, 0.18), rgba(48, 201, 117, 0.22));
      color: #ddffeb;
    }

    .reverse-chain-wrap {
      display: flex;
      align-items: end;
      justify-content: center;
    }

    .reverse-chain-btn {
      min-width: 3rem;
      padding-inline: 0;
      font-size: 1.05rem;
      line-height: 1;
    }

    .balance-hint {
      margin-top: 6px;
      font-size: 0.78rem;
      color: var(--muted);
    }

    .amount-presets {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 8px;
    }

    .amount-label-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: 12px;
      flex-wrap: wrap;
    }

    .amount-label-row label {
      margin: 0;
    }

    .amount-label-row .amount-presets {
      margin-top: 0;
      gap: 6px;
    }

    .amount-label-row .amount-preset-btn {
      min-width: 46px;
      padding: 6px 8px;
      font-size: 0.72rem;
    }

    .field-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      column-gap: 10px;
      min-height: 32px;
      margin-top: 12px;
    }

    .field-head label {
      margin: 0;
    }

    .field-head .amount-presets {
      margin-top: 0;
      gap: 4px;
      justify-content: flex-end;
      flex-wrap: nowrap;
    }

    .field-head .amount-preset-btn {
      min-width: 40px;
      padding: 5px 7px;
      font-size: 0.68rem;
      line-height: 1;
    }

    .field-head-spacer {
      display: inline-flex;
      justify-content: flex-end;
      visibility: hidden;
      pointer-events: none;
    }

    .dropdown-body {
      padding: 10px 12px;
      display: grid;
      gap: 10px;
      background: rgba(255, 255, 255, 0.02);
    }

    .wallet-summary {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 8px 10px;
      font-size: 0.8rem;
      color: #cffce0;
      background: rgba(255, 255, 255, 0.04);
      line-height: 1.42;
      max-height: 120px;
      overflow: auto;
    }

    .swap {
      padding: 0;
      grid-column: 1 / -1;
      width: var(--swap-shell-width);
      margin: 0 auto;
      background: transparent;
      border: 0;
      box-shadow: none;
      backdrop-filter: none;
    }

    .swap-card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 20px;
      box-shadow: var(--shadow);
      backdrop-filter: blur(8px);
      overflow: visible;
      padding: 16px;
      position: relative;
    }

    .swap-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 14px;
    }

    .swap-toolbar-main {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      min-width: 0;
    }

    .swap-title {
      margin: 0;
      font-size: 1.05rem;
      font-weight: 800;
      letter-spacing: 0.01em;
    }

    .swap-product-toggle {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px;
      border-radius: 999px;
      border: 1px solid rgba(110, 246, 162, 0.22);
      background: rgba(0, 0, 0, 0.18);
    }

    .swap-product-btn {
      border: 0;
      background: transparent;
      color: var(--muted);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 6px 12px;
      border-radius: 999px;
      cursor: pointer;
    }

    .swap-product-btn.is-active {
      color: #04160f;
      background: linear-gradient(135deg, #6ef6a2 0%, #30c975 100%);
      box-shadow: 0 4px 14px rgba(48, 201, 117, 0.28);
    }

    .swap-card.is-swap-mode #toChainPicker,
    .swap-card.is-swap-mode #toAssetPicker > .asset-picker-divider {
      display: none;
    }

    .swap-toolbar-actions {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .icon-btn {
      width: 36px;
      min-width: 36px;
      height: 36px;
      padding: 0;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--line);
      color: #d8ffea;
      font-size: 1rem;
      line-height: 1;
      box-shadow: none;
    }

    .icon-btn:hover {
      background: rgba(110, 246, 162, 0.1);
      border-color: rgba(110, 246, 162, 0.32);
      transform: none;
    }

    #connectWalletBtn {
      width: auto;
      max-width: none;
      min-height: 36px;
      padding: 6px 10px;
      font-size: 0.78rem;
      border-radius: 999px;
      box-shadow: none;
    }

    #connectWalletBtn.wallet-connected {
      border-color: rgba(110, 246, 162, 0.42);
      background: rgba(110, 246, 162, 0.1);
    }

    .connect-wallet-chips {
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .connect-wallet-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: rgba(255, 255, 255, 0.04);
      opacity: 0.45;
      transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
    }

    .connect-wallet-chip img {
      width: 14px;
      height: 14px;
      border-radius: 50%;
    }

    .connect-wallet-chip.connected {
      opacity: 1;
      border-color: rgba(110, 246, 162, 0.55);
      background: rgba(110, 246, 162, 0.16);
      box-shadow: 0 0 0 1px rgba(110, 246, 162, 0.12);
    }

    .wallet-connect-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.82);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 99997;
      padding: 16px;
    }

    .wallet-connect-overlay.open {
      display: flex;
    }

    .wallet-connect-overlay.connect-pending {
      display: none !important;
      pointer-events: none;
    }

    .wallet-connect-modal {
      width: min(420px, 100%);
      max-height: 88vh;
      overflow-y: auto;
      background: rgba(8, 32, 22, 0.96);
      border-radius: 18px;
      padding: 20px;
      color: #e9fff2;
      border: 1px solid rgba(110, 246, 162, 0.28);
      box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(8px);
    }

    .wallet-connect-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 6px;
    }

    .wallet-connect-header h3 {
      margin: 0;
      font-size: 1.08rem;
      font-weight: 800;
    }

    .wallet-connect-close {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 0;
      cursor: pointer;
      background: rgba(255, 255, 255, 0.08);
      color: #fff;
      font-size: 18px;
    }

    .wallet-connect-subtitle {
      margin: 0 0 14px;
      color: #9fcfb2;
      font-size: 0.84rem;
    }

    .wallet-connect-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .wallet-connect-option {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid rgba(110, 246, 162, 0.16);
      background: rgba(255, 255, 255, 0.04);
      color: #e9fff2;
      cursor: pointer;
      text-align: left;
      box-shadow: none;
      min-height: 0;
    }

    .wallet-connect-option:hover {
      border-color: rgba(110, 246, 162, 0.38);
      background: rgba(110, 246, 162, 0.08);
    }

    .wallet-connect-option.connected {
      border-color: rgba(110, 246, 162, 0.34);
      background: rgba(110, 246, 162, 0.1);
    }

    .wallet-connect-option img {
      width: 28px;
      height: 28px;
      border-radius: 50%;
    }

    .wallet-connect-option-body {
      min-width: 0;
    }

    .wallet-connect-option-label {
      display: block;
      font-size: 0.9rem;
      font-weight: 700;
    }

    .wallet-connect-option-status {
      display: block;
      margin-top: 2px;
      font-size: 0.76rem;
      color: #9fcfb2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .wallet-connect-option.connected .wallet-connect-option-status {
      color: #6ef6a2;
    }

    .wallet-connect-disconnect {
      width: auto;
      min-height: 0;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255, 138, 138, 0.28);
      background: rgba(255, 138, 138, 0.08);
      color: #ff9f9f;
      font-size: 0.72rem;
      font-weight: 700;
      box-shadow: none;
      cursor: pointer;
    }

    .wallet-connect-disconnect:hover {
      background: rgba(255, 138, 138, 0.14);
    }

    .swap-settings-popover {
      display: none;
      position: absolute;
      right: 16px;
      top: 54px;
      width: min(320px, calc(100% - 32px));
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(8, 32, 22, 0.98);
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
      z-index: 60;
      gap: 10px;
    }

    .swap-settings-popover.open {
      display: grid;
    }

    .swap-settings-popover label {
      margin-bottom: 4px;
      font-size: 0.74rem;
    }

    .swap-settings-popover input,
    .swap-settings-popover select {
      min-height: 38px;
      font-size: 0.82rem;
    }

    .swap-settings-popover .wallet-status {
      margin-top: 0;
      font-size: 0.74rem;
      padding: 8px 10px;
    }

    .swap-settings-popover .wallet-assets {
      display: none;
    }

    .swap-settings-popover .wallet-row,
    .swap-settings-popover .wallet-multi {
      margin-top: 0;
    }

    .swap-trade-stack {
      border: 1px solid rgba(110, 246, 162, 0.14);
      border-radius: 16px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.02);
    }

    .swap-leg {
      padding: 14px 14px 12px;
      background: transparent;
      border: 0;
    }

    .swap-leg-pay {
      border-bottom: 1px solid rgba(110, 246, 162, 0.1);
    }

    .swap-leg-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
    }

    .swap-leg-label {
      font-size: 0.74rem;
      font-weight: 600;
      color: var(--muted);
    }

    .link-btn {
      width: auto;
      padding: 0;
      min-height: 0;
      border: 0;
      background: transparent;
      color: var(--green);
      font-size: 0.74rem;
      font-weight: 700;
      box-shadow: none;
    }

    .link-btn:hover {
      transform: none;
      filter: brightness(1.08);
      box-shadow: none;
    }

    .swap-leg-main {
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }

    .swap-amount-wrap {
      flex: 1 1 auto;
      min-width: 0;
    }

    .asset-picker {
      display: inline-flex;
      align-items: stretch;
      flex: 0 0 auto;
      max-width: min(100%, 196px);
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.05);
      overflow: visible;
    }

    .asset-picker-chain,
    .asset-picker-token {
      position: relative;
      min-width: 0;
    }

    .asset-picker-chain {
      flex: 0 0 auto;
    }

    .asset-picker-token {
      flex: 1 1 auto;
      min-width: 0;
    }

    .asset-picker-divider {
      width: 1px;
      align-self: stretch;
      margin: 8px 0;
      background: rgba(110, 246, 162, 0.16);
      flex-shrink: 0;
    }

    .asset-picker .token-trigger {
      width: auto;
      min-width: 0;
      min-height: 42px;
      padding: 6px 10px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      font-size: 0.78rem;
    }

    .asset-picker-chain .token-trigger {
      border-radius: 999px 0 0 999px;
      padding: 6px 8px;
      justify-content: center;
    }

    .asset-picker-chain .asset-segment-main {
      justify-content: center;
    }

    .asset-picker-chain .asset-segment-label {
      display: none;
    }

    .asset-picker-token .token-trigger {
      border-radius: 0 999px 999px 0;
      padding-right: 10px;
      justify-content: space-between;
      gap: 6px;
    }

    .asset-picker .token-trigger:hover {
      background: rgba(110, 246, 162, 0.08);
    }

    .asset-segment-main {
      min-width: 0;
    }

    .asset-segment-label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 5.5rem;
    }

    .asset-picker-chain .token-menu,
    .asset-picker-token .token-menu {
      display: none;
    }

    .chain-select-overlay {
      position: fixed;
      inset: 0;
      z-index: 100010;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    .chain-select-overlay.open {
      display: flex;
    }

    .chain-select-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.62);
      backdrop-filter: blur(2px);
    }

    .chain-select-modal {
      position: relative;
      width: min(420px, 100%);
      max-height: min(78vh, 560px);
      display: grid;
      grid-template-rows: auto 1fr;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: rgba(8, 32, 22, 0.98);
      box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);
      overflow: hidden;
    }

    .chain-select-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
      border-bottom: 1px solid rgba(110, 246, 162, 0.12);
      background: rgba(255, 255, 255, 0.03);
    }

    .chain-select-title {
      margin: 0;
      font-size: 1rem;
      font-weight: 800;
    }

    .chain-select-close {
      width: 34px;
      min-width: 34px;
      height: 34px;
      padding: 0;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.06);
      color: #e9fff2;
      font-size: 1.1rem;
      line-height: 1;
      box-shadow: none;
    }

    .chain-select-close:hover {
      transform: none;
      background: rgba(110, 246, 162, 0.12);
    }

    .chain-select-list {
      overflow: auto;
      padding: 10px;
      display: grid;
      gap: 6px;
      align-content: start;
    }

    .chain-select-option {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      text-align: left;
      border-radius: 12px;
      padding: 10px 12px;
      border: 1px solid transparent;
      background: rgba(255, 255, 255, 0.04);
      color: var(--text);
      font-weight: 600;
      box-shadow: none;
    }

    .chain-select-option:hover {
      transform: none;
      border-color: rgba(110, 246, 162, 0.24);
      background: rgba(110, 246, 162, 0.08);
    }

    .chain-select-option.is-active {
      border-color: rgba(110, 246, 162, 0.42);
      background: rgba(110, 246, 162, 0.12);
    }

    .chain-select-option .token-logo {
      width: 24px;
      height: 24px;
    }

    .chain-select-option-main {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .chain-select-option-name {
      font-size: 0.88rem;
      line-height: 1.25;
    }

    .chain-select-option-meta {
      font-size: 0.72rem;
      color: var(--muted);
    }

    .swap-leg .swap-input {
      width: 100%;
      font-size: clamp(1.5rem, 5vw, 1.85rem);
      font-weight: 700;
      min-height: 48px;
      padding: 4px 2px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .swap-leg .swap-input:focus {
      box-shadow: none;
      border-color: transparent;
    }

    .swap-leg .swap-input[readonly] {
      color: #d8ffea;
      opacity: 0.95;
    }

    .swap-leg-meta-line {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 10px;
      margin-top: 2px;
      min-height: 16px;
    }

    .swap-leg-meta-line .balance-hint {
      margin: 0;
      font-size: 0.72rem;
      line-height: 1.3;
      color: rgba(159, 215, 184, 0.78);
    }

    .swap-leg-meta-line .balance-hint:empty {
      display: none;
    }

    .token-balance-hint {
      margin-top: 4px;
      font-size: 0.82rem;
      color: rgba(159, 215, 184, 0.78);
    }

    .token-balance-hint:empty {
      display: none;
    }

    .swap-divider {
      position: relative;
      z-index: 2;
      display: flex;
      justify-content: center;
      margin: -12px 0;
      pointer-events: none;
    }

    .swap-divider .reverse-chain-btn {
      pointer-events: auto;
      width: 34px;
      height: 34px;
      min-height: 34px;
      padding: 0;
      border-radius: 999px;
      border: 1px solid rgba(110, 246, 162, 0.24);
      background: rgba(8, 32, 22, 0.98);
      color: var(--green);
      font-size: 1rem;
      line-height: 1;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24);
    }

    .swap-divider .reverse-chain-btn:hover {
      transform: rotate(180deg);
      border-color: rgba(110, 246, 162, 0.4);
      background: rgba(110, 246, 162, 0.1);
    }

    .swap-route-strip {
      margin-top: 12px;
      padding-top: 10px;
      border-top: 1px solid rgba(110, 246, 162, 0.1);
      display: grid;
      gap: 6px;
      border-radius: 0;
      background: transparent;
    }

    .swap-route-strip:empty {
      display: none;
      margin-top: 0;
      padding-top: 0;
      border-top: 0;
    }

    .quote-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      font-size: 0.8rem;
      line-height: 1.35;
    }

    .quote-k {
      color: var(--muted);
      flex-shrink: 0;
    }

    .quote-v {
      color: #d8ffea;
      text-align: right;
      min-width: 0;
    }

    .swap-status-strip {
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }

    .swap-status-strip .exec,
    .swap-status-strip .result {
      margin-top: 0;
      padding: 10px 12px;
      font-size: 0.8rem;
      border-radius: 12px;
    }

    .swap-status-strip .exec:empty,
    .swap-status-strip .result:empty {
      display: none;
    }

    .swap-status-strip .exec.is-muted:empty {
      display: none;
    }

    .swap-foot .tiny {
      display: none;
    }

    .row {
      display: grid;
      gap: 10px;
      grid-template-columns: 1fr 1fr;
      margin-bottom: 10px;
    }

    .row.single { grid-template-columns: 1fr; }

    .swap-form {
      width: 100%;
      margin: 0;
    }

    .swap-form .token-trigger,
    .swap-form input,
    .swap-form select {
      min-height: 44px;
      box-sizing: border-box;
    }

    .swap-form .amount-presets {
      display: inline-flex;
      gap: 4px;
      flex-wrap: nowrap;
    }

    .field-head-spacer .amount-preset-btn {
      min-width: 40px;
      padding: 5px 7px;
      font-size: 0.68rem;
      line-height: 1;
    }

    label {
      display: block;
      font-size: 0.84rem;
      color: var(--muted);
      margin-bottom: 6px;
    }

    input, select, textarea, button {
      width: 100%;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.05);
      color: var(--text);
      border-radius: 12px;
      padding: 10px 12px;
      font: inherit;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    }

    input::placeholder,
    textarea::placeholder {
      color: var(--muted);
      opacity: 0.92;
    }

    input:focus,
    select:focus,
    textarea:focus {
      outline: none;
      border-color: rgba(110, 246, 162, 0.38);
      box-shadow: 0 0 0 3px rgba(110, 246, 162, 0.08);
    }

    textarea { min-height: 74px; resize: vertical; }

    button {
      cursor: pointer;
      background: linear-gradient(130deg, var(--green), #8fffbf);
      color: #032011;
      font-weight: 700;
      border: 0;
      transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
      box-shadow: 0 10px 22px rgba(48, 201, 117, 0.22);
    }

    button:hover {
      transform: translateY(-1px);
      box-shadow: 0 14px 26px rgba(48, 201, 117, 0.26);
      filter: saturate(1.03);
    }

    .btn-secondary {
      background: linear-gradient(130deg, rgba(255, 255, 255, 0.07), rgba(110, 246, 162, 0.08));
      color: #d8ffea;
      border: 1px solid var(--line);
      box-shadow: none;
    }

    .dex-inline-hint {
      background: rgba(255, 211, 106, 0.08);
      border: 1px solid rgba(255, 211, 106, 0.24);
      border-radius: 12px;
      padding: 10px 14px;
      margin: 8px 0;
      font-size: 0.82rem;
      color: #ffd36a;
      line-height: 1.45;
    }

    .dex-inline-divider {
      border-top: 1px solid rgba(110,246,162,.15);
      margin: 8px 0 4px;
      padding-top: 6px;
    }

    .dex-inline-divider span {
      font-size: 0.75rem;
      color: var(--muted);
    }

    .dex-link-arrow {
      color: var(--green);
      font-size: 0.85rem;
    }

    .inline-flex-row {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .slippage-control {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .slippage-presets {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .slippage-preset-btn {
      flex: 1 1 0;
      min-width: 52px;
      min-height: 34px;
      padding: 6px 8px;
      border: 1px solid rgba(110, 246, 162, 0.18);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.03);
      color: var(--text);
      font-size: 0.74rem;
      font-weight: 600;
      cursor: pointer;
      transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    }

    .slippage-preset-btn:hover {
      border-color: rgba(110, 246, 162, 0.42);
    }

    .slippage-preset-btn.active {
      border-color: var(--green);
      background: rgba(110, 246, 162, 0.14);
      color: var(--green);
    }

    .slippage-custom {
      display: flex;
      align-items: center;
      gap: 6px;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 0 10px;
      background: rgba(255, 255, 255, 0.03);
      min-height: 38px;
      transition: border-color 0.15s ease, background 0.15s ease;
    }

    .slippage-custom.is-warning {
      border-color: rgba(245, 158, 11, 0.72);
      background: rgba(245, 158, 11, 0.08);
    }

    .slippage-custom-warning {
      font-size: 0.72rem;
      line-height: 1.4;
      color: #f59e0b;
      padding: 8px 10px;
      border: 1px solid rgba(245, 158, 11, 0.35);
      border-radius: 10px;
      background: rgba(245, 158, 11, 0.1);
    }

    .slippage-custom-warning[hidden] {
      display: none;
    }

    .slippage-custom input {
      flex: 1;
      min-width: 0;
      min-height: 36px;
      border: 0;
      background: transparent;
      padding: 0;
      font-size: 0.82rem;
      color: var(--text);
      outline: none;
    }

    .slippage-custom-suffix {
      font-size: 0.78rem;
      color: var(--muted);
      font-weight: 600;
    }

    .slippage-min-hint {
      font-size: 0.72rem;
      color: var(--muted);
      line-height: 1.35;
    }

    .slippage-min-hint.is-warning {
      color: #f59e0b;
    }

    .inline-icon-chip {
      width: 16px;
      height: 16px;
      vertical-align: -3px;
      margin-right: 6px;
      border-radius: 50%;
    }

    .inline-soft-tag {
      opacity: 0.7;
    }

    .route-live-badge {
      color: #6ef6a2;
      font-weight: 700;
    }

    .route-unavailable-badge {
      color: #ff8a8a;
      font-weight: 700;
    }

    .route-processing-dot {
      color: #ffd36e;
      font-weight: 700;
    }

    .result-json {
      white-space: pre-wrap;
      margin: 8px 0 0;
      font-size: 12px;
      padding: 12px;
      border-radius: 12px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(110,246,162,.12);
      color: #dff6e8;
    }

    .result-section-spacer {
      margin-bottom: 8px;
    }

    .result-steps {
      margin-top: 8px;
    }

    .tx-history-item {
      padding: 6px 0;
      border-bottom: 1px dashed rgba(110,246,162,.2);
    }

    .inline-checkmark {
      margin-left: 6px;
      font-size: .92rem;
      line-height: 1;
    }

    .fatal-error-banner {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      padding: 12px 16px;
      background: #ff3333;
      color: #fff;
      font-family: monospace;
      font-size: 13px;
      z-index: 999999;
      word-break: break-all;
    }

    .footer-version {
      opacity: .4;
      font-size: .65rem;
    }

    .wc-fallback-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.85);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 100001;
      font-family: "Montserrat", "Nunito Sans", "Segoe UI", sans-serif;
      padding: 16px;
    }

    .wc-fallback-card {
      background: rgba(8, 32, 22, 0.96);
      border-radius: 18px;
      padding: 28px;
      max-width: 420px;
      width: 90%;
      text-align: center;
      color: #e9fff2;
      border: 1px solid rgba(110,246,162,.3);
      max-height: 90vh;
      overflow-y: auto;
      backdrop-filter: blur(8px);
      box-shadow: 0 24px 60px rgba(0,0,0,.42);
    }

    .wc-fallback-title {
      margin: 0 0 12px;
    }

    .wc-fallback-msg {
      font-size: .9rem;
      color: var(--muted);
      margin: 0 0 16px;
    }

    .wc-fallback-qr {
      background: #fff;
      border-radius: 12px;
      padding: 16px;
      margin: 0 auto 14px;
      width: 280px;
      min-height: 280px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .wc-fallback-deeplinks {
      display: none;
      margin: 0 0 14px;
    }

    .wc-fallback-qr-image {
      width: 250px;
      height: 250px;
      border-radius: 8px;
    }

    .wc-fallback-link {
      display: block;
      padding: 10px 12px;
      margin: 6px 0;
      background: rgba(110,246,162,.1);
      border: 1px solid rgba(110,246,162,.3);
      border-radius: 10px;
      color: #e9fff2;
      text-decoration: none;
      font-size: .88rem;
      text-align: left;
    }

    .wc-fallback-link-icon {
      margin-right: 8px;
    }

    .wc-fallback-uri {
      width: 100%;
      padding: 8px;
      border-radius: 8px;
      border: 1px solid rgba(110,246,162,.3);
      background: rgba(255,255,255,.05);
      color: var(--green);
      font-size: .75rem;
      margin-bottom: 12px;
    }

    .wc-fallback-actions {
      display: flex;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .wc-fallback-copy,
    .wc-fallback-close,
    .wc-deeplink-btn {
      border-radius: 10px;
      padding: 10px 14px;
      font-weight: 700;
    }

    .wc-fallback-copy {
      border: 0;
      background: linear-gradient(135deg, #6ef6a2, #30c975);
      color: #04160f;
    }

    .wc-fallback-close {
      border: 1px solid rgba(110,246,162,.24);
      background: rgba(255,255,255,.05);
      color: #e9fff2;
      box-shadow: none;
    }

    .wc-deeplink-btn {
      display: block;
      width: 100%;
      margin: 6px 0;
      background: rgba(110,246,162,.1);
      border: 1px solid rgba(110,246,162,.3);
      color: #e9fff2;
      font-size: .95rem;
      text-align: left;
      cursor: pointer;
      box-shadow: none;
    }

    .wc-deeplink-btn:hover {
      background: rgba(110,246,162,.14);
    }

    .wc-deeplink-icon {
      margin-right: 8px;
      font-size: 1.2rem;
    }

    .wc-deeplink-arrow {
      float: right;
      color: #6ef6a2;
    }

    .status-badge {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 999px;
      font-weight: 700;
      font-size: .78rem;
      letter-spacing: .02em;
      border: 1px solid transparent;
    }

    .status-badge.success {
      background: rgba(110,246,162,.14);
      border-color: rgba(110,246,162,.35);
      color: #6ef6a2;
    }

    .status-badge.failed {
      background: rgba(255,138,138,.14);
      border-color: rgba(255,138,138,.35);
      color: #ff8a8a;
    }

    .status-badge.processing {
      background: rgba(255,211,110,.14);
      border-color: rgba(255,211,110,.35);
      color: #ffd36e;
    }

    .token-picker {
      position: relative;
    }

    .token-trigger {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      text-align: left;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--line);
      color: var(--text);
      box-shadow: none;
    }

    .token-trigger:hover {
      border-color: rgba(110, 246, 162, 0.32);
      background: rgba(110, 246, 162, 0.08);
    }

    .token-trigger-main {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
    }

    .token-logo {
      width: 22px;
      height: 22px;
      border-radius: 999px;
      object-fit: cover;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.18);
      flex: 0 0 auto;
    }

    .token-caret {
      color: var(--muted);
      font-size: 0.85rem;
      flex: 0 0 auto;
    }

    .token-menu {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      right: 0;
      border: 1px solid var(--line);
      border-radius: 12px;
      overflow: auto;
      max-height: 250px;
      background: rgba(8, 32, 22, 0.98);
      z-index: 50;
      display: none;
      box-shadow: 0 18px 36px rgba(0, 0, 0, 0.38);
    }

    .token-menu.open {
      display: block;
    }

    .token-option {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: var(--text);
      padding: 10px 12px;
      text-align: left;
      font-weight: 600;
    }

    .token-option:hover {
      background: rgba(110, 246, 162, 0.12);
      transform: none;
    }

    .meta {
      margin-top: 0;
      border: 0;
      border-radius: 0;
      padding: 0;
      background: transparent;
      font-size: 0.8rem;
      line-height: 1.35;
    }

    .meta b { color: #c7ffd9; }

    .result {
      margin-top: 12px;
      border: 1px solid rgba(255, 211, 106, 0.38);
      background: rgba(255, 211, 106, 0.08);
      border-radius: 12px;
      padding: 10px;
    }

    .result.ok { border-color: rgba(110, 246, 162, 0.5); background: rgba(110, 246, 162, 0.08); }

    .btn-row {
      display: flex;
      justify-content: stretch;
      align-items: center;
      margin-top: 12px;
    }

    #swapNowBtn {
      width: 100%;
      min-height: 48px;
      border-radius: 999px;
      font-size: 0.94rem;
      letter-spacing: 0.01em;
    }

    .wallet-row {
      display: grid;
      gap: 10px;
      grid-template-columns: 1fr 1fr;
      margin-top: 6px;
    }

    .wallet-multi {
      display: grid;
      gap: 8px;
      grid-template-columns: 1fr 1fr;
      margin-top: 8px;
    }

    .wallet-multi .connect-all-btn {
      grid-column: 1 / -1;
      font-weight: 600;
      letter-spacing: .02em;
    }

    /* EVM Wallet Selector Modal */
    .evm-wallet-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.85);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 100000;
      font-family: 'Inter', sans-serif;
    }
    .evm-wallet-modal-overlay.open { display: flex; }

    .swap-confirm-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.78);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 99999;
      padding: 16px;
    }
    .swap-confirm-overlay.open { display: flex; }
    .swap-confirm-modal {
      width: min(560px, 100%);
      max-height: 88vh;
      overflow-y: auto;
      background: rgba(8, 32, 22, 0.96);
      border-radius: 18px;
      padding: 20px;
      color: #e9fff2;
      border: 1px solid rgba(110,246,162,.28);
      box-shadow: 0 28px 80px rgba(0,0,0,.45);
      backdrop-filter: blur(8px);
    }
    .swap-confirm-header {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom: 12px;
    }
    .swap-confirm-title {
      margin: 0;
      font-size: 1.08rem;
      font-weight: 800;
    }
    .swap-confirm-close {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 0;
      cursor: pointer;
      background: rgba(255,255,255,.08);
      color: #fff;
      font-size: 18px;
    }
    .swap-confirm-grid {
      display: grid;
      gap: 10px;
    }
    .swap-confirm-row {
      display: grid;
      grid-template-columns: 160px 1fr;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 12px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(110,246,162,.12);
      font-size: .92rem;
    }
    .swap-confirm-row b { color: #c7ffd9; }
    .swap-confirm-note {
      margin-top: 12px;
      padding: 12px;
      border-radius: 12px;
      background: rgba(255,211,106,.08);
      border: 1px solid rgba(255,211,106,.18);
      color: #f2f6f3;
      line-height: 1.45;
      font-size: .88rem;
    }
    .swap-confirm-actions {
      display:flex;
      justify-content:flex-end;
      gap:10px;
      margin-top: 14px;
    }
    .swap-confirm-actions button {
      border: 0;
      border-radius: 999px;
      padding: 10px 16px;
      cursor: pointer;
      font-weight: 800;
    }
    .swap-confirm-cancel {
      background: rgba(255,255,255,.08);
      color: #fff;
      border: 1px solid rgba(110,246,162,.14);
      box-shadow: none;
    }
    .swap-confirm-continue {
      background: linear-gradient(135deg, #6ef6a2, #30c975);
      color: #0c1216;
    }
    @media (max-width: 640px) {
      .swap-confirm-row {
        grid-template-columns: 1fr;
      }
    }

    .evm-wallet-modal {
      background: rgba(8, 32, 22, 0.96);
      border-radius: 18px;
      padding: 24px;
      max-width: 400px;
      width: 92%;
      color: #e9fff2;
      border: 1px solid rgba(110,246,162,.3);
      max-height: 90vh;
      overflow-y: auto;
      backdrop-filter: blur(8px);
    }

    .evm-wallet-modal h3 {
      margin: 0 0 6px;
      font-size: 1.15rem;
    }

    .evm-wallet-modal .evm-modal-subtitle {
      color: #9fcfb2;
      font-size: .85rem;
      margin: 0 0 16px;
    }

    .evm-wallet-modal .evm-wallet-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .evm-wallet-modal .evm-wallet-option {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      border-radius: 12px;
      border: 1px solid rgba(110,246,162,.2);
      background: rgba(255,255,255,.05);
      color: #e9fff2;
      cursor: pointer;
      font-size: .95rem;
      transition: background .15s, border-color .15s;
      text-align: left;
      width: 100%;
    }
    .evm-wallet-option:hover {
      background: rgba(110,246,162,.12);
      border-color: var(--green);
    }
    .evm-wallet-option .wallet-icon {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      flex-shrink: 0;
      object-fit: contain;
    }
    .evm-wallet-option .wallet-info {
      flex: 1;
    }
    .evm-wallet-option .wallet-name {
      font-weight: 600;
      display: block;
    }
    .evm-wallet-option .wallet-desc {
      font-size: .78rem;
      color: #9fcfb2;
    }
    .evm-wallet-option.detected {
      border-color: var(--green);
      background: rgba(110,246,162,.08);
    }
    .evm-wallet-option .detected-badge {
      font-size: .7rem;
      color: var(--green);
      background: rgba(110,246,162,.15);
      padding: 2px 8px;
      border-radius: 99px;
      flex-shrink: 0;
    }
    .evm-modal-close {
      margin-top: 14px;
      width: 100%;
      padding: 10px;
      border-radius: 10px;
      border: 1px solid rgba(110,246,162,.3);
      background: transparent;
      color: #e9fff2;
      cursor: pointer;
      font-size: .9rem;
    }

    .wallet-status {
      margin-top: 8px;
      font-size: 0.82rem;
      color: var(--muted);
      border: 1px dashed var(--line);
      border-radius: 10px;
      padding: 8px 10px;
      background: rgba(255, 255, 255, 0.04);
    }

    a,
    a:visited {
      color: var(--green);
    }

    a:hover,
    a:focus {
      color: var(--green-strong);
    }

    .wallet-assets {
      margin-top: 8px;
      font-size: 0.82rem;
      color: #c6f4da;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 8px 10px;
      background: rgba(255, 255, 255, 0.04);
      line-height: 1.42;
    }

    .wallet-assets-grid {
      display: grid;
      gap: 8px;
    }

    .wallet-assets-item {
      border: 1px solid rgba(110, 246, 162, 0.25);
      border-radius: 8px;
      padding: 7px 8px;
      background: rgba(255, 255, 255, 0.04);
    }

    .wallet-assets-item b {
      color: #d8ffe8;
    }

    .history-box {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 10px;
      background: rgba(255, 255, 255, 0.04);
      max-height: 220px;
      overflow: auto;
      font-size: 0.8rem;
      color: #d3ffe3;
      line-height: 1.45;
    }

    .embed-panel {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.72);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 200;
      padding: 14px;
    }

    .embed-panel.open {
      display: flex;
    }

    .embed-card {
      width: min(1100px, 100%);
      height: min(85vh, 820px);
      background: rgba(8, 32, 22, 0.96);
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: hidden;
      display: grid;
      grid-template-rows: auto 1fr;
      backdrop-filter: blur(8px);
    }

    .embed-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 10px;
      border-bottom: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.05);
    }

    .embed-topbar span {
      font-size: 0.85rem;
      color: var(--muted);
    }

    .embed-actions {
      display: inline-flex;
      gap: 8px;
      align-items: center;
    }

    .embed-actions a {
      color: #9dfec2;
      font-size: 0.8rem;
      text-decoration: none;
    }

    .embed-frame {
      width: 100%;
      height: 100%;
      border: 0;
      background: #020906;
    }

    .exec {
      margin-top: 10px;
      border: 1px solid rgba(110, 246, 162, 0.35);
      border-radius: 12px;
      background: rgba(8, 27, 18, 0.55);
      padding: 10px;
      font-size: 0.88rem;
      line-height: 1.42;
    }

    .tiny {
      margin-top: 10px;
      font-size: 0.78rem;
      color: var(--muted);
      opacity: 0.95;
    }

    .wallet-grid {
      display: grid;
      gap: 8px;
      grid-template-columns: 1fr;
      margin-top: 10px;
      max-height: 340px;
      overflow: auto;
      padding-right: 2px;
    }

    .wallet-item {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 8px;
      background: rgba(4, 16, 11, 0.7);
    }

    .wallet-item span {
      display: block;
      font-size: 0.76rem;
      color: var(--muted);
      margin-bottom: 4px;
    }

    .footer {
      grid-column: 1 / -1;
      color: var(--muted);
      font-size: 0.78rem;
      text-align: center;
      padding-bottom: 8px;
    }

    @media (max-width: 980px) {
      .layout {
        padding: 12px;
      }

      .layout { grid-template-columns: 1fr; }
      .row { grid-template-columns: 1fr; }
      .hero-right {
        width: 100%;
        justify-content: flex-start;
      }

      .wallet-row {
        grid-template-columns: 1fr 1fr;
      }

      .wallet-multi {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
      }

      .wallet-multi button {
        font-size: 0.78rem;
        padding: 8px 4px;
        min-height: 40px;
      }

      .wallet-multi .connect-all-btn {
        grid-column: 1 / -1;
        min-height: 44px;
        font-size: 0.88rem;
      }
    }

    @media (max-width: 640px) {
      .site-bar {
        width: 100%;
        padding-top: 0;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
          "back history"
          "brand brand";
        gap: 8px 10px;
        align-items: center;
      }

      .site-back {
        grid-area: back;
        justify-self: start;
      }

      .site-brand {
        grid-area: brand;
        justify-self: center;
        min-width: 0;
      }

      .site-brand span {
        white-space: nowrap;
      }

      .site-bar .menu-wrap {
        grid-area: history;
        justify-self: end;
        width: auto;
      }

      .site-bar .menu-btn {
        width: auto;
        min-width: 0;
        padding: 7px 12px;
      }

      .swap {
        padding: 0;
      }

      .swap-card {
        padding: 14px;
      }

      .swap-toolbar-actions {
        flex: 1 1 auto;
        justify-content: flex-end;
      }

      .asset-picker {
        max-width: min(100%, 176px);
      }

      .asset-segment-label {
        max-width: 4.2rem;
      }
    }

      @media (max-width: 480px) {
      .layout {
        padding: 10px;
      }

      .wallet-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
      }

      .wallet-multi {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
      }

      .wallet-row button,
      .wallet-multi button {
        font-size: 0.74rem;
        padding: 7px 4px;
        min-height: 36px;
        border-radius: 10px;
      }

      .wallet-multi .connect-all-btn {
        grid-column: 1 / -1;
        min-height: 40px;
        font-size: 0.8rem;
      }
    }
    @media (max-width: 980px) {
      body {
        overflow-x: hidden;
      }

      .layout,
      .site-bar,
      .swap,
      .panel,
      .row,
      .meta,
      .result,
      .exec,
      .wallet-status,
      .wallet-assets,
      .history-box,
      .embed-card,
      .swap-confirm-modal,
      .evm-wallet-modal,
      .layout > *,
      .row > *,
      .site-bar > *,
      .swap > * {
        max-width: 100%;
        min-width: 0;
      }

      .logo-row,
      .site-bar,
      .token-trigger-main,
      .wallet-summary,
      .history-box,
      .menu-wrap {
        min-width: 0;
      }

      .dropdown,
      .token-menu,
      .swap-confirm-modal,
      .evm-wallet-modal,
      .embed-card {
        max-width: calc(100vw - 20px);
      }
    }
    @media (max-width: 640px) {
      body {
        font-size: 15px;
      }

      .asset-picker .token-logo {
        width: 22px;
        height: 22px;
      }

      .asset-segment-label {
        max-width: 3.6rem;
      }

      .field-head .amount-presets {
        gap: 3px;
      }

      .field-head .amount-preset-btn {
        min-width: 32px;
        padding: 3px 5px;
        font-size: 0.6rem;
      }

      .field-head .amount-preset-btn[data-pct="25"],
      .field-head .amount-preset-btn[data-pct="75"] {
        display: none;
      }

      .layout {
        width: 100%;
        max-width: 100vw;
        padding: 8px;
        gap: 10px;
      }

      .site-bar,
      .swap {
        padding: 0;
      }

      .site-brand .logo {
        width: 24px;
        height: 24px;
      }

      .site-bar .menu-btn {
        font-size: 0.72rem;
        padding: 7px 9px;
      }

      input, select, textarea, button {
        padding: 9px 10px;
      }

      .embed-panel,
      .swap-confirm-overlay,
      .evm-wallet-modal-overlay {
        padding: 8px;
      }
    }
</style>