/* =============================================================================
   SwapDEX Redesign v15 — Unified Stylesheet
   -----------------------------------------------------------------------------
   Single source of truth for the redesigned interfaces:
     1.  Wallet dashboard          (.sdv5-wallet)
     2.  Receive popup             (#sdv5-receive)
     3.  Send popup                (#sdv5-send)
   -----------------------------------------------------------------------------
   NOTE: the Swap card (.sdv5-swap) and Bridge panel (.sdv5-bridge) sections
   that used to live here were removed along with the swap/bridge features
   themselves. A handful of harmless selectors elsewhere in this file still
   mention .sdv5-swap/.sdv5-bridge as part of larger shared rules (grouped
   with the wallet/send/receive selectors) — those never match anything
   now that the swap/bridge markup is gone, so they're inert, not bugs.
   -----------------------------------------------------------------------------
   This file is loaded LAST in index.html so it wins specificity over every
   prior stylesheet (style.css, swapdex-ui-upgrade.css, pakixto-theme.css …).
   It is namespaced under the `.sdv5-…` prefix so it never bleeds into other
   modules (GIDO, NEXUS terminal, etc.).
   ========================================================================== */

/* ─── Fonts ────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ─── Design tokens ────────────────────────────────────────────────────── */
/* All --sdv5-* variable definitions (dark default + light theme overrides)
   migrated to css/style.css. */

/* =============================================================================
   GLOBAL TYPOGRAPHY / RESET INSIDE SDV5 SHELLS
   ========================================================================== */
.sdv5-wallet, .sdv5-swap, .sdv5-bridge,
#sdv5-receive, #sdv5-send {
  font-family: "Montserrat", sans-serif;
  color: var(--sdv5-muted);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

.sdv5-wallet, .sdv5-swap, .sdv5-bridge,
#sdv5-receive, #sdv5-send,
#sdx-buy-popup,
.sdv5-wallet *, .sdv5-swap *, .sdv5-bridge *,
#sdv5-receive *, #sdv5-send *,
#sdx-buy-popup * {
  box-sizing: border-box;
}

/* ─── Shared atoms ─────────────────────────────────────────────────────── */
.sdv5-mono { font-family: "Montserrat", sans-serif; letter-spacing: 0 !important; }

.sdv5-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11.3px; font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase;
}
.sdv5-pill.green {
  background: var(--sdv5-accent-soft);
  border: 1px solid var(--sdv5-border-mid);
  color: var(--sdv5-accent);
}
.sdv5-pill.green .sdv5-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sdv5-accent);
  border: 1px solid var(--bb-border);
}

/* Big lime CTA — used by SWAP NOW / SEND ETH / COPY ADDRESS / GET ROUTES */
.sdv5-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 17px 22px;
  border: none;
  border-radius: 14px;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 16.9px;
  letter-spacing: 0.02em;
  color: var(--sdv5-muted) !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  text-align: center;
  background: var(--text-sky);
  box-shadow: none;
  transition: transform .15s ease, opacity .15s ease;
}
.sdv5-cta::before { display: none; }
.sdv5-cta > * { position: relative; z-index: 1; }
.sdv5-cta:hover:not(:disabled) {
  transform: translateY(-1px);
  opacity: 0.92;
  box-shadow: none;
}
.sdv5-cta:active:not(:disabled) { transform: translateY(0); opacity: 1; }
.sdv5-cta:disabled {
  background: var(--text-sky);
  opacity: 0.45;
  box-shadow: none;
  cursor: not-allowed;
}

/* Outlined ghost button */
.sdv5-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px;
  background: transparent;
  border: 1px solid var(--sdv5-border-mid);
  border-radius: 12px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 13.6px;
  color: var(--sdv5-muted);
  cursor: pointer;
  transition: all .15s;
}
.sdv5-ghost:hover { border-color: var(--sdv5-border-bold); background: var(--sdv5-accent-soft); }

/* Card */
.sdv5-card {
  background: var(--sdv5-bg-card);
  border: 1px solid var(--sdv5-border);
  border-radius: var(--sdv5-radius-lg);
  padding: 18px;
}

/* Card section label */
.sdv5-label {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 12.4px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sdv5-muted);
}

/* Scrollbar styling inside sdv5 surfaces */
.sdv5-wallet *::-webkit-scrollbar,
.sdv5-bridge *::-webkit-scrollbar,
#sdv5-send *::-webkit-scrollbar,
#sdv5-receive *::-webkit-scrollbar {
  width: 6px; height: 6px;
}
.sdv5-wallet *::-webkit-scrollbar-thumb,
.sdv5-bridge *::-webkit-scrollbar-thumb,
#sdv5-send *::-webkit-scrollbar-thumb,
#sdv5-receive *::-webkit-scrollbar-thumb {
  background: var(--sdv5-border-mid); border-radius: 4px;
}

/* =============================================================================
   1. WALLET DASHBOARD  (Image 1)
   --------------------------------------------------------------------------- */
.sdv5-wallet {
  width: 100%; height: 100%;
  overflow-y: auto;
  background: var(--sdv5-bg);

}

/* — top row: hero + portfolio value — */
.sdv5-w-top {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 14px;
  margin-bottom: 14px;
}

.sdv5-w-hero {
  position: relative;
  background: #000000;
  border: 1px solid var(--sdv5-border-mid);
  border-radius: var(--sdv5-radius-lg);
  padding: 22px;
  min-height: 130px;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
.sdv5-w-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: transparent;
  pointer-events: none;
}
.sdv5-w-hero-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 24.9px;
  letter-spacing: -0.02em;
  margin: 0;
  display: flex; align-items: center; gap: 8px;
}
.sdv5-w-hero-title .lock { font-size: 18.1px; opacity: 0.85; }
.sdv5-w-hero-title .gold { color: var(--text-normal-tier); }
.sdv5-w-hero-title .gold-mute { color: var(--sdv5-muted); }
.sdv5-w-hero-addr {
  font-family: "Montserrat", sans-serif;
  font-size: 14.7px;
  color: var(--text-normal-tier);
  margin-top: 12px;
  display: flex; align-items: center; gap: 8px;
}
.sdv5-w-hero-addr .copy {
  border: none; background: transparent;
  color: var(--text-normal-tier);
  cursor: pointer; padding: 2px;
}
.sdv5-w-hero-addr .copy:hover { color: var(--text-normal-tier); }

.sdv5-w-portfolio {
  background: var(--sdv5-bg-card);
  border: 1px solid var(--sdv5-border);
  border-radius: var(--sdv5-radius-lg);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
}
.sdv5-w-portfolio-head {
  display: flex; justify-content: space-between; align-items: flex-start;
}
.sdv5-w-portfolio-head .lbl {
  font-size: 14.7px; color: var(--sdv5-muted); font-weight: 500;
}
.sdv5-w-portfolio-head .range {
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 12.4px;
  color: var(--sdv5-muted);
  background: transparent;
  border: 1px solid var(--sdv5-border);
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
}
.sdv5-w-portfolio-value {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 33.9px;
  letter-spacing: -0.02em;
  color: var(--text-normal-tier);
}
.sdv5-w-portfolio-value .ccy {
  font-size: 13.6px; font-weight: 600; color: var(--sdv5-muted); margin-left: 4px;
}
.sdv5-w-change {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12.4px; font-weight: 700; font-family: "Montserrat", sans-serif;
  width: fit-content;
}
.sdv5-w-change.up   { background: rgba(255,255,255,0.10); color: var(--sdv5-muted); }
.sdv5-w-change.down { background: rgba(255,80,100,0.10); color: var(--sdv5-red); }

.sdv5-w-base-line {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.4px; color: var(--sdv5-muted);
  font-family: "Montserrat", sans-serif;
}
.sdv5-w-base-line .dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: linear-gradient(135deg, #4f9eff, #2868dd);
  flex-shrink: 0;
}
.sdv5-w-base-line .refresh {
  background: transparent; border: none; color: var(--sdv5-muted);
  cursor: pointer; padding: 0 4px; font-size: 14.7px;
}

