/* Styles for the on-chain controls: wallet, network, swap, transaction status. */
.net-pill{display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:8px 12px;border-radius:999px;background:var(--clicky-silver,#e6e9ee);border:1px solid #818996;color:#414854;box-shadow:inset 0 1px 1px #fff,0 2px 5px #243c5e1b;text-shadow:0 1px #fff;white-space:nowrap}
.net-pill i{width:7px;height:7px;border-radius:50%;background:linear-gradient(#e1ffd1,#4a9f44);border:1px solid #608451;box-shadow:0 0 0 1px #fff8}
.net-pill.warn i{background:linear-gradient(#ffe6c2,#d9822b);border-color:#9a5a17}
.wallet-button{font-size:13px;padding:9px 14px;border-radius:999px;border:1px solid #2c3f63;background:linear-gradient(#5f8ee8,#2d5bd6);color:#fff;box-shadow:inset 0 1px 0 #ffffff88,0 3px 8px #1d3b8a33;white-space:nowrap;font-family:inherit}
.wallet-button.connected{background:linear-gradient(#fdfdfd,#dbe2ec);color:#243248;border-color:#8a96a8;font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.02em}
.wallet-button:disabled{opacity:.6}
.mobile-wallet{font-family:ui-monospace,Menlo,Consolas,monospace}
.mono,.mono-link{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.mono-link{color:inherit;text-decoration:underline;text-underline-offset:3px}
.tx-status{display:flex;align-items:center;gap:12px;margin:16px 0;padding:14px 16px;border-radius:12px;background:#e9e1f7;font-size:14px;line-height:1.4}
.tx-status i{width:14px;height:14px;border-radius:50%;border:2px solid #a68cdd;border-top-color:transparent;animation:tx-spin .8s linear infinite;flex-shrink:0}
@keyframes tx-spin{to{transform:rotate(360deg)}}
.motion-paused .tx-status i{animation:none;border-top-color:#a68cdd}
.swap-toggle{display:flex;gap:8px;margin:18px 0 14px}
.swap-toggle button{flex:1;border:1px solid var(--line);border-radius:30px;padding:11px;font-size:14px;background:transparent}
.swap-toggle button.selected{background:var(--purple);border-color:var(--purple)}
.slippage{display:flex;align-items:center;gap:8px;margin:16px 0 4px;font-size:12px;color:#70796e}
.slippage span{margin-right:auto}
.slippage button{border:1px solid var(--line);border-radius:20px;padding:6px 11px;font-size:12px;background:transparent}
.slippage button.selected{background:var(--purple);border-color:var(--purple);color:var(--ink)}
.amount-field b{font-weight:400;font-size:20px;letter-spacing:0;color:#676175;white-space:nowrap}
.detail-stats strong small{font-size:14px;letter-spacing:0;color:#7c8179;margin-left:4px}
.network-list{display:flex;flex-direction:column;gap:10px;margin:10px 0 20px}
.network-option{display:flex;flex-direction:column;gap:5px;align-items:flex-start;text-align:left;border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:#fffdf8}
.network-option strong{font-weight:400;font-size:18px}
.network-option small{font-size:12px;color:#7c8178}
.network-option.selected{border-color:#a791cd;background:#efe9fb}
.field small{display:block}
.field select{appearance:auto}
.review-list dd .mono-link{word-break:break-all}
.empty-market code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;background:#eeeae5;padding:2px 6px;border-radius:6px}
.pool-stat small{display:block;font-size:11px;color:#7b8176;margin-top:4px;font-weight:400}
.dialog-body button:disabled{opacity:.55;cursor:wait}
@media(max-width:1100px){.net-pill{display:none}}
@media(max-width:760px){.wallet-button{display:none}.mobile-menu .mobile-wallet{display:block}}
.backing-box{background:#eef5e6;border-radius:14px;padding:18px 20px;margin:27px 0}
.backing-box .detail-stats{margin:18px 0}
.backing-more{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.backing-more summary{display:flex;justify-content:space-between;cursor:pointer;font-size:14px;padding:8px 0;list-style:none}
.backing-more summary::-webkit-details-marker{display:none}
.backing-choice{margin:0 0 20px}
.check{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:14px 16px;cursor:pointer;background:#fffdf8;margin-bottom:14px}
.check input{margin-top:4px;width:18px;height:18px;accent-color:#6f52c4}
.check strong{font-weight:400;font-size:16px;display:block}
.check small{display:block;font-size:12px;color:#7c8178;line-height:1.4;margin-top:4px}

.footer-bottom p a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){.footer-links{grid-template-columns:repeat(2,1fr)}}
/* Mobile header: shorter bar, artwork starts right under it. */
@media(max-width:760px){
  html{scroll-padding-top:72px}
  .site-header{padding:12px 16px;gap:12px}
  .site-header.scrolled{margin:6px 10px;padding:8px 12px;border-radius:14px}
  .site-header .wordmark{font-size:27px;letter-spacing:-1.4px}
  .header-actions{flex-shrink:0}
  .menu-button{width:36px;height:36px;padding:9px}
  .hero{padding-top:62px;min-height:720px;height:100svh;max-height:860px}
  .hero-art{top:62px}
  .hero-topline{padding:4px 18px 0}
  .hero-copy{bottom:96px}
}
@media(max-width:440px){
  .hero h1{font-size:38px;max-width:100%;letter-spacing:-.045em}
  .hero-copy p{font-size:15px;white-space:normal}
  .hero-copy{padding:0 16px}
  .hero-buttons .button{width:100%;box-sizing:border-box}
  .hero-bottom{gap:12px}
  .statement{font-size:44px}
}

.hero-art picture{display:block;width:100%}