/* Vantemio Bridge / Swap (Stargate V2 & LayerZero) — Compact Cyber-Glass Edition */

body.redesign.edition[data-page="bridge-swap"] {
  color-scheme: dark !important;
  background-color: #060b17 !important;
  background-image: 
    radial-gradient(circle at 18% 12%, rgba(0, 242, 254, 0.16) 0%, transparent 48%),
    radial-gradient(circle at 82% 28%, rgba(138, 43, 226, 0.18) 0%, transparent 52%),
    radial-gradient(circle at 50% 88%, rgba(245, 158, 11, 0.12) 0%, transparent 55%),
    radial-gradient(circle at 8% 85%, rgba(0, 242, 254, 0.08) 0%, transparent 40%),
    linear-gradient(rgba(0, 242, 254, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 242, 254, 0.035) 1px, transparent 1px) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 36px 36px, 36px 36px !important;
  background-position: 0 0, 0 0, 0 0, 0 0, -1px -1px, -1px -1px !important;
  background-attachment: fixed !important;
  color: #e2eaf6 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  min-height: 100vh !important;
}

body.redesign.edition[data-page="bridge-swap"] main#main.main {
  max-width: 640px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 24px 14px 64px !important;
  background: transparent !important;
}

/* Header & Badges */
.bridge-swap-page {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  align-items: center !important;
}

.bridge-swap-heading {
  text-align: center !important;
  margin-bottom: 4px !important;
  max-width: 520px !important;
}

.bridge-swap-kicker {
  display: inline-block !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #00f2fe !important;
  margin-bottom: 8px !important;
  text-shadow: 0 0 12px rgba(0, 242, 254, 0.5) !important;
}

.bridge-swap-heading h1 {
  font-family: 'Unbounded', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(1.8rem, 4vw, 2.5rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.03em !important;
  margin: 0 0 10px !important;
  background: linear-gradient(135deg, #ffffff 30%, #00f2fe 80%, #4facfe 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 4px 16px rgba(0, 242, 254, 0.25)) !important;
}

.bridge-swap-heading p.bridge-swap-lead,
.bridge-swap-heading > p {
  font-size: 0.95rem !important;
  color: #a3bad2 !important;
  margin: 0 auto 14px !important;
  line-height: 1.5 !important;
}

.bridge-protocol-badges {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 6px !important;
}

.bridge-badge {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  padding: 4px 11px !important;
  border-radius: 999px !important;
  letter-spacing: 0.04em !important;
  border: 1px solid rgba(0, 242, 254, 0.25) !important;
  background: rgba(8, 20, 38, 0.7) !important;
  backdrop-filter: blur(12px) !important;
  color: #00f2fe !important;
}

.bridge-badge--stargate {
  border-color: rgba(183, 148, 244, 0.35) !important;
  color: #d6bcfa !important;
}

.bridge-badge--zero {
  border-color: rgba(16, 185, 129, 0.35) !important;
  color: #34d399 !important;
}

/* COMPACT TRADING WIDGET (Max width 480px) */
.trading-widget,
.bridge-swap-page .trading-widget,
body.edition[data-page="donations"] .trading-widget {
  width: min(100%, 480px) !important;
  margin: 0 auto !important;
  background: rgba(8, 16, 32, 0.82) !important;
  backdrop-filter: blur(28px) !important;
  border: 1px solid rgba(0, 242, 254, 0.22) !important;
  border-top: 1px solid rgba(0, 242, 254, 0.45) !important;
  border-radius: 22px !important;
  padding: 20px !important;
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.65),
    0 0 30px rgba(0, 242, 254, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  box-sizing: border-box !important;
}

.trading-widget header,
.bridge-swap-page .trading-widget header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(0, 242, 254, 0.12) !important;
}

.trading-widget header h2,
.bridge-swap-page .trading-widget header h2 {
  font-family: 'Unbounded', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: #ffffff !important;
}

.trading-widget .trading-transfer-provider,
.bridge-swap-page .trading-widget .trading-transfer-provider {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: #00f2fe !important;
  background: rgba(0, 242, 254, 0.08) !important;
  border: 1px solid rgba(0, 242, 254, 0.22) !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
}

/* Tabs: Swap / Bridge */
.trading-transfer-tabs {
  display: flex !important;
  gap: 6px !important;
  background: rgba(5, 11, 24, 0.85) !important;
  padding: 4px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0, 242, 254, 0.15) !important;
  margin-bottom: 16px !important;
}

.trading-transfer-tabs button[role="tab"] {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #8da4be !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.trading-transfer-tabs button[role="tab"][aria-selected="true"] {
  background: linear-gradient(135deg, rgba(0, 242, 254, 0.16), rgba(138, 43, 226, 0.22)) !important;
  border-color: rgba(0, 242, 254, 0.45) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 242, 254, 0.2) !important;
}

