/* Testing notice: thin bar pinned above everything; pushes the sticky header down by its height. */
:root { --testbar-h: 0px; }
.testbar { display: none !important; }
.testbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--testbar-h); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 16px; background: #0b0b0b; border-bottom: 1px solid rgba(255, 255, 255, .08); font: 400 11px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .01em; color: #8a8a8a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.testbar .sep { opacity: .35; }
body { padding-top: var(--testbar-h); }
.top { top: var(--testbar-h) !important; }
@media (max-width: 640px) { .testbar .long { display: none; } }
/* X link next to the wallet button */
.xlink { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; color: #f5f5f5; background: rgba(18, 18, 20, .6); transition: background-color 150ms cubic-bezier(.2, .8, .2, 1), border-color 150ms cubic-bezier(.2, .8, .2, 1); }
.xlink:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .4); }
.xlink:focus-visible { outline: 2px solid #f5f5f5; outline-offset: 2px; }
.scene-r { display: inline-flex; align-items: center; gap: 8px; }
.top-r .xlink { margin-right: 0; }
.testbar.has-off .tb-off { display: none; }
.testbar .tb-on { display: inline-flex; align-items: center; gap: 8px; color: #a8a8a8; }
.testbar .tb-on .mono { color: #8a8a8a; }
.testbar .tb-copy { border: 1px solid rgba(255, 255, 255, .16); border-radius: 4px; background: transparent; color: #d6d6d6; font: inherit; padding: 2px 7px; cursor: pointer; transition: background 140ms ease-out, border-color 140ms ease-out, color 140ms ease-out; }
.testbar .tb-copy:hover, .testbar .tb-copy:focus-visible { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .4); color: #fff; outline: none; }
@media (max-width: 640px) { .testbar.has-off .tb-test { display: none; } }

/* footer spot: invisible, clickable */
.foot-in { position: relative; }
.kspot { position: absolute; left: 50%; top: 0; bottom: 0; width: 140px; transform: translateX(-50%); opacity: 0; background: none; border: 0; padding: 0; cursor: default; }
.kp-wrap { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .7); }
.kp { width: min(440px, 100%); display: grid; gap: 12px; padding: 20px; background: #0d0d0e; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; font-family: 'Geist Mono', ui-monospace, monospace; }
.kp label { display: grid; gap: 6px; font-size: 12px; color: #8a8a8a; }
.kp input { height: 38px; padding: 0 12px; background: #000; border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; color: #f5f5f5; font: 400 13px 'Geist Mono', monospace; }
.kp input:focus { outline: none; border-color: rgba(255, 255, 255, .5); }
.kp-msg { min-height: 16px; font-size: 12px; color: #b9b9b9; }
.kp-b { display: flex; gap: 8px; }

.kp-prev:empty { display: none; }
.kp-prev { font-size: 12px; color: #8a8a8a; }
.kp-coin { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; background: #000; }
.kp-coin img, .kp-coin i { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; background: #111; flex: none; }
.kp-coin div { display: grid; gap: 3px; }
.kp-coin b { color: #f5f5f5; font-weight: 500; font-size: 13px; }

.kp-pick:empty { display: none; }
.kp-pick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; }
.kp-pick .dim { width: 100%; color: #8a8a8a; }
.kp-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 4px; background: #000; border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; color: #f5f5f5; font: 400 12px 'Geist Mono', monospace; cursor: pointer; transition: border-color 150ms cubic-bezier(.2, .8, .2, 1), background-color 150ms cubic-bezier(.2, .8, .2, 1); }
.kp-chip:hover { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .06); }
.kp-chip img { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; }
.kp-chip b { font-weight: 500; }
.kp-chip span { color: #8a8a8a; }

/* official coin: verified badge with hover card */
.qc-off { position: relative; }
.offchk { position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; z-index: 2; cursor: default; }
.offchk svg { width: 20px; height: 20px; display: block; }
.vtip { position: absolute; left: auto; right: -10px; top: calc(100% + 8px); width: max-content; max-width: 320px; display: grid; gap: 4px; padding: 10px 12px; background: #0d0d0e; border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; font: 400 11px/1.45 'Geist Mono', ui-monospace, monospace; color: #b9b9b9; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 150ms cubic-bezier(.2, .8, .2, 1), transform 150ms cubic-bezier(.2, .8, .2, 1); box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
.vtip b { color: #f5f5f5; font-weight: 500; font-size: 12px; }
.vtip .mono { color: #f5f5f5; word-break: break-all; }
.offchk:hover .vtip, .offchk:focus .vtip { opacity: 1; transform: none; }
.kp-ca { font-size: 11px; word-break: break-all; }