/* Haze Clarity — the shared wallet surface, including the embeddable widget.
   Theme controls remain CSS variables; all assets and fonts stay local. */
:root {
  color-scheme:dark;
  --haze-accent:#c5b6ff;
  --haze-accent-deep:#8c75ed;
  --haze-bg:#101421;
  --bg-drawer:var(--haze-bg);
  --bg-well:#181c2b;
  --text:#f2f1fa;
  --muted:#a0a6bc;
  --gold-bright:var(--haze-accent)
}

html,body {
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:var(--haze-bg);
  color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased
}

*,*:before,*:after {
  box-sizing:border-box
}

button,input,select,textarea {
  font:inherit
}

button,a,input,select,summary {
  touch-action:manipulation
}

button,a {
  -webkit-tap-highlight-color:transparent
}

button {
  color:inherit
}

button:disabled {
  opacity:.42;
  cursor:not-allowed
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline:2px solid var(--haze-accent);
  outline-offset:3px
}

svg {
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round
}

a {
  color:var(--haze-accent);
  text-decoration:none
}

h2,h3,p {
  margin:0
}

h2 {
  font-size:26px;
  line-height:1.18;
  font-weight:600;
  letter-spacing:-.9px
}

h3 {
  font-size:16px;
  line-height:1.3;
  font-weight:580;
  letter-spacing:-.3px
}

input,button {
  min-width:0
}

[hidden] {
  display:none!important
}

.wx-drawer {
  background:radial-gradient(ellipse at 50% -15%,color-mix(in srgb,var(--haze-accent-deep) 18%,transparent),transparent 52%),var(--haze-bg);
  color:var(--text);
  font-family:inherit;
  height:100%;
  height:100dvh;
  max-height:none;
  overflow:hidden;
  isolation:isolate;
  border:0;
  border-radius:0;
  display:flex;
  flex-direction:column
}

.wx-drawer:before,.wx-drawer:after,.wx-head:after {
  display:none
}

.wx-head,.wx-drawer.is-wallet-open .wx-head {
  min-height:68px;
  padding:16px 23px;
  display:flex;
  align-items:center;
  gap:10px;
  flex:none;
  background:transparent;
  border-bottom:1px solid #ffffff08;
  position:relative;
  box-shadow:none
}

.wx-head-mark,.wx-drawer.is-wallet-open .wx-head-mark {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  flex:none;
  padding:0;
  background:none;
  box-shadow:none;
  border:none;
  border-radius:0;
  overflow:visible
}

.wx-head-mark img,.wx-drawer.is-wallet-open .wx-head-mark img {
  width:32px;
  height:32px;
  object-fit:contain;
  filter:none
}

.wx-head-mark>strong {
  font-size:14px
}

.wx-head-copy {
  display:grid;
  flex:1;
  gap:3px
}

.wx-head-title {
  font-size:15px;
  font-weight:650;
  letter-spacing:-.5px;
  color:var(--text);
  font-family:inherit
}

.wx-head-sub {
  font-size:9px;
  color:#8f97b1;
  font-weight:400;
  letter-spacing:.1px
}

.wx-head-left-actions:empty {
  display:none
}

.wx-drawer.is-wallet-open .wx-head-copy {
  display:grid
}

.wx-drawer.is-wallet-open .wx-head-mark {
  margin-left:auto
}

.wx-drawer.is-wallet-open .wx-head-title {
  font-size:15px
}

.wx-drawer.is-wallet-open .wx-head-sub {
  display:none
}

.wx-drawer.is-wallet-open .wx-head-left-actions {
  margin-right:4px
}

.wx-head-tools,.wx-head-actions,.wx-head-left-actions {
  display:flex;
  align-items:center;
  gap:4px
}

.wx-icon-btn,.wx-drawer.is-wallet-open .wx-icon-btn {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:1px solid #ffffff0c;
  background:#ffffff03;
  border-radius:12px;
  color:#bab7d2;
  box-shadow:none;
  padding:8px;
  cursor:pointer
}

.wx-icon-btn svg {
  width:18px;
  height:18px
}

.wx-icon-btn:hover {
  background:#ffffff0c;
  color:var(--haze-accent)
}

.wx-close {
  width:32px;
  height:32px;
  color:#a1a7bb
}

.wx-body,.wx-body--wallet,.wx-body--auth,.wx-body--form,.wx-body--overview {
  flex:1;
  min-height:0;
  height:auto;
  display:block;
  padding:20px 24px;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#4d486b transparent;
  background:transparent
}

.wx-body--overview {
  padding:8px 24px 18px
}

.wx-body--overview .wx-view,.wx-view {
  display:flex;
  flex-direction:column;
  height:auto;
  gap:18px;
  min-height:0;
  padding:0;
  overflow:visible
}

.wx-view>* {
  flex-shrink:0
}

.wx-view:focus {
  outline:0
}

.wx-view-swap>* {
  animation:wxClarityIn .22s ease both
}

.wx-body--overview .wx-view>* {
  animation:none
}

.wx-drawer-foot,.wx-drawer-overlay:not(.wx-drawer-overlay--standalone) .wx-drawer-foot {
  display:flex!important;
  flex:none;
  justify-content:center;
  align-items:center;
  gap:6px;
  min-height:27px;
  padding:6px 14px max(7px,env(safe-area-inset-bottom));
  background:transparent;
  border-top:0;
  color:#7d859e;
  font-size:8px;
  font-weight:400;
  letter-spacing:.05px;
  flex-wrap:wrap
}

.wx-drawer-foot strong {
  color:#989ab0;
  font-weight:400
}

.wx-drawer-foot .wx-foot-brand {
  color:#989ab0;
  font-weight:400;
  text-decoration:none;
  letter-spacing:inherit
}

.wx-drawer-foot .wx-foot-brand:hover,.wx-drawer-foot .wx-foot-brand:focus-visible {
  color:#cfd6ff;
  text-decoration:underline;
  text-underline-offset:2px
}

.wx-drawer-foot .wx-status-dot {
  width:4px;
  height:4px;
  animation:none;
  background:#aaa0cc;
  box-shadow:none
}

.wx-drawer-foot>span:nth-child(n+4) {
  display:none
}

.wx-foot-listing {
  display:none
}

.wx-body::-webkit-scrollbar {
  width:4px
}

.wx-body::-webkit-scrollbar-thumb {
  background:#4d486b;
  border-radius:4px
}

.wx-auth {
  max-width:none;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:0;
  margin:0;
  align-items:stretch;
  justify-content:center;
  min-height:100%
}

.wx-auth-copy {
  text-align:center;
  display:grid;
  gap:11px
}

.wx-auth-copy h2 {
  font-family:inherit;
  font-size:32px;
  font-weight:580;
  letter-spacing:-1.15px;
  line-height:1.12;
  white-space:pre-line;
  color:var(--text)
}

.wx-auth-copy p {
  font-family:inherit;
  font-size:13px;
  line-height:1.75;
  color:var(--muted);
  font-weight:400;
  max-width:320px;
  margin-inline:auto
}

.wx-auth-copy--left {
  text-align:left
}

.wx-auth-copy--left p {
  margin:0
}

.wx-auth-copy--left h2 {
  font-size:28px
}

.wx-auth-kicker {
  font-size:9px;
  font-weight:550;
  letter-spacing:2px;
  color:var(--haze-accent);
  margin-bottom:1px
}

.wx-auth-actions {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px
}

.wx-auth-note {
  font-size:10px;
  line-height:1.6;
  color:#8e94aa;
  text-align:center
}

.wx-auth-link {
  display:block;
  width:fit-content;
  align-self:center;
  color:var(--haze-accent);
  background:none;
  border:0;
  padding:6px;
  cursor:pointer;
  font-size:11px;
  text-align:center;
  text-decoration:none;
  min-height:30px
}

.wx-auth-trust {
  border:0;
  border-top:1px solid #ffffff0c;
  background:none;
  border-radius:0;
  padding:18px 0 0;
  display:flex;
  gap:11px;
  align-items:center;
  color:#a3abc2
}

.wx-auth-trust>span {
  width:25px;
  height:25px;
  background:none;
  border:0;
  display:grid;
  place-items:center
}

.wx-auth-trust svg {
  width:23px;
  height:23px
}

.wx-auth-trust strong {
  font-size:11px;
  color:#bfc2d5;
  font-weight:500
}

.wx-auth-trust small {
  font-size:10px;
  line-height:1.6;
  color:#848fa9;
  display:block;
  margin-top:4px
}

.wx-welcome-art {
  position:relative;
  height:173px;
  width:260px;
  align-self:center;
  display:grid;
  place-items:center;
  isolation:isolate;
  margin-bottom:5px
}

.wx-welcome-art:before {
  content:'';
  position:absolute;
  width:160px;
  height:160px;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--haze-accent-deep) 24%,transparent),transparent 70%);
  filter:blur(10px)
}

.wx-welcome-mark {
  width:92px;
  height:92px;
  object-fit:contain;
  filter:drop-shadow(0 7px 21px #736fe450);
  z-index:1;
  animation:wxFloat 7s ease-in-out infinite
}

.wx-orbit {
  position:absolute;
  border:1px solid #c0b2f61a;
  border-radius:50%;
  width:176px;
  height:176px;
  transform:rotate(-22deg) scaleY(.71)
}

.wx-orbit-two {
  width:250px;
  height:250px;
  transform:rotate(-22deg) scaleY(.57);
  border-style:dashed;
  border-color:#c0b2f615
}

.wx-orbit-coin {
  position:absolute;
  z-index:2;
  filter:drop-shadow(0 4px 9px #0005)
}

.wx-orbit-coin .wx-coinlogo {
  width:29px;
  height:29px;
  opacity:.95
}

.wx-orbit-coin-0 {
  top:13px;
  right:55px
}

.wx-orbit-coin-1 {
  left:18px;
  top:87px
}

.wx-orbit-coin-2 {
  right:17px;
  top:106px
}

.wx-orbit-coin-3 {
  left:73px;
  bottom:0
}

.wx-unlock-art {
  align-self:center;
  position:relative;
  margin:12px 0 18px
}

.wx-unlock-art>img {
  width:93px;
  height:93px;
  filter:drop-shadow(0 6px 23px #736fe42f)
}

.wx-unlock-art>span {
  position:absolute;
  bottom:2px;
  right:-5px;
  width:31px;
  height:31px;
  border-radius:12px;
  background:#242439;
  border:1px solid #aca0d937;
  display:grid;
  place-items:center;
  color:var(--haze-accent)
}

.wx-unlock-art svg {
  width:17px;
  height:17px
}

.wx-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:47px;
  padding:13px 17px;
  border-radius:14px;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  letter-spacing:0;
  cursor:pointer;
  text-decoration:none;
  line-height:1.3;
  transition:background .18s,transform .18s,box-shadow .18s;
  box-shadow:none;
  border:1px solid #ffffff12
}

.wx-btn--primary {
  color:#1b1634;
  background:var(--haze-accent);
  border-color:transparent;
  box-shadow:0 6px 26px color-mix(in srgb,var(--haze-accent-deep) 9%,transparent)
}

.wx-btn--primary:hover {
  background:color-mix(in srgb,var(--haze-accent) 90%,white);
  box-shadow:0 8px 25px color-mix(in srgb,var(--haze-accent-deep) 18%,transparent);
  transform:translateY(-1px)
}

.wx-btn--ghost {
  color:#d0cde3;
  background:#ffffff03;
  border-color:#ffffff10
}

.wx-btn--ghost:hover {
  background:#ffffff09;
  box-shadow:none
}

.wx-btn--danger {
  background:#dc677610;
  border-color:#dd758b35;
  color:#f5a6b9
}

.wx-btn--danger:hover {
  background:#dc677619
}

.wx-btn--sm {
  min-height:35px;
  padding:8px 13px
}

.wx-btn svg {
  width:18px;
  height:18px
}

.wx-btn-tag {
  display:none
}

.wx-back {
  border:0;
  background:none;
  padding:6px 0;
  color:#a8aac1;
  font-size:11px;
  text-align:left;
  cursor:pointer;
  min-height:32px
}

.wx-back:hover {
  color:var(--haze-accent)
}

.wx-input {
  width:100%;
  min-height:48px;
  border-radius:12px;
  border:1px solid #ffffff11;
  padding:13px 14px;
  background:#ffffff04;
  color:var(--text);
  font-family:inherit;
  font-size:14px;
  box-shadow:none;
  line-height:1.4
}

.wx-input::placeholder {
  color:#6f7892
}

.wx-input:focus {
  border-color:color-mix(in srgb,var(--haze-accent) 65%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--haze-accent) 8%,transparent);
  outline:none
}

.wx-input option,.wx-hero-currency option {
  background:#1b2030;
  color:#e8e5f8
}

.wx-label {
  display:grid;
  gap:8px;
  font-size:11px;
  line-height:1.5;
  color:#b3b6cc;
  font-weight:500;
  margin:0
}

.wx-field {
  display:grid;
  gap:6px
}

.wx-password-wrap {
  display:block;
  position:relative;
  margin-top:2px
}

.wx-password-wrap>.wx-input {
  padding-right:64px
}

.wx-input-toggle {
  position:absolute;
  right:5px;
  top:5px;
  height:38px;
  min-width:46px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--haze-accent);
  font-size:10px;
  cursor:pointer;
  padding:5px 9px
}

