@import url("./haze-token-assets.css?v=commerce-097");

/*
 * HazeWallet — self-custody wallet drawer.
 * Rebuilt from the proven DOGE/UTXO engine; re-skinned to the Haze palette.
 * Themeable via CSS custom properties (see tokens below).
 */

/* HazeWallet theme tokens -------------------------------------------------
 * Override any of these on :root (or on .wx-drawer) before the widget loads
 * to re-skin it to match the host site. Everything inherits from these.   */
:root {
  --haze-accent:      #38bdf8;
  --haze-accent-deep: #7c3aed;
  /* Legacy names the wallet drawer rules read from:                        */
  --gold-bright: var(--haze-accent);
  --text:         #e6edf5;
  --muted:        #8494a6;
  --haze-bg:      #07112b;
  --haze-radius:  18px;
  --bg-drawer:    var(--haze-bg);
  --bg-well:      #0a0f16;
}

.wx-pill {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(56, 189, 248, 0.42);
  background: linear-gradient(145deg, rgba(56, 189, 248, 0.16), rgba(124, 58, 237, 0.06));
  color: var(--gold-bright); font-weight: 800; font-size: 13px; letter-spacing: .01em;
  cursor: pointer; transition: background .18s, box-shadow .18s, transform .12s;
}
.wx-pill:hover { background: linear-gradient(145deg, rgba(56, 189, 248, 0.28), rgba(124, 58, 237, 0.12)); box-shadow: 0 8px 26px rgba(56, 109, 255, 0.24); }
.wx-pill:active { transform: translateY(1px); }
.wx-pill-mark {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(145deg, var(--gold-bright), var(--haze-accent-deep)); color: #062018;
  font-family: "Space Grotesk", sans-serif; font-size: 14px; font-weight: 800;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18);
}
.wx-drawer-overlay {
  position: fixed; inset: 0; z-index: 200; background: rgba(4, 5, 7, 0.42);
  opacity: 0; transition: opacity .22s ease;
}
.wx-drawer-overlay.is-open { opacity: 1; }
.wx-drawer-overlay.is-busy { pointer-events: none; }
.wx-copy-helper { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }
.wx-drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(440px, 100%);
  background: var(--bg-drawer); border-left: 1px solid rgba(56, 189, 248, 0.28);
  box-shadow: -40px 0 120px rgba(0, 0, 0, 0.5);
  transform: translateX(102%); transition: transform .26s cubic-bezier(.2,.9,.3,1);
  display: flex; flex-direction: column;
}
.wx-drawer-overlay.is-open .wx-drawer { transform: none; }
.wx-head {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px; flex: 0 0 auto;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.wx-head-mark {
  grid-column: span 1; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(145deg, var(--gold-bright), var(--haze-accent-deep)); color: #062018;
  font-family: "Space Grotesk", sans-serif; font-size: 22px; font-weight: 800;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18);
}
.wx-head-copy { flex: 1 1 auto; display: grid; gap: 2px; }
.wx-head-title { font-family: "Space Grotesk", sans-serif; letter-spacing: -.02em; font-size: 15px; }
.wx-head-sub { color: var(--muted); font-size: 11px; }
.wx-close {
  border: 0; background: transparent; color: var(--muted); font-size: 26px; width: 34px; height: 34px;
  border-radius: 50%; cursor: pointer; line-height: 1;
}
.wx-close:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.wx-body { padding: 20px 18px 18px; display: grid; gap: 14px; flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.wx-lead { margin: 0; color: #c6cad2; font-size: 14px; line-height: 1.6; }
.wx-intro-steps { margin: 0; padding-left: 18px; color: #b9bec7; font-size: 13px; display: grid; gap: 8px; line-height: 1.5; }
.wx-intro-steps strong { color: var(--gold-bright); }
.wx-fine { color: #8b9099; font-size: 11.5px; line-height: 1.5; margin: 0; }
.wx-fine--foot { border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 12px; }
.wx-fine--warn { color: var(--gold-bright); }
/* The hidden attribute must beat component display rules (.wx-btn is
   inline-flex, .wx-confirm is grid — author display otherwise ignores the
   UA's [hidden]{display:none}). More specific [hidden] rules (e.g. the
   portfolio spark's visibility trick) still win on specificity. */
[hidden] { display: none !important; }
.wx-section-title { display: grid; gap: 4px; }
.wx-section-title { font-family: "Space Grotesk", sans-serif; font-size: 14px; letter-spacing: -.01em; }
.wx-section-title--sub { font-size: 13px; color: var(--gold-bright); }
.wx-section-sub { color: var(--muted); font-size: 12px; font-weight: 400; }
.wx-hr { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.07); margin: 4px 0; }
.wx-label { display: block; color: #c6cad2; font-size: 12.5px; margin-bottom: 6px; }
.wx-label--sub { color: var(--muted); font-size: 11.5px; }
.wx-label--key { color: var(--gold-bright); font-weight: 600; }
.wx-input {
  width: 100%; padding: 12px 14px; background: var(--bg-well); border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px; color: var(--text); font-size: 14px; box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.wx-input:focus { outline: none; border-color: rgba(56, 189, 248, 0.55); box-shadow: 0 0 0 3px rgba(74, 102, 255, 0.18); }
.wx-typeback { font-family: "Space Grotesk", ui-monospace, monospace; letter-spacing: .02em; }
.wx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border-radius: 10px; border: 1px solid transparent; font-weight: 700; font-size: 13.5px;
  cursor: pointer; transition: background .15s, box-shadow .15s, transform .1s;
}
.wx-btn:active { transform: translateY(1px); }
.wx-btn--primary { background: linear-gradient(145deg, var(--gold-bright), var(--haze-accent-deep)); color: #062018; box-shadow: 0 10px 30px rgba(74, 102, 255, 0.18); }
.wx-btn--primary:hover { box-shadow: 0 12px 36px rgba(74, 102, 255, 0.28); }
.wx-btn--ghost { background: transparent; color: var(--text); border-color: rgba(255, 255, 255, 0.12); }
.wx-btn--ghost:hover { background: rgba(255, 255, 255, 0.05); }
.wx-btn--danger { background: rgba(220, 60, 60, 0.12); color: #ff8d8d; border-color: rgba(220, 60, 60, 0.36); }
.wx-btn--danger:hover { background: rgba(220, 60, 60, 0.20); }
.wx-btn--sm { padding: 7px 12px; font-size: 12.5px; border-radius: 8px; }
.wx-btn--link { background: transparent; border: 0; color: var(--muted); padding: 6px 0; }
.wx-btn--link:hover { color: var(--text); background: transparent; }
.wx-btn-tag {
  margin-left: 4px; padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, .22);
  font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.wx-actions { display: flex; gap: 10px; }
.wx-actions--stack { flex-direction: column; }
.wx-actions--danger { padding-top: 6px; }
.wx-actions a.wx-btn, .wx-actions button.wx-btn { flex: 1 1 auto; }
.wx-keybox-wif, .wx-keybox-addr {
  display: block; padding: 11px 12px; background: var(--bg-well); border: 1px dashed rgba(56, 189, 248, 0.4);
  border-radius: 9px; color: var(--gold-bright); font-size: 13px; word-break: break-all;
  font-family: ui-monospace, "Cascadia Code", Menlo, monospace;
}
.wx-keybox-addr { color: var(--text); }
.wx-err { color: #ff9a9a; font-size: 12.5px; min-height: 0; line-height: 1.4; }
.wx-balance { display: grid; gap: 3px; padding: 6px 0; }
.wx-balance-value { font-family: "Space Grotesk", sans-serif; font-size: 32px; font-weight: 800; letter-spacing: -.03em; }
.wx-balance-sub { color: var(--muted); font-size: 12px; }
.wx-addr-short { font-family: "Space Grotesk", sans-serif; color: var(--gold-bright); font-size: 13px; font-weight: 600; }
.wx-addr-full {
  padding: 10px 12px; background: var(--bg-well); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 9px;
  color: var(--text); font-size: 12px; word-break: break-all; font-family: ui-monospace, Menlo, monospace;
}
.wx-qr { padding: 12px; background: var(--bg-well); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 10px; text-align: center; }
.wx-qr-note { color: #8b9099; font-size: 11.5px; line-height: 1.5; }
.wx-qr-svg { width: 176px; height: 176px; display: block; margin: 0 auto; max-width: 100%; border-radius: 6px; }
.wx-fine--feeline { color: #aeb4bd; font-size: 11.5px; line-height: 1.5; }
.wx-fine--feeline strong { color: var(--gold-bright); }
.wx-err--ok { color: #a7e6bf; background: rgba(115, 221, 152, 0.08); border: 1px solid rgba(115, 221, 152, 0.30); border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.6; }
.wx-err--ok code { color: #d6ffe1; word-break: break-all; }

/* Input + trailing control (Show/Hide toggle on the masked WIF field) */
.wx-input-row { display: flex; gap: 8px; align-items: center; }
.wx-input-row .wx-input { flex: 1 1 auto; min-width: 0; }
.wx-input-row .wx-btn { flex: 0 0 auto; }

/* Send confirmation gate — password re-prompt before any signature */
.wx-confirm { display: grid; gap: 8px; margin-top: 4px; padding: 14px; border: 1px solid rgba(126, 161, 237, 0.22); border-radius: 14px; background: rgba(4, 15, 37, 0.55); }
.wx-confirm-title { font-size: 13px; font-weight: 750; color: var(--text); }
.wx-confirm-copy { margin: 0; color: #8b9099; font-size: 12px; line-height: 1.5; }
.wx-confirm .wx-err { margin-top: -2px; }

/* Listing-request form */
.wx-input--area { min-height: 92px; line-height: 1.5; resize: vertical; font-family: inherit; }
.wx-settings-card .wx-fine strong { color: var(--gold-bright); }
.wx-tabs { display: flex; gap: 6px; padding: 4px; background: var(--bg-well); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; }
.wx-tab {
  flex: 1 1 0; padding: 10px 12px; border: 0; border-radius: 9px; background: transparent;
  color: var(--muted); font-weight: 700; font-size: 13.5px; cursor: pointer;
  font-family: "Space Grotesk", sans-serif; transition: background .15s, color .15s;
}
.wx-tab[aria-selected="true"] { background: linear-gradient(145deg, var(--gold-bright), var(--haze-accent-deep)); color: #062018; box-shadow: 0 6px 18px rgba(74, 102, 255, 0.22); }
.wx-tab[aria-selected="false"]:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.wx-tabpanel { display: grid; gap: 14px; }
  .wx-pill { padding: 8px 12px; font-size: 12px; }
  .wx-pill-mark { width: 20px; height: 20px; font-size: 12px; }
  .wx-balance-value { font-size: 26px; }

/* 2026 landing refresh — polish the real embedded wallet to match the HazeWallet brand. */
html, body { margin: 0; min-height: 100%; background: #06122d; color: var(--text); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
body { background: radial-gradient(500px 360px at 80% 0%, rgba(42, 100, 255, .20), transparent 70%), radial-gradient(420px 320px at -5% 70%, rgba(124, 58, 237, .15), transparent 72%), #06122d; }
.wx-drawer { background: radial-gradient(500px 360px at 82% -4%, rgba(44, 103, 255, .20), transparent 68%), linear-gradient(180deg, #081a3c 0%, #06142f 38%, #040e23 100%); border-left-color: rgba(99, 151, 255, .24); }
.wx-head { min-height: 70px; padding: 15px 18px; background: linear-gradient(180deg, rgba(11, 33, 76, .94), rgba(7, 24, 55, .78)); border-bottom-color: rgba(255,255,255,.07); backdrop-filter: blur(16px); }
.wx-head-mark { width: 42px; height: 42px; border-radius: 12px; color: transparent; font-size: 0; background: url("hazewallet-mark.png") center / contain no-repeat; box-shadow: none; }
.wx-head-title { font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-weight: 850; letter-spacing: -.025em; }
.wx-head-sub { color: #7f91bb; }
.wx-body { padding: 20px; gap: 15px; }
.wx-lead { color: #c7d3eb; }
.wx-section-title { font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-weight: 820; }
.wx-input, .wx-addr-full, .wx-qr, .wx-keybox-wif, .wx-keybox-addr { background: rgba(4, 15, 37, .76); border-color: rgba(126, 161, 237, .16); }
.wx-input { min-height: 48px; border-radius: 12px; }
.wx-input:focus { border-color: rgba(63, 143, 255, .72); box-shadow: 0 0 0 3px rgba(56, 117, 255, .14), 0 0 28px rgba(52, 102, 255, .08); }
.wx-btn { min-height: 46px; border-radius: 12px; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.wx-btn--primary { color: #fff; background: linear-gradient(112deg, #7750ff 0%, #2a75ff 52%, #2bcdf7 100%); box-shadow: 0 12px 32px rgba(50, 108, 255, .28), inset 0 1px rgba(255,255,255,.28); }
.wx-btn--primary:hover { box-shadow: 0 16px 38px rgba(50, 108, 255, .4), inset 0 1px rgba(255,255,255,.34); }
.wx-btn--ghost { border-color: rgba(135, 168, 237, .20); background: rgba(255,255,255,.025); }
.wx-btn--ghost:hover { background: rgba(255,255,255,.06); border-color: rgba(135, 168, 237, .34); }
.wx-balance { padding: 16px 14px; border: 1px solid rgba(112, 155, 249, .16); border-radius: 16px; background: linear-gradient(145deg, rgba(15, 43, 96, .72), rgba(6, 20, 49, .82)); box-shadow: inset 0 1px rgba(255,255,255,.035); }
.wx-balance-value { font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 880; letter-spacing: -.045em; }
.wx-tabs { padding: 5px; border-radius: 14px; background: rgba(3, 13, 32, .76); border-color: rgba(120, 153, 224, .13); }
.wx-tab { min-height: 42px; border-radius: 10px; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.wx-tab[aria-selected="true"] { color: #fff; background: linear-gradient(112deg, #6e50ff, #2c73ff); box-shadow: 0 8px 22px rgba(55, 104, 255, .24), inset 0 1px rgba(255,255,255,.18); }
.wx-pill { border-radius: 14px; border-color: rgba(99, 153, 255, .28); background: linear-gradient(145deg, rgba(34, 92, 206, .28), rgba(90, 53, 198, .16)); color: #dbe9ff; }
.wx-pill-mark { color: #fff; background: linear-gradient(135deg, #2ecfff, #4d6dff 50%, #9855ff); }

/* Wallet experience refresh ------------------------------------------------ */
.wx-drawer {
  background:
    radial-gradient(600px 280px at 100% 0%, rgba(67, 144, 255, .16), transparent 52%),
    radial-gradient(450px 240px at 0% 100%, rgba(134, 69, 255, .12), transparent 56%),
    var(--bg-drawer);
  border-left-color: rgba(98, 151, 255, .22);
}
.wx-head-mark,
.wx-pill,
.wx-tab,
.wx-btn,
.wx-input,
.wx-qr,
.wx-addr-full,
.wx-keybox-wif,
.wx-keybox-addr,
.wx-balance,
.wx-qa,
.wx-overview-panel,
.wx-chip,
.wx-buy-banner,
.wx-mini-stat,
.wx-asset-spotlight { border-radius: calc(var(--haze-radius, 18px)); }
.wx-balance-eyebrow { color: #8da8db; font-size: 11px; text-transform: uppercase; letter-spacing: .18em; font-weight: 800; }
.wx-quick-actions { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.wx-qa {
  border: 1px solid rgba(117, 158, 236, .18); background: rgba(255,255,255,.03); min-height: 72px; color: #deebff;
  display: grid; place-items: center; gap: 6px; padding: 10px 8px; cursor: pointer; transition: transform .16s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.wx-qa:hover, .wx-overview-panel:hover { transform: translateY(-2px); border-color: rgba(108, 160, 255, .34); background: rgba(255,255,255,.05); box-shadow: 0 14px 32px rgba(0,0,0,.16); }
.wx-qa b, .wx-overview-panel b { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(112deg, #7750ff 0%, #2a75ff 52%, #2bcdf7 100%); color: #fff; font-size: 18px; box-shadow: 0 10px 26px rgba(42, 108, 255, .26); }
.wx-qa span { font-size: 12px; font-weight: 800; }
.wx-overview-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 12px; }
.wx-overview-card, .wx-stat-stack { border: 1px solid rgba(117, 158, 236, .16); background: rgba(6, 18, 45, .56); border-radius: calc(var(--haze-radius, 18px) + 2px); padding: 16px; }
.wx-overview-kicker { display: block; color: #82a6e8; font-size: 10px; letter-spacing: .18em; font-weight: 800; text-transform: uppercase; margin-bottom: 10px; }
.wx-overview-title { display:block; font-size: 22px; letter-spacing: -.04em; margin-bottom: 10px; }
.wx-overview-copy { margin: 0; color: #b5c5e4; font-size: 13px; line-height: 1.6; }
.wx-pill-row { display:flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.wx-chip { display:inline-flex; align-items:center; justify-content:center; min-height: 32px; padding: 0 12px; border: 1px solid rgba(121, 161, 239, .17); background: rgba(255,255,255,.04); font-size: 11px; font-weight: 800; color: #dbe9ff; }
.wx-stat-stack { display: grid; gap: 10px; }
.wx-mini-stat { padding: 14px; border: 1px solid rgba(119, 156, 233, .16); background: rgba(255,255,255,.03); display: grid; gap: 5px; }
.wx-mini-stat span { color: #8fa6cf; font-size: 11px; }
.wx-mini-stat strong { font-size: 14px; }
.wx-overview-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.wx-overview-panel {
  border: 1px solid rgba(117, 158, 236, .16); background: rgba(255,255,255,.03); color: var(--text); padding: 16px; display:grid; gap: 10px; align-items:start; text-align:left; cursor:pointer;
}
.wx-overview-panel strong { font-size: 15px; }
.wx-overview-panel small { color: #9cb0d7; line-height: 1.55; }
.wx-asset-spotlight { border: 1px solid rgba(117, 158, 236, .16); background: rgba(6, 18, 45, .56); padding: 14px; }
.wx-asset-spotlight-head { display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-bottom: 12px; }
.wx-asset-address { display:block; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.03); color: #d7e6ff; word-break: break-all; }
.wx-buy-banner { padding: 14px; border: 1px solid rgba(117, 158, 236, .17); background: linear-gradient(145deg, rgba(17, 39, 88, .78), rgba(8, 18, 42, .62)); display:grid; gap:6px; }
.wx-buy-banner small { color: #abc0e9; line-height: 1.55; }
@media (max-width: 560px) {
  .wx-quick-actions { grid-template-columns: repeat(2,1fr); }
  .wx-overview-hero, .wx-overview-grid { grid-template-columns: 1fr; }
}
.wx-head-mark { overflow:hidden; }
.wx-head-mark img { width: 100%; height: 100%; object-fit: cover; display:block; }

/* Persistent "add to your site" link at the foot of the drawer. */
.wx-drawer-foot { flex: 0 0 auto; border-top: 1px solid rgba(255,255,255,.07); padding: 12px 18px; background: rgba(6,18,45,.5); }
.wx-embedlink {
  display: block; text-align: center; text-decoration: none; font-size: 13px; font-weight: 780;
  color: var(--gold-bright); padding: 9px 12px; border-radius: calc(var(--haze-radius, 18px) / 1.4);
  border: 1px solid rgba(126,161,237,.2); background: rgba(255,255,255,.02);
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.wx-embedlink:hover {
  color: #fff; background: linear-gradient(112deg, rgba(119,80,255,.32), rgba(42,117,255,.32) 55%, rgba(43,205,247,.28));
  border-color: rgba(126,161,237,.4); box-shadow: 0 8px 22px rgba(50,108,255,.2);
}


/* HazeWallet 1.3 — simplified, task-first embedded wallet ------------------ */
.wx-head { min-height: 64px; padding: 12px 16px; gap: 10px; }
.wx-head-mark { width: 38px; height: 38px; flex: 0 0 auto; }
.wx-head-copy { min-width: 0; }
.wx-head-title { font-size: 15px; }
.wx-head-sub { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-head-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.wx-head-actions { display: flex; align-items: center; gap: 6px; }
.wx-icon-btn, .wx-close {
  width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid color-mix(in srgb,var(--haze-accent) 16%,transparent);
  border-radius: 11px; background: color-mix(in srgb,var(--haze-accent) 5%,transparent); color: color-mix(in srgb,var(--haze-accent) 80%,#fff 20%); cursor: pointer; font: 700 17px/1 system-ui,sans-serif;
}
.wx-icon-btn:hover, .wx-close:hover { color:#fff; border-color: color-mix(in srgb,var(--haze-accent) 35%,transparent); background: color-mix(in srgb,var(--haze-accent) 10%,rgba(255,255,255,.07)); }
.wx-close { font-size: 23px; }
.wx-body { padding: 16px; gap: 12px; }
.wx-view { display: grid; gap: 12px; min-width: 0; }
.wx-balance--compact { padding: 15px 16px; gap: 8px; }
.wx-balance-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wx-balance-top > div { min-width: 0; }
.wx-balance-value { display: block; margin-top: 4px; font-size: clamp(25px,7vw,31px); line-height: 1.08; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-balance-sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-network-pill { flex: 0 0 auto; padding: 6px 9px; border: 1px solid rgba(245,190,54,.22); border-radius: 999px; background: rgba(245,190,54,.08); color: #ffd66b; font-size: 10px; font-weight: 850; letter-spacing: .08em; }
.wx-quick-actions--simple { grid-template-columns: repeat(3,1fr); gap: 8px; }
.wx-quick-actions--simple .wx-qa { min-height: 68px; padding: 9px 6px; }
.wx-quick-actions--simple .wx-qa b { width: 31px; height: 31px; border-radius: 11px; font-size: 17px; }
.wx-assets { display: grid; gap: 7px; padding: 12px; border: 1px solid rgba(117,158,236,.15); border-radius: calc(var(--haze-radius,18px) + 1px); background: rgba(4,15,37,.48); }
.wx-section-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 2px 4px; }
.wx-section-row > strong { font-size: 13px; }
.wx-section-row > small { color: #7186ae; font-size: 10px; }
.wx-asset-row { min-height: 49px; display: flex; align-items: center; gap: 10px; padding: 7px 9px; border: 1px solid transparent; border-radius: 13px; }
.wx-asset-row.is-active { border-color: rgba(116,157,236,.14); background: rgba(255,255,255,.035); }
.wx-asset-row.is-coming { opacity: .47; filter: saturate(.25); }
.wx-coin-mark { width: 31px; height: 31px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #24324f; color: #d9e3f5; font-size: 16px; font-weight: 900; }
.wx-coin-mark--doge { color: #fff4c2; background: linear-gradient(145deg,#d6a72f,#9b741b); }
.wx-coin-mark--pep { color: #d8ffc0; background: linear-gradient(145deg,#5da932,#37711c); }
.wx-coin-mark--ltc { color: #eaf1fb; background: linear-gradient(145deg,#8fa8c8,#526a8c); }
.wx-coin-mark--btc { color: #fff3df; background: linear-gradient(145deg,#f7931a,#c2710c); }
.wx-asset-row.is-active { cursor: pointer; }
.wx-asset-row.is-active:hover { border-color: rgba(116,157,236,.30); background: rgba(255,255,255,.06); }
.wx-asset-row.is-selected { border-color: rgba(245,190,54,.45); background: rgba(245,190,54,.07); }
.wx-asset-row.is-selected .wx-asset-balance { color: #ffd66b; }
.wx-activity-list { display: grid; gap: 2px; }
.wx-tx { display: flex; align-items: center; gap: 10px; padding: 5px 9px; border-radius: 12px; }
.wx-tx-ic { width: 27px; height: 27px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; font-size: 14px; }
.wx-tx-ic.is-in { background: rgba(74,222,128,.12); color: #7fe6a8; }
.wx-tx-ic.is-out { background: rgba(148,163,216,.12); color: #aebcf0; }
.wx-tx-ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.wx-tx-copy { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wx-tx-copy strong { font-size: 13px; }
.wx-tx-copy strong.is-in { color: #8fe9b1; }
.wx-tx-copy small { color: #7186ae; font-size: 10px; white-space: nowrap; }
.wx-asset-copy { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.wx-asset-copy strong { font-size: 12.5px; }
.wx-asset-copy small { color: #7589b0; font-size: 9.5px; letter-spacing: .08em; }
.wx-asset-balance { flex: 0 0 auto; color: #dfeaff; font-size: 11.5px; white-space: nowrap; }
.wx-srcdot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #4a5875; box-shadow: 0 0 0 3px rgba(255,255,255,.04); cursor: help; }
.wx-srcdot.is-up { background: #3fd483; box-shadow: 0 0 0 3px rgba(63,212,131,.16), 0 0 8px rgba(63,212,131,.55); }
.wx-srcdot.is-down { background: #e8586a; box-shadow: 0 0 0 3px rgba(232,88,106,.16), 0 0 8px rgba(232,88,106,.5); }
.wx-srcdot.is-sync { background: #f5c542; box-shadow: 0 0 0 3px rgba(245,197,66,.16), 0 0 8px rgba(245,197,66,.55); }
.wx-coming { flex: 0 0 auto; padding: 5px 7px; border: 1px solid rgba(255,255,255,.10); border-radius: 999px; color: #9aa7bf; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.wx-security-strip { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid rgba(72,213,180,.16); border-radius: 13px; background: rgba(45,190,160,.055); }
.wx-security-check { width: 27px; height: 27px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; background: rgba(45,214,178,.13); color: #55e4c4; font-weight: 900; }
.wx-security-strip > div { display: grid; gap: 1px; }
.wx-security-strip strong { font-size: 11.5px; }
.wx-security-strip small { color: #8ea5c9; font-size: 9.8px; line-height: 1.35; }
.wx-add-site { justify-self: center; color: #6fcfff; text-decoration: none; font-size: 10.5px; font-weight: 750; padding: 3px 7px; opacity: .78; }
.wx-add-site:hover { color: #fff; opacity: 1; }
.wx-task-head { min-height: 32px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.wx-task-head > strong { grid-column: 2; font-size: 14px; white-space: nowrap; }
.wx-task-head .wx-back { grid-column: 1; justify-self: start; }
.wx-back { padding: 5px 0; border: 0; background: transparent; color: #8da9dc; cursor: pointer; font: 700 11.5px/1.2 Inter,system-ui,sans-serif; }
.wx-back:hover { color: #fff; }
.wx-task-copy { margin: -2px 0 1px; color: #91a5cb; text-align: center; font-size: 11.5px; line-height: 1.45; }
.wx-field { display: grid; gap: 5px; }
.wx-field .wx-label { margin: 0; }
.wx-qr--clean { padding: 11px; width: fit-content; max-width: 100%; justify-self: center; background: #fff; border: 0; }
.wx-qr--clean .wx-qr-svg { width: min(176px,48vw); height: auto; }
.wx-address-card, .wx-address-mini, .wx-settings-card { display: grid; gap: 7px; padding: 12px; border: 1px solid rgba(117,158,236,.14); border-radius: 13px; background: rgba(255,255,255,.025); }
.wx-address-card small, .wx-address-mini small, .wx-settings-card small { color: #7f93b8; font-size: 10px; }
.wx-address-card code, .wx-settings-card code { color: #dbe9ff; font-size: 10.5px; line-height: 1.45; word-break: break-all; }
.wx-address-mini { grid-template-columns: auto 1fr; align-items: center; }
.wx-address-mini code { justify-self: end; color: #bed4f7; font-size: 10.5px; }
.wx-center { text-align: center; }
.wx-buy-banner--simple { padding: 12px; }
.wx-settings-card .wx-btn { justify-self: start; min-height: 34px; margin-top: 2px; }
.wx-danger-zone { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.07); }
.wx-danger-zone small { color: #947e88; font-size: 10px; }
.wx-danger-zone .wx-btn { justify-self: start; min-height: 40px; }

/* The old persistent footer and duplicate tab navigation are intentionally gone
   from the active wallet view. Retain base selectors for backwards-compatible
   demo markup, but never force them into every wallet task. */
.wx-drawer-foot { display: none !important; }

@media (max-width: 380px) {
  .wx-body { padding: 13px; }
  .wx-head { padding: 11px 13px; }
  .wx-head-sub { display: none; }
  .wx-balance-value { font-size: 24px; }
  .wx-quick-actions--simple .wx-qa { min-height: 62px; }
  .wx-section-row > small { display: none; }
}

/* HazeWallet 2.0 — wallet-first site + responsive standalone mode -------- */
:root{
  --haze-accent:#35d0ff;
  --haze-accent-deep:#7857ff;
  --haze-bg:#06132f;
  --haze-radius:18px;
  --hz-soft:color-mix(in srgb,var(--haze-accent) 14%,transparent);
  --hz-deep-soft:color-mix(in srgb,var(--haze-accent-deep) 16%,transparent);
}
html,body{height:100%;min-height:100%;overflow:hidden}
body{background:var(--haze-bg)}
.wx-body{align-content:start;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(125,161,232,.32) transparent}
.wx-body::-webkit-scrollbar{width:5px}.wx-body::-webkit-scrollbar-track{background:transparent}.wx-body::-webkit-scrollbar-thumb{background:rgba(125,161,232,.28);border-radius:999px}
.wx-drawer{background:radial-gradient(520px 300px at 95% 0%,var(--hz-soft),transparent 64%),radial-gradient(420px 260px at 5% 100%,var(--hz-deep-soft),transparent 66%),linear-gradient(180deg,color-mix(in srgb,var(--haze-bg) 88%,#102a5a 12%),var(--haze-bg));}
.wx-btn--primary,.wx-qa b{background:linear-gradient(115deg,var(--haze-accent-deep),color-mix(in srgb,var(--haze-accent-deep) 45%,var(--haze-accent) 55%) 52%,var(--haze-accent));color:#fff}
.wx-tab[aria-selected="true"]{background:linear-gradient(115deg,var(--haze-accent-deep),var(--haze-accent));color:#fff}
.wx-input:focus{border-color:color-mix(in srgb,var(--haze-accent) 68%,#fff 8%);box-shadow:0 0 0 3px color-mix(in srgb,var(--haze-accent) 14%,transparent),0 0 28px color-mix(in srgb,var(--haze-accent-deep) 10%,transparent)}
.wx-head{background:linear-gradient(180deg,rgba(8,24,56,.96),rgba(8,24,56,.92));}

/* Full-page wallet mode used by hazewallet.com on phones and inside the
   desktop wallet stage. This is still the exact same real wallet module. */
.wallet-standalone body{background:var(--haze-bg)}
.wallet-standalone .wx-drawer-overlay--standalone{position:fixed;inset:0;z-index:1;background:transparent;opacity:1;display:block}
.wallet-standalone .wx-drawer-overlay--standalone .wx-drawer{position:absolute;inset:0;transform:none;width:100%;height:100dvh;max-width:none;border:0;box-shadow:none}
.wallet-standalone .wx-head{padding-top:max(12px,env(safe-area-inset-top));min-height:max(64px,calc(54px + env(safe-area-inset-top)))}
.wallet-standalone .wx-body{padding-bottom:max(16px,env(safe-area-inset-bottom))}

/* Polished balance block */
.wx-balance--compact{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:13px;padding:15px 16px;background:linear-gradient(145deg,color-mix(in srgb,var(--haze-accent-deep) 10%,#0b2655 90%),color-mix(in srgb,var(--haze-bg) 90%,#12284d 10%));border-color:color-mix(in srgb,var(--haze-accent) 18%,rgba(117,158,236,.12));}
.wx-balance-content{min-width:0;display:grid;gap:7px}
.wx-balance-coin{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;font-size:27px;font-weight:900;box-shadow:inset 0 1px rgba(255,255,255,.32),0 10px 28px rgba(0,0,0,.22)}
.wx-balance-coin--doge{background:linear-gradient(145deg,#e0b43f,#986b12);color:#fff7d0;border:1px solid rgba(255,225,128,.3)}
.wx-balance-coin--pep{background:linear-gradient(145deg,#5da932,#37711c);color:#e8ffd9}
.wx-balance-coin--ltc{background:linear-gradient(145deg,#8fa8c8,#526a8c);color:#eaf1fb;border:1px solid rgba(200,220,245,.28)}
.wx-balance-coin--btc{background:linear-gradient(145deg,#f7931a,#c2710c);color:#fff3df;border:1px solid rgba(255,190,90,.32)}
.wx-balance-top{align-items:center}.wx-balance-value{font-size:clamp(24px,6.7vw,31px)}
.wx-network-pill{border-color:color-mix(in srgb,var(--haze-accent) 16%,transparent);background:color-mix(in srgb,var(--haze-accent) 7%,transparent);color:#9edfff}

/* Simplified asset/action styling */
.wx-quick-actions--simple .wx-qa{border-radius:15px;background:rgba(255,255,255,.028)}
.wx-quick-actions--simple .wx-qa:hover{border-color:color-mix(in srgb,var(--haze-accent) 28%,transparent);background:color-mix(in srgb,var(--haze-accent) 5%,rgba(255,255,255,.025))}
.wx-assets{background:rgba(3,13,34,.48)}
.wx-asset-row.is-coming{opacity:.54;filter:saturate(.25)}
.wx-security-strip{border-color:rgba(72,213,180,.18);background:linear-gradient(145deg,rgba(35,186,152,.07),rgba(31,95,119,.04))}
.wx-wallet-links{display:grid;grid-template-columns:1.45fr 1fr .8fr;gap:6px;padding-top:1px}
.wx-wallet-links a{min-height:34px;display:grid;place-items:center;text-decoration:none;border:1px solid rgba(124,160,235,.12);border-radius:11px;background:rgba(255,255,255,.018);color:#82a7d9;font-size:9.8px;font-weight:780;transition:.15s ease}
.wx-wallet-links a:first-child{color:#5bd2ff}.wx-wallet-links a:hover{color:#fff;border-color:rgba(124,160,235,.28);background:rgba(255,255,255,.05)}

/* Authentication / locked-wallet screens: compact and deliberate instead of
   stretching sparse rows across the available drawer height. */
.wx-body--auth{display:block;padding:18px;overflow-y:auto}
.wx-auth{box-sizing:border-box;width:100%;max-width:390px;margin:0 auto;display:grid;gap:13px;align-content:start}
.wx-auth-icon{width:50px;height:50px;display:grid;place-items:center;border-radius:17px;background:linear-gradient(135deg,color-mix(in srgb,var(--haze-accent-deep) 75%,#fff 0%),color-mix(in srgb,var(--haze-accent) 80%,#fff 0%));color:#fff;font-size:23px;box-shadow:0 14px 34px color-mix(in srgb,var(--haze-accent-deep) 22%,transparent),inset 0 1px rgba(255,255,255,.3)}
.wx-auth-icon--lock{font-size:18px}
.wx-auth-copy{display:grid;gap:6px;margin-bottom:2px}.wx-auth-kicker{color:#71a8ed;font-size:9.5px;font-weight:850;letter-spacing:.18em}.wx-auth-copy h2{margin:0;font-size:24px;letter-spacing:-.045em;line-height:1.08}.wx-auth-copy p{margin:0;color:#93a9ce;font-size:12px;line-height:1.55;max-width:350px}
.wx-auth-field{display:grid;gap:7px;color:#b7c8e5;font-size:11px;font-weight:750;margin-top:2px}.wx-auth-field .wx-input{margin:0}
.wx-auth-password{min-height:52px;font-size:14px;padding-inline:15px}
.wx-auth-actions{display:grid;gap:9px}.wx-auth-actions .wx-btn{width:100%}
.wx-auth-linkrow{display:flex;align-items:center;justify-content:center;gap:9px;color:#52698f;font-size:10px}
.wx-auth-link{border:0;background:transparent;color:#82a4d4;padding:5px 2px;cursor:pointer;font-size:10.5px;font-weight:730}.wx-auth-link:hover{color:#fff}
.wx-auth-points{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:2px}.wx-auth-points span{min-height:38px;display:grid;place-items:center;text-align:center;padding:6px;border:1px solid rgba(117,158,236,.11);border-radius:10px;background:rgba(255,255,255,.02);color:#8fa7cf;font-size:8.8px;font-weight:720}
.wx-auth-trust{display:flex;align-items:center;gap:9px;margin-top:2px;padding:10px 11px;border:1px solid rgba(67,213,174,.13);border-radius:12px;background:rgba(45,190,160,.045)}.wx-auth-trust>span{width:25px;height:25px;display:grid;place-items:center;border-radius:8px;background:rgba(45,214,178,.12);color:#55e4c4;font-size:12px;font-weight:900}.wx-auth-trust>div{display:grid;gap:1px}.wx-auth-trust strong{font-size:10.5px}.wx-auth-trust small{font-size:8.8px;color:#7890b6}
.wx-auth-note{margin:0;text-align:center;color:#647ca5;font-size:9.4px;line-height:1.45}
.wx-auth-error:empty{display:none}.wx-auth-error:not(:empty){padding:9px 10px;border-radius:10px;background:rgba(222,74,92,.075);border:1px solid rgba(222,74,92,.18)}

/* Form screens should also stay content-height rather than distributing rows. */
.wx-body--form{align-content:start}

/* Viewport tuning: maintain legibility from compact embeds through phones. */
@media(max-width:430px){
  .wx-head{padding-inline:14px}.wx-head-mark{width:36px;height:36px}.wx-head-title{font-size:14px}.wx-head-sub{font-size:9.5px}
  .wx-body{padding:13px}.wx-balance--compact{padding:13px;gap:10px}.wx-balance-coin{width:43px;height:43px;font-size:24px}.wx-balance-value{font-size:24px}
  .wx-quick-actions--simple .wx-qa{min-height:62px}.wx-assets{padding:10px}.wx-asset-row{min-height:47px;padding:6px 8px}.wx-coming{font-size:8.5px}
  .wx-auth{gap:11px}.wx-auth-copy h2{font-size:22px}.wx-auth-points{grid-template-columns:1fr}.wx-auth-points span{min-height:31px}
}
@media(max-width:350px){
  .wx-wallet-links{grid-template-columns:1fr 1fr}.wx-wallet-links a:first-child{grid-column:1/-1}
  .wx-balance-coin{width:39px;height:39px}.wx-balance-value{font-size:21px}.wx-network-pill{display:none}
}
@media(max-height:620px){
  .wx-head{min-height:56px;padding-block:9px}.wx-head-mark{width:34px;height:34px}.wx-body{padding-block:11px;gap:9px}.wx-view{gap:9px}.wx-balance--compact{padding:10px 12px}.wx-balance-coin{width:40px;height:40px;font-size:22px}.wx-quick-actions--simple .wx-qa{min-height:54px;padding:6px}.wx-quick-actions--simple .wx-qa b{width:27px;height:27px}.wx-assets{gap:5px;padding:9px}.wx-asset-row{min-height:42px;padding:4px 7px}.wx-coin-mark{width:27px;height:27px;font-size:14px}.wx-security-strip{padding:8px 9px}.wx-wallet-links a{min-height:30px}.wx-auth{gap:10px}.wx-auth-icon{width:43px;height:43px;border-radius:14px}.wx-auth-copy h2{font-size:21px}.wx-auth-copy p{font-size:11px}.wx-auth-password{min-height:46px}.wx-btn{min-height:42px}
}
@media(max-height:500px){
  .wx-head-sub{display:none}.wx-auth-trust{display:none}.wx-auth-points{display:none}
}
@media(prefers-reduced-motion:reduce){.wx-drawer,.wx-drawer-overlay,.wx-btn,.wx-qa{transition:none!important}}

/* Unlock screen polish: compact security card instead of a tall sparse form. */
.wx-auth--unlock{
  grid-template-columns:54px minmax(0,1fr);
  align-items:center;
  gap:12px 14px;
  padding:16px;
  border:1px solid color-mix(in srgb,var(--haze-accent) 13%,rgba(117,158,236,.12));
  border-radius:calc(var(--haze-radius,18px) + 2px);
  background:
    radial-gradient(240px 130px at 90% -10%,color-mix(in srgb,var(--haze-accent) 9%,transparent),transparent 70%),
    linear-gradient(145deg,rgba(12,35,78,.60),rgba(4,15,38,.72));
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 18px 46px rgba(0,0,0,.12);
}
.wx-auth--unlock>.wx-auth-icon{grid-column:1;grid-row:1}
.wx-auth--unlock>.wx-auth-copy{grid-column:2;grid-row:1;margin:0}
.wx-auth--unlock>.wx-auth-field,
.wx-auth--unlock>.wx-auth-error,
.wx-auth--unlock>.wx-btn,
.wx-auth--unlock>.wx-auth-linkrow,
.wx-auth--unlock>.wx-auth-trust,
.wx-auth--unlock>input[type="file"]{grid-column:1/-1}
.wx-auth--unlock .wx-auth-copy h2{font-size:22px}
.wx-auth--unlock .wx-auth-copy p{font-size:10.8px;line-height:1.45}
.wx-auth-icon--lock{position:relative;background:linear-gradient(145deg,color-mix(in srgb,var(--haze-accent-deep) 84%,#1c3270 16%),color-mix(in srgb,var(--haze-accent) 78%,#1872a5 22%))}
.wx-lock-shape{position:relative;width:20px;height:16px;border:2px solid #fff;border-radius:5px;opacity:.96}
.wx-lock-shape:before{content:"";position:absolute;left:50%;top:-10px;width:11px;height:10px;transform:translateX(-50%);border:2px solid #fff;border-bottom:0;border-radius:8px 8px 0 0}
.wx-lock-shape:after{content:"";position:absolute;left:50%;top:5px;width:3px;height:5px;transform:translateX(-50%);border-radius:99px;background:#fff}
.wx-auth--unlock .wx-auth-field{margin-top:2px}
.wx-auth--unlock .wx-auth-password{min-height:50px;border-radius:13px;background:rgba(1,9,25,.52)}
.wx-auth--unlock>.wx-btn--primary{min-height:48px;border-radius:13px;box-shadow:0 12px 32px color-mix(in srgb,var(--haze-accent-deep) 18%,transparent)}
.wx-auth--unlock .wx-auth-linkrow{min-height:24px;margin-top:-2px}
.wx-auth--unlock .wx-auth-trust{margin-top:0}
@media(max-width:360px){
  .wx-auth--unlock{grid-template-columns:46px minmax(0,1fr);padding:13px;gap:10px 11px}
  .wx-auth--unlock .wx-auth-icon{width:44px;height:44px}
  .wx-auth--unlock .wx-auth-copy h2{font-size:20px}
  .wx-auth--unlock .wx-auth-copy p{font-size:10px}
}
@media(max-height:560px){
  .wx-body--auth{padding-block:12px}
  .wx-auth--unlock{padding:12px;gap:9px 11px}
  .wx-auth--unlock .wx-auth-trust{display:none}
}


/* Final theme fidelity + safe-area tuning -------------------------------- */
.wx-qa b,.wx-btn--primary{box-shadow:0 10px 28px color-mix(in srgb,var(--haze-accent-deep) 22%,transparent),inset 0 1px rgba(255,255,255,.25)}
.wx-network-pill{color:color-mix(in srgb,var(--haze-accent) 72%,#fff 28%)}
.wx-asset-row.is-selected{border-color:color-mix(in srgb,var(--haze-accent) 38%,transparent);background:color-mix(in srgb,var(--haze-accent) 7%,transparent)}
.wx-asset-row.is-selected .wx-asset-balance{color:color-mix(in srgb,var(--haze-accent) 70%,#fff 30%)}
.wx-wallet-links a:first-child,.wx-add-site{color:color-mix(in srgb,var(--haze-accent) 78%,#fff 22%)}
.wx-auth-kicker{color:color-mix(in srgb,var(--haze-accent) 62%,#aac6ff 38%)}
@supports (padding:max(0px)){
  .wallet-standalone .wx-head{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  .wallet-standalone .wx-body{padding-left:max(13px,env(safe-area-inset-left));padding-right:max(13px,env(safe-area-inset-right));padding-bottom:max(16px,env(safe-area-inset-bottom))}
}

/* Round 2 icon polish ---------------------------------------------------- */
.wx-qa b svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.wx-icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wx-auth-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wx-auth-icon svg path:last-child{stroke-width:2}
.wx-wallet-links{display:grid!important;grid-template-columns:1fr!important;gap:6px}
.wx-wallet-linkrow{display:grid;grid-template-columns:1.45fr 1fr .8fr;gap:6px}
.wx-powered{text-align:center;color:#5f759b;font-size:8.5px;letter-spacing:.04em;padding-top:1px}
@media(max-width:430px){.wx-wallet-linkrow{grid-template-columns:1fr 1fr}.wx-wallet-linkrow a:first-child{grid-column:1/-1}}


/* Round 4: smoother main-card presentation + in-card status footer + haze loading overlay */
.wx-drawer{overflow:hidden;background:radial-gradient(520px 300px at 92% -2%,rgba(73,130,255,.14),transparent 62%),radial-gradient(420px 260px at 4% 100%,rgba(113,75,255,.14),transparent 66%),linear-gradient(180deg,color-mix(in srgb,var(--haze-bg) 90%,#102a5a 10%),#051127 100%);}
.wx-head{background:linear-gradient(180deg,rgba(8,24,56,.96),rgba(8,24,56,.92));border-bottom:1px solid rgba(118,156,238,.12)}
.wx-body{position:relative;z-index:1}
.wx-drawer-foot{display:flex!important;align-items:center;justify-content:center;gap:7px;flex:0 0 auto;padding:10px 14px;border-top:1px solid rgba(118,156,238,.10);background:linear-gradient(180deg,rgba(5,18,42,.92),rgba(6,20,46,.98));color:#7f96c2;font-size:10px;font-weight:760;letter-spacing:.01em}
.wx-drawer-foot strong,.wx-drawer-foot .wx-foot-brand{color:#e4efff;font-size:10.4px}.wx-drawer-foot .wx-foot-brand{text-decoration:none}.wx-drawer-foot .wx-foot-brand:hover,.wx-drawer-foot .wx-foot-brand:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:2px}.wx-status-dot{width:8px;height:8px;border-radius:50%;background:#4fe2ad;box-shadow:0 0 14px rgba(79,226,173,.7)}
.wx-drawer-overlay:not(.wx-drawer-overlay--standalone) .wx-drawer-foot{display:none!important}
/* Footer menu item: Request a listing (drawer footer strip) */
.wx-drawer-foot .wx-foot-listing{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;letter-spacing:inherit;cursor:pointer}
.wx-drawer-foot .wx-foot-listing:hover,.wx-drawer-foot .wx-foot-listing:focus-visible{color:#cfe0ff;text-decoration:underline;text-underline-offset:2px}
.wx-busy-screen{position:absolute;inset:0;display:grid;place-items:center;gap:14px;padding:28px;opacity:0;pointer-events:none;transition:opacity .22s ease;overflow:hidden;background:radial-gradient(380px 180px at 50% 58%,rgba(63,133,255,.16),transparent 72%),rgba(2,10,24,.56);backdrop-filter:blur(10px);z-index:4}
.wx-busy-screen:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 35%,rgba(124,58,237,.06) 100%)}
.wx-drawer.is-busy .wx-busy-screen{opacity:1;pointer-events:auto}
.wx-busy-haze{position:absolute;border-radius:50%;filter:blur(36px);mix-blend-mode:screen;opacity:.8;animation:wxHaze 8s ease-in-out infinite}
.wx-busy-haze-a{width:260px;height:140px;background:radial-gradient(circle,rgba(104,172,255,.26),transparent 68%);top:18%;left:12%}
.wx-busy-haze-b{width:320px;height:170px;background:radial-gradient(circle,rgba(131,97,255,.24),transparent 70%);bottom:16%;right:4%;animation-duration:10s;animation-direction:reverse}
.wx-busy-haze-c{width:220px;height:120px;background:radial-gradient(circle,rgba(87,227,211,.14),transparent 68%);bottom:26%;left:24%;animation-duration:9s}
.wx-busy-label{position:relative;z-index:1;text-align:center;color:#eef4ff;font-size:13px;font-weight:800;letter-spacing:.01em;text-shadow:0 2px 18px rgba(0,0,0,.25)}
@keyframes wxSpin{to{transform:rotate(360deg)}}
@keyframes wxHaze{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(18px,-12px,0) scale(1.08)}}
@media(max-width:430px){.wx-drawer-foot{padding:9px 10px;font-size:9.4px;gap:6px}.wx-drawer-foot strong,.wx-drawer-foot .wx-foot-brand{font-size:9.8px}}
@media(max-height:560px){.wx-drawer-foot{padding:8px 10px}}


/* ==========================================================================
   Round 5 — Haze atmosphere inside the wallet + flagship polish
   ========================================================================== */

/* Ambient haze drifting inside the card, behind all content */
.wx-drawer:before{
  content:"";position:absolute;inset:-22% -30%;z-index:0;pointer-events:none;
  background:
    radial-gradient(430px 300px at 86% 6%,color-mix(in srgb,var(--haze-accent) 10%,transparent),transparent 66%),
    radial-gradient(400px 300px at 6% 94%,color-mix(in srgb,var(--haze-accent-deep) 11%,transparent),transparent 68%),
    radial-gradient(300px 200px at 50% 55%,rgba(80,140,255,.05),transparent 70%);
  animation:wxDrawerHaze 18s ease-in-out infinite alternate;will-change:transform;
}
.wx-head{position:relative;z-index:2}
.wx-drawer-foot{position:relative;z-index:2}
@keyframes wxDrawerHaze{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(2%,1.5%,0) scale(1.06)}}

/* Head refinement: subtle bottom glow line + gradient brand text */
.wx-head:after{content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--haze-accent) 45%,transparent),transparent);opacity:.75;pointer-events:none}
.wx-head-mark{box-shadow:0 8px 22px color-mix(in srgb,var(--haze-accent-deep) 24%,transparent),0 0 18px color-mix(in srgb,var(--haze-accent) 18%,transparent)}

/* --- Balance hero -------------------------------------------------------- */
.wx-balance--compact{
  position:relative;
  border:1px solid color-mix(in srgb,var(--haze-accent) 20%,rgba(117,158,236,.14));
  background:
    radial-gradient(230px 130px at 92% -24%,color-mix(in srgb,var(--haze-accent) 15%,transparent),transparent 70%),
    radial-gradient(200px 120px at -10% 120%,color-mix(in srgb,var(--haze-accent-deep) 12%,transparent),transparent 72%),
    linear-gradient(150deg,color-mix(in srgb,var(--haze-accent-deep) 15%,#0a2350 85%),color-mix(in srgb,var(--haze-bg) 88%,#0e2150 12%));
  box-shadow:0 18px 44px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.05);
}
.wx-balance--compact:before{
  content:"";position:absolute;top:0;left:14px;right:14px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--haze-accent) 60%,#fff 8%),transparent);opacity:.8;
}
.wx-balance-value{
  background:linear-gradient(180deg,#ffffff 20%,#c4d9ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 14px rgba(90,150,255,.18));
}
.wx-balance-coin{
  box-shadow:inset 0 1px rgba(255,255,255,.34),0 10px 28px rgba(0,0,0,.24),
    0 0 0 1px rgba(255,255,255,.05),
    0 0 26px color-mix(in srgb,var(--haze-accent) 26%,transparent);
}
.wx-balance--swap{animation:wxBalanceSwap .55s ease-out}
@keyframes wxBalanceSwap{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--haze-accent) 42%,transparent),0 18px 44px rgba(0,0,0,.24)}
  100%{box-shadow:0 0 0 16px transparent,0 18px 44px rgba(0,0,0,.24)}
}

/* --- Asset selector (future-ready dropdown) ------------------------------- */
.wx-asset-select-wrap{position:relative;flex:0 0 auto}
.wx-asset-select{
  display:flex;align-items:center;gap:7px;height:36px;padding:4px 10px 4px 5px;
  border-radius:999px;cursor:pointer;color:#eaf2ff;
  border:1px solid color-mix(in srgb,var(--haze-accent) 26%,rgba(126,161,237,.18));
  background:color-mix(in srgb,var(--haze-accent) 7%,rgba(4,15,37,.62));
  font:800 11.5px/1 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.02em;
  backdrop-filter:blur(8px);
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .12s ease;
}
.wx-asset-select:hover{
  border-color:color-mix(in srgb,var(--haze-accent) 44%,transparent);
  background:color-mix(in srgb,var(--haze-accent) 11%,rgba(4,15,37,.66));
  box-shadow:0 8px 22px rgba(0,0,0,.22),0 0 18px color-mix(in srgb,var(--haze-accent) 14%,transparent);
}
.wx-asset-select:active{transform:translateY(1px)}
.wx-asset-select:focus-visible{outline:2px solid color-mix(in srgb,var(--haze-accent) 70%,#fff 10%);outline-offset:2px}
.wx-asset-select-coin{width:26px;height:26px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;font-size:14px;font-weight:900;box-shadow:inset 0 1px rgba(255,255,255,.28)}
.wx-asset-select-id{white-space:nowrap}
.wx-asset-select-caret{display:grid;place-items:center}
.wx-asset-select-caret svg{width:13px;height:13px;fill:none;stroke:#8fb0e8;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.wx-asset-select-wrap.is-open .wx-asset-select-caret svg{transform:rotate(180deg)}
.wx-asset-select-wrap.is-open .wx-asset-select{
  border-color:color-mix(in srgb,var(--haze-accent) 50%,transparent);
  box-shadow:0 8px 22px rgba(0,0,0,.24),0 0 22px color-mix(in srgb,var(--haze-accent) 18%,transparent);
}
.wx-asset-menu{
  position:absolute;top:calc(100% + 10px);right:0;z-index:40;min-width:242px;max-height:min(320px,60vh);overflow-y:auto;
  display:grid;gap:2px;padding:6px;border-radius:16px;
  border:1px solid rgba(126,161,237,.24);
  background:linear-gradient(180deg,rgba(10,26,60,.97),rgba(5,15,38,.98));
  box-shadow:0 26px 64px rgba(0,0,0,.5),0 0 44px color-mix(in srgb,var(--haze-accent-deep) 12%,transparent),inset 0 1px rgba(255,255,255,.05);
  backdrop-filter:blur(18px) saturate(130%);
  opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;
  transition:opacity .16s ease,transform .18s cubic-bezier(.22,.9,.3,1);
  scrollbar-width:thin;scrollbar-color:rgba(125,161,232,.32) transparent;
}
.wx-asset-menu[hidden]{display:none}
.wx-asset-menu.is-open{opacity:1;transform:none}
.wx-asset-menu-option{
  display:flex;align-items:center;gap:10px;width:100%;padding:8px 9px;text-align:left;
  border:1px solid transparent;border-radius:12px;background:transparent;color:var(--text);cursor:pointer;
  transition:background .14s ease,border-color .14s ease;
}
.wx-asset-menu-option:hover:not(:disabled),.wx-asset-menu-option:focus-visible{background:rgba(255,255,255,.05);border-color:rgba(126,161,237,.18);outline:none}
.wx-asset-menu-option[aria-selected="true"]{
  background:color-mix(in srgb,var(--haze-accent) 9%,rgba(255,255,255,.03));
  border-color:color-mix(in srgb,var(--haze-accent) 34%,transparent);
}
.wx-asset-menu-option:disabled{opacity:.48;cursor:default}
.wx-asset-menu-copy{flex:1 1 auto;min-width:0;display:grid;gap:1px}
.wx-asset-menu-copy strong{font-size:12.5px}
.wx-asset-menu-copy small{color:#7589b0;font-size:9.5px;letter-spacing:.08em}
.wx-asset-menu-meta{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.wx-asset-menu-balance{font-size:11px;color:#dfeaff;white-space:nowrap}

/* --- Quick actions --------------------------------------------------------- */
.wx-quick-actions--simple .wx-qa{
  position:relative;overflow:hidden;
  border:1px solid rgba(117,158,236,.16);
  background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.014));
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.wx-quick-actions--simple .wx-qa:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--haze-accent) 34%,transparent);
  box-shadow:0 14px 30px rgba(0,0,0,.22),0 0 24px color-mix(in srgb,var(--haze-accent) 10%,transparent);
}
.wx-quick-actions--simple .wx-qa:hover b{box-shadow:0 10px 26px color-mix(in srgb,var(--haze-accent-deep) 34%,transparent),inset 0 1px rgba(255,255,255,.3)}
.wx-qa b{transition:box-shadow .18s ease}
/* Coming-soon quick actions: greyed out, no hover lift, "coming soon" tag on hover */
.wx-qa--soon{opacity:.5;filter:saturate(.35);cursor:default;pointer-events:auto}
.wx-qa--soon:hover{transform:none;border-color:rgba(117,158,236,.14);background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.014));box-shadow:none}
.wx-qa--soon:hover b{box-shadow:none}
.wx-qa--soon{position:relative}
.wx-qa--soon:hover:after{
  content:"Coming soon";
  position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  padding:3px 9px;font-size:9.5px;font-weight:700;letter-spacing:.04em;white-space:nowrap;
  border-radius:8px;background:rgba(10,18,36,.96);border:1px solid rgba(117,158,236,.28);color:#9fb6e2;
  box-shadow:0 6px 18px rgba(0,0,0,.35);z-index:6;
}

/* --- Asset + activity lists -------------------------------------------------- */
.wx-assets{
  border-color:rgba(117,158,236,.14);
  background:linear-gradient(170deg,rgba(6,18,44,.55),rgba(3,12,30,.55));
  box-shadow:inset 0 1px rgba(255,255,255,.03);
}
.wx-asset-row{position:relative;transition:background .15s ease,border-color .15s ease,transform .15s ease}
.wx-asset-row.is-active:hover{transform:translateX(2px)}
.wx-asset-row.is-selected:before{
  content:"";position:absolute;left:-1px;top:22%;bottom:22%;width:2.5px;border-radius:3px;
  background:linear-gradient(180deg,var(--haze-accent),var(--haze-accent-deep));
  box-shadow:0 0 12px color-mix(in srgb,var(--haze-accent) 70%,transparent);
}
.wx-tx{transition:background .14s ease}
.wx-tx:hover{background:rgba(255,255,255,.035)}

/* --- Security strip + status footer ------------------------------------------ */
.wx-security-strip{box-shadow:inset 0 1px rgba(255,255,255,.03)}
.wx-security-check{box-shadow:0 0 16px rgba(69,224,196,.22)}
.wx-status-dot{animation:wxStatusPulse 2.8s ease-in-out infinite}
@keyframes wxStatusPulse{0%,100%{box-shadow:0 0 10px rgba(79,226,173,.55)}50%{box-shadow:0 0 18px rgba(79,226,173,.95),0 0 4px rgba(255,255,255,.5)}}
.wx-drawer-foot strong{background:linear-gradient(90deg,#eafff6,#a9f0d4);-webkit-background-clip:text;background-clip:text;color:transparent}

/* --- Primary button sheen ------------------------------------------------------ */
.wx-btn--primary{position:relative;overflow:hidden}
.wx-btn--primary:after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.26) 50%,transparent);
  transform:translateX(-140%) skewX(-12deg);transition:transform .55s ease;
}
.wx-btn--primary:hover:after{transform:translateX(240%) skewX(-12deg)}
.wx-btn{transition:background .15s,box-shadow .15s,transform .1s,filter .15s}
.wx-btn--primary:hover{filter:brightness(1.05)}
.wx-btn:focus-visible,.wx-qa:focus-visible,.wx-back:focus-visible,.wx-icon-btn:focus-visible,.wx-close:focus-visible{outline:2px solid color-mix(in srgb,var(--haze-accent) 70%,#fff 10%);outline-offset:2px}

/* --- View transitions ----------------------------------------------------------- */
.wx-view-swap>*{animation:wxViewIn .38s cubic-bezier(.22,.9,.3,1) both}
.wx-view-swap>*:nth-child(2){animation-delay:.045s}
.wx-view-swap>*:nth-child(3){animation-delay:.09s}
.wx-view-swap>*:nth-child(4){animation-delay:.13s}
.wx-view-swap>*:nth-child(5){animation-delay:.17s}
.wx-view-swap>*:nth-child(n+6){animation-delay:.21s}
@keyframes wxViewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* --- Auth screens: gentle glow ----------------------------------------------------- */
.wx-auth-icon{box-shadow:0 14px 34px color-mix(in srgb,var(--haze-accent-deep) 26%,transparent),0 0 26px color-mix(in srgb,var(--haze-accent) 16%,transparent),inset 0 1px rgba(255,255,255,.3)}
.wx-auth--unlock{transition:border-color .2s ease,box-shadow .2s ease}
.wx-auth--unlock:focus-within{border-color:color-mix(in srgb,var(--haze-accent) 30%,rgba(117,158,236,.14));box-shadow:inset 0 1px rgba(255,255,255,.04),0 18px 46px rgba(0,0,0,.14),0 0 34px color-mix(in srgb,var(--haze-accent) 8%,transparent)}

/* --- Branded busy / loading screen -------------------------------------------------- */
.wx-busy-core{position:relative;width:92px;height:92px;display:grid;place-items:center;z-index:1}
.wx-busy-core:before{
  content:"";position:absolute;inset:-16px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--haze-accent) 20%,transparent),transparent 68%);
  animation:wxBusyGlow 2.3s ease-in-out infinite;
}
.wx-busy-mark{position:relative;width:46px;height:46px;animation:wxBusyMark 2.3s ease-in-out infinite}
.wx-busy-ring{position:absolute;border-radius:50%;border:2px solid transparent}
.wx-busy-ring-a{inset:0;border-top-color:rgba(74,205,255,.95);border-right-color:rgba(74,205,255,.22);animation:wxSpin 1.05s linear infinite}
.wx-busy-ring-b{inset:9px;border-bottom-color:rgba(150,118,255,.9);border-left-color:rgba(150,118,255,.2);animation:wxSpin 1.7s linear infinite reverse}
.wx-busy-mote{position:absolute;width:5px;height:5px;border-radius:50%;background:rgba(140,200,255,.85);filter:blur(1px);opacity:0;z-index:1;animation:wxMote 3.6s ease-in-out infinite}
.wx-busy-mote-a{left:40%;bottom:30%}
.wx-busy-mote-b{left:57%;bottom:27%;animation-delay:1.2s;background:rgba(175,145,255,.85)}
.wx-busy-mote-c{left:48%;bottom:23%;animation-delay:2.3s;background:rgba(120,230,255,.75)}
.wx-busy-label{animation:wxBusyLabel 2.6s ease-in-out infinite}
@keyframes wxSpin{to{transform:rotate(360deg)}}
@keyframes wxBusyGlow{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.14)}}
@keyframes wxBusyMark{0%,100%{transform:scale(1);filter:drop-shadow(0 6px 18px rgba(70,140,255,.4))}50%{transform:scale(1.07);filter:drop-shadow(0 8px 28px rgba(130,105,255,.62))}}
@keyframes wxMote{0%{opacity:0;transform:translateY(10px)}22%{opacity:.95}68%{opacity:.5}100%{opacity:0;transform:translateY(-48px)}}
@keyframes wxBusyLabel{0%,100%{opacity:.72}50%{opacity:1}}

/* --- Compact selector on very small wallets ----------------------------------------- */
@media(max-width:350px){
  .wx-asset-select{height:32px;padding-right:8px;gap:5px}
  .wx-asset-select-coin{width:22px;height:22px;font-size:12px}
  .wx-asset-select-id{font-size:10.5px}
  .wx-asset-menu{min-width:220px}
}

/* --- Reduced motion: keep it calm ---------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .wx-drawer:before,.wx-busy-core:before,.wx-busy-mark,.wx-busy-ring-a,.wx-busy-ring-b,.wx-busy-mote,.wx-busy-label,.wx-status-dot{animation:none!important}
  .wx-busy-mote{display:none}
  .wx-view-swap>*{animation:none!important}
  .wx-balance--swap{animation:none!important}
  .wx-btn--primary:after{display:none}
  .wx-asset-menu{transition:none}
}


/* ==========================================================================
   Round 6 — compact flagship overview
   Real coin logos, tiny pickers, visible activity, no-scroll density modes.
   ========================================================================== */

/* Real coin logos (local SVG from the asset config) */
.wx-coinlogo{position:relative;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.05)}
.wx-coinlogo img{width:100%;height:100%;object-fit:cover;display:block}
.wx-coinlogo--fallback{font-weight:900;color:#dfe9ff;background:linear-gradient(145deg,#2a3f6e,#16233f)}
.wx-balance-logo{width:46px;height:46px;box-shadow:0 8px 22px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.07),0 0 22px color-mix(in srgb,var(--haze-accent) 20%,transparent)}
.wx-coinlogo--row{width:28px;height:28px;box-shadow:0 0 0 1px rgba(255,255,255,.06)}

/* Balance card: tighter vertical rhythm, same hero treatment */
.wx-balance--compact{align-items:center;gap:12px;padding:13px 15px}
.wx-balance-content{display:grid;gap:4px;min-width:0}
.wx-balance-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.wx-balance-head{min-width:0;display:grid;gap:2px}
.wx-balance-eyebrow{font-size:10px;letter-spacing:.16em}
.wx-balance-value{font-size:clamp(23px,4.4vh,30px);line-height:1.06}
.wx-balance-fiatrow{display:flex;align-items:center;min-height:22px}
.wx-balance-sub{font-size:11px}

/* Compact asset selector: ticker + caret only (logo lives on the card) */
.wx-asset-select{height:30px;padding:3px 9px 3px 11px;gap:5px;font-size:11px;letter-spacing:.04em}
.wx-asset-select-caret svg{width:11px;height:11px}

/* Searchable asset picker */
.wx-picker{min-width:254px;max-height:min(370px,72vh);padding:0;overflow:hidden;display:flex;flex-direction:column}
.wx-picker-head{padding:8px 8px 7px;border-bottom:1px solid rgba(126,161,237,.12);flex:0 0 auto}
.wx-picker-search{width:100%;height:34px;padding:0 11px;border-radius:10px;border:1px solid rgba(126,161,237,.18);background:rgba(3,12,30,.62);color:var(--text);font:650 12px/1 Inter,ui-sans-serif,system-ui,sans-serif;outline:none;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease}
.wx-picker-search::placeholder{color:#5d7398}
.wx-picker-search:focus{border-color:color-mix(in srgb,var(--haze-accent) 55%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--haze-accent) 12%,transparent)}
.wx-picker-list{flex:1 1 auto;min-height:0;overflow-y:auto;padding:6px;display:grid;gap:2px;scrollbar-width:thin;scrollbar-color:rgba(125,161,232,.32) transparent}
.wx-picker-empty{padding:18px 12px;text-align:center;color:#7186ae;font-size:11px}
.wx-picker-foot{padding:7px 10px;border-top:1px solid rgba(126,161,237,.12);flex:0 0 auto}
.wx-asset-menu-option{position:relative;padding-right:26px}
.wx-asset-menu-check{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:14px;height:14px;color:color-mix(in srgb,var(--haze-accent) 80%,#fff 20%);opacity:0;transition:opacity .14s ease}
.wx-asset-menu-check svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.wx-asset-menu-option[aria-selected="true"] .wx-asset-menu-check{opacity:1}

/* Hide-zero toggle (picker footer + settings) */
.wx-picker-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:#9db1d6;font-size:10.5px;font-weight:720;user-select:none}
.wx-picker-toggle input{position:absolute;opacity:0;width:0;height:0}
.wx-picker-toggle-ui{position:relative;width:28px;height:16px;flex:0 0 auto;border-radius:999px;border:1px solid rgba(126,161,237,.3);background:rgba(4,15,37,.7);transition:background .16s ease,border-color .16s ease}
.wx-picker-toggle-ui:after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:#8ba3cf;transition:transform .16s ease,background .16s ease}
.wx-picker-toggle input:checked+.wx-picker-toggle-ui{background:color-mix(in srgb,var(--haze-accent) 38%,rgba(4,15,37,.7));border-color:color-mix(in srgb,var(--haze-accent) 55%,transparent)}
.wx-picker-toggle input:checked+.wx-picker-toggle-ui:after{transform:translateX(12px);background:#fff}
.wx-picker-toggle input:focus-visible+.wx-picker-toggle-ui{outline:2px solid color-mix(in srgb,var(--haze-accent) 70%,#fff 10%);outline-offset:2px}

/* Fiat display-currency selector (inline in the fiat line) */
.wx-fiat-wrap{position:relative;display:inline-flex;min-width:0}
.wx-fiat-select{display:inline-flex;align-items:center;gap:5px;padding:2px 4px;margin-left:-4px;border:0;border-radius:8px;background:transparent;color:#8ea6d2;font:750 12px/1.2 Inter,ui-sans-serif,system-ui,sans-serif;cursor:pointer;transition:color .15s ease,background .15s ease}
.wx-fiat-select:hover{color:#dcebff;background:rgba(255,255,255,.045)}
.wx-fiat-select:focus-visible{outline:2px solid color-mix(in srgb,var(--haze-accent) 70%,#fff 10%);outline-offset:2px}
.wx-fiat-select .wx-asset-select-caret svg{width:10px;height:10px;stroke-width:2.6}
.wx-fiat-text.is-empty{color:#63789f}
.wx-fiat-menu{position:absolute;left:-6px;top:calc(100% + 8px);z-index:40;min-width:196px;max-height:min(300px,60vh);overflow-y:auto;display:grid;gap:2px;padding:6px;border-radius:14px;border:1px solid rgba(126,161,237,.24);background:linear-gradient(180deg,rgba(10,26,60,.97),rgba(5,15,38,.98));box-shadow:0 24px 60px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.05);backdrop-filter:blur(18px) saturate(130%);opacity:0;transform:translateY(-5px) scale(.98);transform-origin:top left;transition:opacity .15s ease,transform .17s cubic-bezier(.22,.9,.3,1);scrollbar-width:thin;scrollbar-color:rgba(125,161,232,.32) transparent}
.wx-fiat-menu[hidden]{display:none}
.wx-fiat-menu.is-open{opacity:1;transform:none}
.wx-fiat-option{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;width:100%;padding:7px 9px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--text);cursor:pointer;text-align:left;transition:background .13s ease,border-color .13s ease}
.wx-fiat-option:hover,.wx-fiat-option:focus-visible{background:rgba(255,255,255,.05);border-color:rgba(126,161,237,.16);outline:none}
.wx-fiat-option[aria-selected="true"]{background:color-mix(in srgb,var(--haze-accent) 9%,rgba(255,255,255,.03));border-color:color-mix(in srgb,var(--haze-accent) 34%,transparent)}
.wx-fiat-option strong{font-size:11.5px}
.wx-fiat-option small{color:#7589b0;font-size:9px}
.wx-fiat-option-sym{color:#8fb0e8;font-size:10px;font-weight:800}

/* Recent activity: compact, immediately visible, "View all" link */
.wx-activity{display:grid;gap:6px;padding:11px 12px;border:1px solid rgba(117,158,236,.14);border-radius:calc(var(--haze-radius,18px) + 1px);background:linear-gradient(170deg,rgba(6,18,44,.55),rgba(3,12,30,.55));box-shadow:inset 0 1px rgba(255,255,255,.03)}
.wx-activity .wx-section-row{padding:0 2px 2px}
.wx-viewall{border:0;background:transparent;color:color-mix(in srgb,var(--haze-accent) 78%,#fff 22%);font:800 10.5px/1 Inter,ui-sans-serif,system-ui,sans-serif;cursor:pointer;padding:3px 2px;transition:color .14s ease}
.wx-viewall:hover{color:#fff}
.wx-activity-list{display:grid;gap:2px}
.wx-activity-list .wx-fine{padding:4px 2px;font-size:11px}
.wx-tx{padding:6px 8px;border-radius:11px}
.wx-activity-list--full{gap:3px}
.wx-activity-list--full .wx-tx{padding:8px 9px}

/* Settings display rows */
.wx-settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0}
.wx-settings-row>span{font-size:12px;color:#c9d6ee;font-weight:700}
.wx-settings-select{width:auto;min-width:150px;min-height:38px;padding:6px 10px;font-size:12px}
.wx-picker-toggle--settings{padding:2px 0}

/* Asset-switch crossfade */
.wx-balance--fading .wx-balance-content,.wx-balance--fading .wx-balance-logo{opacity:0;transition:opacity .15s ease}
.wx-balance-content,.wx-balance-logo{transition:opacity .2s ease}
.wx-balance--fadein .wx-balance-content,.wx-balance--fadein .wx-balance-logo{animation:wxBalanceIn .22s ease}
@keyframes wxBalanceIn{from{opacity:0}to{opacity:1}}

/* ==========================================================================
   Density modes — the overview must fit without vertical scrolling.
   The overview body never scrolls; the design itself compacts. Sub-views
   (send/receive/buy/settings/activity) may still scroll when needed.
   ========================================================================== */
.wx-body--overview{overflow:hidden}
.wx-body--overview .wx-view{min-height:0}

/* ≤640px tall: 2 activity rows, tighter card rhythm */
@media(max-height:640px){
  .wx-body--overview .wx-activity-list .wx-tx:nth-child(n+3){display:none}
  .wx-body--overview{padding:12px;gap:10px}
  .wx-body--overview .wx-view{gap:10px}
  .wx-balance--compact{padding:11px 13px}
  .wx-balance-logo{width:41px;height:41px}
  .wx-quick-actions--simple .wx-qa{min-height:58px;padding:7px 6px}
  .wx-quick-actions--simple .wx-qa b{width:28px;height:28px;font-size:15px}
  .wx-activity{padding:9px 11px}
  .wx-tx{padding:5px 8px}
}

/* ≤560px tall: 1 activity row, smaller balance, slimmer header */
@media(max-height:560px){
  .wx-body--overview .wx-activity-list .wx-tx:nth-child(n+2){display:none}
  .wx-body--overview .wx-powered{display:none}
  .wx-balance-value{font-size:clamp(20px,4.6vh,25px)}
  .wx-balance-eyebrow{font-size:9px}
  .wx-balance-sub{font-size:10px}
  .wx-asset-select{height:28px;font-size:10.5px}
  .wx-security-strip{padding:7px 9px}
  .wx-security-strip small{display:none}
}

/* ≤500px tall: essentials — balance, selector, actions, activity summary */
@media(max-height:500px){
  .wx-body--overview .wx-wallet-links{display:none!important}
  .wx-body--overview{padding:10px;gap:8px}
  .wx-body--overview .wx-view{gap:8px}
  .wx-balance--compact{padding:9px 12px;gap:10px}
  .wx-balance-logo{width:36px;height:36px}
  .wx-balance-fiatrow{min-height:19px}
  .wx-fiat-select{font-size:11px}
  .wx-quick-actions--simple .wx-qa{min-height:50px}
  .wx-quick-actions--simple .wx-qa b{width:25px;height:25px;border-radius:8px}
  .wx-quick-actions--simple .wx-qa span{font-size:10.5px}
  .wx-activity{padding:8px 10px;gap:4px}
  .wx-security-strip{padding:6px 8px}
  .wx-security-check{width:22px;height:22px;font-size:11px}
  .wx-security-strip strong{font-size:10.5px}
}

/* ≤440px tall: ultra-compact strip mode */
@media(max-height:440px){
  .wx-head{min-height:48px;padding-block:7px}
  .wx-head-mark{width:30px;height:30px}
  .wx-head-title{font-size:13px}
  .wx-head-sub{display:none}
  .wx-body--overview{padding:8px;gap:7px}
  .wx-body--overview .wx-view{gap:7px}
  .wx-balance--compact{padding:8px 11px}
  .wx-balance-logo{width:32px;height:32px}
  .wx-balance-value{font-size:19px}
  .wx-balance-fiatrow{min-height:17px}
  .wx-balance-sub{font-size:9.5px}
  .wx-quick-actions--simple .wx-qa{min-height:44px;gap:3px}
  .wx-quick-actions--simple .wx-qa b{width:23px;height:23px;font-size:13px}
  .wx-activity .wx-section-row{padding-bottom:0}
  .wx-security-strip{display:none}
  .wx-drawer-foot{padding:6px 8px;font-size:8.8px}
}

/* Reduced motion for the new bits */
@media(prefers-reduced-motion:reduce){
  .wx-balance--fading .wx-balance-content,.wx-balance--fading .wx-balance-logo{opacity:1;transition:none}
  .wx-balance--fadein .wx-balance-content,.wx-balance--fadein .wx-balance-logo{animation:none}
  .wx-fiat-menu{transition:none}
}

/* Touch devices: inputs under 16px make iOS/Android zoom the page on focus
   (and iOS keeps the zoom until the user pinches back out). Touch inputs stay
   at 16px so focusing never zooms. View-entry autofocus is separately gated
   off touch devices in wallet.js (softFocus). */
@media(pointer:coarse){
  .wx-input,.wx-picker-search{font-size:16px}
  .wx-picker-search{height:38px}
}

/* ============ Atomic swap ============ */
.wx-swap-banner small{max-width:60ch}
.wx-swap-both{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:460px){.wx-swap-both{grid-template-columns:1fr}}

.wx-swap-hex{display:grid;gap:6px;padding:12px 14px;background:rgba(255,255,255,.03);border:1px solid rgba(121,161,239,.16);border-radius:10px}
.wx-swap-hex-label{color:#abc0e9;font-size:11px;letter-spacing:.2px;text-transform:uppercase;font-weight:700}
.wx-swap-hex code{color:#dbe9ff;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;word-break:break-all}

.wx-swap-pre{display:grid;gap:10px}
.wx-swap-hint{color:#9fb2d6;font-size:12px;line-height:1.5;margin:0}

.wx-swap-legs{display:grid;gap:14px}
.wx-swap-leg{display:grid;gap:12px;padding:14px;background:rgba(4,15,37,.72);border:1px solid rgba(121,161,239,.16);border-radius:14px}
.wx-swap-leg-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.wx-swap-leg-head strong{font-size:15px;letter-spacing:.3px}
.wx-swap-leg-amt{color:var(--gold-bright);font-weight:700;font-size:13.5px;font-variant-numeric:tabular-nums}
.wx-swap-leg-role{margin:0;color:#a7b6d4;font-size:12.5px;line-height:1.5}
.wx-swap-addr{display:grid;gap:8px}

.wx-qr-row{display:flex;align-items:center;gap:14px}
.wx-qr-row .wx-qr{width:fit-content;flex:0 0 auto;margin:0}
.wx-chip-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.wx-chip-row .wx-chip{margin:0}

.wx-swap-status{font-size:12.5px;line-height:1.5;padding:10px 12px;border-radius:10px;border:1px solid transparent;word-break:break-word}
.wx-swap-status--todo{color:#c9d4e8;background:rgba(255,255,255,.028);border-color:rgba(121,161,239,.14)}
.wx-swap-status--ok{color:#bff3c9;background:rgba(115,221,152,.08);border-color:rgba(115,221,152,.28)}
.wx-swap-extra{display:grid;gap:8px}
.wx-swap-extra .wx-input{min-height:44px}

.wx-actions--row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wx-actions--row .wx-btn{flex:1 1 auto}
@media(max-width:460px){.wx-actions--row{grid-template-columns:1fr}}

/* PEP "coming soon" — a valid wallet asset that the broker can't route yet.
   Reads as "not live" against the cyan/purple live markets. */
.wx-chip--soon{color:#c9a86a;border-color:rgba(201,168,106,.4);background:rgba(201,168,106,.08);font-weight:800}
.wx-swap-leg--soon{cursor:default;opacity:.82;border-style:dashed;border-color:rgba(201,168,106,.22);background:rgba(4,15,37,.5)}
.wx-swap-leg--soon:hover,.wx-swap-leg--soon:focus{border-color:rgba(201,168,106,.22);background:rgba(4,15,37,.5);box-shadow:none}
.wx-swap-leg--soon .wx-swap-leg-head strong{color:#c9ccd6}

/* ========================================================================
   HazeWallet 2.1 — portfolio-first browser wallet
   Familiar, Phantom-inspired information hierarchy without copying branding:
   utility controls -> total fiat value -> 4 actions -> asset list.
   ======================================================================== */

/* Unlocked-wallet header: utility controls at the corners, quiet brand mark
   centered between them. Auth/create screens keep the full HazeWallet header. */
.wx-head-left-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.wx-head-left-actions:empty{display:none}
.wx-drawer.is-wallet-open .wx-head{
  min-height:58px;padding:10px 14px;justify-content:space-between;
  --wx-head-tint:color-mix(in srgb,var(--haze-accent) 18%,var(--haze-bg,#07112b));
}
.wx-drawer.is-wallet-open .wx-head-copy{display:none}
.wx-drawer.is-wallet-open .wx-head-mark{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:30px;height:30px;border-radius:10px;opacity:.96;
}
.wx-drawer.is-wallet-open .wx-head-tools{margin-left:auto}
.wx-drawer.is-wallet-open .wx-icon-btn{
  width:36px;height:36px;border-radius:12px;
  color:color-mix(in srgb,var(--haze-accent) 82%,#fff 18%);
  background:color-mix(in srgb,var(--wx-head-tint,var(--haze-accent)) 26%,rgba(255,255,255,.07));
  border-color:color-mix(in srgb,var(--wx-head-tint,var(--haze-accent)) 50%,rgba(255,255,255,.12));
}
.wx-drawer.is-wallet-open .wx-icon-btn:hover{
  color:color-mix(in srgb,var(--haze-accent) 55%,#fff 45%);
  background:color-mix(in srgb,var(--wx-head-tint,var(--haze-accent)) 36%,rgba(255,255,255,.12));
  border-color:color-mix(in srgb,var(--haze-accent) 55%,transparent);
}
.wx-drawer.is-wallet-open .wx-icon-btn--qr svg{width:17px;height:17px}

/* Main portfolio screen */
.wx-body--overview{padding:12px 16px 14px;overflow:hidden}
.wx-body--overview .wx-view{display:grid;gap:14px;align-content:start;height:100%}
.wx-portfolio-hero{
  display:grid;justify-items:center;text-align:center;gap:3px;padding:12px 8px 6px;
}
.wx-portfolio-label{color:#7f95bd;font-size:10.5px;font-weight:750;letter-spacing:.04em}
.wx-portfolio-total{
  display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#f8fbff;font-size:clamp(31px,8vw,39px);line-height:1.08;font-weight:880;letter-spacing:-.055em;
  font-variant-numeric:tabular-nums;text-shadow:0 8px 28px rgba(32,96,214,.16);
}
.wx-portfolio-currency{color:#6f86ae;font-size:10px;font-weight:800;letter-spacing:.12em}

/* Phantom-like action rail: the icon is the visual control, not a heavy card. */
.wx-quick-actions--portfolio,.wx-quick-actions--asset{grid-template-columns:repeat(4,1fr);gap:8px}
/* Swapper disabled (wallet.js SWAP_ENABLED=false): three actions fit the row. */
.wx-quick-actions--noswap,.wx-quick-actions--portfolio.wx-quick-actions--noswap,.wx-quick-actions--asset.wx-quick-actions--noswap{grid-template-columns:repeat(3,1fr)}
.wx-quick-actions--portfolio .wx-qa,.wx-quick-actions--asset .wx-qa{
  min-height:62px;padding:4px 2px;border:0;background:transparent;box-shadow:none;gap:6px;
}
.wx-quick-actions--portfolio .wx-qa:hover,.wx-quick-actions--asset .wx-qa:hover{
  transform:none;border-color:transparent;background:transparent;box-shadow:none;
}
.wx-quick-actions--portfolio .wx-qa b,.wx-quick-actions--asset .wx-qa b{
  width:40px;height:40px;border-radius:14px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--haze-accent-deep) 74%,#172444 26%),color-mix(in srgb,var(--haze-accent) 64%,#172444 36%));
  box-shadow:0 9px 24px color-mix(in srgb,var(--haze-accent-deep) 22%,transparent),inset 0 1px rgba(255,255,255,.22);
}
.wx-quick-actions--portfolio .wx-qa:hover b,.wx-quick-actions--asset .wx-qa:hover b{
  transform:translateY(-1px);box-shadow:0 11px 28px color-mix(in srgb,var(--haze-accent-deep) 30%,transparent),inset 0 1px rgba(255,255,255,.28);
}
.wx-quick-actions--portfolio .wx-qa span,.wx-quick-actions--asset .wx-qa span{font-size:11px;font-weight:780;color:#d3def2}

/* Asset list */
.wx-portfolio-assets{display:grid;gap:6px;min-height:0}
.wx-portfolio-section-head{padding:0 2px 2px;align-items:center}
.wx-portfolio-section-head>strong{font-size:13px;color:#f1f6ff}
.wx-portfolio-section-head>small{font-size:9.5px;color:#637ba5}
.wx-portfolio-list,.wx-action-asset-list{display:grid;gap:4px;min-height:0}
.wx-portfolio-row,.wx-action-asset-row{
  width:100%;min-height:54px;display:grid;grid-template-columns:auto auto minmax(0,1.05fr) minmax(72px,.88fr) auto auto;align-items:center;gap:10px;
  padding:7px 8px;border:1px solid transparent;border-radius:13px;background:transparent;color:var(--text);text-align:left;cursor:pointer;
  transition:background .14s ease,border-color .14s ease,transform .14s ease;
}
.wx-portfolio-row:hover,.wx-action-asset-row:hover,.wx-portfolio-row:focus-visible,.wx-action-asset-row:focus-visible{
  background:rgba(255,255,255,.04);border-color:rgba(125,160,231,.13);outline:none;
}
.wx-portfolio-row:active,.wx-action-asset-row:active{transform:scale(.992)}
.wx-coinlogo--portfolio{width:38px;height:38px;box-shadow:0 0 0 1px rgba(255,255,255,.055),0 8px 18px rgba(0,0,0,.22)}
.wx-portfolio-asset-copy{min-width:0;display:grid;gap:2px}
.wx-portfolio-asset-copy>strong{font-size:12.5px;font-weight:780;color:#edf4ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx-portfolio-asset-copy>small{font-size:9.5px;font-weight:750;color:#6e84aa;letter-spacing:.07em}
.wx-portfolio-values{min-width:0;display:grid;justify-items:end;gap:2px;font-variant-numeric:tabular-nums}
.wx-portfolio-spark{display:block;align-self:center;width:100%;min-width:72px;max-width:96px;height:24px;opacity:.98}
.wx-portfolio-spark-svg{display:block;width:100%;height:100%;overflow:visible}
.wx-portfolio-spark-line,.wx-portfolio-spark-shadow{fill:none;stroke-linecap:round;stroke-linejoin:round}
.wx-portfolio-spark-shadow{stroke:rgba(44,223,167,.18);stroke-width:5}
.wx-portfolio-spark-line{stroke:#32ebb0;stroke-width:2.4;filter:drop-shadow(0 0 8px rgba(50,235,176,.28))}
.wx-portfolio-spark-dot{fill:#46f0bd;filter:drop-shadow(0 0 8px rgba(70,240,189,.48))}
.wx-portfolio-spark-svg.is-down .wx-portfolio-spark-shadow{stroke:rgba(255,107,139,.18)}
.wx-portfolio-spark-svg.is-down .wx-portfolio-spark-line{stroke:#ff6b8b;filter:drop-shadow(0 0 8px rgba(255,107,139,.28))}
.wx-portfolio-spark-svg.is-down .wx-portfolio-spark-dot{fill:#ff89a3;filter:drop-shadow(0 0 8px rgba(255,137,163,.48))}
.wx-portfolio-coin-balance{max-width:132px;color:#edf4ff;font-size:11.5px;font-weight:760;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx-portfolio-fiat-balance{max-width:132px;color:#6f86ad;font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx-portfolio-chevron{display:grid;place-items:center;color:#4f6489}
.wx-action-asset-row{grid-template-columns:auto minmax(0,1fr) auto auto}
.wx-portfolio-chevron svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wx-portfolio-empty{padding:16px 10px;text-align:center;color:#7187ab;font-size:10.5px;line-height:1.45}

/* Per-asset page: keep existing real balance/history functionality, but one
   level deeper so the main wallet remains clean. */
.wx-asset-task-head{margin-bottom:-2px}
.wx-balance--detail{padding:14px 15px;border-radius:16px}
.wx-balance--detail .wx-asset-select-wrap{display:none}
.wx-balance--detail .wx-balance-eyebrow{font-size:9.5px;letter-spacing:.12em}
.wx-balance--detail .wx-balance-value{font-size:clamp(24px,6vw,30px)}
.wx-asset-activity{margin-top:1px}
.wx-action-asset-list{padding-top:2px}
.wx-action-asset-row{min-height:58px;background:rgba(255,255,255,.018);border-color:rgba(125,160,231,.08)}

/* The main screen is now portfolio-focused; old overview-only density rules
   for activity/security no longer need to drive its height. */
@media(max-height:640px){
  .wx-body--overview{padding:9px 14px 11px}
  .wx-body--overview .wx-view{gap:9px}
  .wx-portfolio-hero{padding:7px 6px 2px}
  .wx-portfolio-total{font-size:clamp(27px,7vh,34px)}
  .wx-quick-actions--portfolio .wx-qa{min-height:54px;gap:4px}
  .wx-quick-actions--portfolio .wx-qa b{width:34px;height:34px;border-radius:12px}
  .wx-portfolio-row{min-height:47px;padding-block:5px;grid-template-columns:auto auto minmax(0,1fr) minmax(64px,.8fr) auto auto}
  .wx-coinlogo--portfolio{width:32px;height:32px}
  .wx-portfolio-spark{min-width:64px;height:22px}
}
@media(max-height:520px){
  .wx-drawer.is-wallet-open .wx-head{min-height:48px;padding-block:6px}
  .wx-drawer.is-wallet-open .wx-head-mark{width:26px;height:26px}
  .wx-drawer.is-wallet-open .wx-icon-btn{width:32px;height:32px}
  .wx-body--overview{padding:7px 12px 9px}
  .wx-body--overview .wx-view{gap:6px}
  .wx-portfolio-hero{padding:3px 4px 0}
  .wx-portfolio-label{font-size:9px}
  .wx-portfolio-total{font-size:25px}
  .wx-portfolio-currency{font-size:8.5px}
  .wx-quick-actions--portfolio .wx-qa{min-height:45px}
  .wx-quick-actions--portfolio .wx-qa b{width:29px;height:29px;border-radius:10px}
  .wx-quick-actions--portfolio .wx-qa span{font-size:9.5px}
  .wx-portfolio-section-head>small{display:none}
  .wx-portfolio-row{min-height:41px;padding:3px 6px;gap:8px;grid-template-columns:auto auto minmax(0,1fr) minmax(54px,.7fr) auto auto}
  .wx-coinlogo--portfolio{width:28px;height:28px}
  .wx-portfolio-spark{min-width:54px;height:18px}
  .wx-portfolio-asset-copy>strong{font-size:11px}
  .wx-portfolio-asset-copy>small,.wx-portfolio-fiat-balance{font-size:8.5px}
  .wx-portfolio-coin-balance{font-size:10px}
}
@media(max-width:380px){
  .wx-body--overview{padding-inline:11px}
  .wx-portfolio-total{font-size:30px}
  .wx-quick-actions--portfolio{gap:4px}
  .wx-portfolio-row,.wx-action-asset-row{gap:8px;padding-inline:6px}
  .wx-portfolio-row{grid-template-columns:auto auto minmax(0,1fr) minmax(58px,.75fr) auto auto}
  .wx-portfolio-coin-balance,.wx-portfolio-fiat-balance{max-width:105px}
}

/* Mountain haze shared with the page. Animation stays behind interactive content. */
.wx-drawer{isolation:isolate;background:var(--haze-bg,#07112b) url('assets/haze-mountains-photo.webp') center/cover no-repeat}
.wx-drawer:before{inset:0;z-index:-1;background:linear-gradient(180deg,color-mix(in srgb,var(--haze-bg,#07112b) 78%,transparent),color-mix(in srgb,var(--haze-bg,#07112b) 65%,transparent) 52%,color-mix(in srgb,var(--haze-bg,#07112b) 38%,transparent));animation:none}
.wx-drawer:after{content:"";position:absolute;inset:25% -35% -15%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 25% 60%,rgba(154,198,210,.16),transparent 48%),radial-gradient(ellipse at 75% 78%,rgba(157,176,212,.18),transparent 48%);filter:blur(22px);animation:wxValleyFog 24s ease-in-out infinite alternate}
@keyframes wxValleyFog{from{transform:translate3d(-8%,4%,0)}to{transform:translate3d(8%,-4%,0)}}
.wx-drawer.is-wallet-open .wx-head,.wx-drawer-foot{background:rgba(5,15,29,.62)}
.wx-head-mark:focus-visible{outline:2px solid var(--haze-accent,#2ecfff);outline-offset:4px}
/* Explicit columns keep all four sparklines aligned, including missing history. */
.wx-portfolio-row{grid-template-columns:34px 6px minmax(0,1fr) 62px minmax(0,1.15fr) 12px;gap:7px}
.wx-portfolio-row .wx-coinlogo--portfolio{width:34px;height:34px}
.wx-portfolio-row .wx-portfolio-spark{grid-column:4;min-width:0;width:62px;max-width:100%}
.wx-portfolio-row .wx-portfolio-spark[hidden]{display:block!important;visibility:hidden}
.wx-portfolio-row .wx-portfolio-values{grid-column:5;width:100%}
.wx-portfolio-row .wx-portfolio-chevron{grid-column:6}
.wx-portfolio-coin-balance,.wx-portfolio-fiat-balance{max-width:100%;font-variant-numeric:tabular-nums}
.wx-portfolio-row[hidden]{display:none}
.wx-body--overview{overflow-y:auto}
@media(max-width:360px){.wx-portfolio-row{grid-template-columns:28px 5px minmax(0,1fr) 44px minmax(0,1.2fr) 10px;gap:5px;padding-inline:3px}.wx-portfolio-row .wx-portfolio-spark{width:44px}.wx-portfolio-row .wx-coinlogo--portfolio{width:28px;height:28px}.wx-portfolio-coin-balance{font-size:10px}}
@media(prefers-reduced-motion:reduce){.wx-drawer:after{animation:none}}

/* Deep blue atmospheric wallet with fog above the photographic valleys. */
.wx-drawer{background-position:62% center}
.wx-drawer:before{background:linear-gradient(180deg,rgba(2,12,38,.72),color-mix(in srgb,var(--haze-bg,#07112b) 75%,transparent) 48%,rgba(3,19,58,.58))}
.wx-drawer:after{inset:-10% -45%;background:radial-gradient(ellipse at 25% 30%,rgba(35,91,224,.24),transparent 42%),radial-gradient(ellipse at 80% 80%,rgba(81,110,236,.27),transparent 43%),radial-gradient(ellipse at 40% 70%,rgba(141,172,240,.15),transparent 35%);filter:blur(20px)}
.wx-drawer.is-wallet-open .wx-head{background:var(--wx-head-tint,var(--haze-bg,#07112b))}
.wx-portfolio-row{border-bottom-color:rgba(117,156,226,.06)}

/* Guided swap: Choose -> Review -> Track, matching the mountain-glass concept.
   Viewport-aware: sizes track card height (vh ≈ standalone/iframe drawer) via
   clamps so the choose screen fits without scrolling on short embeds; tiered
   media queries tighten discrete blocks (ring/timeline) and hide the subtitle
   only on extreme heights. Empty pairs stay selectable so the liquidity-pool
   composer is reachable (title: "list instead"). The swap view is a closed
   card: overflow hidden + compact internals so nothing scrolls or clips. */
.wx-body--swap{overflow:hidden}
.wx-view.hz-swap{display:flex;flex-direction:column;gap:clamp(6px,1.4vh,12px);min-height:0;height:100%;max-height:100%;overflow:hidden;animation:none;color:#eaf2ff;align-content:start}
.hz-swap-heading{display:grid;gap:clamp(2px,0.4vh,4px)}
.hz-swap-heading h2{font-size:clamp(17px,2.7vh,24px);letter-spacing:-.035em;line-height:1.1;margin:0;color:#f5f8ff}
.hz-swap-heading p{font-size:clamp(10.5px,1.4vh,12px);line-height:1.3;color:#adc4e6;margin:0;overflow-wrap:anywhere}
.hz-swap-back{align-self:start;background:none;border:0;padding:2px 0;color:#9fbee7;cursor:pointer;text-align:left;font-size:11px;font-weight:600;font-family:inherit}
/* Engine tabs: Atomic Swap is live; future swappers append siblings here. */
.hz-swap-engines{display:flex;gap:5px;padding:2px;border-radius:11px;background:rgba(3,13,32,.76);border:1px solid rgba(120,153,224,.13);margin:1px 0 0}
.hz-swap-engine{flex:1 1 0;min-width:0;padding:6px 7px;border:0;border-radius:8px;background:transparent;color:#8fa8cf;font-weight:750;font-size:11px;font-family:inherit;cursor:default;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hz-swap-engine[aria-selected="true"]{background:linear-gradient(112deg,#6e50ff,#2c73ff);color:#fff;box-shadow:0 6px 16px rgba(55,104,255,.24)}
.hz-swap-engine[aria-disabled="true"]{opacity:.45}
.hz-swap-amount-card,.hz-swap-review-card,.hz-swap-pool{padding:clamp(9px,1.7vh,15px) clamp(10px,2vw,14px);border-radius:18px;border:1px solid #6794d44a;background:linear-gradient(140deg,#213959aa,#0b1d35b8);box-shadow:inset 0 1px #ffffff0a;display:grid;gap:clamp(6px,1.2vh,11px);min-height:0}
.hz-swap-pool{gap:clamp(5px,1vh,9px)}
.hz-swap-card-label{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:clamp(12px,1.6vh,13px);font-weight:650}
.hz-swap-card-label small{font-size:9px;font-weight:500;color:#a6bfdf;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hz-swap-amount-line{display:flex;align-items:center;gap:8px;min-width:0}
.hz-swap-coin{width:clamp(27px,4vh,32px);height:clamp(27px,4vh,32px);flex:0 0 auto;box-shadow:none}
.hz-swap-select{appearance:auto;min-width:64px;max-width:90px;border:0;background:#0b1b33;border-radius:8px;color:#fff;padding:7px 3px;font-size:12px;font-weight:700;font-family:inherit;cursor:pointer}
.hz-swap-select option{background:#0b1b33;color:#eaf2ff}
.hz-swap-select option:disabled{color:#5f739c;background:#0a1526}
.hz-swap-amount{width:0;min-width:0;flex:1;text-align:right;border:0;outline:none;background:transparent;color:#f7faff;font-size:clamp(17px,5.6vw,24px);font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-.035em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hz-swap-amount:focus{box-shadow:0 2px #52d5fa}
.hz-swap-reverse{align-self:center;flex:0 0 auto;width:clamp(31px,4.8vh,39px);height:clamp(31px,4.8vh,39px);display:grid;place-items:center;background:#0a213a;border:1px solid #64d8ff;border-radius:50%;box-shadow:0 0 13px #35bcff33;color:#63ddff;font-size:clamp(19px,3.2vh,25px);line-height:1;cursor:pointer;margin:calc(-1 * clamp(3px,0.5vh,4px)) 0}
.hz-swap-note{font-size:10px;line-height:1.45;color:#9eb7dc;margin:0;overflow-wrap:anywhere}
.hz-swap .wx-btn--primary{flex-shrink:0;min-height:clamp(38px,5.5vh,46px);font-size:clamp(13.5px,2vh,15px);border-radius:14px;border:1px solid #80c9ff75;background:linear-gradient(110deg,#15c9eb,#347aff 50%,#a247f4);color:#fff;box-shadow:0 7px 23px #275cff35}
.hz-swap button:disabled{opacity:.55;cursor:wait}
.hz-swap .wx-err:empty{display:none}
.hz-swap-review-card{gap:clamp(6px,1.1vh,9px)}
.hz-swap-label{font-size:11px;color:#adc7e7}
.hz-swap-review-amount{display:flex;align-items:center;gap:10px;font-size:clamp(17px,2.6vh,20px);font-variant-numeric:tabular-nums;color:#f4f7ff;overflow-wrap:anywhere}
.hz-swap-review-amount strong{min-width:0}
.hz-swap-review-card hr{border:0;border-top:1px solid #86add533;width:100%;margin:clamp(3px,0.7vh,6px) 0}
.hz-swap-detail{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:10px;color:#a9c0e0;line-height:1.4}
.hz-swap-detail strong{text-align:right;color:#d2e2f8;font-weight:550;max-width:62%;overflow-wrap:anywhere}
.hz-swap-info{border:1px solid #5e90c83d;border-radius:12px;background:#1c375877;padding:clamp(7px,1.2vh,11px);font-size:11px;line-height:1.45;color:#bfd5f3}
.hz-swap-advanced{border:1px solid #47749d44;background:#10264266;border-radius:10px;padding:clamp(6px,1vh,9px);color:#a9c6ee;font-size:11px;min-height:0;max-height:min(34vh,220px);overflow:auto;overscroll-behavior:contain}
.hz-swap-advanced summary{cursor:pointer;list-style-position:inside}
.hz-swap-advanced[open]{display:grid;gap:8px}
.hz-swap-advanced p{margin-top:8px}
.hz-swap-offer{display:grid;gap:6px;padding:9px 0;border-bottom:1px solid #6b8fb32b}
.hz-swap-market{font-size:10px;line-height:1.4;color:#9eb7dc;margin:0;overflow-wrap:anywhere}
.hz-swap-market.is-above{color:#f0c27a}
.hz-swap-market.is-below{color:#7de0b0}
.hz-swap-market.is-at{color:#9fd0ff}
.hz-swap-amounts{display:grid;gap:5px;margin-top:1px;min-height:0}
.hz-swap-amounts-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10px;color:#a6bfdf;font-weight:600}
.hz-swap-chip-row{display:flex;flex-wrap:wrap;gap:5px;min-height:0}
.hz-swap-chip{appearance:none;border:1px solid #5b86c255;background:#0d2140;color:#cfe0ff;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:650;font-family:inherit;cursor:pointer;line-height:1.3;white-space:nowrap}
.hz-swap-chip:hover:not(:disabled){border-color:#7ab6ff;background:#12325c}
.hz-swap-chip.is-best{border-color:#5ad1ff88;box-shadow:0 0 8px #35bcff22}
.hz-swap-chip.is-active{background:#1a4d7a;border-color:#64d8ff;color:#fff}
.hz-swap-chip.is-auto{border-style:dashed}
.hz-swap-chip:disabled{opacity:.5;cursor:wait}
/* Liquidity pool: post a standing request when the node has no live offer. */
.hz-swap-pool-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:clamp(12px,1.6vh,13px);font-weight:650}
.hz-swap-pool-head small{font-size:9px;font-weight:500;color:#a6bfdf;text-align:right}
.hz-swap-pool-form{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;gap:6px;align-items:end}
.hz-swap-pool-form label{display:grid;gap:3px;font-size:9px;color:#a6bfdf;font-weight:600;min-width:0}
.hz-swap-pool-form .wx-input{min-height:34px;padding:6px 8px;font-size:12px;border-radius:10px;width:100%;min-width:0}
.hz-swap-pool-form .wx-btn{min-height:34px;padding:6px 10px;font-size:11px;border-radius:10px;white-space:nowrap}
.hz-swap-pool-suggest{font-size:9.5px;color:#9fd0ff;margin:0;overflow-wrap:anywhere}
.hz-swap-reqs{display:grid;gap:4px;min-height:0}
.hz-swap-reqs-head{font-size:9.5px;color:#a6bfdf;font-weight:650}
.hz-swap-req{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 7px;border-radius:9px;background:#0d214066;border:1px solid #5b86c233;font-size:10px;color:#cfe0ff;min-width:0}
.hz-swap-req span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hz-swap-req button{flex:0 0 auto;min-height:26px;padding:3px 8px;font-size:10px;border-radius:8px}
.hz-swap-ring{width:clamp(72px,13vh,98px);height:clamp(72px,13vh,98px);border:6px solid #244b6b;border-top-color:#27d2e7;border-right-color:#45a8ff;border-radius:50%;margin:3px auto;display:grid;place-items:center;box-shadow:0 0 24px #27b2e517}
.hz-swap-ring .hz-swap-coin{width:47px;height:47px}
.hz-swap-ring.is-complete{border-color:#34daa0}
.hz-swap-live{text-align:center;font-size:11px;line-height:1.5;color:#b9d5f6;margin:0;overflow-wrap:anywhere}
.hz-swap-timeline{list-style:none;padding:0 5px;margin:0;display:grid;gap:0}
.hz-swap-timeline li{position:relative;display:flex;align-items:center;gap:12px;min-height:clamp(27px,4.2vh,33px);font-size:11px;color:#7e9bbe}
.hz-swap-timeline li:not(:last-child):before{content:"";position:absolute;left:9px;top:24px;bottom:-8px;width:2px;background:#33516d}
.hz-swap-step-dot{z-index:1;display:grid;place-items:center;flex:0 0 20px;height:20px;box-sizing:border-box;border:2px solid #4c6689;border-radius:50%;font-size:12px;background:#10203a}
.hz-swap-timeline .is-current{color:#e7f6ff}.hz-swap-timeline .is-current .hz-swap-step-dot{border-color:#32d8f0;box-shadow:0 0 11px #2de0ff44}
.hz-swap-timeline .is-done{color:#c9efea}.hz-swap-timeline .is-done .hz-swap-step-dot{background:#1baf8b;border-color:#37daad;color:#fff}
.hz-swap :focus-visible{outline:2px solid #67d5ff;outline-offset:3px}
@media(max-height:720px){.wx-view.hz-swap{gap:7px}.hz-swap-heading h2{font-size:21px}.hz-swap-amount-card,.hz-swap-pool{padding:9px 11px;gap:7px}.hz-swap-review-card{padding:11px;gap:5px}.hz-swap-review-amount{font-size:17px}.hz-swap-ring{width:70px;height:70px}.hz-swap-timeline li{min-height:27px}.hz-swap-info{padding:8px}.hz-swap .wx-btn--primary{min-height:40px}.hz-swap-pool-form .wx-input,.hz-swap-pool-form .wx-btn{min-height:29px}.hz-swap-advanced{max-height:min(28vh,180px)}}
@media(max-height:540px){.hz-swap-heading p{display:none}.hz-swap-heading h2{font-size:18px}.wx-view.hz-swap{gap:5px}.hz-swap-amount-card,.hz-swap-pool{padding:7px 9px;gap:5px}.hz-swap-note{font-size:9.5px;line-height:1.3}.hz-swap .wx-btn--primary{min-height:34px}.hz-swap-review-amount{font-size:16px}.hz-swap-ring{width:60px;height:60px}.hz-swap-engine{padding:4px 5px;font-size:10px}.hz-swap-pool-suggest{display:none}.hz-swap-advanced{max-height:min(22vh,140px);padding:5px 7px}.hz-swap-back{font-size:10px}.hz-swap-card-label{font-size:11.5px}.hz-swap-pool-head{font-size:11.5px}.hz-swap-pool-form .wx-input,.hz-swap-pool-form .wx-btn{min-height:28px;font-size:10.5px}.hz-swap-req{padding:4px 6px;font-size:9.5px}.hz-swap-req button{min-height:24px}}
@media(max-width:350px){.hz-swap-card-label{font-size:12px}.hz-swap-select{min-width:58px;font-size:11px}.hz-swap-amount-line{gap:5px}.hz-swap-coin{width:28px;height:28px}.hz-swap-amount{font-size:17px}.hz-swap-pool-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.hz-swap-pool-form .wx-btn{grid-column:1/-1}}
/* Guided swap: keep one primary action visible; allow scrolling on short screens. */
.wx-view.hz-swap{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;padding-bottom:8px}
.hz-swap>*{flex-shrink:0}
.hz-swap-heading h2{font-size:24px;line-height:1.2}
.hz-swap-engine{cursor:pointer;min-height:36px;font-size:12px}
.hz-swap-engine[aria-current="page"]{background:linear-gradient(110deg,#5651ff,#287bff);color:white}
.hz-swap-amount-card,.hz-swap-review-card{background:linear-gradient(135deg,#152e4c,#0a1b33);gap:8px;padding:12px 14px}
.hz-swap-amount-card{min-height:72px}
.hz-swap-state{display:grid;gap:5px;padding:11px 13px;border:1px solid #5279aa66;border-radius:13px;background:#10243b;font-size:12px}
.hz-swap-state.is-matched{border-color:#34d9ae70;background:#083c3677;color:#8af3ce}
.hz-swap-state.is-none{border-color:#edbd5270;background:#43371888;color:#ffe098}
.hz-swap-state.is-error{border-color:#e8929270;color:#ffbcbc}
.hz-swap-price-status{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10px;color:#a8c0df}
.hz-swap-price-status button{flex-shrink:0;color:#72d7fc;padding:5px}
.hz-swap-request-list{display:grid;gap:10px}
.hz-swap-request{display:grid;gap:12px;padding:15px;background:#10253e;border:1px solid #6794d455;border-radius:16px;font-size:14px;overflow-wrap:anywhere}
.hz-swap-badge{font-size:11px;justify-self:start;padding:6px 10px;border:1px solid #e2b34366;border-radius:20px;background:#4b3a1677;color:#ffdd83}
.hz-swap-cancel{min-height:40px;border:1px solid #ff658f;border-radius:12px;background:transparent;color:#ff94b2;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;padding:9px 12px}
.hz-swap .wx-btn--ghost{min-height:36px}
.hz-swap-note{font-size:11px;line-height:1.5}
.hz-swap-detail{font-size:12px}
.hz-swap-advanced{max-height:none;overflow:visible}
.hz-swap-advanced .hz-swap-chip-row{margin-top:10px}
.hz-swap-chip{padding:7px 10px;font-size:11px}
.hz-swap-check{display:flex;align-items:center;gap:9px;font-size:12px;color:#c9dcf5;cursor:pointer}
.hz-swap-check input{accent-color:#4c9dff;width:16px;height:16px;flex:0 0 auto}
.hz-swap-bid-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.hz-swap-bid-actions .wx-btn--primary{min-height:36px;flex:1 1 auto}
.hz-swap-bid-actions .wx-btn--ghost{flex:1 1 auto}
@media(max-height:740px){.wx-view.hz-swap{gap:6px}.hz-swap-amount-card{min-height:64px;padding:9px 12px}.hz-swap-heading h2{font-size:21px}.hz-swap-state{padding:8px 11px}.hz-swap-note{font-size:10px}}