:root {
  --bg: #131417;
  --card: #1a1b1f;
  --card-2: #202127;
  --inner: #141416;
  --line: #26272c;
  --fg: #f4f5f7;
  --fg-dim: #8b8d93;
  --fg-mute: #5f6067;
  --accent: #f0b90b;
  --accent-fg: #1a1500;
  --danger: #ff5a5a;
  --ok: #3ddc97;
  --warn: #f5a524;
  --r-card: 18px;
  --r-pill: 999px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--fg);
  font: 400 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; color: inherit; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
.hidden { display: none !important; }

/* ---------------- topbar ---------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 20px; max-width: 1180px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: .2px; }
.brand-mark {
  width: 26px; height: 26px; border-radius: 8px;
  background: conic-gradient(from 210deg, var(--accent), #ff8a3c 45%, #f0b90b 80%);
}
.brand-name { font-size: 17px; }
.chain-badge {
  font-size: 11px; font-weight: 600; letter-spacing: .4px; color: var(--accent);
  background: rgba(240, 185, 11, .12); border: 1px solid rgba(240, 185, 11, .25);
  padding: 2px 8px; border-radius: var(--r-pill);
}
/* 选链下拉。做成徒手可点的样子，因为这个选择**必须看得见** ——
   前后端不在同一条链时，页面照常渲染，只是每个报价都“无路径”。 */
.chain-select {
  appearance: none; cursor: pointer; padding-right: 20px;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%),
                    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position: calc(100% - 10px) calc(50% + 1px), calc(100% - 6px) calc(50% + 1px);
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.chain-select:hover { border-color: rgba(240, 185, 11, .6); }
.chain-select option { background: var(--card); color: var(--fg); }
.topbar-right { display: flex; align-items: center; gap: 10px; }

.status-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--card); border: 1px solid var(--line); color: var(--fg-dim);
  border-radius: var(--r-pill); padding: 7px 12px; font-size: 12.5px;
}
.status-pill:hover { border-color: #34363c; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-mute); flex: none; }
.dot-ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(61, 220, 151, .13); }
.dot-warn { background: var(--warn); box-shadow: 0 0 0 3px rgba(245, 165, 36, .13); }
.dot-bad { background: var(--danger); box-shadow: 0 0 0 3px rgba(255, 90, 90, .13); }

.btn {
  border: 0; border-radius: var(--r-pill); padding: 9px 16px;
  font-weight: 600; font-size: 14px; transition: filter .15s, background .15s, opacity .15s;
}
.btn-ghost { background: var(--card); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--card-2); }
.btn-primary { background: var(--accent); color: var(--accent-fg); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.07); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------------- swap ---------------- */
.swap { width: min(520px, 100% - 32px); margin: 24px auto 0; }
.swap-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.swap-head h1 { font-size: 20px; margin: 0; font-weight: 600; }

.icon-btn {
  display: grid; place-items: center; width: 34px; height: 34px;
  background: transparent; border: 1px solid transparent; border-radius: 10px; color: var(--fg-dim);
}
.icon-btn:hover { background: var(--card); color: var(--fg); }

/* 连到假后端时的红屏警告：mock 和真后端都在 8080，必须一眼能分辨 */
.mock-banner {
  background: rgba(255, 90, 90, .12); border: 1px solid rgba(255, 90, 90, .4);
  color: #ff9c9c; border-radius: 12px; padding: 10px 12px; margin-bottom: 12px;
  font-size: 12.5px; line-height: 1.6;
}
.mock-banner code { background: rgba(0, 0, 0, .3); padding: 1px 5px; border-radius: 4px; }

.settings {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px; margin-bottom: 12px;
}
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.settings-label { color: var(--fg-dim); font-size: 13.5px; }
.seg { display: flex; gap: 6px; align-items: center; }
.seg-btn {
  background: var(--inner); border: 1px solid transparent; border-radius: var(--r-pill);
  padding: 6px 12px; font-size: 13px; color: var(--fg-dim);
}
.seg-btn.is-active { color: var(--accent-fg); background: var(--accent); font-weight: 600; }
.seg-input {
  width: 92px; background: var(--inner); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 6px 12px; font-size: 13px; outline: none;
}
.seg-input:focus { border-color: #3a3c43; }
.settings-hint { color: var(--fg-mute); font-size: 12px; margin: 10px 0 0; }

/* ---------------- 卡片 ---------------- */
.cards { position: relative; display: grid; gap: 10px; }
.card {
  background: var(--card); border-radius: var(--r-card);
  padding: 18px 20px 16px; display: grid; gap: 6px;
  /* auto 轨道会被子元素的 min-content 撑破卡片，必须显式收敛 */
  grid-template-columns: minmax(0, 1fr);
}
/* wrap：窄屏下 quote-flag 那条长中文标签放不下时另起一行，而不是顶破卡片 */
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; min-width: 0; flex-wrap: wrap; }
.card-label { color: var(--fg-dim); font-size: 15px; }

