/* --- style block 1 --- */
@keyframes fadeInUp {

              from {

                opacity: 0;

                transform: translateY(20px);

              }

              to {

                opacity: 1;

                transform: translateY(0);

              }

            }

            

            .mystic-yetis-card .modal-wrapper:hover {

              transform: translateY(-2px);

              box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 60px rgba(138, 138, 237, 0.2);

            }

            

            .mystic-yetis-card .nft-item {

              border-radius: 12px;

            }

            

            @media (min-width: 1000px) and (max-width: 1440px) {

              /* Tablet: Single column with full width NFT images */

              .mystic-yetis-card .nft-grid {

                grid-template-columns: 1fr !important;

                gap: 16px !important;

              }

              

              /* Limit NFT image wrapper width on tablet */

              .mystic-yetis-card .nft-item {

                max-width: 450px !important;

                margin: 0 auto !important;

              }

            }

            

            @media (max-width: 768px) {

              .mystic-yetis-card {

                margin-top: 30px !important;

                margin-bottom: 20px !important;

                width: 90% !important;

                max-width: 400px !important;

              }

              

              .mystic-yetis-card .modal-body {

                padding: 20px 16px !important;

              }

              

              .mystic-yetis-card h3 {

                font-size: 1.1rem !important;

                white-space: normal !important;

              }

              

              .mystic-yetis-card .button {

                padding: 6px 16px !important;

                font-size: 0.8rem !important;

              }

              

              /* Maintain 3 columns but smaller gaps */

              .mystic-yetis-card .nft-grid {

                grid-template-columns: repeat(3, 1fr) !important;

                gap: 8px !important;

              }

              

              .mystic-yetis-card .nft-item {

                border-width: 1px !important;

              }

            }

            

            @media (max-width: 480px) {

              .mystic-yetis-card {

                max-width: 320px !important;

                margin-top: 20px !important;

                margin-bottom: 15px !important;

              }

              

              .mystic-yetis-card .modal-body {

                padding: 16px 12px !important;

              }

              

              .mystic-yetis-card h3 {

                font-size: 0.95rem !important;

              }

              

              .mystic-yetis-card .button {

                padding: 5px 12px !important;

                font-size: 0.75rem !important;

                border-radius: 12px !important;

              }

              

              /* Even smaller gaps but still 3 columns */

              .mystic-yetis-card .nft-grid {

                grid-template-columns: repeat(3, 1fr) !important;

                gap: 6px !important;

              }

              

              .mystic-yetis-card .nft-item {

                border-radius: 8px !important;

              }

            }


/* --- style block 2 --- */
/* Apply on any element by adding class "animate-gradient" or attribute animate="gradient" */

/* You can set a gradient in the designer just as it is now, but we recommend NOT setting it on

"animate-gradient" class. It's better to set it in on a different class and then add "animate-gradient" as a combo class or the attribute just to enable the animation. */

.animate-gradient, [animate="gradient"]{

	background-size: 1500% /* <-- modify gradient size */ auto;

  animation: textGradient 16s /* <-- modify animation speed */ linear infinite alternate;

}

@keyframes textGradient {

    0% {

        background-position: 0% 50%;      

    }

    100% {

        background-position: 100% 50%;

    }

}


/* --- style block 3 --- */
@keyframes scroll {

  from {

    transform: translateX(0);

  }

  to {

    transform: translateX(calc(-100% - 1rem));

  }

}

.scroll {

  animation: scroll 10s linear infinite;

}

.reverse {

  animation-direction: reverse;

}

.marquee-image {

  -webkit-transform: translateZ(0);

}