.wx-input-toggle:hover {
  background:#ffffff08
}

.wx-password-hint {
  font-size:11px;
  color:#9b9fb5;
  line-height:1.6
}

.wx-password-hint.is-ready {
  color:#9bd4bd
}

.wx-onboard,.wx-restore-pane,.wx-restore-form {
  display:flex;
  flex-direction:column;
  gap:18px;
  min-width:0
}

.wx-onboard {
  padding:6px 0 14px
}

.wx-progress {
  display:flex;
  justify-content:space-between;
  list-style:none;
  padding:0;
  margin:3px 0 12px;
  gap:8px
}

.wx-progress li {
  display:flex;
  gap:7px;
  align-items:center;
  font-size:10px;
  color:#737d96
}

.wx-progress li span {
  width:21px;
  height:21px;
  display:grid;
  place-items:center;
  border:1px solid #ffffff15;
  border-radius:50%;
  font-size:9px
}

.wx-progress li.is-active {
  color:var(--haze-accent)
}

.wx-progress li.is-active span {
  background:color-mix(in srgb,var(--haze-accent) 10%,transparent);
  border-color:color-mix(in srgb,var(--haze-accent) 28%,transparent)
}

.wx-callout {
  display:flex;
  gap:11px;
  align-items:flex-start;
  padding:13px 14px;
  background:color-mix(in srgb,var(--haze-accent) 5%,transparent);
  border:1px solid color-mix(in srgb,var(--haze-accent) 12%,transparent);
  border-radius:13px;
  color:#b4b4cf
}

.wx-callout>span {
  flex:0 0 19px;
  color:var(--haze-accent);
  height:20px
}

.wx-callout svg {
  width:19px;
  height:19px
}

.wx-callout p {
  font-size:11px;
  line-height:1.65
}

.wx-backup-art {
  width:68px;
  height:76px;
  display:grid;
  place-items:center;
  color:var(--haze-accent);
  background:linear-gradient(135deg,#aca0ff17,#aca0ff05);
  border:1px solid #aca0ff22;
  border-radius:18px;
  align-self:center;
  margin:5px
}

.wx-backup-art svg {
  width:34px;
  height:34px
}

.wx-backup-download {
  border-color:color-mix(in srgb,var(--haze-accent) 25%,transparent);
  color:var(--haze-accent)
}

.wx-checkline {
  display:flex;
  gap:11px;
  font-size:11px;
  line-height:1.7;
  color:#c3c5d7;
  align-items:flex-start;
  cursor:pointer
}

.wx-checkline input {
  width:18px;
  height:18px;
  accent-color:var(--haze-accent);
  margin:2px 0 0;
  flex:none
}

.wx-segmented {
  display:flex;
  border:1px solid #ffffff0e;
  border-radius:12px;
  padding:4px;
  background:#ffffff03;
  gap:4px
}

.wx-segmented button {
  border:0;
  border-radius:9px;
  background:none;
  padding:11px;
  flex:1;
  font-size:11px;
  color:#959fb8;
  cursor:pointer
}

.wx-segmented button[aria-pressed=true] {
  background:#ffffff0d;
  color:var(--haze-accent)
}

.wx-file-picker {
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  justify-content:center;
  min-height:132px;
  padding:20px;
  border:1px dashed #c5b6ff40;
  border-radius:15px;
  background:#aaa0ff04;
  color:var(--haze-accent);
  cursor:pointer;
  overflow-wrap:anywhere
}

.wx-file-picker svg {
  width:26px;
  height:26px
}

.wx-file-picker strong {
  font-size:12px;
  font-weight:550;
  word-break:break-word
}

.wx-file-picker small {
  font-size:10px;
  color:#8994b1
}

.wx-err {
  color:#f6a4b3;
  font-size:12px;
  line-height:1.65;
  overflow-wrap:anywhere
}

.wx-err:empty {
  display:none
}

.wx-err--ok {
  padding:14px;
  border:1px solid #8bd9b531;
  background:#8bd9b509;
  color:#afe3c8;
  border-radius:13px
}

.wx-fine {
  font-size:11px;
  line-height:1.65;
  color:#989fb6
}

.wx-task-copy {
  font-size:13px;
  color:var(--muted);
  line-height:1.75
}

.wx-center {
  text-align:center
}

.wx-task-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0;
  min-height:30px;
  padding:0
}

.wx-task-head strong {
  font-size:12px;
  font-weight:500;
  color:#c4c4d7
}

.wx-section-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px
}

.wx-portfolio-hero {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:20px 0 5px;
  margin:0;
  border:0;
  background:none;
  box-shadow:none;
  overflow:visible;
  min-height:157px
}

.wx-portfolio-hero:before,.wx-portfolio-hero:after {
  display:none
}

.wx-portfolio-eyebrow {
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:0
}

.wx-portfolio-label {
  font-size:11px;
  font-weight:400;
  letter-spacing:.05px;
  text-transform:none;
  color:#9d9fb8
}

.wx-portfolio-total {
  color:#f4f1ff;
  font-family:inherit;
  font-size:48px;
  font-weight:550;
  letter-spacing:-2px;
  line-height:1.15;
  max-width:100%;
  overflow-wrap:anywhere;
  text-shadow:none;
  font-variant-numeric:tabular-nums
}

.wx-portfolio-currency {
  font-size:10px;
  color:#aeacc7;
  font-weight:400;
  letter-spacing:.5px
}

.wx-hero-currency {
  border:0;
  color:#aaa8c5;
  background:transparent;
  font-size:10px;
  padding:3px 5px;
  cursor:pointer;
  text-align:center;
  max-width:70px
}

.wx-mini-icon {
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border:0;
  border-radius:8px;
  padding:6px;
  color:#9298b1;
  background:transparent;
  cursor:pointer
}

.wx-mini-icon svg {
  width:14px;
  height:14px
}

.wx-mini-icon:hover {
  background:#ffffff09;
  color:var(--haze-accent)
}

.wx-mini-icon[aria-pressed=true] {
  color:var(--haze-accent)
}

.wx-sync-row {
  display:flex;
  align-items:center;
  gap:3px;
  color:#8995ad;
  min-height:23px
}

.wx-sync-row .wx-mini-icon {
  width:23px;
  height:23px;
  padding:5px
}

.wx-sync-row .wx-mini-icon:disabled {
  animation:wxRotate 1.5s linear infinite;
  opacity:.7
}

.wx-portfolio-status {
  font-size:9px;
  line-height:1.5
}

.wx-portfolio-status.is-warning {
  color:#d7bd83
}

.wx-quick-actions--portfolio,.wx-quick-actions--simple,.wx-quick-actions--asset {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  padding:0 12px;
  background:none;
  border:0;
  box-shadow:none;
  margin:0 0 7px
}

.wx-quick-actions--portfolio .wx-qa,.wx-quick-actions--simple .wx-qa {
  border:0;
  border-radius:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:0;
  min-height:77px;
  color:#c9c5df;
  background:none;
  box-shadow:none;
  cursor:pointer
}

.wx-quick-actions--portfolio .wx-qa b,.wx-quick-actions--simple .wx-qa b {
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border:1px solid color-mix(in srgb,var(--haze-accent) 14%,transparent);
  border-radius:17px;
  background:color-mix(in srgb,var(--haze-accent) 7%,transparent);
  color:var(--haze-accent);
  box-shadow:none;
  transition:transform .16s,background .16s
}

.wx-qa:hover {
  transform:none
}

.wx-qa:hover b {
  background:color-mix(in srgb,var(--haze-accent) 14%,transparent);
  transform:translateY(-2px)
}

.wx-qa svg {
  width:21px;
  height:21px;
  stroke-width:1.7
}

.wx-qa span {
  font-size:11px;
  font-weight:500;
  text-transform:none;
  letter-spacing:0
}

.wx-portfolio-assets {
  display:block;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:0
}

.wx-portfolio-section-head {
  min-height:28px;
  margin-bottom:10px;
  padding:0 0 4px;
  border:0
}

.wx-portfolio-section-head>strong {
  font-size:13px;
  font-weight:580;
  color:#dcd9ec;
  letter-spacing:-.2px
}

.wx-assets-caption {
  font-size:9px;
  color:#79859f
}

.wx-portfolio-list {
  display:flex;
  flex-direction:column;
  gap:2px
}

.wx-portfolio-row {
  display:grid;
  grid-template-columns:36px minmax(64px,1fr) 54px minmax(80px,auto);
  gap:10px;
  align-items:center;
  width:100%;
  min-height:65px;
  padding:10px 0;
  background:transparent;
  border:0;
  border-bottom:1px solid #ffffff05;
  border-radius:0;
  cursor:pointer;
  color:inherit;
  text-align:left;
  box-shadow:none
}

.wx-portfolio-row:hover {
  background:#ffffff03;
  transform:none;
  box-shadow:none
}

.wx-portfolio-row .wx-srcdot,.wx-portfolio-row>.wx-status-dot,.wx-portfolio-chevron {
  display:none
}

.wx-coinlogo,.wx-coinlogo--portfolio,.wx-coinlogo--row {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  min-width:0;
  border-radius:50%;
  background:none;
  border:0;
  padding:0;
  box-shadow:none;
  overflow:hidden
}

.wx-coinlogo img {
  width:100%;
  height:100%;
  object-fit:contain
}

.wx-coinlogo--fallback {
  background:#524471;
  color:#e7dfff;
  font-weight:700
}

.wx-portfolio-asset-copy {
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0
}

.wx-portfolio-asset-copy>strong {
  font-size:12px;
  font-weight:550;
  color:#e2dfed;
  letter-spacing:-.1px;
  line-height:1.3
}

.wx-portfolio-asset-copy>small {
  font-size:10px;
  line-height:1.2;
  color:#7e89a3;
  font-weight:400;
  letter-spacing:.2px
}

.wx-portfolio-values {
  display:flex;
  flex-direction:column;
  gap:5px;
  text-align:right;
  min-width:0
}

.wx-portfolio-coin-balance {
  font-size:11px;
  font-weight:550;
  line-height:1.3;
  color:#e2dfed;
  font-variant-numeric:tabular-nums;
  white-space:normal;
  overflow-wrap:anywhere
}

.wx-portfolio-fiat-balance {
  font-size:10px;
  font-weight:400;
  color:#8995ad;
  line-height:1.2
}

.wx-portfolio-row.is-stale .wx-portfolio-coin-balance {
  color:#d7bd83
}

.wx-portfolio-spark {
  display:block;
  min-width:0;
  width:54px;
  height:23px;
  margin:0;
  opacity:.8
}

.wx-portfolio-spark-svg {
  display:block;
  width:54px;
  height:23px;
  overflow:visible;
  filter:none
}

.wx-portfolio-spark-line {
  stroke:#92c7b4;
  stroke-width:1.5;
  fill:none
}

.wx-portfolio-spark-shadow {
  display:none
}

.wx-portfolio-spark-dot {
  display:none
}

.wx-portfolio-spark-svg.is-down .wx-portfolio-spark-line {
  stroke:#c986a3
}

.wx-portfolio-empty {
  font-size:12px;
  color:var(--muted);
  padding:20px 0;
  line-height:1.6
}

