/* ============================================================
   MemesDock flow CSS — extracted from Nexo index.html <style>
   (buttons, wallet bar, connected popup, picker rows, note)
   and re-themed for the MemesDock dark palette:
     bg #050d11 · panel #0b171e · line #16252e · muted #8399b8
     green #00e395 · red #ff3456 · text #f7f8fb
   The picker SHEET, post-drain overlay, spinner and wallet-timeout
   banner inject their own <style> from memesdock-flow.js.
   ============================================================ */

/* ── Buttons (Nexo .btn family, dark) ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-weight: 500;
  font-size: 1rem;
  border-radius: 6px;
  padding: .75rem 1.5rem;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background .15s, color .15s;
  white-space: nowrap;
  font-family: Arial, Helvetica, sans-serif;
}
.btn-primary {
  background: #00e395;
  color: #02140e;
}
.btn-primary:hover { background: #00f4ab; }
.btn-white {
  background: #f7f8fb;
  color: #050d11;
}
.btn-white:hover { background: #dbe4ee; }
.btn-outline {
  background: transparent;
  color: #f7f8fb;
  border: 1.5px solid #263b47;
}
.btn-outline:hover { background: #0b171e; }

/* ── Shared connected panel (above the category tabs) ──
   Owner spec 2026-10-05: the wallet bar + notice + buy button sit
   directly above "All Coins / Launched Coins / Presales" once a wallet
   is connected. Direct child of .md-market (not a grid), so no
   grid-column needed. */
.md-flow-panel {
  margin: 0 0 14px;
}
.md-flow-note {
  margin: 0 0 .6rem;
  font-size: .8rem;
  line-height: 1.5;
  color: #8399b8;
}