/* — action button grid: 3 per row × 2 rows — */
.sdv5-w-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
/* Remove old bridge full-width span */
.sdv5-w-action-bridge {
  grid-column: unset;
}
.sdv5-w-action {
  background: var(--sdv5-bg-card);
  border: 1px solid var(--bb-border);
  border-radius: 14px;
  padding: 14px 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 14.7px;
  color: var(--sdv5-muted);
  letter-spacing: 0.01em;
  text-align: center;
}
.sdv5-w-action:hover {
  border-color: var(--bb-border);
  background: var(--card2, #252525);
  transform: translateY(-1px);
}
.sdv5-w-action:active {
  transform: translateY(0);
}
.sdv5-w-action.active-action {
  border-color: var(--bb-border);
  background: var(--card, #131412);
}
body.theme-light .sdv5-w-action.active-action,
html[data-theme="light"] .sdv5-w-action.active-action {
  background: #F0F0F0;
}
.sdv5-w-action .ico {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sdv5-muted);
  flex-shrink: 0;
}
.sdv5-w-action .ico svg { width: 100%; height: 100%; }

/* ══════════════════════════════════════════════════════════════════
   UNIFIED HERO CARD — matches SwapDEX Wallet image reference
   Single rounded dark card with orb on right, content on left
   ══════════════════════════════════════════════════════════════════ */
.sdv5-w-unified-hero {
  position: relative;
  background: #000000;
  border: 1px solid var(--bb-border);
  border-radius: 20px;
  padding: 22px 24px 22px 24px;
  margin-bottom: 12px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  min-height: 220px;
  /* Fix Samsung/Chrome compositing glitch with SVG gradients */
  isolation: isolate;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
/* Subtle glow behind the orb */
.sdv5-w-unified-hero::before {
  content: "";
  position: absolute;
  right: 80px;
  top: 50%;
  transform: translateY(-50%);
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255,255,255,0.025) 0%, transparent 70%);
  pointer-events: none;
  border-radius: 50%;
}

/* Left column: all the text content */
.sdv5-w-uh-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-right: 12px;
  /* push content below the pill */
  padding-top: 0;
}

/* Title row */
.sdv5-w-uh-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 24.9px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  /* leave room so title doesn't collide with top-right pill */
  padding-right: 140px;
}
.sdv5-w-uh-title .lock { font-size: 20.3px; opacity: 0.85; }
.sdv5-w-uh-title .gold { color: var(--text-normal-tier); }

/* TOTAL VALUE label + 24H button */
.sdv5-w-uh-value-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.sdv5-w-uh-value-head .lbl {
  font-size: 12.4px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-normal-tier);
  text-transform: uppercase;
}
.sdv5-w-uh-value-head .range {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 11.3px;
  color: var(--text-normal-tier);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--bb-border);
  border-radius: 6px;
  padding: 3px 9px;
  cursor: pointer;
}

/* Big dollar amount */
.sdv5-w-uh-amount {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 45.2px;
  letter-spacing: -0.03em;
  color: var(--text-normal-tier);
  line-height: 1.05;
  margin-bottom: 10px;
}
.sdv5-w-uh-amount .ccy {
  font-size: 14.7px;
  font-weight: 600;
  color: var(--text-normal-tier);
  margin-left: 5px;
}

/* ── Right: decorative logo orb ──────────────────────────────── */
.sdv5-w-uh-orb {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Concentric dotted rings */
.sdv5-w-uh-orb-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed var(--bb-border);
}
.sdv5-w-uh-orb-ring--1 { width: 160px; height: 160px; }
.sdv5-w-uh-orb-ring--2 { width: 120px; height: 120px; border-color: var(--bb-border); }
.sdv5-w-uh-orb-ring--3 { width: 82px; height: 82px; border-color: var(--bb-border); border-style: solid; }

/* Gem container */
.sdv5-w-uh-orb-gem {
  position: relative;
  z-index: 2;
  width: 68px;
  height: 68px;
  background: linear-gradient(145deg, #2a2a2a 0%, #000000 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bb-border);
}
.sdv5-w-uh-orb-gem svg {
  width: 44px;
  height: 44px;
}

/* wh-wmode-pill position override for unified hero */
.sdv5-w-unified-hero .wh-wmode-pill {
  top: 14px;
  right: 14px;
}

/* Responsive */
@media (max-width: 520px) {
  .sdv5-w-uh-amount { font-size: 33.9px; }
  .sdv5-w-uh-title { font-size: 20.3px; padding-right: 110px; }
  .sdv5-w-uh-orb { width: 110px; height: 110px; right: 10px; }
  .sdv5-w-uh-orb-ring--1 { width: 110px; height: 110px; }
  .sdv5-w-uh-orb-ring--2 { width: 82px; height: 82px; }
  .sdv5-w-uh-orb-ring--3 { width: 56px; height: 56px; }
  .sdv5-w-uh-orb-gem { width: 50px; height: 50px; border-radius: 12px; }
  .sdv5-w-uh-orb-gem svg { width: 32px; height: 32px; }
  .sdv5-w-unified-hero { min-height: 180px; padding: 16px 16px 16px 16px; }
}

/* — Assets card — */
.sdv5-w-assets {
  background: linear-gradient(160deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid var(--bb-border);
  border-radius: var(--sdv5-radius-lg);
  padding: 0;
  margin-bottom: 14px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--bb-border)!important;
}
.sdv5-w-assets-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--bb-border);
  background: rgba(255,255,255,0.025);
}
.sdv5-w-assets-head-left {
  display: flex; align-items: center; gap: 9px;
}
.sdv5-w-assets-icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--bb-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--sdv5-muted);
  flex-shrink: 0;
}
.sdv5-w-assets-head .ttl {
  font-family: "Montserrat", sans-serif; font-weight: 800;
  font-size: 13.6px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-normal-tier);tier);
}
.sdv5-w-assets-head .all {
  font-size: 10.9px; color: var(--sdv5-muted); font-weight: 700;
  cursor: pointer; background: rgba(255,255,255,0.06); border: 1px solid var(--bb-border);
  border-radius: 20px; padding: 5px 11px;
  display: inline-flex; align-items: center; gap: 4px;
  transition: all .15s; letter-spacing: 0.03em; font-family: "Montserrat", sans-serif;
}
.sdv5-w-assets-head .all:hover {
  background: rgba(255,255,255,0.12); border-color: var(--bb-border);
  color: var(--sdv5-muted);
}
/* tabs retained for legacy JS compat but hidden */
.sdv5-w-tabs { display: none; }
.sdv5-w-tab { display: none; }

.sdv5-w-asset-table {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  column-gap: 0;
  row-gap: 0;
  padding: 8px 20px 6px;
  background: #131412;
  border-radius: 14px;
}
body.theme-light .sdv5-w-asset-table { background: #F0F0F0; }
.sdv5-w-asset-table .h {
  font-size: 10.1px; color: var(--sdv5-muted); font-weight: 700;
  padding: 12px 0 10px;
  border-bottom: 1px solid var(--bb-border);
  text-transform: uppercase; letter-spacing: 0.06em;
  font-family: "Montserrat", sans-serif;
}
.sdv5-w-asset-table .h.right { text-align: right; }
.sdv5-w-asset-row {
  display: contents;
}
.sdv5-w-asset-row > div {
  padding: 11px 0;
  display: flex; align-items: center;
  font-size: 13.6px;
  border-bottom: 1px solid var(--bb-border);
}
.sdv5-w-asset-row:last-child > div { border-bottom: none; }
.sdv5-w-asset-row > div.right { justify-content: flex-end; font-family: "IBM Plex Mono", monospace; font-size: 12.4px; }
.sdv5-w-asset-row .asset {
  gap: 10px;
}
.sdv5-w-asset-row .asset .logo {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.06));
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; color: var(--sdv5-muted); font-size: 13.6px;
  flex-shrink: 0; overflow: hidden;
}
.sdv5-w-asset-row .asset .logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.sdv5-w-asset-row .asset .name { font-weight: 700; font-size: 13.6px; color: var(--text-normal-tier); }
.sdv5-w-asset-row .asset .sub { font-size: 10.1px; color: var(--sdv5-muted); margin-top: 2px; font-family: "IBM Plex Mono", monospace; }
.sdv5-w-asset-row .change.up   { color: var(--state-gain); font-weight: 700; font-size: 11.2px; }
.sdv5-w-asset-row .change.down { color: var(--state-danger); font-weight: 700; font-size: 11.2px; }