.wx-first-funds,.wx-backup-nudge {
  display:flex;
  align-items:center;
  gap:11px;
  border:1px solid #c5b6ff12;
  padding:11px 13px;
  border-radius:13px;
  background:linear-gradient(110deg,#b6a7ff09,transparent);
  width:100%;
  text-align:left;
  cursor:pointer
}

.wx-first-funds>span:first-child,.wx-backup-nudge>span:first-child {
  display:grid;
  place-items:center;
  color:var(--haze-accent);
  width:26px;
  flex:none
}

.wx-first-funds svg,.wx-backup-nudge svg {
  width:21px;
  height:21px
}

.wx-first-funds>span:nth-child(2),.wx-backup-nudge>span:nth-child(2) {
  display:grid;
  gap:4px;
  flex:1
}

.wx-first-funds strong,.wx-backup-nudge strong {
  font-size:11px;
  font-weight:500;
  color:#c9c3df
}

.wx-first-funds small,.wx-backup-nudge small {
  font-size:10px;
  color:#8792ab
}

.wx-first-funds b,.wx-backup-nudge b {
  font-weight:400;
  color:#ad9bdf
}

.wx-backup-nudge {
  background:#c7ab6209;
  border-color:#c7ab6215
}

.wx-bottom-nav {
  display:flex;
  flex:none;
  gap:6px;
  justify-content:space-around;
  align-items:center;
  padding:10px 18px 3px;
  border-top:1px solid #ffffff0b;
  background:color-mix(in srgb,var(--haze-bg) 94%,transparent);
  min-height:60px
}

.wx-bottom-nav button {
  display:flex;
  flex:1;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  padding:5px 4px;
  min-height:43px;
  border:0;
  border-radius:12px;
  background:none;
  color:#737f9a;
  font-size:9px;
  cursor:pointer
}

.wx-bottom-nav svg {
  width:19px;
  height:19px
}

.wx-bottom-nav span {
  display:flex
}

.wx-bottom-nav button[aria-current=page] {
  color:var(--haze-accent);
  background:color-mix(in srgb,var(--haze-accent) 5%,transparent)
}

.wx-action-asset-list {
  display:grid;
  gap:8px
}

.wx-action-asset-row {
  display:grid;
  grid-template-columns:38px 1fr auto;
  align-items:center;
  gap:12px;
  min-height:74px;
  padding:14px;
  border:1px solid #ffffff09;
  background:#ffffff02;
  border-radius:15px;
  cursor:pointer;
  text-align:left;
  box-shadow:none;
  color:inherit
}

.wx-action-asset-row:hover {
  background:#ffffff07
}

.wx-balance--detail,.wx-balance--compact {
  display:flex;
  gap:14px;
  align-items:center;
  position:relative;
  padding:18px 16px;
  border:1px solid #ffffff0c;
  background:#ffffff03;
  box-shadow:none;
  border-radius:18px
}

.wx-balance-logo {
  width:39px;
  height:39px;
  flex:none
}

.wx-balance-content {
  min-width:0;
  flex:1;
  display:grid;
  gap:5px
}

.wx-balance-top,.wx-balance-head {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px
}

.wx-balance-eyebrow {
  font-size:10px;
  color:#909cb6
}

.wx-balance-value {
  font-family:inherit;
  font-size:23px;
  font-weight:550;
  line-height:1.2;
  color:#efebfa;
  letter-spacing:-.5px;
  overflow-wrap:anywhere;
  max-width:100%
}

.wx-balance-sub {
  font-size:8px;
  color:#7889a5;
  line-height:1.5;
  overflow-wrap:anywhere
}

.wx-asset-wrap {
  position:static;
  display:none
}

.wx-fiat-select {
  font-size:11px;
  color:#b8aacd;
  background:none;
  border:0;
  padding:3px 0
}

.wx-fiat-wrap {
  position:relative
}

.wx-fiat-menu {
  background:#1c2132;
  border:1px solid #ffffff18;
  border-radius:13px;
  padding:6px;
  min-width:220px;
  z-index:8;
  max-height:280px;
  overflow:auto
}

.wx-fiat-option {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:37px;
  padding:8px;
  color:#bfc5db;
  font-size:11px;
  background:none;
  border:0;
  width:100%;
  cursor:pointer
}

.wx-fiat-option:hover {
  background:#ffffff07
}

.wx-fiat-option small {
  flex:1;
  font-size:10px
}

.wx-viewall {
  font-size:10px;
  color:var(--haze-accent);
  border:0;
  background:none;
  padding:6px;
  cursor:pointer
}

.wx-activity {
  background:none;
  border:0;
  padding:0
}

.wx-activity>.wx-section-row {
  margin:4px 0 10px
}

.wx-activity .wx-section-row>strong {
  font-size:12px;
  font-weight:500
}

.wx-activity-list {
  display:grid;
  gap:2px
}

.wx-tx {
  display:flex;
  gap:12px;
  align-items:center;
  padding:13px 0;
  border-bottom:1px solid #ffffff07;
  background:none;
  cursor:pointer
}

.wx-tx-ic {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border:1px solid #99c7b11b;
  border-radius:12px;
  color:#a4d0bc;
  background:#7cb7a109;
  flex:none
}

.wx-tx-ic svg {
  width:16px;
  height:16px
}

.wx-tx-ic.is-out {
  background:#b399ee09;
  border-color:#b399ee1b;
  color:#bdacea
}

.wx-tx-copy {
  display:grid;
  gap:5px
}

.wx-tx-copy strong,.wx-tx-copy strong.is-in,.wx-tx-copy strong.is-out {
  font-size:12px;
  font-weight:500;
  color:#dfddec
}

.wx-tx-copy small {
  font-size:10px;
  color:#8e98af
}

.wx-feed-title h2 {
  font-size:26px
}

.wx-feed-title p {
  font-size:11px;
  color:#929ab1;
  line-height:1.5;
  margin-top:7px
}

.wx-activity-filters {
  display:flex;
  gap:7px
}

.wx-activity-filters button {
  font-size:10px;
  flex:1;
  border-radius:10px;
  border:1px solid #ffffff0c;
  background:none;
  padding:10px 7px;
  color:#949bb3;
  cursor:pointer
}

.wx-activity-filters button[aria-pressed=true] {
  color:var(--haze-accent);
  background:#a18bf311;
  border-color:#a18bf326
}

.wx-empty-state {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:15px;
  padding:36px 15px;
  color:#aaaec7
}

.wx-empty-state>span {
  width:53px;
  height:53px;
  display:grid;
  place-items:center;
  border:1px solid #c2acff1b;
  background:#c2acff09;
  border-radius:20px;
  color:var(--haze-accent)
}

.wx-empty-state>span svg {
  width:25px;
  height:25px
}

.wx-empty-state strong {
  font-size:15px;
  font-weight:500;
  color:#ded9f0
}

.wx-empty-state p {
  font-size:12px;
  line-height:1.75;
  max-width:295px
}

.wx-empty-state .wx-btn {
  width:100%
}

.wx-receive-heading,.wx-send-heading {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:9px;
  margin-bottom:2px
}

.wx-receive-heading h2,.wx-send-heading h2 {
  font-size:24px
}

.wx-receive-heading p,.wx-send-heading p {
  font-size:12px;
  color:#949fb5;
  line-height:1.65
}

.wx-receive-heading .wx-coinlogo,.wx-send-heading .wx-coinlogo {
  width:39px;
  height:39px;
  margin-bottom:3px
}

.wx-qr.wx-qr--clean {
  background:#fff;
  border:0;
  padding:13px;
  align-self:center;
  border-radius:21px;
  box-shadow:0 5px 25px #0002;
  width:auto;
  margin:0
}

.wx-qr--clean .wx-qr-svg {
  width:176px;
  height:176px;
  border-radius:5px;
  max-width:100%;
  fill:initial;
  stroke:initial;
  stroke-width:initial
}

.wx-qr--clean svg path {
  stroke:none
}

.wx-network-notice {
  display:flex;
  flex-direction:column;
  gap:5px;
  text-align:center;
  padding:0 4px;
  color:#cdc6e2
}

.wx-network-notice strong {
  font-size:11px;
  font-weight:550
}

.wx-network-notice span {
  font-size:10px;
  line-height:1.6;
  color:#9b91af
}

.wx-address-card {
  display:grid;
  gap:8px;
  background:#ffffff03;
  border:1px solid #ffffff0c;
  border-radius:13px;
  padding:13px 14px;
  text-align:left;
  margin:0;
  min-width:0
}

.wx-address-card small {
  font-size:9px;
  color:#858faa;
  letter-spacing:.1px
}

.wx-address-card code {
  font-size:11px;
  line-height:1.7;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  color:#cbc7e5;
  word-break:break-all;
  user-select:all
}

.wx-request-details {
  font-size:11px;
  color:#b2a5d2
}

.wx-request-details summary {
  cursor:pointer;
  min-height:30px;
  line-height:30px
}

.wx-request-details input {
  margin-top:8px
}

.wx-send-form,.wx-send-review,.wx-buy-content,.wx-buy-form {
  display:flex;
  flex-direction:column;
  gap:18px
}

.wx-amount-card {
  display:grid;
  gap:11px;
  padding:18px;
  border:1px solid #ffffff10;
  border-radius:17px;
  background:#ffffff03
}

.wx-amount-card .wx-input.wx-amount-input {
  min-height:47px;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
  color:var(--text);
  font-size:38px;
  line-height:1.2;
  letter-spacing:-1px;
  font-weight:450;
  border-radius:4px
}

.wx-amount-input:focus {
  outline:0
}

.wx-amount-conversion {
  font-size:11px;
  color:#9a8db9
}

.wx-amount-card .wx-fine {
  font-size:10px;
  color:#9299af;
  overflow-wrap:anywhere
}

.wx-max {
  font-size:10px;
  background:#b9a7f012;
  color:var(--haze-accent);
  border:0;
  border-radius:7px;
  padding:6px 9px;
  cursor:pointer
}

.wx-address-validation {
  font-size:10px;
  min-height:0
}

.wx-address-validation:empty {
  display:none
}

.wx-address-validation.is-valid {
  color:#a1cfb7
}

.wx-review-hero {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  padding:12px 0
}

.wx-review-hero>.wx-coinlogo {
  width:39px;
  height:39px;
  margin-bottom:3px
}

.wx-review-hero small {
  font-size:9px;
  letter-spacing:1.5px;
  color:#9a9ab3
}

.wx-review-hero h2 {
  font-size:29px;
  overflow-wrap:anywhere;
  max-width:100%;
  font-variant-numeric:tabular-nums
}

.wx-review-hero p {
  font-size:12px;
  color:#a5a0ba
}

.wx-review-card {
  display:grid;
  gap:16px;
  background:#ffffff03;
  border:1px solid #ffffff0d;
  border-radius:17px;
  padding:18px
}

.wx-review-destination {
  display:grid;
  gap:8px;
  padding-bottom:16px;
  border-bottom:1px solid #ffffff09
}

.wx-review-destination small {
  font-size:11px;
  color:#929cb6
}

.wx-review-destination code {
  font-size:11px;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  word-break:break-all;
  color:#cdc5e5;
  line-height:1.8
}

.wx-review-row {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  font-size:11px;
  color:#909ab2;
  line-height:1.5
}

.wx-review-row strong {
  color:#ccc8df;
  font-size:11px;
  font-weight:500;
  text-align:right;
  overflow-wrap:anywhere
}

.wx-review-total {
  padding-top:14px;
  border-top:1px solid #ffffff09
}

.wx-review-total strong {
  color:var(--haze-accent);
  font-weight:550
}

.wx-send-result {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:18px;
  padding:30px 0
}

.wx-send-result p {
  font-size:12px;
  line-height:1.8;
  color:#9ea8be
}

.wx-send-result>.wx-btn,.wx-send-result>.wx-address-card {
  width:100%
}

.wx-result-symbol {
  width:82px;
  height:82px;
  display:grid;
  place-items:center;
  border:1px solid #a2d9bb3b;
  background:#a2d9bb0c;
  border-radius:50%;
  font-size:35px;
  color:#b0e1c5;
  margin-bottom:6px;
  animation:wxClarityIn .4s ease
}

.wx-result-symbol.is-pending {
  border-color:#dcc78f3b;
  background:#dcc78f0c;
  color:#dcc78f
}

.wx-buy-unavailable {
  padding:38px 8px
}

.wx-buy-unavailable h2 {
  font-size:27px;
  color:#e8e2f6
}

.wx-buy-content .wx-err p {
  margin-bottom:12px;
  color:#b9b4cf
}

.wx-settings-card {
  background:#ffffff03;
  border:1px solid #ffffff0a;
  box-shadow:none;
  border-radius:16px;
  display:grid;
  gap:15px;
  padding:17px
}

.wx-settings-card>small {
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:1.2px;
  color:#9299b0;
  font-weight:500
}

.wx-settings-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0;
  min-height:32px;
  font-size:11px;
  color:#c2c2d6
}

.wx-settings-select {
  font-size:11px;
  width:160px;
  min-height:38px;
  padding:8px 10px;
  border-radius:9px
}

.wx-settings-backup {
  gap:12px
}

.wx-settings-backup .wx-btn {
  font-size:11px;
  min-height:41px;
  padding:10px
}

.wx-picker-toggle {
  margin:0;
  padding:0;
  background:none;
  border:0
}

.wx-picker-toggle-ui {
  width:34px;
  height:20px;
  border:1px solid #7e80973b;
  background:#ffffff09
}

