:root{
  --bg:#0a0c14;
  --panel:#11141d;
  --panel-2:#161a26;
  --border:#222837;
  --text:#e6e9f2;
  --muted:#8b93a8;
  --accent:#7c5cff;
  --accent-2:#34d2ff;
  --warden:#7c5cff;
  --bsc:#f0b90b;
  --base:#0052ff;
  --ok:#27d39a;
  --err:#ff5b6e;
  --shadow:0 30px 80px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  min-height:100vh;
  overflow-x:hidden;
}
.bg-grid{
  position:fixed;inset:0;z-index:-2;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
}
.bg-glow{position:fixed;z-index:-1;border-radius:50%;filter:blur(120px);opacity:.35;pointer-events:none}
.bg-glow.a{width:540px;height:540px;background:#7c5cff;top:-160px;left:-160px}
.bg-glow.b{width:480px;height:480px;background:#34d2ff;bottom:-160px;right:-160px}

.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;border-bottom:1px solid var(--border);
  backdrop-filter:blur(8px);
  position:sticky;top:0;z-index:5;background:rgba(10,12,20,.6);
}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{
  width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,#7c5cff,#34d2ff);
  box-shadow:0 8px 30px rgba(124,92,255,.4);
  position:relative;
}
.brand-mark::after{
  content:"";position:absolute;inset:6px;border-radius:6px;
  background:radial-gradient(circle at 30% 30%,#fff8,transparent 60%);
}
.brand-title{font-weight:800;letter-spacing:.2px}
.brand-sub{color:var(--muted);font-size:12px}

.topbar-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ghost-btn{
  background:transparent;color:var(--text);
  border:1px solid var(--border);border-radius:10px;
  padding:9px 12px;cursor:pointer;font-weight:500;
  transition:.15s border-color,.15s background;
}
.ghost-btn:hover{border-color:#3a4357;background:#1a2030}
.primary-btn{
  background:linear-gradient(135deg,#7c5cff,#34d2ff);
  border:none;color:#fff;font-weight:700;
  border-radius:10px;padding:10px 16px;cursor:pointer;
  box-shadow:0 8px 24px rgba(124,92,255,.35);
  transition:transform .12s ease;
}
.primary-btn:hover{transform:translateY(-1px)}
.primary-btn.connected{
  background:linear-gradient(135deg,#1f2940,#2a3450);
  box-shadow:none;
}

.stage{
  max-width:1080px;margin:36px auto;padding:0 24px;
  display:grid;grid-template-columns:1fr 340px;gap:22px;
  align-items:start;
}
@media (max-width: 900px){
  .stage{grid-template-columns:1fr}
}

.card{
  background:linear-gradient(180deg,#141826,#10131c);
  border:1px solid var(--border);
  border-radius:18px;padding:22px;
  box-shadow:var(--shadow);
}
.card.slim{padding:18px}
.card-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.card-title{font-weight:700;font-size:18px}
.card-sub{color:var(--muted);font-size:12px}

.route{
  display:grid;grid-template-columns:1fr auto 1fr;gap:10px;
  align-items:end;margin-bottom:14px;
}
.route-side{display:flex;flex-direction:column;gap:6px}
.route-label{color:var(--muted);font-size:12px;font-weight:500}
.chain-pill{
  display:flex;align-items:center;gap:10px;
  background:var(--panel-2);border:1px solid var(--border);
  border-radius:12px;padding:10px 12px;cursor:pointer;
  color:var(--text);font-weight:600;font-size:15px;
  transition:.15s border-color;
}
.chain-pill:hover{border-color:#3a4357}
.chain-dot{width:14px;height:14px;border-radius:50%}
.chain-dot[data-chain="wardenprotocol"]{background:#7c5cff;box-shadow:0 0 0 3px rgba(124,92,255,.25)}
.chain-dot[data-chain="bsc"]{background:#f0b90b;box-shadow:0 0 0 3px rgba(240,185,11,.18)}
.chain-dot[data-chain="base"]{background:#0052ff;box-shadow:0 0 0 3px rgba(0,82,255,.22)}
.caret{color:var(--muted);font-size:12px;margin-left:auto}

.balance{color:var(--muted);font-size:12px}
.balance-key{opacity:.8}
.swap-dir{
  align-self:center;
  background:var(--panel-2);border:1px solid var(--border);
  border-radius:10px;padding:8px 10px;font-size:16px;cursor:pointer;color:var(--text);
  transition:.15s transform;
}
.swap-dir:hover{transform:rotate(180deg)}

.field{margin-top:12px}
.field-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.field label{color:var(--muted);font-size:12px;font-weight:500}
.link-btn{
  background:transparent;border:0;color:var(--accent-2);
  cursor:pointer;font-weight:600;font-size:12px;padding:0;
}
.link-btn:hover{text-decoration:underline}

.amount-row{
  display:flex;align-items:center;gap:8px;
  background:var(--panel-2);border:1px solid var(--border);
  border-radius:12px;padding:10px 14px;
}
.amount-row input{
  flex:1;background:transparent;border:0;outline:0;
  color:var(--text);font-size:22px;font-weight:700;
}
.amount-row input::placeholder{color:#4a5266}
.amount-suffix{color:var(--muted);font-weight:600}

.field input[type="text"]{
  width:100%;background:var(--panel-2);border:1px solid var(--border);
  border-radius:12px;padding:11px 14px;color:var(--text);font-size:14px;outline:0;
  font-family:'JetBrains Mono',ui-monospace,Consolas,monospace;
}
.field input[type="text"]:focus{border-color:#3a4357}
.hint{color:var(--muted);font-size:12px;margin-top:6px;min-height:16px}

.quote{
  margin-top:14px;background:var(--panel-2);border:1px solid var(--border);
  border-radius:12px;padding:12px 14px;font-size:13px;
}
.quote-row{display:flex;justify-content:space-between;padding:4px 0;color:var(--muted)}
.quote-row span:last-child{color:var(--text);font-weight:500}
.quote-row.total{border-top:1px dashed #2c3346;margin-top:6px;padding-top:8px}
.quote-row.total span:last-child{color:var(--text);font-weight:700}

.bridge-btn{
  margin-top:16px;width:100%;
  background:linear-gradient(135deg,#7c5cff,#34d2ff);
  border:0;color:#fff;font-weight:800;font-size:16px;
  border-radius:14px;padding:14px 16px;cursor:pointer;
  box-shadow:0 12px 40px rgba(124,92,255,.4);
  transition:transform .12s ease,opacity .12s ease;
}
.bridge-btn:hover{transform:translateY(-1px)}
.bridge-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

.status{margin-top:14px;min-height:20px;font-size:13px;color:var(--muted);word-break:break-all}
.status.ok{color:var(--ok)}
.status.err{color:var(--err)}
.status a{color:var(--accent-2)}

.history-list{display:flex;flex-direction:column;gap:8px;max-height:520px;overflow:auto}
.history-item{
  background:var(--panel-2);border:1px solid var(--border);
  border-radius:10px;padding:10px 12px;font-size:12px;
  display:flex;flex-direction:column;gap:4px;
}
.history-item .h-row{display:flex;justify-content:space-between;gap:8px;color:var(--muted)}
.history-item .h-amount{color:var(--text);font-weight:700}
.history-item a{color:var(--accent-2);text-decoration:none}
.history-item a:hover{text-decoration:underline}

.muted{color:var(--muted)}
.small{font-size:12px}

.modal.hidden{display:none}
.modal{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:center;justify-content:center;
}
.modal-back{position:absolute;inset:0;background:rgba(5,7,12,.6);backdrop-filter:blur(4px)}
.modal-body{
  position:relative;width:min(92vw,420px);
  background:#11141d;border:1px solid var(--border);border-radius:16px;
  padding:18px;box-shadow:var(--shadow);
}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.modal-title{font-weight:700;font-size:16px}
.modal-x{background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:16px}
.chain-list,.wallet-list{display:flex;flex-direction:column;gap:6px}
.row-pick{
  display:flex;align-items:center;gap:12px;
  background:var(--panel-2);border:1px solid var(--border);
  border-radius:12px;padding:10px 12px;cursor:pointer;
  color:var(--text);
}
.row-pick:hover{border-color:#3a4357;background:#1a2030}
.row-pick img{width:24px;height:24px;border-radius:6px}
.row-pick .row-title{font-weight:600;font-size:14px}
.row-pick .row-sub{color:var(--muted);font-size:12px;margin-left:auto}

.footnote{
  text-align:center;color:var(--muted);font-size:12px;
  padding:18px;
}
.footnote code{background:var(--panel);padding:1px 6px;border-radius:6px;border:1px solid var(--border)}
.footnote a{color:var(--accent-2);text-decoration:none}
.footnote a:hover{text-decoration:underline}