/* ═══════════════════════════════════════════════════════
   PORTFOLIO OVERVIEW + BREAKDOWN — reference-image rebuild
   ═══════════════════════════════════════════════════════ */
.sdv5-w-charts {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 14px;
}

/* ── shared card shell ── */
.sdv5-w-chart-card {
  background: var(--sdv5-bg-card);
  border: 1px solid var(--bb-border);
  border-radius: var(--sdv5-radius-lg);
  padding: 20px 20px 16px;
  overflow: hidden;
}

/* ── PORTFOLIO OVERVIEW card ── */
/* section label row */
.sdv5-w-po-label {
  font-family: "Montserrat", sans-serif;
  font-size: 12.4px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sdv5-muted);
  margin-bottom: 2px;
}
/* total value + change badge row */
.sdv5-w-po-valrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 2px;
}
.sdv5-w-po-big {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 31.6px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.sdv5-w-po-change {
  font-family: "Montserrat", sans-serif;
  font-size: 12.4px;
  font-weight: 600;
  color: var(--sdv5-muted);
  display: flex; align-items: center; gap: 3px;
}
.sdv5-w-po-change.up  { color: var(--state-gain-alt); }
.sdv5-w-po-change.down{ color: var(--sdv5-red); }
/* TOTAL VALUE sub-label */
.sdv5-w-po-sublabel {
  font-size: 10.2px;
  font-family: "Montserrat", sans-serif;
  color: var(--sdv5-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
/* time range tabs */
.sdv5-w-po-tabs {
  display: flex;
  gap: 2px;
  justify-content: flex-end;
  margin-bottom: 8px;
}
.sdv5-w-po-tab {
  font-family: "Montserrat", sans-serif;
  font-size: 11.3px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--sdv5-muted);
  cursor: pointer;
  transition: all .15s;
  letter-spacing: 0.04em;
}
.sdv5-w-po-tab:hover {
  color: var(--sdv5-text);
  border-color: var(--bb-border);
}
.sdv5-w-po-tab.active {
  background: transparent;
  border-color: var(--sdv5-text);
  color: var(--sdv5-text);
}
/* chart area */
.sdv5-w-po-chart {
  position: relative;
  width: 100%;
  height: 175px;
  margin-bottom: 12px;
}
.sdv5-w-po-yaxis {
  position: absolute;
  left: 0; top: 0; bottom: 22px;
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: 10.2px; color: var(--sdv5-muted); font-family: "Montserrat", sans-serif;
  pointer-events: none;
  z-index: 1;
  width: 38px;
}
.sdv5-w-po-yaxis span { text-align: right; display: block; }
.sdv5-w-po-svg-wrap {
  position: absolute;
  left: 42px; right: 0; top: 0; bottom: 22px;
  /* Force a new compositing layer — fixes Chrome/Samsung-Chrome
     SVG linearGradient rendering glitch when stacked with
     overflow:hidden + backdrop-filter ancestors. */
  isolation: isolate;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
.sdv5-w-po-svg-wrap svg { width: 100%; height: 100%; display: block; }
.sdv5-w-po-xaxis {
  position: absolute;
  left: 42px; right: 0; bottom: 0;
  display: flex; justify-content: space-between;
  font-size: 10.2px; color: var(--sdv5-muted); font-family: "Montserrat", sans-serif;
}
/* stats row: 24H CHANGE / HIGHEST / LOWEST */
.sdv5-w-po-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--bb-border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}
.sdv5-w-po-stat {
  background: var(--sdv5-bg-card);
  padding: 12px 14px;
}
.sdv5-w-po-stat .s-label {
  font-size: 10.2px;
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sdv5-muted);
  margin-bottom: 4px;
}
.sdv5-w-po-stat .s-val {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 18.1px;
  line-height: 1.1;
  margin-bottom: 3px;
}
.sdv5-w-po-stat .s-sub {
  font-family: "Montserrat", sans-serif;
  font-size: 11.3px;
  color: var(--sdv5-muted);
}
.sdv5-w-po-stat .s-sub.up   { color: var(--state-gain-alt); }
.sdv5-w-po-stat .s-sub.down { color: var(--sdv5-red); }
/* last-updated footer */
.sdv5-w-po-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.3px;
  color: var(--sdv5-muted);
  font-family: "Montserrat", sans-serif;
}
.sdv5-w-po-footer .refresh-btn {
  background: none; border: none; color: var(--sdv5-muted);
  cursor: pointer; font-size: 15.8px; padding: 0; line-height: 1;
  transition: color .15s;
}
.sdv5-w-po-footer .refresh-btn:hover { color: var(--sdv5-text); }

/* ── PORTFOLIO BREAKDOWN card ── */
.sdv5-w-pb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.sdv5-w-pb-head .pb-label {
  font-family: "Montserrat", sans-serif;
  font-size: 12.4px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sdv5-muted);
}
.sdv5-w-pb-head .pb-viewall {
  font-family: "Montserrat", sans-serif;
  font-size: 12.4px;
  font-weight: 600;
  color: var(--sdv5-muted);
  background: none;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; gap: 4px;
  opacity: 0.75;
  transition: opacity .15s;
}
.sdv5-w-pb-head .pb-viewall:hover { opacity: 1; }
/* donut + legend layout */
.sdv5-w-pb-body {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 16px;
}
.sdv5-w-pb-donut {
  flex-shrink: 0;
  width: 160px;
  height: 160px;
  position: relative;
}
.sdv5-w-pb-donut svg { width: 100%; height: 100%; display: block; }
.sdv5-w-pb-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  pointer-events: none;
}
.sdv5-w-pb-center .pb-pct {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 31.6px;
  line-height: 1;
  margin-bottom: 3px;
}
.sdv5-w-pb-center .pb-sub1 {
  font-family: "Montserrat", sans-serif;
  font-size: 9.6px;
  color: var(--sdv5-muted);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.sdv5-w-pb-center .pb-usd {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 15.8px;
  line-height: 1;
}
.sdv5-w-pb-center .pb-ccy {
  font-family: "Montserrat", sans-serif;
  font-size: 9.6px;
  color: var(--sdv5-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* legend */
.sdv5-w-pb-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sdv5-w-pb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.6px;
}
.sdv5-w-pb-row .pb-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.sdv5-w-pb-row .pb-sym {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: var(--text-normal-tier);
  flex: 1;
}
.sdv5-w-pb-row .pb-bal {
  font-family: "Montserrat", sans-serif;
  font-size: 11.3px;
  color: var(--sdv5-muted);
}
.sdv5-w-pb-row .pb-pct-r {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 13.6px;
  color: var(--sdv5-muted);
  min-width: 34px;
  text-align: right;
}
/* breakdown footer */
.sdv5-w-pb-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.3px;
  color: var(--sdv5-muted);
  font-family: "Montserrat", sans-serif;
  border-top: 1px solid var(--bb-border);
  padding-top: 10px;
}
.sdv5-w-pb-footer .refresh-btn {
  background: none; border: none; color: var(--sdv5-muted);
  cursor: pointer; font-size: 15.8px; padding: 0; line-height: 1;
  transition: color .15s;
}
.sdv5-w-pb-footer .refresh-btn:hover { color: var(--sdv5-text); }

/* — Quick actions row — */
.sdv5-w-quick {
  background: var(--sdv5-bg-card);
  border: 1px solid var(--sdv5-border);
  border-radius: var(--sdv5-radius-lg);
  padding: 18px;
  margin-bottom: 14px;
}
.sdv5-w-quick-head {
  font-family: "Montserrat", sans-serif; font-weight: 700;
  font-size: 14.7px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sdv5-muted); margin-bottom: 14px;
}
.sdv5-w-quick-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.sdv5-w-quick-card {
  background: var(--sdv5-bg-1);
  border: 1px solid var(--sdv5-border);
  border-radius: var(--sdv5-radius);
  padding: 16px;
}
.sdv5-w-quick-card .top {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.sdv5-w-quick-card .top .ico {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sdv5-muted);
}
.sdv5-w-quick-card .top .ttl {
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 14.7px;
}
.sdv5-w-quick-card .desc {
  font-size: 12.4px; color: var(--sdv5-muted); line-height: 1.5;
  margin-bottom: 10px; min-height: 30px;
}
.sdv5-w-quick-card .apr {
  font-size: 11.3px; color: var(--sdv5-muted); font-family: "Montserrat", sans-serif;
  font-weight: 700; margin-bottom: 10px;
}
.sdv5-w-quick-card button {
  background: var(--sdv5-bg-2);
  border: 1px solid var(--sdv5-border-mid);
  border-radius: 10px;
  padding: 8px 12px;
  color: var(--sdv5-accent);
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 12.4px;
  cursor: pointer;
  width: 100%;
  transition: all .15s;
}
.sdv5-w-quick-card button:hover {
  background: var(--sdv5-accent-soft);
  border-color: var(--sdv5-border-bold);
}