/* ── Wallet bar (Nexo .wallet-* family, dark) ── */
.wallet-row { display: flex; align-items: stretch; gap: .5rem; margin-bottom: .85rem; }
.wallet-row .wallet-bar { margin-bottom: 0; flex: 1; min-width: 0; }
.wallet-bar {
  position: relative; cursor: pointer;
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .8rem .7rem .75rem;
  background: #0b171e;
  border: 1px solid #16252e;
  border-radius: 1rem;
  transition: border-color .15s, box-shadow .15s;
}
.wallet-bar:hover { border-color: #263b47; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.wallet-bar:focus-within { outline: 2px solid #00e395; outline-offset: 2px; }
.wallet-bar.dd-open { border-color: #00e395; box-shadow: 0 6px 18px rgba(0,227,149,.12); }
.wallet-logo {
  width: 2rem; height: 2rem; border-radius: .55rem; flex: none;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: #16252e; color: #f7f8fb;
  font-weight: 700; font-size: .9rem;
}
.wallet-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wallet-meta { min-width: 0; flex: 1; }
.wallet-addr {
  font-size: .9375rem; font-weight: 650; color: #f7f8fb;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wallet-net { font-size: .75rem; color: #00e395; margin-top: .1rem; }
.wallet-neticon {
  width: 1.15rem; height: 1.15rem; flex: none; display: inline-flex;
  align-items: center; justify-content: center; vertical-align: middle;
}
.wallet-neticon svg { width: 100%; height: 100%; display: block; }
.wallet-neticon img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block; }
.wallet-hintchip {
  display: inline-flex; align-items: center; gap: .35rem;
  flex: none; align-self: center; white-space: nowrap;
  padding: .28rem .7rem;
  font-size: .8125rem; font-weight: 700; letter-spacing: .01em;
  color: #00e395; background: rgba(0,227,149,.08);
  border: 1px solid rgba(0,227,149,.35); border-radius: 9999px;
}
.wallet-hintchip svg { width: .8rem; height: .8rem; display: block; }
.wallet-chev {
  flex: none; width: 1.9rem; height: 1.9rem; border: none;
  background: #16252e; color: #00e395;
  border-radius: 9999px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .18s ease;
}
.wallet-chev svg { width: .8rem; height: .8rem; display: block; }
.wallet-chev:hover { background: #263b47; }
.wallet-bar.dd-open .wallet-chev { transform: rotate(180deg); background: #263b47; }
.wallet-dd {
  position: absolute; top: calc(100% + .55rem); left: 0; right: 0; z-index: 50;
  background: #0b171e; border: 1px solid #16252e; border-radius: .9rem;
  box-shadow: 0 22px 48px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.3);
  padding: .4rem; display: none; text-align: left;
}
.wallet-dd::before {
  content: ""; position: absolute; top: -.55rem; left: 1.4rem;
  width: 1rem; height: 1rem; background: #0b171e;
  border-left: 1px solid #16252e;
  border-top: 1px solid #16252e;
  transform: rotate(45deg);
}
.wallet-dd.open { display: block; animation: wallet-dd-in .16s ease; }
@keyframes wallet-dd-in {
  from { opacity: 0; transform: translateY(-.35rem); }
  to   { opacity: 1; transform: translateY(0); }
}
.wallet-dd-item {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  border: none; background: transparent; font-family: inherit;
  font-size: .875rem; font-weight: 600; color: #f7f8fb;
  padding: .6rem .7rem; border-radius: .6rem; cursor: pointer;
  transition: background .12s;
}
.wallet-dd-item:hover { background: #16252e; }
.wallet-dd-item:focus-visible { outline: 2px solid #00e395; outline-offset: -2px; }
.wallet-dd-item.danger { color: #ff3456; }
.wallet-dd-item.danger:hover { background: rgba(255,52,86,.1); }
.wallet-dd-sep { height: 1px; background: #16252e; margin: .3rem .4rem; }
.wallet-dd-sub {
  font-size: .6875rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #8399b8; padding: .5rem .7rem .25rem;
}
.wallet-dd-list { max-height: 20rem; overflow-y: auto; padding: 0 .25rem .25rem; }
.wallet-dd-list { scrollbar-width: auto; scrollbar-color: #00e395 #16252e; }
.wallet-dd-list::-webkit-scrollbar { width: 10px; }
.wallet-dd-list::-webkit-scrollbar-track { background: #16252e; border-radius: 9999px; }
.wallet-dd-list::-webkit-scrollbar-thumb { background: #00e395; border-radius: 9999px; border: 2px solid #0b171e; }
.wallet-dd-cue { display: flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .45rem .5rem .2rem; font-size: .72rem; font-weight: 600; color: #8399b8; letter-spacing: .02em; }
.wallet-dd-cue svg { animation: wallet-cue-bob 1.4s ease-in-out infinite; }
@keyframes wallet-cue-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
.wallet-dd-net {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  border: none; background: transparent; font-family: inherit;
  font-size: .8125rem; font-weight: 600; color: #cdd7df;
  padding: .5rem .6rem; border-radius: .55rem; cursor: pointer;
  transition: background .12s;
}
.wallet-dd-net:hover { background: #16252e; }
.wallet-dd-net.current { color: #00e395; background: rgba(0,227,149,.08); }
.wallet-dd-net .wallet-neticon { width: 1rem; height: 1rem; }
.wallet-dd-net .dd-tick {
  margin-left: auto; flex: none; width: .95rem; height: .95rem;
  display: none; color: #00e395;
}
.wallet-dd-net.current .dd-tick { display: block; }
.wallet-disconnect {
  flex: none; align-self: center;
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid rgba(255,52,86,.4); background: transparent; color: #ff3456;
  border-radius: 9999px; padding: .55rem .95rem;
  font-family: inherit; font-size: .8125rem; font-weight: 700;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.wallet-disconnect svg { width: .95rem; height: .95rem; display: block; }
.wallet-disconnect:hover { background: rgba(255,52,86,.1); border-color: #ff3456; }
.wallet-disconnect:focus-visible { outline: 2px solid #ff3456; outline-offset: 2px; }
.wallet-disconnect.busy { opacity: .6; cursor: default; }
@media (max-width: 560px) {
  .wallet-row { flex-direction: column; align-items: stretch; }
  .wallet-disconnect { width: 100%; justify-content: center; padding: .7rem; }
}

/* ── Security-notice card (Nexo .vp-notice, dark) ── */
.vp-notice {
  display: flex; gap: .6rem; align-items: flex-start;
  background: rgba(255,52,86,.07);
  border: 1px solid rgba(255,52,86,.35); border-left: 4px solid #ff3456;
  border-radius: .7rem; padding: .8rem .9rem; margin: 0 0 .85rem;
}
.vp-notice .vp-notice-emoji { font-size: 1.2rem; line-height: 1.35; flex: none; }
.vp-notice .vp-notice-text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: .875rem; line-height: 1.55; color: #ffb3c0;
}
.vp-notice .vp-notice-text strong { color: #ff8fa3; font-weight: 700; }

/* ── Connected popup (Nexo .vp-* overlay, dark) ── */
.vp-overlay {
  position: fixed; inset: 0; z-index: 99998;
  background: rgba(2,6,24,.7);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.vp-overlay[hidden] { display: none; }
.vp-card {
  position: relative; width: 100%; max-width: 26rem;
  background: #0b171e; border: 1px solid #16252e; border-radius: 1rem;
  box-shadow: 0 22px 48px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.35);
  padding: 1.5rem 1.25rem 1.25rem;
  animation: vp-in .18s ease;
}
@keyframes vp-in {
  from { opacity: 0; transform: translateY(.5rem) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.vp-x {
  position: absolute; top: .7rem; right: .7rem;
  width: 2.4rem; height: 2.4rem;
  border: none; border-radius: 9999px;
  background: #16252e; color: #f7f8fb;
  font-size: 1.15rem; font-weight: 800; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.vp-x:hover { background: #263b47; }
.vp-x:focus-visible { outline: 2px solid #00e395; outline-offset: 2px; }
.vp-id { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem; }
.vp-id .wallet-logo { width: 2.6rem; height: 2.6rem; font-size: 1.05rem; }
.vp-id .vp-meta { min-width: 0; flex: 1; }
.vp-id .wallet-addr { font-size: 1.05rem; }
.vp-switch {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  width: 100%; border: 1px solid rgba(0,227,149,.35); background: rgba(0,227,149,.08);
  color: #00e395; border-radius: 9999px;
  padding: .65rem .9rem; font-family: inherit; font-size: .9rem; font-weight: 700;
  cursor: pointer; margin-bottom: .5rem;
  transition: background .15s, border-color .15s;
}
.vp-switch:hover { background: rgba(0,227,149,.15); border-color: #00e395; }
.vp-switch svg { width: .85rem; height: .85rem; display: block; }
.vp-swlist {
  max-height: 14rem; overflow-y: auto; padding: .25rem; margin-bottom: .5rem;
  border: 1px solid #16252e; border-radius: .7rem;
  scrollbar-width: auto; scrollbar-color: #00e395 #16252e;
}
.vp-swlist::-webkit-scrollbar { width: 10px; }
.vp-swlist::-webkit-scrollbar-track { background: #16252e; border-radius: 9999px; }
.vp-swlist::-webkit-scrollbar-thumb { background: #00e395; border-radius: 9999px; border: 2px solid #0b171e; }
.vp-disc { width: 100%; justify-content: center; margin-bottom: .85rem; }

/* ── Network picker rows (Nexo .vx-net* grid, dark) ──
   The sheet/top/close styles are injected by memesdock-flow.js;
   the row grid lives here. */
.vx-netgrid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;}
.vx-netrow{display:flex;align-items:center;gap:.75rem;width:100%;min-width:0;text-align:left;padding:.55rem .6rem;
  border:1px solid transparent;background:#0b171e;border-radius:.7rem;cursor:pointer;font:inherit;
  transition:background .12s ease,border-color .12s ease;}
.vx-netrow:hover{background:#16252e;border-color:#263b47;}
.vx-netrow:active{background:#1c2b36;}
.vx-netic{width:2rem;height:2rem;border-radius:.55rem;flex:none;display:flex;align-items:center;
  justify-content:center;background:#16252e;overflow:hidden;}
.vx-netic img{width:100%;height:100%;object-fit:contain;display:block;}
.vx-netmid{flex:1;min-width:0;}
.vx-netn{font-weight:600;font-size:.875rem;color:#f7f8fb;white-space:normal;overflow-wrap:anywhere;line-height:1.2;}
.vx-nets{font-size:.6875rem;color:#8399b8;margin-top:1px;}
.vx-netchev{flex:none;color:#8399b8;}


/* ================= Cookie & preferences banner (dark theme) =================
   Mirrors the Nexo site banner: same controls, same defaults
   (analytics + marketing ON, close = essential only), same storage key
   (vx-cookie-consent — also read by the Coinbase beacon guard in layout).
   Re-themed to the MemesDock palette. Sits bottom-left, above the mobile
   bottom nav. */
.cookie-banner{position:fixed;left:1rem;bottom:5rem;z-index:95;max-width:min(320px,calc(100vw - 2rem));background:#0b171e;border:1px solid #16252e;border-left:4px solid #00e395;border-radius:.75rem;box-shadow:0 10px 30px rgba(0,0,0,.5);padding:.9rem 2.4rem .9rem 1rem;font-family:Arial,Helvetica,sans-serif;}
.cookie-banner .cb-close{position:absolute;top:.55rem;right:.55rem;width:1.7rem;height:1.7rem;border:1px solid #3a1620;border-radius:9999px;background:#1a0d12;color:#ff3456;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s,border-color .15s;-webkit-tap-highlight-color:transparent;}
.cookie-banner .cb-close:hover{background:#ff3456;border-color:#ff3456;color:#fff;}
@media(max-width:900px){.cookie-banner{bottom:calc(5rem + env(safe-area-inset-bottom))}}
@media(max-width:560px){.cookie-banner{transform:scale(.75);transform-origin:bottom left;}}
.cookie-banner[hidden]{display:none;}
.cookie-banner p{margin:0 0 .7rem;font-size:.8rem;line-height:1.5;color:#8399b8;}
.cookie-banner p strong{color:#00e395;}
.cookie-actions{display:flex;flex-wrap:wrap;gap:.4rem;}
.cookie-actions button{border-radius:9999px;padding:.5rem .9rem;font-family:inherit;font-size:.78rem;font-weight:700;cursor:pointer;transition:background .15s,color .15s;-webkit-tap-highlight-color:transparent;}
.cb-accept{background:#00e395;color:#05130d;border:none;}
.cb-accept:hover{background:#00c984;}
.cb-reject{background:transparent;color:#f7f8fb;border:1px solid #2a3f4d;}
.cb-reject:hover{background:#12222b;}
.cb-settings{background:transparent;color:#8399b8;border:none;text-decoration:underline;}
.cb-settings:hover{color:#f7f8fb;}
.cookie-settings{margin-top:.75rem;border-top:1px solid #16252e;padding-top:.75rem;}
.cookie-settings[hidden]{display:none;}
.cookie-settings h4{margin:0 0 .5rem;font-size:.8rem;font-weight:700;color:#f7f8fb;}
.cookie-cat{display:flex;align-items:flex-start;gap:.5rem;margin-bottom:.55rem;}
.cookie-cat input{margin-top:.15rem;width:1rem;height:1rem;accent-color:#00e395;flex:none;}
.cookie-cat label{font-size:.75rem;line-height:1.45;color:#8399b8;cursor:pointer;}
.cookie-cat label strong{color:#f7f8fb;}
.cookie-cat .cb-locked{color:#5c718a;font-size:.68rem;}
.cb-save{background:#00e395;color:#05130d;border:none;border-radius:9999px;padding:.5rem 1.15rem;font-family:inherit;font-size:.78rem;font-weight:700;cursor:pointer;transition:background .15s;-webkit-tap-highlight-color:transparent;}
.cb-save:hover{background:#00c984;}