.wx-picker-toggle-ui:before {
  width:12px;
  height:12px;
  top:3px;
  left:3px;
  background:#8c92a6
}

.wx-picker-toggle input:checked+.wx-picker-toggle-ui {
  background:#c5b6ff37;
  border-color:#c5b6ff50
}

.wx-picker-toggle input:checked+.wx-picker-toggle-ui:before {
  transform:translateX(13px);
  background:var(--haze-accent)
}

.wx-security-strip {
  display:flex;
  align-items:center;
  gap:10px;
  background:none;
  border:0;
  padding:0;
  color:#8d9ab2
}

.wx-security-check {
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border:1px solid #acd3c23b;
  background:transparent;
  border-radius:50%;
  font-size:10px;
  color:#acd3c2
}

.wx-security-strip strong {
  font-size:11px;
  font-weight:500;
  color:#c2c6d9
}

.wx-security-strip small {
  font-size:9px;
  line-height:1.8;
  color:#818fa7;
  display:block
}

.wx-wallet-links {
  padding:10px 0;
  border:0;
  background:none;
  box-shadow:none
}

.wx-wallet-linkrow {
  display:flex;
  justify-content:center;
  gap:10px
}

.wx-wallet-linkrow a {
  font-size:10px;
  color:#a898cf;
  background:none;
  border:0;
  padding:5px;
  min-height:28px
}

.wx-powered {
  text-align:center;
  font-size:8px;
  color:#6f7c93;
  margin:5px 0 0
}

.wx-danger-zone {
  display:flex;
  flex-direction:column;
  gap:10px;
  border-top:1px solid #ffffff0a;
  padding-top:16px
}

.wx-danger-zone small {
  font-size:10px;
  color:#9398b0
}

.wx-danger-zone .wx-btn {
  font-size:11px;
  min-height:42px
}

.wx-toast {
  position:absolute;
  left:22px;
  right:22px;
  bottom:94px;
  padding:14px 18px;
  background:#2a2940;
  border:1px solid #c4b2ff40;
  border-radius:14px;
  color:#ede6ff;
  font-size:12px;
  line-height:1.6;
  box-shadow:0 8px 30px #0006;
  z-index:25;
  text-align:center
}

.wx-busy-screen {
  background:color-mix(in srgb,var(--haze-bg) 92%,transparent);
  backdrop-filter:blur(9px);
  z-index:40
}

.wx-busy-haze,.wx-busy-mote {
  display:none
}

.wx-busy-core {
  width:72px;
  height:72px
}

.wx-busy-core:before {
  display:none
}

.wx-busy-mark {
  width:42px;
  height:42px;
  animation:none;
  filter:none
}

.wx-busy-ring-a {
  border-color:#c5b6ff11;
  border-top-color:var(--haze-accent);
  border-width:1px;
  box-shadow:none
}

.wx-busy-ring-b {
  display:none
}

.wx-busy-label {
  font-size:12px;
  color:#b9b2d3;
  animation:none;
  letter-spacing:0;
  font-weight:450;
  text-transform:none;
  max-width:240px;
  line-height:1.7
}

.wx-drawer.is-busy .wx-bottom-nav {
  pointer-events:none
}

.wx-display-preview .wx-head-mark {
  display:flex;
  width:auto;
  gap:6px
}

.wx-display-preview .wx-head-tools {
  margin-left:auto
}

.wx-display-preview .wx-portfolio-hero {
  min-height:149px
}

.wx-display-preview .wx-quick-actions {
  grid-template-columns:repeat(3,1fr)
}

@keyframes wxClarityIn {
  from {
    opacity:0;
    transform:translateY(7px)
  }
  to {
    opacity:1;
    transform:none
  }
}

@keyframes wxFloat {
  0%,100% {
    transform:translateY(0)
  }
  50% {
    transform:translateY(-6px)
  }
}

@keyframes wxRotate {
  to {
    transform:rotate(360deg)
  }
}

@media(max-width:380px) {
  .wx-head,.wx-drawer.is-wallet-open .wx-head {
    padding-inline:17px
  }
  .wx-body,.wx-body--overview {
    padding-inline:17px
  }
  .wx-portfolio-row {
    grid-template-columns:32px minmax(63px,1fr) 40px minmax(72px,auto);
    gap:8px
  }
  .wx-portfolio-spark,.wx-portfolio-spark-svg {
    width:40px
  }
  .wx-coinlogo--portfolio {
    width:32px;
    height:32px
  }
  .wx-portfolio-coin-balance {
    font-size:10px
  }
  .wx-assets-caption {
    font-size:8px
  }
  .wx-settings-select {
    width:140px
  }
  .wx-auth-copy h2 {
    font-size:28px
  }
}

@media(max-height:680px) {
  .wx-head,.wx-drawer.is-wallet-open .wx-head {
    min-height:57px;
    padding-block:11px
  }
  .wx-body {
    padding-top:15px;
    padding-bottom:15px
  }
  .wx-body--overview {
    padding-top:4px
  }
  .wx-body--overview .wx-view {
    gap:11px
  }
  .wx-portfolio-hero {
    min-height:132px;
    padding-top:12px
  }
  .wx-portfolio-total {
    font-size:41px
  }
  .wx-portfolio-row {
    min-height:57px;
    padding-block:8px
  }
  .wx-quick-actions--portfolio .wx-qa {
    min-height:70px;
    gap:7px
  }
  .wx-quick-actions--portfolio .wx-qa b {
    width:43px;
    height:43px;
    border-radius:15px
  }
  .wx-portfolio-section-head {
    margin-bottom:5px
  }
  .wx-bottom-nav {
    min-height:54px;
    padding-top:6px
  }
  .wx-drawer-foot {
    min-height:21px;
    font-size:7px;
    padding-block:5px
  }
  .wx-welcome-art {
    height:135px;
    width:228px;
    margin:0
  }
  .wx-welcome-mark {
    width:77px;
    height:77px
  }
  .wx-orbit-one {
    width:145px;
    height:145px
  }
  .wx-orbit-two {
    width:208px;
    height:208px
  }
  .wx-orbit-coin-0 {
    top:3px;
    right:47px
  }
  .wx-orbit-coin-1 {
    left:14px;
    top:61px
  }
  .wx-orbit-coin-2 {
    right:16px;
    top:80px
  }
  .wx-orbit-coin-3 {
    left:60px;
    bottom:0
  }
  .wx-welcome-art .wx-coinlogo {
    width:24px;
    height:24px
  }
  .wx-auth {
    gap:14px
  }
  .wx-auth-copy h2 {
    font-size:28px
  }
  .wx-auth-copy p {
    font-size:12px
  }
  .wx-auth-actions {
    margin-top:4px
  }
  .wx-onboard {
    gap:15px
  }
  .wx-progress {
    margin-bottom:5px
  }
  .wx-first-funds,.wx-backup-nudge {
    padding:9px 11px
  }
  .wx-first-funds strong,.wx-backup-nudge strong {
    font-size:10px
  }
  .wx-first-funds small,.wx-backup-nudge small {
    font-size:9px
  }
  .wx-receive-heading h2 {
    font-size:22px
  }
  .wx-body:not(.wx-body--overview) .wx-view {
    gap:15px
  }
  .wx-qr--clean .wx-qr-svg {
    width:150px;
    height:150px
  }
  .wx-unlock-art {
    margin-top:3px;
    margin-bottom:3px
  }
}

