/* v23 (v22 layout + fixes): one layout on every screen. A centred 640px column, header on top, tab bar at the bottom, same on phone and desktop. */
:root{--cx-col:640px;--cx-tabs:calc(67px + env(safe-area-inset-bottom,0px))}
.top .logo{font-size:17px;letter-spacing:.12em;min-width:0}
.top .logo span{white-space:nowrap}
.top .btn{white-space:nowrap;padding:10px 14px;font-size:12px;letter-spacing:.06em;flex:none}
@media(min-width:641px){.app,.tabs{border-left:1px solid var(--line);border-right:1px solid var(--line)}}
.mk-btn,.wg-btn,.cw-btn{right:max(12px,calc((100vw - var(--cx-col))/2 + 12px))}
.mk-btn{bottom:calc(var(--cx-tabs) + 10px)}
.wg-btn{bottom:calc(var(--cx-tabs) + 66px)}
.cw-btn{bottom:calc(var(--cx-tabs) + 122px)}
.mk-panel,.wg-panel{right:max(0px,calc((100vw - var(--cx-col))/2))}
.cx-tour-panel{top:auto;right:50%;bottom:calc(var(--cx-tabs) + 14px);transform:translateX(50%);width:min(430px,calc(100vw - 24px));max-height:calc(100dvh - var(--cx-tabs) - 28px)}
@media(min-width:421px){.cx-tour-panel{max-height:min(66dvh,520px)}.cx-tour-art{height:74px}.cx-tour-art img{width:74px;height:74px}.cx-tour-content{padding:18px 20px}.cx-tour-title{font-size:23px;margin:8px 0}.cx-tour-description{min-height:0}.cx-tour-progress{margin:17px 0}.cx-tour-skip{margin-top:12px}}
/* Floating buttons step aside while a sheet (Connect wallet, token picker, confirm) is open so they never cover wallet choices. */
body:has(.modal) .mk-btn,body:has(.modal) .wg-btn,body:has(.modal) .cw-btn{display:none}
/* v23: the floating buttons also step aside while the guided tour is open, so they never sit on top of Continue / Skip. */
body:has(.cx-tour) .mk-btn,body:has(.cx-tour) .wg-btn,body:has(.cx-tour) .cw-btn{display:none}
/* v23: on short desktop windows keep the stacked floating buttons from running into the header. */
@media(max-height:560px){.cw-btn,.wg-btn{display:none}}