/* CURVESIGHT — Swap page (after /ui.css). Token picker + compact widget styles are injected by trade.js. */
.sw-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; align-items: start; padding-bottom: 24px; }
.sw-card { padding: 24px; }
.sw-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.sw-top p { font-size: 15px; }
.seg--sm button { height: 32px; padding: 0 13px; font-size: 14.5px; }
.sw-card .amt__row input { font-size: 32px; }
.sw-card .amt__row input[readonly] { cursor: default; }
.sw-card #getBox.is-est .amt__row input { color: var(--ink-2); }
.sw-card .amt__top button { font: 400 12.5px/1 var(--mono); color: var(--muted); }
.sw-card .amt__top button:hover { color: var(--blue-text); }
.sw-card .amt__top button span { color: var(--ink-2); }
.sw-bal { font: 400 12.5px/1 var(--mono); color: var(--muted); }
.sw-bal span { color: var(--ink-2); }
.amt__sub span:last-child { color: var(--blue-text); }
.tokbtn.is-empty { background: var(--blue); border-color: var(--blue); color: #000; padding: 0 14px; }
.tokbtn.is-empty svg { color: #000; }
.tokbtn.is-empty:hover { background: #e9ebf0; }
.sw-sel { font-size: 15px; }
.tok--eth { background: #1d1d22 !important; display: inline-grid; place-items: center; }
.sw-label { margin: 22px 0 10px; font-size: 14px; color: var(--ink-2); }
.sw-hint { margin-top: 8px; font-size: 13px; }
.sw-act { margin-top: 18px; padding: 16px; display: grid; gap: 14px; }
.sw-act > p { font-size: 14.5px; }
.sw-ack { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid #ff7a7a55; border-radius: var(--radius-sm); background: var(--bad-dim); font-size: 14px; color: #ffc9c9; cursor: pointer; }
.sw-ack input { margin-top: 3px; accent-color: var(--bad); width: 16px; height: 16px; flex: none; }
.btn--warn { background: var(--bad); border-color: var(--bad); color: #160303; }
.btn--warn:hover { background: #ff9090; }
.step span small { font-size: 12.5px; }

.sw-side { display: grid; gap: 18px; }
.sw-panel { padding: 22px 24px; }
.sw-ph { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sw-age { font-size: 12px; color: var(--faint); }
.sw-full { font-size: 14px; color: var(--blue-text); }
.sw-full:hover { color: #fff; }
#quote > p, #verdict > p { font-size: 15px; line-height: 1.65; }
.sw-route { margin-bottom: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.sw-route span:not(.tag) { color: var(--ink); }
.sw-qnote { margin-top: 12px; }
.sw-v { display: flex; gap: 18px; align-items: center; }
.sw-v h4 { font: 500 22px/1.2 var(--sans); letter-spacing: -0.02em; margin: 6px 0 4px; color: var(--c); }
.sw-v .ring span { color: var(--ink); }
.sw-vload { display: flex; gap: 18px; align-items: center; }
.sw-find { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line); }
.sw-find li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--ink); }
.sw-find li:last-child { border-bottom: 0; padding-bottom: 0; }
.sw-find li > i { width: 8px; height: 8px; margin-top: 7px; border-radius: 2px; background: var(--c); flex: none; }
.sw-find li b { font-weight: 500; }
.sw-find li .mono { font-size: 13px; color: var(--c); }
.sw-find small { font-size: 13px; line-height: 1.5; }
.sw-how p.small { margin-top: 12px; line-height: 1.6; }
.sw-how .kv b { color: var(--ink-2); }

/* ---------- polish: route path, count-ups, success / error, art flash ---------- */
.sw-path { display: flex; align-items: center; min-width: 0; }
.sw-node { display: inline-flex; align-items: center; gap: 8px; flex: none; min-width: 0; max-width: 34%; }
.sw-node b { font: 500 14px/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-node .tok { width: 24px; height: 24px; border: 0; }
.sw-node--mid { padding: 5px 10px 5px 8px; border: 1px solid #ffffff66; border-radius: 999px; background: #ffffff14; box-shadow: 0 0 18px #ffffff26; }
.sw-node--mid b { font: 400 12.5px/1.2 var(--mono); color: var(--blue-text); }
.sw-hub { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-text); box-shadow: 0 0 8px var(--blue); flex: none; animation: blink 1.6s ease-in-out infinite; }
.sw-link { position: relative; flex: 1 1 18px; min-width: 14px; height: 2px; margin: 0 8px; background: repeating-linear-gradient(90deg, #ffffffaa 0 5px, transparent 5px 10px); background-size: 20px 2px; animation: swDash .9s linear infinite; }
.sw-link::after { content: ""; position: absolute; top: -2px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px var(--blue-text); animation: swRun 1.8s cubic-bezier(.5,0,.5,1) infinite; }
.sw-path .sw-link + .sw-node + .sw-link::after { animation-delay: .9s; }
.sw-path.is-busy .sw-link { animation-duration: .35s; }
@keyframes swDash { to { background-position: 20px 0; } }
@keyframes swRun { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 6px); opacity: 0; } }
.sw-route { padding-bottom: 16px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
[data-cu] { font-variant-numeric: tabular-nums; }
#getBox.is-load .amt__row input { background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: sk 1.3s linear infinite; border-radius: 4px; color: transparent; max-width: 60%; }
.sw-ok { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid #6fd3a466; border-radius: var(--radius); background: var(--good-dim); animation: swPop .5s cubic-bezier(.2,.9,.3,1.2); }
.sw-ok > i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--good); color: #04150c; font: 700 17px/1 var(--sans); font-style: normal; flex: none; box-shadow: 0 0 0 6px #6fd3a41f; }
.sw-ok b { font-weight: 600; font-size: 15.5px; }
.sw-ok p { font-size: 13.5px; color: var(--ink-2); margin-top: 2px; }
.sw-ok a { color: var(--good); }
.sw-ok .btn { margin-left: auto; }
@keyframes swPop { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.sw-errbox { display: grid; gap: 4px; }
.sw-errbox b { color: var(--bad); font-weight: 600; }
.phead__art canvas.is-flash { animation: swFlash 1.6s ease-out; }
@keyframes swFlash { 0% { filter: brightness(2.6) drop-shadow(0 0 22px #ffffff); } 100% { filter: none; } }
.sw-card .amt__row input { font-size: 30px; }
#result:empty, #steps:empty { display: none; }

.sw-card, .sw-side, .sw-panel { min-width: 0; }
@media (max-width: 980px) {
  .sw-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .sw-link, .sw-link::after, .sw-hub { animation: none; } }
@media (max-width: 520px) {
  .sw-card, .sw-panel { padding: 18px 16px; }
  .sw-top { flex-wrap: wrap; }
  .sw-card .amt__row input { font-size: 26px; }
  .tokbtn { max-width: 150px; }
  .slip button, .slip input { font-size: 13.5px; }
  .kv > div { font-size: 13.5px; }
  .kv b { font-size: 13px; }
  .sw-node b { font-size: 13px; }
  .sw-node .tok { width: 20px; height: 20px; }
  .sw-node--mid { padding: 4px 8px 4px 6px; max-width: 40%; }
  .sw-link { margin: 0 5px; }
  .sw-ok { flex-wrap: wrap; }
  .sw-ok .btn { margin-left: 48px; }
  .sw-v { gap: 14px; }
  .sw-v h4 { font-size: 19px; }
  .sw-ph { flex-wrap: wrap; row-gap: 6px; }
  .sw-age { width: 100%; order: 3; }
  .kv > div { gap: 12px; }
  .kv span { flex: none; max-width: 52%; }
  .kv b { min-width: 0; overflow-wrap: anywhere; }
  .sw-card .amt__row input { font-size: 26px; }
  .sw-top p { font-size: 14px; }
}