/* — Recent activity + security row — */
.sdv5-w-bottom-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 14px;
}
.sdv5-w-bottom-card {
  background: var(--sdv5-bg-card);
  border: 1px solid var(--sdv5-border);
  border-radius: var(--sdv5-radius-lg);
  padding: 18px;
}
.sdv5-w-bottom-head {
  font-family: "Montserrat", sans-serif; font-weight: 700;
  font-size: 13.6px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sdv5-muted); margin-bottom: 12px;
}
.sdv5-w-activity-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--sdv5-border);
}
.sdv5-w-activity-row:last-child { border-bottom: none; }
.sdv5-w-activity-row .ico {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--sdv5-bg-2);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sdv5-muted); flex-shrink: 0;
}
.sdv5-w-activity-row .body { flex: 1; min-width: 0; }
.sdv5-w-activity-row .body .t1 { font-size: 13.6px; font-weight: 700; }
.sdv5-w-activity-row .body .t2 { font-size: 11.3px; color: var(--sdv5-muted); margin-top: 2px; }
.sdv5-w-activity-row .right { font-size: 12.4px; font-family: "Montserrat", sans-serif; }
.sdv5-w-activity-row .right.up { color: var(--sdv5-red); }
.sdv5-w-activity-link {
  display: block; text-align: center; padding: 10px;
  font-size: 12.4px; color: var(--sdv5-muted); font-weight: 600;
  text-decoration: none; margin-top: 6px;
}

.sdv5-w-sec-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; margin-bottom: 8px;
  background: var(--sdv5-bg-1);
  border: 1px solid var(--sdv5-border);
  border-radius: 10px;
}
.sdv5-w-sec-row .ico {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--sdv5-bg-2);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sdv5-muted); flex-shrink: 0;
}
.sdv5-w-sec-row .body { flex: 1; }
.sdv5-w-sec-row .body .t1 { font-size: 13.6px; font-weight: 700; }
.sdv5-w-sec-row .body .t2 { font-size: 11.3px; color: var(--sdv5-muted); margin-top: 2px; }
.sdv5-w-sec-row .check {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sdv5-muted);
}
/* Biometric toggle styling was removed along with the biometric feature. */

/* — Footer strip — */
/* ─── Wallet Footer ────────────────────────────────────────────────────── */
.sdv5-w-footer {
  display: flex; flex-direction: column;
  margin: 16px -18px -80px;
  border-top: 1px solid var(--sdv5-border);
  background: var(--sdv5-bg-1);
  overflow: hidden;
}

/* Top row: brand + network */
.sdv5-w-footer-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 12px;
  gap: 12px;
}
.sdv5-w-footer-brand {
  display: flex; align-items: center; gap: 12px;
}
.sdv5-w-footer-shield {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--bb-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--sdv5-muted); flex-shrink: 0;
}
.sdv5-w-footer-tag { display: flex; flex-direction: column; gap: 2px; }
.sdv5-w-footer-tag-title {
  color: var(--text-normal-tier); font-size: 13.6px; font-weight: 700; line-height: 1.3;
}
.sdv5-w-footer-tag-sub {
  color: var(--sdv5-muted); font-size: 11.3px; line-height: 1.3;
}
.sdv5-w-footer-network {
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
}
.sdv5-w-footer-net-lbl {
  color: var(--sdv5-muted); font-size: 11.3px;
}
.sdv5-w-footer-net-val {
  color: var(--sdv5-muted); font-size: 12.4px; font-weight: 600;
  display: flex; align-items: center; gap: 4px;
}
.sdv5-w-footer-net-dot {
  color: var(--sdv5-muted); font-size: 9px;
}

/* Divider */
.sdv5-w-footer-divider {
  height: 1px; background: var(--sdv5-border); margin: 0 18px;
}

/* Stats row */
.sdv5-w-footer-stats {
  display: flex; align-items: center;
  padding: 12px 18px;
  gap: 0;
}
.sdv5-w-footer-stat {
  display: flex; flex-direction: column; gap: 4px; flex: 1;
}
.sdv5-w-footer-stat-lbl {
  color: var(--sdv5-muted); font-size: 11.3px;
}
.sdv5-w-footer-stat-val {
  display: flex; align-items: center; gap: 5px;
  color: var(--sdv5-muted); font-weight: 700; font-size: 13.6px;
  font-family: "Montserrat", sans-serif;
}
.sdv5-w-footer-stat-val svg { color: var(--sdv5-muted); flex-shrink: 0; }
.sdv5-w-footer-stat-sep {
  width: 1px; height: 32px; background: var(--sdv5-border); margin: 0 14px; flex-shrink: 0;
}
.sdv5-w-footer-explorer-link {
  color: var(--sdv5-muted); text-decoration: none; font-family: "Montserrat", sans-serif;
  font-size: 13.6px; font-weight: 700;
  display: flex; align-items: center; gap: 4px;
}
.sdv5-w-footer-explorer-link:hover { text-decoration: underline; }

/* Status bar */
.sdv5-w-footer-status-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 18px;
  border-top: 1px solid var(--sdv5-border);
  background: rgba(255,255,255,0.02);
}
.sdv5-w-footer-status-left,
.sdv5-w-footer-status-right {
  display: flex; align-items: center; gap: 6px;
  color: var(--sdv5-muted); font-size: 11.3px;
}
.sdv5-w-footer-status-left svg { color: var(--sdv5-muted); }

/* — Empty wallet state — */
.sdv5-w-empty {
  background: var(--sdv5-bg-card);
  border: 1px solid var(--sdv5-border-mid);
  border-radius: var(--sdv5-radius-lg);
  padding: 32px 22px;
  text-align: center;
  margin: 30px auto;
  max-width: 480px;
}
.sdv5-w-empty .ico { font-size: 36.2px; margin-bottom: 10px; }
.sdv5-w-empty .ttl {
  font-family: "Montserrat", sans-serif; font-weight: 800;
  font-size: 18.1px; margin-bottom: 6px;
}
.sdv5-w-empty .desc {
  font-size: 13.6px; color: var(--sdv5-muted); margin-bottom: 18px;
}
.sdv5-w-empty .btn-row { display: flex; gap: 10px; justify-content: center; }