/* --- style block 4 --- */
/* Enhanced Swap Progress Indicator */

    .swap-progress {

      margin-top: 15px;

      padding: 12px;

      background: rgba(255, 255, 255, 0.05);

      border-radius: 8px;

      border: 1px solid rgba(255, 255, 255, 0.1);

    }

    

    .progress-step {

      display: flex;

      align-items: center;

      gap: 10px;

      animation: pulse 2s infinite;

    }

    

    .step-icon {

      font-size: 16px;

      width: 24px;

      text-align: center;

    }

    

    .step-text {

      color: #ffffff;

      font-size: 14px;

      font-weight: 500;

    }

    

    @keyframes pulse {

      0%, 100% { opacity: 1; }

      50% { opacity: 0.6; }

    }

    

    /* Enhanced Swap Button States */

    .simple-swap-button {

      transition: all 0.3s ease;

      position: relative;

      overflow: hidden;

    }

    

    .simple-swap-button:disabled {

      opacity: 0.7;

      cursor: not-allowed;

    }

    

    .simple-swap-button.executing {

      background: linear-gradient(-45deg, #667eea 0%, #764ba2 100%);

      background-size: 400% 400%;

      animation: gradientShift 2s ease infinite;

    }

    

    .simple-swap-button.success {

      background: #22c55e !important;

      color: white !important;

    }

    

    .simple-swap-button.error {

      background: #ef4444 !important;

      color: white !important;

    }

    

    .simple-swap-button.external {

      background: linear-gradient(-45deg, #f59e0b 0%, #d97706 100%);

      background-size: 400% 400%;

      animation: gradientShift 2s ease infinite;

      color: white !important;

    }

    

    @keyframes gradientShift {

      0% { background-position: 0% 50%; }

      50% { background-position: 100% 50%; }

      100% { background-position: 0% 50%; }

    }

    

    /* Transaction Hash Display */

    .transaction-hash {

      margin-top: 10px;

      padding: 8px 12px;

      background: rgba(34, 197, 94, 0.1);

      border: 1px solid rgba(34, 197, 94, 0.3);

      border-radius: 6px;

      font-family: monospace;

      font-size: 12px;

      color: #22c55e;

      word-break: break-all;

      cursor: pointer;

    }

    

    .transaction-hash:hover {

      background: rgba(34, 197, 94, 0.2);

    }

    

    /* Real-time Price Updates */

    .price-updating {

      animation: priceFlash 0.5s ease;

    }

    

    @keyframes priceFlash {

      0% { background: rgba(59, 130, 246, 0.2); }

      100% { background: transparent; }

    }

    

    /* External URL Info */

    .external-url-info {

      margin-top: 8px;

      padding: 6px 10px;

      background: rgba(245, 158, 11, 0.1);

      border: 1px solid rgba(245, 158, 11, 0.3);

      border-radius: 4px;

      font-size: 12px;

      color: #f59e0b;

      text-align: center;

    }

    

    /* Slippage Warning */

    .slippage-warning {

      margin-top: 8px;

      padding: 6px 10px;

      background: rgba(245, 158, 11, 0.1);

      border: 1px solid rgba(245, 158, 11, 0.3);

      border-radius: 4px;

      font-size: 12px;

      color: #f59e0b;

    }

    

    /* Balance Display Enhancement */

    .balance-updating {

      position: relative;

    }

    

    .balance-updating::after {

      content: "↻";

      position: absolute;

      right: -20px;

      animation: spin 1s linear infinite;

      color: #3b82f6;

    }

    

    @keyframes spin {

      from { transform: rotate(0deg); }

      to { transform: rotate(360deg); }

    }

    

    /* Agent 3: Price Update Animations */

    .price-updating {

      position: relative;

      opacity: 0.7;

    }

    

    .price-updating::after {

      content: "↻";

      position: absolute;

      right: -15px;

      animation: spin 1s linear infinite;

      color: #22c55e;

      font-size: 12px;

    }

    

    .price-updated {

      background: rgba(34, 197, 94, 0.2) !important;

      transition: background-color 0.5s ease;

      border-radius: 4px;

      padding: 2px 4px;

    }

    

    /* Enhanced Price Display States */

    .price-display, 

    [data-price-display], 

    #dashboard-live-price, 

    .lofi-price-display,

    .swap-price-display,

    #lofi-current-rate,

    .turbos-price,

    #simple-lofi-rate {

      transition: all 0.3s ease;

    }

    

    .price-stale {

      opacity: 0.6;

      color: #f59e0b !important;

    }

    

    .price-error {

      color: #ef4444 !important;

    }

    

    /* Slippage Controls */

    .slippage-controls {

      display: flex;

      gap: 8px;

      align-items: center;

      flex-wrap: wrap;

    }

    

    .slippage-btn {

      padding: 6px 12px;

      border: 1px solid rgba(255, 255, 255, 0.2);

      background: rgba(255, 255, 255, 0.05);

      color: #ffffff;

      border-radius: 4px;

      cursor: pointer;

      font-size: 12px;

      transition: all 0.3s ease;

    }

    

    .slippage-btn:hover {

      background: rgba(255, 255, 255, 0.1);

      border-color: rgba(255, 255, 255, 0.3);

    }

    

    .slippage-btn.active {

      background: rgba(59, 130, 246, 0.3);

      border-color: #3b82f6;

      color: #3b82f6;

    }

    

    #custom-slippage {

      padding: 6px 8px;

      border: 1px solid rgba(255, 255, 255, 0.2);

      background: rgba(255, 255, 255, 0.05);

      color: #ffffff;

      border-radius: 4px;

      font-size: 12px;

      width: 80px;

    }

    

    #custom-slippage:focus {

      outline: none;

      border-color: #3b82f6;

      background: rgba(59, 130, 246, 0.1);

    }

    

    /* Quote Details */

    .quote-details {

      margin-top: 10px;

      padding: 10px;

      background: rgba(255, 255, 255, 0.05);

      border-radius: 6px;

      font-size: 12px;

      color: #cccccc;

    }

    

    .quote-detail-row {

      display: flex;

      justify-content: space-between;

      margin-bottom: 4px;

    }

    

    .quote-detail-row:last-child {

      margin-bottom: 0;

    }

    

    .price-impact-high {

      color: #f59e0b !important;

    }

    

    .price-impact-warning {

      color: #ef4444 !important;

    }