.pct-group { display: flex; gap: 8px; }
.pct {
  background: var(--inner); border: 0; border-radius: var(--r-pill);
  padding: 7px 14px; font-size: 13.5px; color: var(--fg-dim); transition: background .15s, color .15s;
}
.pct:hover { background: #202024; color: var(--fg); }
.pct:active { transform: translateY(1px); }

.card-main { display: flex; align-items: center; gap: 12px; min-height: 60px; min-width: 0; }
.amount {
  flex: 1 1 auto; min-width: 0; background: none; border: 0; outline: none;
  font-size: 38px; font-weight: 500; letter-spacing: -.5px; padding: 0;
}
.amount::placeholder { color: #55565c; }
.amount[readonly] { cursor: default; }
.amount.is-loading { color: var(--fg-dim); }

.token-pill {
  flex: none; display: inline-flex; align-items: center; gap: 10px;
  background: var(--inner); border: 0; border-radius: var(--r-pill);
  padding: 9px 16px 9px 10px; font-size: 21px; font-weight: 600; letter-spacing: -.2px;
  transition: background .15s;
}
.token-pill:hover { background: #202024; }
.token-pill .caret { color: var(--fg-dim); margin-left: -2px; }
.token-ico {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 10px; font-weight: 700;
  letter-spacing: 0; color: #12131a; background: #3a3b42;
}
.token-ico.is-empty { background: radial-gradient(circle at 30% 30%, #e9eaee, #9a9ba2); }

.card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; min-height: 26px; min-width: 0; color: var(--fg-dim); font-size: 15px;
}
.usd { font-size: 13px; color: var(--fg-mute); }
.balance { display: inline-flex; align-items: center; gap: 9px; margin-left: auto; }
.wallet-ico { color: var(--fg-mute); }

/* 中间的方向切换按钮：压在两张卡的交界处 */
.switch-wrap {
  position: absolute; inset: 0; display: grid; place-items: center;
  pointer-events: none; z-index: 2;
}
.switch-btn {
  pointer-events: auto;
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: #16171a; color: var(--fg); border: 6px solid var(--bg);
  transition: background .15s, transform .2s;
}
.switch-btn:hover { background: #212227; }
.switch-btn.spin svg { animation: spin .35s ease; }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(180deg); } }

.quote-flag {
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill);
  background: rgba(245, 165, 36, .14); color: var(--warn); border: 1px solid rgba(245, 165, 36, .3);
  max-width: 100%; min-width: 0;
}

/* ---------------- 报价明细 ---------------- */
.details {
  margin-top: 14px; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 14px; font-size: 13.5px;
}
.detail-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; color: var(--fg-dim); }
.detail-row span:last-child { color: var(--fg); }
.detail-rate { color: var(--fg); font-weight: 500; }
.details-body { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 6px; }
.link-btn { background: none; border: 0; color: var(--fg-dim); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.link-btn:hover { color: var(--fg); }

.route-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  color: var(--fg); font-size: 12.5px; font-weight: 600;
}
.route-head span:last-child { color: var(--fg-dim); font-weight: 400; }
.route { display: grid; gap: 8px; margin-top: 10px; }
.route-split {
  background: var(--inner); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; font-size: 12.5px; color: var(--fg-dim);
}
.route-split-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 8px;
}
.route-split-name { color: var(--fg); font-weight: 600; }
.route-pct {
  background: rgba(240, 185, 11, .13); color: var(--accent); border-radius: var(--r-pill);
  padding: 2px 8px; font-weight: 600; flex: none;
}
.route-flow { display: grid; gap: 3px; min-width: 0; }
.route-token { display: flex; align-items: center; gap: 8px; color: var(--fg); font-weight: 600; }
.route-token-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--fg-mute); box-shadow: 0 0 0 3px rgba(255, 255, 255, .04);
}
.route-leg {
  min-width: 0; min-height: 24px; margin-left: 3px;
  display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 7px;
}
.route-leg-arrow { color: var(--fg-mute); font-size: 12px; line-height: 1; }
.route-venue { min-width: 0; color: var(--fg-dim); overflow-wrap: anywhere; }
.route-pool { color: var(--fg-mute); font: 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
.route-empty {
  border: 1px dashed var(--line); border-radius: 8px; padding: 12px;
  color: var(--fg-mute); text-align: center; font-size: 12.5px;
}

.msg {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; font-size: 13.5px;
  line-height: 1.6;
  /* 后端的 build 报错是**写成多行**的（哪一片 / 哪个 router / 缺哪个选择子
     各占一行）。默认的 white-space 会把那些 \n 压成空格，四行挤成一段，
     还在句号后留下一个来路不明的空格。pre-line 保住换行、照常合并空格。 */
  white-space: pre-line;
  /* router 地址是 42 个字符连成的一坨，中间没有任何断行机会：不给 anywhere
     的话它既撑破圆角框（窄屏直接横向滚动），又在上一行留下半行空白。 */
  overflow-wrap: anywhere;
  background: rgba(255, 90, 90, .1); border: 1px solid rgba(255, 90, 90, .25); color: #ff9c9c;
}
.msg.is-warn { background: rgba(245, 165, 36, .1); border-color: rgba(245, 165, 36, .28); color: #ffd08a; }
.msg.is-ok { background: rgba(61, 220, 151, .1); border-color: rgba(61, 220, 151, .28); color: #9fecc8; }

.btn-action { width: 100%; margin-top: 14px; padding: 16px; font-size: 16px; border-radius: 16px; }

.exec-log { margin-top: 12px; display: grid; gap: 6px; font-size: 12.5px; color: var(--fg-dim); }
.exec-item { display: flex; gap: 8px; align-items: baseline; }
.exec-item b { color: var(--fg); font-weight: 600; }
.exec-item a { color: var(--accent); text-decoration: none; }
.exec-item a:hover { text-decoration: underline; }

.foot {
  max-width: 520px; margin: 28px auto 40px; padding: 0 16px;
  color: var(--fg-mute); font-size: 12px; text-align: center;
}

/* ---------------- 弹窗 ---------------- */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(6, 7, 9, .68); backdrop-filter: blur(3px); }
.modal-card {
  position: relative; width: min(440px, 100%); max-height: min(640px, 88vh);
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  display: flex; flex-direction: column; overflow: hidden;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 10px; }
.modal-head h2 { font-size: 16px; margin: 0; font-weight: 600; }
.search {
  margin: 0 16px 12px; background: var(--inner); border: 1px solid var(--line);
  border-radius: 12px; padding: 11px 13px; outline: none; font-size: 14px;
}
.search:focus { border-color: #3a3c43; }
.common { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; border-bottom: 1px solid var(--line); }
.common-item {
  display: inline-flex; align-items: center; gap: 7px; background: var(--inner);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 12px 5px 6px; font-size: 13.5px;
}
.common-item:hover:not([disabled]) { background: var(--card-2); }
.common-item[disabled] { opacity: .35; cursor: not-allowed; }
.common-item.is-active { border-color: rgba(240, 185, 11, .45); color: var(--accent); }
.common-item .token-ico { width: 22px; height: 22px; font-size: 9px; }

.token-list { overflow-y: auto; padding: 8px; flex: 1; }
.token-row {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  background: none; border: 0; border-radius: 12px; padding: 10px 10px;
}
.token-row:hover:not([disabled]) { background: var(--card-2); }
.token-row.is-active { background: rgba(240, 185, 11, .07); }
.token-row[disabled] { opacity: .38; cursor: not-allowed; }
.token-row .meta { display: grid; gap: 2px; min-width: 0; }
.token-row .sym { font-weight: 600; font-size: 14.5px; }
.token-row .addr { font-size: 11.5px; color: var(--fg-mute); font-family: ui-monospace, Menlo, monospace; }
.token-row .bal { margin-left: auto; color: var(--fg-dim); font-size: 13px; text-align: right; }
.hub-tag {
  font-size: 10px; color: var(--accent); background: rgba(240, 185, 11, .12);
  border-radius: 4px; padding: 1px 5px; margin-left: 6px; vertical-align: 1px;
}
.modal-foot { margin: 0; padding: 10px 16px 14px; border-top: 1px solid var(--line); color: var(--fg-mute); font-size: 11.5px; }
.empty { color: var(--fg-mute); font-size: 13px; text-align: center; padding: 24px 0; }
.empty-state {
  min-height: 150px; padding: 28px 18px;
  display: grid; place-content: center; gap: 7px; text-align: center;
}
.empty-state strong { color: var(--fg-dim); font-size: 14px; font-weight: 600; }
.empty-state span { color: var(--fg-mute); font-size: 12px; overflow-wrap: anywhere; }

@media (max-width: 520px) {
  .amount { font-size: 32px; }
  .token-pill { font-size: 18px; }
  .pct { padding: 6px 11px; font-size: 12.5px; }
  .card { padding: 16px; }
}