/* Mobile: collapse grids */
@media (max-width: 760px) {

  .sdv5-w-top { grid-template-columns: 1fr; }
  .sdv5-w-actions { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .sdv5-w-actions .sdv5-w-action { padding: 14px 10px; font-size: 14.7px; }
  .sdv5-w-charts,
  .sdv5-w-bottom-grid { grid-template-columns: 1fr; }
  .sdv5-w-quick-grid { grid-template-columns: 1fr; }
  .sdv5-w-asset-table { grid-template-columns: 2fr 1fr 1fr; }
  .sdv5-w-asset-table .h.change, .sdv5-w-asset-row .change { display: none; }
  .sdv5-w-footer { margin-bottom: -80px; }
  .sdv5-w-footer-stats { flex-wrap: wrap; gap: 10px 0; }
  .sdv5-w-footer-stat-sep { display: none; }
  .sdv5-w-footer-stat { min-width: 45%; }
  .sdv5-w-portfolio-value { font-size: 27.1px; }
}


/* Receive popup, Send popup, and Buy Crypto popup sections were removed
   from this file along with those features. A handful of harmless
   selectors elsewhere in this file still mention #sdv5-receive /
   #sdv5-send / #sdx-buy-popup as part of larger shared rules grouped
   with the wallet selectors — those never match anything now that the
   markup is gone, so they're inert, not bugs. */


/* =============================================================================
   Wallet "no wallet" / setup state — kept compact
   --------------------------------------------------------------------------- */
.sdv5-w-setup { padding: 30px 20px; max-width: 460px; margin: 30px auto; }

/* =============================================================================
   Hide overlay bottom-nav when our redesign covers full screen
   (we replace the navigation with our own footer)
   --------------------------------------------------------------------------- */
/* [migrated to overlay.css] */


/* =============================================================================
   GLOBAL OVERRIDES — hide legacy global header on redesigned pages and make
   the swap (#dex-view) + Send/Receive/Buy popups behave like the bridge:
   sit beside the sidebar (52px collapsed / 113px expanded) and fill the rest
   of the viewport. Same as pakixto's overlay positioning convention.
   ========================================================================== */

/* Hide the legacy global header on every redesigned view */
body.view-dex header,
body.view-wallet header,
body.view-bridge header { display: none !important; }

/* Hide the bottom-nav inside dex-view since the new swap card has its own X close */
body.view-dex .bottom-nav { display: none !important; }

/* Dex-view, Send / Receive / Buy popups: ALL sit at top:0, left:52px (collapsed)
   or left:113px (expanded), right:0, bottom:0 — beside the sidebar like every
   other overlay in the pakixto convention. */
#dex-view.fs-view,
#sdv5-send,
#sdv5-receive,
#sdx-buy-popup,
#sdx-swap-popup {
  position: fixed !important;
  top: 0 !important;
  left: 52px !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  z-index: 100000;
}
#dex-view.fs-view {
  z-index: 950 !important;        /* below wallet/bridge popups but above content */
  overflow-y: auto !important;
}
body.sidebar-is-expanded #dex-view.fs-view,
body.sidebar-is-expanded #sdv5-send,
body.sidebar-is-expanded #sdv5-receive,
body.sidebar-is-expanded #sdx-buy-popup,
body.sidebar-is-expanded #sdx-swap-popup {
  left: 113px !important;
}

/* Token-select modal + any .overlay: offset to sit beside the sidebar,
   not behind it — same convention as every other popup in the platform. */
/* [migrated to overlay.css] */

/* [migrated to overlay.css] */


/* Wallet panel — keep beside the sidebar too (style.css already does this,
   we re-state with our specificity to be safe). */
/* [migrated to overlay.css] */

/* [migrated to overlay.css] */


/* Dex-view inner shell — centred swap card with sane gutters at all sizes */
#dex-view .shell {
  flex: 1;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 16px 14px 100px !important; /* 100px = footer height clearance */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 100% !important;
  max-width: 100% !important;
}
#dex-view .inner {
  width: 100% !important;
  max-width: 560px !important;
  padding: 0 !important;
  display: block !important;
  overflow-x: hidden !important;
}

/* =============================================================================
   Reset existing .card overrides inside dex-view so the new .sdv5-swap wins
   --------------------------------------------------------------------------- */
#dex-view .shell, #dex-view .inner { background: transparent !important; }
.sdv5-swap.card { background: var(--sdv5-bg-card) !important; }

/* Hide the legacy bottom-nav inside dex-view duplicates if any */
#dex-view > .bottom-nav { display: none !important; }

/* =============================================================================
   v15.3 — CUSTOM SELECT DROPDOWN (replaces the native browser <select> popup)
   -----------------------------------------------------------------------------
   The native browser dropdown can't be styled — it uses the OS chrome.
   This module hijacks clicks on the bridge's chain / token / slippage pickers
   and shows a beautifully-styled modal with the same options, then syncs the
   underlying <select>'s value + fires a change event so bridge-ui.js still
   sees the selection. The native <select> is kept hidden in DOM.
   ========================================================================== */
/* ── sdv5-select-modal — bottom-sheet style matching SwapDEX token panel ── */
.sdv5-select-modal {
  position: fixed;
  top: 0;
  left: 52px;
  right: 0;
  bottom: 0;
  z-index: 1000000;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end;
  justify-content: stretch;
  animation: sdv5SelOverlay .18s ease-out;
}
body.sidebar-is-expanded .sdv5-select-modal {
  left: 113px;
}
/* [migrated to overlay.css] */


.sdv5-select-modal .panel {
  width: 100%;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: var(--sdv5-bg-card, #000000);
  border-top: 1px solid var(--bb-border);
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  animation: sdv5SelPanel .28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes sdv5SelPanel {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Drag handle */
.sdv5-select-modal .panel::before {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255,255,255,0.14);
  margin: 10px auto 0;
  flex-shrink: 0;
}

.sdv5-select-modal .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--bb-border);
  flex-shrink: 0;
}
.sdv5-select-modal .head h3 {
  margin: 0;
  font-size: 16.9px;
  font-weight: 700;
  color: var(--sdv5-muted);
  letter-spacing: 0.01em;
}
.sdv5-select-modal .head .x {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--bb-border);
  background: rgba(255,255,255,0.05);
  color: var(--sdv5-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  transition: background .15s, color .15s;
}
.sdv5-select-modal .head .x:hover {
  background: rgba(255,255,255,0.12);
  color: var(--sdv5-muted);
}
.sdv5-select-modal .head .x::before {
  content: '✕';
  font-size: 13px;
  line-height: 1;
}
.sdv5-select-modal .list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 6px 0 20px;
}
.sdv5-select-modal .list::-webkit-scrollbar { width: 3px; }
.sdv5-select-modal .list::-webkit-scrollbar-track { background: transparent; }
.sdv5-select-modal .list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 99px; }

.sdv5-select-modal .opt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 20px;
  cursor: pointer;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--bb-border);
  transition: background .12s ease;
  font-size: 16px;
  font-weight: 500;
  color: var(--sdv5-muted);
  letter-spacing: 0;
}
.sdv5-select-modal .opt:last-child {
  border-bottom: none;
}
.sdv5-select-modal .opt:active {
  background: rgba(255,255,255,0.06);
}
.sdv5-select-modal .opt.selected {
  background: rgba(var(--accent-sky-rgb), 0.06);
  color: var(--sdv5-muted);
}
.sdv5-select-modal .opt .ico {
  font-size: 20px;
  width: 26px;
  text-align: center;
  flex-shrink: 0;
}
.sdv5-select-modal .opt .lbl {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sdv5-select-modal .opt .check {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--bb-border);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, background .15s;
}
.sdv5-select-modal .opt.selected .check {
  border-color: var(--sdv5-accent, var(--text-sky));
  background: var(--sdv5-accent, var(--text-sky));
}
.sdv5-select-modal .opt.selected .check::after {
  content: '';
  width: 5px; height: 9px;
  border: solid #000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

/* Hide every native bridge <select> — clicks are now handled by the picker */
.sdv5-bridge .bridge-chain-sel,
.sdv5-bridge .bridge-token-sel,
.sdv5-bridge select[id^="bridge-"],
#bridge-slippage,
#bridge-token,
#bridge-from-chain,
#bridge-to-chain {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0,0,0,0) !important;
  overflow: hidden !important;
}
/* Make the picks tappable like buttons */
.sdv5-bridge-chain-cell .pick,
.sdv5-bridge-asset-cell .box {
  cursor: pointer;
  position: relative;
}
.sdv5-bridge-chain-cell .pick:active,
.sdv5-bridge-asset-cell .box:active {
  transform: scale(0.985);
  transition: transform .08s ease;
}
.sdv5-bridge-chain-cell .pick:hover,
.sdv5-bridge-asset-cell .box:hover {
  border-color: var(--sdv5-border-bold);
}