/* --- style block 5 --- */
.lofi-modal-overlay {

      position: fixed;

      top: 0;

      left: 0;

      right: 0;

      bottom: 0;

      background: rgba(0, 0, 0, 0.85);

      backdrop-filter: blur(10px);

      display: flex;

      align-items: center;

      justify-content: center;

      z-index: 999999;

      animation: fadeIn 0.3s ease;

    }



    .lofi-modal-container {

      background: linear-gradient(135deg, #1a1f3a 0%, #2d3561 100%);

      border: 2px solid rgba(168, 184, 237, 0.3);

      border-radius: 16px;

      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);

      max-width: 420px;

      width: 90%;

      animation: slideUp 0.3s ease;

    }



    .lofi-modal-header {

      padding: 24px;

      border-bottom: 1px solid rgba(168, 184, 237, 0.2);

      display: flex;

      justify-content: space-between;

      align-items: center;

      background: rgba(0, 0, 0, 0.1);

    }



    .lofi-modal-header h2 {

      color: #ffffff;

      font-size: 24px;

      font-weight: 600;

      margin: 0;

      font-family: 'Gluten', sans-serif;

    }



    .lofi-modal-close {

      background: none;

      border: none;

      color: #ffffff;

      font-size: 28px;

      cursor: pointer;

      opacity: 0.7;

      transition: opacity 0.2s;

      padding: 0;

      width: 32px;

      height: 32px;

      display: flex;

      align-items: center;

      justify-content: center;

    }



    .lofi-modal-close:hover {

      opacity: 1;

    }



    .lofi-modal-content {

      padding: 24px;

    }



    .lofi-wallet-options {

      display: flex;

      flex-direction: column;

      gap: 12px;

    }



    .lofi-wallet-option {

      display: flex;

      align-items: center;

      gap: 16px;

      padding: 16px;

      background: rgba(255, 255, 255, 0.05);

      border: 1px solid rgba(255, 255, 255, 0.1);

      border-radius: 12px;

      cursor: pointer;

      transition: all 0.2s;

    }



    .lofi-wallet-option:hover {

      background: rgba(255, 255, 255, 0.1);

      border-color: #a8b8ed;

      transform: translateY(-2px);

    }



    .lofi-wallet-icon {

      width: 40px;

      height: 40px;

      border-radius: 8px;

    }



    .lofi-wallet-name {

      color: #ffffff;

      font-size: 18px;

      font-weight: 500;

      font-family: 'Gluten', sans-serif;

      flex: 1;

    }



    .lofi-wallet-status {

      color: #a8b8ed;

      font-size: 14px;

      font-weight: 400;

      font-family: 'Gluten', sans-serif;

    }



    .lofi-wallet-option.unavailable {

      opacity: 0.6;

    }



    .lofi-wallet-option.unavailable .lofi-wallet-status {

      color: #ff6b6b;

    }



    @keyframes fadeIn {

      from { opacity: 0; }

      to { opacity: 1; }

    }



    @keyframes slideUp {

      from { 

        opacity: 0;

        transform: translateY(20px);

      }

      to { 

        opacity: 1;

        transform: translateY(0);

      }

    }