@media(pointer:coarse) {
  .wx-input {
    font-size:16px
  }
  .wx-input-toggle {
    font-size:11px
  }
  .wx-settings-select {
    font-size:13px
  }
  .wx-bottom-nav button {
    min-height:45px
  }
  .wx-head {
    padding-top:max(16px,env(safe-area-inset-top))
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}

/* Reset legacy header ordering and compact-surface padding. */
.wx-head-left-actions {
  order:0
}

.wx-head-mark,.wx-drawer.is-wallet-open .wx-head-mark {
  order:1;
  margin:0
}

.wx-head-copy,.wx-drawer.is-wallet-open .wx-head-copy {
  order:2;
  text-align:left
}

.wx-head-tools {
  order:3;
  margin-left:auto
}

.wallet-standalone .wx-body {
  padding-inline:24px
}

.wx-portfolio-total {
  white-space:normal;
  overflow:visible;
  text-overflow:clip
}

.wx-balance-value {
  background:none;
  filter:none;
  -webkit-text-fill-color:currentColor
}

.wx-drawer-foot>span:not(.wx-status-dot) {
  display:none
}

@media(max-width:380px) {
  .wallet-standalone .wx-body {
    padding-inline:17px
  }
}

.wx-drawer.is-wallet-open .wx-head-mark {
  position:static;
  left:auto;
  top:auto;
  transform:none
}

.wx-drawer.is-wallet-open .wx-head {
  justify-content:flex-start
}

.wx-drawer.is-wallet-open .wx-head-copy {
  margin-left:0
}

.wx-drawer.is-wallet-open .wx-head-title {
  font-size:14px
}

@media(max-height:780px) {
  .wx-portfolio-hero {
    min-height:133px;
    padding-block:10px 3px
  }
  .wx-portfolio-total {
    font-size:42px
  }
  .wx-body--overview .wx-view {
    gap:12px
  }
  .wx-portfolio-row {
    min-height:58px;
    padding-block:8px
  }
  .wx-portfolio-section-head {
    margin-bottom:5px
  }
  .wx-quick-actions--portfolio .wx-qa {
    min-height:68px;
    gap:7px
  }
  .wx-quick-actions--portfolio .wx-qa b {
    width:42px;
    height:42px;
    border-radius:15px
  }
  .wx-quick-actions--portfolio {
    margin-bottom:2px
  }
  .wx-first-funds,.wx-backup-nudge {
    padding-block:10px
  }
}

@media(max-height:600px) {
  .wx-portfolio-hero {
    min-height:116px
  }
  .wx-portfolio-total {
    font-size:36px
  }
  .wx-portfolio-row {
    min-height:54px
  }
  .wx-head,.wx-drawer.is-wallet-open .wx-head {
    min-height:53px;
    padding-block:9px
  }
  .wx-body--overview .wx-view {
    gap:9px
  }
}

/* Keep the next control still when an address is checked on blur. */
.wx-address-validation,.wx-address-validation:empty {
  display:block;
  min-height:17px;
  margin:0
}
/* Reserve the full quantity width; never split a tiny BTC amount mid-number. */
.wx-portfolio-row {
  grid-template-columns:36px minmax(0,1fr) 44px max-content;
}
.wx-portfolio-spark,.wx-portfolio-spark-svg {
  width:44px;
}
.wx-portfolio-values {
  max-width:145px;
}
.wx-portfolio-coin-balance,.wx-portfolio-fiat-balance {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:145px;
}
@media(max-width:350px) {
  .wx-portfolio-row {
    grid-template-columns:32px minmax(0,1fr) max-content;
  }
  .wx-portfolio-row .wx-portfolio-spark,.wx-portfolio-row .wx-portfolio-spark[hidden] {
    display:none!important;
  }
}

.haze-custom-background .wx-drawer{background-image:linear-gradient(var(--haze-image-shade),var(--haze-image-shade)),var(--haze-custom-image)!important;background-size:cover;background-position:center;background-repeat:no-repeat}.wx-head-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wx-head-mark img{object-fit:contain}

/* ------------------------------------------------- Support the Network -- */
/* Small glyph on the Pepecoin portfolio row: quiet when off (you CAN
   support), lit while it runs, hidden when the server has it disabled. */
.wx-support-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:15px;
  height:15px;
  flex:0 0 auto;
  margin-left:2px;
  color:#5b6b8c;
  border-radius:50%;
  cursor:pointer
}
.wx-support-badge svg { display:block; width:100%; height:100% }
.wx-support-badge[hidden] { display:none }
.wx-support-badge.is-off { color:#5b6b8c }
.wx-support-badge.is-active { color:#3fd483; filter:drop-shadow(0 0 3px rgba(63,212,131,.65)) }
.wx-support-badge.is-starting { color:#c5b6ff; filter:drop-shadow(0 0 3px rgba(197,182,255,.6)) }
.wx-support-badge.is-degraded { color:#f5c542; filter:drop-shadow(0 0 3px rgba(245,197,66,.6)) }
.wx-support-badge.is-offline,.wx-support-badge.is-error { color:#e8586a; filter:drop-shadow(0 0 3px rgba(232,88,106,.6)) }
.wx-support-badge:focus-visible { outline:2px solid var(--haze-accent); outline-offset:2px }

.wx-support-page { display:grid; gap:14px }
.wx-support-card {
  display:grid;
  gap:12px;
  padding:16px;
  border:1px solid #ffffff10;
  background:#ffffff06;
  border-radius:16px
}
.wx-support-card>small {
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:1.2px;
  color:#9299b0;
  font-weight:500
}
.wx-support-lead { margin:0; font-size:13px; font-weight:600; color:#e7e9f3; line-height:1.55 }
.wx-support-pill {
  font-size:10px;
  font-weight:700;
  padding:4px 11px;
  border-radius:999px;
  background:#ffffff10;
  border:1px solid #ffffff14;
  color:#989fb6;
  white-space:nowrap
}
.wx-support-pill.is-active { color:#3fd483; background:rgba(63,212,131,.1); border-color:rgba(63,212,131,.32) }
.wx-support-pill.is-starting { color:#c5b6ff; background:rgba(197,182,255,.1); border-color:rgba(197,182,255,.32) }
.wx-support-pill.is-degraded { color:#f5c542; background:rgba(245,197,66,.1); border-color:rgba(245,197,66,.32) }
.wx-support-pill.is-offline,.wx-support-pill.is-error { color:#e8586a; background:rgba(232,88,106,.1); border-color:rgba(232,88,106,.32) }
.wx-support-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:26px;
  font-size:11px;
  color:#c2c2d6
}
.wx-support-row strong { color:#e7e9f3; font-weight:600; text-align:right }
.wx-support-error { color:#e8586a }
.wx-support-error:empty { display:none }
.wx-support-details { border-top:1px solid #ffffff0f; padding-top:10px }
.wx-support-details summary { font-size:11px; color:#989fb6; cursor:pointer; padding:4px 0 }
.wx-support-details summary:focus-visible { outline:2px solid var(--haze-accent); outline-offset:2px }
.wx-support-sources { display:grid; gap:6px; margin-top:8px }
.wx-support-source {
  font-size:10px;
  line-height:1.55;
  color:#989fb6;
  padding:6px 9px;
  border-radius:8px;
  background:#ffffff08;
  border-left:2px solid #4a5875;
  word-break:break-word
}
.wx-support-source.is-up { border-left-color:#3fd483 }
.wx-support-source.is-slow { border-left-color:#f5c542 }
.wx-support-source.is-down { border-left-color:#e8586a }
.wx-support-fee-rows { display:grid; gap:8px }
.wx-support-fee-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 11px;
  font-size:11px;
  color:#c2c2d6;
  border:1px solid #ffffff0d;
  border-radius:10px
}
.wx-support-fee-row strong { color:#e7e9f3; font-weight:600 }
.wx-support-fee-row.is-current { border-color:rgba(197,182,255,.4); background:rgba(197,182,255,.07) }
.wx-support-fee-row.is-current span::after { content:" ·"; color:#c5b6ff }

.wx-settings-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  padding:11px 12px;
  font-size:11px;
  color:#c2c2d6;
  text-align:left;
  background:#ffffff08;
  border:1px solid #ffffff10;
  border-radius:12px;
  cursor:pointer
}
.wx-settings-link-label { flex:1; font-weight:600 }
.wx-settings-link-value { color:#989fb6; white-space:nowrap }
.wx-settings-link-chevron { color:#9299b0; font-size:13px }
.wx-settings-link.is-active .wx-settings-link-value { color:#3fd483 }
.wx-settings-link.is-starting .wx-settings-link-value { color:#c5b6ff }
.wx-settings-link.is-degraded .wx-settings-link-value { color:#f5c542 }
.wx-settings-link.is-offline .wx-settings-link-value,.wx-settings-link.is-error .wx-settings-link-value { color:#e8586a }
.wx-settings-link:focus-visible { outline:2px solid var(--haze-accent); outline-offset:2px }

/* Network support — one Browser Support switch + a "what does this do" box */
.wx-support-togglerow {
  display: flex;
  align-items: center;
  gap: 10px
}
.wx-support-togglelabel {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #e7e9f3
}
.wx-support-togglehint {
  font-size: 10px;
  color: #9299b0;
  white-space: nowrap
}
.wx-support-toggle {
  flex: 0 0 auto
}
.wx-support-info {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #ffffff0d;
  border-radius: 12px;
  background: #ffffff04
}
.wx-support-info[hidden] { display: none }
.wx-support-info .wx-fine { margin: 0; font-size: 11px; line-height: 1.6; color: #c2c2d6 }
.wx-support-info-btn {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: #c5b6ff;
  background: #ffffff0a;
  border: 1px solid #ffffff14;
  cursor: pointer
}
.wx-support-info-btn.is-open { background: #c5b6ff22; border-color: #c5b6ff55 }
.wx-support-info-btn:focus-visible { outline: 2px solid var(--haze-accent); outline-offset: 2px }
.wx-support-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #ffffff0d;
  border-radius: 10px;
  font-size: 11px;
  color: #c2c2d6
}
.wx-support-summary-values {
  display: inline-flex;
  align-items: center;
  gap: 8px
}
.wx-support-summary strong { color: #e7e9f3; font-weight: 600 }

/* Buy ships grey until /api/site/config flips buy.enabled: a solid grey
   control (colour, never a translucent wash) with an in-page "Coming soon"
   bubble on hover/focus — no native title, so nothing clips at an edge. */
.wx-qa.wx-qa--soon,
.wx-qa.wx-qa--soon:hover {
  position: relative;
  overflow: visible;
  background: #242a3b;
  border-color: #343b50;
  color: #8d95ab;
  transform: none;
  box-shadow: none;
  cursor: default;
  opacity: 1;
}
.wx-qa.wx-qa--soon b {
  background: #3a4156;
  color: #9aa2b8;
  box-shadow: none;
  filter: none;
}
.wx-qa.wx-qa--soon span { color: #9aa2b8; }
.wx-qa.wx-qa--soon::after {
  content: "Coming soon";
  position: absolute;
  left: 50%;
  top: -32px;
  transform: translateX(-50%);
  padding: 5px 9px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.14);
  background: #0d1322;
  color: #e9ecf7;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(0,0,0,.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 6;
}
.wx-qa.wx-qa--soon:hover::after,
.wx-qa.wx-qa--soon:focus-visible::after { opacity: 1; }
.wx-buy-providers { display: grid; gap: 10px; }
.wx-buy-provider {
  display: block;
  width: 100%;
  text-align: left;
  position: relative;
  padding-right: 34px;
}
.wx-buy-provider strong,
.wx-buy-provider small { display: block; }
.wx-buy-provider small { opacity: .8; font-weight: 500; }
.wx-buy-provider b {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-style: normal;
}
.wx-buy-provider--soon:disabled,
.wx-buy-provider--soon:disabled:hover {
  background: #202636;
  border-color: #303749;
  color: #8d95ab;
  opacity: 1;
  cursor: default;
  transform: none;
  box-shadow: none;
}
.wx-buy-provider--soon:disabled small { color: #7e869c; opacity: 1; }
.wx-onramper-form textarea.wx-input { resize: vertical; }

/* ── Viewport fit system ────────────────────────────────────────────────
   The wallet is a fixed-height shell (100dvh) whose children are sized so
   the whole primary experience is visible at once: no page scrolling, no
   clipped cards, nothing hidden behind the bottom nav. The overview
   flexes — asset rows share whatever height is left after hero, actions
   and nudges take theirs — and secondary views lay out inside the same
   fixed frame; unbounded histories paginate (JS) instead of scrolling.
   Height tiers tighten the chrome progressively; only decorative taglines
   drop out on very short screens, never information. */

/* Shell: head / body / nav / footer are fixed rows; the body is the only
   flexible one, and it never scrolls (auth keeps a hidden-bar fallback). */
.wx-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: clamp(7px, 1.5vh, 18px) clamp(13px, 2vw, 22px);
}
.wx-body--auth { overflow-y: auto; }
.wallet-standalone .wx-body { padding-bottom: clamp(4px, 1.4vh, 16px); }
.wx-body,
.wx-body--wallet,
.wx-body--auth,
.wx-body--form { scrollbar-width: none; }
.wx-body::-webkit-scrollbar,
.wx-body--wallet::-webkit-scrollbar,
.wx-body--auth::-webkit-scrollbar,
.wx-body--form::-webkit-scrollbar { display: none; }
.wx-body--auth .wx-view { overflow: visible; }
.wx-view {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.5vh, 13px);
  overflow: hidden;
}
.wx-view > * { flex: 0 0 auto; min-width: 0; }

/* Overview: hero absorbs spare height on tall screens, actions and nudges
   are fixed rows, the asset list is the flexible one. */
.wx-body--overview { gap: 0; }
.wx-body--overview .wx-view { gap: clamp(4px, 1.2vh, 12px); overflow: hidden; }
.wx-portfolio-hero {
  flex: 1 1 auto;
  min-height: clamp(78px, 12.5vh, 157px);
  max-height: clamp(118px, 21vh, 215px);
  padding: clamp(4px, 1.6vh, 20px) 0 clamp(2px, .6vh, 5px);
  gap: clamp(3px, .8vh, 6px);
}
.wx-portfolio-total {
  font-size: clamp(27px, 5.6vh, 48px);
  letter-spacing: clamp(-2px, -.2vh, -1px);
}
.wx-portfolio-eyebrow, .wx-sync-row { min-height: 0; }
.wx-sync-row { min-height: clamp(17px, 3vh, 23px); }
.wx-quick-actions--portfolio,
.wx-quick-actions--simple,
.wx-quick-actions--asset {
  margin: 0;
  flex: none;
  gap: clamp(6px, 1.4vh, 10px);
}
.wx-quick-actions--portfolio .wx-qa,
.wx-quick-actions--simple .wx-qa {
  min-height: clamp(50px, 8vh, 77px);
  gap: clamp(4px, 1.1vh, 9px);
}
.wx-quick-actions--portfolio .wx-qa b,
.wx-quick-actions--simple .wx-qa b {
  width: clamp(35px, 5.6vh, 48px);
  height: clamp(35px, 5.6vh, 48px);
  border-radius: clamp(12px, 2.2vh, 17px);
}
.wx-backup-nudge,
.wx-first-funds {
  flex: none;
  padding: clamp(6px, 1.4vh, 13px) clamp(10px, 1.8vw, 14px);
}
.wx-backup-nudge strong, .wx-first-funds strong { font-size: clamp(11px, 1.7vh, 13.5px); }
.wx-backup-nudge small, .wx-first-funds small { font-size: clamp(9px, 1.4vh, 11px); }
.wx-portfolio-assets {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wx-portfolio-section-head {
  flex: none;
  margin: 0 0 clamp(3px, .8vh, 8px);
}
.wx-portfolio-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(3px, .65vh, 4px);
  overflow: hidden;
}
.wx-portfolio-row {
  flex: 1 1 0;
  min-height: clamp(30px, 5.4vh, 57px);
  max-height: clamp(64px, 8.6vh, 92px);
  padding-block: clamp(2px, .7vh, 8px);
}

/* Secondary views: bounded cards, lists that flex, never the page. */
.wx-section-row { flex: none; }
.wx-task-head {
  min-height: clamp(30px, 5vh, 46px);
  gap: 8px;
}
.wx-task-head .wx-back { min-height: clamp(28px, 4.6vh, 40px); }
.wx-activity-list,
.wx-activity-list--full {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, .8vh, 8px);
  overflow: hidden;
}
.wx-activity-list .wx-tx {
  flex: 0 0 auto;
  min-height: clamp(40px, 6.4vh, 58px);
}
.wx-activity-list > .wx-fine { flex: none; }
.wx-activity-list .wx-empty-state { flex: 1 1 auto; min-height: 0; }
.wx-action-asset-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(5px, 1vh, 8px);
  overflow: hidden;
}
.wx-action-asset-row {
  flex: 1 1 0;
  min-height: clamp(46px, 8vh, 74px);
  max-height: 88px;
  padding: clamp(8px, 1.6vh, 14px);
}

/* Paginated history controls (segmented alternative to scrolling). */
.wx-pager {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 2px;
}
.wx-pager-btn {
  min-height: clamp(30px, 5vh, 38px);
  padding: 0 15px;
  border: 1px solid #ffffff17;
  border-radius: 11px;
  background: #ffffff09;
  color: #c9c5df;
  font-size: clamp(11px, 1.6vh, 12.5px);
  font-weight: 650;
  cursor: pointer;
}
.wx-pager-btn:hover { background: #ffffff12; }
.wx-pager-btn:disabled { opacity: .38; cursor: default; }
.wx-pager-info {
  font-size: clamp(10px, 1.5vh, 11.5px);
  color: #8995ad;
  font-variant-numeric: tabular-nums;
}

/* Settings: segmented sections so every panel fits the frame. */
.wx-seg {
  flex: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid #ffffff12;
  border-radius: 14px;
  background: #ffffff07;
}
.wx-seg-btn {
  min-height: clamp(32px, 5.2vh, 40px);
  border: 0;
  border-radius: 10px;
  background: none;
  color: #8d95ab;
  font-size: clamp(11px, 1.6vh, 12.5px);
  font-weight: 650;
  cursor: pointer;
}
.wx-seg-btn[aria-selected="true"] {
  background: color-mix(in srgb, var(--haze-accent) 14%, transparent);
  color: #eef2ff;
}
.wx-seg-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 1.6vh, 14px);
  overflow: hidden;
}
.wx-seg-panel > * { flex: 0 0 auto; }
.wx-settings-backup p { font-size: clamp(10px, 1.5vh, 12px); line-height: 1.4; margin: 0; }
.wx-settings-backup .wx-btn { min-height: clamp(34px, 5.6vh, 44px); }
.wx-security-strip { padding: clamp(7px, 1.4vh, 11px) clamp(9px, 1.5vw, 12px); }
.wx-danger-zone { padding-top: clamp(4px, 1vh, 8px); }
.wx-danger-zone .wx-btn { min-height: clamp(34px, 5.6vh, 44px); }
.wx-wallet-links { gap: clamp(4px, 1vh, 7px); }

/* Forms, receive and buy: vh-driven controls that keep every field visible. */
.wx-send-form { gap: clamp(6px, 1.5vh, 13px); }
.wx-receive-heading,
.wx-send-heading {
  gap: clamp(4px, 1vh, 8px);
  padding: clamp(2px, .6vh, 8px) 0;
}
.wx-receive-heading h2,
.wx-send-heading h2 { font-size: clamp(17px, 3.2vh, 26px); }
.wx-receive-heading p,
.wx-send-heading p {
  font-size: clamp(10px, 1.5vh, 12.5px);
  line-height: 1.35;
  margin: 0;
}
.wx-qr { padding: clamp(6px, 1.2vh, 12px); }
.wx-qr--clean .wx-qr-svg {
  width: clamp(112px, 21vh, 176px);
  height: clamp(112px, 21vh, 176px);
}
.wx-network-notice { padding: clamp(7px, 1.4vh, 12px); }
.wx-address-card { padding: clamp(8px, 1.5vh, 14px); }
.wx-request-details summary { min-height: clamp(30px, 5vh, 40px); }
.wx-field { gap: 4px; }
.wx-input { min-height: clamp(36px, 6vh, 46px); }
.wx-btn { min-height: clamp(38px, 6.4vh, 50px); }
.wx-amount-card { padding: clamp(9px, 1.8vh, 16px); }
.wx-callout { padding: clamp(8px, 1.5vh, 13px); }
.wx-onramper-form { gap: clamp(6px, 1.3vh, 11px); }
.wx-onramper-form .wx-input { min-height: clamp(34px, 5.6vh, 44px); }
.wx-buy-providers { gap: clamp(6px, 1.3vh, 10px); }
.wx-buy-provider { padding-block: clamp(9px, 1.8vh, 15px); }
.wx-balance { padding: clamp(10px, 2vh, 18px); gap: clamp(4px, 1vh, 8px); }
.wx-balance-value { font-size: clamp(22px, 4.6vh, 34px); }
.wx-support-widget, .wx-support-card { flex: none; }

/* ── height tiers: tighten chrome before anything can clip ── */
@media (max-height: 760px) {
  .wx-head, .wx-drawer.is-wallet-open .wx-head {
    min-height: clamp(46px, 7.4vh, 58px);
    padding-block: clamp(7px, 1.2vh, 12px);
  }
  .wx-portfolio-hero { max-height: clamp(104px, 19vh, 170px); }
  .wx-bottom-nav {
    min-height: clamp(46px, 7.4vh, 56px);
    padding: clamp(4px, .9vh, 8px) 16px 2px;
  }
  .wx-bottom-nav button { min-height: clamp(34px, 5.6vh, 43px); gap: clamp(3px, .7vh, 5px); }
  .wx-bottom-nav svg { width: clamp(16px, 2.6vh, 19px); height: clamp(16px, 2.6vh, 19px); }
  .wx-drawer-foot {
    min-height: clamp(16px, 2.6vh, 22px);
    padding-block: clamp(3px, .6vh, 6px);
  }
  .wx-portfolio-section-head { margin-bottom: clamp(2px, .6vh, 5px); }
}
@media (max-height: 640px) {
  .wx-head-sub { display: none; }
  .wx-body { padding-block: clamp(5px, 1.2vh, 10px); }
  .wx-body--overview .wx-view { gap: clamp(3px, 1vh, 8px); }
  .wx-view { gap: clamp(5px, 1.3vh, 9px); }
  .wx-portfolio-hero { min-height: clamp(66px, 12vh, 96px); max-height: clamp(88px, 17vh, 130px); }
  .wx-portfolio-label { font-size: 10px; }
  .wx-quick-actions--portfolio .wx-qa,
  .wx-quick-actions--simple .wx-qa { min-height: clamp(46px, 8.6vh, 60px); }
  .wx-portfolio-row { min-height: clamp(28px, 5.6vh, 42px); }
  .wx-portfolio-row .wx-coinlogo--portfolio { width: 30px; height: 30px; }
  .wx-portfolio-asset-copy > strong { font-size: 11.5px; }
  .wx-portfolio-asset-copy > small { font-size: 9px; }
  .wx-task-head { min-height: clamp(28px, 5.4vh, 38px); font-size: 13.5px; }
  .wx-activity-list .wx-tx { min-height: clamp(38px, 6.8vh, 48px); }
  .wx-action-asset-row { min-height: clamp(44px, 8.6vh, 58px); }
  .wx-settings-card { padding: clamp(9px, 2vh, 14px); }
  .wx-receive-heading p, .wx-send-heading p { font-size: 10.5px; }
  .wx-btn { min-height: clamp(36px, 6.8vh, 44px); }
  .wx-input { min-height: clamp(34px, 6.4vh, 42px); }
  .wx-send-form .wx-callout { padding: clamp(6px, 1.4vh, 10px); font-size: 11px; }
  .wx-empty-state { gap: clamp(7px, 2vh, 14px); padding: clamp(12px, 4vh, 30px) 14px; }
  .wx-empty-state > span { width: clamp(40px, 8vh, 53px); height: clamp(40px, 8vh, 53px); border-radius: clamp(13px, 3.4vh, 20px); }
  .wx-empty-state > span svg { width: clamp(19px, 4.4vh, 25px); height: clamp(19px, 4.4vh, 25px); }
  .wx-empty-state h2 { font-size: clamp(17px, 4vh, 24px); }
  .wx-empty-state p { line-height: 1.5; }
}
@media (max-height: 520px) {
  /* Very short / phone landscape: reorganize the hero into one line,
     drop decorative taglines, keep every control and every row. */
  .wx-head, .wx-drawer.is-wallet-open .wx-head {
    min-height: 34px;
    padding-block: 4px;
    gap: 6px;
  }
  .wx-head-mark, .wx-head-mark img { width: 24px; height: 24px; }
  .wx-head-title { font-size: 12.5px; }
  .wx-icon-btn, .wx-drawer.is-wallet-open .wx-icon-btn { width: 30px; height: 30px; padding: 6px; border-radius: 10px; }
  .wx-body { padding-block: clamp(3px, 1.2vh, 6px); }
  .wx-body--overview .wx-view { gap: clamp(2px, 1vh, 4px); overflow: hidden; }
  .wx-portfolio-hero {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2px 8px;
    min-height: 0;
    max-height: none;
    padding: 1px 0;
    flex: none;
  }
  .wx-portfolio-total { order: 1; font-size: clamp(17px, 5.2vh, 24px); letter-spacing: -1px; }
  .wx-portfolio-eyebrow { order: 0; font-size: 7.5px; min-height: 0; }
  .wx-portfolio-label { font-size: 8.5px; }
  .wx-hero-currency { order: 2; font-size: 8.5px; }
  .wx-sync-row { order: 3; width: 100%; justify-content: center; min-height: 11px; }
  .wx-sync-row .wx-portfolio-status { font-size: 7.5px; }
  .wx-sync-row .wx-mini-icon { width: 14px; height: 14px; padding: 3px; }
  .wx-portfolio-eyebrow .wx-mini-icon { width: 18px; height: 18px; padding: 4px; }
  .wx-quick-actions--portfolio .wx-qa,
  .wx-quick-actions--simple .wx-qa { min-height: clamp(31px, 9vh, 40px); gap: 2px; }
  .wx-quick-actions--portfolio .wx-qa b,
  .wx-quick-actions--simple .wx-qa b { width: clamp(19px, 5.6vh, 24px); height: clamp(19px, 5.6vh, 24px); border-radius: clamp(7px, 2.4vh, 10px); }
  .wx-quick-actions--portfolio .wx-qa span,
  .wx-quick-actions--simple .wx-qa span { font-size: 7.5px; }
  .wx-backup-nudge small, .wx-first-funds small { display: none; }  /* tagline only */
  .wx-backup-nudge, .wx-first-funds { padding: 2px 8px; }
  .wx-backup-nudge strong, .wx-first-funds strong { font-size: 10px; }
  .wx-backup-nudge b, .wx-first-funds b { font-size: 10px; }
  .wx-portfolio-section-head { min-height: 0; margin-bottom: 2px; padding-bottom: 1px; }
  .wx-portfolio-section-head strong { font-size: 11px; }
  .wx-portfolio-assets { gap: 3px; }
  .wx-assets-caption { font-size: 8px; }
  .wx-portfolio-list { gap: clamp(2px, .6vh, 4px); }
  .wx-portfolio-row { min-height: clamp(26px, 7.4vh, 33px); max-height: clamp(48px, 12vh, 64px); padding-block: 1px; }
  .wx-portfolio-row .wx-coinlogo--portfolio { width: 22px; height: 22px; }
  .wx-portfolio-asset-copy { gap: 1px; }
  .wx-portfolio-asset-copy > strong { font-size: 10px; }
  .wx-portfolio-asset-copy > small { font-size: 7.5px; letter-spacing: .05em; }
  .wx-portfolio-values { gap: 1px; }
  .wx-portfolio-coin-balance { font-size: 10px; }
  .wx-portfolio-fiat-balance { font-size: 8px; }
  .wx-portfolio-spark { height: 18px; }
  .wx-portfolio-chevron svg { width: 12px; height: 12px; }
  .wx-bottom-nav { min-height: clamp(34px, 9.6vh, 42px); padding-top: 2px; }
  .wx-bottom-nav button { min-height: 26px; font-size: 8px; gap: 2px; }
  .wx-bottom-nav svg { width: 14px; height: 14px; }
  .wx-drawer-foot { min-height: 11px; padding-block: 2px; font-size: 7.5px; }
  .wx-task-head { min-height: clamp(24px, 7vh, 32px); }
  .wx-empty-state { gap: clamp(5px, 1.5vh, 9px); padding: clamp(8px, 2.6vh, 16px) 10px; }
  .wx-empty-state > span { width: clamp(32px, 8vh, 44px); height: clamp(32px, 8vh, 44px); border-radius: clamp(11px, 3.2vh, 16px); }
  .wx-empty-state > span svg { width: clamp(16px, 4.4vh, 21px); height: clamp(16px, 4.4vh, 21px); }
  .wx-empty-state h2 { font-size: clamp(15px, 4.4vh, 20px); }
  .wx-empty-state p { font-size: 10.5px; line-height: 1.45; }
  .wx-empty-state .wx-fine { font-size: 9.5px; line-height: 1.45; }
  .wx-auth-copy h2 { font-size: clamp(14px, 4.2vh, 17px); }
  .wx-auth-copy p { font-size: 10px; }
  .wx-auth-copy { gap: 4px; }
  .wx-receive-heading p, .wx-send-heading p, .wx-feed-title p { display: none; }  /* decorative taglines */
  .wx-receive-heading h2, .wx-send-heading h2 { font-size: clamp(15px, 4.4vh, 18px); }
  .wx-qr--clean .wx-qr-svg { width: clamp(84px, 30vh, 124px); height: clamp(84px, 30vh, 124px); }
  .wx-input { min-height: 34px; }
  .wx-btn { min-height: 34px; }
  .wx-seg-btn { min-height: 30px; }
  .wx-amount-card { padding: clamp(5px, 1.4vh, 8px); }
  .wx-callout { padding: clamp(4px, 1.2vh, 7px) 8px; font-size: 10px; }
  .wx-activity-list .wx-tx { min-height: clamp(34px, 9.6vh, 44px); }
  .wx-action-asset-row { min-height: clamp(40px, 12vh, 54px); }
  .wx-pager-btn { min-height: 30px; padding: 0 12px; }
  .wx-receive-heading, .wx-send-heading { padding: 0; gap: 3px; }
  .wx-address-card, .wx-network-notice { padding: 7px 9px; }
}

/* ── Viewport fit round 2: secondary views (receive/send/asset/settings/buy).
   Same contract as round 1: nothing scrolls, nothing clips, every control
   stays reachable; layout reorganises (side-by-side columns, action grids)
   before anything is allowed to shrink into illegibility. ── */

/* The legacy max-height:680 block hard-codes a 15px gutter on every
   non-overview view, which made Receive/Send/Settings overflow. One clamp
   reclaims it at every height (same specificity, later in the file). */
.wx-body:not(.wx-body--overview) .wx-view {
  gap: clamp(5px, 1.2vh, 10px);
}

/* Receive: QR sits beside its network notice + address card whenever the
   frame allows; Copy and Share share the last row. Narrow frames stack.
   flex-direction must reset to row — the viewport-fit shell sets .wx-view
   to column (specificity 0,1,0) and column+wrap packs items side by side. */
.wx-body--receive .wx-view {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: start;
  column-gap: clamp(6px, 1vw, 14px);
}
.wx-body--receive .wx-task-head,
.wx-body--receive .wx-receive-heading {
  flex: 1 1 100%;
}
.wx-body--receive .wx-qr {
  flex: 0 0 auto;
}
.wx-body--receive .wx-network-notice,
.wx-body--receive .wx-address-card,
.wx-body--receive .wx-request-details {
  flex: 1 1 132px;
  min-width: 124px;
}
.wx-body--receive .wx-err {
  flex: 1 1 100%;
}
.wx-body--receive .wx-btn--primary,
.wx-body--receive .wx-btn--ghost {
  flex: 1 1 124px;
}

/* Send: recipient and amount sit side by side when there is width for it;
   heading, callout, error and the review button stay full-row. */
.wx-send-form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: start;
  gap: clamp(6px, 1.5vh, 13px) clamp(8px, 1vw, 16px);
}
.wx-send-form > .wx-task-head,
.wx-send-form > .wx-send-heading,
.wx-send-form > .wx-callout,
.wx-send-form > .wx-err,
.wx-send-form > .wx-btn--primary {
  flex: 1 1 100%;
}
.wx-send-form > .wx-field {
  flex: 1 1 236px;
  min-width: 200px;
}
.wx-send-form > .wx-amount-card {
  flex: 1 1 236px;
  min-width: 220px;
}

/* Asset detail: the embedded history flexes into whatever space the frame
   has left and paginates instead of pushing the screen past the nav. */
.wx-asset-activity {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: clamp(3px, .8vh, 8px);
}
.wx-asset-activity .wx-section-row {
  flex: none;
}
.wx-asset-activity .wx-activity-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.wx-asset-activity .wx-pager {
  flex: none;
}

/* Settings backup: the four actions live in their own grid so the panel
   stays inside its flexed height (two-up on narrow, a row when wide). */
.wx-settings-backup {
  gap: clamp(6px, 1.4vh, 12px);
}
.wx-settings-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(5px, 1.2vh, 8px);
}
@media (min-width: 700px) {
  .wx-settings-actions {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Buy outreach form: a grid so fields pair up instead of stacking into a
   page-height column; copy, error and the fine print span every track. */
.wx-buy-content {
  gap: clamp(5px, 1.2vh, 10px);
}
.wx-onramper-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  align-content: start;
  gap: clamp(5px, 1.1vh, 10px) clamp(7px, 1vw, 14px);
}
.wx-onramper-form > .wx-auth-copy,
.wx-onramper-form > .wx-err,
.wx-onramper-form > .wx-fine {
  grid-column: 1 / -1;
}
.wx-onramper-form .wx-label {
  min-width: 0;
}
.wx-onramper-form textarea.wx-input {
  height: clamp(52px, 12vh, 74px);
}
.wx-buy-provider {
  padding-block: clamp(6px, 1.8vh, 15px);
}

/* ── height tiers, round 2 ── */
@media (max-height: 640px) {
  /* Decorative taglines go; headings keep their copy. */
  .wx-receive-heading p,
  .wx-send-heading p { display: none; }
  .wx-receive-heading,
  .wx-send-heading { gap: 3px; padding: 0; }
  .wx-receive-heading h2,
  .wx-send-heading h2 { font-size: clamp(15px, 3vh, 18px); }
  .wx-receive-heading .wx-coinlogo,
  .wx-send-heading .wx-coinlogo { width: 32px; height: 32px; margin-bottom: 0; }
  .wx-qr { padding: clamp(4px, .9vh, 8px); }
  .wx-qr--clean .wx-qr-svg {
    width: clamp(88px, 23vh, 132px);
    height: clamp(88px, 23vh, 132px);
  }
  .wx-network-notice { padding: 6px 8px; gap: 3px; }
  .wx-network-notice strong { font-size: 10.5px; }
  .wx-network-notice span { font-size: 9.5px; line-height: 1.4; }
  .wx-address-card { padding: 6px 8px; }
  .wx-address-card code { font-size: 10.5px; }
  .wx-request-details summary { min-height: clamp(26px, 4.6vh, 32px); font-size: 11px; }
  .wx-auth-copy { gap: 3px; }
  .wx-auth-copy h2 { font-size: clamp(15px, 3.4vh, 19px); }
  .wx-auth-copy p { font-size: 10px; line-height: 1.45; }
  .wx-task-copy { font-size: 10.5px; line-height: 1.4; margin: 0; }
  .wx-fine { font-size: 9.5px; line-height: 1.4; }
  .wx-settings-backup h3 { font-size: clamp(13px, 3.4vh, 16px); }
  .wx-onramper-form textarea.wx-input { height: clamp(50px, 11vh, 66px); }
}
@media (max-height: 520px) {
  .wx-action-asset-row { min-height: clamp(36px, 10.5vh, 50px); }
  .wx-balance { padding: clamp(6px, 1.8vh, 10px); gap: 3px; }
  .wx-balance-logo { width: clamp(24px, 7vh, 32px); height: clamp(24px, 7vh, 32px); }
  .wx-balance-value { font-size: clamp(18px, 5.4vh, 24px); }
  .wx-balance-eyebrow { font-size: 8.5px; }
  .wx-balance-sub { font-size: 9px; }
  .wx-support-card { padding: clamp(6px, 1.8vh, 9px) clamp(7px, 2vw, 10px); gap: clamp(3px, .9vh, 5px); }
  .wx-support-card .wx-btn { min-height: 30px; }
  .wx-settings-card { padding: clamp(7px, 2vh, 11px); gap: clamp(5px, 1.3vh, 9px); }
  .wx-settings-actions .wx-btn { min-height: clamp(30px, 8.4vh, 36px); padding: 6px; font-size: 10.5px; }
  .wx-security-strip { padding: 5px 7px; gap: 6px; }
  .wx-security-strip strong { font-size: 10px; }
  .wx-security-strip small { font-size: 8.5px; }
  .wx-amount-card { gap: 5px; }
  .wx-amount-conversion,
  .wx-amount-card .wx-fine { font-size: 9.5px; }
  .wx-callout p { font-size: 9.5px; line-height: 1.4; }
  .wx-receive-heading .wx-coinlogo,
  .wx-send-heading .wx-coinlogo { width: 26px; height: 26px; }
  .wx-qr--clean .wx-qr-svg {
    width: clamp(76px, 26vh, 110px);
    height: clamp(76px, 26vh, 110px);
  }
  .wx-network-notice { font-size: 10px; }
}

/* ── Viewport fit round 3: asset top row, short-frame control padding ── */

/* Asset detail: balance and the Support-the-Network card share one row
   whenever the frame is wide enough for both, so the paginated history
   keeps the leftover height instead of getting squeezed to nothing. */
.wx-asset-toprow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(6px, 1vw, 12px);
}
.wx-asset-toprow > .wx-balance {
  flex: 1 1 300px;
  min-width: min(260px, 100%);
}
.wx-asset-toprow > .wx-support-card {
  flex: 1 1 300px;
  min-width: min(260px, 100%);
}

/* Outreach: the primary action spans every track at any width (so the
   label never wraps inside a half-width cell); on narrow frames the
   address card gets a full row too. */
.wx-onramper-form > .wx-btn--primary {
  grid-column: 1 / -1;
}
@media (max-width: 679px) {
  .wx-onramper-form > .wx-address-card { grid-column: 1 / -1; }
}

@media (max-height: 640px) {
  /* Controls keep their minimum heights but shed desktop padding. */
  .wx-input { padding-block: clamp(7px, 1.7vh, 13px); }
  .wx-btn { padding-block: clamp(7px, 1.7vh, 13px); }
  .wx-send-form .wx-amount-card { gap: clamp(5px, 1.3vh, 9px); }
  .wx-amount-card .wx-input.wx-amount-input {
    font-size: clamp(24px, 5.4vh, 34px);
    min-height: clamp(30px, 7vh, 40px);
  }
  .wx-send-form .wx-callout { font-size: 10.5px; line-height: 1.4; }
  .wx-receive-heading .wx-coinlogo,
  .wx-send-heading .wx-coinlogo { width: 28px; height: 28px; }
  .wx-balance { padding: clamp(6px, 1.6vh, 12px); gap: 4px; }
  .wx-balance-head { gap: 3px; }
  .wx-balance-fiatrow { min-height: clamp(16px, 4vh, 22px); }
  .wx-balance-eyebrow { font-size: 9px; }
  .wx-balance-sub { font-size: 8px; }
  .wx-support-card { padding: clamp(7px, 1.8vh, 12px) clamp(8px, 2vw, 13px); gap: clamp(5px, 1.3vh, 9px); }
  .wx-support-card > small { font-size: 8.5px; }
  .wx-support-togglerow { gap: 6px; }
  .wx-support-togglelabel { font-size: 11.5px; }
  .wx-support-togglehint { font-size: 9px; }
  .wx-support-summary { padding: clamp(5px, 1.2vh, 8px) clamp(7px, 1.6vw, 10px); gap: 6px; font-size: 10.5px; }
  .wx-auth-copy h2 { font-size: clamp(15px, 3vh, 17px); }
  .wx-onramper-form { row-gap: clamp(4px, .9vh, 7px); }
  .wx-onramper-form .wx-label { gap: 5px; }
  .wx-onramper-form .wx-input { padding-block: clamp(6px, 1.5vh, 13px); }
  .wx-onramper-form textarea.wx-input { height: clamp(44px, 9.5vh, 60px); }
  .wx-onramper-form .wx-address-card { gap: 6px; }
}

/* ── Viewport fit round 4: the last few pixels on Send and outreach ── */
@media (max-height: 640px) {
  .wx-send-form { gap: clamp(5px, 1.2vh, 11px) clamp(7px, 1vw, 14px); }
  .wx-send-form .wx-field .wx-label { gap: 5px; }
  .wx-send-form .wx-callout { padding: clamp(5px, 1.2vh, 9px); line-height: 1.35; }
  .wx-amount-card { padding: clamp(7px, 1.5vh, 13px); }
  .wx-receive-heading .wx-coinlogo,
  .wx-send-heading .wx-coinlogo { width: 24px; height: 24px; }
  .wx-onramper-form .wx-input { padding-block: clamp(5px, 1.3vh, 12px); }
  .wx-onramper-form .wx-label { gap: 4px; }
  .wx-onramper-form textarea.wx-input { height: clamp(42px, 8.5vh, 58px); }
  .wx-onramper-form .wx-address-card { padding: 5px 7px; gap: 4px; }
  .wx-onramper-form .wx-address-card code { font-size: 10px; }
  .wx-fine { line-height: 1.35; }
  .wx-auth-copy h2 { font-size: clamp(15px, 2.9vh, 16px); }
}

/* Short frames: compact history rows, section chrome and pager buttons so
   the activity list always fits at least one full row above the bottom nav.
   Row height (padding + copy) and pager bar must sum under the section
   budget; asset-view actions and balance give the section its headroom. */
@media (max-height: 680px) {
  .wx-tx { padding-block: 3px; }
  .wx-tx-copy { gap: 3px; }
  .wx-activity-list .wx-tx { min-height: clamp(34px, 7.5vh, 44px); }
  .wx-asset-activity { gap: 2px; }
  .wx-asset-activity .wx-section-row { min-height: 0; padding-bottom: 0; margin: 0; }
  .wx-asset-activity .wx-section-row strong { font-size: clamp(10.5px, 1.9vh, 12.5px); }
  .wx-asset-activity .wx-viewall { min-height: clamp(18px, 3vh, 24px); padding-block: 0; }
  .wx-pager { padding-top: 0; gap: 4px; }
  .wx-pager-btn { min-height: clamp(20px, 4vh, 26px); padding: 0 9px; font-size: clamp(9.5px, 1.4vh, 11px); }
  .wx-quick-actions--asset .wx-qa {
    min-height: clamp(40px, 9vh, 54px);
    padding-block: clamp(4px, 1vh, 8px);
    gap: clamp(2px, 0.7vh, 5px);
  }
  .wx-quick-actions--asset .wx-qa b {
    width: clamp(20px, 4.6vh, 30px);
    height: clamp(20px, 4.6vh, 30px);
  }
  .wx-asset-task-head { min-height: clamp(22px, 4.4vh, 40px); }
  .wx-asset-task-head .wx-back { min-height: clamp(20px, 4.2vh, 30px); padding-block: clamp(2px, 0.8vh, 6px); }
  .wx-balance { padding: clamp(4px, 1.1vh, 9px); gap: clamp(2px, 0.6vh, 5px); }
  .wx-balance-head, .wx-balance-top { gap: clamp(2px, 0.5vh, 4px); }
  .wx-balance-value { font-size: clamp(16px, 4vh, 24px); line-height: 1.05; padding-block: 0; min-height: 0; }
  .wx-balance-eyebrow { font-size: 8.5px; }
  .wx-balance-fiatrow { min-height: clamp(13px, 3vh, 18px); }
  .wx-balance-sub { font-size: 8.5px; }
  .wx-balance-logo { width: clamp(22px, 6vh, 30px); height: clamp(22px, 6vh, 30px); }
  .wx-support-card { padding: clamp(6px, 1.5vh, 11px); gap: clamp(3px, 0.9vh, 7px); }
  .wx-asset-toprow { gap: clamp(4px, 1vh, 8px); }
}

/* Token balances and reviews have variable height. Scroll the content region
   instead of shrinking coin rows; wallet chrome stays outside this region. */
.wx-body--overview,
.wx-body:has(> .wx-view > .hz-token-assets),
.wx-body:has(> .wx-view > .hz-token-operations) {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #4d486b transparent;
}
.wx-body--overview > .wx-view,
.wx-body > .wx-view:has(> .hz-token-assets),
.wx-body > .wx-view:has(> .hz-token-operations) {
  flex: 0 0 auto;
  height: auto;
  overflow: visible;
}
.wx-body--overview .wx-portfolio-assets,
.wx-body--overview .wx-portfolio-list {
  flex: 0 0 auto;
  overflow: visible;
}
.wx-body--overview .wx-portfolio-row {
  flex: 0 0 auto;
  min-height: 52px;
  max-height: none;
}
.wx-body--overview .wx-portfolio-row { min-height: 68px; }
.wx-body--overview .wx-portfolio-row .wx-portfolio-spark {display:block!important;}
.wx-body--overview .wx-portfolio-row .wx-coinlogo {grid-column:1;grid-row:1;}
.wx-body--overview .wx-portfolio-row .wx-portfolio-asset-copy {grid-column:2;grid-row:1;}
.wx-body--overview .wx-portfolio-row .wx-portfolio-spark {grid-column:3;grid-row:1;}
.wx-body--overview .wx-portfolio-row .wx-portfolio-values {grid-column:4;grid-row:1;}
@media(max-width:350px) {
  .wx-body--overview .wx-portfolio-row {grid-template-columns:32px minmax(0,1fr) 40px minmax(65px,90px);gap:7px;}
  .wx-body--overview .wx-portfolio-row .wx-portfolio-spark {width:40px;min-width:0;}
  .wx-body--overview .wx-portfolio-row .wx-portfolio-values {max-width:90px;}
}
.wx-portfolio-asset-copy > .wx-portfolio-unit-price {font-size:9px;letter-spacing:0;color:#aeb6ce;line-height:1.25;white-space:normal;}
.wx-hosted-market {display:grid;justify-items:center;gap:9px;padding:18px 4px;}
.wx-hosted-market h2 {font-size:20px;margin:0;}
.wx-hosted-market .wx-coinlogo {width:44px;height:44px;border-radius:0;overflow:visible;}
.wx-hosted-price {font-size:24px;}
.wx-hosted-trend {width:100%;max-width:420px;min-height:68px;}
.wx-hosted-trend svg {display:block;width:100%;height:90px;overflow:visible;}
.wx-hosted-networks {display:grid;gap:12px;}
.wx-body--hosted-asset {overflow-y:auto;overflow-x:hidden;}
.wx-hosted-detail {display:flex;flex-direction:column;flex:1 1 auto;min-height:0;gap:clamp(5px,1.2vh,10px);}
.wx-hosted-detail.is-task {overflow-y:auto;}
.wx-asset-network {width:auto;max-width:100%;min-height:28px;padding:3px 8px;font-size:12px;}
.wx-action-asset-list--all {flex:1 1 auto;overflow-y:auto;overflow-x:hidden;align-content:start;}
.wx-body--hosted-asset > .wx-view {height:auto;flex:0 0 auto;overflow:visible;}
.wx-body--overview::-webkit-scrollbar,
.wx-body:has(> .wx-view > .hz-token-assets)::-webkit-scrollbar,
.wx-body:has(> .wx-view > .hz-token-operations)::-webkit-scrollbar {
  display: block;
  width: 5px;
}
.wx-body--overview::-webkit-scrollbar-thumb,
.wx-body:has(> .wx-view > .hz-token-assets)::-webkit-scrollbar-thumb,
.wx-body:has(> .wx-view > .hz-token-operations)::-webkit-scrollbar-thumb {
  background: #4d486b;
  border-radius: 5px;
}

/* Keep payment actions inside the viewport. Only the details scroll when
   error text, zoom or the on-screen keyboard leaves less vertical space. */
.wx-body--send > .wx-view { min-height: 0; overflow: hidden; }
.wx-body--send .wx-send-form,
.wx-body--send .wx-send-review {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  height: 100%;
  gap: 0;
  overflow: hidden;
}
.wx-send-content {
  display: grid;
  align-content: start;
  gap: clamp(8px, 1.5vh, 14px);
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #6e668d transparent;
  padding: 0 3px 12px 0;
  scroll-padding-block: 12px;
}
.wx-send-content > * { min-width: 0; max-width: 100%; }
.wx-send-content .wx-field,
.wx-send-content .wx-amount-card { min-width: 0; }
.wx-send-content .wx-send-heading,
.wx-send-content .wx-review-hero {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 3px 12px;
  align-items: center;
  text-align: left;
  padding-block: 4px;
}
.wx-send-content .wx-send-heading .wx-coinlogo,
.wx-send-content .wx-review-hero .wx-coinlogo {
  grid-column: 1;
  grid-row: 1 / span 3;
  width: 32px;
  height: 32px;
  margin: 0;
}
.wx-send-content .wx-send-heading :is(h2, p),
.wx-send-content .wx-review-hero :is(small, h2, p) { grid-column: 2; margin: 0; }
.wx-send-content .wx-review-hero h2 { font-size: 26px; }
.wx-send-content .wx-review-card { gap: 9px; padding: 12px; }
.wx-send-content .wx-review-destination { gap: 4px; padding-bottom: 9px; }
.wx-send-content .wx-review-destination code,
.wx-send-content .wx-err { overflow-wrap: anywhere; }
.wx-send-actions {
  display: grid;
  flex: none;
  min-width: 0;
  padding-top: 10px;
  border-top: 1px solid #ffffff16;
}
.wx-send-actions .wx-btn { width: 100%; min-height: 44px; margin: 0; }
/* Variable-size secondary pages must stay mouse/touch reachable too. */
.wx-stripe-wallet-entry { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; width: 100%; padding: 16px; margin-top: 12px; border: 1px solid #ffffff20; border-radius: 16px; color: inherit; background: #ffffff08; text-align: left; cursor: pointer; }
.wx-stripe-wallet-entry strong { flex: 1; }
.wx-stripe-wallet-entry small { flex-basis: 100%; color: #a4b5cc; }
.wx-stripe-wallet-entry b { order: -1; }
.wx-stripe-network-list { display: grid; gap: 10px; margin: 12px 0; }
.wx-stripe-network { padding: 14px; border: 1px solid #ffffff20; border-radius: 14px; background: #ffffff06; }
.wx-stripe-network p { margin: 8px 0; }
.wx-stripe-network small { display: block; color: #a4b5cc; }
@media (min-width: 700px) { .wx-stripe-network-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .wx-stripe-network-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Pages whose body already scrolls must not gain a second, non-overflowing
   scroller here: overscroll containment would swallow wheel input over it. */
.wx-body--wallet:not(.wx-body--overview):not(.wx-body--hosted-asset) > .wx-view:not(:has(> .wx-send-form, > .wx-send-review, > .hz-token-assets, > .hz-token-operations)) {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
@media (max-height: 520px) {
  .wx-send-content { gap: 8px; }
  .wx-send-content .wx-review-hero { padding-block: 4px; gap: 3px; }
  .wx-send-content .wx-review-hero .wx-coinlogo { width: 28px; height: 28px; }
  .wx-send-content .wx-review-hero h2 { font-size: 22px; }
  .wx-send-actions { padding-top: 7px; }
}

/* Portfolio actions exclude Buy; asset detail keeps its purchase action. */
.wx-quick-actions--asset .wx-qa.wx-qa--soon,
.wx-quick-actions--asset .wx-qa.wx-qa--soon:hover {
  background: transparent;
  border-color: transparent;
  cursor: not-allowed;
}
.wx-quick-actions--asset .wx-qa.wx-qa--soon b {
  background: #242a3b;
  border-color: #343b50;
  color: #9aa2b8;
}
.wx-quick-actions--portfolio { grid-template-columns:repeat(3,minmax(0,1fr)); }
.wx-quick-actions--portfolio.wx-quick-actions--noswap { grid-template-columns:repeat(2,minmax(0,1fr)); }

/* Secure purchase stays within the wallet; mobile iframe scrolls internally. */
.wx-buy-presets { display:flex; gap:8px; }
.wx-buy-presets .wx-btn { flex:1; min-height:40px; }
.wx-stripe-host { width:100%; min-width:0; }
.wx-stripe-checkout { display:block; border:0; width:100%; height:680px; border-radius:16px; background:#0c152b; }
@media(max-width:480px) { .wx-stripe-checkout { height:720px; } }

/* Inline provider help; no extra modal and no inferred decline reason. */
.hz-stripe-help { margin:10px; padding:10px 12px; border:1px solid #344969; border-radius:10px; background:#111e35; color:#dbe5fa; font:12px/1.5 system-ui,sans-serif; }
.hz-stripe-help summary { cursor:pointer; font-weight:650; }
.hz-stripe-help p { margin:10px 0; }
.hz-stripe-help a { color:#8bc6ff; }
.hz-stripe-load-error { margin:12px; padding:14px; color:#ffe4e9; background:#42152b; border-radius:10px; font:14px/1.5 system-ui,sans-serif; }

/* Aggregate availability sits beneath the total, including compact layouts. */
.wx-portfolio-spendable { display: block; order: 0; flex-basis: auto; color: #8995ad; font-size: 11px; line-height: 1.4; font-weight: 400; text-align: center; }
.wx-portfolio-hero .wx-sync-row { order: 3; }

@media (max-height: 520px) {
  .wx-portfolio-spendable { order: 3; flex-basis: 100%; font-size: 9px; }
  .wx-portfolio-hero .wx-sync-row { order: 4; }
}
/* Asset discovery remains compact even with a large local contract catalog. */
.wx-catalog-search { width:100%; margin:8px 0; box-sizing:border-box; }
.wx-portfolio-row[hidden], .wx-portfolio-empty[hidden] { display:none !important; }
.wx-asset-source-label { font-size:10px; line-height:1.35; opacity:.78; white-space:normal; }
.wx-provider-details { margin:12px 0; padding:10px 12px; border:1px solid rgba(140,170,210,.2); border-radius:12px; font-size:12px; }
.wx-provider-details summary { cursor:pointer; font-weight:600; }
.wx-provider-group { margin:12px 0; overflow-wrap:anywhere; }
.wx-provider-group p { margin:5px 0; line-height:1.5; }
.wx-provider-group a { color:var(--wx-accent,#63d2ff); text-decoration:underline; }
.wx-provider-group .wx-srcdot { display:inline-block; margin-right:6px; }
.wx-portfolio-row .wx-asset-source-label .wx-srcdot { display:inline-block; width:7px; height:7px; margin-right:6px; vertical-align:middle; }
.wx-token-lookup { padding:10px; border:1px solid rgba(140,170,210,.2); border-radius:12px; }
.wx-token-lookup[hidden] { display:none; }