/* =============================================================================
   v15.2 — PROFESSIONAL POLISH LAYER
   -----------------------------------------------------------------------------
   • Force dark mode everywhere — neutralise any leftover theme-light styles
   • Fluid responsive type via clamp()  (mobile → desktop without breakpoints)
   • Refined spacing / shadows / focus rings / transitions
   • Consistent border-radius scale
   • Better defaults for buttons, inputs, scrollbars
   ========================================================================== */

/* ─── 1. Light theme — swap panel overrides ─────────────────────────────── */

/* Swap card wrapper */
body.theme-light .sdv5-swap,
body.theme-light #swap-card {
  background: #ffffff !important;
  border: 1px solid var(--bb-border) !important;
  border: 1px solid var(--bb-border)!important;
  color: var(--sdv5-muted) !important;
}

/* Version tab bar */
body.theme-light .sdv5-swap-tabs {
  background: #ffffff !important;
  border-bottom: 1px solid var(--bb-border) !important;
}
body.theme-light .sdv5-swap-tabs .vbtn {
  background: transparent !important;
  color: var(--text-gray-55) !important;
}
body.theme-light .sdv5-swap-tabs .vbtn.on {
  background: #111111 !important;
  color: var(--gold) !important;
}
body.theme-light .sdv5-swap-tabs .icon-btn,
body.theme-light .sdv5-swap-tabs .close {
  color: var(--text-gray-55) !important;
}

/* You sell / You buy boxes */
body.theme-light .sdv5-swap-box,
body.theme-light .swap-box {
  background: #ffffff !important;
  border: 1px solid var(--bb-border) !important;
  color: var(--sdv5-muted) !important;
}
body.theme-light .sdv5-swap-box .head,
body.theme-light .sdv5-swap-box .lbl,
body.theme-light .sdv5-swap-box .bal,
body.theme-light .box-top,
body.theme-light .box-lbl,
body.theme-light .box-bal {
  color: var(--sdv5-muted) !important;
}
body.theme-light .sdv5-swap-box .amt-in,
body.theme-light .sdv5-swap-box .amt-out,
body.theme-light .amt-in,
body.theme-light .amt-out {
  background: transparent !important;
  color: var(--text-normal-tier) !important;
}
body.theme-light .sdv5-swap-box .amt-in::placeholder {
  color: var(--text-dim-tier) !important;
}
body.theme-light .sdv5-swap-box .usd {
  color: var(--sdv5-muted) !important;
}

/* Token picker button */
body.theme-light .sdv5-swap-box .tok-pick {
  background: #111111 !important;
  border-color: var(--bb-border) !important;
  color: var(--sdv5-muted) !important;
}

/* Flip button */
body.theme-light .sdv5-swap-flip .sw-btn {
  background: #e8e8e8 !important;
  border: 1px solid var(--bb-border) !important;
  color: var(--muted3) !important;
}
body.theme-light .sdv5-swap-flip .sw-btn:hover {
  background: #dddddd !important;
}

/* Rate / info strip */
body.theme-light .sdv5-swap-info,
body.theme-light .info-p {
  background: #ffffff !important;
  border: 1px solid var(--bb-border) !important;
  color: var(--sdv5-muted) !important;
}
body.theme-light .info-row,
body.theme-light .i-lbl,
body.theme-light .i-val {
  color: var(--sdv5-muted) !important;
  border-color: var(--bb-border) !important;
}

/* Settings / slippage panel */
body.theme-light .sdv5-swap-settings,
body.theme-light .swap-settings-panel {
  background: #ffffff !important;
  border: 1px solid var(--bb-border) !important;
  color: var(--sdv5-muted) !important;
  border: 1px solid var(--bb-border)!important;
}

/* Custom version / DBG panel backgrounds */
body.theme-light .sdv5-swap .panel,
body.theme-light .sdv5-swap .shell {
  background: #ffffff !important;
  color: var(--sdv5-muted) !important;
}

/* Hide the now-removed theme toggle slot if any old references remain */
#theme-toggle-btn,
.theme-toggle,
[data-theme-toggle] { display: none !important; }

/* ─── 2. Body / html — clean dark canvas ──────────────────────────────── */
/* body background/color intentionally NOT set here — single source of
   truth for that lives in index.html (search "SINGLE SOURCE OF TRUTH"). */
html, body {
  font-family: "Montserrat", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1;
  /* prevent any horizontal scrollbar caused by overflowing children */
  overflow-x: hidden;
}

/* ─── 3. Fluid responsive type scale ──────────────────────────────────── */
/* --sdv5-text-* / --sdv5-space-* variables migrated to css/style.css */

/* ─── 4. Apply fluid type to the major surfaces ─────────────────────────
   Override fixed pixel font-sizes on the most important elements only —
   leave the rest of the redesign's calibrated sizes intact for hierarchy. */
.sdv5-wallet, .sdv5-swap, .sdv5-bridge,
#sdv5-receive, #sdv5-send, #sdx-buy-popup {
  font-size: var(--sdv5-text-base);
  line-height: 1.45;
}

/* Hero / popup headers — fluid display sizes */
.sdv5-w-hero-title,
.sdv5-swap-head .ttl-row,
#sdv5-receive .rcv-title,
#sdv5-send  .head .ttls .ttl-row,
#sdx-buy-popup .head .ttls .ttl-row {
  font-size: var(--sdv5-text-2xl);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 800;
}
.sdv5-w-portfolio-value {
  font-size: var(--sdv5-text-3xl);
  letter-spacing: -0.025em;
}

/* ─── 5. Buttons / interactive — refined focus + hover ────────────────── */
button, a, input, select, textarea {
  font-family: "Montserrat", sans-serif;
  -webkit-tap-highlight-color: transparent;
}
button { transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease; }
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 2px solid var(--sdv5-accent);
  outline-offset: 2px;
  border-radius: 4px;
}
._wpin_input:focus-visible { outline: none; }
/* Remove the ugly default focus on the wallet/swap inputs */
.sdv5-wallet input:focus,
.sdv5-swap input:focus,
.sdv5-bridge input:focus,
#sdv5-send input:focus,
#sdv5-receive input:focus { outline: none; }

/* ─── 6. Scrollbars — slim & dark ─────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; }
*::-webkit-scrollbar      { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.32); }

/* ─── 7. HD shadow / glow refinement on cards ─────────────────────────── */
.sdv5-card,
.sdv5-w-portfolio,
.sdv5-w-assets,
.sdv5-w-chart-card,
.sdv5-w-quick,
.sdv5-w-bottom-card,
.sdv5-w-quick-card,
.sdv5-bridge-card,
.sdv5-bridge-features,
.sdv5-bridge-how,
.sdv5-bridge-foot,
.sdv5-swap-info,
.sdv5-swap-box,
#sdv5-receive .rcv-info-rows,
#sdv5-send .net-card,
#sdv5-send .gas-card,
#sdv5-send .token-card,
#sdv5-send .amount-card,
#sdv5-send .to-card,
#sdv5-send .pw-card,
#sdx-buy-popup .provider {
  border: 1px solid var(--bb-border)!important;
}

/* Brighter focus glow on the hero card */
.sdv5-w-hero {
  border: 1px solid var(--bb-border)!important;
}

/* ─── 8. Refined card corners (consistent radius scale) ───────────────── */
.sdv5-card, .sdv5-w-hero, .sdv5-w-portfolio,
.sdv5-w-assets, .sdv5-w-chart-card, .sdv5-w-quick,
.sdv5-w-bottom-card, .sdv5-bridge-card,
.sdv5-bridge-features, .sdv5-bridge-how,
.sdv5-swap, .sdv5-swap-info {
  border-radius: 14px;
}
.sdv5-w-quick-card, .sdv5-w-action, .sdv5-w-sec-row,
.sdv5-bridge-feat, .sdv5-swap-box,
#sdv5-receive .rcv-qr-card,
#sdv5-send .net-card, #sdv5-send .gas-card,
#sdv5-send .token-card, #sdv5-send .amount-card,
#sdv5-send .to-card, #sdv5-send .pw-card,
#sdx-buy-popup .provider { border-radius: 14px; }

