@font-face {
  font-family: "Nunito";
  src: url("assets/nunito-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Fallback";
  src: local("Arial");
  font-style: normal;
  font-weight: 200 500;
}
@font-face {
  font-family: "Nunito Fallback";
  src: local("Arial Bold");
  font-style: normal;
  font-weight: 600 1000;
}

:root {
  font-family: "Nunito", "Nunito Fallback", sans-serif;
  color: #fff;
  font-synthesis: none;
  --pill: rgb(4 4 4 / .3);
  --muted: #b5cad9;
  --footer: #c6ced0;
}

* { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  background-color: #3d9ed8;
  --page-background: url("assets/background.66ad005e.webp");
}

/* Bridge shares the swap page's columns, surfaces, and first-screen spacing. */
.bridge-center { position: relative; min-width: 0; }
.bridge-tabs { position: absolute; top: -48px; left: 0; display: flex; gap: 6px; }
.bridge-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; height: 32px; border: 1px solid var(--swap-border); border-radius: 20px; color: var(--swap-text); background: var(--swap-white); font-size: 16px; font-weight: 800; }
.bridge-tabs button[aria-selected="true"] { border-color: #0085ff; color: #0085ff; }
.bridge-tabs img { width: 20px; height: 20px; }
.bridge-tabs button:focus-visible { outline-color: #0085ff; }
.bridge-feature-icon { display: block; margin-bottom: 10px; }
.bridge-feature-icon svg { width: 24px; height: 24px; }
.bridge-token-pair { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bridge-token { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 98px; border-radius: 18px; background: var(--swap-white); }
.bridge-token strong { font-size: 16px; font-weight: 800; }
.bridge-token-image { display: block; position: relative; width: 40px; height: 40px; }
.bridge-token-image > img { display: block; width: 40px; height: 40px; }
.bridge-token-image .bridge-network-mark { position: absolute; bottom: -2px; right: -2px; width: 18px; height: 18px; border: 2px solid var(--swap-white); border-radius: 50%; }
.bridge-direction { position: absolute; top: 25px; left: calc(50% - 24px); display: grid; place-items: center; width: 48px; height: 48px; border: 6px solid var(--swap-surface); border-radius: 50%; color: var(--swap-text); background: var(--swap-white); }
.bridge-direction:hover { background: var(--swap-border); }
.bridge-recipient-panel { padding: 10px 15px 16px; }
.bridge-recipient-panel .recipient-input-wrap { margin-top: 6px; }
#bridge-recipient { min-width: 0; width: 100%; height: 100%; padding: 0 0 0 16px; border: 0; outline: 0; border-radius: inherit; color: var(--swap-text); background: transparent; font: inherit; font-size: 16px; font-weight: 800; }
#bridge-recipient::placeholder { color: var(--swap-muted); opacity: 1; }
#bridge-receive-hint { margin: 10px 0 0; color: #647c9f; font-size: 11px; font-weight: 700; line-height: 17px; letter-spacing: -.05px; white-space: nowrap; }
.bridge-rewards { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; padding: 13px 16px; border-radius: 13px; background: var(--swap-white); font-size: 14px; font-weight: 750; }
.bridge-rewards a { display: inline-flex; gap: 5px; align-items: center; color: #0085ff; }
.bridge-rewards svg { width: 18px; height: 18px; }
.bridge-fee { color: #647c9f; }
.bridge-submit:disabled { cursor: default; }
.bridge-submit:not(:disabled) { background: #0085ff; }
.bridge-market-promo { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 72px; margin-top: 24px; padding: 12px 14px; border: 1px solid var(--swap-border); border-radius: 24px; background: linear-gradient(to right, #f1f5f9, #f1f5f9cc 50%, transparent), url('assets/cow-banner.jpg') right center / cover no-repeat; }
.bridge-market-promo > strong { color: #0085ff; font-size: 18px; font-weight: 850; line-height: 23px; }
.bridge-market-promo > span { color: #526074; font-size: 14px; font-weight: 700; line-height: 20px; }
.bridge-guide #bridge-info-heading { display: block; }
.bridge-guide .guide-eyebrow { display: block; }
.bridge-guide .guide-intro p { max-width: none; }
body.dark .bridge-market-promo { background-image: linear-gradient(to right, #111e33, #111e33cc 50%, transparent), url('assets/cow-banner-dark.jpg'); }
body.dark .bridge-market-promo > span, body.dark #bridge-receive-hint, body.dark .bridge-fee { color: #a3b5ce; }
@media (max-width: 1100px) {
  .bridge-center { grid-column: 1; grid-row: 1; }
}
@media (max-width: 760px) {
  .bridge-page { padding-top: 72px; }
  #bridge-receive-hint { white-space: normal; }
}
.page-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.page-background::before, .background-layer {
  content: "";
  position: absolute;
  inset: -18px;
  background: var(--page-background) center / cover no-repeat;
}
.page-background::before { filter: blur(.5px); }
.page-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 10 12 / .88), rgb(0 10 12 / .32) 8%, transparent 22%);
}
.blur-soft {
  filter: blur(2px);
  mask-image: linear-gradient(to bottom, transparent 20%, #000 60%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 20%, #000 60%);
}
.blur-medium {
  filter: blur(4px);
  mask-image: linear-gradient(to bottom, transparent 45%, #000 82%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 45%, #000 82%);
}
.blur-strong {
  filter: blur(10px);
  mask-image: linear-gradient(to bottom, transparent 65%, #000 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 65%, #000 100%);
}
body.dark {
  background-color: #091d42;
  --page-background: url("assets/background-dark.900f2094.webp");
  --pill: rgb(4 4 4 / .25);
}
a { color: inherit; text-decoration: none; }
button { border: 0; font: inherit; color: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
button:active, .footer-links a:active { transform: translateY(1px); }
svg { display: block; flex-shrink: 0; width: 18px; height: 18px; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.site-header { display: flex; justify-content: center; gap: 6px; margin: 26px 20px 0; }
.nav-pill, .utility-pill { display: flex; align-items: center; min-height: 56px; background: var(--pill); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border-radius: 999px; font-size: 1rem; font-weight: 750; }
.site-header .brand,
.site-header .nav-link,
.site-header button { font-weight: 800; }
.nav-pill { position: relative; width: 544px; padding: 0 20px; --indicator-inset: 0px; }
.brand { display: flex; align-items: center; gap: 4px; flex: 0 0 112px; align-self: stretch; }
.brand-icon { display: block; flex-shrink: 0; width: 24px; height: 24px; object-fit: contain; }
.brand:hover .brand-icon, .brand:focus-visible .brand-icon { transform: scale(1.15); }
.nav-link { position: relative; display: flex; justify-content: center; align-items: center; gap: 5px; align-self: stretch; color: var(--muted); white-space: nowrap; }
.nav-link:nth-child(2) { flex: 0 0 67px; }
.nav-link:nth-child(3) { flex: 0 0 74px; }
.nav-link:nth-child(4) { flex: 0 0 130px; }
.nav-link:nth-child(5) { flex: 1; }
.nav-link:hover, .nav-link[aria-current="page"] { color: #fff; }
.nav-pill::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--indicator-width, 67px);
  height: 4px;
  border-radius: 4px 4px 0 0;
  background: #fff;
  pointer-events: none;
  transform: translateX(var(--indicator-x, 132px));
}
.tag { display: inline-flex; align-items: center; justify-content: center; padding: 1px 5px 2px; background: #ff6a20; color: #fff; border-radius: 20px; font-size: .65rem; font-weight: 700; line-height: 1.15; text-align: center; }
.external-icon { width: 13px; height: 13px; }
.utility-pill { position: relative; width: 299px; padding: 8px; gap: 0; }
.utility-pill button { display: flex; justify-content: center; align-items: center; height: 40px; border-radius: 24px; background: transparent; }
.theme-button { width: 58px; flex-shrink: 0; }
.theme-button svg { width: 18px; height: 18px; }
.points-button { position: relative; flex: 1; gap: 5px; margin-right: 8px; }
.points-button::after { content: ""; position: absolute; top: 1px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 2px #fff; pointer-events: none; }
.points-button, .account-button { font-weight: 800; }
.points-cow-icon { width: 18px; height: 18px; }
.notification { position: absolute; top: -1px; right: 1px; display: grid; place-items: center; width: 18px; height: 18px; border: 2px solid #fff; border-radius: 50%; background: #f34b61; color: white; font-size: .75rem; line-height: 1; }
.utility-pill .account-button { width: 122px; flex-shrink: 0; gap: 7px; color: #102038; background: #fff; border: 1px solid #cfdeec; }
.theme-button:hover, .points-button:hover, .points-button[aria-pressed="true"] { background: #ffffff18; }
.utility-pill .account-button:hover, .utility-pill .account-button[aria-expanded="true"] { background: #dfedf8; }
.account-button:focus-visible { outline-color: #102038; outline-offset: -5px; }
.wallet-dialog { box-sizing: border-box; position: fixed; inset: 0; width: 360px; max-width: calc(100vw - 32px); height: fit-content; max-height: calc(100dvh - 32px); margin: auto; padding: 60px 28px 24px; border: 0; border-radius: 24px; background: #fff; color: #101025; box-shadow: 0 16px 48px #18233733; font-family: "Nunito", "Nunito Fallback", sans-serif; overflow-y: auto; }
.wallet-dialog::backdrop { background: rgb(255 255 255 / .03); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
@keyframes wallet-dialog-enter {
  from { opacity: 0; height: 160px; overflow: hidden; }
  to { opacity: 1; height: 416px; overflow: hidden; }
}
@keyframes wallet-backdrop-enter {
  from { background-color: rgb(255 255 255 / 0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
  to { background-color: rgb(255 255 255 / .03); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
}
@media (prefers-reduced-motion: no-preference) {
  .wallet-dialog[open] { animation: wallet-dialog-enter 200ms ease-out backwards; }
  .wallet-dialog[open]::backdrop { animation: wallet-backdrop-enter 200ms ease-out both; }
}
html.wallet-modal-open { overflow: hidden; }
.wallet-dialog-close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border-radius: 50%; background: #f7f7fa; color: #747484; font-size: 21px; line-height: 1; font-weight: 400; }
.wallet-dialog h2 { margin: 0 0 30px; text-align: center; font-size: 20px; line-height: 25px; font-weight: 500; }
.wallet-dialog { scrollbar-width: none; }
.wallet-dialog::-webkit-scrollbar { display: none; }
.wallet-options { display: grid; gap: 8px; }
.wallet-option { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 55px; padding: 10px; border: 1px solid #dedff0; border-radius: 13px; background: #fff; color: #101025; font-size: 13px; font-weight: 400; text-align: left; }
.wallet-option:not(:disabled):hover { background: #f8f8fc; }
.wallet-dialog button:focus-visible { outline: 2px solid #7775dd; outline-offset: 2px; }
.wallet-logo { position: relative; display: block; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 6px; }
.wallet-logo svg { width: 32px; height: 32px; }
.wallet-metamask { background: #121212; }
.wallet-phantom { background: #ab9ff2; }
.wallet-coinbase { background: #0052ff; border-radius: 4px; }
.wallet-logo::after { content: ""; position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%; background: #2bc795; box-shadow: 0 0 0 2px #fff; }
.wallet-networks { display: flex; align-items: center; margin-left: auto; }
.wallet-networks > span { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; }
.wallet-networks > span + span { margin-left: -5px; box-shadow: 0 0 0 1px #fff; }
.wallet-eth { background: #5969de; color: #d7dafa; font-size: 12px; }
.wallet-sol { background: #111; }
.wallet-sol img { width: 14px; height: 14px; }
.wallet-branding { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 86px 0 0; color: #9699bc; font-size: 14px; line-height: 18px; }
.wallet-branding strong { font-size: 17px; letter-spacing: -.7px; }
@media (max-height: 460px) { .wallet-dialog { padding-top: 40px; } .wallet-branding { margin-top: 24px; } }
.account-menu { position: absolute; top: 100%; left: 2px; right: 8px; z-index: 11; padding: 8px; border: 1px solid #dce6f1; border-radius: 14px; background: #fff; color: #101c31; box-shadow: 0 3px 6px #1020381a; }
.utility-pill .account-menu-item { justify-content: flex-start; gap: 8px; width: 100%; height: 40px; padding: 0 8px; border-radius: 7px; font-size: 14px; font-weight: 400; text-align: left; }
.account-menu-item svg { width: 16px; height: 16px; color: #61748e; }
.utility-pill .account-menu-item:hover, .utility-pill .account-menu-item:focus-visible { background: #f1f5f9; outline: none; }
body.dark .account-menu { border-color: #2a3b54; background: #1c2b42; color: #eef4fa; }
body.dark .account-menu-item svg { color: #a3b5ce; }
body.dark .account-menu-item:hover, body.dark .account-menu-item:focus-visible { background: #2a3b54; }
@keyframes page-card-enter {
  from { transform: translateY(-20px); }
  to { transform: translateY(0); }
}
@keyframes page-side-left-enter {
  from { transform: translateX(-20px); }
  to { transform: translateX(0); }
}
@keyframes page-side-right-enter {
  from { transform: translateX(20px); }
  to { transform: translateX(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .page-card-enter { animation: page-card-enter 200ms ease-out; }
  .page-side-left-enter { animation: page-side-left-enter 200ms ease-out; }
  .page-side-right-enter { animation: page-side-right-enter 200ms ease-out; }
}

.page-content {
  flex: 1;
  padding: 85px 24px 72px;
  --swap-surface: #f1f5f9;
  --swap-white: #fff;
  --swap-text: #101c31;
  --swap-muted: #8ca4be;
  --swap-border: #dce6f1;
  --skeleton: #e6ecf5;
  --card-glass-opacity: .3;
  --card-glass-contrast: calc(1 + 2 * var(--card-glass-opacity) * (1 - 4 / 255));
  --feature-surface: rgb(4 4 4 / var(--card-glass-opacity));
}
.swap-layout {
  display: grid;
  grid-template-columns: 280px 425px 280px;
  gap: 24px;
  align-items: start;
  align-content: start;
  /* Reserve the first screen for the swap, accounting for the header and top padding. */
  min-height: calc(100svh - 167px);
  max-width: 1033px;
  margin: 0 auto;
}
.feature-cards { display: grid; gap: 12px; }
.feature-card { min-height: 150px; padding: 14px; border-radius: 24px; background: var(--feature-surface); }
.feature-icon { width: 24px; height: 24px; margin-bottom: 10px; }
.feature-card h2 { margin: 0 0 4px; font-size: 16px; line-height: 24px; font-weight: 800; letter-spacing: -.02em; }
.feature-card p { margin: 0; color: #ffffffb3; font-size: 14px; font-weight: 700; line-height: 20px; }
.feature-card a { text-decoration: underline; text-underline-offset: 2px; }
.feature-card a:hover { color: #fff; }
.swap-card { min-width: 0; padding: 14px; border: 1px solid var(--swap-border); border-radius: 24px; color: var(--swap-text); background: var(--swap-surface); box-shadow: 0 2px 3px #10203806; }
/* The order view runs the card alone: feature and activity columns step off. */
.swap-layout.is-order { grid-template-columns: minmax(0, 432px); justify-content: center; gap: 0; max-width: 432px; }
.swap-layout.is-order .feature-cards, .swap-layout.is-order .activity-column { display: none; }
.swap-card.is-order { padding: 16px; border-color: #ffffff8c; border-radius: 24px; background: rgb(255 255 255 / .94); box-shadow: 0 12px 34px #10203826; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
body.dark .swap-card.is-order { border-color: #ffffff17; background: rgb(14 25 46 / .96); }
.swap-card h1 { display: flex; align-items: center; gap: 10px; margin: 0 3px 13px; font-size: 24px; font-weight: 900; line-height: 29px; }
.swap-card h1 svg { width: 20px; height: 20px; color: var(--swap-muted); }
.swap-fields { position: relative; display: grid; gap: 9px; }
.token-panel { min-width: 0; height: 103px; padding: 9px 14px 14px; border: 2px solid var(--swap-border); border-radius: 16px; }
.field-label { display: block; font-size: 14px; font-weight: 650; line-height: 20px; }
.token-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 19px; }
.token-selector { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; gap: 5px; width: 157px; height: 32px; padding: 3px 11px 3px 6px; border: 1px solid var(--swap-border); border-radius: 20px; background: var(--swap-white); color: #627996; }
.token-selector.has-token { width: 107px; color: var(--swap-text); }
.token-mark { display: grid; place-items: center; flex-shrink: 0; width: 21px; height: 21px; border-radius: 50%; color: #fff; font-size: 15px; font-weight: 900; line-height: 1; }
.token-mark img, .transaction-token img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.token-empty { background: var(--swap-surface); }
.token-usdc { background: #2775ca; }
.token-usdt { background: #26a17b; }
.token-btc { background: #f7931a; }
.token-eth { background: #627eea; }
.token-sol { background: #262339; color: #7bf1ce; }
.token-xmr { background: #f26822; }
.token-trx { background: #eb0029; }
.token-zec { background: #f4b728; }
.token-selector select { position: absolute; inset: 0; appearance: none; width: 100%; height: 100%; padding: 0 22px 0 32px; border: 0; outline: 0; border-radius: inherit; background: transparent; color: inherit; cursor: pointer; font: inherit; font-size: 16px; font-weight: 800; line-height: 24px; }
.token-selector option { color: var(--swap-text); background: var(--swap-white); }
.token-caret { width: 9px; height: 9px; margin-left: auto; color: var(--swap-text); pointer-events: none; }
.token-selector:focus-within { outline: 2px solid #579df0; outline-offset: 2px; }
.amount-input { min-width: 0; width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--swap-text); font: inherit; font-size: 28px; line-height: 32px; font-weight: 900; text-align: right; transform: translateY(-9px); }
.amount-input::placeholder { color: var(--swap-muted); opacity: 1; }
.token-panel:has(.amount-input:focus) { border-color: #0085ff; background: #fff; }
.swap-fields:has(.amount-input:focus) .swap-direction::after { content: ''; position: absolute; inset: -2px; border: 2px solid #0085ff; border-radius: 50%; pointer-events: none; }
.swap-fields:has(#deposit-amount:focus) .swap-direction::after { clip-path: inset(0 0 calc(50% + 4.5px) 0); }
.swap-fields:has(#receive-amount:focus) .swap-direction::after { clip-path: inset(calc(50% + 4.5px) 0 0 0); }
.deposit-value { position: relative; flex: 1; min-width: 0; }
.receive-value { position: relative; flex: 1; min-width: 0; }
.receive-value .amount-input { display: block; color: var(--swap-text); }
#receive-estimate-label { position: absolute; top: 28px; right: 0; color: #647c9f; font-size: 13px; font-weight: 800; line-height: 18px; white-space: nowrap; }
.token-panel:has(.receive-value) .token-selector { max-width: 55%; }
.swap-quote-details { margin-top: 18px; padding: 0 15px; border-radius: 13px; background: var(--swap-white); font-size: 14px; }
.swap-quote-summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 43px; }
.swap-quote-points { display: inline-flex; align-items: center; gap: 4px; color: #0085ff; font-weight: 800; text-decoration: none; }
.swap-quote-cow, .swap-quote-cow svg { display: block; width: 18px; height: 18px; }
.swap-quote-toggle { display: flex; align-items: center; gap: 6px; padding: 8px 0 8px 8px; background: transparent; color: #647c9f; font-size: 14px; font-weight: 800; }
.swap-quote-toggle svg { width: 12px; height: 12px; }
.swap-quote-toggle[aria-expanded='false'] svg { transform: rotate(180deg); }
#swap-quote-rates { margin: 0; padding: 12px 0 16px; border-top: 1px dashed var(--swap-border); }
#swap-quote-rates > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; line-height: 20px; }
#swap-quote-rates > div + div { margin-top: 8px; }
#swap-quote-rates dt { color: #647c9f; }
#swap-quote-rates dd { margin: 0; font-weight: 800; text-align: right; overflow-wrap: anywhere; }
.swap-quote-details:not([hidden]) ~ .recipient-panel { margin-top: 6px; }
.swap-quote-message { margin: 10px 4px 0; font-size: 13px; line-height: 18px; color: var(--swap-text); }
.swap-quote-details.is-pending { opacity: .6; }
/* First-quote skeleton: grey pills stand in for the receive amount and the rate. */
.swap-rate-skeleton { display: none; }
.swap-quote-details.is-skeleton .swap-quote-points,
.swap-quote-details.is-skeleton .swap-quote-toggle { pointer-events: none; }
.swap-quote-details.is-skeleton #swap-quote-points,
.swap-quote-details.is-skeleton #swap-quote-fee { display: inline-block; width: 96px; height: 17px; border-radius: 7px; background: var(--skeleton); color: transparent; overflow: hidden; }
.swap-quote-details.is-skeleton #swap-quote-fee { width: 46px; }
.swap-quote-details.is-skeleton #swap-quote-rates { display: none; }
.swap-quote-details.is-skeleton .swap-rate-skeleton { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 16px; border-top: 1px dashed var(--swap-border); color: #647c9f; line-height: 20px; }
.swap-rate-skeleton i { display: block; width: 148px; height: 17px; border-radius: 7px; background: var(--skeleton); }
.receive-skeleton { display: none; position: absolute; top: 50%; right: 0; transform: translateY(calc(-50% - 9px)); justify-items: end; gap: 7px; pointer-events: none; }
.swap-form.is-quoting-deposit .receive-skeleton { display: grid; }
.swap-form.is-quoting-deposit .receive-value .amount-input { color: transparent; }
.swap-form.is-quoting-deposit .receive-value .amount-input::placeholder { color: transparent; }
.receive-skeleton i { display: block; border-radius: 7px; background: var(--skeleton); }
.receive-skeleton i:first-child { width: 132px; height: 24px; border-radius: 9px; }
.receive-skeleton i:last-child { width: 74px; height: 13px; }
.receive-skeleton i, .swap-rate-skeleton i,
.swap-quote-details.is-skeleton #swap-quote-points,
.swap-quote-details.is-skeleton #swap-quote-fee { animation: skeleton-pulse 1.4s ease-in-out infinite; }
@keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .receive-skeleton i, .swap-rate-skeleton i,
  .swap-quote-details.is-skeleton #swap-quote-points,
  .swap-quote-details.is-skeleton #swap-quote-fee { animation: none; }
}
.swap-submit[data-quoting='true'] { cursor: progress; }
.swap-submit[data-quoting='true']:hover { background: #79b8ff; }
body.dark .swap-submit[data-quoting='true']:hover { background: #2c7fff; }
body.dark .swap-quote-details.is-skeleton .swap-rate-skeleton { color: var(--swap-muted); }
body.dark #receive-estimate-label, body.dark .swap-quote-toggle, body.dark #swap-quote-rates dt { color: var(--swap-muted); }
.deposit-value .amount-input { display: block; }
#deposit-usd { position: absolute; top: 28px; right: 0; max-width: 100%; color: #647c9f; font-size: 13px; font-weight: 800; line-height: 18px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.dark #deposit-usd { color: var(--swap-muted); }
#deposit-usd.is-stale { font-size: 11px; }
.token-panel:has(.deposit-value) .token-selector { max-width: 55%; }
.swap-direction { position: absolute; z-index: 1; top: calc(50% - 24px); left: calc(50% - 24px); display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 2px solid var(--swap-border); border-radius: 50%; background: var(--swap-white); color: var(--swap-text); box-shadow: inset 0 0 0 5px var(--swap-surface); }
.swap-direction svg { width: 21px; height: 21px; }
.swap-direction:hover { background: var(--swap-border); }
.swap-card button:focus-visible { outline-color: #579df0; outline-offset: 2px; }
.recipient-panel { margin-top: 18px; padding: 9px 15px 16px; border-radius: 13px; background: var(--swap-white); }
.recipient-input-wrap { display: flex; align-items: center; height: 48px; margin-top: 12px; border: 1px solid var(--swap-border); border-radius: 11px; }
.recipient-input-wrap:focus-within { outline: 2px solid #579df0; outline-offset: 1px; }
#recipient-address { min-width: 0; width: 100%; height: 100%; border: 0; outline: 0; padding: 0 0 0 16px; border-radius: inherit; background: transparent; color: var(--swap-text); font: inherit; font-size: 16px; font-weight: 800; }
#recipient-address::placeholder { color: var(--swap-muted); opacity: 1; }
.paste-address { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 9px; background: transparent; color: var(--swap-muted); }
.paste-address svg { width: 16px; height: 16px; }
.paste-address .copy-address-icon { width: 20px; height: 20px; }
.paste-address:hover { color: var(--swap-text); }
.swap-submit { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 47px; margin-top: 18px; border-radius: 13px; background: #79b8ff; color: #fff; font-size: 18px; font-weight: 900; }
.swap-submit:hover { background: #67aaf8; }
.swap-submit[data-busy='true'] { cursor: progress; }
.swap-submit[data-busy='true']:hover { background: #79b8ff; }
.button-spinner { flex-shrink: 0; width: 16px; height: 16px; border: 2px solid rgb(255 255 255 / .4); border-top-color: #fff; border-radius: 50%; animation: button-spin .7s linear infinite; }
@keyframes button-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .button-spinner { animation-duration: 1.8s; } }
.swap-status { margin: 12px 4px 0; font-size: 13px; font-weight: 700; line-height: 19px; color: var(--swap-text); }
.swap-order { display: grid; gap: 12px; margin-top: -2px; }
.swap-order { display: grid; gap: 12px; margin-top: 0; }
.swap-order-steps { display: flex; gap: 6px; margin: 0 0 2px; padding: 0; list-style: none; }
.swap-order-step { display: flex; flex: 1 1 auto; align-items: center; gap: 9px; min-width: 0; padding: 7px 13px 7px 7px; border-radius: 999px; color: var(--swap-text); background: #fff; font-size: 13px; font-weight: 800; line-height: 19px; box-shadow: 0 1px 3px #10203812; }
.swap-order-step.is-active { box-shadow: 0 1px 5px #1020381f; }
.swap-order-step > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swap-order-step:last-child { -webkit-mask-image: linear-gradient(to right, #000 46%, transparent 94%); mask-image: linear-gradient(to right, #000 46%, transparent 94%); }
.swap-order-step-icon { display: grid; place-items: center; flex-shrink: 0; width: 25px; height: 25px; border-radius: 50%; color: var(--swap-muted); background: #dde7f2; }
.swap-order-step.is-active .swap-order-step-icon { color: #fff; background: #0085ff; }
.swap-order-step-icon svg { width: 14px; height: 14px; }
.swap-order-step-icon img { display: block; width: 25px; height: 25px; }
.swap-order-step-icon.has-icon,
.swap-order-step.is-active .swap-order-step-icon.has-icon { background: none; }
.swap-order-step-icon .token-mark { width: 25px; height: 25px; border: 0; outline: 0; box-shadow: none; font-size: 11px; }
.swap-order-qr-panel { display: grid; justify-items: center; gap: 13px; padding: 0; border-radius: 0; background: none; }
.swap-order-qr { display: grid; place-items: center; width: 208px; height: 208px; padding: 13px; border-radius: 16px; background: #fff; box-shadow: 0 2px 12px #10203814; }
.swap-order-qr svg { display: block; width: 100%; height: 100%; border-radius: 8px; }
.swap-order-qr.is-empty { width: 208px; height: auto; min-height: 116px; padding: 16px; border: 1px dashed var(--swap-border); color: var(--swap-muted); font-size: 12px; font-weight: 750; line-height: 17px; text-align: center; }
.swap-order-qr-tabs { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; padding: 3px; border-radius: 999px; background: #e1e9f3; }
.swap-order-qr-tabs::before { content: ''; position: absolute; top: 3px; left: 3px; width: calc(50% - 3px); height: calc(100% - 6px); border-radius: 999px; background: #fff; box-shadow: 0 1px 4px #10203820; transition: transform .22s ease; }
.swap-order-qr-tabs:has(> :nth-child(2).is-active)::before { transform: translateX(100%); }
.swap-order-qr-tab { position: relative; z-index: 1; padding: 6px 15px; border-radius: 999px; color: var(--swap-muted); background: none; font-size: 12.5px; font-weight: 800; line-height: 18px; text-align: center; }
.swap-order-qr-tab.is-active { color: var(--swap-text); background: none; box-shadow: none; }
.swap-order-qr-tab:disabled { opacity: .55; cursor: default; }
.swap-order-legs { display: grid; gap: 16px; }
.swap-order-leg { display: grid; gap: 9px; padding: 0; border-radius: 0; background: none; }
.swap-order-leg-title { margin: 0 2px; color: var(--swap-text); font-size: 14px; font-weight: 800; line-height: 20px; letter-spacing: 0; text-transform: none; }
.swap-order-panel { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; border-radius: 14px; background: #e6edf6; }
.swap-order-panel .token-mark { width: 32px; height: 32px; border: 0; outline: 0; box-shadow: none; font-size: 15px; }
.swap-order-panel-copy { display: grid; gap: 1px; min-width: 0; }
.swap-order-panel-copy strong { font-size: 16px; font-weight: 800; line-height: 22px; overflow-wrap: anywhere; }
.swap-order-panel-copy span { overflow: hidden; color: var(--swap-muted); font-size: 13px; font-weight: 700; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.swap-order-check { position: absolute; bottom: -13px; left: 50%; display: grid; place-items: center; width: 24px; height: 24px; border: 3px solid #fff; border-radius: 50%; color: #fff; background: #0085ff; transform: translateX(-50%); }
.swap-order-check svg { width: 12px; height: 12px; }
.swap-order-address-row { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 6px; padding: 6px 7px 6px 12px; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px #10203812; }
.swap-order-address-row code { flex: 1; min-width: 0; overflow: hidden; color: var(--swap-text); font-family: "Nunito", sans-serif; font-size: 14px; font-weight: 700; line-height: 20px; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.swap-order-copy { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; color: var(--swap-muted); background: transparent; }
.swap-order-copy svg { width: 15px; height: 15px; }
.swap-order-copy:disabled { opacity: .45; cursor: default; }
.swap-order-copy:not(:disabled):hover { color: var(--swap-text); background: #eef2f7; }
.swap-order-copy.is-copied { color: #0b8a4b; background: #0b8a4b1a; }
.swap-order-meta { display: flex; justify-content: center; gap: 7px; margin: 2px 0 0; color: var(--swap-muted); font-size: 12.5px; font-weight: 700; line-height: 18px; }
.swap-order-meta b { color: var(--swap-text); font-weight: 800; letter-spacing: .05em; }
.swap-order-status { margin: 0; color: var(--swap-muted); text-align: center; }
body.dark .swap-order-step { background: #1b2c49; }
body.dark .swap-order-qr-tabs { background: #152440; }
body.dark .swap-order-qr-tabs::before { background: #26395c; }
body.dark .swap-order-step.is-active { background: #24395e; }
body.dark .swap-order-step-icon { background: #223350; }
body.dark .swap-order-panel { background: #16233d; }
body.dark .swap-order-address-row { background: #1c2b45; box-shadow: none; }
body.dark .swap-order-check { border-color: #0e1a2e; }
body.dark .swap-order-copy:not(:disabled):hover { background: #26395c; }
@media (max-width: 430px) {
  .swap-order-step { padding: 4px 8px 4px 4px; font-size: 12px; }
  .swap-order-qr { width: 164px; height: 164px; }
}
.activity-column { display: grid; gap: 16px; min-width: 0; }
.transactions-card { min-height: 363px; padding: 14px; border-radius: 24px; background: var(--feature-surface); }
.transactions-card h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 16px; line-height: 24px; font-weight: 900; letter-spacing: -.02em; }
.transactions-card h2 svg { width: 16px; height: 16px; }
.transactions-list { display: grid; gap: 12px; max-height: 320px; overflow-y: auto; scrollbar-width: none; }
.transactions-list::-webkit-scrollbar { display: none; }
.transaction-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) 12px 18px minmax(0, 1fr) 52px; align-items: center; gap: 4px; min-width: 0; color: #fff; font-size: 12px; font-weight: 700; line-height: 18px; letter-spacing: -.01em; }
.transaction-token { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 900; }
.transaction-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transaction-arrow { width: 12px; height: 12px; }
.transaction-age { width: 52px; color: #ffffff80; text-align: right; white-space: nowrap; }
.coinflip-promo { position: relative; display: flex; align-items: center; height: 72px; padding: 0 14px; border-radius: 24px; background: linear-gradient(to right, #f3f6fa, #f3f6faf2 55%, #f3f6fa00), url("assets/promo-light.webp") right center / cover no-repeat; }
.promo-copy { display: grid; gap: 0; }
.promo-copy strong { color: #ff681c; font-size: 18px; line-height: 25px; font-weight: 850; }
.promo-copy > span { color: #526074; font-size: 14px; line-height: 19px; font-weight: 700; }
.promo-new { position: absolute; top: -7px; right: -6px; padding: 1px 7px 2px; border: 1px solid white; border-radius: 14px; background: #ff681c; color: #fff; font-size: 12px; font-weight: 900; line-height: 17px; }
.coinflip-promo:hover .promo-copy strong { color: #df5010; }
body.dark .page-content { --swap-surface: #111e33; --swap-white: #1c2b42; --swap-text: #eef4fa; --swap-muted: #8ca4be; --swap-border: #2a3b54; --card-glass-opacity: .25; }
body.dark .coinflip-promo { background-image: linear-gradient(to right, #0f172a, #0f172af2 55%, #0f172a00), url("assets/promo-dark.webp"); }
body.dark .promo-copy > span { color: #b5c4d7; }
@supports (backdrop-filter: blur(1px)) {
  .feature-card, .transactions-card {
    background: transparent;
    backdrop-filter: blur(22px) brightness(calc(1 / var(--card-glass-contrast))) contrast(var(--card-glass-contrast));
  }
}
@media (max-width: 1100px) {
  .page-content { padding-top: 56px; }
  .swap-layout { max-width: 729px; grid-template-columns: minmax(0, 425px) 280px; min-height: calc(100svh - 138px); }
  .swap-card { grid-column: 1; grid-row: 1; }
  .activity-column { grid-column: 2; grid-row: 1; }
  .feature-cards { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .page-content { padding: 34px 16px 48px; }
  .swap-layout { max-width: 425px; grid-template-columns: minmax(0, 1fr); min-height: calc(100svh - 116px); }
  .activity-column { grid-column: 1; grid-row: 2; }
  .feature-cards { grid-column: 1; grid-row: 3; grid-template-columns: minmax(0, 1fr); }
  .feature-card { min-height: 150px; }
  .coinflip-promo { background-size: auto, auto 120px; }
}
.site-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 24px; padding: 0 80px 14px; color: var(--footer); font-size: .875rem; font-weight: 800; line-height: 20px; }
.site-footer p { margin: 0; white-space: nowrap; }
.footer-note { text-align: right; }
.footer-links { display: flex; align-items: center; justify-content: center; gap: 17px; }
.footer-links a { display: inline-flex; gap: 5px; align-items: center; min-height: 24px; white-space: nowrap; }
.footer-links svg { width: 14px; height: 14px; }
.support-plane-icon { width: 16px; height: 16px; }
.documentation-file-icon { width: 16px; height: 16px; }
.api-code-icon { width: 16px; height: 16px; }
.compliance-shield-icon { width: 16px; height: 16px; }
.blog-file-icon { width: 16px; height: 16px; }
.footer-links a:hover, .footer-links a[aria-current="location"] { color: #e7f4f4; text-decoration: none; }

@media (max-width: 1050px) {
  .site-footer { padding-right: 28px; padding-left: 28px; gap: 16px; }
  .footer-links { gap: 12px; }
}
@media (max-width: 900px) {
  .site-header { flex-wrap: wrap; row-gap: 10px; }
  .site-footer { grid-template-columns: 1fr 1fr; row-gap: 18px; padding-bottom: 20px; }
  .footer-links { grid-row: 1; grid-column: 1 / -1; flex-wrap: wrap; }
}
@media (max-width: 590px) {
  .site-header { margin: 18px 12px 0; }
  .nav-pill { width: min(100%, 390px); padding: 0 10px; display: grid; grid-template-columns: repeat(4, auto); border-radius: 25px; }
  .brand { grid-column: 1 / -1; justify-content: center; min-height: 44px; }
  .nav-link { min-height: 44px; font-size: .875rem; gap: 4px; }
  .nav-pill { --indicator-inset: 6px; }
  .utility-pill { min-height: 56px; }
  .site-footer { padding-right: 20px; padding-left: 20px; }
  .footer-links { column-gap: 16px; row-gap: 8px; }
}
@media (prefers-reduced-motion: no-preference) {
  .brand-icon { transition: transform 180ms ease-out; }
  a, button { transition: color .15s, background-color .15s, transform .15s; }
  .nav-pill.indicator-ready::after {
    transition: transform 260ms cubic-bezier(.22, 1, .36, 1), width 260ms cubic-bezier(.22, 1, .36, 1);
  }
}

/* Educational content below the swap uses 976px panels. */
.swap-guide { --guide-muted: #647c9f; --guide-blue: #0085ff; display: grid; gap: 24px; max-width: 976px; margin: 80px auto 0; color: var(--swap-text); font-size: 14px; line-height: 24px; }
.guide-panel { display: flex; flex-direction: column; gap: 20px; min-width: 0; padding: 24px; border: 1px solid var(--swap-border); border-radius: 24px; background: var(--swap-surface); box-shadow: 0 2px 3px #1020380b; }
.guide-panel h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 22px; font-weight: 900; line-height: 30px; }
.guide-panel h2 > span { color: var(--swap-muted); flex-shrink: 0; }
.guide-panel [data-guide-icon] { display: inline-flex; width: 20px; height: 20px; flex-shrink: 0; }
.guide-panel [data-guide-icon] svg { width: 100%; height: 100%; }
.guide-panel p { max-width: 768px; margin: 0; color: var(--guide-muted); }
.guide-panel a:not(.pair-card):not(.guide-button) { color: var(--guide-blue); font-weight: 800; text-decoration: underline; text-decoration-color: #0085ff50; text-underline-offset: 4px; }
.guide-panel a:hover { text-decoration-color: currentColor; }
.guide-panel a:focus-visible, .guide-panel summary:focus-visible { outline: 2px solid var(--guide-blue); outline-offset: 4px; border-radius: 4px; }
.guide-intro { padding: 32px; gap: 16px; }
.guide-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--guide-blue); font-weight: 800; }
.guide-intro h2 { font-size: 36px; line-height: 43px; letter-spacing: -.025em; }
.guide-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0; margin: 8px 0 0; list-style: none; color: var(--guide-muted); font-weight: 700; }
.guide-checks li { display: flex; align-items: center; gap: 8px; }
.guide-checks [data-guide-icon] { width: 16px; height: 16px; color: var(--guide-blue); }
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.guide-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; padding: 16px; border-radius: 12px; background: var(--swap-white); }
.guide-card > [data-guide-icon] { color: var(--guide-blue); }
.guide-card h3 { margin: 0; font-size: 16px; font-weight: 800; line-height: 24px; letter-spacing: -.025em; }
.guide-wide { grid-column: 1 / -1; }
.guide-steps, .guide-audience { max-width: 788px; padding-left: 20px; margin: 0; color: var(--guide-muted); }
.guide-steps { display: grid; gap: 16px; }
.guide-steps strong { color: var(--swap-text); font-weight: 800; }
.guide-steps li::marker, .guide-audience li::marker { color: var(--guide-blue); font-weight: 800; }
.guide-audience { max-width: none; display: grid; gap: 12px; }
.pair-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pair-card { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 16px; border-radius: 12px; background: var(--swap-white); }
.pair-card:hover { background: var(--swap-border); }
.pair-icons { display: inline-flex; flex-shrink: 0; align-items: center; gap: 4px; }
.pair-icons img { display: block; width: 24px; height: 24px; border-radius: 50%; object-fit: contain; }
.pair-icons > span { color: var(--guide-muted); width: 12px; font-size: 14px; font-weight: 500; }
.pair-label { display: grid; gap: 4px; min-width: 0; line-height: 20px; }
.pair-label strong { font-size: 14px; font-weight: 800; }
.pair-label small { color: var(--guide-muted); font-size: 12px; font-weight: 700; line-height: 16px; }
.bridge-terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.bridge-terms > div { padding: 9px 16px; border: 1px solid var(--swap-border); border-radius: 18px; background: var(--swap-white); }
.bridge-terms dt { color: var(--guide-muted); font-weight: 700; }
.bridge-terms dd { margin: 0; font-size: 24px; font-weight: 800; line-height: 32px; }
.guide-button { align-self: flex-start; padding: 7px 16px; border-radius: 24px; color: #fff; background: #0085ff; font-size: 16px; font-weight: 900; line-height: 24px; }
.guide-button:hover { background: #0073df; }
.faq-list { display: grid; gap: 8px; }
.faq-list details { min-width: 0; border-radius: 12px; background: var(--swap-white); }
.faq-list summary { position: relative; padding: 16px 42px 16px 16px; font-weight: 800; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ''; position: absolute; right: 22px; top: 24px; width: 4px; height: 4px; border: solid var(--guide-muted); border-width: 0 1px 1px 0; transform: rotate(45deg); }
.faq-list details[open] summary::after { top: 26px; transform: rotate(225deg); }
.faq-list details p { max-width: 800px; padding: 0 16px 16px; }
body.dark .swap-guide { --guide-muted: #a3b5ce; --guide-blue: #69b4ff; }
.token-zec { background: #f4b728; color: #191919; }
.token-bnb { background: #f3ba2f; }
.token-hype { background: #073b36; }
#swap, #about-swaps { scroll-margin-top: 110px; }
.site-header { position: sticky; top: 26px; z-index: 10; }
@media (min-width: 901px) {
  .site-footer { position: fixed; inset: auto 0 0; z-index: 9; padding-top: 18px; background: linear-gradient(transparent, #031519b3); }
}
@media (max-width: 1000px) {
  .pair-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .swap-guide { margin-top: 48px; }
  .guide-panel, .guide-intro { padding: 20px; }
  .guide-intro h2 { font-size: 30px; line-height: 36px; }
  .guide-checks, .guide-grid, .pair-grid, .bridge-terms { grid-template-columns: minmax(0, 1fr); }
  .guide-checks { gap: 10px; }
  .guide-panel h2 { align-items: flex-start; }
  .guide-panel h2 > span { margin-top: 5px; }
  .site-header { position: relative; top: auto; }
  #swap, #about-swaps { scroll-margin-top: 20px; }
}

/* Coin Flip layout and controls. */
body.casino { --page-background: url('assets/casino-light.webp'); --muted: #dec9bd; --pill: rgb(59 27 17 / .65); background-color: #743c24; }
body.casino.dark { --page-background: url('assets/casino-dark.webp'); }
body.casino .page-background::before { filter: none; inset: 0; }
body.casino .background-layer { display: none; }
body.casino .page-background::after { background: linear-gradient(to top, #130905d9, transparent 12%); }
.coinflip-layout { display: grid; grid-template-columns: 280px 425px 280px; gap: 24px; max-width: 1033px; margin: 0 auto; align-items: start; }
.coinflip-page { --casino-surface: #482b22; --casino-panel: #5c3a2e; --casino-raised: #694638; --casino-inset: #2d1914; --casino-border: #886052; --casino-muted: #d3bcb1; padding-bottom: 120px; }
.casino-panel { min-width: 0; padding: 15px; border: 1px solid #805541; border-radius: 24px; background: var(--casino-panel); color: #fff; box-shadow: 0 2px 2px #27130b33; }
.casino-panel h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 900; line-height: 24px; }
.casino-panel h2 svg { width: 18px; height: 18px; }
.coin-badge { margin-left: auto; color: #ffdb8a; font-size: 12px; font-weight: 800; }
.coin-balance { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px; margin-top: 12px; border-radius: 18px; background: var(--casino-raised); font-weight: 800; }
.coin-balance > span { border: 1px solid var(--casino-border); border-radius: 20px; padding: 3px 10px; font-size: 14px; }
.coin-balance strong { font-size: 24px; }
.coin-reset-wrap { margin-top: 10px; padding: 10px 15px; border-radius: 16px; background: var(--casino-raised); }
#coin-deposit { width: 100%; padding: 11px 8px; border: 1px solid #9b705b; border-radius: 12px; background: #79513e; font-size: 14px; font-weight: 850; }
#coin-deposit:hover { background: #895e49; }
.coin-game { padding: 30px 15px 15px; background: var(--casino-surface); }
.coin-round { display: grid; grid-template-columns: 1fr 128px 1fr; align-items: center; height: 88px; border-radius: 50px; background: var(--casino-raised); text-align: center; }
.coin-round > div { display: grid; }
.coin-round span { color: var(--casino-muted); font-size: 14px; font-weight: 800; }
.coin-round strong { font-size: 32px; line-height: 40px; font-weight: 950; }
.coin-round .coin-multiplier { color: #ffce00; }
#coin-coin { width: 128px; height: 128px; object-fit: contain; margin-top: -20px; }
.coin-game-title { display: flex; align-items: center; justify-content: center; position: relative; margin: 18px 0 12px; }
.coin-game-title h1 { margin: 0; font-size: 36px; line-height: 46px; font-weight: 950; letter-spacing: -.02em; }
#coin-sound { position: absolute; right: 0; width: 26px; height: 30px; padding: 4px; background: transparent; color: var(--casino-muted); }
#coin-sound[aria-pressed='false'] { opacity: .55; }
.coin-stake { display: flex; flex-direction: column; align-items: center; padding: 10px 16px 12px; border: 1px solid var(--casino-border); border-radius: 20px; background: var(--casino-inset); }
#coin-stake { width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: #fff; font: inherit; font-size: 28px; font-weight: 900; text-align: center; outline-color: #ffce00; }
#coin-stake::placeholder { color: #bd9d8f; opacity: 1; }
#coin-stake::-webkit-inner-spin-button { appearance: none; }
.coin-stake > span { color: var(--casino-muted); font-size: 12px; font-weight: 800; }
.coin-percentages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; margin-top: 10px; }
.coin-percentages button { padding: 7px 0; border: 1px solid #684738; border-radius: 8px; background: var(--casino-surface); color: var(--casino-muted); font-size: 14px; font-weight: 850; }
.coin-percentages button:hover { color: #fff; background: var(--casino-raised); }
.coin-sides { min-width: 0; padding: 0; margin: 16px 0; border: 0; }
.coin-sides legend { padding: 0; margin-bottom: 10px; font-size: 16px; font-weight: 800; }
.coin-sides > div { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.coin-sides label { position: relative; cursor: pointer; }
.coin-sides input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.coin-sides label > span { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; height: 102px; border: 1px solid var(--casino-border); border-bottom-width: 3px; border-radius: 12px; background: var(--casino-raised); color: var(--casino-muted); font-size: 14px; font-weight: 900; }
.coin-sides img { width: 52px; height: 52px; object-fit: contain; opacity: .55; }
.coin-sides input:checked + span { border: 2px solid #ffd000; border-bottom-width: 3px; color: #fff; background: radial-gradient(ellipse at top, #98742788, var(--casino-raised)); box-shadow: 0 2px 3px #d598364d; }
.coin-sides input:checked + span img { opacity: 1; }
.coin-sides input:focus-visible + span { outline: 2px solid #fff; outline-offset: 3px; }
.coin-flip-button { width: 100%; min-height: 48px; border: 1px solid #bc9539; border-radius: 14px; background: #b78a21; color: #271800; font-size: 18px; font-weight: 950; }
.coin-flip-button:hover { background: #d2a32c; }
.coin-flip-button:disabled { opacity: .6; cursor: wait; }
#coin-result { margin: 12px 0 0; color: #ffdc78; font-size: 14px; font-weight: 800; }
.coin-fairness { margin-top: 16px; border-radius: 13px; background: var(--casino-raised); color: var(--casino-muted); font-size: 14px; line-height: 20px; }
.coin-fairness summary { padding: 12px 15px; cursor: pointer; font-weight: 850; list-style: none; }
.coin-fairness summary::after { content: '⌄'; float: right; }
.coin-fairness[open] > summary::after, .coin-fairness details[open] > summary::after { content: '⌃'; }
.coin-fairness p { margin: 8px 15px 14px; }
.coin-fairness details { padding-bottom: 1px; }
.coin-fairness details summary { border-top: 1px dashed var(--casino-border); }
.flip-history-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.flip-history-header h2 { gap: 7px; white-space: nowrap; }
.history-tabs { display: flex; flex-shrink: 0; gap: 0; padding: 3px; background: var(--casino-inset); border-radius: 20px; }
.history-tabs button { padding: 3px 9px; border-radius: 18px; color: var(--casino-muted); background: transparent; font-size: 12px; font-weight: 850; }
.history-tabs button[aria-selected='true'] { background: var(--casino-raised); color: #fff; }
#flip-history { max-height: 445px; min-height: 405px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #b0b4b1 transparent; border-radius: 16px; padding: 0 10px; background: var(--casino-raised); }
.flip-history-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; column-gap: 9px; min-height: 64px; border-bottom: 1px dashed #a072552b; font-size: 14px; line-height: 20px; }
.history-coin { position: relative; width: 32px; height: 32px; }
.history-coin > img { width: 32px; height: 32px; object-fit: contain; }
.history-coin .history-token { position: absolute; bottom: -2px; right: -2px; width: 14px; height: 14px; border-radius: 50%; }
.history-copy { min-width: 0; }
.history-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 900; }
.history-copy > span { color: var(--casino-muted); font-weight: 750; }
.flip-win, .flip-loss { white-space: nowrap; font-size: 13px; font-weight: 900; }
.flip-win { color: #6edba2; }
.flip-loss { color: #ff9c8c; }
.history-empty { padding: 20px 4px; color: var(--casino-muted); font-size: 14px; }
.feed-status { margin: 9px 0 0; color: #ffffffa6; font-size: 11px; line-height: 16px; }
.feed-help { position: relative; display: inline-flex; flex-shrink: 0; align-items: center; margin-left: auto; }
.feed-info { display: inline-grid; place-items: center; width: 16px; height: 16px; padding: 0; border: 1px solid #ffffff80; border-radius: 50%; background: transparent; color: #ffffffb3; font-size: 10px; font-weight: 800; line-height: 1; }
.feed-info::before { content: ''; position: absolute; inset: -5px; }
.feed-info:hover, .feed-info[aria-expanded='true'] { border-color: #ffffffb3; color: #fff; }
.feed-info:active { transform: none; }
.feed-tooltip { position: absolute; z-index: 10; top: calc(100% + 8px); right: 0; width: 224px; max-width: calc(100vw - 48px); padding: 10px; border: 1px solid #ffffff1f; border-radius: 14px; background: #111; color: #eee; box-shadow: 0 4px 8px #0005; font-size: 11px; font-weight: 800; line-height: 15px; letter-spacing: 0; text-align: left; }
.feed-tooltip::before { content: ''; position: absolute; right: 0; bottom: 100%; width: 100%; height: 9px; }
.bridge-transactions-list { display: grid; gap: 12px; max-height: 292px; overflow-y: auto; scrollbar-width: none; }
.bridge-activity-row { display: grid; grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr) 54px; align-items: center; column-gap: 6px; min-height: 18px; font-size: 12px; font-weight: 800; }
.bridge-row-token { display: flex; align-items: center; gap: 4px; min-width: 0; }
.bridge-row-token > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bridge-row-mark { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.bridge-row-mark > img { width: 18px; height: 18px; border-radius: 50%; }
.bridge-row-mark .bridge-row-network { position: absolute; bottom: -2px; right: -3px; width: 10px; height: 10px; border: 1px solid #fff; }
.bridge-activity-row time { color: #ffffff80; text-align: right; }
@media (prefers-reduced-motion: no-preference) {
  #coin-coin.is-flipping { animation: coin-flip .5s ease-in-out; }
  @keyframes coin-flip { 50% { transform: translateY(-20px) rotateY(540deg); } 100% { transform: rotateY(1080deg); } }
}
@media (max-width: 1100px) {
  .coinflip-layout { grid-template-columns: minmax(0, 425px) 280px; max-width: 729px; }
  .coin-game { grid-column: 1; grid-row: 1 / 3; }
  .coin-balance-panel { grid-column: 2; grid-row: 1; }
  .flip-history-panel { grid-column: 2; grid-row: 2; }
}
@media (max-width: 760px) {
  .bridge-page { padding-top: 72px; }
  .coinflip-layout { grid-template-columns: minmax(0, 1fr); max-width: 425px; }
  .coin-balance-panel, .coin-game, .flip-history-panel { grid-column: 1; grid-row: auto; }
}
@media (max-width: 390px) {
  .coin-game-title h1 { font-size: 29px; }
  .coin-round { grid-template-columns: 1fr 100px 1fr; }
  #coin-coin { width: 100px; height: 100px; margin-top: -6px; }
}
/* Coin Flip layout. */
.coinflip-page { --casino-surface: #412720; --casino-panel: #53352a; --casino-raised: #604136; --casino-inset: #2d1914; --casino-border: #886052; --casino-muted: #d3bcb1; }
.coin-balance { height: 64px; margin-top: 8px; padding: 14px 16px; }
.coin-currency { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #94705d; border-radius: 20px; padding: 5px 9px; background: #75503e; color: #fff; font-size: 16px; font-weight: 800; line-height: 22px; }
.coin-currency img { width: 20px; height: 20px; }
.coin-currency span { margin-left: 5px; font-size: 12px; }
.coin-reset-wrap { padding: 9px 15px 15px; }
#coin-deposit { height: 43px; padding: 10px 15px; text-align: left; background: #714b3b; }
.coin-amount { display: flex; align-items: center; justify-content: center; gap: 5px; height: 34px; }
.coin-amount img { width: 16px; height: 16px; }
#coin-stake { width: 30px; text-align: left; }
.coin-stake > span { font-size: 14px; line-height: 20px; }
.coin-stake { height: 122px; }
.coin-percentages button:disabled { color: #99867d; opacity: .75; cursor: default; }
.coin-flip-button:disabled { background: #a77c1e; opacity: 1; cursor: default; }
.coin-fairness summary { padding: 10px 15px; }
#coin-sound { right: 5px; width: 24px; }
#coin-sound svg { width: 16px; height: 16px; }
#coin-sound[aria-pressed='false'] { opacity: 1; }
.history-tabs button { font-size: 14px; padding: 3px 9px; line-height: 22px; }
.flip-history-header { gap: 5px; }
#flip-history { height: 444px; min-height: 444px; max-height: 444px; padding: 0 16px; border-radius: 14px; background: #5b3d31; mask-image: linear-gradient(#000 70%, transparent 100%); }
#flip-history.is-personal { mask-image: none; padding: 0; overflow: hidden; }
.flip-win, .flip-loss { font-size: 14px; }
.history-empty-personal { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 8px; gap: 14px; text-align: center; }
.history-empty-personal strong { font-size: 22px; line-height: 28px; font-weight: 950; color: #fff; }
.history-empty-personal > span:last-child { font-size: 14px; line-height: 20px; font-weight: 800; }
.history-empty-art { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(155deg, #65cfee 50%, #d7f6ff 51%); }
.history-empty-art img { width: 43px; height: 43px; transform: rotate(20deg); object-fit: contain; }
.coin-round { position: relative; grid-template-columns: repeat(3, 1fr); }
.coin-round > div:last-child { grid-column: 3; }
#coin-coin { position: absolute; left: 50%; top: calc(50% + 4px); transform: translate(-50%, -50%); width: 172px; height: 172px; margin: 0; pointer-events: none; }
.history-tabs button { line-height: 18px; }
.coin-sides img { width: 48px; height: 48px; }
body.casino .background-layer { display: block; }
body.casino .site-footer { background: none; }
.history-empty-art { width: 56px; height: 56px; background: none; }
.history-empty-art img { width: 70px; height: 70px; max-width: none; transform: none; }
.history-empty-art { display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.history-empty-art img { flex-shrink: 0; object-fit: cover; }
body.casino .blur-soft { mask-image: linear-gradient(to bottom, transparent 65%, #000 100%); }
body.casino .blur-medium { mask-image: linear-gradient(to bottom, transparent 80%, #000 100%); }
body.casino .blur-strong { mask-image: linear-gradient(to bottom, transparent 90%, #000 100%); }
.coin-sides label > span { pointer-events: none; }
body.casino .background-layer { inset: 0; }
.coin-currency [data-coin-symbol] { margin: 0; font-size: 16px; }
.coin-currency .coin-chevron { width: 14px; height: 14px; margin-left: 2px; align-self: center; }
.coin-modal-open { overflow: hidden; }
#coin-currency-dialog { width: 448px; max-width: calc(100vw - 32px); padding: 24px; border: 1px solid #886052; border-radius: 22px; background: #412720; color: #fff; box-shadow: 0 18px 50px #0003; }
#coin-currency-dialog::backdrop { background: #190e0899; backdrop-filter: blur(6px); }
.coin-currency-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.coin-currency-heading h2 { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 24px; line-height: 26px; font-weight: 950; }
.coin-currency-heading h2 > span { color: #c8a99a; font-size: 20px; }
.coin-currency-heading button { align-self: flex-start; padding: 0; font-size: 22px; line-height: 20px; background: none; color: #d3bcb1; }
.coin-currency-options { border-radius: 14px; background: #604136; padding: 8px; }
.coin-currency-options > button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px; height: 56px; border-radius: 10px; text-align: left; background: transparent; }
.coin-currency-options > button:hover, .coin-currency-options > button:focus-visible { background: #79513e; }
.coin-currency-options strong, .coin-currency-options button > span > span { display: block; font-size: 14px; line-height: 20px; font-weight: 850; }
.coin-currency-options button > span > span { color: #d3bcb1; }
.coin-option-icon { position: relative; width: 32px; height: 32px; flex-shrink: 0; }
.coin-option-icon img { width: 32px; height: 32px; border-radius: 50%; }
.coin-currency-options .coin-selected-check { display: none; position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border-radius: 50%; background: #ffd000; color: #412720; font-size: 11px; line-height: 13px; text-align: center; }
.coin-currency-options [aria-pressed="true"] img { outline: 1px solid #ffd000; outline-offset: 2px; }
.coin-currency-options [aria-pressed="true"] .coin-selected-check { display: block; }
.coin-fairness p { font-size: 14px; line-height: 20px; font-weight: 500; }
.coin-fairness .coin-rules { margin: 0 15px; }
.coin-fairness .coin-rules summary { padding: 12px 0; }
.coin-fairness .coin-rules p { margin: 0 0 14px; }
.coin-fairness summary::after { content: ''; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid currentColor; margin-top: 8px; }
.coin-fairness[open] > summary::after, .coin-fairness details[open] > summary::after { content: ''; border-top: 0; border-bottom: 4px solid currentColor; }
/* Currency picker entrance animation; replays on every opening. */
@media (prefers-reduced-motion: no-preference) {
  #coin-currency-dialog[open] {
    transform-origin: center;
    animation: coin-currency-enter 200ms cubic-bezier(.16, 1, .3, 1);
  }
  #coin-currency-dialog[open]::backdrop {
    animation: coin-currency-backdrop-enter 200ms ease-out;
  }
}
@keyframes coin-currency-enter {
  from { opacity: 0; transform: translateY(8px) scale(.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes coin-currency-backdrop-enter {
  from { background-color: #190e0800; backdrop-filter: blur(0); }
  to { background-color: #190e0899; backdrop-filter: blur(6px); }
}
/* Utility icon sizing. */
.utility-pill .theme-button svg { width: 20px; height: 20px; }
.utility-pill .points-cow-icon { width: 22px; height: 22px; }
.utility-pill .points-button { gap: 6px; }
.utility-pill .account-button > svg { width: 20px; height: 20px; }
.utility-pill .theme-icon, .utility-pill .points-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* Dark palette measured from wagyu.xyz on 18 October 2026. */
body.dark { --pill: rgb(4 4 4 / .3); --muted: #e1e8f1cc; color: #f1f5f9; }
body.dark .page-content { --swap-surface: #1e293b; --swap-white: #334155; --swap-text: #f1f5f9; --swap-muted: #8ca4be; --swap-border: #334155; --skeleton: #465873; }
body.dark .utility-pill .account-button { background: #334155; border-color: #334155; color: #f1f5f9; }
body.dark .utility-pill .account-button:hover, body.dark .utility-pill .account-button[aria-expanded="true"] { background: #475569; }
body.dark .account-menu { background: #334155; border-color: #334155; color: #f1f5f9; }
body.dark .account-menu-item svg { color: #cbd5e1; }
body.dark .utility-pill .account-menu-item:hover { background: #475569; }
body.dark .token-panel { background: #141e33; }
body.dark .token-panel:focus-within { background: #141e33; }
body.dark .token-selector { background: #334155; color: #f1f5f9; }
body.dark .swap-direction { background: #1e293b; box-shadow: none; }
body.dark .recipient-input-wrap { background: #202c40; border-color: transparent; }
body.dark .bridge-recipient-panel .recipient-input-wrap { background: #1d293e; }
body.dark .swap-submit { background: #2c7fff; color: #f1f5f9; }
body.dark .swap-submit[data-busy='true']:hover { background: #2c7fff; }
body.dark .swap-submit[data-incomplete="true"], body.dark .bridge-submit:disabled { opacity: .5; }
body.dark .swap-submit:hover { background: #2c7fff; }
body.dark .swap-guide { --guide-muted: #cbd5e1; --guide-blue: #2c7fff; }
body.dark .bridge-tabs button[aria-selected="true"] { color: #2c7fff; border-color: #2c7fff; }
body.dark .bridge-rewards a, body.dark .bridge-market-promo > strong { color: #2c7fff; }
body.dark .bridge-market-promo { background-image: linear-gradient(to right, #0f172a, #0f172acc 50%, transparent), url('assets/cow-banner-dark.jpg'); }
body.dark .promo-copy > span { color: #8ca4be; }
body.dark .coinflip-page { --casino-surface: #432924; --casino-panel: rgb(67 41 36 / .84); --casino-raised: #5c3d33; --casino-inset: #2b1814; --casino-border: #805548; --casino-muted: #dec3b9; }
body.dark .casino-panel { border-color: #805548; }
body.dark .coin-balance, body.dark .coin-reset-wrap, body.dark #flip-history { background: rgb(92 61 51 / .8); }
body.dark .coin-currency, body.dark #coin-deposit { background: #70493c; border-color: #805548; }
body.dark .coin-percentages button { background: #5c3d33; border-color: #805548; color: #fff; }
body.dark .coin-percentages button:disabled { opacity: .5; }
body.dark #coin-currency-dialog { background: #432924; border-color: #805548; }
body.dark .coin-currency-options { background: #5c3d33; }
body.dark .coin-currency-options button > span > span { color: #dec3b9; }
body.dark .coin-currency-options > button:hover { background: #70493c; }
/* Wallet footer lockup: wordmark rendered inline so it inherits theme color. */
.wallet-branding a { display: inline-flex; align-items: center; justify-content: center; color: inherit; padding: 2px 0; }
.wallet-branding .privy-logo { display: block; width: 150px; height: auto; aspect-ratio: 460 / 40; max-width: 100%; flex-shrink: 0; }
.wallet-branding a:hover { color: #747484; }
.wallet-networks img { display: block; width: 16px; height: 16px; border-radius: 50%; object-fit: contain; }
.wallet-networks svg { display: block; width: 16px; height: 16px; }
body.dark .wallet-dialog { background: #020713; color: #f8f8f8; }
body.dark .wallet-dialog-close { background: #101724; color: #9ba2ae; }
body.dark .wallet-option { background: #020713; border-color: #1f2937; color: #f8f8f8; }
body.dark .wallet-option:not(:disabled):hover { background: #101724; }
body.dark .wallet-option:focus-visible { outline-color: #88b0ff; }
body.dark .wallet-branding { color: #7b8491; }
body.dark .wallet-branding a:hover { color: #9ba2ae; }
body.dark .wallet-networks > span + span { box-shadow: 0 0 0 1px #020713; }
body.dark .wallet-logo::after { box-shadow: 0 0 0 2px #020713; }

/* Wallet providers remain unavailable until their integrations are configured. */
.wallet-option:disabled { opacity: 1; cursor: not-allowed; }

.wallet-dialog h2 { font-weight: 800; }
.wallet-option { font-family: inherit; font-size: 14px; font-weight: 700; }
.wallet-option-copy { display: grid; gap: 2px; line-height: 1.3; }

.wallet-metamask img, .wallet-phantom img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 3px; box-sizing: border-box; }
.wallet-phantom { background: #211c36; }

.wallet-metamask svg { display: block; width: 32px; height: 32px; padding: 5px; box-sizing: border-box; }

.wallet-phantom { background: transparent; }
.wallet-phantom img { padding: 0; border-radius: 6px; }

.wallet-option.is-pending { opacity: .65; }
.wallet-status { margin: 12px 2px 0; text-align: center; font-size: 12px; line-height: 1.45; font-weight: 600; color: #b42318; }
.wallet-status[data-tone="warn"] { color: #9a6700; }
.wallet-status[data-tone="info"] { color: #475467; }
.wallet-status a { color: inherit; text-decoration: underline; }
body.dark .wallet-status { color: #fca5a5; }
body.dark .wallet-status[data-tone="warn"] { color: #fbbf24; }
body.dark .wallet-status[data-tone="info"] { color: #cbd5e1; }

/* Network step and connect-progress step inside the wallet dialog. */
.wallet-network-view, .wallet-connect-view { display: none; }
.wallet-dialog.network-step .wallet-network-view,
.wallet-dialog.connect-step .wallet-connect-view { display: block; }
.wallet-dialog.network-step .wallet-options,
.wallet-dialog.network-step #wallet-dialog-heading,
.wallet-dialog.connect-step .wallet-options,
.wallet-dialog.connect-step #wallet-dialog-heading,
.wallet-dialog.connect-step .wallet-network-view,
.wallet-dialog.connect-step .wallet-status { display: none; }

.wallet-network-back, .wallet-connect-back { position: absolute; top: 16px; left: 16px; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: #f2f3fa; color: #5b6172; }
.wallet-network-back svg, .wallet-connect-back svg { width: 16px; height: 16px; }
.wallet-network-back:hover, .wallet-connect-back:hover { background: #e9ebf6; }
.wallet-connect-view[data-state="signing"] .wallet-connect-back { display: none; }

.wallet-network-icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 6px auto 18px; border-radius: 50%; background: #eceefb; color: #4a4f6a; }
.wallet-network-icon svg { width: 26px; height: 26px; }
.wallet-network-view h2 { margin: 0 0 26px; text-align: center; font-size: 20px; line-height: 25px; font-weight: 700; }
.wallet-network-options { display: grid; gap: 8px; }
.wallet-network-option { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 55px; padding: 10px; border: 1px solid #dedff0; border-radius: 13px; background: #fff; color: #101025; font-family: inherit; font-size: 14px; font-weight: 700; text-align: left; }
.wallet-network-option:hover { background: #f8f8fc; }
.wallet-network-option .wallet-logo { flex: 0 0 32px; }
.wallet-network-option .wallet-provider-name { text-decoration: none; }

.wallet-connect-ring { position: relative; width: 104px; height: 104px; margin: 6px auto 20px; }
.wallet-connect-ring > svg { display: block; width: 104px; height: 104px; }
.wallet-connect-ring circle { fill: none; stroke-width: 5; }
.wallet-connect-ring .ring-track { stroke: #eceef7; }
.wallet-connect-ring .ring-arc { stroke: #7f8cf0; stroke-linecap: round; stroke-dasharray: 66 230; transform-origin: 50% 50%; transform-box: view-box; animation: wallet-ring-spin 1.05s linear infinite; }
@keyframes wallet-ring-spin { to { transform: rotate(360deg); } }
.wallet-connect-view[data-state="verified"] .ring-track,
.wallet-connect-view[data-state="verified"] .ring-arc { stroke: #22c55e; stroke-dasharray: none; animation: none; }

.wallet-connect-logo { position: absolute; inset: 28px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; }
.wallet-connect-logo.wallet-metamask { background: #121212; }
.wallet-connect-logo.wallet-coinbase { background: #0052ff; }
.wallet-connect-logo.wallet-phantom { background: transparent; }
.wallet-connect-logo img, .wallet-connect-logo svg { display: block; width: 100%; height: 100%; padding: 6px; box-sizing: border-box; border-radius: 12px; object-fit: contain; }
.wallet-connect-logo.wallet-phantom img { padding: 0; }

.wallet-connect-view h2 { margin: 0 0 10px; text-align: center; font-size: 21px; line-height: 26px; font-weight: 700; }
.wallet-connect-note { margin: 0 auto 24px; max-width: 300px; text-align: center; font-size: 15px; line-height: 21px; color: #5a6072; }
.wallet-connect-action { display: block; width: 100%; height: 46px; border: 0; border-radius: 10px; background: #e9edfa; color: #a9b3d6; font-family: inherit; font-size: 15px; font-weight: 700; }
.wallet-connect-action[hidden] { display: none; }

body.dark .wallet-network-back, body.dark .wallet-connect-back { background: #101724; color: #9ba2ae; }
body.dark .wallet-network-back:hover, body.dark .wallet-connect-back:hover { background: #17202f; }
body.dark .wallet-network-icon { background: #101724; color: #cbd5e1; }
body.dark .wallet-network-option { background: #020713; border-color: #1f2937; color: #f8f8f8; }
body.dark .wallet-network-option:hover { background: #101724; }
body.dark .wallet-connect-ring .ring-track { stroke: #1b2331; }
body.dark .wallet-connect-note { color: #9ba2ae; }
body.dark .wallet-connect-action { background: #101724; color: #5b6a8a; }
.wallet-connect-action { cursor: pointer; transition: background-color 140ms ease, color 140ms ease; }
.wallet-connect-action:disabled { cursor: default; }
.wallet-connect-view[data-state="timeout"] .ring-track,
.wallet-connect-view[data-state="timeout"] .ring-arc { stroke: #ef4444; stroke-dasharray: none; animation: none; }
.wallet-connect-view[data-state="timeout"] .wallet-connect-action { background: #04060d; color: #fff; }
body.dark .wallet-connect-view[data-state="timeout"] .ring-track,
body.dark .wallet-connect-view[data-state="timeout"] .ring-arc { stroke: #f87171; }
body.dark .wallet-connect-view[data-state="timeout"] .wallet-connect-action { background: #f8f8f8; color: #0b0d16; }

.account-menu-label { margin: 4px 0 6px; padding: 0 8px; font-size: 11px; line-height: 1; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #8493a8; }
.account-wallet-list { display: grid; }
.account-wallet { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px; border-radius: 8px; }
.account-wallet-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: #04060d; overflow: hidden; }
.account-wallet-icon img, .account-wallet-icon svg { width: 22px; height: 22px; padding: 0; object-fit: contain; }
.account-wallet-copy { display: grid; gap: 2px; min-width: 0; overflow: hidden; }
.account-wallet-network { font-size: 12px; line-height: 1; font-weight: 600; color: #8493a8; }
.account-wallet-address { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; line-height: 1.25; font-weight: 700; color: #101c31; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-wallet-copy-button { display: grid; place-items: center; width: 24px; height: 24px; margin-left: auto; flex: 0 0 24px; border-radius: 6px; background: transparent; color: #92a2b8; }
.account-wallet-copy-button svg { width: 16px; height: 16px; }
.account-wallet-copy-button:hover { background: #f1f5f9; color: #61748e; }
.account-wallet-copy-button.copied { color: #12a150; }
.utility-pill .account-menu-connected .account-menu-item { border-top: 1px solid #e6eef7; border-radius: 0; height: 42px; margin: 2px 0 0; padding: 0 8px; width: 100%; }
.utility-pill .account-menu-connected .account-menu-item svg { width: 15px; height: 15px; }
.utility-pill .account-menu-disconnect-all { color: #e5484d; }
.utility-pill .account-menu-disconnect-all:hover, .utility-pill .account-menu-disconnect-all:focus-visible { background: #fef2f2; }

body.dark .account-menu-label { color: #93a6c0; }
body.dark .account-wallet-network { color: #b6c6dc; }
body.dark .account-wallet-address { color: #eef4fa; }
body.dark .account-wallet-copy-button { color: #93a6c0; }
body.dark .account-wallet-copy-button:hover { background: #475569; color: #dbe6f4; }
body.dark .account-wallet-copy-button.copied { color: #4ade80; }
body.dark .utility-pill .account-menu-connected .account-menu-item { border-top-color: #475569; }
body.dark .utility-pill .account-menu-disconnect-all { color: #fca5a5; }
body.dark .utility-pill .account-menu-disconnect-all:hover, body.dark .utility-pill .account-menu-disconnect-all:focus-visible { background: #3f2a34; }