/* --- style block 6 --- */
/* Extend existing modal styles */

    .lofi-swap-container {

      max-width: 480px;

    }



    /* Swap Direction Styles */

    .swap-direction-container {

      margin-bottom: 24px;

    }



    .swap-direction-toggle {

      width: 100%;

      background: rgba(255, 255, 255, 0.05);

      border: 1px solid rgba(255, 255, 255, 0.1);

      border-radius: 12px;

      padding: 16px;

      display: flex;

      align-items: center;

      justify-content: space-between;

      cursor: pointer;

      transition: all 0.2s;

      color: white;

    }



    .swap-direction-toggle:hover {

      background: rgba(255, 255, 255, 0.08);

      border-color: rgba(168, 184, 237, 0.4);

    }



    .swap-direction-from,

    .swap-direction-to {

      display: flex;

      align-items: center;

      gap: 8px;

    }



    .token-icon {

      width: 28px;

      height: 28px;

      border-radius: 50%;

    }



    .token-icon-small {

      width: 20px;

      height: 20px;

      border-radius: 50%;

    }



    .token-symbol {

      font-size: 16px;

      font-weight: 600;

    }



    .swap-arrow {

      color: rgba(168, 184, 237, 0.8);

      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    }



    .swap-direction-toggle:hover .swap-arrow {

      transform: rotate(180deg) scale(1.1);

      color: #a8b8ed;

    }

    

    .swap-direction-toggle:active .swap-arrow {

      transform: rotate(180deg) scale(0.95);

    }



    /* Input/Output Sections */

    .swap-input-section,

    .swap-output-section {

      margin-bottom: 20px;

    }



    .swap-label {

      display: block;

      color: rgba(255, 255, 255, 0.7);

      font-size: 14px;

      margin-bottom: 8px;

    }



    .swap-input-container,

    .swap-output-container {

      background: rgba(0, 0, 0, 0.3);

      border: 1px solid rgba(255, 255, 255, 0.1);

      border-radius: 12px;

      padding: 16px;

      display: flex;

      align-items: center;

      justify-content: space-between;

    }



    .swap-amount-input {

      background: none;

      border: none;

      color: white;

      font-size: 24px;

      font-weight: 600;

      outline: none;

      flex: 1;

      font-family: 'Gluten', monospace;

    }



    .swap-amount-input::placeholder {

      color: rgba(255, 255, 255, 0.3);

    }

    

    .swap-max-btn {

      background: rgba(168, 184, 237, 0.15);

      border: 1px solid rgba(168, 184, 237, 0.3);

      border-radius: 6px;

      color: #a8b8ed;

      padding: 8px 16px;

      font-size: 14px;

      cursor: pointer;

      transition: all 0.2s;

      font-weight: 600;

      font-family: 'Gluten', sans-serif;

      margin-left: 8px;

    }



    .swap-max-btn:hover {

      background: rgba(168, 184, 237, 0.25);

      border-color: rgba(168, 184, 237, 0.5);

      transform: translateY(-1px);

    }

    

    .swap-max-btn:active {

      transform: translateY(0);

    }



    .swap-input-token,

    .swap-output-token {

      display: flex;

      align-items: center;

      gap: 8px;

      background: rgba(255, 255, 255, 0.1);

      padding: 8px 12px;

      border-radius: 20px;

    }



    .swap-output-amount {

      font-size: 24px;

      font-weight: 600;

      color: #4ade80;

      font-family: 'Gluten', monospace;

    }



    .swap-balance {

      font-size: 12px;

      color: rgba(255, 255, 255, 0.6);

      margin-top: 8px;

      display: flex;

      align-items: center;

      gap: 8px;

    }

    

    .swap-rate {

      font-size: 13px;

      color: rgba(168, 184, 237, 0.8);

      margin-top: 8px;

      font-weight: 500;

    }

    

    .balance-refresh-btn {

      background: transparent;

      border: 1px solid rgba(168, 184, 237, 0.3);

      border-radius: 4px;

      padding: 6px;

      cursor: pointer;

      transition: all 0.2s;

      display: inline-flex;

      align-items: center;

      justify-content: center;

    }

    

    .balance-refresh-btn:hover {

      border-color: rgba(168, 184, 237, 0.6);

      background: rgba(168, 184, 237, 0.1);

    }

    

    .balance-refresh-btn svg {

      color: #a8b8ed;

    }

    

    .balance-usd {

      color: rgba(168, 184, 237, 0.7);

      font-weight: 500;

    }



    /* Slippage Settings */

    .swap-slippage-section {

      margin-bottom: 20px;

    }



    .swap-slippage-options {

      display: flex;

      gap: 8px;

    }



    .slippage-option {

      flex: 1;

      padding: 8px 12px;

      background: rgba(255, 255, 255, 0.05);

      border: 1px solid rgba(255, 255, 255, 0.1);

      border-radius: 8px;

      color: white;

      cursor: pointer;

      transition: all 0.2s;

      font-size: 14px;

    }



    .slippage-option:hover {

      background: rgba(255, 255, 255, 0.08);

    }



    .slippage-option.active {

      background: rgba(168, 184, 237, 0.2);

      border-color: rgba(168, 184, 237, 0.6);

    }



    .custom-slippage-input {

      margin-top: 8px;

      display: flex;

      align-items: center;

      gap: 8px;

    }



    .custom-slippage-input input {

      background: rgba(0, 0, 0, 0.3);

      border: 1px solid rgba(255, 255, 255, 0.1);

      border-radius: 8px;

      padding: 8px 12px;

      color: white;

      outline: none;

      width: 100px;

    }



    /* Transaction Details */

    .swap-details {

      background: rgba(0, 0, 0, 0.3);

      border: 1px solid rgba(168, 184, 237, 0.15);

      border-radius: 12px;

      padding: 16px;

      margin-bottom: 20px;

    }



    .swap-detail-row {

      display: flex;

      justify-content: space-between;

      align-items: center;

      margin-bottom: 10px;

      font-size: 14px;

    }



    .swap-detail-row:last-child {

      margin-bottom: 0;

    }



    .swap-detail-row span:first-child {

      color: rgba(255, 255, 255, 0.7);

      font-weight: 400;

    }

    

    .swap-detail-row span:last-child {

      font-weight: 500;

      font-family: 'Gluten', monospace;

    }



    .price-impact-low {

      color: #4ade80;

    }



    .price-impact-medium {

      color: #fbbf24;

    }



    .price-impact-high {

      color: #ef4444;

    }



    /* Execute Button */

    .swap-execute-btn {

      width: 100%;

      padding: 16px;

      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

      border: none;

      border-radius: 12px;

      color: white;

      font-size: 18px;

      font-weight: 600;

      cursor: pointer;

      transition: all 0.2s;

      font-family: 'Gluten', sans-serif;

    }



    .swap-execute-btn:hover:not(:disabled) {

      transform: translateY(-2px);

      box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);

    }



    .swap-execute-btn:disabled {

      background: rgba(255, 255, 255, 0.1);

      cursor: not-allowed;

      opacity: 0.5;

    }



    /* Transaction Status */

    .swap-status {

      text-align: center;

      padding: 20px;

    }



    .status-icon {

      margin-bottom: 12px;

    }



    .spinner {

      width: 40px;

      height: 40px;

      border: 3px solid rgba(255, 255, 255, 0.1);

      border-top-color: #667eea;

      border-radius: 50%;

      animation: spin 1s linear infinite;

      margin: 0 auto;

    }



    @keyframes spin {

      to { transform: rotate(360deg); }

    }

    

    /* Loading state for swap inputs */

    .swap-input-container.loading,

    .swap-output-container.loading {

      position: relative;

      overflow: hidden;

    }

    

    .swap-input-container.loading::after,

    .swap-output-container.loading::after {

      content: '';

      position: absolute;

      top: 0;

      left: -100%;

      width: 100%;

      height: 100%;

      background: linear-gradient(90deg, transparent, rgba(168, 184, 237, 0.2), transparent);

      animation: shimmer 1.5s infinite;

    }

    

    @keyframes shimmer {

      to { left: 100%; }

    }



    .status-message {

      color: rgba(255, 255, 255, 0.8);

      font-size: 16px;

    }



    /* Success/Error States */

    .swap-status.success .status-icon::after {

      content: '✓';

      display: block;

      font-size: 40px;

      color: #4ade80;

    }



    .swap-status.error .status-icon::after {

      content: '✗';

      display: block;

      font-size: 40px;

      color: #ef4444;

    }



    /* Responsive Design for Swap Modal */

    @media (max-width: 768px) {

      .lofi-swap-container {

        max-width: 95%;

        margin: 10px;

      }



      .lofi-modal-content {

        padding: 16px;

      }



      .swap-amount-input {

        font-size: 20px;

      }



      .swap-output-amount {

        font-size: 20px;

      }



      .swap-direction-toggle {

        padding: 12px;

      }



      .token-icon {

        width: 24px;

        height: 24px;

      }



      .token-symbol {

        font-size: 14px;

      }



      .swap-input-container,

      .swap-output-container {

        padding: 12px;

      }



      .swap-slippage-options {

        flex-wrap: wrap;

      }



      .slippage-option {

        flex: 0 0 calc(50% - 4px);

        margin-bottom: 8px;

      }



      .swap-execute-btn {

        font-size: 16px;

        padding: 14px;

      }



      .swap-detail-row {

        font-size: 12px;

      }



      .lofi-modal-header h2 {

        font-size: 20px;

      }

    }



    @media (max-width: 480px) {

      .lofi-swap-container {

        width: 100%;

        height: 100%;

        max-width: 100%;

        border-radius: 0;

        display: flex;

        flex-direction: column;

      }



      .lofi-modal-overlay {

        padding: 0;

      }



      .lofi-modal-content {

        flex: 1;

        overflow-y: auto;

        padding: 12px;

      }



      .swap-amount-input {

        font-size: 18px;

      }



      .swap-output-amount {

        font-size: 18px;

      }



      .swap-input-token,

      .swap-output-token {

        padding: 6px 10px;

      }



      .token-icon-small {

        width: 18px;

        height: 18px;

      }



      .swap-max-btn {

        padding: 6px 12px;

        font-size: 12px;

      }



      .swap-balance {

        font-size: 11px;

      }



      .balance-refresh-btn {

        padding: 4px;

      }



      .balance-refresh-btn svg {

        width: 12px;

        height: 12px;

      }

    }



    /* High DPI / Retina Display Enhancements */

    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

      .lofi-modal-container {

        border-width: 1px;

      }



      .swap-input-container,

      .swap-output-container,

      .slippage-option {

        border-width: 0.5px;

      }

    }



    /* Fix for small height devices (landscape mobile) */

    @media (max-height: 600px) and (orientation: landscape) {

      .lofi-modal-container {

        max-height: 90vh;

        overflow-y: auto;

      }



      .lofi-modal-header {

        padding: 16px 24px;

      }



      .lofi-modal-content {

        padding: 16px;

      }



      .swap-input-section,

      .swap-output-section,

      .swap-slippage-section {

        margin-bottom: 12px;

      }

    }



    /* Ensure proper text readability */

    .swap-amount-input,

    .swap-output-amount,

    .swap-execute-btn,

    .token-symbol {

      font-family: 'Gluten', -apple-system, BlinkMacSystemFont, sans-serif;

      font-weight: 600;

      letter-spacing: -0.02em;

    }



    /* Improve touch targets on mobile */

    @media (pointer: coarse) {

      .lofi-modal-close {

        width: 44px;

        height: 44px;

        font-size: 32px;

      }



      .slippage-option {

        min-height: 44px;

      }



      .swap-direction-toggle {

        min-height: 56px;

      }



      .swap-max-btn {

        min-width: 60px;

        min-height: 36px;

      }



      .balance-refresh-btn {

        min-width: 32px;

        min-height: 32px;

      }

    }



    /* Fix z-index issues on mobile */

    .lofi-modal-overlay {

      -webkit-backface-visibility: hidden;

      backface-visibility: hidden;

    }



    /* Smooth scrolling on iOS */

    .lofi-modal-content {

      -webkit-overflow-scrolling: touch;

    }



    /* Prevent text selection on interactive elements */

    .slippage-option,

    .swap-max-btn,

    .swap-execute-btn,

    .swap-direction-toggle,

    .balance-refresh-btn {

      -webkit-user-select: none;

      -moz-user-select: none;

      -ms-user-select: none;

      user-select: none;

      -webkit-tap-highlight-color: transparent;

    }



    /* Better number input on mobile */

    #custom-slippage-value {

      -webkit-appearance: none;

      -moz-appearance: textfield;

    }



    #custom-slippage-value::-webkit-inner-spin-button,

    #custom-slippage-value::-webkit-outer-spin-button {

      -webkit-appearance: none;

      margin: 0;

    }