/* Workbench: Single-Column Compact Vertical Flow */
.swap-widget__workbench {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.swap-widget__entry {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.swap-widget__grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  position: relative !important;
}

/* Swap Field Cards (From / To) */
.swap-field {
  background: rgba(10, 18, 36, 0.85) !important;
  border: 1px solid rgba(0, 242, 254, 0.16) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.swap-field:focus-within {
  border-color: rgba(0, 242, 254, 0.48) !important;
  box-shadow: 0 0 16px rgba(0, 242, 254, 0.18) !important;
}

.swap-field > span {
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  color: #8da4be !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.swap-field__row {
  display: flex !important;
  gap: 8px !important;
}

.transfer-picker {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(16, 28, 54, 0.9) !important;
  border: 1px solid rgba(0, 242, 254, 0.2) !important;
  border-radius: 8px !important;
  padding: 5px 8px !important;
  gap: 6px !important;
  flex: 1 !important;
  min-width: 100px !important;
}

.transfer-picker select {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  outline: none !important;
  width: 100% !important;
}

.transfer-picker select option {
  background: #0d172e !important;
  color: #e2eaf6 !important;
}

.swap-field input[data-trading-amount],
.swap-field input[data-transfer-receive] {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  outline: none !important;
  width: 100% !important;
  padding: 2px 0 !important;
}

.swap-field input::placeholder {
  color: #435b75 !important;
}

/* Interactive Amount Presets */
.swap-amount-presets {
  display: flex !important;
  gap: 6px !important;
  margin-top: -2px !important;
  justify-content: flex-end !important;
}

.swap-preset-btn {
  background: rgba(0, 242, 254, 0.08) !important;
  border: 1px solid rgba(0, 242, 254, 0.22) !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #00f2fe !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}

.swap-preset-btn:hover {
  background: rgba(0, 242, 254, 0.28) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

/* Compact Swap Arrow Button */
.swap-widget__arrow {
  align-self: center !important;
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: rgba(14, 26, 50, 0.95) !important;
  border: 1px solid rgba(0, 242, 254, 0.35) !important;
  color: #00f2fe !important;
  font-size: 1rem !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
  cursor: pointer !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease !important;
  margin: -6px 0 !important;
  z-index: 2 !important;
  padding: 0 !important;
}

.swap-widget__arrow:hover {
  transform: rotate(180deg) scale(1.15) !important;
  border-color: #00f2fe !important;
  box-shadow: 0 0 16px rgba(0, 242, 254, 0.6) !important;
}

/* Collapsible Recipient Address */
.swap-recipient-toggle {
  background: rgba(10, 18, 36, 0.7) !important;
  border: 1px solid rgba(0, 242, 254, 0.16) !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  margin-top: 4px !important;
  font-size: 0.82rem !important;
  transition: all 0.2s ease !important;
}

.swap-recipient-toggle summary {
  cursor: pointer !important;
  font-weight: 600 !important;
  color: #00f2fe !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  user-select: none !important;
  outline: none !important;
}

.swap-recipient-toggle summary small {
  color: #6a82a0 !important;
  font-size: 0.72rem !important;
}

.swap-recipient-toggle .swap-recipient {
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(0, 242, 254, 0.12) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.swap-recipient-toggle .swap-recipient input {
  background: rgba(6, 12, 26, 0.9) !important;
  border: 1px solid rgba(0, 242, 254, 0.22) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.82rem !important;
  padding: 8px 10px !important;
  outline: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.swap-widget__foot {
  font-size: 0.74rem !important;
  color: #6a85a4 !important;
  margin: 4px 0 !important;
}

/* Receipt / Quote Sidebar (Now Inline Under Inputs) */
.swap-widget__receipt {
  background: rgba(10, 18, 36, 0.82) !important;
  border: 1px solid rgba(0, 242, 254, 0.16) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.swap-widget__receipt-head h3 {
  font-family: 'Unbounded', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.swap-widget__meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  background: rgba(6, 12, 26, 0.7) !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(0, 242, 254, 0.1) !important;
}

.swap-widget__meta > span {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 0.8rem !important;
  color: #8da4be !important;
}

.swap-widget__meta > span b {
  font-weight: 500 !important;
}

.swap-widget__meta > span [data-transfer-value] {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 600 !important;
  color: #00f2fe !important;
}

/* Quote CTA Button */
.swap-widget__receipt button[data-transfer-get-quote],
.swap-widget__receipt .v-button {
  background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%) !important;
  color: #040c1a !important;
  font-family: 'Unbounded', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  padding: 12px 18px !important;
  border-radius: 10px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 16px rgba(0, 242, 254, 0.4) !important;
  text-align: center !important;
  width: 100% !important;
}

.swap-widget__receipt button[data-transfer-get-quote]:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 22px rgba(0, 242, 254, 0.6) !important;
}

.swap-widget__receipt button[data-transfer-get-quote]:disabled {
  background: rgba(30, 45, 68, 0.5) !important;
  color: #5c728e !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

.swap-widget__actions {
  display: flex !important;
  gap: 10px !important;
  justify-content: space-between !important;
}

.swap-widget__actions .v-textlink {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: #00f2fe !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  text-decoration: underline !important;
  padding: 0 !important;
}

.swap-widget__status {
  font-size: 0.74rem !important;
  color: #6a85a4 !important;
  line-height: 1.35 !important;
}

.trading-service-note {
  text-align: center !important;
  font-size: 0.82rem !important;
  color: #8da4be !important;
  max-width: 520px !important;
  margin: 14px auto 0 !important;
  line-height: 1.5 !important;
}

/* FIX FOR BOTTOM ICONS: Strict size constraints on all icons, apertures, and figures */
.bridge-swap-page img,
body.edition[data-page="donations"] img,
.creator-platform-grid img,
.footer img {
  max-width: 100% !important;
  height: auto !important;
}

.footer-brand img,
.brand-mark-img {
  max-width: 36px !important;
  height: 36px !important;
  object-fit: contain !important;
}

.vee-aperture,
.vee-stage,
.ai-host-portrait {
  max-width: 160px !important;
  max-height: 160px !important;
  margin: 0 auto !important;
}