/* ─── 9. Animation polish — subtle, professional ───────────────────────── */
.sdv5-w-action,
.sdv5-w-quick-card,
.sdv5-w-sec-row,
.sdv5-w-asset-row > div,
.sdv5-bridge-feat,
.sdv5-bridge-how-step,
#sdx-buy-popup .provider {
  transition: transform .2s cubic-bezier(.2,.8,.2,1),
              background .2s ease,
              border-color .2s ease,
              box-shadow .2s ease;
}
.sdv5-w-action:hover,
.sdv5-w-quick-card:hover,
#sdx-buy-popup .provider:hover {
  transform: translateY(-2px);
  border-color: var(--sdv5-border-mid);
  border: 1px solid var(--bb-border)!important;
}

/* ─── 10. Disable text selection on UI chrome (looks more app-like) ───── */
.sdv5-swap-head, .sdv5-swap-tabs, .sdv5-swap-flip,
.sdv5-bridge-topbar, .sdv5-bridge-features, .sdv5-bridge-how,
.sdv5-w-actions, .sdv5-w-tabs, .sdv5-w-portfolio-head,
.sdv5-w-quick-head, .sdv5-w-bottom-head,
#sdv5-send .head, #sdv5-receive .rcv-topbar, #sdx-buy-popup .head {
  -webkit-user-select: none;
  user-select: none;
}

/* ─── 11. Hide elements that don't belong in dark-only mode ───────────── */
/* ─── 12. Responsive layout safety net ────────────────────────────────── */
/* On any device, never let inline children overflow horizontally */
.sdv5-wallet, .sdv5-swap, .sdv5-bridge,
#sdv5-receive, #sdv5-send, #sdx-buy-popup,
.sdv5-w-hero, .sdv5-w-portfolio, .sdv5-w-assets,
.sdv5-w-chart-card, .sdv5-w-quick, .sdv5-w-bottom-card,
.sdv5-w-quick-card, .sdv5-w-action,
.sdv5-bridge-card, .sdv5-bridge-features, .sdv5-bridge-how,
.sdv5-bridge-foot,
.sdv5-swap, .sdv5-swap-box, .sdv5-swap-info {
  min-width: 0;
  max-width: 100%;
}

/* Long "Montserrat", sans-serif strings (addresses, hashes) wrap gracefully */
.sdv5-mono,
.sdv5-w-hero-addr,
#sdv5-receive .rcv-addr-text,
.sdv5-w-base-line {
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* Phones: tighten the wallet dashboard internal padding */
@media (max-width: 480px) {

  .sdv5-w-top { gap: 10px; margin-bottom: 12px; }
  .sdv5-w-actions { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .sdv5-w-portfolio-value { font-size: clamp(20px, 6vw, 28px); }
  .sdv5-w-asset-row > div { font-size: var(--sdv5-text-xs); }
  .sdv5-w-charts, .sdv5-w-bottom-grid { gap: 10px; }
  .sdv5-w-quick-card .desc { min-height: 0; }
}

/* Tablets: 3-up action row */
@media (min-width: 481px) and (max-width: 760px) {
  .sdv5-w-actions { grid-template-columns: repeat(3, 1fr); }
}

/* Wide screens: refined gutters */
@media (min-width: 1100px) {

  .sdv5-w-top, .sdv5-w-charts, .sdv5-w-bottom-grid { gap: 18px; }
  .sdv5-w-quick-grid { gap: 16px; }

}

/* ─── 13. Typography refinements ───────────────────────────────────────── */
.sdv5-w-portfolio-head .lbl,
.sdv5-w-assets-head .ttl,
.sdv5-w-chart-head .ttl,
.sdv5-w-quick-head,
.sdv5-w-bottom-head,
.sdv5-label,
.sdv5-bridge-chain-cell .lbl,
.sdv5-bridge-asset-cell .lbl,
#sdv5-send .field-label,
#sdv5-receive .rcv-addr-label,
#sdv5-receive .rcv-info-lbl {
  font-weight: 700 !important;
  text-transform: uppercase;
}

/* Mono text gets consistent kerning */
.sdv5-mono,
.sdv5-w-hero-addr,
.sdv5-w-asset-row > div.right,
#sdv5-receive .rcv-addr-text,
.sdv5-w-footer-stat-val,
.sdv5-w-base-line {
  font-feature-settings: 'tnum' 1, 'kern' 1;
  letter-spacing: 0;
}

/* ─── 14. Sidebar inner — match the dark surface ──────────────────────── */



/* ─── 15. Suppress legacy gold/yellow palette leftovers in the new chrome */
.sdv5-wallet [style*="color:var(--primary)"],
.sdv5-swap [style*="color:var(--primary)"],
.sdv5-bridge [style*="color:var(--primary)"],
#sdv5-send [style*="color:var(--primary)"],
#sdv5-receive [style*="color:var(--primary)"],
#sdx-buy-popup [style*="color:var(--primary)"] {
  color: var(--sdv5-muted) !important;
}

/* ─── 16. Image / canvas sharp rendering ──────────────────────────────── */
canvas { image-rendering: -webkit-optimize-contrast; }

/* ─── 17. Print / reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================================
   v15.4 — RESPONSIVE SIDEBAR (wider + bigger fonts/icons on tablet & desktop)
   -----------------------------------------------------------------------------
   • Mobile  (< 768px)  : sidebar expanded = 113px (pakixto base)
   • Tablet  (≥ 768px)  : sidebar expanded +25% → 141px
   • Desktop (≥ 1100px) : sidebar expanded +35% → 153px
   • All overlays (#dex-view, wallet, send, receive, buy, bridge) shift their
     `left` value in lockstep so nothing overlaps the sidebar.
   • Sidebar font-size and icon size scale up modestly on bigger screens.
   ========================================================================== */

/* ─── Tablet + (≥ 768px) — sidebar +25% wider when expanded ────────────── */@media (min-width: 768px) {
  
  body.sidebar-is-expanded header {
    left: 141px !important;
    width: calc(100vw - 141px) !important;
    max-width: calc(100vw - 141px) !important;
  }
  /* Every overlay/popup shifts to match the wider sidebar */
  /* Bigger fonts on every sidebar item */
  
  
  
  
  
  /* Bigger icons in every sidebar slot */
  
  /* Collapsed icons also bump up slightly */
  
}

/* ─── Desktop (≥ 1100px) — sidebar +35% wider when expanded ────────────── */@media (min-width: 1100px) {
  
  body.sidebar-is-expanded header {
    left: 153px !important;
    width: calc(100vw - 153px) !important;
    max-width: calc(100vw - 153px) !important;
  }
  
  
  
  
}

/* ═══════════════════════════════════════════════════════════════════════════
   SDX PANELS — Token selector + Settings (replaces .overlay/.modal popups)
   Slide up from bottom, fill sidebar-right-edge → viewport-right-edge
   ═══════════════════════════════════════════════════════════════════════════ */

/* Backdrop — covers only the content area (not the sidebar) */
/* [panel CSS migrated to overlay.css] */

/* [panel CSS migrated to overlay.css] */

/* [panel CSS migrated to overlay.css] */


/* The panel itself — slides up, full width of content area */
/* [panel CSS migrated to overlay.css] */

@keyframes sdxPanelUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Drag handle bar */
/* [panel CSS migrated to overlay.css] */


/* Header row */
/* [panel CSS migrated to overlay.css] */

/* [panel CSS migrated to overlay.css] */

/* [panel CSS migrated to overlay.css] */

/* [panel CSS migrated to overlay.css] */


/* Search bar */
/* [panel CSS migrated to overlay.css] */

/* [panel CSS migrated to overlay.css] */

/* [panel CSS migrated to overlay.css] */

/* [panel CSS migrated to overlay.css] */

/* [panel CSS migrated to overlay.css] */


/* Token list scrollable area */
.sdx-tok-list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.sdx-tok-list::-webkit-scrollbar { width: 3px; }
.sdx-tok-list::-webkit-scrollbar-track { background: transparent; }
.sdx-tok-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 99px; }

/* Footer */
/* [panel CSS migrated to overlay.css] */

