/* /swap v2 — light-blue poster look (matches home/market v2). Presentation only; engine DOM ids untouched. */
.tr2-page{background:linear-gradient(180deg,#e8f2ff 0,#f5f9ff 320px,#f7faff 100%);min-height:100vh}
@media (max-width:767px){.page-root.tr2-page>.navbar{display:none!important}}
.tr2-shell{max-width:1100px;margin:0 auto;padding:12px 12px 96px;display:flex;flex-direction:column;gap:12px;overflow-x:clip}
.tr2-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:10px 4px 0}
.tr2-head h1{margin:0;font-size:32px;font-weight:900;color:#0b1b3f;letter-spacing:1px}
.tr2-head p{margin:4px 0 0;font-size:14px;color:#475569}
.tr2-head-act{display:flex;gap:8px;align-items:center}
.tr2-hist{width:42px;height:42px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;color:#334155;box-shadow:0 4px 12px rgba(37,99,235,.10);text-decoration:none}
.tr2-connect{display:flex;align-items:center;gap:8px;border:0;border-radius:12px;background:linear-gradient(135deg,#2f80ff,#1d5fe0);color:#fff;font-weight:800;font-size:14px;padding:11px 16px;cursor:pointer;box-shadow:0 6px 16px rgba(29,95,224,.3)}
.tr2-shell .tr2-panel{background:linear-gradient(180deg,#0b3b8f,#0a2a6b)!important;border:1px solid #1e4fb0!important;border-radius:20px;padding:10px;box-shadow:0 10px 30px rgba(10,42,107,.35)}
.tr2-shell .tr2-tabs{background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;padding:0!important;position:static!important;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.tr2-shell .tr2-tabs a{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 6px;border-radius:12px;background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.18)!important;color:#dbe7ff!important;font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap}
.tr2-shell .tr2-tabs a.is-active{background:linear-gradient(135deg,#2f80ff,#1d5fe0);border-color:#7fb2ff;color:#fff;box-shadow:0 0 0 1px rgba(127,178,255,.5),0 6px 16px rgba(47,128,255,.4)}
.tr2-swap .swap-surface{background:transparent!important;padding:0!important;margin:0!important;min-height:0!important}
.tr2-swap .jdex-section,.tr2-swap .swap-main-section{padding:0!important;margin:0!important;background:transparent!important}
.tr2-swap .swap-hub-grid{display:block!important;max-width:none!important;margin:0!important;padding:0!important}
.tr2-swap .swap-hub-grid>:not(.swap-card){display:none!important}
.tr2-swap .swap-card,.tr2-swap .swap-quote-details{background:#fff!important;border:0!important;border-radius:16px!important;padding:12px!important;max-width:none!important;margin:0!important;box-shadow:none!important;color:#0f172a}
.tr2-swap .swap-pay-block{background:#f4f8ff!important;border:1px solid #e3edfb!important;border-radius:14px!important;padding:10px 12px!important;position:relative}
.tr2-swap .swap-pay-label,.tr2-swap .swap-label{color:#334155!important;font-size:13px}
.tr2-swap .swap-balance{color:#64748b!important}
.tr2-swap .swap-amount-input{color:#0b1b3f!important;font-weight:900!important;font-size:24px!important;background:transparent!important;text-align:right}
.tr2-swap .swap-pay-input-row{flex-direction:row-reverse}
.tr2-swap .swap-token-btn{background:#fff!important;border:1px solid #e3edfb!important;color:#0b1b3f!important;border-radius:12px!important;box-shadow:0 2px 8px rgba(15,23,42,.05)}
.tr2-swap .swap-quick-pct,.tr2-swap .swap-demo-amt{background:#eaf2ff!important;color:#1d5fe0!important;border:0!important;border-radius:8px!important}
.tr2-swap .swap-flip-btn{background:#fff!important;border:1px solid #d6e5ff!important;color:#1d6ff2!important;box-shadow:0 4px 12px rgba(37,99,235,.15)}
.tr2-swap .swap-network-trigger,.tr2-swap .swap-icon-btn{background:#f4f8ff!important;border:1px solid #e3edfb!important;color:#0b1b3f!important}
.tr2-swap .swap-quote-summary{display:none!important}
.tr2-swap .swap-quote-status{color:#475569}
.tr2-swap .swap-advanced{background:#f7faff;border-radius:12px;color:#334155;margin-top:10px}
.tr2-swap .swap-primary-btn{background:linear-gradient(90deg,#22b8ff,#2f80ff 45%,#1d4fe0)!important;border:0!important;border-radius:14px!important;color:#fff!important;font-weight:800!important;font-size:16px!important;padding:14px!important;box-shadow:0 8px 20px rgba(29,95,224,.35)}
.tr2-amt-cap{display:block;text-align:right;font-size:11px;color:#64748b;margin-top:-2px}
.tr2-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;background:#f4f8ff;border:1px solid #e3edfb;border-radius:12px;margin:10px 0;padding:6px 0}
.tr2-sum-i{display:flex;align-items:center;gap:6px;min-width:0;padding:4px 8px;border:0;background:transparent;border-left:1px solid #e3edfb;text-align:left;cursor:pointer;color:#0f172a}
.tr2-sum-i:first-child{border-left:0}.tr2-sum-i i{color:#475569;font-size:15px;flex:none}
.tr2-sum-i span{display:flex;flex-direction:column;min-width:0}.tr2-sum-i small{font-size:10.5px;color:#64748b;white-space:nowrap}
.tr2-sum-i b{font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr2-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tr2-card{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #e6eefa;border-radius:16px;padding:12px;text-decoration:none;color:#0f172a;box-shadow:0 2px 10px rgba(15,23,42,.04);min-width:0}
.tr2-card-ico{flex:none;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px}
.tr2-card-ico.c1{background:linear-gradient(135deg,#22b8ff,#1d5fe0)}.tr2-card-ico.c2{background:linear-gradient(135deg,#ff5fa2,#e5267b)}.tr2-card-ico.c3{background:linear-gradient(135deg,#ffa63d,#f26b1d)}.tr2-card-ico.c4{background:linear-gradient(135deg,#b07cff,#7c3aed)}
.tr2-card-txt{display:flex;flex-direction:column;gap:2px;min-width:0}.tr2-card-txt b{font-size:15px;font-weight:800}.tr2-card-txt small{font-size:11.5px;color:#64748b}
.tr2-soon{align-self:flex-start;display:inline-block;padding:1px 6px;border-radius:6px;background:#fef3c7;color:#b45309;font-size:10.5px;font-weight:700;margin-top:2px}
.tr2-card.is-soon{cursor:default}
.tr2-pairs,.tr2-tips{background:#fff;border:1px solid #e6eefa;border-radius:18px;padding:10px 12px 12px;box-shadow:0 2px 12px rgba(15,23,42,.05)}
.tr2-sec-h{display:flex;justify-content:space-between;align-items:center}
.tr2-sec-h h2,.tr2-tips h2{margin:4px 0 8px;font-size:17px;font-weight:900;color:#0b1b3f;display:flex;gap:8px;align-items:center}
.tr2-sec-h h2 i,.tr2-tips h2 i{color:#1d6ff2}.tr2-sec-h a{font-size:13px;color:#1d6ff2;text-decoration:none;font-weight:700}
.tr2-row{display:grid;grid-template-columns:18px minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr) 86px;align-items:center;gap:6px;padding:8px 0;border-top:1px solid #f1f4f9;color:#0f172a;text-decoration:none;font-size:12px}
.tr2-hd{border-top:0;font-size:11px;color:#64748b;background:#f7faff;border-radius:10px;padding:8px 6px}
.tr2-row .r{text-align:right}.tr2-row .c{display:flex;justify-content:center;align-items:center;gap:4px}
.tr2-skel{height:44px;background:linear-gradient(90deg,#f3f6fb,#eaf0f9,#f3f6fb);border-radius:8px;margin:4px 0;border:0}
.tr2-idx{color:#64748b}.tr2-pair{display:flex;align-items:center;gap:6px;min-width:0}.tr2-pair b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr2-logo{flex:none;width:28px;height:28px;display:inline-flex}.tr2-logo>*{width:28px!important;height:28px!important;border-radius:50%}
.tr2-chain{display:inline-flex;align-items:center;gap:4px;background:#f4f7fc;border-radius:999px;padding:3px 8px;font-size:11px;min-width:0;justify-self:start;max-width:100%}.tr2-chain span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr2-price{font-weight:700}
.tr2-chg{font-weight:800;color:#64748b;display:flex;flex-direction:column;align-items:flex-end}.tr2-chg.up{color:#16a34a}.tr2-chg.down{color:#dc2626}
.tr2-chg .jt-spark{width:50px;height:14px;margin-top:2px}.tr2-chg .jt-spark path{fill:none;stroke-width:1.4}.tr2-chg .jt-spark.up path{stroke:#16a34a}.tr2-chg .jt-spark.down path{stroke:#dc2626}
.tr2-score .mk2-ring{position:relative;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center}
.tr2-score .mk2-ring svg{position:absolute;inset:0;width:34px;height:34px;transform:rotate(-90deg)}
.tr2-score .mk2-ring circle{fill:none;stroke:#e5e7eb;stroke-width:3.5}.tr2-score .mk2-ring circle.v{stroke-linecap:round}
.tr2-score .mk2-ring.ok circle.v{stroke:#16a34a}.tr2-score .mk2-ring.mid circle.v{stroke:#f59e0b}.tr2-score .mk2-ring.low circle.v{stroke:#ef4444}
.tr2-score .mk2-ring b{position:relative;font-size:11px;font-weight:900}.tr2-score .mk2-ring.ok b{color:#15803d}.tr2-score .mk2-ring.mid b{color:#b45309}.tr2-score .mk2-ring.low b{color:#dc2626}.tr2-score .mk2-ring.na b{color:#94a3b8}
.tr2-tag{font-style:normal;font-size:10.5px;font-weight:800;padding:2px 6px;border-radius:6px}
.tr2-tag.ok{background:#dcfce7;color:#16a34a}.tr2-tag.mid{background:#fef3c7;color:#b45309}.tr2-tag.low{background:#fee2e2;color:#dc2626}.tr2-tag.na{background:#f1f5f9;color:#94a3b8}
.tr2-empty{padding:16px;text-align:center;color:#64748b;font-size:13px}
.tr2-tip-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tr2-tip-grid>div{background:#f4f8ff;border-radius:12px;padding:10px;display:grid;grid-template-columns:auto 1fr;column-gap:8px;row-gap:2px;align-items:center}
.tr2-tip-grid i{grid-row:span 2;color:#1d6ff2;font-size:18px}.tr2-tip-grid b{font-size:12.5px;color:#0b1b3f}.tr2-tip-grid small{font-size:10.5px;color:#64748b}
.tr2-fee-note{font-size:11px;color:#64748b;margin:10px 0 0}
.tr2-classic{display:inline-block;margin-top:6px;font-size:12px;color:#1d6ff2;text-decoration:none}
@media (max-width:480px){
  .tr2-head h1{font-size:28px}.tr2-connect{padding:10px 12px;font-size:13px}
  .tr2-tabs a{font-size:13px;gap:5px}
  .tr2-sum{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:6px}.tr2-sum-i:nth-child(3){border-left:0}
  .tr2-card{padding:10px;gap:8px}.tr2-card-ico{width:38px;height:38px;font-size:17px}.tr2-card-txt b{font-size:13.5px}.tr2-card-txt small{font-size:10.5px}
  .tr2-row{grid-template-columns:14px minmax(0,1.5fr) minmax(0,.9fr) minmax(0,.9fr) 74px;font-size:11px}
  .tr2-row>.tr2-chain{display:none}.tr2-hd>span:nth-child(3){display:none}
  .tr2-score .mk2-ring{width:30px;height:30px}.tr2-score .mk2-ring svg{width:30px;height:30px}.tr2-tag{font-size:9.5px;padding:1px 4px}
  .tr2-tip-grid{grid-template-columns:1fr}
}
@media (min-width:900px){.tr2-cards{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* 交易 门头 (Owner 10-20): light-blue poster hero like /market, swap emblem below the action buttons */
.tr2-head{position:relative;min-height:128px;padding:14px 12px 12px;margin:0 -4px;border-radius:20px;background:radial-gradient(120% 90% at 85% 10%,#d6e8ff 0,rgba(214,232,255,0) 60%),linear-gradient(120deg,#eef5ff,#e3efff);overflow:hidden}
.tr2-head>div{position:relative;z-index:1}
.tr2-hero-art{position:absolute;right:-6px;bottom:-8px;width:200px;height:100px;pointer-events:none;z-index:0}
@media (min-width:900px){.tr2-head{min-height:150px;padding:24px 28px}.tr2-hero-art{right:240px;bottom:4px;width:260px;height:130px}}

/* 10-20 r2: compact hero (emblem removed, map kept); obvious tab states (also on /cross-swap) */
.tr2-head{min-height:0!important;padding:10px 12px!important}
.tr2-hero-art{width:180px;height:90px;right:120px;bottom:-14px;opacity:.8}
@media (min-width:900px){.tr2-head{padding:16px 24px!important}}
.tr2-shell .tr2-tabs a{background:#e9edf3!important;border:1px solid #e9edf3!important;color:#64748b!important;box-shadow:none!important}
.tr2-shell .tr2-tabs a.is-active{background:#1e3a8a!important;border-color:#93b4ff!important;color:#fff!important;box-shadow:0 0 0 1px rgba(147,180,255,.6),0 6px 14px rgba(8,20,60,.45)!important}
/* 10-20 r3: ONE card — navy top strip holding the tabs flows into a white body; no navy side/bottom frame (swap + cross-swap) */
.tr2-shell .tr2-panel{background:#fff!important;border:1px solid #e3ecf8!important;padding:0!important;overflow:hidden;box-shadow:0 10px 26px rgba(30,64,175,.10)!important}
.tr2-shell .tr2-tabs{background:linear-gradient(180deg,#0b3b8f,#0a2a6b)!important;padding:10px!important;margin:0!important}
.tr2-swap .swap-card,.tr2-swap .swap-quote-details{border-radius:0!important;padding:12px!important}
.tr2-swap .swap-pay-block{border:0!important;background:#f5f7fb!important}
.tr2-hd>*{white-space:nowrap}
/* sticky trade header (swap + cross-swap), like the home brand header */
@media (max-width:899px){
  .tr2-shell .tr2-head{position:sticky!important;top:0;z-index:40;margin:-12px -12px 0!important;border-radius:0 0 18px 18px!important;background:rgba(238,245,255,.88)!important;-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);padding:10px 16px!important}
  .tr2-shell .tr2-head h1{font-size:26px}
  @supports (animation-timeline:scroll()){
    .tr2-shell .tr2-head{animation:tr2HeadShadow linear both;animation-timeline:scroll(root);animation-range:0 40px}
  }
}
@keyframes tr2HeadShadow{from{box-shadow:none}to{box-shadow:0 6px 18px rgba(15,40,90,.12)}}