/* ===== RESET ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
  background:#0D0D13; color:#F3F4F6; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; outline:none; }
input { font-family:inherit; outline:none; border:none; }
.hidden { display:none !important; }

/* ===== BG ===== */
.bg-layer {
  position:fixed; inset:0; z-index:0;
  background:radial-gradient(ellipse 60% 50% at 50% -20%, rgba(139, 92, 246, 0.08), transparent),
             radial-gradient(ellipse 40% 60% at 80% 80%, rgba(34, 211, 238, 0.04), transparent),
             #0D0D13;
}

/* ===== HEADER ===== */
header {
  position:relative; z-index:10;
  border-bottom:1px solid rgba(255,255,255,0.06);
  backdrop-filter:blur(12px); background:rgba(13,13,19,0.8);
}
.header-inner {
  max-width:1280px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.header-left { display:flex; align-items:center; gap:32px; }
.logo-link { display:flex; align-items:center; }
.logo-text { font-size:18px; font-weight:700; color:#F3F4F6; letter-spacing:-0.3px; }
.main-nav { display:flex; align-items:center; gap:20px; }
.nav-item {
  font-size:14px; font-weight:500; color:#9CA3AF;
  padding:6px 0; transition:color 0.15s;
  display:flex; align-items:center; gap:4px;
}
.nav-item:hover, .nav-item.active { color:#F3F4F6; }
.btn-connect {
  background:linear-gradient(135deg, #8B5CF6, #A78BFA);
  color:#fff; font-weight:600; font-size:14px;
  padding:8px 18px; border-radius:10px;
  transition:opacity 0.15s;
}
.btn-connect:hover { opacity:0.9; }
.btn-connect.connected {
  background:rgba(139,92,246,0.2); color:#C4B5FD;
  font-size:13px; font-family:'SF Mono', 'Fira Code', monospace;
}
.btn-connect:disabled { opacity:0.6; cursor:default; }

/* ===== MAIN ===== */
main { position:relative; z-index:1; padding:40px 16px 60px; }
.bridge-wrapper { max-width:480px; margin:0 auto; }
.bridge-card {
  background:rgba(22,22,30,0.8); border:1px solid #23222C;
  border-radius:16px; padding:24px;
  display:flex; flex-direction:column; gap:12px;
  backdrop-filter:blur(8px); transition:filter 0.3s;
}
.bridge-card.blurred { filter:blur(3px); }

/* ===== TRANSFER SECTION ===== */
.transfer-section {
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06);
  border-radius:14px; padding:16px;
}
.section-label { font-size:12px; font-weight:500; color:#6B7280; margin-bottom:10px; text-transform:uppercase; letter-spacing:0.5px; }

/* Network dropdown */
.network-dropdown-wrapper { position:relative; margin-bottom:10px; }
.network-dropdown {
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06);
  border-radius:10px; padding:8px 12px; width:auto;
  font-size:14px; font-weight:500; color:#F3F4F6;
  transition:border-color 0.15s;
}
.network-dropdown:hover { border-color:rgba(255,255,255,0.14); }
.network-icon { width:20px; height:20px; border-radius:50%; }
.chevron-down { margin-left:4px; }
.network-dropdown-menu {
  position:absolute; top:calc(100% + 6px); left:0; z-index:20;
  background:#1A1A22; border:1px solid #2A2A38; border-radius:12px;
  padding:6px; min-width:200px; max-height:260px; overflow-y:auto;
  box-shadow:0 12px 40px rgba(0,0,0,0.5);
}
.network-option {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:8px; cursor:pointer;
  font-size:14px; color:#D1D5DB; transition:background 0.1s;
}
.network-option:hover { background:rgba(255,255,255,0.06); }
.network-option.selected { background:rgba(139,92,246,0.15); color:#C4B5FD; }
.nw-icon { width:22px; height:22px; border-radius:50%; }

/* Amount row */
.amount-row { display:flex; align-items:center; gap:8px; }
.amount-input {
  flex:1; background:transparent; font-size:28px; font-weight:600;
  color:#fff; min-width:0;
}
.amount-input::placeholder { color:#374151; }
.token-dropdown-wrapper { position:relative; }
.token-dropdown {
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08);
  border-radius:8px; padding:6px 10px;
  font-size:14px; font-weight:500; color:#F3F4F6;
  white-space:nowrap;
}
.token-dropdown:hover { border-color:rgba(255,255,255,0.16); }
.token-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.eth-dot { background:#627EEA; } .usdc-dot { background:#2775CA; }
.usdt-dot { background:#26A17B; } .wbtc-dot { background:#F7931A; }
.dai-dot { background:#F5AC37; }
.token-dropdown-menu {
  position:absolute; top:calc(100% + 6px); right:0; z-index:20;
  background:#1A1A22; border:1px solid #2A2A38; border-radius:12px;
  padding:6px; min-width:180px; box-shadow:0 12px 40px rgba(0,0,0,0.5);
}
.token-option {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:8px; cursor:pointer;
  font-size:14px; color:#D1D5DB;
}
.token-option:hover { background:rgba(255,255,255,0.06); }
.token-option.selected { background:rgba(139,92,246,0.15); color:#C4B5FD; }
.token-fullname { color:#6B7280; font-size:12px; margin-left:auto; }

.btn-max {
  background:rgba(139,92,246,0.15); color:#C4B5FD;
  font-size:13px; font-weight:600; padding:6px 12px;
  border-radius:6px; white-space:nowrap;
}
.btn-max:hover { background:rgba(139,92,246,0.25); }

.balance-row { margin-top:8px; }
.balance-text { font-size:12px; color:#6B7280; }

/* ===== DIRECTION ===== */
.direction { display:flex; justify-content:center; margin:-6px 0; }
.direction-circle {
  width:32px; height:32px; border-radius:50%;
  background:rgba(139,92,246,0.15); border:1px solid rgba(139,92,246,0.3);
  display:flex; align-items:center; justify-content:center;
}
.direction-svg { display:block; }

/* ===== DEST INPUT ===== */
.dest-input-row { margin-top:10px; }
.dest-input {
  width:100%; background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06); border-radius:10px;
  padding:10px 14px; font-size:14px; color:#F3F4F6;
  font-family:'SF Mono', 'Fira Code', monospace;
}
.dest-input::placeholder { color:#4B5563; }

/* ===== TX DETAILS ===== */
.tx-details { display:flex; flex-direction:column; gap:8px; padding:4px 0; }
.tx-detail-row { display:flex; justify-content:space-between; align-items:center; }
.tx-detail-label { font-size:13px; color:#6B7280; }
.tx-detail-value { font-size:13px; color:#D1D5DB; font-weight:500; }

/* ===== REVIEW BTN ===== */
.btn-review {
  width:100%; background:linear-gradient(135deg, #7C3AED, #8B5CF6);
  color:#fff; font-size:15px; font-weight:600; padding:14px;
  border-radius:12px; transition:opacity 0.15s;
  margin-top:8px;
}
.btn-review:hover:not(:disabled) { opacity:0.9; }
.btn-review:disabled { background:rgba(255,255,255,0.05); color:#6B7280; cursor:default; }
.btn-review.success { background:rgba(34,197,94,0.2); color:#4ADE80; }

/* ===== CONVERT OVERLAY ===== */
.convert-overlay {
  position:absolute; inset:0; z-index:30;
  display:flex; align-items:center; justify-content:center;
  background:rgba(13,13,19,0.7); border-radius:16px;
}
.convert-card {
  background:#1A1A22; border:1px solid #2A2A38; border-radius:14px;
  padding:28px 24px; text-align:center; width:90%;
}
.convert-spinner { display:flex; justify-content:center; margin-bottom:16px; }
.spinner-ring {
  width:36px; height:36px; border:3px solid #2A2A38;
  border-top-color:#8B5CF6; border-radius:50%;
  animation:spin 0.8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.convert-title { font-size:16px; font-weight:600; color:#F3F4F6; margin-bottom:4px; }
.convert-sub { font-size:13px; color:#6B7280; margin-bottom:12px; }
.convert-amounts { font-size:14px; color:#D1D5DB; margin-bottom:16px; display:flex; gap:8px; justify-content:center; }
.convert-arr { color:#8B5CF6; }
.convert-bar {
  height:4px; background:#2A2A38; border-radius:2px; overflow:hidden;
}
.convert-bar-fill {
  height:100%; width:0%; background:linear-gradient(90deg, #7C3AED, #A78BFA);
  border-radius:2px; transition:width 3s ease;
}

/* ===== TIMELINE ===== */
.bridge-timeline {
  display:flex; align-items:center; justify-content:center; gap:0;
  padding:8px 0;
}
.tl-step { display:flex; flex-direction:column; align-items:center; gap:4px; }
.tl-dot {
  width:10px; height:10px; border-radius:50%;
  background:#2A2A38; border:2px solid #2A2A38;
  transition:all 0.3s;
}
.tl-step.active .tl-dot { background:#8B5CF6; border-color:#8B5CF6; box-shadow:0 0 8px rgba(139,92,246,0.5); }
.tl-step.done .tl-dot { background:#22C55E; border-color:#22C55E; }
.tl-label { font-size:11px; color:#6B7280; white-space:nowrap; }
.tl-step.active .tl-label { color:#C4B5FD; }
.tl-line { width:40px; height:1px; background:#2A2A38; margin:0 4px; margin-bottom:18px; }

/* ===== STATUS ===== */
.status-msg {
  text-align:center; padding:10px 14px; border-radius:10px; font-size:13px; font-weight:500; margin-top:4px;
}
.status-msg.processing { background:rgba(251,191,36,0.1); color:#FBBF24; }
.status-msg.success { background:rgba(34,197,94,0.1); color:#4ADE80; }
.status-msg.error { background:rgba(239,68,68,0.1); color:#EF4444; }

/* ===== FOOTER ===== */
footer { position:relative; z-index:1; border-top:1px solid rgba(255,255,255,0.04); padding:24px 20px 32px; }
.footer-inner { max-width:1280px; margin:0 auto; text-align:center; }
.footer-stats { display:flex; justify-content:center; gap:40px; margin-bottom:16px; flex-wrap:wrap; }
.footer-stat { display:flex; flex-direction:column; }
.footer-stat-val { font-size:20px; font-weight:700; color:#F3F4F6; }
.footer-stat-lbl { font-size:12px; color:#6B7280; }
.footer-links { display:flex; justify-content:center; gap:20px; margin-bottom:12px; }
.footer-links a { font-size:13px; color:#6B7280; }
.footer-links a:hover { color:#D1D5DB; }
.footer-copy { font-size:12px; color:#4B5563; }

/* ===== WALLET MODAL ===== */
.wallet-modal-overlay {
  position:fixed; inset:0; z-index:100;
  background:rgba(0,0,0,0.6); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  animation:overlayFadeIn 0.15s ease;
}
@keyframes overlayFadeIn { from {opacity:0} to {opacity:1} }

.wallet-modal {
  background:linear-gradient(135deg, #131318 0%, #1A1A22 100%);
  border:1px solid #2A2A38;
  border-radius:16px;
  width:100%; max-width:420px; max-height:80vh;
  display:flex; flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  animation:modalSlideIn 0.2s ease;
}
@keyframes modalSlideIn { from {transform:translateY(16px); opacity:0} to {transform:translateY(0); opacity:1} }

.wallet-modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 20px 12px;
  border-bottom:1px solid #22222C;
}
.wallet-modal-title { font-size:18px; font-weight:600; color:#F3F4F6; margin:0; }
.wallet-modal-close {
  background:none; border:none; cursor:pointer;
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border-radius:8px; transition:background 0.15s;
}
.wallet-modal-close:hover { background:rgba(255,255,255,0.06); }

.wallet-modal-body {
  padding:12px 16px;
  overflow-y:auto;
  display:flex; flex-direction:column; gap:6px;
}

.wallet-option {
  display:flex; align-items:center; gap:12px;
  width:100%; padding:12px 14px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;
  cursor:pointer;
  transition:background 0.15s, border-color 0.15s;
  text-align:left; color:#F3F4F6;
}
.wallet-option:hover { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.12); }
.wallet-option-icon {
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.wallet-option-info { display:flex; flex-direction:column; gap:2px; }
.wallet-option-name { font-size:15px; font-weight:500; color:#F3F4F6; }
.wallet-option-desc { font-size:12px; color:#6B7280; }

.wallet-modal-divider {
  display:flex; align-items:center; gap:10px; padding:4px 0;
}
.wallet-modal-divider::before, .wallet-modal-divider::after {
  content:""; flex:1; height:1px; background:#22222C;
}
.wallet-modal-divider-text {
  font-size:11px; font-weight:600; color:#4B5563; letter-spacing:0.6px;
}

/* ===== RESPONSIVE ===== */
@media (max-width:480px) {
  .main-nav { display:none; }
  .bridge-card { padding:16px; border-radius:12px; }
  .amount-input { font-size:24px; }
  .footer-stats { gap:20px; }
}