.sdx-live-dot {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

/* ── Settings panel specific ── */
.sdx-settings-panel {
  max-height: 50vh;
}
.sdx-settings-body {
  padding: 16px 18px 8px;
  overflow-y: auto;
  flex: 1;
}
.sdx-settings-section {
  margin-bottom: 20px;
}
.sdx-settings-label {
  font-size: 12.4px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sdv5-muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sdx-slip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.sdx-slip-grid .s-sl {
  padding: 10px 0;
  border-radius: 10px;
  border: 1px solid var(--bb-border);
  background: rgba(255,255,255,0.04);
  color: var(--sdv5-muted);
  font-size: 14.7px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.sdx-slip-grid .s-sl:hover {
  border-color: var(--bb-border);
  color: var(--sdv5-muted);
}
.sdx-slip-grid .s-sl.on {
  border-color: var(--sdv5-accent, var(--text-sky));
  background: rgba(var(--accent-sky-rgb), 0.12);
  color: var(--sdv5-muted);
  font-weight: 700;
}
.sdx-slip-hint {
  margin-top: 10px;
  font-size: 12.4px;
  color: var(--sdv5-muted);
  line-height: 1.5;
}

/* Remove old overlay-based overrides that no longer apply */
/* [panel CSS migrated to overlay.css] */

/* [panel CSS migrated to overlay.css] */


/* ═══════════════════════════════════════════════════════════════════════
   PRO WALLET REDESIGN — replaces the 6 action buttons with a premium
   stats bar. Dark luxury aesthetic: obsidian base, gold data accents,
   razor-thin dividers, editorial mono typography.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Stats bar container ── */
.pro-wallet-stats {
  display: flex;
  align-items: stretch;
  background: linear-gradient(135deg, #111111 0%, #191919 100%);
  border: 1px solid var(--bb-border);
  border-radius: 16px;
  margin-bottom: 16px;
  overflow: hidden;
  position: relative;
}

/* Subtle top-edge shimmer */
.pro-wallet-stats::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.15) 30%,
    rgba(255,255,255,0.22) 50%,
    rgba(255,255,255,0.15) 70%,
    transparent 100%
  );
  pointer-events: none;
}

/* ── Individual stat cell ── */
.pro-stat-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 18px 10px;
  position: relative;
  transition: background 0.2s;
}

.pro-stat-cell:hover {
  background: #131412;
}
body.theme-light .pro-stat-cell:hover,
html[data-theme="light"] .pro-stat-cell:hover {
  background: #F0F0F0;
}

/* ── Vertical dividers ── */
.pro-stat-divider {
  width: 1px;
  background: rgba(255,255,255,0.07);
  margin: 12px 0;
  flex-shrink: 0;
}

/* ── Label ── */
.pro-stat-label {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--sdv5-muted);
  text-transform: uppercase;
  line-height: 1;
}

/* ── Value ── */
.pro-stat-value {
  font-family: 'Space Grotesk', 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-normal-tier);
  letter-spacing: -0.01em;
  line-height: 1;
}

/* P&L coloring — JS sets .gain or .loss on the element */
.pro-stat-pnl.gain { color: var(--state-success); }
.pro-stat-pnl.loss { color: var(--ref-tag-err); }

/* Network value — accent tint */
.pro-stat-network {
  font-size: 11px;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  color: var(--sdv5-muted);
  letter-spacing: 0.04em;
}

/* ── Pro-grade wallet panel upgrade ── */

/* Hero card — pure black */
.sdv5-w-unified-hero,
.sdv5-w-uni-hero {
  background: #000000 !important;
  border: 1px solid var(--bb-border) !important;
  border: 1px solid var(--bb-border)!important;
}

/* Portfolio total — make it sharper */
.sdv5-w-total,
.sdv5-w-uh-total {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  background: linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,0.72) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Assets table — tighter, more editorial */
.sdv5-w-assets {
  background: #111111 !important;
  border: 1px solid var(--bb-border) !important;
  border-radius: 16px !important;
}

.sdv5-w-assets-head .ttl {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9.5px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: var(--sdv5-muted) !important;
  font-weight: 600 !important;
}

/* Token rows — slim professional look */
.wallet-token-row,
.sdv5-tok-row {
  border-bottom: 1px solid var(--bb-border) !important;
  transition: background 0.15s !important;
}

.wallet-token-row:hover,
.sdv5-tok-row:hover {
  background: #131412 !important;
}
body.theme-light .wallet-token-row:hover,
html[data-theme="light"] .wallet-token-row:hover,
body.theme-light .sdv5-tok-row:hover,
html[data-theme="light"] .sdv5-tok-row:hover {
  background: #F0F0F0 !important;
}

/* Kill the old action grid entirely (safety rule) */
.sdv5-w-actions { display: none !important; }

/* ── Responsive ── */
@media (max-width: 400px) {
  .pro-wallet-stats { border-radius: 12px; }
  .pro-stat-cell { padding: 14px 6px; gap: 4px; }
  .pro-stat-value { font-size: 13px; }
  .pro-stat-label { font-size: 7.5px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HEX ACTION GRID — 6-button row, frosted glass cards with neon-ink
   accents. Distinct from previous style: horizontal pill track, soft
   depth, per-button colour temperature, ripple feedback, mono labels.
   ═══════════════════════════════════════════════════════════════════════ */

.hex-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #111111 0%, #191919 100%);
  border: 1px solid var(--bb-border);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

/* Subtle top-edge shimmer — matches stats bar */
.hex-actions::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.15) 30%,
    rgba(255,255,255,0.22) 50%,
    rgba(255,255,255,0.15) 70%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* ── Button shell — no bg, no radius (container handles it) ── */
.hex-btn {
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

/* Vertical divider between buttons */
.hex-btn + .hex-btn {
  border-left: 1px solid var(--bb-border);
}

/* Inner tile */
.hex-btn-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 18px 10px;
  background: transparent;
  transition: background 0.2s;
  position: relative;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
}

.hex-btn-inner::after { display: none; }

.hex-btn:hover .hex-btn-inner {
  background: #131412;
}
body.theme-light .hex-btn:hover .hex-btn-inner,
html[data-theme="light"] .hex-btn:hover .hex-btn-inner {
  background: #F0F0F0;
}

.hex-btn:active .hex-btn-inner {
  background: rgba(255,255,255,0.06);
}

/* ── Icon — hidden ── */
.hex-icon { display: none; }

/* ── Label — matches .pro-stat-label ── */
.hex-label {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sdv5-muted);
  line-height: 1;
  transition: color 0.18s;
  white-space: nowrap;
}
.hex-btn:hover .hex-label {
  color: var(--text-white-a85);
}

/* ── Ripple ── */
.hex-ripple {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 65%);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.35s, transform 0.35s;
}
.hex-btn:active .hex-ripple {
  opacity: 1;
  transform: scale(1.5);
  transition: none;
}

/* ── Responsive ── */
@media (max-width: 400px) {
  .hex-actions { border-radius: 12px; }
  .hex-btn-inner { padding: 14px 6px; }
  .hex-label { font-size: 11.5px; }
}

/* ── Wallet Security card — site-themed (moved below GIDO section) ── */
#wallet-security-card {
  --rz-sec-bg: #000000;
  --rz-sec-fg: #dddddd;
}
body.theme-light #wallet-security-card,
html[data-theme="light"] #wallet-security-card {
  --rz-sec-bg: #FFFFFF;
  --rz-sec-fg: #000000;
  background: var(--rz-sec-bg) !important;
  color: var(--sdv5-muted) !important;
  border: 1px solid var(--bb-border)!important;
  border-color: var(--bb-border) !important;
}
#wallet-security-card .sdv5-w-bottom-head { color: var(--sdv5-muted); }
#wallet-security-card .sdv5-w-sec-row .body .t1 { color: var(--sdv5-muted); }
#wallet-security-card .sdv5-w-sec-row .body .t2 { color: var(--sdv5-muted); }
#wallet-security-card .sdv5-w-sec-row .ico svg,
#wallet-security-card .sdv5-w-sec-row .check svg { stroke: color-mix(in srgb, var(--rz-sec-fg, #dddddd) 65%, transparent); }
#wallet-security-card .sdv5-w-activity-link { color: var(--accent, var(--text-sky)); }