.tc-exchange .exchange-skip { position: fixed; top: -60px; left: 12px; z-index: 20; padding: 10px; background: white; }
.tc-exchange .exchange-skip:focus { top: 10px; }
.exchange-header { height: 72px; display: flex; align-items: center; gap: 32px; padding: 12px 20px; }
.exchange-brand { display: flex; align-items: center; gap: 7px; font-weight: 600; color: #d927a6 !important; white-space: nowrap; }
.exchange-brand img { width: 24px; height: 24px; }
.exchange-nav { display: flex; gap: 28px; color: #666; }
.exchange-nav [aria-current] { color: #131313; font-weight: 600; }
.exchange-header-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.tc-exchange .icon-button { display: inline-flex; justify-content: center; align-items: center; width: 36px; height: 36px; padding: 8px; border: 0; border-radius: 50%; color: #737373; background: transparent; font-size: 27px; }
.icon-button svg, .exchange-reverse svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tc-exchange .icon-button:hover { background: #f5f5f5; }
.tc-exchange .exchange-connect { min-height: 36px; padding: 7px 14px; border: 0; border-radius: 12px; background: var(--tc-exchange-accent); color: white; font-size: 14px; font-weight: 600; }
.tc-exchange .mobile-menu-button { display: none; }
.exchange-main { position: relative; max-width: 1180px; margin: 62px auto 0; padding: 0 8px; }
.exchange-workspace { width: 480px; max-width: 100%; margin: 0 auto; }
.exchange-toolbar { display: flex; height: 45px; align-items: flex-start; justify-content: space-between; padding: 4px; }
.exchange-modes, .exchange-tools { display: flex; align-items: center; gap: 8px; }
.exchange-modes button { padding: 7px 12px; border: 0; border-radius: 20px; color: #666; background: transparent; font-size: 14px; white-space: nowrap; }
.exchange-modes button[aria-pressed="true"] { background: #f3f3f3; color: #131313; font-weight: 600; }
.exchange-pair { position: relative; display: grid; gap: 4px; }
.amount-card { height: 136px; padding: 14px 16px; border: 1px solid var(--tc-exchange-border); border-radius: 20px; background: white; }
.amount-card--receive { height: 131px; border-color: var(--tc-exchange-surface); background: var(--tc-exchange-surface); }
.amount-card label { display: block; color: #707070; }
.amount-card-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 49px; }
.amount-card-row input { min-width: 0; width: 100%; padding: 0; border: 0; outline: none; background: transparent; font-size: 36px; line-height: 1.2; letter-spacing: -1px; color: #131313; }
.amount-card-row input::placeholder { color: #ababab; opacity: 1; }
.amount-card-row input:focus-visible { outline: 2px solid var(--tc-exchange-accent); outline-offset: 2px; border-radius: 4px; }
.tc-exchange .token-pill { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; height: 38px; padding: 4px 9px 4px 4px; border: 1px solid #f3f3f3; border-radius: 24px; background: white; font-weight: 600; }
.token-pill img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.token-pill svg { width: 16px; height: 16px; fill: none; stroke: #666; stroke-width: 1.6; }
.amount-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; color: #767676; font-size: 12px; }
.chain-label { display: flex; align-items: center; gap: 4px; }
.chain-label img { border-radius: 50%; }
.tc-exchange .exchange-reverse { position: absolute; z-index: 1; top: 116px; left: calc(50% - 24px); width: 48px; height: 48px; display: grid; place-items: center; border: 4px solid white; border-radius: 16px; color: #131313; background: var(--tc-exchange-surface); }
.tc-exchange .exchange-reverse:hover { background: #ededed; }
.tc-exchange .exchange-action { width: 100%; min-height: 55px; margin-top: 4px; padding: 14px 16px; border: 0; border-radius: 20px; background: var(--tc-exchange-accent); color: white; font-weight: 600; }
.tc-exchange .exchange-action:disabled { background: #f9f9f9; color: #6e6e6e; }
.eligibility-notice { margin: 8px 0; padding: 14px 16px; border-radius: 18px; background: #f9f9f9; color: #6b6b6b; font-size: 13px; line-height: 1.5; }
.exchange-error { color: #b42318; margin: 8px 4px; font-size: 13px; }
.exchange-unit-note { margin: 8px 4px; color: #6b6b6b; font-size: 12px; }
.tc-exchange .eligibility-link { display: block; margin: 8px 4px; color: #ae157f; font-size: 12px; }
.exchange-quote { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 4px 0; color: #6b6b6b; font-size: 12px; }
.exchange-quote p { margin: 0; }
.exchange-quote button, .exchange-wallet button, .exchange-transaction button, .exchange-market button { flex-shrink: 0; border: 0; padding: 6px 0; color: #ae157f; background: transparent; font-size: 12px; }
.exchange-quote button:disabled { color: #777; }
.exchange-status { margin: 8px 4px; color: #6b6b6b; font-size: 12px; overflow-wrap: anywhere; }
.exchange-status[data-tone="error"] { color: #a22a22; }
.exchange-details { margin-top: 16px; border-top: 1px solid #eee; padding: 12px 4px; font-size: 12px; color: #666; }
.exchange-details summary { cursor: pointer; color: #444; }
.exchange-details summary span { float: right; margin-left: 10px; max-width: 70%; text-align: right; }
.exchange-details dl, .exchange-market dl { margin: 16px 0; }
.exchange-details dl div, .exchange-market dl div { display: flex; justify-content: space-between; gap: 12px; margin: 8px 0; }
.exchange-details dd, .exchange-market dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.exchange-details p { overflow-wrap: anywhere; }
.exchange-details a, .exchange-market a, .exchange-transaction a { color: #ae157f; }
.exchange-wallet, .exchange-transaction { padding: 8px 4px; color: #666; font-size: 13px; }
.exchange-wallet p, .exchange-transaction p { margin: 0; }
.exchange-identity { margin: 14px 4px; color: #767676; font-size: 11px; line-height: 1.5; }
.exchange-market { position: absolute; top: 45px; left: calc(50% + 264px); width: 260px; padding: 20px; border: 1px solid #eee; border-radius: 20px; font-size: 12px; }
.exchange-market h2 { margin: 0; color: #131313; font-size: 20px; }
.market-subtitle { margin: 4px 0 20px; color: #767676; }
.exchange-market > p { color: #767676; }
.exchange-footer { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; max-width: 700px; margin: 80px auto 20px; padding: 12px; color: #767676; font-size: 11px; }
@media (max-width: 1100px) { .exchange-market { position: static; width: 480px; max-width: 100%; margin: 24px auto 0; } }
@media (max-width: 833px) {
  .exchange-header { gap: 12px; padding: 12px 16px; }
  .exchange-nav, .tc-exchange .header-search { display: none; }
  .tc-exchange .mobile-menu-button { display: inline-flex; }
  .exchange-header-actions { gap: 8px; }
  .exchange-brand { font-size: 15px; }
  .exchange-main { margin-top: 22px; }
  .exchange-footer { margin-top: 48px; }
}
@media (max-width: 600px) {
  .tc-exchange .market-toggle { display: none; }
  .exchange-modes { gap: 2px; }
  .exchange-tools { gap: 0; }
  .exchange-quote { font-size: 11px; }
  .exchange-quote button { font-size: 11px; }
}
@media (pointer: coarse), (max-width: 833px) {
  .tc-exchange .exchange-connect, .tc-exchange .icon-button, .tc-exchange .token-pill, .exchange-modes button, .exchange-quote button, .exchange-wallet button, .exchange-transaction button { min-height: 44px; }
  .tc-exchange .icon-button { min-width: 44px; }
}